/* ==========================================================================
   DNA Testing Solutions — design system v2 (2026)
   Concept: "the helix is the route". Bio-tech surfaces + logistics UI
   (tracking codes, checkpoints, departure boards).

   No build step and no Tailwind dependency: one static file, so it works on
   cPanel without a terminal and keeps Core Web Vitals clean.
   Legacy component names (.panel, .btn, .faq-item, .cert-thumb, .notice,
   .data-table …) are kept so un-ported pages still render.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
    /* brand */
    --ink: #0A3532;
    --ink-soft: #4B6A66;
    --ink-faint: #7C9894;
    --teal: #0E6E66;
    --teal-600: #0B5C55;
    --teal-400: #17A090;
    --teal-wash: #E6F4F0;
    --mint: #6EE7C8;
    --signal: #FFB547;          /* logistics hi-vis, used on dark only */
    --amber: #A86200;           /* signal colour that passes AA on white */
    --amber-soft: #FFF4E2;

    /* surfaces */
    --paper: #F4F7F6;
    --surface: #FFFFFF;
    --line: #DCE7E4;
    --line-strong: #C3D6D1;
    --night: #041C1A;
    --night-2: #08302C;
    --night-line: rgba(255, 255, 255, .12);

    /* type */
    --f-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --f-accent: 'Instrument Serif', Georgia, serif;

    /* shape + depth */
    --r-xs: 8px;
    --r-sm: 12px;
    --r: 20px;
    --r-lg: 28px;
    --shadow-1: 0 1px 2px rgba(4, 28, 26, .06), 0 4px 16px -6px rgba(4, 28, 26, .08);
    --shadow-2: 0 2px 4px rgba(4, 28, 26, .05), 0 24px 48px -20px rgba(4, 28, 26, .22);

    --gutter: clamp(20px, 4vw, 40px);
    --wrap: 1200px;
    --nav-h: 72px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Cross-document page transitions (Chrome/Edge/Safari 18+). Zero JS. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .28s; }

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
    margin: 0;
    font-family: var(--f-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
    font-family: var(--f-sans);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: inherit;
    margin: 0;
    text-wrap: balance;
}
h1 { line-height: 1.02; }
h2 { line-height: 1.08; }
h3 { line-height: 1.25; letter-spacing: -0.015em; }
p  { margin: 0; text-wrap: pretty; }

::selection { background: var(--mint); color: var(--night); }

/* --- 3. Layout ----------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 9vw, 128px); position: relative; }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }
.bg-surface { background: var(--surface); }
.bg-paper   { background: var(--paper); }

.dark {
    --ink: #EAF6F3;
    --ink-soft: rgba(234, 246, 243, .72);
    --ink-faint: rgba(234, 246, 243, .5);
    --line: var(--night-line);
    background: var(--night);
    color: var(--ink);
}

.stack > * + * { margin-top: var(--stack, 1rem); }

.grid { display: grid; gap: var(--gap, 24px); }
@media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: clamp(36px, 5vw, 56px);
}
.head > div { max-width: 640px; }
.head > p { max-width: 38ch; }

/* --- 4. Type ------------------------------------------------------------- */
.display { font-size: clamp(2.5rem, 5.2vw, 4.25rem); }
.h2      { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.h3      { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.lede    { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--ink-soft); line-height: 1.55; }
.muted   { color: var(--ink-soft); }
.small   { font-size: .875rem; }
.xs      { font-size: .8125rem; }

/* one serif italic word per headline — the "human" counterweight to the tech UI */
.accent {
    font-family: var(--f-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--teal);
}
.dark .accent { color: var(--mint); }

.mono, .code {
    font-family: var(--f-mono);
    font-size: .8125em;
    letter-spacing: .02em;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--f-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1.1rem;
}
.eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.dark .eyebrow { color: var(--mint); }

.measure   { max-width: 64ch; }
.measure-s { max-width: 52ch; }

/* --- 5. Icons ------------------------------------------------------------ */
.i {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.i-sm { width: 1em; height: 1em; }

.icon-tile {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--teal-wash);
    color: var(--teal);
}
.icon-tile .i { width: 24px; height: 24px; }
.dark .icon-tile { background: rgba(110, 231, 200, .1); color: var(--mint); }

/* --- 6. Buttons, chips, links ------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    padding: .75rem 1.35rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .i { transition: transform .2s var(--ease); }
.btn:hover .i-move { transform: translateX(3px); }

.btn-primary { background: var(--teal); color: #fff; box-shadow: 0 8px 20px -10px rgba(14, 110, 102, .8); }
.btn-primary:hover { background: var(--teal-600); color: #fff; }

.btn-signal { background: var(--signal); color: var(--night); box-shadow: 0 10px 30px -12px rgba(255, 181, 71, .8); }
.btn-signal:hover { background: #FFC56E; color: var(--night); }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }

.btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: .5rem 1rem; font-size: .875rem; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--teal);
}
.link-arrow:hover .i { transform: translate(2px, -2px); }
.link-arrow .i { transition: transform .2s var(--ease); }
.dark .link-arrow { color: var(--mint); }

.link-underline {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.link-underline:hover { text-decoration-color: currentColor; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}
.chip .i { width: 14px; height: 14px; color: var(--teal); }
.dark .chip { background: rgba(255, 255, 255, .05); color: var(--ink); }
.dark .chip .i { color: var(--mint); }
.chip-strike { color: var(--ink-soft); background: transparent; }
.chip-strike .i { color: var(--ink-faint); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.lab-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--f-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-wash);
    padding: .3rem .6rem;
    border-radius: 999px;
}
.lab-flag .i { width: 12px; height: 12px; }

.accred-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--surface);
    padding: .3rem .65rem;
    border-radius: 999px;
}
.accred-chip .i { width: 13px; height: 13px; color: var(--teal); }

.badge-save {
    font-family: var(--f-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--amber);
    background: var(--amber-soft);
    padding: .2rem .5rem;
    border-radius: 999px;
}

/* --- 7. Surfaces --------------------------------------------------------- */
.card, .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.panel-wash {
    background: var(--teal-wash);
    border: 1px solid color-mix(in srgb, var(--teal) 15%, transparent);
    border-radius: var(--r);
}
.card-pad { padding: clamp(22px, 3vw, 32px); }

.glass {
    background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-radius: var(--r-lg);
}

/* subtle bio/map texture for dark sections */
.texture::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(110, 231, 200, .16) 1px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
}
.glow::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 720px;
    height: 720px;
    right: -180px;
    top: -260px;
    background: radial-gradient(circle, rgba(23, 160, 144, .35), transparent 62%);
    filter: blur(10px);
}

/* --- 8. Navigation ------------------------------------------------------- */
.topbar {
    background: var(--night);
    color: rgba(234, 246, 243, .75);
    font-size: .8125rem;
}
.topbar .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 38px;
}
.topbar a:hover { color: #fff; }
.topbar-items { display: flex; gap: 22px; align-items: center; }
.topbar-items span, .topbar-items a { display: inline-flex; align-items: center; gap: .45rem; }
.topbar .i { width: 14px; height: 14px; color: var(--mint); }
.topbar-note { display: none; }
@media (min-width: 900px) { .topbar-note { display: inline-flex; align-items: center; gap: .45rem; } }
@media (max-width: 639px) { .topbar-hide-sm { display: none !important; } }

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(244, 247, 246, .78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, background-color .2s;
}
.site-nav.is-scrolled { border-bottom-color: var(--line); background: rgba(255, 255, 255, .86); }

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 700; letter-spacing: -0.02em; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--night);
    color: var(--mint);
}
.brand-mark .i { width: 22px; height: 22px; }
.brand-name { line-height: 1.05; font-size: 1rem; }
.brand-name small {
    display: block;
    font-family: var(--f-mono);
    font-weight: 400;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.nav-links { display: none; gap: 4px; align-items: center; }
.nav-links a {
    padding: .5rem .85rem;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color .15s, background-color .15s;
}
.nav-links a:hover { color: var(--ink); background: rgba(14, 110, 102, .07); }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(14, 110, 102, .1); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-cart {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
}
.nav-cart b {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--teal);
    color: #fff;
    font-size: .6875rem;
    display: grid;
    place-items: center;
}
.nav-book { display: none; }
.nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
}

