/* ITovio design system (revamp, Oct 2026)
   Tokens live in brand-head.ejs (:root / html.dark). This file holds the
   component layer: layout rhythm, type, buttons, panels, tables, nav, footer,
   forms, FAQ, cards, motion primitives. Tailwind utilities remain available
   for one-off layout; anything used twice lives here. Two radii, no card
   shadows, one reserved float shadow, transform-only reveals. */

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }
.sec { padding-block: clamp(4.5rem, 3rem + 4vw, 7rem); }
.sec-sm { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.sec-lg { padding-block: clamp(6rem, 4rem + 6vw, 10rem); }
.sec + .sec, .sec + .sec-sm, .sec-sm + .sec, .sec-sm + .sec-sm, .sec-lg + .sec { border-top: 1px solid var(--card-border); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.c7 { grid-column: span 12; } .c5 { grid-column: span 12; } .c6 { grid-column: span 12; } .c4 { grid-column: span 12; } .c8 { grid-column: span 12; } .c3 { grid-column: span 12; }
@media (min-width: 1024px) {
  .c7 { grid-column: span 7; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
  .c4 { grid-column: span 4; } .c8 { grid-column: span 8; } .c3 { grid-column: span 3; }
}
.prose-col { max-width: 68ch; }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* ── Type ───────────────────────────────────────────────── */
.display { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; line-height: 1.05; letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.t9 { font-size: var(--fs-9); } .t8 { font-size: var(--fs-8); } .t7 { font-size: var(--fs-7); } .t6 { font-size: var(--fs-6); }
.t5 { font-size: var(--fs-5); } .t4 { font-size: var(--fs-4); } .t3 { font-size: var(--fs-3); } .t2 { font-size: var(--fs-2); } .t1 { font-size: var(--fs-1); }
.lede { font-size: var(--fs-3); line-height: 1.55; color: var(--text-muted); max-width: 56ch; text-wrap: pretty; }
.muted { color: var(--text-muted); } .faint { color: var(--text-faint); }
.eyebrow { display: block; font-size: var(--fs-1); font-weight: 600; color: var(--accent); margin-bottom: .75rem; }
html.dark .eyebrow { color: var(--accent2); }
.h2 { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-7); line-height: 1.1; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.h3 { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-5); line-height: 1.15; color: var(--text); text-wrap: balance; }
.h4 { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-3); line-height: 1.25; color: var(--text); }
.body { font-size: var(--fs-2); line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.small { font-size: var(--fs-1); line-height: 1.5; }
.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
html.dark .link { color: var(--accent2); }
.link:hover { text-decoration-thickness: 2px; }
.sec-head { max-width: 72ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sec-head .lede { margin-top: 1rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: 0 1.4rem; border-radius: var(--r-control); font-weight: 600; font-size: var(--fs-2); line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--btn-primary-bg, var(--navy)); color: #fff; border-color: transparent; box-shadow: 0 6px 18px -8px rgba(11,111,184,.6); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 24px -8px rgba(11,111,184,.7); }
html.dark .btn-primary { background: var(--accent); border-color: var(--accent); color: #06111f; }
html.dark .btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--card-border); }
.btn-secondary:hover { border-color: var(--text); }
.btn-ghost { background: transparent; color: var(--accent); padding-inline: .5rem; }
html.dark .btn-ghost { color: var(--accent2); }
.btn-ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-wa { background: #075E54; color: #fff; border-color: #075E54; }
.btn-wa:hover { background: #064a42; border-color: #064a42; }
.btn-sm { min-height: 38px; padding: 0 1rem; font-size: var(--fs-1); }
.btn-lg { min-height: 52px; padding: 0 1.8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-control); color: var(--text); border: 1px solid transparent; background: transparent; cursor: pointer; }
.icon-btn:hover { border-color: var(--card-border); }
.icon-btn svg { width: 20px; height: 20px; }

/* ── Panels, lists, tables ──────────────────────────────── */
.panel { border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.panel-navy { background: var(--navy-deep); color: #fff; border-color: transparent; --text: #fff; --text-muted: rgba(255,255,255,.72); --text-faint: rgba(255,255,255,.5); --card-border: rgba(255,255,255,.14); --card-bg: rgba(255,255,255,.04); --accent: #9ed0f5; --accent2: #bfe0fa; }
.panel-navy .btn-primary { background: #fff; color: var(--navy-deep); border-color: #fff; }
.panel-navy .btn-primary:hover { background: #e6eef7; border-color: #e6eef7; }
.panel-navy .btn-secondary { color: #fff; border-color: rgba(255,255,255,.3); }
.panel-navy .btn-secondary:hover { border-color: #fff; }
.panel-navy .eyebrow { color: #9ed0f5; }
.hairline { border: 0; border-top: 1px solid var(--card-border); margin: 0; }
.rule-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--card-border); }
.rule-list > li { padding: 1rem 0; border-bottom: 1px solid var(--card-border); display: grid; grid-template-columns: 1fr; gap: .35rem 2rem; }
@media (min-width: 768px) { .rule-list.two > li { grid-template-columns: minmax(0, 18rem) 1fr; } }
.rule-list b { color: var(--text); font-weight: 600; }
.rule-list span { color: var(--text-muted); }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; color: var(--text-muted); line-height: 1.5; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .85rem; height: .5rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
html.dark .check-list li::before { border-color: var(--accent2); }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.ledger th { text-align: left; font-weight: 600; color: var(--text-faint); padding: .6rem 0; border-bottom: 1px solid var(--text); font-size: var(--fs-1); }
.ledger td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--card-border); vertical-align: top; color: var(--text-muted); }
.ledger td:first-child { color: var(--text); font-weight: 600; }
.ledger td:last-child { padding-right: 0; white-space: nowrap; color: var(--text-faint); }
.ledger-wrap { overflow-x: auto; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--card-border); font-size: var(--fs-1); color: var(--text-muted); background: var(--card-bg); }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.metric { display: grid; gap: .25rem; }
.metric .num { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-7); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.metric .lab { color: var(--text-muted); font-size: var(--fs-1); }
.metric .src { color: var(--text-faint); font-size: var(--fs-1); }
.status { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status.pass { background: #1a9e5c; } .status.partial { background: #c9971f; } .status.missing { background: var(--text-faint); }

/* ── Posture panel (hero and /security) ─────────────────── */
.posture-panel { border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); padding: 1.5rem; }
.posture-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.posture-title { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-2); color: var(--text); }
.posture-date { font-size: var(--fs-1); color: var(--text-faint); white-space: nowrap; }
.posture-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--card-border); }
.posture-row { display: flex; align-items: center; gap: .65rem; padding: .6rem 0; border-bottom: 1px solid var(--card-border); font-size: var(--fs-1); }
.posture-row .lab { font-weight: 600; color: var(--text); flex: none; }
.posture-row .det { color: var(--text-muted); margin-left: auto; text-align: right; }
.posture-foot { font-size: var(--fs-1); color: var(--text-faint); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--card-border); }
.posture-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
html.dark .posture-foot a { color: var(--accent2); }

/* ── Cards ──────────────────────────────────────────────── */
.card { display: block; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); color: inherit; text-decoration: none; transition: border-color .15s ease; }
a.card:hover { border-color: var(--text); }
.card .h3, .card .h4 { margin-bottom: .5rem; }
.card .body { margin-bottom: 1rem; }
.card .more { color: var(--accent); font-weight: 600; font-size: var(--fs-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
html.dark .card .more { color: var(--accent2); }
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .card-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.pillar-card { display: grid; gap: 1rem; align-content: start; }
.pillar-card .kicker { font-size: var(--fs-1); color: var(--text-faint); }
.case-card .meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: var(--fs-1); color: var(--text-faint); margin-bottom: .75rem; }
.case-card .hero-line { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-4); line-height: 1.2; color: var(--text); }
.insight-card time { font-size: var(--fs-1); color: var(--text-faint); display: block; margin-bottom: .5rem; }
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; }
.logo-strip .name { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-3); color: var(--text-faint); letter-spacing: -0.01em; white-space: nowrap; }
.logo-strip img { height: 34px; width: auto; }

