/* ============ GOAS shared design system ============ */
:root{
  --ink:#16233F; --ink-soft:#3A4867; --slate:#4A5A78;
  --gold:#B08D57; --gold-soft:#D7C4A3; --rust:#A8482F; --grey:#6B6B6B;
  --paper:#F7F4EC; --paper-dim:#EFEAE0; --line:#DDD5C4; --white:#FFFFFF;
  --display:'Space Grotesk',sans-serif; --body:'Source Serif 4',serif; --mono:'IBM Plex Mono',monospace;
  --maxw:1120px; --maxw-narrow:820px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased;}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:var(--maxw-narrow); margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-0.01em; line-height:1.1;}

/* ---- tags ---- */
.tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; padding:5px 10px; border-radius:3px; color:var(--white); white-space:nowrap;}
.tag-scale{background:var(--ink);}
.tag-defend{background:var(--slate);}
.tag-recover{background:var(--gold); color:var(--ink);}
.tag-learn{background:var(--grey);}
.tag-dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7;}

/* ---- nav ---- */
header{position:sticky; top:0; z-index:50; background:rgba(247,244,236,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--maxw); margin:0 auto;}
.logo{font-family:var(--mono); font-weight:600; font-size:15px; letter-spacing:0.06em; color:var(--ink); display:flex; align-items:center; gap:8px; text-decoration:none;}
.logo-mark{width:9px; height:9px; background:var(--gold); display:inline-block; transform:rotate(45deg);}
.navlinks{display:flex; gap:26px; font-family:var(--mono); font-size:12.5px; letter-spacing:0.03em;}
.navlinks a{text-decoration:none; color:var(--ink-soft); transition:color .15s;}
.navlinks a:hover, .navlinks a.active{color:var(--gold);}
.nav-cta{font-family:var(--mono); font-size:12px; letter-spacing:0.04em; background:var(--ink); color:var(--paper); padding:9px 16px; border-radius:2px; text-decoration:none; border:1px solid var(--ink); transition:background .15s, color .15s;}
.nav-cta:hover{background:transparent; color:var(--ink);}
@media(max-width:760px){ .navlinks{display:none;} }

/* ---- mobile menu ---- */
.mobile-menu-btn{display:none; background:none; border:none; font-size:22px; color:var(--ink); cursor:pointer; padding:4px 8px; appearance:none; line-height:1;}
@media(max-width:760px){ .mobile-menu-btn{display:block;} }
.mobile-panel{
  display:none; position:fixed; top:57px; left:0; right:0; bottom:0; z-index:60;
  background:var(--paper); overflow-y:auto;
}
.mobile-panel.open{display:block;}
.mobile-panel-inner{padding:8px 24px 40px;}
.mobile-panel a{
  display:block; padding:18px 0; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:16px; color:var(--ink); text-decoration:none;
}
.mobile-panel a.active{color:var(--gold);}
.mobile-panel .mp-cta{margin-top:20px;}