@media (min-width: 1000px) {
    .nav-links { display: flex; }
    .nav-book { display: inline-flex; }
    .nav-toggle { display: none; }
}

/* mobile menu — native Popover API, no JS */
.mobile-nav {
    inset: 0 0 auto auto;
    margin: 0;
    width: min(100vw, 420px);
    height: 100dvh;
    max-height: none;
    border: 0;
    padding: 24px var(--gutter);
    background: var(--night);
    color: #EAF6F3;
    overflow-y: auto;
}
.mobile-nav::backdrop { background: rgba(4, 28, 26, .5); backdrop-filter: blur(4px); }
.mobile-nav:popover-open { animation: slide-in .3s var(--ease); }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.mobile-nav .nav-toggle { background: transparent; border-color: var(--night-line); color: #fff; }
.mobile-nav ul { list-style: none; margin: 0 0 32px; padding: 0; }
.mobile-nav li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--night-line);
}
.mobile-nav li a .i { color: var(--mint); }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }

/* --- 9. Hero ------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 85% 10%, rgba(23, 160, 144, .28), transparent 60%),
        linear-gradient(180deg, var(--night) 0%, #052522 100%);
    padding-block: clamp(56px, 8vw, 104px) clamp(64px, 8vw, 112px);
}
.hero-grid { display: grid; gap: 48px; align-items: center; position: relative; z-index: 1; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

.hero .display { margin-bottom: 24px; }
.hero .lede { max-width: 34rem; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 44px;
    border-top: 1px solid var(--night-line);
    padding-top: 24px;
    max-width: 36rem;
}
.hero-facts div + div { padding-left: 18px; border-left: 1px solid var(--night-line); }
.hero-facts dt { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.03em; color: #fff; line-height: 1.1; }
.hero-facts dd { margin: 4px 0 0; font-size: .8125rem; color: var(--ink-soft); line-height: 1.4; }

/* route card */
.route-card { padding: 20px; position: relative; }
.route-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 6px 14px;
    border-bottom: 1px solid var(--night-line);
    font-family: var(--f-mono);
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
}
.live-dot { display: inline-flex; align-items: center; gap: .45rem; color: var(--mint); }
.live-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    animation: ping 1.8s var(--ease) infinite;
}
@keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(110, 231, 200, .6); }
    100% { box-shadow: 0 0 0 10px rgba(110, 231, 200, 0); }
}

.route-svg { width: 100%; height: auto; margin-block: 6px; overflow: visible; }
.route-svg .strand-a { stroke: var(--mint); }
.route-svg .strand-b { stroke: #2BB8A5; opacity: .55; }
.route-svg .rungs { stroke: rgba(110, 231, 200, .35); }
.route-svg .draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.4s .2s var(--ease) forwards; }
.route-svg .flow { stroke-dasharray: 3 7; animation: flow 1.2s linear infinite; }
.route-svg .node { fill: var(--night); stroke: var(--mint); stroke-width: 2; }
.route-svg .node-lab { fill: var(--night); stroke: var(--signal); stroke-width: 2; }
.route-svg .halo { fill: rgba(110, 231, 200, .14); }
.route-svg .halo-lab { fill: rgba(255, 181, 71, .14); }
.route-svg text { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; fill: rgba(234, 246, 243, .85); }
.route-svg text.sub { fill: rgba(234, 246, 243, .5); font-size: 9.5px; }
.route-svg .parcel { fill: var(--signal); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (max-width: 560px) {
    .route-svg text { font-size: 17px; }
    .route-svg text.sub { display: none; }
}
@keyframes flow { to { stroke-dashoffset: -20; } }

/* checkpoint tracker (hero card + reused) */
.track {
    list-style: none;
    margin: 0;
    padding: 14px 6px 4px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    border-top: 1px solid var(--night-line);
}
.track li { position: relative; font-size: .6875rem; line-height: 1.3; color: var(--ink-faint); padding-top: 18px; }
.track li::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    right: -6px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .1);
}
.track li::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    height: 3px;
    width: 0;
    border-radius: 3px;
    background: var(--mint);
    transition: width .5s var(--ease);
}
.track li.is-lit { color: var(--ink); }
.track li.is-lit::after { width: calc(100% + 6px); }
.track li.is-abroad.is-lit::after { background: var(--signal); }
.track li:last-child::before, .track li:last-child.is-lit::after { right: 0; width: 100%; }
@media (max-width: 520px) {
    .track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
}

/* --- 10. Marquee --------------------------------------------------------- */
.marquee-band { border-block: 1px solid var(--line); background: var(--surface); }
.marquee-band .wrap { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.marquee-label {
    flex: none;
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    max-width: 150px;
    line-height: 1.4;
}
.marquee {
    overflow: hidden;
    flex: 1;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; font-weight: 600; color: var(--ink-soft); }
.marquee-item img { height: 30px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.marquee-item:hover img { filter: none; opacity: 1; }
.marquee-item .mono { color: var(--teal); font-size: .75rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 639px) { .marquee-label { display: none; } }

/* --- 11. Chain of custody split ----------------------------------------- */
.chain { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 1000px) { .chain { grid-template-columns: 1fr 120px 1fr; gap: 0; } }

.chain-card { padding: clamp(24px, 3.5vw, 40px); border-radius: var(--r-lg); position: relative; overflow: hidden; }
.chain-card h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin: 18px 0 8px; }
.chain-card > p { color: var(--ink-soft); margin-bottom: 24px; }
.chain-center { background: var(--surface); border: 1px solid var(--line); }
.chain-lab {
    background:
        radial-gradient(ellipse 80% 70% at 100% 0%, rgba(23, 160, 144, .35), transparent 60%),
        var(--night);
}
.chain-tag {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--teal-wash);
    color: var(--teal);
}
.chain-lab .chain-tag { background: rgba(255, 181, 71, .14); color: var(--signal); }

.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .task-list { grid-template-columns: 1fr 1fr; } }
.task-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: .9rem;
    line-height: 1.4;
}
.task-list .i { color: var(--teal); margin-top: 1px; width: 18px; height: 18px; }
.chain-lab .task-list li { background: rgba(255, 255, 255, .05); }
.chain-lab .task-list .i { color: var(--signal); }

.chain-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 72px;
}
.chain-link::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 2px dashed var(--line-strong);
}
@media (min-width: 1000px) {
    .chain-link::before { left: 0; right: 0; top: 50%; bottom: auto; border-left: 0; border-top: 2px dashed var(--line-strong); }
}
.chain-link span {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--paper);
    border: 1px solid var(--line);
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
    text-align: center;
}
.chain-link .i { color: var(--teal); width: 22px; height: 22px; animation: hover-y 3s ease-in-out infinite; }
@keyframes hover-y { 50% { transform: translateY(-3px); } }

.not-here {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 16px 18px;
    border-radius: var(--r);
    border: 1px dashed var(--line-strong);
    font-size: .875rem;
}
.not-here strong { margin-right: 6px; font-weight: 600; }

