/* AP3 homepage-only layout. Shared identity layer: ap3.css */
/* ---------- sections ---------- */
.sec { padding: 128px 0; }
.sec-head { align-items: end; margin-bottom: 64px; row-gap: 24px; }
.sec-head .label { grid-column: 1 / -1; margin-bottom: 8px; }
.sec-head h2 { grid-column: 1 / span 7; }
.sec-head .lead { grid-column: 9 / span 4; }
@media (max-width: 960px) {
  .sec { padding: 80px 0; }
  .sec-head { margin-bottom: 40px; }
  .sec-head h2, .sec-head .lead { grid-column: 1 / -1; }
}

/* ---------- 01 hero: giant type, the commercial section builds behind it ---------- */
.hero { position: relative; padding-top: var(--header-h); }
.hero-fig { position: absolute; inset: 0 0 auto 0; height: 100svh; min-height: 560px; overflow: hidden; pointer-events: none; }
.hero-fig .dgm-svg { position: absolute; width: 100vw; max-width: none; height: auto; left: calc(77vw - 52.4vw); top: calc(25svh - 29.7vw); }
.hero-stage { position: relative; z-index: 2; min-height: calc(100svh - var(--header-h)); min-height: max(calc(100svh - var(--header-h)), 520px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 88px; }
.display {
  font-weight: 500; font-size: clamp(56px, min(14.2vw, 21svh), 224px); line-height: .88; letter-spacing: -.055em;
  text-align: center; margin-top: 24px;
}
.display .ln { display: block; overflow: visible; }
.display .ln span { display: inline-block; }
.js .display .ln span { opacity: 0; transform: translateY(12px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); transition-delay: calc(var(--l) * 90ms); }
.js .hero.is-in .display .ln span { opacity: 1; transform: none; }
.display .ln:nth-child(1) { --l: 0; } .display .ln:nth-child(2) { --l: 1; } .display .ln:nth-child(3) { --l: 2; } .display .ln:nth-child(4) { --l: 3; }
@media (prefers-reduced-motion: reduce) { .js .display .ln span { opacity: 1; transform: none; transition: none; } }
.hero-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 32px; display: flex; justify-content: space-between; align-items: center; }
.hero-foot .cta-text { background: var(--paper); padding: 10px 14px 8px 0; }
.spine { position: absolute; z-index: 3; left: 16px; bottom: 96px; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 12px var(--mono); letter-spacing: .06em; color: var(--secondary); white-space: nowrap; }
@media (max-width: 640px) { .display { font-size: 16.4vw; } .spine { display: none; } .hero-fig .dgm-svg { width: 200vw; left: calc(70vw - 104.8vw); top: calc(30svh - 59.4vw); } }

.intro { padding: 96px 0 24px; }
.intro .label { grid-column: 1 / -1; margin-bottom: 24px; }
.intro h1 { grid-column: 1 / span 9; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.035em; max-width: 20ch; }
.intro .lead { grid-column: 1 / span 6; margin-top: 32px; }
@media (max-width: 960px) { .intro { padding-top: 64px; } .intro h1, .intro .lead { grid-column: 1 / -1; } }