/* ── Steps ──────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; row-gap: 0; padding: 1.25rem 0; border-top: 1px solid var(--card-border); }
.steps > li > * { grid-column: 2; }
.steps > li::before { content: counter(step, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 3; font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-4); color: var(--accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
html.dark .steps > li::before { color: var(--accent2); }
.steps b { display: block; color: var(--text); font-size: var(--fs-3); font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; margin-bottom: .25rem; }
.steps span { color: var(--text-muted); line-height: 1.55; }
.steps i { font-style: normal; color: var(--text-faint); font-size: var(--fs-1); display: block; margin-top: .4rem; }
@media (min-width: 1024px) { .steps.row { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem; } .steps.row > li { grid-template-columns: 1fr; border-top: 2px solid var(--card-border); padding-top: 1rem; } .steps.row > li > * { grid-column: 1; } .steps.row > li::before { grid-column: 1; grid-row: auto; margin-bottom: .5rem; } }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--card-border); }
.faq details { border-bottom: 1px solid var(--card-border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.1rem 0; font-weight: 600; color: var(--text); font-size: var(--fs-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); flex: none; transition: transform .2s ease; }
html.dark .faq summary::after { color: var(--accent2); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 1.25rem; color: var(--text-muted); line-height: 1.6; max-width: 68ch; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── Quote ──────────────────────────────────────────────── */
.quote { border-left: 2px solid var(--accent); padding-left: 1.25rem; }
.quote p { font-size: var(--fs-3); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.quote footer { margin-top: .75rem; font-size: var(--fs-1); color: var(--text-muted); }

/* ── Forms ──────────────────────────────────────────────── */
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-1); font-weight: 600; color: var(--text); }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: .6rem .85rem; border-radius: var(--r-control); border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); font: inherit; font-size: var(--fs-2); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field .hint { font-size: var(--fs-1); color: var(--text-faint); }
.field .err { font-size: var(--fs-1); color: #b4231f; display: none; }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #b4231f; }
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: var(--fs-1); color: var(--text-muted); line-height: 1.5; }
.consent input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--navy); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--fs-1); color: var(--text-faint); }
.alert { padding: 1rem 1.1rem; border-radius: var(--r-control); border: 1px solid var(--card-border); font-size: var(--fs-1); }
.alert.ok { border-color: #1a9e5c; color: var(--text); }
.alert.bad { border-color: #b4231f; color: var(--text); }

/* ── Nav ────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: var(--nav-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.nav.is-scrolled { border-bottom-color: var(--card-border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 68px; }
.nav-logo img { height: 44px; width: auto; display: block; }
.site-logo { filter: none; }
html.dark .site-logo { filter: invert(1) brightness(1.6); }
.nav-links { display: none; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links button { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: var(--r-control); color: var(--text); font-weight: 600; font-size: var(--fs-1); text-decoration: none; background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.nav-links a:hover, .nav-links button:hover, .nav-links a[aria-current="page"] { background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav-links button svg { width: 14px; height: 14px; transition: transform .2s ease; }
.nav-links button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-actions { display: none; align-items: center; gap: .5rem; }
.nav-burger { display: inline-flex; }
@media (min-width: 1024px) { .nav-links { display: flex; } .nav-actions { display: flex; } .nav-burger { display: none; } }
.mega { position: absolute; left: 0; top: calc(100% + 8px); width: 44rem; display: none; grid-template-columns: 1.4fr 1fr; gap: 0; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); box-shadow: var(--shadow-float); overflow: hidden; }
.mega.open { display: grid; }
.mega-main { padding: .75rem; display: grid; gap: .25rem; }
.mega-side { padding: 1.25rem; border-left: 1px solid var(--card-border); background: color-mix(in srgb, var(--text) 3%, transparent); display: grid; gap: .75rem; align-content: start; }
.nav-links .mega a { display: block; padding: 0; font-weight: 500; background: transparent; }
.nav-links .mega a.mega-item { display: grid; gap: .15rem; padding: .7rem .8rem; border-radius: var(--r-control); text-decoration: none; color: inherit; }
.nav-links .mega a.mega-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.mega-item b, .mega-item span { display: block; }
.mega-item b { color: var(--text); font-weight: 600; font-size: var(--fs-2); }
.mega-item span { color: var(--text-muted); font-size: var(--fs-1); line-height: 1.4; }
.nav-links .mega-side a { color: var(--text); font-weight: 600; font-size: var(--fs-1); text-decoration: none; }
.mega-side a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-side p { color: var(--text-muted); font-size: var(--fs-1); line-height: 1.45; }
.drawer { display: none; border-top: 1px solid var(--card-border); background: var(--nav-bg); max-height: calc(100vh - 68px); overflow-y: auto; }
.drawer.open { display: block; }
.drawer-inner { padding: .75rem 0 1.25rem; display: grid; gap: .25rem; }
.drawer a { display: block; padding: .8rem .5rem; color: var(--text); font-weight: 600; text-decoration: none; border-radius: var(--r-control); }
.drawer a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.drawer .group { padding: .5rem .5rem 0; font-size: var(--fs-1); color: var(--text-faint); font-weight: 600; }
.drawer .sub a { padding-left: 1.25rem; font-weight: 500; }
.drawer .drawer-cta { display: grid; gap: .5rem; padding: 1rem .5rem 0; border-top: 1px solid var(--card-border); margin-top: .5rem; }
.drawer .drawer-cta .btn { width: 100%; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: var(--r-control); }
.skip:focus { left: 8px; }

/* ── Footer ─────────────────────────────────────────────── */
.foot { background: var(--footer-bg); color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.08); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; --text: #fff; --text-muted: rgba(255,255,255,.72); --text-faint: rgba(255,255,255,.5); --card-border: rgba(255,255,255,.14); }
.foot-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr; } }
.foot h3, .foot .foot-h { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; color: #fff; font-size: var(--fs-2); margin-bottom: .9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot a { color: rgba(255,255,255,.72); text-decoration: none; font-size: var(--fs-1); }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot p { font-size: var(--fs-1); line-height: 1.55; }
.foot .brand img { height: 48px; width: auto; margin-bottom: 1rem; }
.foot-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-size: var(--fs-1); color: rgba(255,255,255,.55); }
.foot-social { display: flex; gap: .5rem; }
.foot-social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--r-control); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); }
.foot-social a:hover { border-color: #fff; color: #fff; }
.foot-social svg { width: 16px; height: 16px; }

/* ── Motion primitives ──────────────────────────────────── */
/* Transform-only scroll reveal. Content is always visible; the offset simply
   resolves when the element enters the viewport (CSS scroll-driven when
   supported, IntersectionObserver fallback adds .in). */
.rv { transform: translateY(18px); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { transform: none; }
@supports (animation-timeline: view()) {
  .rv { transition: none; animation: rv-up linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  .rv.in { animation: rv-up linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes rv-up { from { transform: translateY(22px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .rv, .rv.in { transform: none !important; animation: none !important; transition: none !important; } }
.hero-line { display: block; }
.sticky-col { position: sticky; top: 92px; }
.progress-rail { position: relative; width: 2px; background: var(--card-border); }
.progress-rail > i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--accent); transform-origin: top; transform: scaleY(0); }
html.dark .progress-rail > i { background: var(--accent2); }

/* ── Sticky mobile CTA ──────────────────────────────────── */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom)); background: var(--nav-bg); border-top: 1px solid var(--card-border); backdrop-filter: blur(10px); display: none; gap: .5rem; transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
.sticky-cta.show { transform: none; visibility: visible; transition: transform .3s ease; }
.sticky-cta .btn { flex: 1; }
@media (max-width: 1023px) { .sticky-cta { display: flex; } }

/* ── Hero spacing (fixed nav is 68px) ───────────────────── */
@media (max-width: 640px) { .hero h1.t9 { font-size: var(--fs-8); } }
.hero { padding-top: calc(68px + clamp(3.5rem, 2rem + 4vw, 6.5rem)); padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }
.page-top { padding-top: calc(68px + clamp(2.5rem, 1.5rem + 3vw, 4.5rem)); }

/* ── Misc ───────────────────────────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: var(--fs-1); color: var(--text-faint); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--fs-1); color: var(--text-muted); }
.badge-row span { display: inline-flex; align-items: center; gap: .45rem; }
.tldr { border: 1px solid var(--card-border); border-left: 3px solid var(--accent); border-radius: var(--r-control); padding: 1rem 1.25rem; }
.tldr b { display: block; margin-bottom: .5rem; color: var(--text); }
.tldr ul { margin: 0; padding-left: 1.1rem; color: var(--text-muted); }
.def { border: 1px solid var(--card-border); border-radius: var(--r-panel); padding: 1.25rem 1.5rem; }
.def dt { font-weight: 700; color: var(--text); font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-size: var(--fs-3); }
.def dd { margin: .4rem 0 0; color: var(--text-muted); line-height: 1.6; }
html:not(.dark) .logo-strip img.inv-light { filter: grayscale(1) invert(1) brightness(.35); }
html:not(.dark) .logo-strip img.inv-light:hover { filter: invert(1) brightness(.35); }
.ledger.cmp td { white-space: normal; color: var(--text-muted); }
.ledger.cmp td:last-child { white-space: normal; color: var(--text); font-weight: 600; }
.ledger.cmp th:last-child, .ledger.cmp td.itv { color: var(--text); }
.legal h2 { margin-top: 2.25rem; margin-bottom: .6rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--text-muted); line-height: 1.65; margin-bottom: .9rem; max-width: 72ch; text-wrap: pretty; }
.legal table { margin: .75rem 0 1.25rem; }
.legal td { white-space: normal !important; color: var(--text-muted) !important; }
.legal td:first-child { color: var(--text) !important; }

/* ── Consent banner ─────────────────────────────────────── */
.consent-bar { position: fixed; left: 16px; bottom: 16px; z-index: 70; max-width: 26rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); box-shadow: var(--shadow-float); padding: 1rem 1.1rem; display: grid; gap: .75rem; }
.consent-bar[hidden] { display: none; }
.consent-bar p { font-size: var(--fs-1); color: var(--text-muted); line-height: 1.5; margin: 0; }
@media (max-width: 1023px) { .consent-bar { left: 8px; right: 8px; bottom: 72px; max-width: none; } }

/* ── Loader (first visit per session; CSS auto-exits even without JS) ──────── */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--page-bg); display: grid; place-items: center; animation: loader-auto .45s ease 1.3s forwards; }
.loader.done, html.no-loader .loader { display: none; }
@keyframes loader-auto { to { opacity: 0; visibility: hidden; } }
.loader-inner { display: grid; justify-items: center; gap: 1rem; }
.loader-mark { width: 150px; height: auto; animation: loader-pulse 1.2s ease-in-out infinite; }
html.dark .loader-mark { filter: invert(1) brightness(1.6); }
@keyframes loader-pulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
.loader-bar { width: 160px; height: 2px; background: var(--card-border); overflow: hidden; border-radius: 2px; }
.loader-bar i { display: block; height: 100%; width: 40%; background: var(--navy); animation: loader-run 1.1s ease-in-out infinite; }
html.dark .loader-bar i { background: var(--accent2); }
@keyframes loader-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.loader-text { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; color: var(--text-faint); font-size: var(--fs-1); letter-spacing: .04em; }