/* --- 12. Test cards ------------------------------------------------------ */
.test-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.test-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.test-card h3 { font-size: 1.125rem; margin: 18px 0 8px; }
.test-card p { font-size: .9rem; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.test-card .card-foot {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.test-card .go {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--teal);
    transition: background-color .2s, color .2s, transform .25s var(--ease);
}
.test-card:hover .go { background: var(--teal); color: #fff; transform: rotate(-45deg); }

/* whole-card click target, keeps a single real <a> for SEO + a11y */
.stretched::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

.price { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.price small { font-family: var(--f-mono); font-size: .6875rem; font-weight: 500; color: var(--ink-soft); letter-spacing: .06em; margin-right: 4px; }
.price-old { font-size: .8125rem; color: var(--ink-faint); text-decoration: line-through; }

/* featured bento */
.bento { display: grid; gap: 16px; }
@media (min-width: 760px) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bento > :nth-child(1) { grid-column: span 3; grid-row: span 2; }
    .bento > :nth-child(2), .bento > :nth-child(3) { grid-column: span 3; }
    .bento > :nth-child(n+4) { grid-column: span 2; }
}
.test-card.is-feature {
    background:
        radial-gradient(ellipse 90% 70% at 100% 0%, rgba(23, 160, 144, .3), transparent 60%),
        var(--night);
    border-color: transparent;
    color: #EAF6F3;
    --ink: #EAF6F3;
    --ink-soft: rgba(234, 246, 243, .7);
    --ink-faint: rgba(234, 246, 243, .45);
    --line: var(--night-line);
    padding: clamp(24px, 3vw, 36px);
    min-height: 320px;
}
.test-card.is-feature h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -0.03em; }
.test-card.is-feature .icon-tile { background: rgba(110, 231, 200, .12); color: var(--mint); width: 56px; height: 56px; }
.test-card.is-feature .go { background: rgba(255, 255, 255, .08); color: var(--mint); }
.test-card.is-feature:hover .go { background: var(--mint); color: var(--night); }
.test-card.is-feature .helix-deco {
    position: absolute;
    right: 28px;
    top: 72px;
    width: 120px;
    opacity: .32;
    pointer-events: none;
}
.test-card.is-feature > :not(.helix-deco) { position: relative; z-index: 1; }
.test-card.is-feature > .popular-tag { position: absolute; }
.test-card.is-feature p { max-width: 38ch; }

.popular-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--f-mono);
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: var(--amber-soft);
    color: var(--amber);
}
.is-feature .popular-tag { background: rgba(255, 181, 71, .14); color: var(--signal); }

/* compact list rows for "other tests" */
.test-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .test-rows { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.test-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 4px;
    border-bottom: 1px solid var(--line);
    transition: padding .25s var(--ease), background-color .2s;
}
.test-row:hover { padding-inline: 12px; background: var(--surface); }
.test-row .name { flex: 1; font-weight: 600; letter-spacing: -0.01em; }
.test-row .name span { display: block; font-weight: 400; font-size: .8125rem; color: var(--ink-soft); }
.test-row .price { font-size: 1rem; text-align: right; }
.test-row .i-go { color: var(--ink-faint); transition: color .2s, transform .2s var(--ease); }
.test-row:hover .i-go { color: var(--teal); transform: translate(2px, -2px); }

/* --- 13. Journey (checkpoints) ------------------------------------------ */
.journey {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    position: relative;
    counter-reset: cp;
}
@media (min-width: 900px) { .journey { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }

.journey-step {
    position: relative;
    padding: 22px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--line);
    counter-increment: cp;
}
.journey-step .cp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    color: var(--ink-faint);
}
.journey-step .cp::before { content: 'STAGE 0' counter(cp); }
.journey-step .cp .i { width: 20px; height: 20px; color: var(--teal); }
.journey-step.is-abroad .cp .i { color: var(--signal); }
.journey-step h3 { font-size: 1.0625rem; margin: 14px 0 6px; }
.journey-step p { font-size: .875rem; color: var(--ink-soft); line-height: 1.5; }
.journey-step.is-abroad { background: var(--night); border-color: transparent; color: #EAF6F3; --ink-soft: rgba(234, 246, 243, .7); }
.journey-step.is-abroad .icon-tile { background: rgba(255, 181, 71, .14); color: var(--signal); }
.journey-step.is-abroad .cp { color: var(--signal); }

.journey-meter {
    height: 4px;
    border-radius: 4px;
    background: var(--line);
    margin-bottom: 28px;
    overflow: hidden;
}
.journey-meter span {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left;
    background: linear-gradient(90deg, var(--teal), var(--teal-400) 60%, var(--signal));
}

/* --- 14. Feature tiles --------------------------------------------------- */
.tile { padding: 26px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.tile h3 { font-size: 1.0625rem; margin: 18px 0 6px; }
.tile p { font-size: .9rem; color: var(--ink-soft); }
.dark .tile { background: rgba(255, 255, 255, .04); }

/* --- 15. Founder band ---------------------------------------------------- */
.founder {
    display: grid;
    gap: 32px;
    align-items: center;
    padding: clamp(28px, 5vw, 64px);
    border-radius: var(--r-lg);
    background:
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(255, 181, 71, .16), transparent 60%),
        radial-gradient(ellipse 70% 80% at 100% 0%, rgba(23, 160, 144, .35), transparent 60%),
        var(--night);
    color: #EAF6F3;
    position: relative;
    overflow: hidden;
}
@media (min-width: 900px) { .founder { grid-template-columns: auto 1fr auto; gap: 48px; } }
.founder-mark {
    width: 112px;
    height: 112px;
    border-radius: 32px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    font-family: var(--f-accent);
    font-style: italic;
    font-size: 3rem;
    color: var(--mint);
}
.founder blockquote { margin: 0; font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.founder cite { display: block; margin-top: 16px; font-style: normal; font-size: .875rem; color: rgba(234, 246, 243, .7); }

/* --- 16. FAQ ------------------------------------------------------------- */
.faq-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: 1fr 1.6fr; gap: 72px; } }
.faq-list { display: grid; gap: 10px; }

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    transition: border-color .2s, box-shadow .2s;
    interpolate-size: allow-keywords;
}
.faq-item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 60px 20px 22px;
    position: relative;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 16px;
    top: 50%;
    translate: 0 -50%;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    color: var(--teal);
    font-size: 1.25rem;
    font-weight: 400;
    transition: rotate .25s var(--ease), background-color .2s;
}
.faq-item[open] summary::after { rotate: 45deg; background: var(--teal-wash); }
.faq-item .faq-body { padding: 0 22px 22px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.65; max-width: 68ch; }
.faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }

/* --- 17. CTA ------------------------------------------------------------- */
.cta-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    padding: clamp(32px, 6vw, 80px);
    background:
        radial-gradient(ellipse 70% 90% at 100% 100%, rgba(23, 160, 144, .45), transparent 60%),
        var(--night);
    color: #EAF6F3;
    display: grid;
    gap: 32px;
    align-items: end;
}
@media (min-width: 900px) { .cta-card { grid-template-columns: 1.4fr 1fr; } }
.cta-card .lede { color: rgba(234, 246, 243, .72); margin-top: 16px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .cta-actions { justify-content: flex-end; } }
.cta-card .helix-deco { position: absolute; right: -70px; top: -40px; width: 260px; opacity: .16; pointer-events: none; }
.cta-card > :not(.helix-deco) { position: relative; z-index: 1; }

/* --- 18. Disclaimer ------------------------------------------------------ */
.notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: var(--r);
    background: var(--amber-soft);
    border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent);
}
.notice > .i { color: var(--amber); width: 20px; height: 20px; margin-top: 2px; }
.notice-quiet {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--r);
    border: 1px dashed var(--line-strong);
}
.notice-quiet > .i { color: var(--teal); width: 20px; height: 20px; margin-top: 2px; }
.notice-title { font-weight: 600; font-size: .875rem; margin-bottom: 2px; }
.notice p:not(.notice-title), .notice-quiet p:not(.notice-title) { font-size: .8125rem; color: var(--ink-soft); line-height: 1.55; }

