/* home-layout.css — the home page's own composition.
   The rest of the site keeps the stacked, centred section rhythm. The home page
   reads down a spine instead: a sticky heading rail on the left, the argument on
   the right, numbered the whole way down. Everything is keyed to palette tokens,
   so all eight palettes keep working. */

/* ---- the spine -------------------------------------------------------- */

.website{counter-reset:band}
/* The rail carries the index on these sections, so the brand layer's margin
   level mark would be a second, competing number. Keep the datum rule, drop it. */
.band::after,.ribbon::after{display:none}
.band,.ribbon{padding-top:0}
.band{--rail:252px;padding-block:0;border-top:1px solid var(--line)}
.band:first-of-type{border-top:0}
.band-grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(28px,5vw,88px);padding-block:clamp(56px,7vw,104px)}
.band-head{position:sticky;top:96px;align-self:start;counter-increment:band}
.band-head .eyebrow{margin:0 0 14px}
.band-head h2{font-size:clamp(1.65rem,2.1vw,2.1rem);line-height:1.12;letter-spacing:-.025em;margin:0}
.band-head::before{content:counter(band,decimal-leading-zero);
  display:block;font:11px/1 var(--font-mono);letter-spacing:.14em;
  color:var(--amber);margin-bottom:18px}
.band-head .rail-rule{display:block;width:34px;height:1px;background:var(--amber);margin:20px 0 0}
.band-body>:first-child{margin-top:0}
.band-body .lede{max-width:70ch}

/* a band that steps away from the page ground */
.band--wash{background:var(--wash)}
.band--wash+.band{border-top-color:transparent}

/* ---- 01/02/03 progression (Build / Run / Move) ------------------------- */

.step-row{display:grid;gap:0;counter-reset:step}
.step{counter-increment:step;display:grid;grid-template-columns:72px minmax(0,1fr);
  gap:clamp(16px,2.4vw,34px);padding-block:30px;border-top:1px solid var(--line);position:relative}
.step:first-child{border-top:0;padding-top:0}
.step::before{content:counter(step,decimal-leading-zero);
  font:12px/1 var(--font-mono);letter-spacing:.1em;color:var(--amber);padding-top:7px}
.step-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(16px,2.6vw,40px);align-items:baseline}
.step h3{font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.18;letter-spacing:-.02em;margin:0}
.step h3 .step-kicker{display:block;font:11px/1.4 var(--font-mono);text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);margin-bottom:10px;font-weight:400}
.step p{margin:0;color:var(--muted);line-height:1.7;font-size:15.5px}

/* ---- the environment strip (freedom) ---------------------------------- */

.env-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-top:34px}
.env-cell{border:1px solid var(--line);border-top:2px solid var(--amber);
  background:var(--surface);padding:20px 18px 22px;border-radius:2px}
