/* KnightStone membership pages — main-site design system.
   Loaded after service-page.css. Cream/brass editorial: the same palette,
   nav lockup, button treatment and spacing rhythm the home page uses,
   in place of the black utility bar and the saturated-orange bands. */

:root{
  --navy:#20211e; --navy2:#2b2c27; --ink:#252820; --muted:#66685f;
  --gold:#b99a54; --gold2:#d8bd80; --gold-deep:#80662f;
  --bg:#faf9f5; --soft:#f0eee7; --line:#deddd3;
  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Cormorant Garamond',Georgia,serif;
  --ui:Inter,system-ui,sans-serif;
}
body{background:var(--bg);color:var(--ink);font:400 15px/1.7 var(--ui)}
.wrap{width:min(1248px,calc(100% - 80px))}
html{scroll-padding-top:96px}

/* ===== nav: cream bar, ink type, the home page's logo lockup ===== */
nav{background:#faf9f5f5;border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.navin{height:82px;gap:28px}
.brand{display:flex;align-items:center;gap:13px;flex:none;color:var(--ink);font:inherit;letter-spacing:normal}
.brand .lwm{font:400 30px/.95 var(--display);letter-spacing:-.01em;color:var(--ink)}
.brand .lwm span{color:var(--gold-deep)}
.brand .lrule{width:1px;height:34px;flex:none;background:var(--line)}
.brand .lsub{font:500 8px/1.5 var(--ui);letter-spacing:.23em;text-transform:uppercase;color:var(--muted)}
.navlinks{gap:22px;color:var(--ink);font:500 11px/1 var(--ui);letter-spacing:0}
.navlinks a{color:var(--ink)}
.navlinks a:hover{color:var(--gold-deep)}
.navphone{font:600 13px/1 var(--ui);color:var(--ink)!important;white-space:nowrap}

/* ===== buttons: the home page's brass, flat and quiet ===== */
.button{min-height:50px;padding:16px 25px;border-radius:4px;background:var(--gold);background-image:none;
  color:#20211e;font:500 11px/1.2 var(--ui);letter-spacing:.055em;text-transform:none;box-shadow:none;
  transition:background .2s,transform .2s,border-color .2s}
.button:hover{background:#c8ac6e;transform:translateY(-2px)}
.button.secondary{background:transparent;color:var(--ink);border:1px solid #a9ab9e}
.button.secondary:hover{background:#eeeee5;transform:none}
.navlinks .button{min-height:42px;padding:12px 18px}

/* ===== hero ===== */
.hero{background:var(--bg);padding:clamp(64px,7vw,104px) 0 76px}
.crumb{margin-bottom:22px;color:var(--muted);font:500 10px/1.5 var(--ui);letter-spacing:.2em}
.crumb a{color:var(--gold-deep)}
.eyebrow{color:var(--gold-deep);font:500 10px/1.7 var(--ui);letter-spacing:.2em}
.hero h1{margin:14px 0 20px;font:400 clamp(48px,6.4vw,88px)/.99 var(--display);letter-spacing:-.045em}
.lede{max-width:600px;color:var(--muted);font:15px/1.8 var(--ui)}
.hero-grid{gap:58px;align-items:end}
.actions{margin-top:28px;gap:12px}
.factbox{padding:30px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.factbox h2{margin-bottom:14px;font:400 27px/1.15 var(--display);letter-spacing:-.03em;color:var(--ink)}
.factbox ul{gap:10px;padding-left:0;list-style:none;color:var(--muted);font:13px/1.7 var(--ui)}
.factbox li{position:relative;padding-left:19px}
.factbox li::before{content:'✓';position:absolute;left:0;color:var(--gold-deep);font-size:11px}

/* ===== trust row: editorial rule, not a saturated orange band ===== */
.trustbar{background:var(--bg);color:var(--ink);border-block:1px solid var(--line)}
.trustbar .wrap{gap:0}
.trustbar p{padding:25px 18px;font:500 11px/1.5 var(--ui);letter-spacing:0;color:var(--ink)}
.trustbar p+p{border-left:1px solid var(--line)}

/* ===== sections ===== */
.section{padding:clamp(58px,7vw,88px) 0}
.section.soft{background:var(--soft);border-block:1px solid var(--line)}
.section.dark{background:var(--navy);color:#faf9f5}
.section-head{margin-bottom:36px}
.section h2{margin:10px 0 14px;font:400 clamp(38px,4.3vw,60px)/1.05 var(--display);letter-spacing:-.035em}
.section-head p{color:var(--muted);font:15px/1.8 var(--ui);max-width:600px}
.dark .eyebrow{color:var(--gold2)}
.dark .section-head p{color:#b6b8ad}
.grid3{gap:0}
.card{padding:32px 30px;border:1px solid var(--line);border-radius:0;background:var(--bg)}
.grid3 .card:first-child{border-radius:8px 0 0 8px}
.grid3 .card:last-child{border-radius:0 8px 8px 0}
.grid3 .card+.card{border-left:0}
.card .num{width:30px;height:30px;margin-bottom:22px;background:transparent;border:1px solid var(--gold-deep);
  color:var(--gold-deep);font:500 10px/1 var(--ui)}
.card h3{margin-bottom:10px;font:400 27px/1.15 var(--display);letter-spacing:-.03em}
.card p{color:var(--muted);font:13px/1.8 var(--ui)}
.answer{padding:30px;border:1px solid #ffffff1f;border-radius:8px;background:var(--navy2)}
.answer h3{margin-bottom:10px;color:var(--gold2);font:400 24px/1.2 var(--display);letter-spacing:-.02em}
.answer p{color:#c9cbc0;font:13px/1.8 var(--ui)}
.related a{padding:22px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font:500 12px/1.4 var(--ui)}
.related a:hover{border-color:var(--gold)}

/* ===== closing CTA: cream and brass, not a full-bleed orange gradient ===== */
.cta{padding:72px 0;background:var(--soft);border-top:1px solid var(--line);color:var(--ink)}
.cta h2{font:400 clamp(34px,4.3vw,56px)/1.05 var(--display);letter-spacing:-.035em}
.cta .button{background:var(--gold);color:#20211e;box-shadow:none}
.cta .button:hover{background:#c8ac6e}

/* ===== footer + the single quiet footnote ===== */
footer{padding:60px 0 24px;background:#1b1c19;color:#b6b8ad}
.foot h2{font:400 25px/1 var(--display);letter-spacing:-.01em}
.foot h2 span{color:var(--gold2)}
.foot h3{color:var(--gold2);font:500 10px/1.7 var(--ui);letter-spacing:.2em}
.foot p,.foot a{font:13px/1.9 var(--ui);color:#9d9f95}
.foot a:hover{color:var(--gold2)}
.legal{margin-top:34px;padding-top:22px;border-top:1px solid #ffffff14;font:10px/1.7 var(--ui);color:#84867d}
.legal-note{display:block;max-width:860px;margin-bottom:8px}

/* ===== analytics choice: footer-edge card, delayed, never over the hero ===== */
.consent{left:auto;right:20px;bottom:20px;width:min(360px,calc(100% - 32px));max-width:none;margin:0;
  padding:16px 17px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);
  box-shadow:0 14px 40px rgba(32,33,30,.14);animation:ksConsentIn .35s ease 7s both}
.consent p{color:var(--muted);font:500 11px/1.6 var(--ui)}
.consent-actions{gap:8px;margin-top:11px}
.consent button{padding:10px 14px;border:1px solid #a9ab9e;border-radius:4px;background:transparent;color:var(--ink);
  font:500 10px/1.2 var(--ui);letter-spacing:.04em}
.consent button:last-child{background:var(--gold);border-color:var(--gold);color:#20211e}
@keyframes ksConsentIn{from{opacity:0;visibility:hidden;transform:translateY(10px)}to{opacity:1;visibility:visible;transform:none}}

@media(max-width:1000px){
  .wrap{width:min(1248px,calc(100% - 56px))}
  .navlinks{gap:14px;font-size:10px}
  .hero-grid{gap:40px}
}
@media(max-width:850px){
  .navlinks>a:not(.button):not(.navphone){display:none}
  /* Beats the base sheet's blanket link hide — the call link has to survive it. */
  .navlinks>a.navphone{display:inline-flex;align-items:center}
  .grid3 .card{border-radius:8px}
  .grid3 .card+.card{border-left:1px solid var(--line);margin-top:14px}
  .trustbar p+p{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:700px){
  .wrap{width:min(1248px,calc(100% - 48px))}
  .navin{height:68px;gap:12px}
  .brand .lrule,.brand .lsub{display:none}
  .brand .lwm{font-size:25px}
  .navlinks .button{padding:10px 12px;font-size:10px;min-height:40px}
  .hero{padding:52px 0 56px}
  .hero h1{font-size:clamp(42px,10vw,54px)}
  .lede,.section-head p{font-size:13px}
  .cta{padding:54px 0}
  .consent{left:12px;right:12px;bottom:12px;width:auto}
}
@media(max-width:430px){
  /* The black call bar is gone, so the number stays reachable in the nav. */
  .navin{gap:8px}
  .navphone{font-size:12px}
  .brand .lwm{font-size:21px}
  .navlinks{gap:10px}
  .navlinks .button{padding:10px 10px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .consent{animation:none}
  .button:hover{transform:none}
}