/* ---- buttons ---- */
.btn{font-family:var(--mono); font-size:13px; letter-spacing:0.03em; padding:13px 22px; border-radius:2px; text-decoration:none; display:inline-block; transition:all .15s; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-primary:hover{background:var(--paper); color:var(--ink);}
.btn-ghost{color:var(--ink); border-color:var(--ink-soft);}
.btn-ghost:hover{border-color:var(--ink); background:var(--paper-dim);}
.btn-on-dark{color:var(--paper); border-color:rgba(247,244,236,0.4);}
.btn-on-dark:hover{background:rgba(247,244,236,0.08);}

/* ---- eyebrow ---- */
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.eyebrow::before{content:''; width:20px; height:1px; background:var(--gold);}

/* ---- page hero (secondary pages) ---- */
.page-hero{padding-top:56px; padding-bottom:44px; border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(30px,4.6vw,48px); max-width:20ch;}
.page-hero p.lede{font-size:17.5px; color:var(--ink-soft); margin-top:18px; max-width:62ch;}

/* ---- sections ----
   NOTE: section elements also carry class="wrap" for max-width + horizontal
   padding. .wrap's shorthand `padding:0 24px` sets padding-top/bottom to 0,
   which — as a class selector — beats the plain `section` element selector
   below on specificity. The section.wrap rule uses longhand top/bottom only
   so it never fights .wrap for the horizontal properties, and wins the
   vertical ones via higher specificity (element+class > class alone). */
section{padding-top:60px; padding-bottom:60px;}
section.wrap{padding-top:60px; padding-bottom:60px;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head h2{font-size:clamp(24px,3.2vw,34px); color:var(--ink);}
.section-head p{color:var(--ink-soft); margin-top:12px; font-size:16px;}
.section-num{font-family:var(--mono); font-size:12px; color:var(--gold); margin-bottom:10px;}
p.body-p{color:var(--ink-soft); font-size:16px; max-width:70ch; margin-bottom:16px;}
p.body-p b{color:var(--ink); font-weight:600;}
.border-b{border-bottom:1px solid var(--line);}

/* ---- callout ---- */
.callout{background:var(--white); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:4px; padding:20px 22px; margin:22px 0; font-size:15.5px; color:var(--ink-soft);}
.callout b{color:var(--ink); font-family:var(--display); font-weight:600;}

/* ---- quadrant ---- */
.quad-wrap{background:var(--paper-dim);}
.quad-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; border:1px solid var(--ink); border-radius:6px; overflow:hidden;}
@media(max-width:640px){ .quad-grid{grid-template-columns:1fr;} }
.quad{padding:28px 26px; color:var(--white); min-height:150px; display:flex; flex-direction:column; justify-content:space-between;}
.quad h3{font-size:20px; margin-bottom:10px; letter-spacing:0.02em;}
.quad p{font-family:var(--body); font-size:14.5px; opacity:0.92; max-width:34ch;}
.quad a{font-family:var(--mono); font-size:12px; text-decoration:underline; margin-top:14px; display:inline-block;}
.quad-scale{background:var(--ink);}
.quad-scale a{color:var(--gold-soft);}
.quad-defend{background:var(--slate);}
.quad-defend a{color:#EFE6D8;}
.quad-recover{background:var(--gold); color:var(--ink);}
.quad-recover p{opacity:0.85;}
.quad-recover a{color:var(--ink);}
.quad-learn{background:var(--grey);}
.quad-learn a{color:#EAEAEA;}

/* ---- cards / grid ---- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media(max-width:800px){ .grid-2{grid-template-columns:1fr;} }
.card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:24px;}
.card.wide{grid-column:1 / -1;}

/* ---- proof-style card ---- */
.proof-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px;}
.proof-title{font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink);}
.proof-row{font-size:14px; color:var(--ink-soft); margin-bottom:8px;}
.proof-row b{color:var(--ink); font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; display:block; margin-bottom:2px;}
.proof-result{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); font-family:var(--mono); font-size:14px; color:var(--rust); font-weight:600;}

/* ---- table ---- */
table{width:100%; border-collapse:collapse; font-size:14.5px;}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);}
th{font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--grey); font-weight:600;}
td.num, th.num{text-align:right; font-family:var(--mono);}
tr.highlight td{background:var(--paper-dim); font-weight:600; color:var(--ink);}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:var(--white);}
.table-wrap table{margin:0;}
.table-wrap th:first-child, .table-wrap td:first-child{padding-left:18px;}

@media(max-width:600px){
  .stack-table table, .stack-table thead, .stack-table tbody, .stack-table tr, .stack-table td{display:block; width:100%;}
  .stack-table thead{display:none;}
  .stack-table tr{border-bottom:2px solid var(--line); padding:14px 16px;}
  .stack-table tr:last-child{border-bottom:none;}
  .stack-table td{border:none; padding:6px 0 !important;}
  .stack-table td::before{content:attr(data-label); display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold); margin-bottom:2px;}
  .stack-table td[data-label="Best fit"]{font-weight:600; color:var(--ink);}
}