/* ── Page-transition veil ───────────────────────────────── */
.veil { position: fixed; inset: 0; background: var(--page-bg); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.veil.on { opacity: 1; pointer-events: auto; }

/* ── Hero background: dot grid under a pointer spotlight + slow gradient drift ── */
.hero-bg { position: relative; isolation: isolate; overflow: hidden; --mx: 60%; --my: 35%; }
.hero-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1.5px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(520px 380px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%); mask-image: radial-gradient(520px 380px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%); opacity: .55; }
.hero-bg::after { content: ""; position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none; opacity: .5;
  background: radial-gradient(40% 50% at 20% 30%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), radial-gradient(35% 45% at 85% 20%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 70%);
  animation: hero-drift 18s ease-in-out infinite alternate; }
html.dark .hero-bg::after { opacity: .7; }
@keyframes hero-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(3%, -4%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .hero-bg::after { animation: none; } }

/* ── Logo marquee + logo grid ───────────────────────────── */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 3.5rem; width: max-content; padding-block: .5rem; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; } }
.marquee-item { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 .75rem; border-radius: var(--r-control); }
.marquee-item img { height: 36px; width: auto; max-width: 160px; object-fit: contain; transition: transform .2s ease; }
.marquee-item:hover img { transform: scale(1.06); }
html.dark .marquee-item:not(.is-dark) { background: #fff; padding: 0 .9rem; }
.marquee-item.is-round img { height: 44px; width: 44px; border-radius: 50%; object-fit: cover; }
.marquee-item.is-dark { background: var(--navy-deep); padding: 0 1rem; }
.marquee-item.is-dark img { filter: none; }
/* Marks: a square favicon or monogram beside the client's name, for sites that have no horizontal logo. */
.marquee-item.is-mark { gap: .6rem; padding: 0 .9rem; }
.marquee-item.is-mark img { height: 34px; width: 34px; max-width: none; border-radius: 9px; object-fit: cover; }
.marquee-item.is-mark span { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-2); letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
html.dark .marquee-item.is-mark span { color: var(--navy); }
.logo-tile.is-mark img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; }
.ent-tile.is-mark img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.logo-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.logo-tile { display: grid; justify-items: center; gap: .6rem; padding: 1.25rem .75rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); text-decoration: none; color: var(--text-muted); font-size: var(--fs-1); transition: border-color .15s ease; }
.logo-tile:hover { border-color: var(--text); color: var(--text); }
.logo-tile img { height: 48px; width: auto; max-width: 100%; object-fit: contain; }
.logo-tile.is-round img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
html.dark .logo-tile:not(.is-dark):not(.is-round) img { background: #fff; padding: .35rem .6rem; border-radius: var(--r-control); }
.logo-tile.is-dark { background: var(--navy-deep); color: rgba(255,255,255,.75); border-color: transparent; }

/* ── Tilt + magnetic + nav states ───────────────────────── */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.nav { transition: transform .35s ease, border-color .2s ease; }
.nav.is-hidden { transform: translateY(-100%); }
html.gsap .rv, html.gsap .rv.in { animation: none !important; transition: none !important; transform: none; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 95; background: var(--navy); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
html.dark .scroll-progress { background: var(--accent2); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.steps.row > li { position: relative; }
.steps.row > li::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(var(--rule, 1)); transform-origin: left center; }
html.dark .steps.row > li::after { background: var(--accent2); }

/* ── Legacy pages (careers, referral, partnerships, socials, verify, signup, checkout):
      neutralise the retired decorative backgrounds so they sit in the new system ── */
.tech-grid, .blueprint-grid, .box-grid { background-image: none !important; animation: none !important; }
.glow-orb, .cta-orb { display: none !important; }
html:not(.dark) .navy-band.blueprint-grid, html:not(.dark) .navy-band { background-image: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%) !important; }

/* ── Contact form extras ────────────────────────────────── */
.check-grid { display: grid; gap: .4rem .9rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.check { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-1); color: var(--text-muted); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--navy); }
html.dark .check input, html.dark .consent input { accent-color: var(--accent2); }

/* ── Key facts box ──────────────────────────────────────── */
.tldr ul { display: grid; gap: .45rem; }
.tldr li { line-height: 1.5; }


/* ── Revamp 2: colour, conversion sections, growth chapter ─────────────── */
.grad, .grad .hw { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad .hw { display: inline-block; }
/* headings over the particle field get a soft halo of page colour */
html.has-scene .sec-head, html.has-scene .hero-home .c7, html.has-scene .growth-copy { position: relative; }
html.has-scene .sec-head::before, html.has-scene .hero-home .c7::before, html.has-scene .growth-copy::before { content: ""; position: absolute; inset: -2.5rem -4rem; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--page-bg) 94%, transparent) 55%, transparent 100%); }
.hue-sky { --hue: var(--hue-sky); --hue-soft: var(--hue-sky-soft); } .hue-violet { --hue: var(--hue-violet); --hue-soft: var(--hue-violet-soft); } .hue-green { --hue: var(--hue-green); --hue-soft: var(--hue-green-soft); } .hue-amber { --hue: var(--hue-amber); --hue-soft: var(--hue-amber-soft); } .hue-rose { --hue: var(--hue-rose); --hue-soft: var(--hue-rose-soft); } .hue-navy { --hue: var(--hue-navy); --hue-soft: var(--hue-navy-soft); } .hue-teal { --hue: var(--hue-teal); --hue-soft: var(--hue-teal-soft); } .hue-indigo { --hue: var(--hue-indigo); --hue-soft: var(--hue-indigo-soft); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--hue-soft, var(--hue, var(--accent))); flex: none; }
.band { background: var(--page-bg2); }
.panel-tint { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--card-bg)), color-mix(in srgb, var(--accent2) 10%, var(--card-bg))); }
.scene-anchor { display: block; width: 0; height: 0; }
.scene-anchor.abs { position: absolute; left: 0; }
.hero-home { min-height: calc(100vh - 68px); display: flex; align-items: center; }
@media (max-width: 899px) { .hero-home { min-height: 0; padding-top: calc(68px + 42vh); } .hero-space { display: none; } }
.hero-home .eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--card-bg)); font-size: var(--fs-1); }
.hero-home .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 25%, transparent); }
.trust-line { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; margin-top: 1.5rem; font-size: var(--fs-1); color: var(--text-muted); }
.trust-line .stars { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; }
.trust-line .stars:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.star-row { display: inline-flex; gap: 2px; }
.star-row svg { width: 16px; height: 16px; fill: #00b67a; }
/* problem cards */
.card.problem { display: grid; gap: .6rem; align-content: start; border-top: 3px solid var(--hue-soft, var(--hue)); }
.card.problem .chip { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 10px; background: color-mix(in srgb, var(--hue-soft, var(--hue)) 16%, transparent); color: var(--hue); margin-bottom: .25rem; }
.card.problem .chip svg { width: 22px; height: 22px; }
.card.problem .body { margin-bottom: .25rem; }
.card.problem .more { color: var(--hue); }
/* growth chapter */
.growth { position: relative; height: 420vh; }
.growth-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.growth-copy { position: relative; }
.growth-steps { position: relative; min-height: 22rem; margin-top: 1.5rem; }
.growth-step { position: absolute; inset: 0; opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.growth-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.growth-step .step-n { display: block; font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; color: var(--accent); margin-bottom: .5rem; }
.growth-step .step-n i { font-style: normal; color: var(--text-faint); font-weight: 500; }
.growth-step .lede { margin-top: .5rem; color: var(--text); }
.growth-step .body { margin-top: .6rem; }
.growth-step .rev { margin-top: .75rem; padding: .7rem .9rem; border-radius: var(--r-control); background: color-mix(in srgb, var(--accent) 9%, var(--card-bg)); border-left: 3px solid var(--accent2); color: var(--text); font-weight: 600; font-size: var(--fs-1); }
.growth-step .pill-row { margin-top: 1rem; }
.growth-step .pill { text-decoration: none; }
.growth-step .pill:hover { border-color: var(--accent); color: var(--accent); }
.growth-bar { height: 3px; background: var(--card-border); border-radius: 3px; overflow: hidden; margin-top: 1.5rem; max-width: 22rem; }
.growth-bar i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.growth-hint { margin-top: .6rem; }
.growth-word { display: flex; align-items: center; justify-content: center; }
.growth-word span { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 800; font-size: clamp(3.2rem, 1.6rem + 9vw, 8.5rem); letter-spacing: -.03em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 899px) { .growth { height: 400vh; } .growth-stage .wrap { padding-top: 5.5rem; } .growth-word { order: -1; min-height: 22vh; } .growth-steps { min-height: 24rem; } .growth-step .body { display: none; } }
@media (prefers-reduced-motion: reduce) { .growth-step { transition: none; } }
/* hub */
.hub-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .hub-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hub-col { border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); padding: 1.25rem; border-top: 3px solid var(--hue-soft, var(--hue)); }
.hub-col h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .75rem; }
.hub-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hub-col li + li { border-top: 1px solid var(--card-border); }
.hub-col a { display: grid; gap: .15rem; padding: .7rem 0; text-decoration: none; color: inherit; }
.hub-col a b { color: var(--text); font-weight: 600; font-size: var(--fs-2); }
.hub-col a span { color: var(--text-muted); font-size: var(--fs-1); line-height: 1.45; }
.hub-col a:hover b { color: var(--hue); text-decoration: underline; text-underline-offset: 3px; }
/* reasons */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .reasons { grid-template-columns: 1fr 1fr; } }
.reasons li { display: grid; gap: .35rem; padding: 1.1rem 1.2rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); }
.reasons li > span:first-child { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; color: var(--accent); font-size: var(--fs-1); }
.reasons li b { color: var(--text); font-size: var(--fs-3); font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; }
.reasons li > span:last-child { color: var(--text-muted); line-height: 1.5; }
/* enterprise tier */
.ent-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 700px) { .ent-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1100px) { .ent-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.ent-tile { display: grid; justify-items: center; align-content: start; gap: .6rem; padding: 1.5rem 1rem 1.25rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); text-decoration: none; color: var(--text); text-align: center; transition: border-color .15s ease, transform .2s ease; }
.ent-tile:hover { border-color: var(--accent); }
.ent-tile img { height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.ent-tile b { font-size: var(--fs-1); font-weight: 600; line-height: 1.3; }
.ent-tile span { font-size: var(--fs-1); color: var(--text-faint); line-height: 1.35; }
.ent-tile.is-dark { background: var(--navy-deep); color: #fff; border-color: transparent; }
.ent-tile.is-dark span { color: rgba(255,255,255,.6); }
html.dark .ent-tile:not(.is-dark) img { background: #fff; padding: .4rem .7rem; border-radius: var(--r-control); }
/* reviews */
.reviews { display: grid; gap: 1rem; margin-top: .5rem; }
.review { border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); padding: 1.1rem 1.2rem; margin: 0; display: grid; gap: .45rem; }
.review b { color: var(--text); font-size: var(--fs-2); }
.review p { color: var(--text-muted); line-height: 1.55; font-size: var(--fs-1); }
.review footer { font-size: var(--fs-1); color: var(--text-faint); }
.review footer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.trustbox-wrap { margin-top: 1rem; min-height: 52px; }
.trustbox-wrap a { color: var(--accent); font-size: var(--fs-1); text-decoration: underline; text-underline-offset: 3px; }
/* steps: 3 across */
@media (min-width: 1024px) { .steps.row.three { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* final CTA */
.cta-panel { position: relative; overflow: hidden; padding: clamp(2rem, 1.5rem + 3vw, 4rem); text-align: center; background: var(--navy-deep); }
.cta-panel::before { content: ""; position: absolute; inset: -40% -20%; background: radial-gradient(50% 50% at 20% 30%, rgba(0,191,224,.35), transparent 70%), radial-gradient(45% 50% at 85% 70%, rgba(124,92,246,.35), transparent 70%); pointer-events: none; }
.cta-panel > * { position: relative; }
/* solutions page */
.jump-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; counter-reset: j; }
.jump-list a { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-1); border-bottom: 1px solid var(--card-border); }
.jump-list li:last-child a { border-bottom: 0; }
.jump-list a:hover { color: var(--accent); }
.chain { display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: c; }
@media (min-width: 700px) { .chain { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .chain { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.chain-step { position: relative; display: grid; gap: .3rem; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); text-decoration: none; color: inherit; border-top: 3px solid var(--hue-soft, var(--hue)); }
.chain-step .chain-n { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; color: var(--hue); }
.chain-step b { color: var(--text); font-size: var(--fs-3); font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; }
.chain-step span:last-child { color: var(--text-muted); font-size: var(--fs-1); line-height: 1.5; }
@media (min-width: 1024px) { .chain-step:not(:last-child)::after { content: ""; position: absolute; right: -1rem; top: 50%; width: 1rem; height: 2px; background: var(--card-border); } }
.solution { scroll-margin-top: 80px; }
.symptoms { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.symptoms li { position: relative; padding-left: 1.4rem; color: var(--text-muted); line-height: 1.5; }
.symptoms li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--hue-soft, var(--hue, var(--accent))); }
.cost { margin-top: 1.25rem; padding: .9rem 1rem; border-radius: var(--r-control); background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-muted); line-height: 1.55; font-size: var(--fs-1); }
.cost b { color: var(--text); }
.solution-panel { border-top: 4px solid var(--hue-soft, var(--hue)); }
.solution-panel .outcome { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--card-border); color: var(--text); line-height: 1.55; }
.angle-grid { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .angle-grid { grid-template-columns: 1fr 1fr; } }
.card.angle { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; }
.card.angle b { color: var(--text); font-size: var(--fs-2); }
.card.angle span { color: var(--text-muted); font-size: var(--fs-1); line-height: 1.45; }
.card.angle em { font-style: normal; color: var(--accent); font-size: var(--fs-1); font-weight: 600; margin-top: .25rem; }
/* keep the first paint cheap: below-fold sections render lazily */


/* ── Frames: pinned, scroll-driven scenes (GSAP ScrollTrigger). Without GSAP (html:not(.gsap))
      every frame is a normal section and every slide/stack/strip is plain flow. ─────────── */
.frame { position: relative; display: flex; align-items: center; padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
html.gsap .frame { min-height: 100vh; min-height: 100svh; padding-block: 0; overflow: hidden; }
.frame-inner { width: 100%; }
html.gsap .frame-inner { will-change: transform, opacity; }
.frame-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.frame-head > div:first-child { max-width: 56ch; }
.frame-head .lede { max-width: 40ch; }
.scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; width: 22px; height: 36px; margin-left: -11px; border: 2px solid var(--card-border); border-radius: 12px; opacity: .7; }
.scroll-cue span { position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 899px) { .scroll-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }
.hero-stage { will-change: transform, opacity; }

/* problems strip */
.strip-wrap { overflow: hidden; }
html:not(.gsap) .strip-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.strip { display: flex; gap: 1.25rem; padding-inline: max(24px, calc((100vw - 1280px) / 2 + 24px)); padding-block: .5rem; width: max-content; will-change: transform; }
.strip .card.problem { position: relative; flex: 0 0 clamp(290px, 32vw, 420px); display: grid; gap: .6rem; align-content: start; min-height: clamp(300px, 40vh, 380px); border-top: 3px solid var(--hue-soft, var(--hue)); transform-origin: 50% 60%; }
/* unfocused slides are veiled with the page colour (a veil, not transparency, so the text itself keeps its contrast) */
.strip .card.problem::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--page-bg); opacity: var(--dim, 0); pointer-events: none; }
.strip .card.problem .idx { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; color: var(--text-faint); font-size: var(--fs-1); }
.strip .card.problem .chip { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--hue-soft, var(--hue)) 16%, transparent); color: var(--hue); }
.strip .card.problem .chip svg { width: 24px; height: 24px; }
.strip .card.problem .h3 { margin-top: .4rem; }
.strip .card.problem .body { margin-bottom: 0; }
.strip .card.problem .more { color: var(--hue); margin-top: auto; }
.strip .strip-end { --hue: var(--accent); --hue-soft: var(--accent2); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--card-bg)), color-mix(in srgb, var(--accent2) 14%, var(--card-bg))); }
.strip-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.strip-dots { display: flex; gap: .4rem; }
.strip-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--card-border); transition: background .25s ease, width .25s ease; }
.strip-dots i.is-on { background: var(--accent); width: 34px; }
html:not(.gsap) .strip-dots { display: none; }

/* growth chapter: step zoom + glow */
.growth-step { transform: translateY(26px) scale(.94); transform-origin: 0 40%; }
.growth-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 50% at 72% 50%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 70%); transform: scale(var(--glow, 1)); transform-origin: 72% 50%; transition: transform .6s ease; }
@media (max-width: 899px) { .growth-glow { background: radial-gradient(60% 30% at 50% 22%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 70%); transform-origin: 50% 22%; } }

/* hub: zoom out from the core */
.hub-stage { position: relative; display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); transform-origin: 50% 32%; will-change: transform; }
.hub-core { display: grid; justify-items: center; text-align: center; gap: .5rem; max-width: 60ch; margin-inline: auto; }
.hub-core img { width: 72px; height: auto; margin-bottom: .25rem; }
.hub-core .h2 { max-width: 20ch; }
.hub-core .lede { margin-top: .25rem; text-align: center; }
.hub-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .hub-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hub-col { border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); padding: 1.1rem 1.2rem; border-top: 3px solid var(--hue-soft, var(--hue)); will-change: transform, opacity; }
.hub-col h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.hub-col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hub-col li + li { border-top: 1px solid var(--card-border); }
.hub-col a { display: grid; gap: .1rem; padding: .55rem 0; text-decoration: none; color: inherit; }
.hub-col a b { color: var(--text); font-weight: 600; font-size: var(--fs-2); }
.hub-col a span { color: var(--text-muted); font-size: var(--fs-1); line-height: 1.4; }
.hub-col a:hover b { color: var(--hue); text-decoration: underline; text-underline-offset: 3px; }
.hub-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
@media (max-height: 820px) and (min-width: 1100px) { .hub-col a span { display: none; } .hub-core .lede { display: none; } }
@media (max-width: 899px) { .hub-col a span { display: none; } .hub-core .lede { display: none; } .hub-grid { gap: .6rem; } .hub-col { padding: .8rem .9rem; } .hub-col a { padding: .4rem 0; } }

/* why: card stack */
.stack-count { margin-top: 1.5rem; font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; color: var(--text-faint); font-size: var(--fs-3); }
.stack-count b { color: var(--accent); }
html:not(.gsap) .stack-count { display: none; }
.stack { position: relative; display: grid; gap: 1rem; }
html.gsap .stack { height: clamp(300px, 46vh, 420px); display: block; }
.reason-card { display: grid; gap: .5rem; align-content: start; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); border-top: 4px solid var(--hue-soft, var(--hue)); box-shadow: var(--shadow-float); will-change: transform, opacity; transform-origin: 50% 0; }
html.gsap .reason-card { position: absolute; inset: 0; }
.reason-card > span { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; color: var(--hue); font-size: var(--fs-1); }
.reason-card b { color: var(--text); font-size: var(--fs-5); font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; line-height: 1.15; }
.reason-card p { color: var(--text-muted); line-height: 1.55; font-size: var(--fs-2); max-width: 48ch; }

/* proof: slides */
.slide-nav { display: flex; gap: .35rem; padding: .3rem; border: 1px solid var(--card-border); border-radius: 999px; background: var(--card-bg); }
.slide-nav button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-weight: 600; font-size: var(--fs-1); padding: .45rem .9rem; border-radius: 999px; cursor: pointer; }
.slide-nav button.is-on { background: var(--navy); color: #fff; }
html.dark .slide-nav button.is-on { background: var(--accent); color: #06111f; }
html:not(.gsap) .slide-nav { display: none; }
.slides { position: relative; }
html.gsap .slides { min-height: clamp(360px, 54vh, 520px); }
.slide { will-change: transform, opacity; }
html.gsap .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
html:not(.gsap) .slide + .slide { margin-top: 2.5rem; }
.slide .ent-tile { will-change: transform, opacity; }
.slide .card, .slide .review { will-change: transform, opacity; }
@media (max-width: 899px) { html.gsap .slides { min-height: 60vh; } .slide .card-grid.three { grid-template-columns: 1fr; gap: .75rem; } .slide .card-grid .card:nth-child(n+3), .slide .card-grid .review:nth-child(n+3) { display: none; } .slide .ent-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; } .slide .ent-tile { padding: .9rem .5rem .8rem; } .slide .ent-tile img { height: 36px; } .slide .ent-tile span { display: none; } }

/* how: timeline */
.how { position: relative; display: grid; gap: 1.25rem; grid-template-columns: 1fr; padding-top: 1.5rem; }
@media (min-width: 900px) { .how { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; } }
.how-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--card-border); border-radius: 3px; overflow: hidden; }
.how-line i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
html:not(.gsap) .how-line i { transform: none; }
.how-step { display: grid; gap: .5rem; align-content: start; padding: 1.5rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); will-change: transform, opacity; transform-origin: 50% 100%; }
.how-n { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-6); color: var(--accent); line-height: 1; }
.how-step b { color: var(--text); font-size: var(--fs-4); font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; }
.how-step p { color: var(--text-muted); line-height: 1.55; }
.how-step i { font-style: normal; color: var(--text-faint); font-size: var(--fs-1); }