/* --- 19. Page header (inner pages) -------------------------------------- */
.page-head {
    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px);
    background:
        radial-gradient(ellipse 70% 80% at 90% 0%, rgba(23, 160, 144, .3), transparent 60%),
        var(--night);
}
.page-head-grid { display: grid; gap: 40px; position: relative; z-index: 1; align-items: end; }
@media (min-width: 1000px) { .page-head-grid { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.page-head .display { font-size: clamp(2.4rem, 5.4vw, 4.25rem); margin-bottom: 20px; }

.route-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.route-chips .sep { color: var(--ink-faint); }
.route-chips .sep .i { width: 14px; height: 14px; }

/* --- 20. Services -------------------------------------------------------- */
.subnav {
    position: sticky;
    top: var(--nav-h);
    z-index: 30;
    background: rgba(244, 247, 246, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.subnav ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.subnav a:hover { border-color: var(--teal); color: var(--teal); }
.subnav a span { font-family: var(--f-mono); font-size: .6875rem; color: var(--ink-faint); }

.cat-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.cat-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cat-head .rule { flex: 1; height: 1px; background: var(--line); }
.cat-note {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .8125rem;
    color: var(--ink-soft);
    margin: -8px 0 24px;
    max-width: 70ch;
}
.cat-note .i { color: var(--amber); width: 16px; height: 16px; margin-top: 2px; }

.product-card { padding: 0; overflow: hidden; }
.product-card .media {
    aspect-ratio: 16 / 11;
    background: linear-gradient(160deg, var(--teal-wash), #F7FBFA);
    display: grid;
    place-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.product-card .media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s var(--ease); }
.product-card:hover .media img { transform: scale(1.04); }
.product-card .media .lab-flag { position: absolute; left: 14px; top: 14px; background: rgba(255, 255, 255, .9); }
.product-card .media .ph { color: var(--teal); opacity: .35; }
.product-card .media .ph .i { width: 56px; height: 56px; stroke-width: 1.25; }
.product-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-size: 1.0625rem; margin: 0 0 8px; }

/* responsive table → cards on mobile */
.data-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.data-table th, .data-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th {
    font-family: var(--f-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--paper);
    white-space: nowrap;
}
.data-table tbody th { font-weight: 600; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table td { color: var(--ink-soft); }
@media (max-width: 760px) {
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; }
    .data-table tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
    .data-table tbody tr:last-child { border-bottom: 0; }
    .data-table th, .data-table td { padding: 4px 0; border: 0; }
    .data-table tbody th { font-size: 1.0625rem; margin-bottom: 6px; }
    .data-table td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--f-mono);
        font-size: .625rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin-top: 8px;
    }
}

/* "what the price covers" route segments */
.segments { display: grid; gap: 16px; counter-reset: seg; }
@media (min-width: 900px) { .segments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.segment { padding: 28px; border: 1px solid var(--line); background: var(--surface); position: relative; border-radius: var(--r); }
@media (min-width: 900px) {
    .segment { border-radius: 0; }
    .segment:first-child { border-radius: var(--r) 0 0 var(--r); }
    .segment:last-child { border-radius: 0 var(--r) var(--r) 0; }
    .segment + .segment { border-left: 0; }
    .segment + .segment::before {
        content: '';
        position: absolute;
        left: -14px;
        top: 38px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--paper);
        border: 1px solid var(--line);
        z-index: 1;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6E66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
        background-size: 14px;
        background-repeat: no-repeat;
        background-position: center;
    }
}
.segment.is-abroad { background: var(--night); color: #EAF6F3; border-color: var(--night); --ink-soft: rgba(234, 246, 243, .72); }
.segment.is-abroad .icon-tile { background: rgba(255, 181, 71, .14); color: var(--signal); }
.segment h3 { font-size: 1.125rem; margin: 18px 0 14px; }
.segment ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9rem; color: var(--ink-soft); }
.segment li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.45; }
.segment li .i { width: 16px; height: 16px; color: var(--teal-400); margin-top: 2px; }
.segment.is-abroad li .i { color: var(--signal); }

/* --- 21. Partners -------------------------------------------------------- */
/* departure-board summary */
.board {
    border-radius: var(--r);
    background: #021311;
    border: 1px solid rgba(255, 255, 255, .1);
    font-family: var(--f-mono);
    overflow: hidden;
}
.board-head, .board-row {
    display: grid;
    grid-template-columns: 1.6fr .7fr .9fr;
    gap: 12px;
    padding: 12px 18px;
    align-items: center;
}
.board-head {
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(234, 246, 243, .45);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.board-row { font-size: .875rem; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.board-row + .board-row { border-top: 1px dashed rgba(255, 255, 255, .08); }
.board-row .ok { color: var(--mint); font-size: .75rem; display: inline-flex; align-items: center; gap: .4rem; }
.board-row .ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.board-row .n { color: var(--signal); }
.board-foot { padding: 12px 18px; font-size: .6875rem; color: rgba(234, 246, 243, .5); border-top: 1px solid rgba(255, 255, 255, .08); letter-spacing: .04em; }

.lab-card {
    display: grid;
    gap: 28px;
    padding: clamp(22px, 3.5vw, 40px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    scroll-margin-top: calc(var(--nav-h) + 24px);
}
@media (min-width: 1000px) { .lab-card { grid-template-columns: 320px 1fr; gap: 48px; } }
.lab-card h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); margin: 20px 0 12px; }
.lab-logo-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 20px;
    border-radius: var(--r);
    background: linear-gradient(160deg, var(--teal-wash), #F7FBFA);
}
.lab-logo-plate img { max-height: 64px; width: auto; object-fit: contain; }
.lab-logo-fallback { font-family: var(--f-accent); font-style: italic; font-size: 2.5rem; color: var(--teal); }
.lab-meta { display: grid; gap: 10px; font-size: .875rem; color: var(--ink-soft); }
.lab-meta span { display: inline-flex; gap: .5rem; align-items: center; }
.lab-meta .i { color: var(--teal); width: 16px; height: 16px; }
.sub-label {
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 12px;
    font-weight: 500;
}
.lab-docs { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cert-thumb {
    margin: 0;
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    padding: 8px;
    cursor: zoom-in;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.cert-thumb:hover, .cert-thumb:focus-visible { border-color: var(--teal); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.cert-thumb img { width: 100%; height: 130px; object-fit: cover; object-position: top; border-radius: 6px; }
.cert-thumb figcaption { font-size: .6875rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
.cert-thumb figcaption b { display: block; color: var(--teal); font-weight: 600; }

.cert-viewer {
    border: 0;
    border-radius: var(--r);
    padding: 16px;
    max-width: min(920px, 94vw);
    max-height: 92vh;
    background: var(--surface);
    box-shadow: var(--shadow-2);
}
.cert-viewer::backdrop { background: rgba(4, 28, 26, .8); backdrop-filter: blur(4px); }
.cert-viewer img { max-width: 100%; max-height: 78vh; width: auto; margin: 0 auto; border-radius: 6px; }
.cert-caption { text-align: center; font-size: .8125rem; color: var(--ink-soft); margin-top: 12px; }
.cert-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.cert-close:hover { border-color: var(--teal); color: var(--teal); }

/* --- 22. Product detail -------------------------------------------------- */
.crumbs { font-size: .8125rem; color: var(--ink-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; align-items: center; }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--ink-faint); }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

.pd-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .pd-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.pd-media {
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--teal-wash), #FBFDFC);
    border: 1px solid var(--line);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: clamp(24px, 5vw, 56px);
    position: relative;
    overflow: hidden;
}
.pd-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pd-media .ph { color: var(--teal); opacity: .3; }
.pd-media .ph .i { width: 120px; height: 120px; stroke-width: 1; }

.order-card { position: sticky; top: calc(var(--nav-h) + 20px); }
.order-card h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); margin: 14px 0 16px; }
.order-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.order-price .price { font-size: 2rem; }

.stock { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 500; }
.stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-400); box-shadow: 0 0 0 4px rgba(23, 160, 144, .15); }
.stock.is-off::before { background: #B4523A; box-shadow: 0 0 0 4px rgba(180, 82, 58, .15); }

.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}
.qty button {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--teal);
}
.qty button:hover { background: var(--teal-wash); }
.qty input, .qty-field input, .qty-field select {
    width: 52px;
    height: 44px;
    border: 0;
    text-align: center;
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    -moz-appearance: textfield;
}
.qty select { -webkit-appearance: none; appearance: none; text-align-last: center; cursor: pointer; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.summary { border-radius: var(--r-sm); background: var(--paper); padding: 16px 18px; font-size: .9rem; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: var(--ink-soft); }
.summary-total { border-top: 1px dashed var(--line-strong); margin-top: 8px; padding-top: 12px; color: var(--ink); font-weight: 600; font-size: 1.0625rem; }

.help-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
}
.help-line .icon-tile { width: 44px; height: 44px; border-radius: 12px; }
.help-line a { font-weight: 600; }

.mini-route { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mini-route li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.mini-route li:last-child { padding-bottom: 0; }
.mini-route li:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 40px; bottom: 0; border-left: 2px dotted var(--line-strong); }
.mini-route .dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-wash); color: var(--teal); }
.mini-route .dot .i { width: 18px; height: 18px; }
.mini-route li.is-abroad .dot { background: var(--amber-soft); color: var(--amber); }
.mini-route b { display: block; font-weight: 600; font-size: .9375rem; padding-top: 2px; }
.mini-route span { font-size: .8125rem; color: var(--ink-soft); }

.prose-dts { color: var(--ink-soft); line-height: 1.75; font-size: 1rem; max-width: 72ch; }
.prose-dts p { margin-bottom: 1rem; }
.prose-dts ul, .prose-dts ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.prose-dts ul { list-style: disc; }
.prose-dts ol { list-style: decimal; }
.prose-dts li { margin-bottom: .4rem; }
.prose-dts li::marker { color: var(--teal); }
.prose-dts strong { color: var(--ink); font-weight: 600; }
.prose-dts a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.prose-dts h2, .prose-dts h3 { color: var(--ink); margin: 2rem 0 .75rem; font-size: 1.375rem; }
.prose-dts img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.prose-dts table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .9rem; }
.prose-dts td, .prose-dts th { border: 1px solid var(--line); padding: 8px 10px; }

.addon-row {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.addon-row:hover { border-color: var(--teal); }
.addon-row:has(input:checked) { border-color: var(--teal); background: var(--teal-wash); }
.addon-row input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--teal); flex-shrink: 0; }

/* --- 23. Legal page ------------------------------------------------------ */
.legal-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .legal-grid { grid-template-columns: 260px 1fr; gap: 72px; } }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc a {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-xs);
    font-size: .875rem;
    color: var(--ink-soft);
    counter-increment: toc;
}
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-mono); font-size: .75rem; color: var(--ink-faint); padding-top: 2px; }
.toc a:hover { background: var(--surface); color: var(--ink); }
@media (max-width: 999px) { .toc { position: static; } .toc ol { grid-template-columns: 1fr 1fr; } }

.legal-body { counter-reset: clause; }
.clause { padding: 28px 0; border-top: 1px solid var(--line); counter-increment: clause; }
.clause:first-child { border-top: 0; padding-top: 0; }
.clause h2 { font-size: 1.375rem; display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px; }
.clause h2::before { content: counter(clause, decimal-leading-zero); font-family: var(--f-mono); font-size: .8125rem; font-weight: 500; color: var(--teal); }
.clause p, .clause li { color: var(--ink-soft); line-height: 1.7; }
.clause p + p { margin-top: .75rem; }
.clause ul { margin: .75rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.clause li::marker { color: var(--teal); }

/* --- 24. Footer ---------------------------------------------------------- */
.site-footer {
    background: var(--night);
    color: rgba(234, 246, 243, .72);
    margin-top: 0;
    position: relative;
    overflow: hidden;
}
.footer-notice {
    border-bottom: 1px solid var(--night-line);
}
.footer-notice .wrap { display: flex; gap: 18px; align-items: flex-start; padding-block: 28px; }
.footer-notice .tag {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--signal);
    padding-top: 3px;
}
.footer-notice .tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.footer-notice p { font-size: .8125rem; line-height: 1.65; max-width: 90ch; }
.footer-notice a { color: #fff; }
@media (max-width: 639px) { .footer-notice .wrap { flex-direction: column; gap: 10px; } }

.footer-main { display: grid; gap: 40px; padding-block: 64px 40px; }
@media (min-width: 900px) { .footer-main { grid-template-columns: 1.4fr 1fr 1.1fr 1fr; gap: 48px; } }
.footer-main h2 {
    font-family: var(--f-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(234, 246, 243, .45);
    margin-bottom: 18px;
}
.footer-main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9rem; }
.footer-main a:hover { color: #fff; }
.footer-main .brand { color: #fff; }
.footer-main .brand-mark { background: rgba(255, 255, 255, .08); }
.footer-main .brand-name small { color: rgba(234, 246, 243, .5); }
.footer-blurb { margin-top: 18px; font-size: .9rem; max-width: 34ch; line-height: 1.6; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact .i { color: var(--mint); width: 16px; height: 16px; margin-top: 3px; }

.footer-word {
    font-size: clamp(3.5rem, 13vw, 11rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: .9;
    color: transparent;
    -webkit-text-stroke: 1px rgba(110, 231, 200, .18);
    white-space: nowrap;
    user-select: none;
    margin: 8px 0 24px;
    text-align: center;
    overflow: hidden;
}
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    padding-block: 22px;
    border-top: 1px solid var(--night-line);
    font-size: .8125rem;
    color: rgba(234, 246, 243, .5);
}
.footer-bottom ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer-bottom a:hover { color: #fff; }

/* --- 25. Reveal on scroll (CSS scroll-driven; JS fallback adds .in) ----- */
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
    .reveal.in { opacity: 1; transform: none; }

    @supports (animation-timeline: view()) {
        .reveal { opacity: 1; transform: none; transition: none; animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
        .journey-meter span { animation: meter linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes meter { from { transform: scaleX(0); } }

/* --- 26. A11y + utilities ----------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--teal-400);
    outline-offset: 3px;
    border-radius: 6px;
}
.skip-link {
    position: absolute;
    left: 12px;
    top: -100px;
    z-index: 100;
    background: var(--night);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 999px;
}
.skip-link:focus { top: 12px; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.mt-xl { margin-top: clamp(56px, 7vw, 96px); }
.mb-s { margin-bottom: 12px; }
.mb-m { margin-bottom: 24px; }
.center { text-align: center; }

/* legacy colour helpers still used by un-ported templates */
.text-ink      { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }
.text-teal     { color: var(--teal); }
.text-amber    { color: var(--amber); }
.border-line   { border-color: var(--line); }
.border-teal   { border-color: var(--teal); }
.bg-ink        { background-color: var(--night); }

/* --- 27. Motion + print -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .marquee { mask-image: none; -webkit-mask-image: none; }
    .marquee-track { animation: none; width: auto; }
    .marquee-track > [aria-hidden] { display: none !important; }
    .marquee-track > div { flex-wrap: wrap; gap: 10px 32px !important; padding-block: 14px; }
    .route-svg .draw { stroke-dashoffset: 0; }
    .route-svg .parcel { display: none; }
    .track li::after { width: calc(100% + 6px); }
}

@media print {
    .site-nav, .topbar, .no-print, .footer-word { display: none !important; }
    body { background: #fff; }
    .dark, .hero, .page-head { background: #fff !important; color: #000 !important; }
}

/* decorative helix used on feature cards / CTA */
.helix-deco { color: var(--mint); }

/* ==========================================================================
   v2 — accreditation showcase, FAQ hub, mobile UX
   ========================================================================== */
[hidden] { display: none !important; }

/* --- Hero trust link ------------------------------------------------------ */
.hero-trust {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 22px;
    padding: .55rem .9rem .55rem .65rem;
    border-radius: 999px;
    background: rgba(255, 181, 71, .08);
    border: 1px solid rgba(255, 181, 71, .28);
    font-size: .875rem;
    color: rgba(234, 246, 243, .85);
    transition: background-color .2s, border-color .2s;
}
.hero-trust b { color: #fff; font-weight: 600; }
.hero-trust > .i:first-child { color: var(--signal); width: 20px; height: 20px; }
.hero-trust .i-sm { color: var(--signal); transition: transform .2s var(--ease); }
.hero-trust:hover { background: rgba(255, 181, 71, .14); border-color: rgba(255, 181, 71, .5); }
.hero-trust:hover .i-sm { transform: translateX(3px); }

/* --- Accreditation section ----------------------------------------------- */
.accred-section { overflow: hidden; }
.accred-grid { display: grid; gap: 48px; position: relative; z-index: 1; }
@media (min-width: 1000px) { .accred-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } }
.accred-intro .lede { margin-top: 18px; }
.accred-intro { position: relative; }
@media (min-width: 1000px) { .accred-intro { position: sticky; top: calc(var(--nav-h) + 40px); } }

.seal { width: 100%; height: auto; color: var(--teal); overflow: visible; }
.dark .seal { color: var(--mint); }
.seal-outer { fill: none; stroke: currentColor; stroke-opacity: .25; stroke-width: 1; stroke-dasharray: 2 4; }
.seal-inner { fill: color-mix(in srgb, currentColor 8%, transparent); stroke: currentColor; stroke-opacity: .4; }
.seal-text { font-family: var(--f-mono); font-size: 11px; font-weight: 500; fill: currentColor; letter-spacing: .5px; }
.seal-core path { fill: none; stroke: var(--amber); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dark .seal-core path { stroke: var(--signal); }
.seal-spin { transform-origin: 80px 80px; animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seal-wrap { width: 132px; margin: 28px 0 8px; }
@media (min-width: 1000px) {
    .accred-intro .seal-wrap { position: absolute; right: -12px; top: -20px; width: 148px; margin: 0; }
    .accred-intro .h2 { padding-right: 120px; }
}
@media (max-width: 999px) { .accred-intro .seal-wrap { display: none; } }

.verify-steps, .verify-steps[role="list"] { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: vs; }
.verify-steps li {
    counter-increment: vs;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 4%, transparent);
}
.verify-steps li::before {
    content: counter(vs, decimal-leading-zero);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-family: var(--f-mono);
    font-size: .75rem;
    background: var(--teal-wash);
    color: var(--teal);
}
.dark .verify-steps li::before { background: rgba(255, 181, 71, .12); color: var(--signal); }
.verify-steps b { font-weight: 600; font-size: .9375rem; }
.verify-steps span { font-size: .8125rem; color: var(--ink-soft); line-height: 1.45; }
@media (min-width: 900px) { .verify-steps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.accred-note {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: .8125rem;
    color: var(--ink-soft);
    max-width: 90ch;
    position: relative;
    z-index: 1;
}
.accred-note .i { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--signal); }

/* lab accreditation cards */
.accred-wall { display: grid; gap: 14px; }
@media (min-width: 640px) { .accred-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.accred-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color .2s, transform .25s var(--ease);
}
.dark .accred-card { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); }
.accred-card:hover { border-color: color-mix(in srgb, var(--signal) 45%, transparent); transform: translateY(-2px); }
.accred-card header, .tb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.accred-id .lab-flag, .lab-flag { white-space: nowrap; }
.accred-logo {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    font-family: var(--f-accent);
    font-style: italic;
    font-size: 1.375rem;
    color: var(--teal);
    overflow: hidden;
    padding: 6px;
}
.accred-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.accred-id { flex: 1; min-width: 0; }
.accred-id h3 { font-size: 1rem; margin-bottom: 4px; overflow-wrap: anywhere; }
.dark .accred-id .lab-flag { background: rgba(110, 231, 200, .1); color: var(--mint); }

.verified {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem .3rem .4rem;
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--amber-soft);
    color: var(--amber);
}
.verified .i { width: 16px; height: 16px; }
.dark .verified { background: rgba(255, 181, 71, .14); color: var(--signal); }

.accred-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.accred-badges li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 10px;
    font-size: .8125rem;
    font-weight: 600;
    background: var(--teal-wash);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
}
.accred-badges .i { width: 15px; height: 15px; color: var(--teal); }
.dark .accred-badges li { background: rgba(110, 231, 200, .08); border-color: rgba(110, 231, 200, .2); }
.dark .accred-badges .i { color: var(--mint); }
.accred-badges-lg li { padding: .6rem .9rem; font-size: .9375rem; border-radius: 12px; }
.accred-badges-lg .i { width: 18px; height: 18px; }

.accred-card footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: .875rem;
}
.accred-card footer .mono { color: var(--ink-faint); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.accred-gloss { margin-top: 36px; }
.accred-gloss .gl-card { padding: 16px; }
.accred-gloss .gl-code { font-size: 1.0625rem; }

/* glossary */
.glossary { display: grid; gap: 12px; }
@media (min-width: 640px) { .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bg-surface .glossary, .bg-paper .glossary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gl-card {
    padding: 20px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dark .gl-card { background: rgba(255, 255, 255, .04); }
.gl-code { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.gl-scope { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.dark .gl-scope { color: var(--signal); }
.gl-card p { margin-top: 8px; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }

.verify-band {
    display: grid;
    gap: 24px;
    align-items: center;
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 1px solid var(--line);
}
@media (min-width: 900px) { .verify-band { grid-template-columns: 150px 1fr; gap: 44px; } }
.verify-band .seal-wrap { margin: 0; width: 130px; }

/* partners page lab card upgrades */
.lab-logo-plate { position: relative; }
.plate-badge { position: absolute; left: 10px; bottom: 10px; }
.accred-panel {
    margin-top: 24px;
    padding: 18px;
    border-radius: var(--r);
    background: linear-gradient(160deg, var(--teal-wash), transparent 80%);
    border: 1px solid color-mix(in srgb, var(--teal) 15%, transparent);
}
.cert-img { position: relative; overflow: hidden; border-radius: 6px; }
.cert-zoom {
    position: absolute;
    inset: auto 8px 8px auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(4, 28, 26, .82);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s var(--ease);
}
.cert-zoom .i { width: 13px; height: 13px; }
.cert-thumb:hover .cert-zoom, .cert-thumb:focus-visible .cert-zoom { opacity: 1; transform: none; }
@media (hover: none) { .cert-zoom { opacity: 1; transform: none; } }
.cert-thumb figcaption b.is-auth { color: var(--amber); }

/* product "tested by" + service card badge */
.tested-by { display: grid; gap: 14px; }
.tested-by .sub-label { margin-bottom: 0; }
.badge-acc {
    position: absolute;
    right: 14px;
    top: 14px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem .3rem .4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--amber);
    font-family: var(--f-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-1);
}
.badge-acc .i { width: 14px; height: 14px; }

/* --- FAQ hub ------------------------------------------------------------- */
.faq-aside { align-self: start; }
@media (min-width: 1000px) { .faq-aside { position: sticky; top: calc(var(--nav-h) + 32px); } }
.ask-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 18px;
    border-radius: var(--r);
    background: var(--paper);
    border: 1px solid var(--line);
}
.bg-paper .ask-card { background: var(--surface); }
.ask-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.faq-hub { min-width: 0; }
.faq-tools, .list-tools { display: grid; gap: 12px; margin-bottom: 14px; }
.list-tools { margin-bottom: 24px; }
@media (min-width: 760px) { .list-tools { grid-template-columns: minmax(0, 480px) auto; align-items: center; justify-content: space-between; } }

.faq-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    transition: border-color .2s, box-shadow .2s;
}
.bg-surface .faq-search { background: var(--paper); }
.faq-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14, 110, 102, .12); }
.faq-search .i { color: var(--ink-faint); }
.faq-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem; /* ≥16px stops iOS zoom-on-focus */
    color: var(--ink);
}
.faq-search input::placeholder { color: var(--ink-faint); }

.faq-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding: 2px;
    margin: -2px;
}
.faq-chips::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .faq-chips { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 999px) {
    .faq-chips { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; }
}
.faq-chip {
    flex: none;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .45rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.faq-chip span { font-family: var(--f-mono); font-size: .6875rem; color: var(--ink-faint); }
.faq-chip:hover { border-color: var(--teal); }
.faq-chip[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.faq-chip[aria-pressed="true"] span { color: var(--mint); }

.faq-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 12px; font-size: .8125rem; color: var(--ink-soft); }
.faq-expand { border: 0; background: none; padding: 6px 0; font-weight: 600; color: var(--teal); cursor: pointer; font-size: .8125rem; }
.faq-expand:hover { text-decoration: underline; text-underline-offset: 3px; }

.faq-item summary { display: grid; gap: 4px; }
.faq-hub .faq-item summary { padding-block: 16px; }
.faq-hub .faq-list { gap: 8px; }
.faq-tag { font-family: var(--f-mono); font-size: .625rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.faq-item:target { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14, 110, 102, .1); }
.faq-item mark { background: rgba(255, 181, 71, .35); color: inherit; border-radius: 3px; padding: 0 2px; }

.faq-empty {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    border-radius: var(--r);
    border: 1px dashed var(--line-strong);
    margin-top: 10px;
}
.faq-empty > .i { color: var(--teal); width: 22px; height: 22px; }

/* --- Services: scroll-spy state ----------------------------------------- */
.subnav a.is-active { background: var(--night); border-color: var(--night); color: #fff; }
.subnav a.is-active span { color: var(--mint); }
.subnav .wrap { position: relative; }
.subnav ul { position: relative; }
@media (max-width: 999px) {
    .subnav ul { mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 40px; }
}

/* --- Journey: vertical timeline on small screens ------------------------ */
@media (max-width: 899px) {
    .journey-meter { display: none; }
    .journey { padding-left: 24px; border-left: 2px dashed var(--line-strong); margin-left: 8px; gap: 12px; }
    .journey-step::before {
        content: '';
        position: absolute;
        left: -34px;
        top: 24px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--teal);
        box-shadow: 0 0 0 5px var(--paper);
    }
    .journey-step.is-abroad::before { background: var(--signal); }
    .journey-step .cp { margin-bottom: 4px; }
    .journey-step h3 { margin-top: 6px; }
}

/* --- Mobile quick-action bar -------------------------------------------- */
.mbar { display: none; }
@media (max-width: 999px) {
    body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .mbar {
        position: fixed;
        z-index: 60;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px;
        border-radius: 22px;
        background: rgba(4, 28, 26, .92);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 18px 40px -12px rgba(4, 28, 26, .55);
        transition: transform .35s var(--ease), opacity .35s;
    }
    .mbar.is-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; }
    .mbar-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 52px;
        border-radius: 16px;
        color: rgba(234, 246, 243, .8);
        font-size: .6875rem;
        font-weight: 500;
    }
    .mbar-btn .i { width: 20px; height: 20px; color: var(--mint); }
    .mbar-btn:active { background: rgba(255, 255, 255, .08); }
    .mbar-cta { flex: 1.4; min-height: 52px; border-radius: 16px; }
    .mbar-buy { padding-left: 16px; }
    .mbar-price { flex: 1; min-width: 0; display: flex; flex-direction: column; color: #fff; line-height: 1.2; }
    .mbar-price small { font-size: .6875rem; color: rgba(234, 246, 243, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mbar-price b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
    .mbar-buy .mbar-cta { flex: none; padding-inline: 1.1rem; }
    /* the floating bar replaces the order card's sticky position on phones */
    .order-card { position: static; }
}

/* --- Mobile polish -------------------------------------------------------- */
@media (max-width: 639px) {
    .hero-actions .btn { flex: 1 1 100%; }
    .hero-trust { font-size: .8125rem; }
    .head { margin-bottom: 28px; }
    .lab-card h2 { margin-top: 16px; }
    .accred-card { padding: 16px; }
    .faq-item summary { padding: 18px 56px 18px 18px; }
    .faq-item .faq-body { padding: 0 18px 18px; }
    .cta-actions .btn { flex: 1; }
    .verify-band .seal-wrap { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .seal-spin { animation: none; } }
@media (max-width: 999px) { .faq-aside .ask-card { display: none; } } /* the floating quick bar already offers Call */
/* product on phones: image → title/price/order → route + lab */
@media (max-width: 999px) {
    .pd-left { display: contents; }
    .pd-media { order: 1; aspect-ratio: 4 / 3; }
    .order-card { order: 2; }
    .pd-left > .card { order: 3; }
}
/* badge glossary becomes a swipeable rail on phones */
@media (max-width: 639px) {
    .glossary {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        margin-inline: calc(-1 * var(--gutter));
        padding: 2px var(--gutter) 8px;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .glossary::-webkit-scrollbar { display: none; }
    .gl-card { flex: 0 0 80%; scroll-snap-align: start; }
}

/* ==========================================================================
   v3 — wellness focus, tracking transparency, integrity & consent
   ========================================================================== */

/* --- Tracking panel ------------------------------------------------------ */
.track-panel {
    display: grid;
    gap: 32px;
    margin-top: clamp(40px, 6vw, 72px);
    padding: clamp(24px, 4vw, 48px);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    align-items: center;
}
@media (min-width: 1000px) { .track-panel { grid-template-columns: 1fr 1fr; gap: 56px; } }
.track-form { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 640px) { .track-form { grid-template-columns: 1fr auto; } }
.track-form .faq-search { background: var(--paper); }
.track-form .btn { min-height: 52px; }
.track-points, .track-points[role="list"] { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; font-size: .875rem; color: var(--ink-soft); }
.track-points li { display: flex; gap: .55rem; align-items: flex-start; }
.track-points .i { width: 16px; height: 16px; color: var(--teal-400); margin-top: 3px; }

.awb-card {
    border-radius: var(--r);
    background: var(--night);
    color: #EAF6F3;
    padding: 22px;
    font-size: .875rem;
    box-shadow: var(--shadow-2);
}
.awb-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, .14);
}
.awb-label { display: block; font-size: .625rem; letter-spacing: .12em; color: rgba(234, 246, 243, .5); }
.awb-no { display: block; margin-top: 4px; font-size: 1.25rem; letter-spacing: .08em; color: #fff; }
.awb-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(110, 231, 200, .12);
    color: var(--mint);
    font-size: .75rem;
    font-weight: 600;
}
.awb-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: ping 1.8s var(--ease) infinite; }
.awb-timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.awb-timeline li { position: relative; padding: 0 0 16px 28px; }
.awb-timeline li:last-child { padding-bottom: 0; }
.awb-timeline li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(110, 231, 200, .5);
    background: var(--night);
}
.awb-timeline li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: rgba(110, 231, 200, .25);
}
.awb-timeline li.is-now::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(255, 181, 71, .2); }
.awb-timeline b { display: block; font-weight: 600; color: #fff; }
.awb-timeline span { font-size: .8125rem; color: rgba(234, 246, 243, .6); }
.awb-foot { display: flex; gap: .45rem; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .14); font-size: .75rem; color: rgba(234, 246, 243, .5); }
.awb-foot .i { width: 14px; height: 14px; }

/* --- Integrity pillars + promise ----------------------------------------- */
.pillars .tile h3 { font-size: 1.125rem; }
.tile-alert { border-color: rgba(255, 181, 71, .35); background: rgba(255, 181, 71, .06) !important; }
.tile-alert .icon-tile { background: rgba(255, 181, 71, .14); color: var(--signal); }
.promise {
    display: grid;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: var(--r);
    border: 1px solid rgba(110, 231, 200, .25);
    background: linear-gradient(90deg, rgba(110, 231, 200, .1), rgba(110, 231, 200, .02));
}
@media (min-width: 900px) { .promise { grid-template-columns: auto 1fr auto; gap: 22px; } }
.promise-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--mint); color: var(--night); }
.promise-mark .i { width: 26px; height: 26px; }
.promise p { font-size: 1.0625rem; line-height: 1.5; color: rgba(234, 246, 243, .85); }
.promise b { color: #fff; }

/* product page promise row */
.promise-row, .promise-row[role="list"] {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.promise-row li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}
.promise-row .i { width: 20px; height: 20px; color: var(--teal); }

/* --- Goal picker (services) ---------------------------------------------- */
.goals { display: grid; gap: 14px; }
@media (min-width: 640px) { .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .goals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.goal-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border-radius: var(--r);
    background: var(--paper);
    border: 1px solid var(--line);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
.goal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; background: var(--surface); }
.goal-card h3 { font-size: 1.125rem; margin-top: 14px; }
.goal-card p { font-size: .875rem; color: var(--ink-soft); flex: 1; }
.goal-card .link-arrow { margin-top: 12px; font-size: .875rem; }
.goal-help { background: var(--night); color: #EAF6F3; border-color: transparent; --ink-soft: rgba(234, 246, 243, .7); }
.goal-help:hover { background: var(--night-2); }
.goal-help .icon-tile { background: rgba(255, 181, 71, .14); color: var(--signal); }
.goal-help .link-arrow { color: var(--signal); }
@media (max-width: 639px) {
    .goals { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
    .goals::-webkit-scrollbar { display: none; }
    .goal-card { flex: 0 0 78%; scroll-snap-align: start; }
}
.awb-head { flex-wrap: wrap; }
.awb-no { white-space: nowrap; }
@media (max-width: 639px) {
    .awb-card { padding: 18px; }
    .awb-no { font-size: 1.0625rem; }
    /* integrity pillars: swipe rail on phones */
    .pillars { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
    .pillars::-webkit-scrollbar { display: none; }
    .pillars .tile { flex: 0 0 80%; scroll-snap-align: start; }
}

/* --- v4: product description layout ------------------------------------- */
.about-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .about-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; } }
.glance {
    padding: 24px;
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 1px solid var(--line);
}
@media (min-width: 1000px) { .glance { position: sticky; top: calc(var(--nav-h) + 28px); } }
.glance dl { margin: 0; display: grid; gap: 0; }
.glance dl > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.glance dt { display: flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.glance dt .i { width: 15px; height: 15px; color: var(--teal); }
.glance dd { margin: 0; font-weight: 600; font-size: .9375rem; }
.glance-price { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }

/* CKEditor description content for tests */
.prose-test > p:first-child { font-size: 1.1875rem; line-height: 1.6; color: var(--ink); }
.prose-test > p:first-child strong { font-weight: 500; }
.prose-test h3 { font-size: 1.25rem; margin-top: 2.25rem; }
.prose-test ul { list-style: none; margin-left: 0; display: grid; gap: 8px; }
.prose-test ul li {
    position: relative;
    padding: 12px 14px 12px 44px;
    margin: 0;
    border-radius: var(--r-sm);
    background: var(--paper);
    line-height: 1.5;
}
.prose-test ul li::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--teal-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6E66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
@media (min-width: 640px) { .prose-test h3 + ul { grid-template-columns: 1fr 1fr; } }
.prose-test ol { list-style: none; margin-left: 0; counter-reset: st; display: grid; gap: 10px; }
.prose-test ol li { counter-increment: st; position: relative; padding-left: 44px; margin: 0; line-height: 1.55; }
.prose-test ol li::before {
    content: counter(st);
    position: absolute;
    left: 0;
    top: -2px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--night);
    color: var(--mint);
    font-family: var(--f-mono);
    font-size: .8125rem;
}
.prose-test h3:last-of-type + p {
    padding: 16px 18px;
    border-radius: var(--r-sm);
    background: var(--amber-soft);
    border: 1px solid color-mix(in srgb, var(--amber) 20%, transparent);
    font-size: .9375rem;
}
@media (max-width: 999px) { .glance { display: none; } } /* order card above already covers it on phones */

/* ==========================================================================
   v6 — full-site pages (about, contact, cart, checkout, reports, legal)
   ========================================================================== */
.brand-mark { background: #fff; border: 1px solid var(--line); }
.brand-mark img { width: 30px; height: 30px; object-fit: contain; }
.footer-main .brand-mark { background: #fff; }

.badge-sample {
    display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
    margin-bottom: 8px; padding: .25rem .55rem; border-radius: 999px;
    background: var(--amber-soft); color: var(--amber);
    font-family: var(--f-mono); font-size: .625rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
.badge-sample .i { width: 13px; height: 13px; }

.flash-wrap { padding-top: 16px; display: grid; gap: 8px; }
.flash { display: flex; gap: .6rem; align-items: center; padding: 12px 16px; border-radius: var(--r-sm); background: var(--teal-wash); border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); font-size: .9rem; }
.flash .i { color: var(--teal); }
.flash-error, .flash-warning { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.flash-error .i, .flash-warning .i { color: var(--amber); }

/* --- Forms ---------------------------------------------------------------- */
.form-card { padding: clamp(22px, 3.5vw, 36px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--ink-faint); }
.field input:not([type="checkbox"]), .field textarea, .field select {
    width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-sm);
    border: 1px solid var(--line-strong); background: var(--paper);
    font: inherit; font-size: 1rem; color: var(--ink);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--teal); background: var(--surface); box-shadow: 0 0 0 4px rgba(14, 110, 102, .12); }
.field.has-error input, .field.has-error textarea { border-color: #B4523A; }
.field-error { margin-top: 6px; font-size: .8125rem; color: #9B2C2C; }
.field-help { margin-top: 6px; font-size: .8125rem; color: var(--ink-soft); }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm); background: var(--teal-wash); border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent); font-size: .9rem; line-height: 1.5; cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--teal); flex: none; }
.check-row.has-error { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.form-errors { padding: 12px 16px; border-radius: var(--r-sm); background: var(--amber-soft); color: #7A3E00; font-size: .875rem; }

/* --- Two-column page layout ---------------------------------------------- */
.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1.15fr; gap: 56px; } .split-sticky { position: sticky; top: calc(var(--nav-h) + 24px); } }

.info-list { display: grid; gap: 12px; }
.info-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.info-item b { display: block; font-weight: 600; }
.info-item span, .info-item a { font-size: .9375rem; color: var(--ink-soft); }
.info-item a:hover { color: var(--teal); }

/* --- Cart ------------------------------------------------------------------ */
.cart-lines { display: grid; gap: 12px; }
.cart-line { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 760px) { .cart-line { grid-template-columns: 88px 1fr auto auto auto; gap: 20px; } }
.cart-thumb { width: 72px; height: 72px; border-radius: var(--r-sm); background: linear-gradient(160deg, var(--teal-wash), #F7FBFA); display: grid; place-items: center; overflow: hidden; color: var(--teal); }
@media (min-width: 760px) { .cart-thumb { width: 88px; height: 88px; } }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cart-thumb .i { width: 32px; height: 32px; }
.cart-name { font-weight: 600; }
.cart-name small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .8125rem; margin-top: 2px; }
.cart-line .qty { grid-column: 2; justify-self: start; }
.cart-line .line-total { grid-column: 2; font-weight: 600; }
.cart-line .remove { grid-column: 2; justify-self: start; }
@media (min-width: 760px) { .cart-line .qty, .cart-line .line-total, .cart-line .remove { grid-column: auto; } .cart-line .line-total { min-width: 120px; text-align: right; } }
.remove button { border: 0; background: none; color: var(--ink-soft); font-size: .8125rem; cursor: pointer; padding: 6px 0; display: inline-flex; gap: .3rem; align-items: center; }
.remove button:hover { color: #9B2C2C; }
.summary-card { padding: 24px; border-radius: var(--r-lg); background: var(--night); color: #EAF6F3; }
.summary-card .summary-row { color: rgba(234, 246, 243, .7); }
.summary-card .summary-total { border-color: rgba(255, 255, 255, .15); color: #fff; }
.empty-state { text-align: center; padding: clamp(40px, 8vw, 80px) 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px dashed var(--line-strong); }
.empty-state .icon-tile { margin: 0 auto 18px; width: 64px; height: 64px; border-radius: 20px; }

/* --- Confirmation ---------------------------------------------------------- */
.confirm-card { max-width: 720px; margin: 0 auto; text-align: center; padding: clamp(28px, 5vw, 56px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.confirm-card .icon-tile { margin: 0 auto 18px; width: 72px; height: 72px; border-radius: 22px; background: var(--teal); color: #fff; }
.confirm-card .icon-tile .i { width: 34px; height: 34px; }
.ref-pill { display: inline-block; margin: 14px 0 6px; padding: .45rem .9rem; border-radius: 999px; background: var(--night); color: var(--mint); font-family: var(--f-mono); letter-spacing: .08em; }
.next-steps { text-align: left; margin-top: 28px; }

/* --- Report lookup --------------------------------------------------------- */
.report-result { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.cart-line .qty { padding-left: 14px; }
.cart-line .qty::before { content: 'Qty'; font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cart-line .qty select {
    width: 64px; padding-right: 22px; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6E66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat;
}