.titleblock { position: relative; z-index: 2; background: var(--paper); border-top: 1px solid var(--ink); }
.titleblock-grid { padding: 32px 0 48px; }
.tb-legend { grid-column: 1 / span 7; }
.tb-note { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 16px; }
.lg-row { display: grid; grid-template-columns: 48px 180px 1fr; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); transition: background 160ms var(--ease); }
.lg-row:first-child { padding-top: 0; }
.lg-k { font: 400 14px var(--mono); letter-spacing: .06em; color: var(--ink); }
.lg-name { font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.lg-mods { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.lg-mods button {
  font: 400 13px var(--mono); letter-spacing: .02em; padding: 5px 10px; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink);
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
.lg-mods button:hover, .lg-mods button:focus-visible, .lg-mods button.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lg-c01 { grid-template-columns: 48px 1fr; border-bottom: 0; padding-bottom: 0; }
.lg-c01 .lg-k { color: var(--signal); }
.lg-c01 p { font-size: 16px; line-height: 1.45; color: var(--secondary); }
.lg-c01 strong { font-weight: 500; color: var(--ink); }
.role { min-height: 72px; font-size: 17px; line-height: 1.45; border-left: 2px solid var(--blue); padding-left: 16px; color: var(--ink); }
.role .mono { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); }
.keynote { font: 400 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--secondary); }
.keynote b { font-weight: 400; color: var(--ink); }
.replay {
  align-self: flex-start; font: 400 13px var(--mono); letter-spacing: .04em; border: 1px solid var(--ink); border-radius: 2px; padding: 8px 14px;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.replay:hover { background: var(--ink); color: var(--paper); }
.on-ink .replay { border-color: var(--paper); color: var(--paper); }
.on-ink .replay:hover { background: var(--paper); color: var(--ink); }
@media (max-width: 960px) {
  .tb-legend, .tb-note { grid-column: 1 / -1; }
  .tb-note { margin-top: 32px; }
  .lg-row { grid-template-columns: 40px 1fr; row-gap: 8px; }
  .lg-row .lg-mods { grid-column: 2; }
}

/* ---------- 02 orientation (the original SEO copy, kept in full) ---------- */
.orient { background: var(--surface); }
.orient-grid { padding: 64px 0; align-items: start; }
.orient p { grid-column: 1 / span 6; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; letter-spacing: -.01em; max-width: 34ch; }
.orient nav { grid-column: 8 / span 5; border-top: 1px solid var(--ink); }
.orient nav a {
  display: grid; grid-template-columns: 40px 1fr 24px; align-items: baseline; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--rule-strong);
  font-size: 18px; transition: padding-left 240ms var(--ease), color 160ms var(--ease);
}
.orient nav a span:first-child { font: 400 12px var(--mono); letter-spacing: .06em; color: var(--secondary); }
.orient nav a span:last-child { justify-self: end; transition: transform 240ms var(--ease); }
.orient nav a:hover { padding-left: 8px; color: var(--blue); }
.orient nav a:hover span:last-child { transform: translateX(4px); }
@media (max-width: 960px) {
  .orient p, .orient nav { grid-column: 1 / -1; }
  .orient nav { margin-top: 32px; }
  .orient-grid { padding: 48px 0; }
}



/* 03 the path */
.path-fig { border-top: 1px solid var(--ink); padding-top: 40px; }
.path-fig .dgm-svg { display: block; }
.path-fig .fig-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.four { margin-top: 64px; border-top: 1px solid var(--rule-strong); }
.four-item { grid-column: span 3; padding: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.four-item .mono { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); }
.four-item p { font-size: 17px; color: var(--secondary); max-width: 30ch; }
.four-item.is-c01 .mono { color: var(--signal); }
@media (max-width: 960px) { .four-item { grid-column: span 6; padding-bottom: 24px; } .four { row-gap: 8px; } }
@media (max-width: 640px) { .four-item { grid-column: 1 / -1; } }

/* 04 decision sprint (ink field) */
.home-sprint { padding: 112px 0 96px; }
.home-sprint .g12 { align-items: end; row-gap: 40px; }
.sprint-copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 24px; }
.sprint-copy p { font-size: clamp(18px, 1.6vw, 22px); color: var(--inverse-secondary); max-width: 44ch; }
.sprint-action { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.home-sprint-price { font: 400 clamp(56px, 6vw, 88px)/1 var(--mono); letter-spacing: -.04em; }
.home-sprint-note { font: 400 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--inverse-secondary); }
.sprint-fig { margin-top: 72px; border-top: 1px solid var(--inverse-rule); padding-top: 40px; }
@media (max-width: 960px) {
  .home-sprint { padding: 72px 0; }
  .sprint-copy, .sprint-action { grid-column: 1 / -1; }
  .sprint-fig { margin-top: 48px; }
}

/* 06 film (blue brand field) */
.film { padding: 112px 0; }
.film .g12 { row-gap: 40px; align-items: end; }
.film-copy { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 24px; align-self: start; }
.film-frame { grid-column: 5 / span 8; border: 1px solid var(--rule-strong); background: var(--ink); line-height: 0; }
.brand-film-player { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.film-copy .note { font: 400 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--paper); }
@media (max-width: 960px) { .film { padding: 72px 0; } .film-copy, .film-frame { grid-column: 1 / -1; } }

/* 07 method */
.method-grid { align-items: start; row-gap: 48px; }
.method-aside { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 48px); display: flex; flex-direction: column; gap: 24px; }
.method-aside .lead { max-width: 38ch; }
.method-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-top: 16px; }
.steps-list { grid-column: 7 / span 6; list-style: none; position: relative; padding-left: 56px; --p: 0; }
.steps-list::before, .steps-list::after { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; }
.steps-list::before { background: var(--rule-strong); }
.steps-list::after { background: var(--blue); transform: scaleY(var(--p)); transform-origin: top; }
.step-bar { position: relative; padding: 0 0 56px; }
.step-bar:last-child { padding-bottom: 0; }
.step-bar::before {
  content: ""; position: absolute; left: -56px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule-strong); transition: background 240ms var(--ease), border-color 240ms var(--ease);
}
.step-bar.is-reached::before { background: var(--blue); border-color: var(--blue); }
.step-bar-num { font: 400 12px var(--mono); letter-spacing: .06em; color: var(--secondary); margin-bottom: 8px; }
.step-bar-title-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.step-bar h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.025em; }
.step-tag { font: 400 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--blue); color: var(--blue); padding: 3px 8px; border-radius: 2px; }
.step-bar p { color: var(--secondary); max-width: 44ch; }
@media (max-width: 960px) {
  .method-aside { position: static; grid-column: 1 / -1; }
  .steps-list { grid-column: 1 / -1; }
}

/* 08 get started (ink) */
.cta-final { padding: 112px 0; }
.cta-grid { row-gap: 56px; align-items: start; }
.cta-copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px; }
.cta-copy .cta-fig { margin-top: 32px; max-width: 340px; }
.cta-copy .cta-fig figcaption { font: 400 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--inverse-secondary); margin-top: 12px; max-width: 46ch; }
.cta-copy .cta-fig figcaption b { font-weight: 400; color: var(--signal-inv); }
.cta-form-wrap { grid-column: 7 / span 6; }
@media (max-width: 960px) {
  .cta-final { padding: 72px 0; }
  .cta-copy, .cta-form-wrap { grid-column: 1 / -1; }
  .cta-copy { display: contents; }
  .cta-grid { display: flex; flex-direction: column; gap: 40px; }
  .cta-copy .cta-fig { order: 3; align-self: center; }
  .cta-form-wrap { order: 2; }
}
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
/* newsletter + footer */

/* the shared discovery modal (cta-modal.js) takes on the identity on this page only */

/* GTM engineering band (surface field) */
.home-gtm { padding: 96px 0; border-top: 1px solid var(--rule); background: var(--surface); }
.home-gtm .g12 { align-items: end; row-gap: 40px; }
.gtm-copy { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 24px; }
.gtm-copy h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.gtm-copy p { font-size: clamp(18px, 1.6vw, 22px); color: var(--secondary); max-width: 52ch; }
.gtm-action { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
@media (max-width: 960px) { .home-gtm { padding: 72px 0; } .gtm-copy, .gtm-action { grid-column: 1 / -1; } }

/* Outside-In Review pilot band (paper field) */
.home-oir { padding: 96px 0; border-top: 1px solid var(--rule); }
.home-oir .g12 { align-items: end; row-gap: 40px; }
.oir-copy { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 24px; }
.oir-copy h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.oir-copy p { font-size: clamp(18px, 1.6vw, 22px); color: var(--secondary); max-width: 52ch; }
.oir-action { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.oir-note { font: 400 13px/1.5 var(--mono); letter-spacing: .04em; color: var(--secondary); }
@media (max-width: 960px) { .home-oir { padding: 72px 0; } .oir-copy, .oir-action { grid-column: 1 / -1; } }

/* Breakfast + AI interest band */
.home-bk { padding: 72px 0; border-top: 1px solid var(--rule); background: var(--surface); }
.home-bk .g12 { align-items: end; row-gap: 32px; }
.bk-copy { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 20px; }
.bk-copy h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -.02em; }
.bk-copy p { font-size: clamp(17px, 1.4vw, 20px); color: var(--secondary); max-width: 52ch; }
.bk-action { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (max-width: 960px) { .home-bk { padding: 56px 0; } .bk-copy, .bk-action { grid-column: 1 / -1; } }