/* ---- capacity indicator ---- */
.capacity{
  display:inline-flex; align-items:center; gap:10px; background:var(--paper-dim);
  border:1px solid var(--line); border-radius:20px; padding:7px 14px 7px 10px; margin-top:12px;
  max-width:100%; box-sizing:border-box;
}
.capacity-dots{display:flex; gap:4px; flex-shrink:0;}
.capacity-dots .dot{width:8px; height:8px; border-radius:50%; background:var(--line); border:1.5px solid var(--grey); flex-shrink:0;}
.capacity-dots .dot.filled{background:var(--rust); border-color:var(--rust);}
.capacity-text{font-family:var(--mono); font-size:12px; color:var(--ink); white-space:normal; line-height:1.3;}
.capacity-text b{color:var(--rust);}
.capacity.open .capacity-text b{color:var(--gold);}
.capacity.on-dark{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.18);}
.capacity.on-dark .capacity-text{color:var(--paper);}
.capacity.on-dark .capacity-dots .dot{background:transparent; border-color:rgba(255,255,255,0.4);}
.capacity.on-dark .capacity-dots .dot.filled{background:var(--gold); border-color:var(--gold);}

/* ---- inline CTA banner (repeatable, lighter than cta-final) ---- */
.cta-banner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:22px 26px; margin:36px 0;
}
.cta-banner-text{flex:1; min-width:220px;}
.cta-banner-text p{font-family:var(--display); font-size:16.5px; font-weight:600; color:var(--ink); margin-top:8px;}
.cta-banner .btn{flex-shrink:0;}
@media(max-width:560px){ .cta-banner{ flex-direction:column; align-items:flex-start; } }

/* ---- steps ---- */
.steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:20px;}
@media(max-width:880px){ .steps{grid-template-columns:1fr 1fr;} }
@media(max-width:520px){ .steps{grid-template-columns:1fr;} }
.step{border-top:2px solid var(--ink); padding-top:14px;}
.step .n{font-family:var(--mono); font-size:12px; color:var(--gold); margin-bottom:8px;}
.step h4{font-size:16px; margin-bottom:8px;}
.step p{font-size:14px; color:var(--ink-soft);}

/* ---- pricing ---- */
.pricing-wrap{background:var(--ink); color:var(--paper);}
.pricing-wrap .section-head p{color:var(--gold-soft);}
.pricing-wrap .section-head h2{color:var(--paper);}
.price-card{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); border-radius:6px; padding:30px;}
.price-card.hi{border-color:var(--gold);}
.price-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold);}
.price-name{font-size:22px; margin:10px 0 4px;}
.price-amount{font-family:var(--mono); font-size:15px; color:var(--gold-soft); margin-bottom:18px;}
.price-list{list-style:none;}
.price-list li{font-size:14.5px; padding:9px 0; border-top:1px solid rgba(255,255,255,0.1); color:rgba(247,244,236,0.85);}
.price-list li:first-child{border-top:none;}
.retainer-note{margin-top:18px; padding-top:18px; border-top:1px dashed rgba(255,255,255,0.2); font-size:13.5px; color:rgba(247,244,236,0.7);}

/* ---- FAQ accordion ---- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 0; font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; appearance:none;}
.faq-q .plus{font-family:var(--mono); font-size:18px; color:var(--gold); transition:transform .2s; flex-shrink:0;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{color:var(--ink-soft); font-size:15px; padding-bottom:20px; max-width:66ch;}

/* ---- disclaimer ---- */
.disclaimer{margin-top:20px; font-family:var(--mono); font-size:12px; color:var(--grey); border-left:2px solid var(--line); padding-left:12px;}

/* ---- CTA final ---- */
.cta-final{text-align:center; padding-top:76px; padding-bottom:76px;}
.cta-final h2{font-size:clamp(28px,4vw,40px); max-width:18ch; margin:0 auto 16px;}
.cta-final p{color:var(--ink-soft); font-size:16px; margin-bottom:28px;}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:26px 0; background:var(--paper-dim);}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.foot-row .logo{font-size:13px;}
footer p{font-family:var(--mono); font-size:11.5px; color:var(--grey);}
.foot-nav{display:flex; gap:18px; font-family:var(--mono); font-size:12px;}
.foot-nav a{text-decoration:none; color:var(--ink-soft);}
.foot-nav a:hover{color:var(--gold);}

/* ---- reveal on scroll ---- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }