/* ===== MareVox — teaser · visual canon ===== */
:root{
  --white:#FFFFFF; --mist-1:#F4F7FA; --mist-2:#E9EEF3;
  --navy:#0A2540; --graphite:#2B3440; --prussia:#0C4A6E; --cobalt:#1A56A0;
  --hairline:#D6DEE7; --ui-border:#9AA8B6;
  --text-slate:#475569; --text-muted:#5B6774; --text-on-navy:#ECF2F9;
  --ok:#067A45; --warn:#B7791F; --bad:#B42318;
  --maxw:1120px; --narrow:760px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--graphite);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:var(--cobalt);text-decoration:none}
strong{color:var(--navy);font-weight:600}
img,svg{display:block;max-width:100%}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:var(--narrow)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:60;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.scrolled{border-bottom-color:var(--hairline);box-shadow:0 1px 0 rgba(10,37,64,.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.wordmark{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--navy);letter-spacing:.5px}
.nav{display:flex;gap:30px}
.nav a{color:var(--text-slate);font-size:15px;font-weight:500;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--cobalt);transition:width .3s var(--ease)}
.nav a:hover{color:var(--navy)}
.nav a:hover::after{width:100%}
.header-cta{padding:9px 18px;font-size:14px;min-height:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:16px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);min-height:44px;padding:12px 24px}
.btn--primary{background:var(--cobalt);color:#fff}
.btn--primary:hover{background:#16498a}
.btn--primary:disabled{opacity:.6;cursor:default}
.btn--full{width:100%}

/* Hero */
.hero{padding:clamp(84px,10vw,124px) 0 clamp(64px,8vw,100px)}
.hero-inner{max-width:880px}
.hero-title{font-size:clamp(40px,6vw,72px);font-weight:600;margin-bottom:26px}
.hero-sub{font-size:clamp(18px,2.2vw,21px);color:var(--text-slate);max-width:60ch;line-height:1.6;margin-bottom:36px}

/* Sections */
.section{padding:clamp(72px,9vw,120px) 0}
.section--mist{background:var(--mist-1)}
.section--navy{background:var(--navy)}
.section-title{font-size:clamp(28px,4vw,44px);margin-bottom:36px;max-width:22ch}
.section-title--light{color:#fff}
.lede{font-size:clamp(17px,2vw,20px);color:var(--text-slate);max-width:62ch;margin-bottom:26px;line-height:1.6}
.lede--light{color:var(--text-on-navy)}

/* Form */
.form{margin-top:40px;max-width:520px}
.field{margin-bottom:20px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:8px}
.field .optional{color:var(--text-muted);font-weight:400}
.field input{width:100%;font-family:var(--sans);font-size:16px;color:var(--graphite);background:var(--white);border:1px solid var(--ui-border);border-radius:8px;padding:13px 15px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field input:hover{border-color:var(--prussia)}
.field input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(26,86,160,.15)}
.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--graphite);background:var(--white);border:1px solid var(--ui-border);border-radius:9px;padding:13px 15px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field select:hover,.field textarea:hover{border-color:var(--prussia)}
.field select:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(26,86,160,.15)}
.field select{cursor:pointer}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.reasons{list-style:none;display:flex;flex-direction:column;gap:32px;margin-top:30px}
.reasons li{padding-left:18px;border-left:2px solid var(--cobalt)}
.reasons h3{font-family:var(--sans);font-size:19px;font-weight:700;color:var(--navy);margin:0 0 9px;letter-spacing:-.01em}
.reasons p{font-size:15.5px;line-height:1.72;color:var(--text-muted);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-status{margin-top:16px;font-size:15px;min-height:1.2em}
.form-status.is-error{color:var(--bad)}
.form-status.is-ok{color:var(--ok)}

/* Footer */
.site-footer{background:var(--navy);color:var(--text-on-navy);padding:40px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-mark{font-family:var(--serif);font-weight:700;font-size:20px;color:#fff}
.footer-meta{font-size:13px;color:#9fb6d2}

/* Reveal */
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* Responsive */
@media (max-width:880px){
  .nav{display:none}
  .section{padding:64px 0}
  .hero{padding:64px 0 52px}
}
@media (max-width:480px){
  .container{padding:0 20px}
  .header-inner{height:64px}
}

/* ===== Header tint (mist / gris nublado) ===== */
.site-header{background:rgba(244,247,250,.82)}

/* ===== Section 3 — Plan (Ask — Verify — Act), navy band, centered =====
   Internal layout (.flow/.flow-step/.flow-desc/.plan-tag) is fully defined
   in Round 26 at the end of this file — kept in one place to avoid the
   accumulated-override bugs earlier rounds caused here. ===== */
.plan{padding:96px 0}

/* ===== Section 4 — Guarantees, centered ===== */
.guarantee{text-align:center}

/* ============================================================
   Premium pass (ui-ux-pro-max) — restraint: editorial type,
   generous whitespace, subtle depth, refined micro-interactions.
   White-first canon · navy #0A2540 · cobalt #1A56A0.
   ============================================================ */

/* Editorial serif tracking — large headings feel tighter, premium */
h1,h2{letter-spacing:-.018em}
.hero-title{line-height:1.05}

/* A whisper of depth on the hero (white → barely-there mist) */
.hero{background:linear-gradient(180deg,#ffffff 0%,#fafcfe 100%)}

/* Generous whitespace (desktop only — keeps mobile tight) */
@media (min-width:881px){
  .section{padding:104px 0}
  .hero{padding:106px 0 86px}
  .plan{padding:112px 0}
  .header-inner{height:76px}
}
.hero-sub{margin-bottom:40px}

/* Buttons — depth + smooth lift on hover, no layout shift */
.btn{border-radius:9px;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease)}
.btn--primary{box-shadow:0 1px 2px rgba(10,37,64,.12)}
.btn--primary:hover{box-shadow:0 12px 26px -12px rgba(26,86,160,.6);transform:translateY(-1px)}

/* Navy "Ask — Verify — Act" band — a statement, with a small cobalt accent */
.plan{position:relative}
.plan::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:2px;background:var(--cobalt)}

/* Problem — ideal line length for reading */
#problem .lede{max-width:64ch}

/* Founding/demo form — premium floating card */
.form{background:var(--white);border:1px solid var(--hairline);border-radius:16px;padding:34px 30px;box-shadow:0 18px 50px -30px rgba(10,37,64,.20)}
.field input{border-radius:9px}

/* Footer — a touch more air */
.site-footer{padding:48px 0}

/* ============================================================
   Round 2 — user refinements (navy buttons, dynamic guarantees,
   centered founding, bigger wordmark)
   ============================================================ */

/* Bigger wordmark */
.wordmark{font-size:34px}

/* Navy buttons (premium, per request) — cobalt now reserved for small accents */
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{background:#0d2f56;box-shadow:0 12px 26px -12px rgba(10,37,64,.55);transform:translateY(-1px)}

/* Header CTA — smaller + navy */
.header-cta{padding:9px 18px;font-size:14px;min-height:0;border-radius:8px}

/* Problem — heading a touch wider so it reads at hero width */
#problem .section-title{max-width:26ch}

/* Accessibility helper */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   Round 3 — workflow-guided premium (more whitespace; larger
   hero display)
   ============================================================ */

/* More breathing room — the primary luxury signal */
@media (min-width:881px){
  .section{padding:128px 0}
  .hero{padding:120px 0 96px}
  .plan{padding:128px 0}
}

/* Larger hero display (premium serif) */
.hero-title{font-size:clamp(38px,6.2vw,74px)}

/* ============================================================
   Round 4 — process flow, guarantee triad, horizontal founding
   ============================================================ */


/* Guarantees — 3 columns (title + sub), titles at section-heading scale */
.guar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;text-align:center}
.guar-h{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-.01em;margin-bottom:12px}
.guar-d{color:var(--text-slate);font-size:clamp(15px,1.6vw,17px);line-height:1.55;max-width:30ch;margin:0 auto}
@media (max-width:780px){.guar-grid{grid-template-columns:1fr;gap:30px}}

/* Founding — horizontal split (intro | form), centered */
.access-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.access-split .form{margin:0;max-width:none;width:100%}
@media (max-width:860px){
  .access-split{grid-template-columns:1fr;gap:32px}
  .access-split .access-intro{text-align:center}
}

/* ============================================================
   Round 5 — dynamic flow arrows, UI in MareVox serif, plans
   ============================================================ */

/* Plans (no prices) */
/* (plans tiers removed — commercial terms now live in the Private Demonstration section) */

/* ============================================================
   Round 6 — darker cool-grey for section contrast
   (same family as the header mist, one clear step darker)
   ============================================================ */
:root{--mist-3:#DFE7F0}
.section--mist{background:var(--mist-3)}

/* ============================================================
   Round 7 — workflow-guided polish (revert UI to sans, header
   grey, depth-via-shadow, navy gradient, calmer faster motion)
   ============================================================ */

/* Header uses the same darker cool-grey */
.site-header{background:rgba(223,231,240,.9)}

/* Revert nav + buttons to sans (Cormorant stays on wordmark + headings) */
.nav a{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.01em}
.btn{font-family:var(--sans);font-weight:600}
.header-cta{font-size:14px}

/* Depth via soft shadows, not borders */
:root{--shadow-sm:0 1px 2px rgba(10,37,64,.06);--shadow-md:0 10px 26px -12px rgba(10,37,64,.16);--shadow-lg:0 18px 50px -30px rgba(10,37,64,.20)}

/* Navy band — subtle vertical depth (lit, not flat) */
.section--navy{background:linear-gradient(180deg,#0B2A47 0%,#0A2540 100%)}

/* Calmer, faster reveal */
html.js [data-reveal]{transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* Button microstates */
.btn--primary:hover{box-shadow:0 8px 20px -10px rgba(10,37,64,.42)}
.btn--primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn:disabled{opacity:.6;transform:none}
/* ============================================================
   Round 6 — premium iteration: Q-ola signature mark (hero)
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero .hero-inner{position:relative;z-index:1}
.hero-qola{position:absolute;top:50%;right:clamp(-140px,-6vw,-40px);transform:translateY(-50%);width:clamp(340px,42vw,600px);height:auto;pointer-events:none;z-index:0;animation:qola-drift 16s ease-in-out infinite alternate}
@keyframes qola-drift{0%{transform:translateY(-52%)}100%{transform:translateY(-46%)}}
@media (prefers-reduced-motion:reduce){.hero-qola{animation:none;transform:translateY(-50%)}}
@media (max-width:900px){.hero-qola{display:none}}

/* ============================================================
   Round 7 — warm paper canon: A ivory base · B warm hairlines
   · C navy depth · D brass micro-accent. Identity intact
   (navy #0A2540 · cobalt #1A56A0 · Cormorant/Jakarta untouched).
   Input borders NOT lightened (WCAG non-text contrast).
   ============================================================ */
:root{
  --paper:#FBFAF7;      /* A — warm ivory body (page reads as paper) */
  --mist-1:#F6F4EF;     /* warm stone — section bands */
  --mist-2:#EFECE5;     /* icon chips */
  --hairline:#E0DDD5;   /* B — warm, lighter hairlines on cards */
  --brass:#B08D57;      /* D — warm counterpoint, micro-moments only */
}
body{background:var(--paper)}
.site-header{background:rgba(250,249,245,.85)}
.hero{background:linear-gradient(180deg,#FDFCFA 0%,#FBFAF7 100%)}
/* C — subtle depth on the navy statement band + footer */
.section--navy{background:linear-gradient(180deg,#0A2540 0%,#081D33 100%)}
.site-footer{background:linear-gradient(180deg,#0A2540 0%,#07192C 100%)}
/* D — brass only where the hand touches: text selection */
::selection{background:rgba(176,141,87,.28)}

/* ============================================================
   Round 8 — band color: cool blue-gray → warm stone (vellum).
   Navy stays as brand ink (Harvey black rejected: navy IS MareVox).
   Chart-on-vellum story: navy ink over warm paper.
   ============================================================ */
:root{--mist-3:#F2EFE8}

/* ============================================================
   Round 9 — footer: stacked, centered, editorial hierarchy
   ============================================================ */
.site-footer{padding:56px 0 44px}
.footer-inner{flex-direction:column;align-items:center;text-align:center;gap:9px}
.footer-mark{font-size:22px}
.footer-disclaimer{max-width:64ch;opacity:.78;font-size:12.5px;line-height:1.6}
.footer-legal{max-width:74ch;opacity:.66;font-size:12px;line-height:1.6}
.footer-inner .footer-meta:last-child{margin-top:12px;padding-top:16px;border-top:1px solid rgba(236,242,249,.14);width:100%;max-width:560px}

/* ============================================================
   Round 10 — hero aligned to the same left edge as sections
   (hero-inner was 880px centered, sections 1120px → offset)
   ============================================================ */
.hero .hero-inner{max-width:var(--maxw)}
.hero-title{max-width:20ch}

/* ============================================================
   Round 12 — correction: hero back to its ORIGINAL margin
   (880px centered); Decision Gap aligned to that same left
   edge; Ask·Verify·Act and centered sections back to center.
   (Reverts Round 11 + Round 10 width change.)
   ============================================================ */
.plan{text-align:center}
.plan::before{left:50%;transform:translateX(-50%)}
.guarantee{text-align:center}
.guar-d{margin:0 auto}
.hero .hero-inner{max-width:880px}
#problem .container{max-width:880px}

/* ============================================================
   Round 13 — "The Governance Gap" (why now): quiet evidence
   list, editorial, subordinated to Ask·Verify·Act
   ============================================================ */
.evidence{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-direction:column;gap:26px;max-width:62ch}
.evidence li{padding-left:18px;border-left:2px solid var(--hairline)}
.evidence p{font-size:clamp(16px,1.9vw,18.5px);line-height:1.65;color:var(--graphite);margin:0 0 6px}
.evidence-src{font-size:13.5px;letter-spacing:.02em;color:var(--text-muted);font-style:italic}
.evidence-close{margin-top:36px}

/* ============================================================
   Round 14 — "The Window Is Now": aligned to the hero/problem
   880px block; paragraph-level source attributions
   ============================================================ */
#whynow .container{max-width:880px}
p.evidence-src{display:block;margin:-16px 0 30px;font-size:13.5px;letter-spacing:.02em;color:var(--text-muted);font-style:italic}

/* (Ask·Verify·Act styles consolidated in Round 26 at end of file) */

/* ============================================================
   Round 16 — audit fixes (LP V4.1): guarantees closing line,
   form note, footer mail, focus handling
   ============================================================ */
.guar-close{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,24px);color:var(--navy);line-height:1.4;max-width:46ch;margin:52px auto 0}
.form-note{margin-top:12px;font-size:13.5px;color:var(--text-muted);text-align:center}
.footer-mail{color:var(--text-on-navy)}
.footer-mail:hover{color:#fff}
.form-status:focus{outline:none}

/* ============================================================
   Round 17 — full-screen chapters: hero and sections fill the
   viewport so the next band never peeks into the fold.
   lvh = largest viewport (mobile URL bar hidden) — no peek in
   any toolbar state. Mobile overrides live HERE (end of file)
   so earlier same-specificity rules cannot re-override them.
   ============================================================ */
.hero{display:flex;align-items:center;min-height:calc(100vh - 72px);min-height:calc(100lvh - 72px)}
.section{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100lvh}
@media (min-width:881px){
  .hero{min-height:calc(100vh - 76px);min-height:calc(100lvh - 76px)}
}
@media (max-width:880px){
  .header-cta{min-height:44px}
}
@media (max-width:480px){
  .hero{min-height:calc(100vh - 64px);min-height:calc(100lvh - 64px)}
  .form{padding:26px 20px}
}

/* ============================================================
   Round 18 — LP V5 (2026-07-15): hero multi-párrafo · sección
   Value (4 tarjetas "How MareVox Supports Your Teams") ·
   sección Where (6 áreas de soporte) · Ask/Verify/Act ampliado
   ============================================================ */

/* Hero en 3 párrafos — mismo estilo, respiro editorial entre ellos */
.hero-sub p{margin:0}
.hero-sub p+p{margin-top:16px}

/* Value — 4 tarjetas 2×2, alineadas al bloque editorial de 880px */
#value .container{max-width:880px}
#value .section-title{max-width:30ch}
.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
.value-card{background:var(--white);border-radius:14px;padding:30px 26px;box-shadow:var(--shadow-sm);position:relative;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.value-card::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;background:var(--cobalt);opacity:0;transition:opacity .2s var(--ease)}
.value-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.value-card:hover::before{opacity:1}
.value-h{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(21px,2.3vw,26px);line-height:1.15;margin-bottom:10px}
.value-d{color:var(--text-slate);font-size:clamp(15px,1.6vw,16.5px);line-height:1.6}
@media (max-width:780px){.value-grid{grid-template-columns:1fr;gap:18px}}

/* Where — 6 áreas como fichas sobre la banda stone, 2×3 */
#where .container{max-width:880px}
#where .section-title{max-width:26ch}
.where-grid{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.where-item{background:var(--white);border:1px solid var(--hairline);border-radius:12px;padding:18px 20px;color:var(--navy);font-weight:600;font-size:clamp(14.5px,1.5vw,16px);line-height:1.45;display:flex;align-items:center;gap:12px;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.where-item::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--cobalt);opacity:.85}
.where-item:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
@media (max-width:560px){.where-grid{grid-template-columns:1fr}}


/* ============================================================
   Round 18b — LP V5.2: "Where" centrado (título en una línea,
   fichas en serif sin puntos, texto centrado)
   ============================================================ */
#where .section-title{max-width:none;text-align:center;margin-left:auto;margin-right:auto;font-size:clamp(26px,3.6vw,40px)}
.where-item{font-family:var(--serif);font-weight:600;font-size:clamp(17px,2vw,21px);line-height:1.25;justify-content:center;text-align:center;padding:22px 20px}
.where-item::before{display:none}

/* ============================================================
   Round 18c — LP V5.3: título Value centrado con acento cobalto ·
   hero de 1 párrafo · animación de "Where" (entrada escalonada,
   subrayado que se dibuja, barra cobalto al hover)
   ============================================================ */
/* Value — encabezado centrado; las cajas (grid 880px) quedan
   simétricas con el bloque de texto en ambos márgenes */
#value .section-title{max-width:none;text-align:center;margin-left:auto;margin-right:auto}
#value .lede{margin-left:auto;margin-right:auto;text-align:center;max-width:66ch}
.title-accent{color:var(--cobalt)}

/* Where — subrayado cobalto que se dibuja al entrar el título */
#where .section-title::after{content:"";display:block;width:56px;height:2px;background:var(--cobalt);margin:18px auto 0;transform:scaleX(0);transition:transform .5s var(--ease) .25s}
#where .section-title.is-visible::after{transform:scaleX(1)}

/* Where — entrada escalonada (animation no interfiere con el hover) */
@keyframes whereIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.js #where .where-item{transform:none;transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
html.js #where .where-item.is-visible{animation:whereIn .55s var(--ease) backwards}
html.js #where .where-item.is-visible:nth-child(2){animation-delay:.08s}
html.js #where .where-item.is-visible:nth-child(3){animation-delay:.16s}
html.js #where .where-item.is-visible:nth-child(4){animation-delay:.24s}
html.js #where .where-item.is-visible:nth-child(5){animation-delay:.32s}
html.js #where .where-item.is-visible:nth-child(6){animation-delay:.40s}

/* Where — hover: leve elevación + barra cobalto lateral que crece */
#where .where-item{position:relative;overflow:hidden}
#where .where-item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cobalt);transform:scaleY(0);transform-origin:top;transition:transform .25s var(--ease)}
#where .where-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
#where .where-item:hover::after{transform:scaleY(1)}

/* ============================================================
   Round 19 — LP V5.4: value cards centered · Where a touch
   larger · Ask→Verify→Act as a connected flow (drawn arrows) ·
   animated "Focus on the decision" tag (light sweep).
   ============================================================ */

/* Value — contenido centrado dentro de cada tarjeta (pedido) */
.value-card{text-align:center}
.value-d{margin-left:auto;margin-right:auto;max-width:34ch}

/* Where — un paso más grande, en coherencia con los títulos de sección */
.where-item{font-size:clamp(18px,2.2vw,23px)}

/* (flow arrows + tag sweep removed — Round 26 owns the process now) */

/* ============================================================
   Round 20 — LP V5.5: Ask·Verify·Act forced to ONE row (grid) ·
   clearly-visible travelling underline on the tag · wordmark
   aligned to the 880 content column · 5th value card full width.
   ============================================================ */

/* Header runs at full content width so the 5 nav items breathe */
.site-header .container{max-width:var(--maxw)}

/* Value — closing card spans the full width */
.value-card--wide{grid-column:1 / -1}

/* (flow single-row grid + travelling underline removed — Round 26 owns the process now) */

/* ============================================================
   Round 21 — LP V5.6 (PROPUESTA, revisar canon): fondo
   fotográfico del hero, anclado a la derecha, con velo de paper
   a la izquierda para que el texto navy siga legible. Oculto en
   móvil (legibilidad + LCP). Q-ola oculta cuando hay foto.
   ============================================================ */
.hero{
  background-color:var(--paper);
  background-image:
    linear-gradient(90deg,var(--paper) 0%,var(--paper) 40%,rgba(251,250,247,.72) 58%,rgba(251,250,247,.28) 100%),
    url(../img/header3.jpg);
  background-image:
    linear-gradient(90deg,var(--paper) 0%,var(--paper) 40%,rgba(251,250,247,.72) 58%,rgba(251,250,247,.28) 100%),
    image-set(url(../img/header3.webp) type("image/webp"),url(../img/header3.jpg) type("image/jpeg"));
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
}
.hero .hero-qola{display:none}
@media (max-width:900px){
  .hero{background-image:none;background-color:var(--paper)}
  .hero .hero-qola{display:none}
}

/* ============================================================
   Round 22 — LP V6: "Our Solution" unifica value + capabilities.
   Eyebrow (reintroducido) · marquee de capacidades accesible
   (loop CSS 45s, pausa hover/focus/botón, reduced-motion → grid
   estático, borde con máscara, sin overflow de página).
   ============================================================ */

/* Eyebrow (kicker) — reintroducido para la sección Our Solution */
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobalt);margin-bottom:14px}

/* Capabilities block — full-bleed dentro de la misma sección */
.cap{margin-top:clamp(46px,6vw,80px)}
.cap-head{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.cap-label{font-family:var(--serif);font-weight:600;color:var(--navy);letter-spacing:-.018em;
  font-size:clamp(28px,4vw,44px);line-height:1.12;text-align:center;margin:0}
/* pause/play toggle removed (LP V6.1) — hover/touch pause only */

/* Lista semántica: visible solo para lectores de pantalla (una vez) */
.cap-list{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;list-style:none}

/* Viewport del marquee: full-bleed + fundido en los bordes */
.cap-viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cap-track{display:flex;width:max-content;gap:clamp(22px,3.4vw,52px);padding:12px 7px;will-change:transform;
  animation:capscroll 45s linear infinite}
@keyframes capscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Pausa: hover/touch — se reanuda al soltar (sin botón) */
.cap-viewport:hover .cap-track{animation-play-state:paused}
/* Uses run free — no boxes: large editorial serif with a brass separator */
.cap-item{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--navy);
  font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.5vw,26px);letter-spacing:-.01em;
  white-space:nowrap}
.cap-item::after{content:"·";margin-left:clamp(22px,3.4vw,52px);color:var(--brass);opacity:.8}

/* Reduced motion: sin animación → lista semántica visible como grid estático */
@media (prefers-reduced-motion:reduce){
  .cap-viewport{display:none}
  .cap-list{position:static;width:auto;height:auto;margin:0 auto;padding:0;overflow:visible;
    clip:auto;white-space:normal;max-width:880px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
  .cap-list li{background:var(--white);border:1px solid var(--hairline);border-radius:12px;
    padding:14px 18px;color:var(--navy);font-weight:600;text-align:center}
}

/* ============================================================
   Round 23 — LP V6.1: interactive benefits (accordion on mobile,
   split tabs on desktop). Single-open, first active by default,
   stable panel, 200-300ms fade, keyboard-accessible native buttons.
   ============================================================ */
.bx{margin-top:clamp(34px,5vw,54px)}

/* Mobile-first: interleaved trigger + panel = accordion */
.bx-trigger{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;
  background:none;border:none;border-top:1px solid var(--hairline);
  padding:20px 4px;cursor:pointer;color:var(--text-muted);font-family:var(--sans);
  transition:color .25s var(--ease)}
.bx-trigger:hover{color:var(--navy)}
.bx-trigger.is-active{color:var(--navy)}
.bx-mark{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--cobalt);opacity:.85;
  align-self:center;box-shadow:0 0 0 3px rgba(26,86,160,.14)}
.bx-title{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.5vw,26px);
  line-height:1.15;letter-spacing:-.01em}
.bx-panel{display:none;padding:2px 4px 22px 42px}
.bx-panel.is-active{display:block}
html.js .bx-panel.is-active{animation:bxfade .26s var(--ease)}
@keyframes bxfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bx-h{display:none}
.bx-d{color:var(--text-slate);font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;max-width:52ch;margin:0}

/* Desktop split: triggers left, single active panel right */
@media (min-width:781px){
  .bx{display:grid;grid-template-columns:minmax(280px,42%) 1fr;
    column-gap:clamp(36px,5vw,80px);align-items:start}
  .bx-trigger{grid-column:1;border-top:none;border-bottom:1px solid var(--hairline);
    border-left:2px solid transparent;padding:22px 4px 22px 18px;margin-left:-18px}
  .bx-trigger.is-active{border-left-color:var(--cobalt)}
  .bx-panel{grid-column:2;grid-row:1 / -1;align-self:start;padding:6px 0 0}
  .bx-h{display:block;font-family:var(--serif);font-weight:600;color:var(--navy);
    font-size:clamp(24px,2.8vw,32px);line-height:1.15;letter-spacing:-.01em;margin:0 0 14px}
}

/* ============================================================
   Round 26 — LP V6.2:
   (a) benefits split: explicit rows + 1fr catcher so a tall
       right-hand panel can NEVER stretch the trigger rows
       (fixes the growing gap between 01 and 02);
   (b) How it works rebuilt as a progressive scroll process:
       Ask → Verify → Act with a cobalt progress line, one
       active description below, and a concluding tag revealed
       after Act. Mobile = clean vertical sequence.
   ============================================================ */

/* (a) stable trigger rows — panel overflow lands in the empty 1fr row */
@media (min-width:781px){
  .bx{grid-template-rows:repeat(5,auto) 1fr}
}

/* (b) the process */
.proc{position:relative}
/* (progress rail removed — cleaner transition from title to Ask/Verify/Act) */
.proc-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,5vw,72px);max-width:940px;margin:0 auto 36px}
.proc-word{font-family:var(--serif);font-weight:600;font-size:clamp(40px,6vw,78px);
  color:#fff;line-height:1;letter-spacing:.01em;display:block;opacity:.32;
  transition:opacity .35s var(--ease)}
.proc-step.is-active .proc-word{opacity:1}
.proc-desc{display:none;color:var(--text-on-navy);font-size:clamp(15px,1.7vw,17.5px);
  line-height:1.6;max-width:56ch;margin:0 auto}
.proc-panel{position:relative;max-width:64ch;margin:0 auto 48px;min-height:5.4em}
.proc-copy{position:absolute;inset:0;margin:0;color:var(--text-on-navy);
  font-size:clamp(15.5px,1.8vw,18.5px);line-height:1.65;opacity:0;
  transition:opacity .3s var(--ease);pointer-events:none}
.proc-copy.is-active{opacity:1}

/* concluding statement — revealed once Act completes */
.plan-tag{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,27px);
  line-height:1.4;color:var(--text-on-navy);max-width:46ch;margin:0 auto;
  display:inline-block;position:relative;padding-bottom:14px;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.plan-tag em{font-style:italic;color:#fff}
.plan-tag::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--cobalt) 50%,transparent 100%);
  background-size:45% 100%;background-repeat:no-repeat;background-position:-50% 0;
  opacity:0;transition:opacity .5s var(--ease) .3s}
.proc.is-done .plan-tag{opacity:1;transform:none}
.proc.is-done .plan-tag::after{opacity:1;animation:underSweep 3.6s var(--ease) infinite}
@keyframes underSweep{0%{background-position:-50% 0}100%{background-position:150% 0}}

/* mobile: vertical sequence Ask ↓ Verify ↓ Act, descriptions inline */
@media (max-width:780px){
  .proc-panel{display:none}
  .proc-steps{grid-template-columns:1fr;gap:6px;max-width:60ch}
  .proc-step{padding:14px 0}
  .proc-step + .proc-step::before{content:"↓";display:block;color:#86b3e8;
    font-size:22px;line-height:1;margin:0 auto 20px}
  .proc-word{opacity:1;font-size:clamp(38px,10vw,56px);margin-bottom:12px}
  .proc-desc{display:block}
}

/* static versions: reduced motion or no JS — everything visible */
@media (prefers-reduced-motion:reduce){
  .proc-panel{display:none}
  .proc-word{opacity:1;transition:none}
  .proc-desc{display:block}
  .plan-tag{opacity:1;transform:none;transition:none}
  .plan-tag::after{opacity:1;animation:none;background-position:50% 0;transition:none}
}
html:not(.js) .proc-panel{display:none}
html:not(.js) .proc-word{opacity:1}
html:not(.js) .proc-desc{display:block}
html:not(.js) .plan-tag{opacity:1;transform:none}
html:not(.js) .plan-tag::after{opacity:1;background-position:50% 0}

/* ============================================================
   Round 28 — LP V6.4: Private Demonstration (replaces the plans
   tiers) + Founding Partner Program closing section. Same
   editorial rhythm as Decision Gap / Our Solution: eyebrow,
   accented title, ledes, numbered steps, serif italic tag.
   ============================================================ */
#demo .container,#founding .container{max-width:880px}

.demo-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);margin:44px 0 38px}
/* step titles in cobalt — blue reads as trust + action, and echoes the title accents */
.demo-h{font-family:var(--serif);font-weight:600;color:var(--cobalt);font-size:clamp(21px,2.3vw,26px);line-height:1.15;margin:0 0 10px}
.demo-d{color:var(--text-slate);font-size:clamp(15px,1.6vw,16.5px);line-height:1.6;margin:0}
.demo-tag{font-family:var(--serif);font-style:italic;color:var(--navy);font-size:clamp(19px,2.2vw,24px);line-height:1.4;margin:0 0 32px}
.demo-cta{margin:0 0 20px}
.demo-note{color:var(--text-muted);font-size:14px;line-height:1.6;max-width:66ch;margin:0}
@media (max-width:780px){.demo-steps{grid-template-columns:1fr;gap:26px}}

/* Founding — centered closing invitation (mirrors the page cadence) */
.founding{text-align:center}
.founding .section-title,.founding .lede,.founding .demo-note{margin-left:auto;margin-right:auto}
.founding-perks{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(18px,2.1vw,23px);letter-spacing:-.01em;margin:4px 0 32px}
.founding-perks span{color:var(--brass);margin:0 12px}

/* How it works — visible section title on the navy band */
.plan-title{margin:0 auto 44px;max-width:none;text-align:center}

/* Decision Gap — closing statement in the same cobalt accent as the titles */
#problem .lede strong{color:var(--cobalt)}