/* ==========================================================================
   Curamigo — informational site
   Design tokens
   ========================================================================== */
:root {
    /* Royal blue scale, anchored on the logo's own blue (#295ADE). */
    --rb-050: #F2F6FF;
    --rb-100: #DFE8FD;
    --rb-200: #C3D3FB;
    --rb-300: #9BB5F6;
    --rb-400: #5E84EE;
    --rb-500: #3563E9;
    --rb-600: #295ADE;
    --rb-700: #1E48BE;
    --rb-800: #17389C;
    --rb-900: #0E2775;
    --rb-950: #081A55;

    --ink: #0B1020;
    --ink-2: #414D6B;
    --ink-3: #5B678A;
    --line: #E4E9F4;
    --line-2: #EFF3FB;
    --paper: #FFFFFF;
    --tint: #F4F7FE;

    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

    --nav-h: 76px;
    --gutter: clamp(20px, 4vw, 52px);
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;

    --ease: cubic-bezier(.22, .72, .2, 1);
    --shadow-sm: 0 1px 2px rgba(11, 16, 32, .04), 0 8px 20px -12px rgba(11, 16, 32, .14);
    --shadow-md: 0 1px 2px rgba(11, 16, 32, .05), 0 22px 44px -22px rgba(23, 56, 156, .28);
    --shadow-lg: 0 40px 90px -40px rgba(14, 39, 117, .45);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    /* The canvas — and therefore any overscroll gutter — stays royal blue. */
    background: var(--rb-900);
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--rb-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; display: block; }
/* Markers are removed throughout. WebKit drops list semantics from an unmarked
   list, so lists that still need to read as lists carry an explicit role="list"
   in the markup. .htmlvalidate.json turns off the redundant-role rule for that. */
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 { font-weight: 680; letter-spacing: -.024em; line-height: 1.12; text-wrap: balance; }
p { text-wrap: pretty; }

.ic {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Focus visibility */
:focus-visible {
    outline: 2px solid var(--rb-600);
    outline-offset: 3px;
    border-radius: 6px;
}
.section-deep :focus-visible,
.manifesto :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible {
    outline-color: #fff;
}

.skip-link {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 200;
    padding: 10px 18px;
    background: #fff;
    color: var(--rb-800);
    font-size: .875rem;
    font-weight: 620;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    transform: translate(-50%, -150%);
    transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

main:focus { outline: none; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.wrap {
    width: min(1200px, 100%);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    position: relative;
    padding-block: clamp(76px, 9vw, 148px);
    scroll-margin-top: calc(var(--nav-h) + 8px);
}
.section-light { background: var(--paper); }
.section-tint { background: var(--tint); border-block: 1px solid var(--line-2); }
.section-deep {
    color: #fff;
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(94, 132, 238, .5), transparent 60%),
        linear-gradient(175deg, var(--rb-700) 0%, var(--rb-900) 62%, var(--rb-950) 100%);
    overflow: hidden;
    isolation: isolate;
}

.section-head { max-width: 46ch; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 { font-size: clamp(1.95rem, 3.5vw, 3rem); margin-bottom: 20px; }
.section-lead {
    font-size: clamp(1.02rem, 1.25vw, 1.16rem);
    color: var(--ink-2);
    max-width: 54ch;
}
.section-deep .section-lead,
.section-head-invert .section-lead { color: rgba(255, 255, 255, .78); }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: .7rem;
    font-weight: 660;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rb-700);
}
.kicker-num {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 22px;
    padding-inline: 6px;
    font-size: .68rem;
    letter-spacing: .06em;
    border: 1px solid var(--rb-200);
    border-radius: 999px;
    background: var(--rb-050);
    color: var(--rb-700);
}
.section-deep .kicker { color: rgba(255, 255, 255, .72); }
.section-deep .kicker-num {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.tag {
    align-self: flex-start;
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 11px;
    font-size: .68rem;
    font-weight: 640;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rb-700);
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    border-radius: 999px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: var(--rb-600);
    transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
/* With JS the bar is transparent over the hero, so the first viewport is one
   uninterrupted field of blue; it gains a surface once the page scrolls. */
.js .site-header { background: transparent; }
.js .site-header.is-stuck {
    background: rgba(18, 47, 141, .82);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -26px rgba(6, 20, 64, .8);
}

.progress {
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s var(--ease);
}
.js .site-header.is-stuck .progress { opacity: 1; }
.progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #fff, var(--rb-200));
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--gutter);
    height: var(--nav-h);
}

/* Logo: the original asset, cropped to its own artwork so the wordmark can be
   set at a confident size. Inverted to white for blue surfaces. */
.brand { display: inline-flex; align-items: center; border-radius: 8px; }
.brand-mark {
    position: relative;
    display: block;
    height: 31.2px;
    aspect-ratio: 1996 / 270;
    overflow: hidden;
}
.brand-mark img {
    position: absolute;
    top: -84.444%;
    left: -4.409%;
    width: 108.818%;
    height: 268.148%;
    filter: brightness(0) invert(1);
}
.brand-mark-lg { height: 36px; }

.nav-panel { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 26px); }
.nav-links { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 22px); }
.nav-links a {
    position: relative;
    padding: 8px 4px;
    font-size: .9rem;
    font-weight: 520;
    color: rgba(255, 255, 255, .84);
    transition: color .2s var(--ease);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .3s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: .875rem;
    font-weight: 620;
    border-radius: 999px;
    transition: transform .2s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn .ic { width: 15px; height: 15px; stroke-width: 1.9; }
.btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .06);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); }
.btn:active { transform: scale(.97); }

.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    font-size: .8rem;
    font-weight: 620;
    letter-spacing: .04em;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
}

/* Mobile: show toggle, hide nav-panel until opened */
@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 1001;
        padding: 10px 16px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 500;
    }
    .nav-panel {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        padding: 100px 24px 40px;
        background: linear-gradient(165deg, #0a1e5c 0%, #152a6e 40%, #1a3278 100%);
        z-index: 999;
        overflow-y: auto;
    }
    .nav-panel.is-open {
        display: flex;
    }
}
.nav-toggle-bars { display: grid; gap: 4px; width: 15px; }
.nav-toggle-bars i {
    display: block;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ==========================================================================
   Hero — the whole first viewport is one continuous royal-blue field
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-h) + clamp(28px, 6vh, 74px)) var(--gutter) clamp(96px, 14vh, 150px);
    color: #fff;
    background:
        radial-gradient(90% 70% at 78% 6%, rgba(120, 156, 255, .46), transparent 62%),
        radial-gradient(80% 70% at 6% 96%, rgba(30, 72, 190, .6), transparent 60%),
        linear-gradient(172deg, var(--rb-600) 0%, var(--rb-700) 46%, var(--rb-900) 100%);
    overflow: hidden;
    isolation: isolate;
    scroll-margin-top: 0;
}

.hero-inner { position: relative; z-index: 2; width: min(1200px, 100%); margin-inline: auto; }

.hero-ambient, .deep-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    /* These are radial gradients that already fade to transparent, so a large
       blur filter only forced an expensive re-rasterise on every animation
       frame. The softness now comes from the gradient stops instead. */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.orb-a {
    width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
    top: -14%; left: -8%;
    background: radial-gradient(circle at 32% 32%, rgba(146, 178, 255, .72), transparent 68%);
    animation: drift-a 22s var(--ease) infinite;
}
.orb-b {
    width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
    right: -10%; top: 8%;
    background: radial-gradient(circle at 60% 40%, rgba(83, 123, 246, .6), transparent 66%);
    animation: drift-b 26s var(--ease) infinite;
}
.orb-c {
    width: 34vw; height: 34vw; min-width: 260px; min-height: 260px;
    left: 34%; bottom: -18%;
    background: radial-gradient(circle at 50% 50%, rgba(60, 106, 255, .52), transparent 70%);
    animation: drift-c 30s var(--ease) infinite;
}
.orb-d {
    width: 44vw; height: 44vw; min-width: 320px; min-height: 320px;
    right: -12%; top: -16%;
    background: radial-gradient(circle at 45% 55%, rgba(110, 150, 255, .4), transparent 68%);
    animation: drift-b 28s var(--ease) infinite;
}
.orb-e {
    width: 42vw; height: 42vw; min-width: 300px; min-height: 300px;
    left: -12%; bottom: -20%;
    background: radial-gradient(circle at 55% 45%, rgba(120, 158, 255, .42), transparent 68%);
    animation: drift-a 24s var(--ease) infinite;
}

@keyframes drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(4%, 5%, 0) scale(1.08); }
}
@keyframes drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-5%, 6%, 0) scale(1.06); }
}
@keyframes drift-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(3%, -6%, 0) scale(1.1); }
}

.grid-veil {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 84px 84px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 78%);
    mask-image: radial-gradient(120% 90% at 50% 20%, #000 20%, transparent 78%);
}

.hero-rule {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .18) 30%, transparent);
}
.hero-rule-1 { left: 22%; }
.hero-rule-2 { left: 74%; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(22px, 3.4vh, 34px);
    padding: 7px 16px 7px 12px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.eyebrow .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .22);
    animation: pulse-dot 2.8s var(--ease) infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
    50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, .05); }
}

.hero h1 {
    font-size: clamp(2.55rem, 7.1vw, 5.3rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.04em;
    margin-bottom: clamp(24px, 3.2vh, 38px);
    max-width: 18ch;
}
.hero h1 em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .92);
}
.hero-line {
    display: block;
    overflow: hidden;
    padding: 0 .06em .12em;
    margin: 0 -.06em -.12em;
}
.hero-line > span { display: block; }

.hero-lead {
    max-width: 58ch;
    margin-bottom: clamp(30px, 4.4vh, 48px);
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    line-height: 1.68;
    color: rgba(255, 255, 255, .84);
}

.hero-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 920px;
    margin-bottom: clamp(24px, 3vh, 34px);
}
.hero-chips li {
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.hero-chips li:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .4);
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
}
.chip-label {
    display: block;
    margin-bottom: 5px;
    font-size: .66rem;
    font-weight: 660;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}
.chip-text { display: block; font-size: .95rem; line-height: 1.45; color: #fff; }

.hero-note {
    font-size: .84rem;
    color: rgba(255, 255, 255, .74);
    max-width: 60ch;
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: clamp(26px, 4.5vh, 48px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    transform: translateX(-50%);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.scroll-cue:hover { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }
.scroll-cue .ic { width: 14px; height: 14px; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* ==========================================================================
   01 · Context — numbered observations
   ========================================================================== */
.observations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
    border-top: 1px solid var(--line);
    padding-top: clamp(28px, 3vw, 44px);
}
.observation { position: relative; padding-right: 8px; }
.observation-num {
    display: block;
    margin-bottom: 18px;
    font-family: var(--serif);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--rb-300);
    font-variant-numeric: tabular-nums;
}
.observation h3 { font-size: 1.22rem; margin-bottom: 12px; }
.observation p { color: var(--ink-2); font-size: .98rem; }

/* ==========================================================================
   02 · Philosophy — sticky editorial split
   ========================================================================== */
.sticky-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}
.sticky-col { position: sticky; top: calc(var(--nav-h) + 48px); }
.sticky-col h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: 20px; }
.sticky-aside {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--ink-3);
}

.principles { display: grid; gap: 0; }
.principle {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0 20px;
    padding: clamp(26px, 3vw, 38px) 0;
    border-top: 1px solid var(--line);
}
.principle:first-child { border-top: 0; padding-top: 0; }
.principle:last-child { padding-bottom: 0; }
.principle-index {
    grid-row: span 2;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--rb-500);
    letter-spacing: .04em;
    padding-top: .18em;
}
.principle h3 { font-size: clamp(1.14rem, 1.6vw, 1.4rem); margin-bottom: 12px; }
.principle p { color: var(--ink-2); max-width: 62ch; }

/* ==========================================================================
   03 · Platform — bento
   ========================================================================== */
.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.surface {
    display: flex;
    flex-direction: column;
    grid-column: span 5;
    padding: clamp(24px, 2.4vw, 34px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.surface:hover {
    transform: translateY(-5px);
    border-color: var(--rb-200);
    box-shadow: var(--shadow-md);
}
.surface h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin-bottom: 12px; }
.surface-text { color: var(--ink-2); font-size: .98rem; }

.surface-icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    margin-bottom: 20px;
    color: var(--rb-600);
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    border-radius: 14px;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.surface:hover .surface-icon { background: var(--rb-600); color: #fff; border-color: var(--rb-600); }

.surface-feature {
    grid-column: span 7;
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 2.5vw, 38px);
    background:
        radial-gradient(120% 100% at 100% 0%, var(--rb-050), transparent 58%),
        var(--paper);
}
.surface-feature .surface-body { flex: 1 1 56%; min-width: 0; }

.surface-wide {
    grid-column: span 7;
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 2vw, 28px);
}
.surface-wide .surface-icon { margin-bottom: 0; }

.ticks { display: grid; gap: 11px; margin-top: 22px; }
.ticks li {
    position: relative;
    padding-left: 26px;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.ticks li::before {
    content: '';
    position: absolute;
    left: 0; top: .52em;
    width: 13px; height: 8px;
    border-left: 1.7px solid var(--rb-500);
    border-bottom: 1.7px solid var(--rb-500);
    border-radius: 1px;
    transform: rotate(-45deg) translateY(-1px);
}

/* Device illustration — pure HTML/CSS */
.device {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.device-frame {
    width: 244px;
    padding: 9px;
    border-radius: 42px;
    background: linear-gradient(165deg, var(--rb-600), var(--rb-900));
    box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .22);
    transition: transform .5s var(--ease);
}
.surface-feature:hover .device-frame { transform: translateY(-6px) rotate(-1.2deg); }
.device-notch {
    width: 68px; height: 5px;
    margin: 2px auto 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .34);
}
.device-screen {
    display: grid;
    gap: 12px;
    padding: 16px 14px 12px;
    background: #fff;
    border-radius: 34px;
}
.ds-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ds-title { font-size: .84rem; font-weight: 660; color: var(--ink); }
.ds-sub { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.ds-ring-row { display: flex; align-items: center; gap: 12px; }
.ds-ring {
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: conic-gradient(var(--rb-600) 0 62%, var(--rb-100) 62% 100%);
    flex: none;
}
.ds-ring span {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
}
.ds-ring-copy strong { display: block; font-size: .74rem; font-weight: 640; }
.ds-ring-copy small { display: block; font-size: .62rem; color: var(--ink-3); line-height: 1.35; }

.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ds-tile {
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--rb-050);
}
.ds-tile span { display: block; font-size: .58rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.ds-tile em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: .68rem;
    font-weight: 700;
    color: var(--rb-700);
}

.ds-meds {
    padding: 10px;
    border: 1px dashed var(--rb-200);
    border-radius: 11px;
}
.ds-meds-label {
    display: block;
    margin-bottom: 7px;
    font-size: .58rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.ds-pills { display: flex; gap: 5px; }
.ds-pills i {
    flex: 1;
    padding: 5px 0;
    font-style: normal;
    font-size: .56rem;
    font-weight: 620;
    text-align: center;
    color: var(--rb-700);
    background: var(--rb-100);
    border-radius: 7px;
}

.ds-tabs { display: flex; justify-content: space-between; gap: 6px; padding: 8px 12px 2px; border-top: 1px solid var(--line-2); }
.ds-tabs i { width: 100%; height: 3px; border-radius: 99px; background: var(--line); }
.ds-tabs i.on { background: var(--rb-600); }

.device figcaption {
    max-width: 240px;
    font-size: .72rem;
    line-height: 1.5;
    text-align: center;
    color: var(--ink-3);
}

/* ==========================================================================
   04 · Capabilities — varied grid
   ========================================================================== */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}
.cap {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.2vw, 32px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.cap:hover { transform: translateY(-5px); border-color: var(--rb-200); box-shadow: var(--shadow-md); }
.cap h3 { font-size: 1.12rem; margin-bottom: 10px; }
.cap p { font-size: .94rem; color: var(--ink-2); }
.cap-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    margin-bottom: 18px;
    color: var(--rb-600);
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    border-radius: 13px;
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.cap:hover .cap-icon { background: var(--rb-600); color: #fff; border-color: var(--rb-600); transform: rotate(-4deg); }

.cap-lg { grid-column: span 3; }
.cap-lg h3 { font-size: clamp(1.18rem, 1.6vw, 1.4rem); }
.cap-lg p { font-size: .98rem; }
.cap-row { flex-direction: row; align-items: flex-start; gap: clamp(18px, 2vw, 26px); }
.cap-row .cap-icon { margin-bottom: 0; }

.mini-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 24px; }
.mini-list li {
    padding: 6px 12px;
    font-size: .74rem;
    font-weight: 580;
    color: var(--rb-700);
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    border-radius: 999px;
}

/* ==========================================================================
   05 · Journey — timeline
   ========================================================================== */
.timeline { max-width: 1000px; }
.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 6px clamp(30px, 4vw, 56px);
    padding: clamp(26px, 3vw, 38px) 0;
}
.tl-item::before {
    content: '';
    position: absolute;
    left: 150px;
    top: 0; bottom: 0;
    width: 1px;
    margin-left: clamp(15px, 2vw, 28px);
    background: rgba(255, 255, 255, .2);
}
.tl-item:first-child::before { top: 42px; }
.tl-item:last-child::before { bottom: auto; height: 42px; }
.tl-node {
    position: absolute;
    left: 150px;
    top: 38px;
    width: 9px; height: 9px;
    margin-left: clamp(11px, 2vw, 24px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .14);
}
.tl-step {
    grid-column: 1;
    grid-row: 1;
    padding-top: .3em;
    font-size: .7rem;
    font-weight: 660;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}
.tl-item h3 { grid-column: 2; font-size: clamp(1.18rem, 1.8vw, 1.5rem); margin-bottom: 12px; }
.tl-item p { grid-column: 2; max-width: 60ch; color: rgba(255, 255, 255, .76); }

/* ==========================================================================
   06 · Trust
   ========================================================================== */
.trust-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
}
.trust-copy h2 { font-size: clamp(1.95rem, 3.4vw, 2.9rem); margin-bottom: 20px; }
.trust-points { display: grid; gap: 4px; margin-top: 38px; }
.trust-points li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}
.trust-ic {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    color: var(--rb-600);
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    border-radius: 13px;
}
.trust-points h3 { font-size: 1.05rem; margin-bottom: 7px; }
.trust-points p { font-size: .94rem; color: var(--ink-2); }

.boundary {
    position: sticky;
    top: calc(var(--nav-h) + 48px);
    padding: clamp(18px, 2vw, 26px);
    background: linear-gradient(180deg, var(--rb-050), var(--paper));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.boundary-panel {
    padding: 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.boundary-panel-clinical {
    background: linear-gradient(165deg, var(--rb-700), var(--rb-900));
    border-color: var(--rb-800);
    color: #fff;
}
.boundary-label {
    margin-bottom: 14px;
    font-size: .68rem;
    font-weight: 660;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rb-700);
}
.boundary-panel-clinical .boundary-label { color: rgba(255, 255, 255, .78); }
.role-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.role-chips li {
    padding: 6px 12px;
    font-size: .76rem;
    font-weight: 560;
    color: var(--ink);
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.boundary-panel-clinical .role-chips li {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
}
.boundary-note {
    margin-top: 14px;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--ink-3);
}
.boundary-panel-clinical .boundary-note { color: rgba(255, 255, 255, .72); }

.boundary-line { display: flex; align-items: center; gap: 12px; padding: 16px 2px; }
.boundary-line::before, .boundary-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--rb-300) 0 5px, transparent 5px 11px);
}
.boundary-line span {
    font-size: .64rem;
    font-weight: 660;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rb-600);
    white-space: nowrap;
}
.boundary figcaption {
    margin-top: 18px;
    font-size: .76rem;
    text-align: center;
    color: var(--ink-3);
}

/* ==========================================================================
   07 · Manifesto
   ========================================================================== */
.manifesto {
    color: #fff;
    background:
        radial-gradient(90% 120% at 15% 0%, rgba(94, 132, 238, .45), transparent 60%),
        linear-gradient(160deg, var(--rb-800), var(--rb-950));
    padding-block: clamp(80px, 11vw, 168px);
}
.manifesto blockquote { max-width: min(980px, 100%); }
.manifesto blockquote p {
    max-width: 19ch;
    font-size: clamp(2rem, 5.4vw, 4.1rem);
    font-weight: 620;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.manifesto blockquote em {
    display: block;
    margin-top: .18em;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: rgba(255, 255, 255, .78);
}
.manifesto blockquote footer {
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: .74rem;
    font-weight: 620;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
    max-width: 44ch;
}

/* ==========================================================================
   08 · FAQ
   ========================================================================== */
.faq-wrap .section-head { max-width: 40ch; }
.faq-list {
    max-width: min(900px, 100%);
    border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 2px;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 600;
    letter-spacing: -.012em;
    cursor: pointer;
    list-style: none;
    transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--rb-700); }
.faq-item summary i {
    position: relative;
    flex: none;
    width: 30px; height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.faq-item summary i::before, .faq-item summary i::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 11px; height: 1.6px;
    background: var(--rb-700);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform .3s var(--ease), background .25s var(--ease);
}
.faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] summary { color: var(--rb-700); }
.faq-item[open] summary i { background: var(--rb-600); border-color: var(--rb-600); transform: rotate(180deg); }
.faq-item[open] summary i::before,
.faq-item[open] summary i::after { background: #fff; }
.faq-item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-body { padding: 0 60px 24px 2px; }
.faq-body p { color: var(--ink-2); font-size: .98rem; max-width: 66ch; }
.faq-body a { color: var(--rb-700); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   09 · App
   ========================================================================== */
.app-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(44px, 6vw, 88px);
    align-items: center;
}
.app-copy h2 { font-size: clamp(1.95rem, 3.6vw, 3rem); margin-bottom: 20px; }
.app-lines { display: grid; gap: 2px; margin: 34px 0 36px; }
.app-lines li {
    padding: 14px 0;
    font-size: .98rem;
    color: rgba(255, 255, 255, .84);
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.app-lines li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }

.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.store-glyph { width: 24px; height: 24px; flex: none; }
.store-text small {
    display: block;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .64);
}
.store-text strong { display: block; font-size: .96rem; font-weight: 620; }
.store-note { margin-top: 16px; font-size: .8rem; color: rgba(255, 255, 255, .74); }

.app-visual { position: relative; min-height: 320px; }
.stack-card {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.stack-card-3 { transform: rotate(-7deg) scale(.92); opacity: .4; }
.stack-card-2 { transform: rotate(-3.5deg) scale(.96); opacity: .6; }
.stack-card-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: clamp(28px, 3vw, 44px);
    background: linear-gradient(165deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
    border-color: rgba(255, 255, 255, .34);
    box-shadow: var(--shadow-lg);
    animation: hover-float 9s var(--ease) infinite;
}
@keyframes hover-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
.stack-logo { display: block; height: 24px; aspect-ratio: 1996 / 270; position: relative; overflow: hidden; }
.stack-logo img {
    position: absolute;
    top: -84.444%;
    left: -4.409%;
    width: 108.818%;
    height: 268.148%;
    filter: brightness(0) invert(1);
}
.stack-line {
    font-size: clamp(1.12rem, 1.8vw, 1.45rem);
    font-weight: 620;
    line-height: 1.28;
    letter-spacing: -.02em;
}
.stack-rows { display: grid; gap: 9px; }
.stack-rows span { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .28); }
.stack-rows span:nth-child(2) { width: 78%; }
.stack-rows span:nth-child(3) { width: 52%; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    color: rgba(255, 255, 255, .78);
    background: linear-gradient(180deg, var(--rb-950), var(--rb-900));
    padding-top: clamp(56px, 6vw, 88px);
}
.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(30px, 4vw, 56px);
    padding-bottom: clamp(40px, 5vw, 64px);
}
.footer-brand p { margin-top: 20px; max-width: 42ch; font-size: .9rem; line-height: 1.65; }
.footer-col h2 {
    margin-bottom: 16px;
    font-size: .7rem;
    font-weight: 660;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col a {
    font-size: .92rem;
    color: rgba(255, 255, 255, .8);
    transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer-col a:hover { color: #fff; transform: translateX(3px); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px 32px;
    padding-block: 26px clamp(30px, 4vw, 44px);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .8rem;
    color: rgba(255, 255, 255, .72);
}
.footer-disclaimer { max-width: 62ch; }

/* ==========================================================================
   Motion — applied only once JS is confirmed, so content is never trapped
   behind a hidden state.
   ========================================================================== */
.js .hero-anim {
    opacity: 0;
    animation: hero-in .95s var(--ease) both;
    animation-delay: var(--d, 0s);
}
@keyframes hero-in {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to { opacity: 1; transform: none; }
}
.js .hero-line.hero-anim { opacity: 1; animation: none; }
.js .hero-line.hero-anim > span {
    transform: translate3d(0, 112%, 0);
    animation: hero-line 1.05s var(--ease) both;
    animation-delay: var(--d, 0s);
}
@keyframes hero-line { to { transform: none; } }

.js .will-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
        opacity .75s var(--ease) calc(var(--i, 0) * 80ms),
        transform .75s var(--ease) calc(var(--i, 0) * 80ms);
}
.js .will-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
    .surface-feature, .surface-wide { grid-column: span 12; }
    .surface { grid-column: span 6; }
    .cap-lg { grid-column: span 3; }
    .cap { grid-column: span 3; }
    .cap-row { grid-column: span 6; }
    .trust-split, .app-split { grid-template-columns: minmax(0, 1fr); }
    .boundary, .sticky-col { position: static; }
    .app-visual { min-height: 300px; max-width: 520px; }
}

@media (max-width: 900px) {
    :root { --nav-h: 64px; }

    /* Mobile navigation - toggle visible, panel hidden */
    .nav-toggle { display: inline-flex; }
    .nav-panel {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 90px 24px 40px;
        background: linear-gradient(165deg, #0a1e5c 0%, #152a6e 40%, #1a3278 100%);
        border: none;
        border-radius: 0;
        z-index: 999;
        overflow-y: auto;
    }
    .nav-panel.is-open { 
        display: flex;
    }
    .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-links a { padding: 16px 8px; font-size: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .nav-links a::after { display: none; }
    .nav-panel .btn { justify-content: center; margin-top: 20px; }

    .header-inner { flex-wrap: nowrap; height: var(--nav-h); }

    .observations { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .observation { padding: 26px 0; border-top: 1px solid var(--line); }
    .observation:first-child { border-top: 0; padding-top: 0; }
    .observation-num { margin-bottom: 12px; font-size: 1.7rem; }

    .sticky-split { grid-template-columns: minmax(0, 1fr); }

    .surface, .surface-feature, .surface-wide,
    .cap, .cap-lg, .cap-row { grid-column: span 6; }
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .surface-feature, .surface-wide, .cap-row { flex-direction: column; align-items: flex-start; }
    .surface-wide .surface-icon, .cap-row .cap-icon { margin-bottom: 18px; }
    .device { align-self: flex-start; margin-top: 30px; }

    .tl-item { grid-template-columns: minmax(0, 1fr); padding-left: 26px; gap: 0; }
    .tl-item::before { left: 0; margin-left: 4px; }
    .tl-item:first-child::before { top: 30px; }
    .tl-item:last-child::before { height: 30px; }
    .tl-node { left: 0; top: 26px; margin-left: 0; }
    .tl-step { grid-column: 1; padding-top: 0; margin-bottom: 10px; }
    .tl-item h3, .tl-item p { grid-column: 1; }

    .faq-body { padding-right: 20px; }
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: span 2; }
}

@media (max-width: 620px) {
    body { font-size: 15.5px; }

    /* Keep the hero close to one screen without letting copy be cramped. */
    .hero {
        padding-top: calc(var(--nav-h) + 26px);
        padding-bottom: 54px;
    }
    .eyebrow {
        margin-bottom: 20px;
        padding: 6px 13px 6px 10px;
        font-size: .655rem;
        letter-spacing: .07em;
    }
    .hero h1 { max-width: 14ch; margin-bottom: 20px; }
    .hero-lead { font-size: .98rem; margin-bottom: 26px; }
    .hero-chips { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 20px; }
    .hero-chips li { display: flex; align-items: baseline; gap: 12px; padding: 11px 15px; }
    .chip-label { flex: none; margin-bottom: 0; }
    .chip-text { font-size: .9rem; }
    .scroll-cue {
        position: static;
        align-self: flex-start;
        margin-top: 26px;
        transform: none;
        letter-spacing: .1em;
    }

    .device-frame { width: 214px; }
    .surface, .cap { padding: 22px; }
    .cap-grid, .bento { grid-template-columns: minmax(0, 1fr); }
    .surface, .surface-feature, .surface-wide,
    .cap, .cap-lg, .cap-row { grid-column: span 1; }

    .trust-points li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .faq-item summary { gap: 14px; }
    .faq-body { padding-right: 8px; }
    .footer-top { grid-template-columns: minmax(0, 1fr); }
    .footer-brand { grid-column: span 1; }
}

/* ==========================================================================
   No-JS small screens: the nav cannot collapse, so the bar joins the document
   flow rather than sitting fixed over the top of the hero. The first screenful
   is still navbar + hero, both royal blue.
   ========================================================================== */
@media (max-width: 900px) {
    html:not(.js) .site-header { position: relative; }
    html:not(.js) .hero { padding-top: clamp(26px, 5vh, 54px); }
    html:not(.js) .section { scroll-margin-top: 12px; }
}

/* ==========================================================================
   Very narrow screens — the menu button drops its visible label but keeps its
   accessible name.
   ========================================================================== */
@media (max-width: 420px) {
    .brand-mark { height: 23px; }
    .nav-toggle { padding: 9px 13px; }
    .nav-toggle-label {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ==========================================================================
   Reduced motion — entrance, drift, reveal and smooth scrolling all stand down
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    .js .hero-anim,
    .js .will-reveal,
    .js .will-reveal.is-in {
        opacity: 1 !important;
        transform: none !important;
    }
    .js .hero-line.hero-anim > span { transform: none !important; }

    .orb, .stack-card-1, .eyebrow .dot, .scroll-cue .ic { animation: none !important; }
    .surface:hover, .cap:hover, .hero-chips li:hover,
    .surface-feature:hover .device-frame, .footer-col a:hover { transform: none; }
}

@media (prefers-contrast: more) {
    .section-lead, .cap p, .surface-text, .observation p, .principle p { color: var(--ink); }
    .surface, .cap, .faq-item, .boundary-panel { border-color: #b9c4dc; }
}

@media print {
    .site-header, .scroll-cue, .hero-ambient, .deep-ambient, .app-visual { display: none; }
    .hero, .section-deep, .manifesto, .site-footer { color: #000; background: #fff; }
}


/* ==========================================================================
   Patient / Partners split — shared refinements
   ========================================================================== */

/* Every icon tile uses fixed logical dimensions. This prevents flex rows from
   compressing the tile into the malformed rectangle seen in the old Notes card. */
.surface-icon,
.cap-icon,
.trust-ic,
.partner-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    inline-size: 46px;
    block-size: 46px;
    min-inline-size: 46px;
    min-block-size: 46px;
    max-inline-size: 46px;
    max-block-size: 46px;
    aspect-ratio: 1;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--rb-600);
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    border-radius: 14px;
}
.surface-icon .ic,
.cap-icon .ic,
.trust-ic .ic,
.partner-icon .ic {
    display: block;
    inline-size: 22px;
    block-size: 22px;
    min-inline-size: 22px;
    min-block-size: 22px;
    stroke-width: 1.7;
}
.trust-points li { grid-template-columns: 46px minmax(0, 1fr); }
.cap-row .cap-icon { flex: 0 0 46px; }

.kicker-plain {
    padding-inline: 13px;
    color: var(--rb-700);
    background: var(--rb-050);
    border: 1px solid var(--rb-100);
    border-radius: 999px;
}
.connected-head { max-width: 720px; }
.cap-grid-focused .cap { grid-column: span 3; min-height: 260px; }
.cap-grid-focused .cap-icon { margin-bottom: 24px; }

/* Patient privacy illustration */
.privacy-visual {
    position: sticky;
    top: calc(var(--nav-h) + 48px);
    overflow: hidden;
    padding: clamp(28px, 4vw, 50px);
    background:
        radial-gradient(circle at 50% 24%, rgba(94, 132, 238, .18), transparent 38%),
        linear-gradient(160deg, var(--rb-050), var(--paper));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.privacy-orbit {
    position: relative;
    display: grid;
    place-items: center;
    width: min(300px, 72vw);
    aspect-ratio: 1;
    margin: 0 auto 30px;
}
.privacy-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    color: #fff;
    background: linear-gradient(145deg, var(--rb-500), var(--rb-800));
    border-radius: 24px;
    box-shadow: 0 18px 44px -16px rgba(30, 72, 190, .7);
}
.privacy-core .ic { width: 30px; height: 30px; }
.orbit {
    position: absolute;
    border: 1px solid var(--rb-200);
    border-radius: 50%;
}
.orbit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -5px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: var(--rb-500);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(30, 72, 190, .25);
}
.orbit-a { inset: 21%; animation: orbit-spin 18s linear infinite; }
.orbit-b { inset: 9%; opacity: .76; animation: orbit-spin 25s linear infinite reverse; }
.orbit-c { inset: 0; opacity: .5; animation: orbit-spin 34s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.privacy-caption h3 { margin-bottom: 10px; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.privacy-caption > p:last-child { color: var(--ink-2); font-size: .94rem; }
.privacy-visual figcaption { margin-top: 24px; font-size: .72rem; color: var(--ink-3); }

/* Partners page */
.nav-links a[aria-current='page'],
.btn[aria-current='page'] { color: #fff; }
.partner-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
}
.partner-audience {
    min-width: 0;
    padding: clamp(24px, 2.5vw, 34px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.partner-audience:hover {
    transform: translateY(-5px);
    border-color: var(--rb-200);
    box-shadow: var(--shadow-md);
}
.partner-audience .partner-icon { margin-bottom: 22px; }
.partner-audience h3 { margin-bottom: 11px; font-size: clamp(1.16rem, 1.7vw, 1.42rem); }
.partner-audience > p:last-child { color: var(--ink-2); font-size: .94rem; }

.partner-feature-split {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(34px, 6vw, 96px);
    align-items: start;
}
.partner-feature-list { display: grid; gap: 12px; }
.partner-feature-list article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 20px;
    padding: clamp(22px, 2.4vw, 30px);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.partner-feature-list article:hover { transform: translateX(5px); border-color: var(--rb-200); box-shadow: var(--shadow-sm); }
.partner-feature-list h3 { margin-bottom: 8px; font-size: 1.12rem; }
.partner-feature-list p { color: var(--ink-2); font-size: .93rem; }

.partner-dashboard { min-height: 500px; }
.dashboard-visual {
    flex: 0 0 min(320px, 38%);
    width: min(320px, 38%);
    min-width: 250px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 28px 60px -32px rgba(14, 39, 117, .5);
    transform: rotate(1.5deg);
}
.dash-top { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 14px; }
.dash-top span { height: 7px; width: 42%; background: var(--rb-100); border-radius: 99px; }
.dash-top span:last-child { width: 18%; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; }
.dash-kpis i { height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--rb-050); }
.dash-chart { display: flex; align-items: end; gap: 8px; height: 100px; padding: 12px; background: var(--tint); border-radius: 12px; }
.dash-chart b { flex: 1; height: 35%; background: linear-gradient(var(--rb-400), var(--rb-600)); border-radius: 5px 5px 2px 2px; }
.dash-chart b:nth-child(2) { height: 68%; }.dash-chart b:nth-child(3) { height: 48%; }.dash-chart b:nth-child(4) { height: 82%; }.dash-chart b:nth-child(5) { height: 60%; }
.dash-rows { display: grid; gap: 8px; margin-top: 14px; }
.dash-rows span { height: 9px; background: var(--line-2); border-radius: 99px; }
.dash-rows span:nth-child(2) { width: 78%; }.dash-rows span:nth-child(3) { width: 56%; }

.control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
}
.control-card {
    min-width: 0;
    padding: clamp(26px, 3vw, 40px);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.control-card-emphasis { grid-column: span 2; background: rgba(255, 255, 255, .13); }
.control-label {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 10px;
    font-size: .66rem;
    font-weight: 660;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
}
.control-card h3 { margin-bottom: 16px; font-size: clamp(1.25rem, 2vw, 1.6rem); color: #fff; }
.control-card p { color: rgba(255, 255, 255, .76); }
.control-card .ticks li { color: rgba(255, 255, 255, .8); }
.control-card .ticks li::before { border-color: var(--rb-200); }

@media (max-width: 900px) {
    .privacy-visual { position: static; }
    .partner-audience-grid { grid-template-columns: minmax(0, 1fr); }
    .partner-feature-split { grid-template-columns: minmax(0, 1fr); }
    .cap-grid-focused .cap { grid-column: span 3; }
    .partner-dashboard { min-height: auto; }
    .dashboard-visual { align-self: center; width: min(360px, 100%); min-width: 0; flex-basis: auto; margin-top: 28px; }
}

@media (max-width: 620px) {
    .cap-grid-focused .cap { grid-column: span 1; min-height: 0; }
    .partner-feature-list article { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; }
    .control-grid { grid-template-columns: minmax(0, 1fr); }
    .control-card-emphasis { grid-column: span 1; }
    .privacy-orbit { width: min(240px, 72vw); }
}

@media (max-width: 420px) {
    .brand-mark { height: 27.6px; }
    .partner-feature-list article { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .orbit { animation: none !important; }
    .partner-audience:hover,
    .partner-feature-list article:hover { transform: none; }
}


/* ==========================================================================
   Editorial de-boxing pass
   ========================================================================== */

/* The reading-progress line was removed from the document and script. Keep any
   stale cached markup visually inert and remove the white hairline from the
   sticky header treatment. */
.progress { display: none !important; }
.js .site-header.is-stuck {
    box-shadow: 0 18px 40px -26px rgba(6, 20, 64, .8);
}

/* Keep the original artwork while making the white wordmark optically brighter
   against every royal-blue surface. */
.brand-mark img,
.stack-logo img {
    opacity: 1;
    filter: brightness(0) invert(1) contrast(1.28) drop-shadow(0 0 9px rgba(255, 255, 255, .2));
}

/* Section labels read as editorial wayfinding rather than badges. */
.kicker,
.kicker-plain {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-bottom: 24px;
    color: var(--rb-600);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: .74rem;
    font-weight: 720;
    letter-spacing: .18em;
}
.kicker::after {
    content: '';
    display: block;
    width: clamp(34px, 4vw, 58px);
    height: 1px;
    margin-left: 5px;
    background: currentColor;
    opacity: .42;
}
.kicker-num {
    display: inline;
    min-width: 0;
    height: auto;
    padding: 0;
    font-family: var(--serif);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--rb-500);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.section-deep .kicker-num {
    color: rgba(255, 255, 255, .82);
    background: transparent;
    border: 0;
}
.section-deep .kicker { color: rgba(255, 255, 255, .76); }
.section-head { max-width: 60ch; }
.section-head h2 {
    max-width: 17ch;
    margin-bottom: 24px;
    font-size: clamp(2.15rem, 4.3vw, 3.7rem);
    letter-spacing: -.04em;
}
.section-head .section-lead { max-width: 58ch; }

/* More brand colour, less paper white. */
.patient-page .section-light,
.partners-page .section-light {
    background:
        radial-gradient(80% 70% at 100% 0%, rgba(155, 181, 246, .16), transparent 58%),
        #EEF3FF;
}
.patient-page .section-tint,
.partners-page .section-tint {
    background:
        linear-gradient(135deg, rgba(195, 211, 251, .38), transparent 46%),
        #E4ECFF;
    border-color: rgba(41, 90, 222, .09);
}
.patient-page #platform,
.partners-page #hospitals {
    background:
        radial-gradient(70% 90% at 0% 50%, rgba(94, 132, 238, .13), transparent 62%),
        #F0F4FF;
}
.patient-page #trust,
.partners-page #partner-trust { background: #EAF0FF; }

/* Hero summaries become aligned editorial columns rather than glass cards. */
.hero-chips { gap: clamp(18px, 3vw, 44px); }
.hero-chips li,
.hero-chips li:hover {
    padding: 17px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .32);
    border-radius: 0;
    transform: none;
}
.chip-label { color: rgba(255, 255, 255, .7); }

/* Labels sit directly with content instead of adding another pill shape. */
.tag {
    padding: 0;
    margin-bottom: 12px;
    color: var(--rb-600);
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Decorative icons and their inconsistent tiles are intentionally removed.
   Information hierarchy now comes from type, spacing and a common rule. */
.surface-icon,
.cap-icon,
.trust-ic,
.partner-icon { display: none !important; }

/* Flatten patient and partner surfaces into one aligned editorial system. */
.surface,
.cap,
.partner-audience,
.partner-feature-list article {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(41, 90, 222, .24);
    border-radius: 0;
    box-shadow: none;
}
.surface,
.cap {
    padding: clamp(26px, 3vw, 42px) 0;
}
.surface:hover,
.cap:hover,
.partner-audience:hover,
.partner-feature-list article:hover {
    background: transparent;
    border-color: var(--rb-500);
    box-shadow: none;
    transform: none;
}
.surface h3,
.cap h3,
.partner-audience h3,
.partner-feature-list h3 { color: var(--rb-900); }

.patient-bento,
.partner-bento { gap: 0 clamp(26px, 4vw, 58px); }
.patient-bento > .surface-feature,
.partner-bento > .surface-feature {
    grid-column: span 12;
    padding-top: 0;
    padding-bottom: clamp(52px, 6vw, 82px);
    border-top: 0;
    border-bottom: 1px solid rgba(41, 90, 222, .22);
}
.patient-bento > .surface:not(.surface-feature),
.partner-bento > .surface:not(.surface-feature) {
    grid-column: span 4;
}
.patient-bento > .surface-wide,
.partner-bento > .surface-wide {
    display: block;
    align-items: initial;
}

/* Connected care is now four balanced text-led statements. */
.cap-grid-focused {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(34px, 5vw, 74px);
    border-bottom: 1px solid rgba(41, 90, 222, .2);
}
.cap-grid-focused .cap {
    grid-column: auto;
    min-height: 230px;
    justify-content: flex-start;
}
.cap-grid-focused .cap-icon { display: none !important; }
.cap-grid-focused .cap h3 {
    max-width: 18ch;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

/* Trust points align to a single text edge once icon tiles are gone. */
.trust-points li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 25px;
    border-color: rgba(41, 90, 222, .2);
}
.trust-points h3 { color: var(--rb-900); font-size: 1.12rem; }

/* Keep the orbit illustration but remove the card around it and the boxed lock
   glyph in its centre. */
.privacy-visual {
    padding: clamp(18px, 3vw, 34px) 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(41, 90, 222, .24);
    border-radius: 0;
    box-shadow: none;
}
.privacy-core {
    width: 82px;
    height: 82px;
    border-radius: 50%;
}
.privacy-core .ic { display: none; }
.privacy-core::after {
    content: 'YOU';
    font-size: .7rem;
    font-weight: 740;
    letter-spacing: .14em;
    color: #fff;
}

/* Partners uses columns and rules, not repeated card containers. */
.partner-audience-grid { gap: clamp(26px, 4vw, 58px); }
.partner-audience { padding: 30px 0 10px; }
.partner-feature-list { gap: 0; border-bottom: 1px solid rgba(41, 90, 222, .2); }
.partner-feature-list article {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 30px 0;
}
.partner-feature-list article:hover { transform: none; }

/* Responsibility blocks stay legible on blue without looking like floating cards. */
.control-grid { gap: 0 clamp(36px, 5vw, 76px); }
.control-card,
.control-card-emphasis {
    padding: 34px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .3);
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.control-card-emphasis { border-bottom: 1px solid rgba(255, 255, 255, .3); }
.control-label {
    padding: 0;
    color: rgba(255, 255, 255, .68);
    border: 0;
    border-radius: 0;
}

/* The permissions diagram remains semantic but loses its nested card frames. */
.boundary {
    padding: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(41, 90, 222, .24);
    border-radius: 0;
    box-shadow: none;
}
.boundary-panel,
.boundary-panel-clinical {
    padding: 26px 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.boundary-panel-clinical .boundary-label { color: var(--rb-700); }
.boundary-panel-clinical .boundary-note { color: var(--ink-3); }
.role-chips { gap: 9px 18px; }
.role-chips li,
.boundary-panel-clinical .role-chips li {
    position: relative;
    padding: 0 0 0 13px;
    color: var(--ink-2);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.role-chips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .72em;
    width: 4px;
    height: 4px;
    background: var(--rb-500);
    border-radius: 50%;
}

@media (max-width: 900px) {
    .patient-bento > .surface:not(.surface-feature),
    .partner-bento > .surface:not(.surface-feature) { grid-column: span 6; }
    .partner-audience { padding-bottom: 4px; }
}

@media (max-width: 620px) {
    .hero-chips { gap: 8px; }
    .hero-chips li { padding-top: 11px; }
    .patient-bento > .surface:not(.surface-feature),
    .partner-bento > .surface:not(.surface-feature) { grid-column: span 1; }
    .cap-grid-focused { grid-template-columns: minmax(0, 1fr); }
    .cap-grid-focused .cap { min-height: 0; }
    .partner-feature-list article { grid-template-columns: minmax(0, 1fr); }
    .section-head h2 { max-width: 19ch; }
}


@media (max-width: 620px) {
    .patient-bento > .surface-feature,
    .partner-bento > .surface-feature { grid-column: span 1; }
}


/* Restored patient information — deliberately text-led, never boxed. */
.cap-consultation {
    grid-column: 1 / -1 !important;
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: clamp(34px, 6vw, 96px);
    min-height: 0;
    padding-block: clamp(34px, 5vw, 62px);
    border-top: 1px solid rgba(41, 90, 222, .28);
    border-bottom: 1px solid rgba(41, 90, 222, .2);
}
.cap-consultation .cap-intro h3 {
    max-width: 13ch;
    margin-bottom: 16px;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
}
.cap-consultation .cap-intro > p:last-child { color: var(--ink-2); }
.mode-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 42px);
}
.mode-list li {
    padding-top: 20px;
    border-top: 1px solid rgba(41, 90, 222, .28);
}
.mode-index {
    display: block;
    margin-bottom: 24px;
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--rb-500);
}
.mode-list strong {
    display: block;
    margin-bottom: 10px;
    color: var(--rb-900);
    font-size: 1.08rem;
}
.mode-list p { color: var(--ink-2); font-size: .9rem; }
.cap-grid-focused .mini-list {
    margin-top: auto;
    padding-top: 24px;
    gap: 10px 24px;
}
.cap-grid-focused .mini-list li {
    position: relative;
    padding: 0 0 0 12px;
    color: var(--rb-700);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.cap-grid-focused .mini-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .68em;
    width: 4px;
    height: 4px;
    background: var(--rb-500);
    border-radius: 50%;
}

@media (max-width: 900px) {
    .cap-consultation { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .mode-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .mode-index { margin-bottom: 10px; }
}


/* ==========================================================================
   Floating navigation refinement
   ========================================================================== */

/* The source wordmark has generous transparent canvas around the artwork.
   Preserve the precise crop, but avoid glow/drop-shadow filters that soften the
   outside edges of the letters. */
.brand-mark { transition: height .52s cubic-bezier(.22, 1, .36, 1); }
.brand-mark img {
    opacity: 1;
    filter: brightness(0) invert(1) contrast(1.16);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* The fixed wrapper stays transparent. On scroll, only its inner navigation
   becomes a compact floating surface. */
.site-header,
.js .site-header,
.js .site-header.is-stuck {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.header-inner {
    margin-inline: auto;
    margin-top: 0;
    border: 1px solid transparent;
    border-radius: 0;
    transform: translateZ(0);
    will-change: width, height, margin-top, border-radius;
    transition:
        width .52s cubic-bezier(.22, 1, .36, 1),
        height .52s cubic-bezier(.22, 1, .36, 1),
        margin-top .52s cubic-bezier(.22, 1, .36, 1),
        padding-inline .52s cubic-bezier(.22, 1, .36, 1),
        border-radius .52s cubic-bezier(.22, 1, .36, 1),
        border-color .52s cubic-bezier(.22, 1, .36, 1),
        background-color .52s cubic-bezier(.22, 1, .36, 1),
        box-shadow .52s cubic-bezier(.22, 1, .36, 1),
        -webkit-backdrop-filter .52s cubic-bezier(.22, 1, .36, 1),
        backdrop-filter .52s cubic-bezier(.22, 1, .36, 1);
}
.js .site-header.is-stuck .header-inner {
    width: min(1320px, calc(100% - 24px));
    height: 68px;
    margin-top: 10px;
    padding-inline: clamp(18px, 2.4vw, 30px);
    background-color: rgba(41, 90, 222, .96);
    border-color: rgba(255, 255, 255, .17);
    border-radius: 22px;
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
    box-shadow: 0 18px 46px -20px rgba(4, 16, 58, .7);
}
.js .site-header.is-stuck .brand-mark { height: 28.8px; }

@media (max-width: 900px) {
    .js .site-header.is-stuck .header-inner {
        width: calc(100% - 16px);
        height: 60px;
        margin-top: 8px;
        padding-inline: 14px;
        border-radius: 18px;
    }
    .js .site-header.is-stuck .brand-mark { height: 25.5px; }
    .js .site-header.is-stuck .nav-panel {
        top: 72px;
        left: 8px;
        right: 8px;
    }
}


/* Consultation-first Curamigo App preview */
.consultation-screen { min-height: 340px; align-content: start; }
.consult-options {
    display: grid;
    border-top: 1px solid var(--line);
}
.consult-option {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 10px;
    align-items: center;
    gap: 10px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line);
}
.consult-num {
    font-family: var(--serif);
    font-size: .72rem;
    color: var(--rb-500);
}
.consult-option strong {
    display: block;
    margin-bottom: 2px;
    font-size: .76rem;
    color: var(--ink);
}
.consult-option small {
    display: block;
    font-size: .6rem;
    color: var(--ink-3);
}
.consult-option > i {
    width: 7px;
    height: 7px;
    border: 1.5px solid var(--rb-300);
    border-radius: 50%;
}
.consult-option-active > i {
    border-color: var(--rb-600);
    background: var(--rb-600);
    box-shadow: 0 0 0 3px var(--rb-100);
}
.consult-follow {
    margin-top: 4px;
    padding: 12px;
    color: #fff;
    background: linear-gradient(145deg, var(--rb-600), var(--rb-800));
    border-radius: 12px;
}
.consult-follow span {
    display: block;
    margin-bottom: 3px;
    font-size: .64rem;
    font-weight: 680;
}
.consult-follow small {
    display: block;
    font-size: .55rem;
    color: rgba(255, 255, 255, .72);
}


/* Real Curamigo App screenshot */
.app-screenshot {
    flex: 0 0 auto;
    width: clamp(238px, 22vw, 292px);
    gap: 0;
}
.app-screenshot-frame {
    width: 100%;
    padding: 7px;
    overflow: hidden;
    background: linear-gradient(155deg, #11182d, #050916);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 42px;
    box-shadow: 0 34px 72px -32px rgba(14, 39, 117, .58);
    transform: translateZ(0);
    transition: transform .52s var(--ease), box-shadow .52s var(--ease);
}
.app-screenshot-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 35px;
}
.surface-feature:hover .app-screenshot-frame {
    transform: translateY(-7px) rotate(-.8deg);
    box-shadow: 0 44px 84px -34px rgba(14, 39, 117, .66);
}

@media (max-width: 900px) {
    .app-screenshot {
        width: min(292px, 72vw);
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .surface-feature:hover .app-screenshot-frame { transform: none; }
}


/* iPhone-style hardware shell around the supplied simulator screenshot */
.app-screenshot-frame {
    position: relative;
    padding: 9px;
    overflow: visible;
    background:
        linear-gradient(115deg, #737b89 0%, #202633 7%, #080b12 17%, #141a27 52%, #05070c 82%, #596170 94%, #202631 100%);
    border: 1px solid #8b93a0;
    border-radius: 52px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        inset 0 0 0 3px rgba(0, 0, 0, .72),
        0 36px 76px -30px rgba(8, 26, 86, .62),
        0 10px 24px -14px rgba(6, 12, 28, .5);
}
.app-screenshot-frame img {
    position: relative;
    z-index: 1;
    border: 1px solid #02040a;
    border-radius: 43px;
    background: #000;
}
.app-screenshot-frame::before,
.app-screenshot-frame::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 4px;
    background: linear-gradient(180deg, #505866, #111722 30%, #080c14 75%, #434b58);
    border: 1px solid rgba(2, 5, 12, .9);
}
/* Silent switch and volume controls */
.app-screenshot-frame::before {
    left: -5px;
    top: 86px;
    height: 31px;
    border-radius: 3px 0 0 3px;
    box-shadow:
        0 48px 0 -1px #1a202b,
        0 49px 0 0 rgba(2, 5, 12, .9),
        0 100px 0 -1px #1a202b,
        0 101px 0 0 rgba(2, 5, 12, .9);
}
/* Side button */
.app-screenshot-frame::after {
    right: -5px;
    top: 151px;
    height: 82px;
    border-radius: 0 3px 3px 0;
}


/* The app screenshot is a static product image, not an interactive control. */
.app-screenshot-frame { transition: none; }
.surface-feature:hover .app-screenshot-frame {
    transform: translateZ(0);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        inset 0 0 0 3px rgba(0, 0, 0, .72),
        0 36px 76px -30px rgba(8, 26, 86, .62),
        0 10px 24px -14px rgba(6, 12, 28, .5);
}


/* Bottom app download presentation */
.download-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    min-height: 0;
}
.download-phone {
    width: clamp(220px, 19vw, 264px);
}
.download-phone .app-screenshot-frame {
    width: 100%;
}
.download-actions {
    width: 100%;
    text-align: center;
}
.download-title {
    margin-bottom: 16px;
    font-size: clamp(1.08rem, 1.7vw, 1.32rem);
    font-weight: 680;
    letter-spacing: -.02em;
    color: #fff;
}
.store-row-official {
    justify-content: center;
    gap: 10px;
}
.store-badge-official {
    min-width: 166px;
    min-height: 54px;
    padding: 9px 16px;
    gap: 11px;
    text-align: left;
    color: #fff;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 11px;
    box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .9);
}
.store-badge-official .store-glyph {
    width: 27px;
    height: 27px;
}
.store-badge-official .play-glyph {
    width: 29px;
    height: 29px;
}
.store-badge-official .store-text small {
    font-size: .57rem;
    line-height: 1.1;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .82);
}
.store-badge-official .store-text strong {
    margin-top: 2px;
    font-size: 1rem;
    line-height: 1.05;
    color: #fff;
}

@media (max-width: 1080px) {
    .download-visual { width: min(520px, 100%); margin-top: 10px; }
    .download-phone { width: min(264px, 66vw); }
}

@media (max-width: 420px) {
    .store-row-official { flex-direction: column; align-items: center; }
    .store-badge-official { width: min(184px, 100%); }
}


/* Specialist care story */
.section-specialists {
    color: #fff;
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(94, 132, 238, .48), transparent 58%),
        linear-gradient(155deg, var(--rb-700), var(--rb-900) 68%, var(--rb-950));
    overflow: hidden;
}
.specialist-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 310px);
    gap: clamp(48px, 8vw, 120px);
    align-items: center;
}
.specialist-copy { min-width: 0; }
.section-specialists .kicker { color: rgba(255, 255, 255, .76); }
.section-specialists h2 {
    max-width: 15ch;
    margin-bottom: 22px;
    color: #fff;
    font-size: clamp(2.15rem, 4.4vw, 3.8rem);
    letter-spacing: -.04em;
}
.section-specialists .section-lead {
    max-width: 61ch;
    color: rgba(255, 255, 255, .8);
}
.specialty-groups {
    margin-top: clamp(36px, 5vw, 58px);
    border-top: 1px solid rgba(255, 255, 255, .22);
}
.specialty-line {
    display: grid;
    grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr);
    gap: clamp(20px, 4vw, 54px);
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.specialty-line span {
    font-size: .72rem;
    font-weight: 680;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}
.specialty-line p {
    color: #fff;
    font-size: .95rem;
}
.specialist-note {
    max-width: 62ch;
    margin-top: 24px;
    color: rgba(255, 255, 255, .62);
    font-size: .8rem;
}
.specialist-phone {
    width: clamp(246px, 21vw, 290px);
    justify-self: center;
}
.specialist-phone .app-screenshot-frame { width: 100%; }

@media (max-width: 1100px) and (min-width: 901px) {
    .nav-panel { gap: 10px; }
    .nav-links { gap: 8px; }
    .nav-links a { font-size: .78rem; }
    .btn { padding-inline: 13px; }
}

@media (max-width: 900px) {
    .specialist-split { grid-template-columns: minmax(0, 1fr); }
    .specialist-phone {
        width: min(290px, 72vw);
        margin-top: 8px;
    }
}

@media (max-width: 620px) {
    .specialty-line {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding-block: 16px;
    }
}


/* Specialist Care: visual on the left, editorial content on the right */
.specialist-split {
    grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
}
.specialist-phone {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}
.specialist-copy {
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 900px) {
    .specialist-split { grid-template-columns: minmax(0, 1fr); }
    .specialist-copy,
    .specialist-phone {
        grid-column: 1;
        grid-row: auto;
    }
    .specialist-phone { justify-self: center; }
}


/* Velora AI story */
.section-velora {
    background:
        radial-gradient(80% 90% at 100% 10%, rgba(94, 132, 238, .22), transparent 58%),
        linear-gradient(145deg, #F0F4FF, #E3EBFF);
    overflow: hidden;
}
.velora-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 310px);
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
}
.velora-copy { min-width: 0; }
.velora-copy h2 {
    max-width: 15ch;
    margin-bottom: 22px;
    font-size: clamp(2.15rem, 4.4vw, 3.8rem);
    letter-spacing: -.04em;
    color: var(--rb-900);
}
.velora-copy .section-lead { max-width: 62ch; }
.velora-points {
    margin-top: clamp(36px, 5vw, 58px);
    border-top: 1px solid rgba(41, 90, 222, .22);
}
.velora-points li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: clamp(15px, 2vw, 26px);
    padding: 19px 0;
    border-bottom: 1px solid rgba(41, 90, 222, .16);
}
.velora-points li > span {
    padding-top: .18em;
    font-family: var(--serif);
    font-size: .9rem;
    color: var(--rb-500);
}
.velora-points h3 {
    margin-bottom: 7px;
    font-size: 1.08rem;
    color: var(--rb-900);
}
.velora-points p {
    max-width: 64ch;
    color: var(--ink-2);
    font-size: .93rem;
}
.velora-boundary {
    max-width: 66ch;
    margin-top: 26px;
    padding-top: 22px;
    color: var(--ink-2);
    font-size: .87rem;
    border-top: 1px solid rgba(41, 90, 222, .24);
}
.velora-boundary strong {
    display: block;
    margin-bottom: 5px;
    color: var(--rb-800);
}
.velora-phone {
    width: clamp(246px, 21vw, 290px);
    justify-self: center;
}
.velora-phone .app-screenshot-frame { width: 100%; }

@media (max-width: 900px) {
    .velora-split { grid-template-columns: minmax(0, 1fr); }
    .velora-phone {
        width: min(290px, 72vw);
        margin-top: 8px;
    }
}

@media (max-width: 620px) {
    .velora-points li { grid-template-columns: 28px minmax(0, 1fr); }
}


/* How booking works */
.section-booking {
    background:
        radial-gradient(70% 90% at 0% 10%, rgba(94, 132, 238, .16), transparent 60%),
        #EEF3FF;
    overflow: hidden;
}
.booking-split {
    display: grid;
    grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
    gap: clamp(50px, 8vw, 118px);
    align-items: center;
}
.booking-phone {
    grid-column: 1;
    width: clamp(246px, 21vw, 290px);
    justify-self: start;
}
.booking-phone .app-screenshot-frame { width: 100%; }
.booking-copy {
    grid-column: 2;
    min-width: 0;
}
.booking-copy h2 {
    max-width: 16ch;
    margin-bottom: 22px;
    font-size: clamp(2.15rem, 4.4vw, 3.8rem);
    letter-spacing: -.04em;
    color: var(--rb-900);
}
.booking-copy .section-lead { max-width: 62ch; }
.booking-steps {
    margin-top: clamp(34px, 5vw, 54px);
    border-top: 1px solid rgba(41, 90, 222, .22);
}
.booking-steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: clamp(15px, 2vw, 26px);
    padding: 18px 0;
    border-bottom: 1px solid rgba(41, 90, 222, .16);
}
.booking-steps li > span {
    padding-top: .2em;
    font-family: var(--serif);
    font-size: .9rem;
    color: var(--rb-500);
}
.booking-steps h3 {
    margin-bottom: 7px;
    font-size: 1.08rem;
    color: var(--rb-900);
}
.booking-steps p {
    max-width: 62ch;
    color: var(--ink-2);
    font-size: .93rem;
}
.booking-note {
    max-width: 64ch;
    margin-top: 24px;
    color: var(--ink-3);
    font-size: .84rem;
}

@media (max-width: 900px) {
    .booking-split { grid-template-columns: minmax(0, 1fr); }
    .booking-copy,
    .booking-phone { grid-column: 1; }
    .booking-copy { grid-row: 1; }
    .booking-phone {
        grid-row: 2;
        width: min(290px, 72vw);
        justify-self: center;
        margin-top: 8px;
    }
}

@media (max-width: 620px) {
    .booking-steps li { grid-template-columns: 28px minmax(0, 1fr); }
}


/* Coming soon */
.section-soon {
    color: #fff;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(94, 132, 238, .42), transparent 60%),
        linear-gradient(150deg, var(--rb-700), var(--rb-900) 70%, var(--rb-950));
    overflow: hidden;
}
.section-soon .kicker {
    color: rgba(255, 255, 255, .78);
    background: transparent;
    border: 0;
}
.section-soon h2 { color: #fff; }
.section-soon .section-lead { color: rgba(255, 255, 255, .8); }
.soon-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 4vw, 56px);
    border-top: 1px solid rgba(255, 255, 255, .22);
    padding-top: clamp(26px, 3vw, 42px);
}
.soon-list li { min-width: 0; }
.soon-list li > span {
    display: block;
    margin-bottom: 16px;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .72);
}
.soon-list h3 {
    margin-bottom: 10px;
    font-size: clamp(1.14rem, 1.7vw, 1.4rem);
    color: #fff;
}
.soon-list p {
    color: rgba(255, 255, 255, .76);
    font-size: .94rem;
}
.soon-note {
    max-width: 62ch;
    margin-top: clamp(30px, 4vw, 48px);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .64);
    font-size: .84rem;
}

@media (max-width: 900px) {
    .soon-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .soon-list li {
        padding: 20px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .16);
    }
    .soon-list li > span { margin-bottom: 10px; }
}


/* Booking: copy on the left, screenshot on the right */
.booking-split {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 310px);
}
.booking-copy {
    grid-column: 1;
    grid-row: 1;
}
.booking-phone {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

@media (max-width: 900px) {
    .booking-split { grid-template-columns: minmax(0, 1fr); }
    .booking-copy { grid-column: 1; grid-row: 1; }
    .booking-phone { grid-column: 1; grid-row: 2; justify-self: center; }
}


/* Navigation group: hover/focus reveals the Curamigo App submenu */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-caret {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret { transform: rotate(180deg); }

.nav-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    display: grid;
    gap: 2px;
    min-width: 212px;
    margin-top: 12px;
    padding: 10px;
    background: rgba(14, 39, 117, .96);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    box-shadow: 0 22px 48px -22px rgba(4, 16, 58, .8);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px) scale(.98);
    transform-origin: 50% 0;
    transition:
        opacity .38s cubic-bezier(.22, 1, .36, 1),
        transform .38s cubic-bezier(.22, 1, .36, 1),
        visibility .38s;
}
/* A hover bridge keeps the menu open while the cursor travels to it. */
.nav-submenu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}
.nav-submenu a {
    padding: 9px 12px;
    font-size: .86rem;
    font-weight: 540;
    white-space: nowrap;
    color: rgba(255, 255, 255, .84);
    border-radius: 10px;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-submenu a::after { display: none; }
.nav-submenu a:hover,
.nav-submenu a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .13);
}

/* On the mobile panel the links simply stack — no hover required. */
@media (max-width: 900px) {
    .nav-group { display: block; }
    .nav-group-trigger { justify-content: space-between; width: 100%; }
    .nav-caret,
    .nav-group:hover .nav-caret { display: none; }
    .js .nav-submenu,
    .nav-submenu {
        position: static;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 14px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .nav-submenu::before { display: none; }
    .js .nav-submenu a {
        padding: 12px 4px;
        font-size: .95rem;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-submenu,
    .nav-caret { transition: none; }
}


/* ==========================================================================
   Softer arrivals + frameless navigation menu
   ========================================================================== */

/* The submenu reads as an extension of the navigation bar, not a popup card:
   no border, no shadow, no detached panel. */
.nav-submenu {
    left: auto;
    right: auto;
    min-width: 196px;
    margin-top: 0;
    padding: 6px 0 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
    transform-origin: 50% 0;
    transition:
        opacity .5s cubic-bezier(.22, 1, .36, 1),
        visibility .5s;
}
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu { transform: none; }

/* A single soft blue field behind the links, flowing out of the nav bar. */
.nav-submenu::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(41, 90, 222, .97), rgba(30, 72, 190, .95));
    border-radius: 0 0 18px 18px;
    opacity: 0;
    transform: scaleY(.9);
    transform-origin: 50% 0;
    transition:
        opacity .5s cubic-bezier(.22, 1, .36, 1),
        transform .5s cubic-bezier(.22, 1, .36, 1);
}
.nav-group:hover .nav-submenu::after,
.nav-group:focus-within .nav-submenu::after {
    opacity: 1;
    transform: scaleY(1);
}
.nav-submenu::before { top: -16px; height: 16px; }

/* Links drift in one after another instead of appearing at once. */
.nav-submenu a {
    padding: 10px 18px;
    opacity: 0;
    transform: translateY(-7px);
    border-radius: 0;
    transition:
        opacity .46s cubic-bezier(.22, 1, .36, 1),
        transform .46s cubic-bezier(.22, 1, .36, 1),
        background .3s var(--ease),
        color .3s var(--ease);
}
.nav-group:hover .nav-submenu a,
.nav-group:focus-within .nav-submenu a {
    opacity: 1;
    transform: translateY(0);
}
.nav-submenu a:nth-child(1) { transition-delay: .04s; }
.nav-submenu a:nth-child(2) { transition-delay: .09s; }
.nav-submenu a:nth-child(3) { transition-delay: .14s; }
.nav-submenu a:nth-child(4) { transition-delay: .19s; }
.nav-submenu a:hover,
.nav-submenu a:focus-visible { background: rgba(255, 255, 255, .1); }

/* Content arrivals: longer, gentler, more sequenced. */
.js .will-reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity .95s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 95ms),
        transform .95s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 95ms);
}
.js .hero-anim { animation-duration: 1.15s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.js .hero-line.hero-anim > span { animation-duration: 1.2s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

@media (max-width: 900px) {
    .nav-submenu,
    .js .nav-submenu {
        min-width: 0;
        padding: 0 0 0 14px;
        transition: none;
    }
    .nav-submenu::after { display: none; }
    .nav-submenu a,
    .nav-group:hover .nav-submenu a {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-submenu,
    .nav-submenu::after,
    .nav-submenu a { transition: none !important; transition-delay: 0s !important; }
    .nav-submenu a { opacity: 1; transform: none; }
}


/* ==========================================================================
   No dropdown: the navigation expands sideways and reveals the links inline
   ========================================================================== */
@media (min-width: 901px) {
    .nav-group {
        position: relative;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* Inline strip inside the bar — not an overlay, not a panel. */
    .nav-submenu {
        position: static;
        display: flex;
        align-items: center;
        gap: clamp(4px, 1vw, 16px);
        min-width: 0;
        max-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        opacity: 0;
        visibility: visible;
        transform: none;
        transition:
            max-width .62s cubic-bezier(.22, 1, .36, 1),
            opacity .42s cubic-bezier(.22, 1, .36, 1),
            padding .62s cubic-bezier(.22, 1, .36, 1);
    }
    .nav-submenu::before,
    .nav-submenu::after { display: none; }

    .nav-group:hover .nav-submenu,
    .nav-group:focus-within .nav-submenu {
        max-width: 34rem;
        padding-left: clamp(8px, 1.2vw, 18px);
        opacity: 1;
        transform: none;
    }

    /* A hairline marks where the grouped links begin. */
    .nav-submenu a:first-child { box-shadow: -1px 0 0 rgba(255, 255, 255, .26); padding-left: clamp(10px, 1.2vw, 18px); }

    .nav-submenu a {
        position: relative;
        padding: 8px 2px;
        font-size: .86rem;
        font-weight: 520;
        white-space: nowrap;
        color: rgba(255, 255, 255, .82);
        background: transparent;
        border-radius: 0;
        opacity: 0;
        transform: translateX(-10px);
        transition:
            opacity .5s cubic-bezier(.22, 1, .36, 1),
            transform .5s cubic-bezier(.22, 1, .36, 1),
            color .25s var(--ease);
    }
    .nav-group:hover .nav-submenu a,
    .nav-group:focus-within .nav-submenu a {
        opacity: 1;
        transform: translateX(0);
    }
    .nav-submenu a:nth-child(1) { transition-delay: .06s; }
    .nav-submenu a:nth-child(2) { transition-delay: .12s; }
    .nav-submenu a:nth-child(3) { transition-delay: .18s; }
    .nav-submenu a:nth-child(4) { transition-delay: .24s; }

    .nav-submenu a:hover,
    .nav-submenu a:focus-visible { color: #fff; background: transparent; }

    /* Same underline treatment as the other navigation links. */
    .nav-submenu a::after {
        content: '';
        display: block;
        position: absolute;
        left: 2px;
        right: 2px;
        bottom: 4px;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform .3s var(--ease);
    }
    .nav-submenu a:first-child::after { left: clamp(10px, 1.2vw, 18px); }
    .nav-submenu a:hover::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-submenu,
    .nav-submenu a { transition: none !important; transition-delay: 0s !important; }
}


/* ==========================================================================
   No dropdown: the navigation expands sideways and reveals the links inline
   ========================================================================== */
@media (min-width: 901px) {
    .nav-group {
        position: relative;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* Inline strip inside the bar — not an overlay, not a panel. */
    .nav-submenu {
        position: static;
        display: flex;
        align-items: center;
        gap: clamp(4px, 1vw, 16px);
        min-width: 0;
        max-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        opacity: 0;
        visibility: visible;
        transform: none;
        transition:
            max-width .62s cubic-bezier(.22, 1, .36, 1),
            opacity .42s cubic-bezier(.22, 1, .36, 1),
            padding .62s cubic-bezier(.22, 1, .36, 1);
    }
    .nav-submenu::before,
    .nav-submenu::after { display: none; }

    .nav-group:hover .nav-submenu,
    .nav-group:focus-within .nav-submenu {
        max-width: 34rem;
        padding-left: clamp(8px, 1.2vw, 18px);
        opacity: 1;
        transform: none;
    }

    /* A hairline marks where the grouped links begin. */
    .nav-submenu a:first-child {
        box-shadow: -1px 0 0 rgba(255, 255, 255, .26);
        padding-left: clamp(10px, 1.2vw, 18px);
    }

    .nav-submenu a {
        position: relative;
        padding: 8px 2px;
        font-size: .86rem;
        font-weight: 520;
        white-space: nowrap;
        color: rgba(255, 255, 255, .82);
        background: transparent;
        border-radius: 0;
        opacity: 0;
        transform: translateX(-10px);
        transition:
            opacity .5s cubic-bezier(.22, 1, .36, 1),
            transform .5s cubic-bezier(.22, 1, .36, 1),
            color .25s var(--ease);
    }
    .nav-group:hover .nav-submenu a,
    .nav-group:focus-within .nav-submenu a {
        opacity: 1;
        transform: translateX(0);
    }
    .nav-submenu a:nth-child(1) { transition-delay: .06s; }
    .nav-submenu a:nth-child(2) { transition-delay: .12s; }
    .nav-submenu a:nth-child(3) { transition-delay: .18s; }
    .nav-submenu a:nth-child(4) { transition-delay: .24s; }

    .nav-submenu a:hover,
    .nav-submenu a:focus-visible { color: #fff; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-submenu,
    .nav-submenu a { transition: none !important; transition-delay: 0s !important; }
}


/* Mobile: consultation modes stack so every label and description shares one
   left edge, instead of the label pushing each description to a different x. */
@media (max-width: 620px) {
    .hero-chips { gap: 0; }
    .hero-chips li,
    .hero-chips li:hover {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 5px;
        padding: 14px 0 0;
    }
    .chip-label {
        flex: none;
        margin-bottom: 0;
        font-size: .64rem;
        letter-spacing: .12em;
    }
    .chip-text {
        font-size: .92rem;
        line-height: 1.45;
        text-wrap: pretty;
    }
}


/* ==========================================================================
   Booking sequence: frames crossfade, matching step highlights
   ========================================================================== */
.booking-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 1206 / 2622;
    overflow: hidden;
    border-radius: 43px;
    background: #000;
}
.booking-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #02040a;
    border-radius: 43px;
    opacity: 0;
    transform: scale(1.015);
    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1),
        transform .9s cubic-bezier(.22, 1, .36, 1);
}
.booking-frame.is-active {
    opacity: 1;
    transform: scale(1);
}

/* The step tied to the frame on screen reads as the current one. */
.booking-steps li {
    position: relative;
    transition: opacity .5s var(--ease);
}
.booking-steps li::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 2px;
    background: var(--rb-500);
    opacity: 0;
    transform: scaleY(.4);
    transform-origin: 50% 0;
    transition:
        opacity .5s cubic-bezier(.22, 1, .36, 1),
        transform .5s cubic-bezier(.22, 1, .36, 1);
}
.js .booking-step { opacity: .55; }
.js .booking-step.is-active { opacity: 1; }
.booking-step.is-active::before { opacity: 1; transform: scaleY(1); }
.booking-step.is-active > span { color: var(--rb-700); }
.booking-step > span,
.booking-step h3,
.booking-step p { transition: color .5s var(--ease); }

@media (max-width: 620px) {
    .booking-steps li::before { left: -10px; top: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .booking-frame { transition: none; }
    .js .booking-step { opacity: 1; }
}


/* The generic `.app-screenshot-frame img` rule outranks `.booking-frame`, which
   forced the stacked frames into normal flow (position:relative, height:auto)
   so only the first one sat inside the clipped area. Match its specificity. */
.app-screenshot-frame .booking-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 1206 / 2622;
    overflow: hidden;
    border-radius: 43px;
    background: #000;
}
.app-screenshot-frame .booking-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border: 0;
    border-radius: 43px;
    background: #000;
    opacity: 0;
    transform: scale(1.015);
    transition:
        opacity .8s cubic-bezier(.22, 1, .36, 1),
        transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.app-screenshot-frame .booking-frame.is-active {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .app-screenshot-frame .booking-frame { transition: none; }
}


/* Instant frame swap. A crossfade left both frames partially transparent for a
   moment, and with a black backing behind them that overlap read as a flash.
   The incoming frame is fully opaque in the same paint, so nothing dips. */
.app-screenshot-frame .booking-frame {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: none;
    will-change: auto;
}
.app-screenshot-frame .booking-frame.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}


/* The phone was centred against the whole column, which includes the heading,
   so it floated above the steps. Offset it down to sit with the step list. */
@media (min-width: 901px) {
    .booking-phone {
        margin-top: clamp(76px, 7vw, 104px);
        align-self: center;
    }
}


/* `align-self: center` balances margins, so a margin-top only moved the phone
   half the distance. A relative offset shifts it fully and survives the
   reveal animation, which resets `transform`. */
@media (min-width: 901px) {
    .booking-phone {
        margin-top: 0;
        position: relative;
        top: clamp(74px, 7vw, 100px);
    }
}


@media (min-width: 901px) {
    .booking-phone { top: clamp(104px, calc(7vw + 30px), 132px); }
}


@media (min-width: 901px) {
    .booking-phone { top: clamp(90px, calc(7vw + 16px), 115px); }
}


@media (min-width: 901px) {
    .booking-phone { top: clamp(84px, calc(7vw + 6px), 102px); }
}


/* Scroll-driven steps: the phone stays put while the step list moves past it,
   so the frame on screen always matches the step being read. */
@media (min-width: 901px) {
    .booking-split { align-items: start; }
    .booking-phone {
        position: sticky;
        top: calc(var(--nav-h) + 86px);
        align-self: start;
        margin-top: clamp(84px, calc(7vw + 6px), 102px);
    }
}


/* ==========================================================================
   Pinned booking section: the panel holds still while the scroll advances it
   ========================================================================== */
@media (min-width: 901px) {
    .section-booking { padding-block: 0; }
    .booking-track {
        position: relative;
        height: 420vh;
    }
    .booking-pin {
        position: sticky;
        top: 0;
        display: grid;
        align-content: center;
        height: 100vh;
        overflow: hidden;
        padding-block: clamp(40px, 6vh, 90px);
    }
    /* Inside the pin the phone no longer needs its own sticky behaviour. */
    .booking-phone {
        position: static;
        top: auto;
        margin-top: 0;
        align-self: center;
    }
    .booking-split { align-items: center; }
    .booking-steps { margin-top: clamp(22px, 3vh, 40px); }
    .booking-steps li { padding-block: clamp(10px, 1.5vh, 18px); }
    .booking-note { margin-top: clamp(14px, 2vh, 24px); }
}

/* Mobile keeps the normal flow — pinning a tall section on a small screen
   fights the user's scroll. */
@media (max-width: 900px) {
    .booking-track { height: auto; }
    .booking-pin {
        position: static;
        height: auto;
        overflow: visible;
        padding: 0;
    }
}


/* `overflow: hidden` on the section turned it into a scroll container, which
   stops the inner pin from sticking to the viewport. */
.section-booking { overflow: visible; }


/* `overflow: hidden` on the section turned it into a scroll container, which
   stops the inner pin from sticking to the viewport. */
.section-booking { overflow: visible; }


/* Release the pin shortly after the fifth step instead of holding on it, and
   drop the phone slightly so it sits lower against the step list. */
@media (min-width: 901px) {
    .booking-track { height: 300vh; }
    .booking-phone {
        position: relative;
        top: clamp(18px, 3.5vh, 48px);
    }
}


/* Shorter track: each step now needs roughly a fifth of the scroll it did
   before, so the sequence keeps pace with the user. */
@media (min-width: 901px) {
    .booking-track { height: 180vh; }
}


/* ==========================================================================
   Front page hero: one statement, one action — no editorial detail
   ========================================================================== */
.hero-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 960px;
    margin-inline: auto;
}
.hero-centered .eyebrow {
    margin-bottom: clamp(20px, 3vh, 30px);
    font-size: .68rem;
    letter-spacing: .18em;
}
.hero-title {
    max-width: 22ch;
    margin-bottom: clamp(20px, 3vh, 30px);
    font-size: clamp(2.6rem, 7.4vw, 5.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.045em;
}
.hero-centered .hero-lead {
    max-width: 44ch;
    margin: 0 auto clamp(32px, 4.5vh, 48px);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: 440;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.hero-cta,
.hero-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 28px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    border-radius: 999px;
    transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.hero-cta {
    color: var(--rb-800);
    background: #fff;
    box-shadow: 0 16px 36px -18px rgba(4, 16, 58, .6);
}
.hero-cta:hover { transform: translateY(-2px); background: #f3f6ff; }
.hero-ghost {
    color: var(--rb-800);
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 16px 36px -18px rgba(4, 16, 58, .6);
}
.hero-ghost:hover { transform: translateY(-2px); background: #f3f6ff; border-color: #f3f6ff; }
.hero-ghost .ic { width: 17px; height: 17px; stroke-width: 1.9; }

@media (max-width: 620px) {
    .hero-title { max-width: 18ch; font-size: clamp(2.3rem, 11vw, 3.1rem); }
    .hero-centered .hero-lead { max-width: 34ch; font-size: 1rem; }
    .hero-actions { flex-direction: column; width: 100%; gap: 10px; }
    .hero-cta,
    .hero-ghost { width: 100%; justify-content: center; }
}


/* ==========================================================================
   Hero accents: rotating word, aurora glow, quiet detail row
   ========================================================================== */

/* The three consultation modes cycle through the headline, so the promise is
   shown rather than spelled out in a paragraph. */
.hero-swap {
    display: inline-block;
    height: 1.02em;
    overflow: hidden;
    vertical-align: bottom;
}
.hero-swap-track {
    display: flex;
    flex-direction: column;
    animation: hero-swap 10.5s cubic-bezier(.76, 0, .24, 1) infinite;
}
.hero-swap i {
    display: block;
    height: 1.02em;
    font-style: normal;
    line-height: 1.02;
    background: linear-gradient(104deg, #ffffff 18%, #bcd0ff 54%, #8fb0ff 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@keyframes hero-swap {
    0%, 26%    { transform: translateY(0); }
    33%, 59%   { transform: translateY(-1.02em); }
    66%, 92%   { transform: translateY(-2.04em); }
    100%       { transform: translateY(-3.06em); }
}

/* A soft bloom behind the headline so the panel is not flat blue. */
.hero-centered::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: min(760px, 92vw);
    aspect-ratio: 1;
    transform: translate(-50%, -58%);
    background:
        radial-gradient(circle at 50% 50%, rgba(150, 183, 255, .34), transparent 62%);
    filter: blur(14px);
    pointer-events: none;
    animation: hero-bloom 11s ease-in-out infinite;
}
.hero-centered { position: relative; }
@keyframes hero-bloom {
    0%, 100% { opacity: .82; transform: translate(-50%, -58%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -58%) scale(1.07); }
}

/* Three short proof points — label-length, not sentences. */
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px clamp(18px, 3vw, 34px);
    margin-top: clamp(30px, 4.5vh, 50px);
    padding-top: clamp(20px, 3vh, 28px);
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .74);
}
.hero-meta span { font-size: .5rem; color: rgba(185, 207, 255, .9); }

@media (max-width: 620px) {
    .hero-meta {
        flex-direction: column;
        align-items: center;
        gap: 9px;
        margin-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-swap-track { animation: none; }
    .hero-centered::before { animation: none; }
}


/* The pinned panel is exactly one viewport tall, so its content has to fit.
   It was overflowing by ~55px, which clipped "How booking works" off the top. */
@media (min-width: 901px) {
    .booking-pin { padding-block: clamp(20px, 3.5vh, 48px); }
    .booking-copy h2 {
        margin-bottom: 14px;
        font-size: clamp(1.9rem, 3.2vw, 2.9rem);
        line-height: 1.06;
    }
    .booking-copy .section-lead {
        max-width: 58ch;
        font-size: clamp(.96rem, 1.1vw, 1.05rem);
        line-height: 1.55;
    }
    .booking-copy .kicker { margin-bottom: 14px; }
    .booking-steps { margin-top: clamp(14px, 2vh, 26px); }
    .booking-steps li { padding-block: clamp(8px, 1.15vh, 14px); }
    .booking-steps h3 { margin-bottom: 4px; font-size: 1.02rem; }
    .booking-steps p { font-size: .89rem; line-height: 1.5; }
    .booking-note {
        margin-top: clamp(10px, 1.4vh, 18px);
        font-size: .8rem;
    }
    .booking-phone { top: clamp(10px, 2vh, 30px); }
}

/* Short viewports need a firmer trim. */
@media (min-width: 901px) and (max-height: 820px) {
    .booking-copy h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
    .booking-copy .section-lead { font-size: .94rem; }
    .booking-steps p { font-size: .85rem; }
    .booking-steps li { padding-block: 7px; }
}


/* Nudge the whole pinned panel down ~5% of the viewport so the kicker clears
   the floating navigation. */
@media (min-width: 901px) {
    .booking-pin { padding-top: calc(clamp(20px, 3.5vh, 48px) + 5vh); }
}


body.nav-open {
    overflow: hidden;
}


/* ==========================================================================
   Mobile navigation: viewport overlay and floating menu card
   ========================================================================== */
@media (max-width: 900px) {
    /* A transformed or filtered header traps fixed descendants inside the
       header height. Remove that containing block on mobile. */
    .site-header,
    .js .site-header,
    .js .site-header.is-stuck,
    .header-inner,
    .js .site-header.is-stuck .header-inner {
        transform: none !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        contain: none !important;
        overflow: visible !important;
    }

    .nav-toggle {
        display: inline-flex !important;
        position: fixed !important;
        top: max(16px, env(safe-area-inset-top)) !important;
        right: max(16px, env(safe-area-inset-right)) !important;
        bottom: auto !important;
        left: auto !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        background: rgba(18, 47, 141, .72) !important;
        border: 1px solid rgba(255, 255, 255, .28) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 30px -16px rgba(4, 16, 58, .75) !important;
        z-index: 10002 !important;
    }

    .nav-toggle-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }

    .nav-toggle-bars {
        display: flex !important;
        width: 20px !important;
        height: 16px !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }

    .nav-toggle-bars i {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        flex: 0 0 2px !important;
        background: currentColor !important;
        border-radius: 999px !important;
        transform-origin: center !important;
        transition: transform .3s var(--ease), opacity .2s ease !important;
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child {
        transform: translateY(7px) rotate(45deg) !important;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) {
        opacity: 0 !important;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(7, 24, 75, .76);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .32s var(--ease), visibility .32s;
    }

    body.nav-open::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #nav-panel.nav-panel,
    .js .site-header.is-stuck #nav-panel.nav-panel {
        display: flex !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: min(calc(100vw - 32px), 360px) !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: clamp(16px, 2.5dvh, 24px) !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: clamp(10px, 1.6dvh, 16px) !important;
        overflow: visible !important;
        color: #fff !important;
        background: linear-gradient(155deg, rgba(44, 76, 171, .96), rgba(17, 45, 126, .98)) !important;
        border: 1px solid rgba(255, 255, 255, .2) !important;
        border-radius: 24px !important;
        box-shadow: 0 28px 80px -28px rgba(2, 11, 43, .85) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(-50%, calc(-50% - 18px)) scale(.97) !important;
        transform-origin: 50% 50% !important;
        transition: opacity .3s var(--ease), transform .38s var(--ease), visibility .38s !important;
        z-index: 10000 !important;
    }

    #nav-panel.nav-panel.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    #nav-panel .nav-links {
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: clamp(2px, .6dvh, 6px) !important;
    }

    #nav-panel .nav-links > a,
    #nav-panel .nav-group-trigger {
        display: flex !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        color: #fff !important;
        text-align: center !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
    }

    #nav-panel .nav-links a::after { display: none !important; }

    #nav-panel .nav-group {
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #nav-panel .nav-caret { display: none !important; }

    #nav-panel .nav-submenu,
    #nav-panel .nav-group:hover .nav-submenu,
    #nav-panel .nav-group:focus-within .nav-submenu {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        margin: 2px 0 6px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        background: rgba(5, 20, 69, .3) !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overflow: visible !important;
    }

    #nav-panel .nav-submenu::before,
    #nav-panel .nav-submenu::after { display: none !important; }

    #nav-panel .nav-submenu a {
        display: flex !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 7px 6px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: .84rem !important;
        font-weight: 520 !important;
        line-height: 1.2 !important;
        color: rgba(255, 255, 255, .8) !important;
        text-align: center !important;
        white-space: normal !important;
        border: 0 !important;
        border-radius: 8px !important;
    }

    #nav-panel > .btn {
        display: inline-flex !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 10px 18px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        color: #123584 !important;
        background: #fff !important;
        border: 1px solid rgba(255, 255, 255, .85) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .65) !important;
    }

    body.nav-open { overflow: hidden !important; }
}

@media (max-width: 900px) and (max-height: 650px) {
    #nav-panel.nav-panel,
    .js .site-header.is-stuck #nav-panel.nav-panel {
        padding: 12px !important;
        gap: 8px !important;
    }
    #nav-panel .nav-links > a,
    #nav-panel .nav-group-trigger {
        min-height: 34px !important;
        padding-block: 6px !important;
        font-size: .94rem !important;
    }
    #nav-panel .nav-submenu {
        margin-block: 0 4px !important;
        padding: 5px !important;
    }
    #nav-panel .nav-submenu a {
        min-height: 30px !important;
        padding-block: 5px !important;
        font-size: .78rem !important;
    }
    #nav-panel > .btn { min-height: 40px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle-bars i,
    body::before,
    #nav-panel.nav-panel { transition: none !important; }
}

/* Mobile navigation styled after the supplied capsule-and-card reference */
@media (max-width: 900px) {
    body::before {
        background: linear-gradient(145deg, rgba(41, 90, 222, .93), rgba(14, 39, 117, .9)) !important;
        -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
        backdrop-filter: blur(14px) saturate(120%) !important;
    }

    .header-inner,
    .js .site-header.is-stuck .header-inner {
        transition:
            width .42s var(--ease),
            height .42s var(--ease),
            margin-top .42s var(--ease),
            padding-inline .42s var(--ease),
            border-radius .42s var(--ease),
            border-color .32s ease,
            background-color .32s ease,
            box-shadow .32s ease !important;
    }

    body.nav-open .header-inner,
    body.nav-open .js .site-header.is-stuck .header-inner {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        height: 68px !important;
        margin-top: max(12px, env(safe-area-inset-top)) !important;
        margin-inline: auto !important;
        padding-inline: 18px 12px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 1px solid rgba(24, 58, 127, .08) !important;
        border-radius: 22px !important;
        box-shadow: 0 18px 44px -28px rgba(18, 47, 110, .42) !important;
    }

    body.nav-open .brand-mark { height: 25px !important; }
    body.nav-open .brand-mark img { filter: none !important; }

    body.nav-open .nav-toggle {
        top: calc(max(12px, env(safe-area-inset-top)) + 12px) !important;
        right: 22px !important;
        color: #10275d !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    #nav-panel.nav-panel,
    .js .site-header.is-stuck #nav-panel.nav-panel {
        top: calc(max(12px, env(safe-area-inset-top)) + 82px) !important;
        left: 12px !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: clamp(24px, 4.2dvh, 34px) clamp(22px, 6vw, 30px) clamp(28px, 4.8dvh, 38px) !important;
        gap: clamp(18px, 2.8dvh, 26px) !important;
        color: #171a20 !important;
        background: #fff !important;
        border: 1px solid rgba(24, 58, 127, .06) !important;
        border-radius: 28px !important;
        box-shadow: 0 28px 70px -38px rgba(18, 47, 110, .38) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-18px) scale(.985) !important;
        transform-origin: 50% 0 !important;
        transition: opacity .3s ease, transform .42s var(--ease), visibility .42s !important;
        overflow: visible !important;
    }

    #nav-panel.nav-panel.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }

    #nav-panel::before { content: none !important; }

    #nav-panel .nav-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: clamp(6px, 1.2dvh, 10px) !important;
    }

    #nav-panel .nav-links > a,
    #nav-panel .nav-group-trigger {
        display: flex !important;
        width: 100% !important;
        min-height: 46px !important;
        padding: 10px 4px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-family: var(--sans) !important;
        font-size: clamp(.96rem, 4vw, 1.05rem) !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        letter-spacing: -.01em !important;
        color: #171a20 !important;
        text-align: left !important;
        text-transform: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;
        transform: none !important;
    }

    #nav-panel .nav-links > a:active,
    #nav-panel .nav-group-trigger:active {
        color: #244ee7 !important;
        background: rgba(36, 78, 231, .06) !important;
    }

    #nav-panel .nav-group {
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #nav-panel .nav-caret {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        margin-left: auto !important;
        flex: 0 0 18px !important;
        color: #171a20 !important;
        transform: rotate(0deg) !important;
        transition: transform .32s var(--ease) !important;
    }

    #nav-panel .nav-group.is-expanded .nav-caret {
        transform: rotate(180deg) !important;
    }

    #nav-panel .nav-submenu,
    #nav-panel .nav-group:hover .nav-submenu,
    #nav-panel .nav-group:focus-within .nav-submenu {
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
        background: #f4f7fc !important;
        border: 0 solid rgba(36, 78, 231, .08) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
        overflow: hidden !important;
        transition:
            max-height .4s var(--ease),
            margin .4s var(--ease),
            padding .4s var(--ease),
            opacity .25s ease,
            visibility .4s !important;
    }

    #nav-panel .nav-group.is-expanded .nav-submenu,
    #nav-panel .nav-group.is-expanded:hover .nav-submenu,
    #nav-panel .nav-group.is-expanded:focus-within .nav-submenu {
        max-height: 210px !important;
        margin: 2px 0 8px !important;
        padding: 8px !important;
        border-width: 1px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #nav-panel .nav-submenu a {
        display: flex !important;
        min-height: 34px !important;
        padding: 7px 10px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-family: var(--sans) !important;
        font-size: .82rem !important;
        font-weight: 560 !important;
        letter-spacing: 0 !important;
        color: #35508a !important;
        text-transform: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;
    }

    #nav-panel .nav-submenu a:active {
        color: #244ee7 !important;
        background: rgba(36, 78, 231, .07) !important;
    }

    #nav-panel > .btn {
        display: inline-flex !important;
        width: fit-content !important;
        min-width: 150px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 13px 24px !important;
        align-self: flex-start !important;
        justify-content: center !important;
        font-family: var(--sans) !important;
        font-size: .94rem !important;
        font-weight: 650 !important;
        letter-spacing: -.005em !important;
        color: #fff !important;
        text-transform: none !important;
        background: #2948f2 !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
    }

    #nav-panel > .btn .ic {
        display: none !important;
    }
}

@media (max-width: 900px) and (max-height: 680px) {
    body.nav-open .header-inner,
    body.nav-open .js .site-header.is-stuck .header-inner {
        height: 68px !important;
        margin-top: 8px !important;
    }

    body.nav-open .nav-toggle {
        top: 15px !important;
    }

    #nav-panel.nav-panel,
    .js .site-header.is-stuck #nav-panel.nav-panel {
        top: 84px !important;
        padding: 16px 20px 20px !important;
        gap: 12px !important;
        border-radius: 24px !important;
    }

    #nav-panel .nav-links { gap: 2px !important; }

    #nav-panel .nav-links > a,
    #nav-panel .nav-group-trigger {
        min-height: 38px !important;
        padding-block: 7px !important;
        font-size: .86rem !important;
    }

    #nav-panel .nav-group.is-expanded .nav-submenu,
    #nav-panel .nav-group.is-expanded:hover .nav-submenu,
    #nav-panel .nav-group.is-expanded:focus-within .nav-submenu {
        max-height: 170px !important;
        margin-bottom: 4px !important;
        padding: 5px 8px !important;
    }

    #nav-panel .nav-submenu a {
        min-height: 28px !important;
        padding-block: 4px !important;
        font-size: .7rem !important;
    }

    #nav-panel > .btn {
        min-height: 44px !important;
        padding-block: 10px !important;
    }
}

/* ==========================================================================
   Hero pixel field — health icons painted to canvas, one per pixel cell.
   The grid is rasterised once; only a small region around the cursor is
   repainted per frame, so the hero stays smooth.
   ========================================================================== */
.hero-pixels {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.pixel-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.pixel-canvas-glow {
    opacity: 0;
    transition: opacity .28s ease;
    will-change: opacity;
}

.hero-pixels.is-glowing .pixel-canvas-glow {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pixel-canvas-glow { transition: none; }
}