/* zoom-in entrance for the final call */
[data-zoom-in] { will-change: transform, opacity; }
@media (max-width: 899px) { .how-step { padding: 1rem 1.1rem; gap: .3rem; } .how-step p { font-size: var(--fs-1); } .how-n { font-size: var(--fs-4); } .frame-head .lede { display: none; } html.gsap .frame { padding-block: 0; } .frame-head { margin-bottom: 1rem; } }
@media (min-width: 480px) and (max-width: 699px) { .hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* phones: every pinned frame must fit one viewport */
@media (max-width: 899px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hub-core img { width: 48px; }
  .hub-core .h2 { font-size: var(--fs-5); }
  .hub-foot { display: none; }
  #why .why-copy .lede, #why .why-copy .btn { display: none; }
  html.gsap .stack { height: 36vh; margin-top: 5.5rem; }
  .reason-card b { font-size: var(--fs-4); }
  .reason-card p { font-size: var(--fs-1); }
  .stack-count { margin-top: .75rem; }
}

/* ── Formatting pass (frames) ───────────────────────────────── */
/* hero: trust chips, short-viewport sizing */
.trust-grid { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.trust-grid li { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem; border: 1px solid var(--card-border); border-radius: 999px; background: color-mix(in srgb, var(--card-bg) 70%, transparent); font-size: var(--fs-1); color: var(--text-muted); }
.trust-grid li a { display: inline-flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; }
.trust-grid li a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.trust-grid li svg:not(.star-row svg) { width: 18px; height: 18px; color: var(--accent); flex: none; }
.trust-grid b { color: var(--text); }
@media (max-height: 820px) and (min-width: 900px) { .hero-home h1.t9 { font-size: var(--fs-8); } .hero-home .lede { margin-top: 1rem !important; } .hero-home .btn-row { margin-top: 1.5rem !important; } .trust-grid { margin-top: 1.25rem; } }
/* frame heads: eyebrow + heading + lede left, the frame's control on the right, bottom-aligned */
.frame-head { align-items: end; }
.frame-head > div:first-child .lede { margin-top: .9rem; max-width: 46ch; }
@media (max-height: 820px) { .frame-head { margin-bottom: 1rem; } .frame-head > div:first-child .lede { display: none; } }
/* problems: live counter + segmented progress (replaces the dots) */
.strip-index { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.strip-index .row { display: inline-flex; align-items: baseline; gap: .4rem; }
.strip-index b { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 700; font-size: var(--fs-7); line-height: 1; color: var(--text); }
.strip-index > span { color: var(--text-faint); font-weight: 600; }
.strip-index em { font-style: normal; color: var(--text-muted); font-size: var(--fs-1); margin-top: .35rem; max-width: 24ch; }
html:not(.gsap) .strip-index { display: none; }
.strip-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; flex: 1; max-width: 46rem; }
.strip-progress li { display: grid; gap: .4rem; }
.strip-progress li i { display: block; height: 4px; border-radius: 2px; background: var(--card-border); overflow: hidden; position: relative; }
.strip-progress li i::after { content: ""; position: absolute; inset: 0; background: var(--hue-soft, var(--accent)); transform: scaleX(var(--p, 0)); transform-origin: left; }
.strip-progress li span { font-size: var(--fs-1); color: var(--text-faint); font-weight: 600; transition: color .2s ease; }
.strip-progress li.is-on span { color: var(--text); }
html:not(.gsap) .strip-progress { display: none; }
.strip-foot { gap: 2rem; }
.strip-hint { white-space: nowrap; }
@media (max-width: 899px) { .strip-hint { display: none; } .strip-index b { font-size: var(--fs-5); } .strip-index em { display: none; } }
.strip { perspective: 1400px; }
.strip .card.problem { backface-visibility: hidden; }
.strip .card.problem .more { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--hue-soft, var(--hue)) 12%, transparent); text-decoration: none; width: max-content; }
.strip .card.problem .top { display: flex; align-items: center; justify-content: space-between; }
@media (max-height: 820px) { .strip .card.problem { min-height: clamp(260px, 36vh, 330px); } }
/* why: shorter, centred cards with a number watermark and a slight deck tilt */
html.gsap .stack { height: clamp(280px, 36vh, 360px); }
.reason-card { align-content: center; overflow: hidden; }
.reason-card::before { content: attr(data-n); position: absolute; right: 1.25rem; top: .25rem; font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-weight: 800; font-size: clamp(4rem, 3rem + 4vw, 7rem); line-height: 1; color: color-mix(in srgb, var(--hue-soft, var(--hue)) 12%, transparent); pointer-events: none; }
.reason-card p { max-width: 40ch; }
/* how: a marker travels the line */
.how-line b { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 25%, transparent); }
html:not(.gsap) .how-line b { display: none; }
.how-line { overflow: visible; }
.how-line i { border-radius: 3px; }
/* section rail (desktop) */
.rail { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 55; display: none; flex-direction: column; gap: .1rem; }
@media (min-width: 1200px) { html.gsap .rail { display: flex; } }
.rail a { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; text-decoration: none; color: var(--text-faint); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.rail a span { position: absolute; right: 26px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.rail:hover a span, .rail a.is-on span { opacity: 1; transform: translate(0, -50%); }
.rail a.is-on { color: var(--text); }
.rail a i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-faint); background: transparent; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.rail a.is-on i { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
/* growth word: the gradient shifts with each stage */
.growth-word span { background: var(--wordgrad, var(--grad)); -webkit-background-clip: text; background-clip: text; }
/* phones: frames that are not pinned flow like normal sections */
html.gsap .frame.is-flow { min-height: 0; overflow: visible; padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
html.gsap .frame.is-flow .frame-inner { will-change: auto; }
html.gsap .frame.is-flow .stack { height: auto; display: grid; margin-top: 0; }
html.gsap .frame.is-flow .reason-card { position: static; }
html.gsap .frame.is-flow .slide { position: static; opacity: 1; visibility: visible; }
html.gsap .frame.is-flow .slide + .slide { margin-top: 2.5rem; }
html.gsap .frame.is-flow .slides { min-height: 0; }
html.gsap .frame.is-flow .slide-nav, html.gsap .frame.is-flow .stack-count, html.gsap .frame.is-flow .how-line b { display: none; }
html.gsap .frame.is-flow .how-line i { transform: none; }
html.gsap .frame.is-flow .slide .card-grid .card:nth-child(n+3), html.gsap .frame.is-flow .slide .card-grid .review:nth-child(n+3) { display: block; }
html.gsap .frame.is-flow .hub-foot { display: flex; }
@media (max-width: 899px) { html.gsap .frame.is-flow #why .why-copy .lede { display: block; } }

/* ── Pass 3e: tech-world motion ────────────────────────────── */
/* text that assembles itself: split characters fly in from depth */
.aw { display: inline-block; white-space: nowrap; }
.ac { display: inline-block; will-change: transform, opacity; backface-visibility: hidden; }
/* decode glyphs (hero eyebrow, growth word) */
.dg { display: inline-block; font-style: normal; white-space: pre; }
.growth-word .dg { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.dg.on { animation: dg-flip .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes dg-flip { from { transform: rotateX(80deg); opacity: .4; } to { transform: none; opacity: 1; } }
/* hero light sweep (runs on time, not on scroll) */
.hero-stage { position: relative; }
.hero-stage::after { content: ""; position: absolute; inset: -30% -10%; pointer-events: none; z-index: -1; background: linear-gradient(112deg, transparent 42%, color-mix(in srgb, var(--accent2) 16%, transparent) 50%, transparent 58%); transform: translateX(-80%); animation: sweep 8s ease-in-out infinite; }
html.dark .hero-stage::after { background: linear-gradient(112deg, transparent 42%, color-mix(in srgb, var(--accent2) 10%, transparent) 50%, transparent 58%); }
@keyframes sweep { 0%, 50% { transform: translateX(-80%); } 100% { transform: translateX(80%); } }
@media (prefers-reduced-motion: reduce) { .hero-stage::after { animation: none; } .dg.on { animation: none; } }
/* intent picker: "what do you want more of?" */
.intent { margin-top: 1.6rem; display: grid; gap: .55rem; }
.intent-q { font-size: var(--fs-1); font-weight: 600; color: var(--text); }
.intent-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.want { font: inherit; font-size: var(--fs-1); font-weight: 600; color: var(--text-muted); padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--card-border); background: color-mix(in srgb, var(--card-bg) 80%, transparent); cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease; }
.want:hover { border-color: var(--hue); color: var(--hue); transform: translateY(-1px); }
.want[aria-pressed="true"] { background: var(--hue); border-color: var(--hue); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 18%, transparent); }
html.dark .want[aria-pressed="true"] { color: #06111f; }
.intent-note { min-height: 1.4em; color: var(--text-muted); max-width: 56ch; }
.intent-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
html.dark .intent-note a { color: var(--accent2); }
@media (max-height: 820px) and (min-width: 900px) { .intent { margin-top: 1.1rem; } .intent-note { display: none; } }
/* what the pick changes */
.card.problem .top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card.problem .pick { display: none; font-size: var(--fs-1); font-weight: 600; color: #fff; background: var(--hue); padding: .15rem .6rem; border-radius: 999px; }
html.dark .card.problem .pick { color: #06111f; }
.card.problem.is-match .pick { display: inline-flex; }
.card.problem.is-match { box-shadow: 0 0 0 2px var(--hue), 0 18px 40px -24px color-mix(in srgb, var(--hue) 60%, transparent); }
.hub-col a.is-match b { color: var(--hue); }
.hub-col a.is-match::after { content: "Recommended for you"; font-size: var(--fs-1); font-weight: 600; color: var(--hue); }
.hub-col.is-scan { box-shadow: 0 0 0 2px var(--hue-soft, var(--hue)), 0 0 36px color-mix(in srgb, var(--hue-soft, var(--hue)) 35%, transparent); transition: box-shadow .15s ease; }
.hub-note { text-align: center; color: var(--text-muted); min-height: 1.4em; margin-top: -.5rem; }
.hub-note:empty { display: none; }
/* autopilot: the frame plays on its own while the visitor pauses */
.frame.is-auto .strip-hint { color: var(--accent); }
.frame.is-auto .strip-hint::before { content: ""; display: inline-block; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-right: .4rem; vertical-align: -1px; }
/* proof slides turn like the faces of a cube; the hub zooms out through depth */
html.gsap .slides { perspective: 1600px; }
html.gsap .hub-stage, html.gsap .stack { transform-style: preserve-3d; }

/* ── Pass 3f: deck navigation, calmer world, clearer home ───────────── */
/* hero: the client strip sits at the bottom of the first view */
.hero-home { flex-direction: column; justify-content: center; gap: 1.5rem; padding-bottom: 1.25rem; }
.hero-home .hero-stage { width: 100%; }
.hero-clients { width: 100%; margin-top: auto; }
.hero-clients-head { margin-bottom: .5rem; }
.hero-clients .marquee-track { gap: 2.5rem; padding-block: .25rem; }
@media (max-width: 899px) { .hero-clients { display: none; } }
/* client logos: one height, no tiles unless the mark is white */
.marquee-item { height: 56px; padding: 0 .5rem; background: transparent; border-radius: var(--r-control); }
.marquee-item img { height: 36px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.marquee-item.is-dark { background: var(--navy-deep); padding: 0 .9rem; }
.marquee-item.is-round img { border-radius: 50%; height: 40px; width: 40px; object-fit: cover; }
html.dark .marquee-item.is-word img, html.dark .logo-tile.is-word img, html.dark .ent-tile.is-word img { filter: invert(1) brightness(1.8); }
.logo-tile img, .logo-grid img { height: 40px; width: auto; max-width: 150px; object-fit: contain; }
/* who it is for */
.who-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .who-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.who-card { display: grid; gap: .5rem; align-content: start; padding: 1.25rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: color-mix(in srgb, var(--card-bg) 94%, transparent); border-top: 3px solid var(--hue-soft, var(--hue)); }
.who-card .chip { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--hue-soft, var(--hue)) 16%, transparent); color: var(--hue); }
.who-card .chip svg { width: 22px; height: 22px; }
.who-card b { color: var(--text); font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-size: var(--fs-4); line-height: 1.2; }
.who-card p { color: var(--text-muted); line-height: 1.5; font-size: var(--fs-2); }
.who .frame-head > div:first-child { max-width: 30ch; }
.who .frame-head .h2 { font-size: var(--fs-6); }
.who-sectors { margin-top: 1.25rem; max-width: 72ch; }
@media (max-width: 899px) { .who-card { padding: 1rem; } .who-card p { font-size: var(--fs-1); } }
/* less crowded frames: descriptions only where they help */
@media (min-width: 900px) { .hub-col a span { display: none; } .growth-step .body { display: none; } }
.hub-logo { width: 180px; height: auto; margin-bottom: .5rem; }
html.dark .hub-logo { filter: brightness(0) invert(1); }
/* single-view sections fill the screen on the deck */
@media (min-width: 900px) { html.gsap .sec.view { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } html.gsap .sec.view > .wrap { width: 100%; } }
/* FAQ deck: the question list on the left, one answer at a time on the right */
.faq-deck { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.faq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.faq-list button { display: flex; gap: .75rem; align-items: baseline; width: 100%; text-align: left; font: inherit; font-size: var(--fs-2); font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: var(--r-control); padding: .5rem .75rem; cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.faq-list button .tnum { color: var(--text-faint); font-size: var(--fs-1); min-width: 1.6em; }
.faq-list button:hover { color: var(--text); background: color-mix(in srgb, var(--card-bg) 70%, transparent); }
.faq-list button[aria-pressed="true"] { color: var(--text); background: var(--card-bg); border-color: var(--card-border); }
.faq-list button[aria-pressed="true"] .tnum { color: var(--accent); }
.faq-panel { position: relative; min-height: clamp(300px, 44vh, 420px); border: 1px solid var(--card-border); border-radius: var(--r-panel); background: color-mix(in srgb, var(--card-bg) 94%, transparent); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); perspective: 1400px; }
.faq-answer { display: grid; gap: .75rem; align-content: start; will-change: transform, opacity; }
html.gsap .faq-answer { position: absolute; inset: clamp(1.25rem, 1rem + 1.5vw, 2rem); bottom: 5rem; }
html:not(.gsap) .faq-answer + .faq-answer { margin-top: 1.5rem; }
.faq-answer .h3 { font-size: var(--fs-5); }
.faq-answer .body { font-size: var(--fs-3); line-height: 1.55; max-width: 60ch; }
.faq-foot { position: absolute; left: clamp(1.25rem, 1rem + 1.5vw, 2rem); right: clamp(1.25rem, 1rem + 1.5vw, 2rem); bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
html:not(.gsap) .faq-foot { position: static; margin-top: 1.5rem; }
.faq-acc { display: none; }
html:not(.gsap) .faq-deck, .frame.is-flow .faq-deck { display: none; }
html:not(.gsap) .faq-acc, .frame.is-flow .faq-acc { display: block; }
@media (max-height: 820px) { .faq-list button { padding: .35rem .6rem; font-size: var(--fs-1); } .faq-panel { min-height: clamp(260px, 40vh, 360px); } .faq-answer .body { font-size: var(--fs-2); } }
/* world-to-world travel: a soft flash at the edges */
.warp { position: fixed; inset: 0; z-index: 58; pointer-events: none; opacity: 0; background: radial-gradient(70% 70% at 50% 50%, transparent 35%, color-mix(in srgb, var(--accent2) 26%, transparent) 100%); will-change: opacity; }
html.dark .warp { background: radial-gradient(70% 70% at 50% 50%, transparent 35%, color-mix(in srgb, var(--accent2) 40%, transparent) 100%); }
/* autopilot hint (desktop deck) */
.auto-hint { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 8px); z-index: 57; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-muted); font-size: var(--fs-1); font-weight: 600; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; white-space: nowrap; }
.auto-hint::before { content: ""; display: inline-block; width: 0; height: 0; border-left: 8px solid var(--accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-right: .5rem; vertical-align: -1px; }
html.is-auto .auto-hint { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1023px) { .auto-hint { display: none; } }
/* time-based colour: the gradient text drifts on its own */
.grad, .grad .hw, .growth-word span { background-size: 220% 100%; animation: grad-drift 9s ease-in-out infinite alternate; }
@keyframes grad-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .grad, .grad .hw, .growth-word span { animation: none; } }
/* hub: calmer columns */
.hub-col a { padding: .5rem 0; }
.intent-note:empty { display: none; }
@media (max-height: 960px) and (min-width: 900px) { .hero-home h1.t9 { font-size: var(--fs-8); } .hero-home .lede { margin-top: 1rem !important; } .hero-home .btn-row { margin-top: 1.4rem !important; } .trust-grid { margin-top: 1.1rem; } .intent { margin-top: 1.1rem; } }
.who .frame-head > div:first-child { max-width: 60ch; }
.who .frame-head .h2 { font-size: var(--fs-7); }
.who-label { font-weight: 600; color: var(--text); }
@media (max-height: 820px) { .who .frame-head > div:first-child .lede { display: block; } .who-card p { font-size: var(--fs-1); } }
/* logo balance: square marks a little taller, wordmarks a little shorter, so every tile carries the same visual weight */
.marquee-item img { height: 40px; max-width: 150px; }
.marquee-item.is-word img { height: 22px; }
.logo-tile img { height: 44px; max-width: 150px; }
.logo-tile.is-word img { height: 24px; max-width: 136px; }
.ent-tile.is-word img { height: 26px; }
.hub-core img.hub-logo { width: 180px; height: auto; }
.who-label { margin-bottom: .75rem; }
.trust-grid li { padding: .4rem .7rem; }

/* ── Pass 4: set-piece world. Every frame keeps its content in a main column and leaves a scene
      slot for the 3D set piece; the scene frames its object inside that slot. Story mode plays
      the deck on its own. Glows and shines removed: flat colour, soft shadow, no light sweeps. ── */
.scene-slot { display: none; }
.strip { --cardw: clamp(270px, 72vw, 340px); position: relative; padding-inline: calc(50% - var(--cardw) / 2); }
.strip .card.problem { flex: 0 0 var(--cardw); }
html.gsap .sec.view { position: relative; }
@media (min-width: 1100px) {
  .stage { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items: center; }
  .stage > .scene-slot { display: block; min-height: 58vh; align-self: stretch; }
  .stage-main { min-width: 0; }
  .stage-main .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-main .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-main .ent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-main .frame-head > div:first-child { max-width: 46ch; }
  .stage-main .frame-head .lede { max-width: 40ch; }
  .stage-main .strip { --cardw: clamp(250px, 21vw, 320px); }
  .stage-main .strip .card.problem { min-height: clamp(280px, 36vh, 340px); }
  .hero-space { min-height: 52vh; }
  .growth-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .5rem; align-self: stretch; min-height: 64vh; }
  .growth-side .growth-word { justify-content: flex-start; align-items: start; }
  .growth-side .growth-word span { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.2rem); }
  .growth-side .scene-slot { display: block; min-height: 44vh; }
  .faq-deck { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); }
  .faq-deck .scene-slot { display: block; min-height: 46vh; align-self: stretch; }
  .faq-answer .body { font-size: var(--fs-2); }
  .why-main { display: grid; gap: 1.5rem; }
  .why-main .stack { max-width: 640px; }
  html.gsap .why-main .stack { height: clamp(240px, 30vh, 320px); }
  .why-main .reason-card b { font-size: var(--fs-4); }
  .why-main .reason-card p { font-size: var(--fs-1); }
  .stage-main .how { grid-template-columns: 1fr; gap: .8rem; padding-top: 0; padding-left: 2.2rem; }
  .stage-main .how-line { left: .55rem; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .stage-main .how-line i { width: 100%; height: 100%; transform-origin: top; transform: scaleY(0); }
  .stage-main .how-line b { left: 50%; top: 0; margin: -7px 0 0 -7px; }
  .stage-main .how-step { padding: .9rem 1.1rem; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .25rem; align-items: baseline; }
  .stage-main .how-step .how-n { font-size: var(--fs-4); grid-row: 1 / span 3; align-self: start; }
  .stage-main .how-step > :not(.how-n) { grid-column: 2; }
  .stage-main .how-step p { font-size: var(--fs-1); }
  .stage-main .how-cta { justify-content: flex-start !important; margin-top: 1.5rem !important; }
  .stage-main .slide .card-grid.three { gap: .9rem; }
  .stage-main .case-card .hero-line { font-size: var(--fs-3); }
  .stage-main .case-card .body, .stage-main .review p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  html.gsap .stage-main .slides { min-height: clamp(320px, 46vh, 460px); }
  .stage-main .cta-panel { text-align: left; }
  .stage-main .cta-panel .h2, .stage-main .cta-panel .lede { margin-inline: 0 !important; }
  .stage-main .cta-panel .btn-row { justify-content: flex-start !important; }
}
/* story mode */
.story-ctl { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 57; display: none; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .5rem; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); font: inherit; font-size: var(--fs-1); font-weight: 600; cursor: pointer; box-shadow: var(--shadow-float); transition: border-color .2s ease; white-space: nowrap; }
@media (min-width: 1024px) { html.gsap .story-ctl { display: inline-flex; } }
.story-ctl:hover { border-color: var(--text); }
.story-ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-ctl .ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; }
html.dark .story-ctl .ico { background: var(--accent); color: #06111f; }
.story-ctl svg { width: 14px; height: 14px; fill: currentColor; }
.story-ctl .pause, html.is-story .story-ctl .play { display: none; }
html.is-story .story-ctl .pause { display: block; }
.story-ctl kbd { font: inherit; font-size: 11px; color: var(--text-faint); border: 1px solid var(--card-border); border-radius: 4px; padding: 0 .35rem; line-height: 1.5; }
.story-play svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 1023px) { .story-play { display: none; } }
html:not(.gsap) .story-ctl { display: none; }
html:not(.gsap) .story-play { visibility: hidden; } /* keeps its place so the row does not shift when the scripts arrive */
/* travel: a soft page-colour vignette, not a glow */
.warp { background: radial-gradient(70% 70% at 50% 50%, transparent 40%, color-mix(in srgb, var(--page-bg) 80%, transparent) 100%); }
html.dark .warp { background: radial-gradient(70% 70% at 50% 50%, transparent 40%, color-mix(in srgb, var(--page-bg) 85%, transparent) 100%); }
/* calmer DOM: flat colour instead of glows and shines */
.growth-glow { display: none; }
.hero-stage::after { display: none; }
.hub-col.is-scan { box-shadow: 0 0 0 2px var(--hue-soft, var(--hue)); }
.cta-panel::before { opacity: .45; }
.want[aria-pressed="true"] { box-shadow: none; }
.card.problem.is-match { box-shadow: 0 0 0 2px var(--hue); }
.how-line b { box-shadow: none; }
.hero-home .eyebrow::before { box-shadow: none; }
.btn-primary, .btn-primary:hover { box-shadow: none; }
/* stage frames must fit one viewport with room to breathe */
@media (min-width: 1100px) {
  .stage-main .frame-head { margin-bottom: 1.1rem; }
  .stage-main .hub-core img.hub-logo { width: 150px; }
  .stage-main .hub-col { padding: .9rem 1.1rem; }
  .stage-main .hub-col a { padding: .38rem 0; }
  .stage-main .hub-col h3 { margin-bottom: .4rem; }
  .stage-main .hub-stage { gap: 1rem; }
  .stage-main .hub-note { margin-top: -.25rem; }
  .faq-deck .faq-panel { min-height: clamp(360px, 54vh, 540px); }
  .faq-answer .body { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 1100px) and (max-height: 940px) {
  .stage-main .frame-head .h2 { font-size: var(--fs-6); }
  .stage-main .frame-head > div:first-child .lede { display: none; }
  .stage-main .hub-core .lede { display: none; }
  .stage-main .how-step { padding: .7rem 1rem; }
  .who .frame-head .h2 { font-size: var(--fs-6); }
  .why-copy .lede { display: none; }
}
/* wide screens: the scene slot runs on to the right edge, so the set piece grows with the window */
@media (min-width: 1400px) { .stage > .scene-slot, .faq-deck .scene-slot { margin-right: min(0px, calc((1280px - 100vw) / 2 + 72px)); } }
/* compositing cost: no backdrop blur and no repainting gradient text while the 3D world is on */
html.has-scene .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--page-bg) 96%, transparent); }
html.has-scene .grad, html.has-scene .grad .hw, html.has-scene .growth-word span { animation: none; background-size: 100% 100%; }
.warp { will-change: auto; }
/* pass 4b: formatting fixes and the story pill with its sound toggle */
@media (min-width: 1100px) {
  .stage-main .frame-head { flex-wrap: nowrap; }
  .stage-main .frame-head > div:first-child { flex: 1 1 auto; min-width: 0; }
  .stage-main .strip-index { flex: 0 0 auto; }
  html.gsap .why-main .stack { overflow: hidden; }
  .stage-main .strip-wrap { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, #000 80%, transparent 100%); }
}
.story-ctl { padding: .25rem .3rem .25rem .3rem; gap: .2rem; }
.story-ctl button { border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; border-radius: 999px; }
.story-ctl .story-btn { padding: .2rem .6rem .2rem .2rem; }
.story-ctl .story-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.story-ctl .story-snd { width: 34px; height: 34px; justify-content: center; color: var(--text-muted); }
.story-ctl .story-snd:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.story-ctl .story-snd svg { width: 18px; height: 18px; fill: none; }
.story-ctl .story-snd svg path:first-child { fill: currentColor; }
.story-ctl .story-snd svg path:not(:first-child) { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.story-ctl .story-snd .off, html.is-muted .story-ctl .story-snd .on { display: none; }
html.is-muted .story-ctl .story-snd .off { display: block; }
.story-ctl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* pass 4c: cut transitions, wider problem cards, story pill extras, in-section motion sideways */
.story-ctl .story-x { width: 30px; height: 30px; justify-content: center; color: var(--text-faint); }
.story-ctl .story-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.story-ctl .story-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html.story-hidden .story-ctl { display: none !important; }
html.is-story .rail { opacity: .35; }
html.is-story .consent-bar, html.is-story #stickyCta, html.is-story .nav:not(:hover) { opacity: 0; pointer-events: none; }
.growth-step { transform: translateX(56px) scale(.96); transform-origin: 0 50%; }
@media (min-width: 1100px) {
  .stage.stage-wide { grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); }
  .stage-wide .strip { --cardw: clamp(330px, 25vw, 440px); }
  .stage-wide .strip .card.problem { min-height: clamp(300px, 40vh, 380px); }
  .stage-wide .frame-head > div:first-child { max-width: 52ch; }
}
/* inner-page heroes: the 3D set piece lives in an absolute slot on the right; the text keeps its column */
.hero.has-slot { position: relative; }
.page-slot { display: none; }
@media (min-width: 1100px) { .page-slot { display: block; position: absolute; right: max(24px, calc((100vw - 1280px) / 2 - 24px)); top: 90px; bottom: 12px; width: 36%; pointer-events: none; } .hero.has-slot .wrap > * { max-width: 58%; } }
@media (max-width: 899px) { .growth-side { order: -1; min-height: 20vh; display: flex; align-items: center; justify-content: center; } .growth-side .growth-word { justify-content: center; } }
@media (min-width: 1100px) { .sec .stage > .scene-slot { min-height: 46vh; } }
@media (max-width: 899px) { .growth-stage .stage { display: flex; flex-direction: column; } .growth-stage .growth-copy { width: 100%; } }
/* phones: no 3D, so the hero starts right under the bar */
@media (max-width: 899px) { .hero-home { padding-top: calc(68px + 2.75rem); } }

/* polish pass (Oct 31): compact consent bar, one floating control at a time, card alignment */
.consent-bar { left: 16px; right: 104px; bottom: 16px; max-width: 1040px; display: flex; align-items: center; gap: 1rem; padding: .6rem .9rem .6rem 1rem; }
.consent-bar p { flex: 1 1 24rem; }
.consent-bar .btn-row { flex: 0 0 auto; margin: 0; }
.consent-bar[hidden] { display: none; }
@media (max-width: 760px) { .consent-bar { right: 16px; display: grid; gap: .6rem; } }
html.has-consent .story-ctl { display: none !important; }
.why-main .reason-card > span { display: none; }
.stage-main .case-card { display: flex; flex-direction: column; }
.stage-main .case-card .more { margin-top: auto; padding-top: .9rem; }
.strip-index .row.is-plus > span { display: none; }
.card-grid.is-collapsed > .case-card:nth-child(n+10) { display: none !important; }
.blog-content .related-service { border-top: 1px solid var(--card-border); padding-top: 1rem; margin-top: 2rem; color: var(--text-muted); }
.blog-content .tldr { margin-bottom: 1.5rem; }
/* instant site check */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sitecheck-form { display: flex; gap: .6rem; margin-top: 1.75rem; max-width: 40rem; }
.sitecheck-form input { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: var(--fs-3); padding: .85rem 1rem; border: 1px solid var(--card-border); border-radius: var(--r-control); background: var(--card-bg); color: var(--text); }
.sitecheck-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .sitecheck-form { flex-direction: column; } }
.score-head { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
@media (max-width: 760px) { .score-head { grid-template-columns: 1fr; } }
.score-ring { position: relative; width: 168px; height: 168px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 10; }
.score-ring .track { stroke: color-mix(in srgb, var(--text) 10%, transparent); }
.score-ring .arc { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1); }
.score-ring .num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score-ring .num b { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-size: 3rem; line-height: 1; color: var(--text); }
.score-ring .num span { font-size: var(--fs-1); color: var(--text-faint); }
.score-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 900px) { .score-groups { grid-template-columns: repeat(2, 1fr); } }
.score-group { display: grid; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); color: inherit; text-decoration: none; }
.score-group .tnum { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-size: var(--fs-6); font-weight: 700; color: var(--text); }
.score-group b { font-size: var(--fs-1); font-weight: 600; color: var(--text-muted); }
.score-group .bar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.score-group .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.check-group { padding-block: 1.5rem; border-top: 1px solid var(--card-border); }
.check-group:first-child { border-top: 0; padding-top: 0; }
.check-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: .75rem; }
.check-group-head .tnum { color: var(--text-muted); font-weight: 600; }
.check-list-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.check-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: .75rem; align-items: start; padding: .7rem .9rem; border: 1px solid var(--card-border); border-radius: var(--r-control); background: var(--card-bg); }
.check-row .st { font-size: var(--fs-1); font-weight: 700; padding: .2rem .55rem; border-radius: 999px; text-align: center; justify-self: start; }
.check-row.is-pass .st { background: color-mix(in srgb, #00b67a 14%, transparent); color: #067a52; }
.check-row.is-warn .st { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #8a5a00; }
.check-row.is-fail .st { background: color-mix(in srgb, #e5484d 14%, transparent); color: #a3262a; }
.check-row.is-info .st { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted); }
.check-row b { color: var(--text); font-weight: 600; }
.check-row p { margin: .15rem 0 0; color: var(--text-muted); font-size: var(--fs-1); line-height: 1.5; }
.check-row em { font-style: normal; color: var(--text); }
html.dark .check-row.is-pass .st { color: #3ddc97; } html.dark .check-row.is-warn .st { color: #fbbf24; } html.dark .check-row.is-fail .st { color: #ff7b7f; }

/* consent categories */
.consent-more { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; margin-left: .35rem; }
.consent-cats { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--fs-1); color: var(--text-muted); }
.consent-cats label { display: inline-flex; align-items: center; gap: .4rem; }
.consent-bar .btn-row { flex-wrap: wrap; }

/* footer newsletter */
.foot-news .foot-news-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.foot-news input[type=email] { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: var(--fs-1); padding: .55rem .75rem; border-radius: var(--r-control); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
.foot-news input[type=email]::placeholder { color: rgba(255,255,255,.5); }
.foot-news .consent { display: flex; gap: .5rem; align-items: flex-start; margin-top: .6rem; color: rgba(255,255,255,.7); }
.foot-news .consent a { color: rgba(255,255,255,.85); }
.foot-news .err { display: none; color: #ffb4b4; font-size: var(--fs-1); }
.foot-news .field.invalid .err { display: block; width: 100%; }
.foot-news .alert { margin-top: .6rem; padding: .5rem .75rem; border-radius: var(--r-control); }
.foot-news .alert.ok { background: rgba(0,182,122,.18); color: #bff1dc; }
.foot-news .alert.bad { background: rgba(229,72,77,.18); color: #ffc9cb; }

/* calculators */
.calc-form .field { margin-top: .9rem; }
.calc-form label { display: block; font-weight: 600; font-size: var(--fs-1); margin-bottom: .3rem; }
.calc-form input, .calc-form select { width: 100%; font: inherit; padding: .6rem .75rem; border: 1px solid var(--card-border); border-radius: var(--r-control); background: var(--card-bg); color: var(--text); }
.calc-form .small { display: block; margin-top: .3rem; }
.calc-big { display: flex; align-items: baseline; gap: .75rem; margin-top: .5rem; flex-wrap: wrap; }
.calc-big b { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 1; color: var(--text); }
.calc-big span { color: var(--text-muted); }
.calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1.5rem; margin-top: 1.25rem; }
.calc-grid div { display: grid; gap: .15rem; }
.calc-grid b { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-size: var(--fs-6); color: var(--text); line-height: 1.1; }
.calc-grid span { color: var(--text-muted); font-size: var(--fs-1); }
@media (max-width: 560px) { .calc-grid { grid-template-columns: 1fr; } }

/* page offer */
.offer-card { position: fixed; right: 20px; bottom: 100px; z-index: 56; width: min(340px, calc(100vw - 40px)); padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--card-border); border-radius: var(--r-panel); background: var(--card-bg); box-shadow: var(--shadow-float); display: grid; gap: .4rem; transform: translateY(16px); opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.offer-card.is-in { transform: none; opacity: 1; }
.offer-card b { font-family: 'Bricolage Grotesque', 'Bricolage Fallback', system-ui, sans-serif; font-size: var(--fs-4); line-height: 1.2; color: var(--text); }
.offer-card p { margin: 0; color: var(--text-muted); font-size: var(--fs-1); line-height: 1.5; }
.offer-card .btn { justify-self: start; margin-top: .35rem; }
.offer-x { position: absolute; top: .5rem; right: .6rem; border: 0; background: transparent; font-size: 1.3rem; line-height: 1; color: var(--text-faint); cursor: pointer; padding: .2rem .4rem; }
.offer-x:hover { color: var(--text); }
html.has-consent .offer-card { display: none; }
@media (max-width: 760px) { .offer-card { right: 12px; left: 12px; width: auto; bottom: 88px; } }

.lang-switch { font-weight: 700; font-size: var(--fs-1); letter-spacing: .04em; width: auto; padding: 0 .55rem; }
.consent-bar [hidden] { display: none !important; }
.foot-news .consent a { text-decoration: underline; }

/* payment requests */
.pay-head, .pay-foot { border-bottom: 1px solid var(--card-border); background: var(--card-bg); }
.pay-foot { border-bottom: 0; border-top: 1px solid var(--card-border); padding: 1.25rem 0; margin-top: 3rem; }
.pay-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.pay-main { padding-block: 2.5rem; min-height: 60vh; }
.pay-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 860px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: var(--fs-2); }
.pay-table td, .pay-table th { padding: .6rem .5rem; border-bottom: 1px solid var(--card-border); vertical-align: top; text-align: left; }
.pay-table th { font-size: var(--fs-1); color: var(--text-muted); font-weight: 600; }
.pay-table td.tnum, .pay-table th.tnum { text-align: right; white-space: nowrap; }
.pay-table tfoot td { color: var(--text-muted); }
.pay-table tfoot tr.total td { color: var(--text); font-weight: 700; border-top: 2px solid var(--navy); border-bottom: 0; font-size: var(--fs-3); }
.pay-table.admin { font-size: var(--fs-1); }
.pay-table.admin tr.is-paid td { opacity: .7; }
.pay-table.admin tr.is-cancelled td { opacity: .5; text-decoration: line-through; }
.pay-table.admin tr.is-cancelled td.pay-actions { text-decoration: none; }
.pay-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.pay-bank { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin-top: .75rem; font-size: var(--fs-2); }
.pay-bank dt { color: var(--text-muted); } .pay-bank dd { margin: 0; color: var(--text); word-break: break-all; }
.pay-state.is-paid { border-left: 4px solid #00b67a; }
.pay-lines { display: grid; gap: .4rem; }
.pay-line { display: grid; grid-template-columns: 1fr 5rem 8rem; gap: .4rem; }
.pay-line input { font: inherit; padding: .5rem .6rem; border: 1px solid var(--card-border); border-radius: var(--r-control); background: var(--card-bg); color: var(--text); min-width: 0; }
@media (max-width: 560px) { .pay-line { grid-template-columns: 1fr; } }
.pay-card-form { display: flex; gap: .35rem; flex-basis: 100%; margin-top: .25rem; }
.pay-card-form input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-1); padding: .35rem .5rem; border: 1px solid var(--card-border); border-radius: var(--r-control); background: var(--card-bg); color: var(--text); }