.env-cell .env-name{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
.env-cell .env-sub{display:block;font:10.5px/1.5 var(--font-mono);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}
.env-foot{margin-top:18px!important}

/* ---- the audience roster ---------------------------------------------- */

.roster{list-style:none;margin:0;padding:0;counter-reset:row}
.roster-item{counter-increment:row;display:grid;
  grid-template-columns:56px minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(14px,2.4vw,36px);padding-block:26px;border-top:1px solid var(--line);align-items:baseline}
.roster-item:first-child{border-top:0;padding-top:4px}
.roster-item::before{content:counter(row,decimal-leading-zero);
  font:12px/1 var(--font-mono);letter-spacing:.1em;color:var(--amber)}
.roster-id h3{margin:0;font-size:clamp(1.1rem,1.4vw,1.3rem);letter-spacing:-.015em;line-height:1.2}
.roster-lead{margin:7px 0 0;font-size:14px;color:var(--amber)}
.roster-copy p{margin:0;color:var(--muted);line-height:1.7;font-size:15.5px}
.roster-copy .text-link{display:block;margin-top:10px}
/* Use-case mock screens: under the words, spanning both text columns. Desktop only (1100px+),
   since below that the console rows shrink past reading. */
.roster-shot{grid-column:2 / -1;margin-top:6px!important;max-width:960px}
.roster-shot img{border-radius:6px;border:1px solid color-mix(in srgb,var(--steel,#7f8f9e) 40%,transparent);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.6);background:#151517}
.roster-item:has(.roster-shot){row-gap:14px}
@media(max-width:1099px){.roster-shot{display:none}}

/* ---- the slim trust ribbon -------------------------------------------- */

.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.ribbon .container{display:grid;grid-template-columns:var(--rail,252px) minmax(0,1fr);
  gap:clamp(28px,5vw,88px);padding-block:36px;align-items:center}
.ribbon-head .eyebrow{margin:0 0 10px}
.ribbon-head h2{margin:0;font-size:clamp(1.3rem,1.6vw,1.6rem);line-height:1.15;letter-spacing:-.02em}
.ribbon p{margin:0 0 12px;color:var(--muted);line-height:1.7;max-width:78ch}
.ribbon .ribbon-links{display:flex;flex-wrap:wrap;gap:22px}

/* ---- responsive ------------------------------------------------------- */

@media(max-width:1020px){
  .band-grid,.ribbon .container{grid-template-columns:1fr;gap:26px}
  .band-head{position:static}
  .band-head h2{font-size:1.85rem}
  .step-main{grid-template-columns:1fr;gap:10px}
  .roster-item{grid-template-columns:44px minmax(0,1fr);row-gap:10px}
  .roster-copy{grid-column:2}
}
@media(max-width:700px){
  .env-strip{grid-template-columns:1fr}
  .step{grid-template-columns:44px minmax(0,1fr);gap:14px}
}
/* Multi-paragraph band copy (#freedom): space the paragraphs and keep a readable measure. */
.band-body>.lede+.lede{margin-top:1em}
#freedom .band-body>.lede{max-width:70ch}

/* The cost case (#cost, COPY-PACK-roi.md). Reuses the metrics strip, cards and highlighted box;
   these only size them for the band's narrower body column. */
/* Sized to the column, not the window: the widest figure ($27k–$58k) is about 4.8em wide. */
#cost .cost-metrics article{container-type:inline-size}
#cost .cost-metrics strong{font-size:min(58px,20cqi);margin:14px 0 10px;white-space:nowrap}
#cost .cost-lede{margin:44px 0 20px}
#cost .cost-routes h3{font-size:21px;margin:18px 0 12px}
#cost .cost-routes article{padding:24px}
#cost .cost-answer{margin:28px 0 0;align-items:center;grid-template-columns:auto 1fr;padding:30px 34px}
#cost .cost-answer strong{font-size:clamp(36px,3.4vw,50px);white-space:nowrap;display:block;margin-top:8px}
#cost .cost-answer h3{margin-top:0}
#cost .cost-objection{margin-top:40px;padding-left:22px;border-left:2px solid var(--amber-deep)}
#cost .cost-objection h3{font-size:22px;margin:0 0 12px}
#cost .cost-objection .lede{margin:0;max-width:82ch}
@media(max-width:760px){
 #cost .cost-metrics strong{font-size:48px}
 #cost .cost-routes{gap:0;border-block:1px solid var(--line)}
 #cost .cost-routes article{background:none;border:0;border-radius:0;padding:20px 0}
 #cost .cost-routes article+article{border-top:1px solid var(--line)}
 #cost .cost-routes h3{margin:10px 0 8px}
 #cost .cost-answer{grid-template-columns:1fr;padding:24px}
}

/* Card grids never leave one card alone on a row: the auto-fit grid in v3.css put the
   six /platform services cards 5 + 1 (4 + 2 at 1280) and the three home cost routes 2 + 1
   at 1024. Six sit 3 + 3 (2 + 2 + 2 below 1100); three sit in one row above phone width. */
@media (min-width:761px){
 .v3-cards:has(>article:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
 .v3-cards:has(>article:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:761px) and (max-width:1099px){
 .v3-cards:has(>article:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Compatible by design (COPY-PACK-audit.md C-2). */
#compatible .lede{margin:0 0 28px;max-width:62ch}
.compat-v3{display:grid;gap:22px}
.compat-v3-row ul{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0;padding:0;list-style:none}
.compat-v3-row li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line,rgba(127,127,127,.3));border-radius:999px;font-size:15px}
.compat-mark{width:16px;height:16px;flex:none;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.compat-mark--dot{width:6px;height:6px;border-radius:50%;-webkit-mask:none;mask:none;background:var(--amber)}
#compatible .compat-claim{margin-top:28px;max-width:68ch;font-size:16px}
#compatible .compat-claim strong{color:var(--amber)}
:root[data-palette="gf-porcelain"] #compatible .compat-claim strong{color:var(--signal-deep)}

/* Questions buyers ask us (COPY-PACK-audit.md F-1, F-2). */
.faq-list{border-top:1px solid var(--line,rgba(127,127,127,.3))}
.faq-item{border-bottom:1px solid var(--line,rgba(127,127,127,.3))}
.faq-item summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:500}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;font-size:22px;line-height:1;color:var(--amber)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.faq-answer{padding:0 0 22px;max-width:70ch}
.faq-answer>p{margin:0 0 14px}
.faq-answer dl{display:grid;gap:10px;margin:0}
.faq-answer dt{font-weight:600}
.faq-answer dd{margin:2px 0 0}