/* ==========================================================================
   GuardMyPrivacy — application stylesheet
   Single source of truth. Token-first, mobile-first, no !important.

   Contents
     01  Tokens
     02  Reset & base
     03  Layout primitives
     04  Typography helpers
     05  Buttons
     06  Icons, chips, badges
     07  Navbar
     08  Hero
     09  Cards & grids
     10  Stat tiles & metrics
     11  Explainer (how-it-works player)
     12  Pricing
     13  People
     14  Forms & studio
     15  Results & markdown reports
     16  Modals
     17  Loading overlay
     18  Alerts
     19  Footer
     20  Motion preferences
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   The existing palette was already Tailwind's teal + slate ramps, so adopting
   the full ramps puts every ad-hoc colour on-token without changing the look.
   ========================================================================== */

:root {
    /* Brand ramp — teal-700 (#0f766e) is the established brand colour */
    --teal-50: #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;
    --teal-900: #134e4a;
    --teal-950: #042f2e;

    /* Compose any brand alpha from one triplet */
    --brand-rgb: 15 118 110;
    --brand-a04: rgb(var(--brand-rgb) / .04);
    --brand-a06: rgb(var(--brand-rgb) / .06);
    --brand-a10: rgb(var(--brand-rgb) / .10);
    --brand-a16: rgb(var(--brand-rgb) / .16);
    --brand-a24: rgb(var(--brand-rgb) / .24);
    --brand-a40: rgb(var(--brand-rgb) / .40);

    /* Neutrals */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    /* Accents & status */
    --accent: #ea580c;
    --accent-soft: rgb(234 88 12 / .10);
    --ok: #059669;
    --ok-soft: rgb(5 150 105 / .09);
    --warn: #b45309;
    --warn-soft: rgb(180 83 9 / .10);
    --danger: #dc2626;
    --danger-soft: rgb(220 38 38 / .09);

    /* Semantic aliases — components reference only these */
    --bg: var(--slate-50);
    --surface: #ffffff;
    --surface-2: var(--slate-100);
    --surface-inverse: var(--slate-900);
    --text: var(--slate-900);
    --text-muted: var(--slate-600);
    --text-subtle: var(--slate-400);
    --text-on-brand: #ffffff;
    --text-on-inverse: var(--slate-300);
    --border: rgb(15 23 42 / .09);
    --border-strong: var(--slate-300);
    --brand: var(--teal-700);
    --brand-hover: var(--teal-800);
    --brand-soft: var(--brand-a06);

    /* Type — 1.25 major third, fluid */
    --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.1875rem;
    --fs-xl: clamp(1.3rem, 1.15rem + .7vw, 1.6rem);
    --fs-2xl: clamp(1.6rem, 1.32rem + 1.35vw, 2.2rem);
    --fs-3xl: clamp(2rem, 1.55rem + 2.1vw, 2.9rem);
    --fs-4xl: clamp(2.4rem, 1.72rem + 3.2vw, 3.9rem);

    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-normal: 1.65;
    --ls-tight: -.02em;
    --ls-tighter: -.032em;
    --ls-wide: .08em;

    /* Space — 4px base */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
    --gutter: clamp(1rem, .55rem + 2vw, 2rem);

    /* Radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-full: 999px;

    /* Elevation */
    --sh-xs: 0 1px 2px rgb(15 23 42 / .04);
    --sh-sm: 0 1px 3px rgb(15 23 42 / .05), 0 4px 12px rgb(15 23 42 / .04);
    --sh-md: 0 2px 6px rgb(15 23 42 / .05), 0 10px 28px rgb(15 23 42 / .06);
    --sh-lg: 0 4px 12px rgb(15 23 42 / .06), 0 22px 55px rgb(15 23 42 / .09);
    --sh-focus: 0 0 0 3px var(--brand-a24);

    /* Motion */
    --dur-fast: 120ms;
    --dur: 200ms;
    --dur-slow: 380ms;
    --ease: cubic-bezier(.2, .6, .3, 1);

    /* Layout — one source of truth for header height */
    --nav-h: 82px;
    --logo-h: 50px;
    --container: 1180px;
    --container-narrow: 760px;
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    padding-top: var(--nav-h);
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: var(--brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::selection {
    background: var(--brand-a24);
}

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

.skip-link {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface);
    color: var(--brand);
    font-weight: 600;
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ==========================================================================
   03  LAYOUT PRIMITIVES
   Six classes replace ~40 inline display:flex / gap / justify-content triples.
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section--tight {
    padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}

.section--surface {
    background: var(--surface);
    border-block: 1px solid var(--border);
}

.section--inverse {
    background: var(--surface-inverse);
    color: var(--text-on-inverse);
}

.section--inverse h2,
.section--inverse h3,
.section--inverse h4 {
    color: #fff;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
}

.grid-auto {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.grid-2 {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-12);
        align-items: center;
    }
}

.text-center {
    text-align: center;
}

.measure {
    max-width: 62ch;
}

.measure-center {
    max-width: 62ch;
    margin-inline: auto;
}

/* ==========================================================================
   04  TYPOGRAPHY HELPERS
   ========================================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--brand);
}

.section-header {
    max-width: 46rem;
    margin-bottom: var(--sp-10);
}

.section-header--center {
    margin-inline: auto;
    text-align: center;
}

.section-header h2 {
    font-size: var(--fs-3xl);
    margin-top: var(--sp-3);
}

.section-header p {
    margin-top: var(--sp-4);
    font-size: var(--fs-md);
    color: var(--text-muted);
}

.page-header {
    padding-top: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.page-header h1 {
    font-size: var(--fs-3xl);
    letter-spacing: var(--ls-tighter);
}

.page-header p {
    margin-top: var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-md);
    max-width: 58ch;
}

.accent {
    color: var(--brand);
}

.text-muted {
    color: var(--text-muted);
}

.text-subtle {
    color: var(--text-subtle);
}

.fs-sm {
    font-size: var(--fs-sm);
}

.fs-xs {
    font-size: var(--fs-xs);
}

.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Footnote markers used by the metrics blocks */
.fn {
    font-size: .7em;
    vertical-align: super;
    color: var(--text-subtle);
    margin-left: 1px;
}

/* ==========================================================================
   05  BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: .7rem 1.35rem;
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
        color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--brand);
    color: var(--text-on-brand);
    box-shadow: 0 1px 2px rgb(15 23 42 / .08), 0 6px 18px var(--brand-a24);
}

.btn-primary:hover:not(:disabled) {
    background: var(--brand-hover);
    box-shadow: 0 2px 4px rgb(15 23 42 / .1), 0 10px 26px var(--brand-a40);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: var(--sh-xs);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
}

.btn-primary-outline {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: var(--brand-a24);
}

.btn-primary-outline:hover:not(:disabled) {
    background: var(--brand);
    color: var(--text-on-brand);
    border-color: var(--brand);
}

.btn-lg {
    padding: .95rem 1.9rem;
    font-size: var(--fs-md);
    border-radius: var(--r-lg);
}

.btn-sm {
    padding: .4rem .85rem;
    font-size: var(--fs-xs);
    border-radius: var(--r-sm);
}

.full-width {
    width: 100%;
}

/* ==========================================================================
   06  ICONS, CHIPS, BADGES
   ========================================================================== */

.icon {
    display: inline-block;
    flex: none;
    vertical-align: -.15em;
}

.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-lg);
    background: var(--brand-soft);
    color: var(--brand);
    flex: none;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.icon-tile--accent {
    background: var(--accent-soft);
    color: var(--accent);
}

.icon-tile--ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.icon-tile--lg {
    width: 60px;
    height: 60px;
    border-radius: var(--r-xl);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .3rem .7rem;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.chip--brand {
    background: var(--brand-soft);
    border-color: var(--brand-a16);
    color: var(--brand);
    font-weight: 600;
}

.chip--ok {
    background: var(--ok-soft);
    border-color: rgb(5 150 105 / .2);
    color: var(--ok);
}

.badge-pro {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ==========================================================================
   07  NAVBAR
   ========================================================================== */

.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

/* Only frost the header where the drawer is not used. backdrop-filter creates a
   containing block for fixed-position children, which would trap the drawer. */
@media (min-width: 1024px) {
    .navbar {
        background: rgb(248 250 252 / .82);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
    }
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    height: 100%;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.logo-img {
    height: var(--logo-h);
    width: auto;
    max-width: 52vw;
    object-fit: contain;
}

.logo-mark {
    flex: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.nav-links>a {
    padding: .5rem .75rem;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav-links>a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.nav-links>a.active {
    color: var(--brand);
    font-weight: 600;
}

.nav-links>a.btn {
    margin-left: var(--sp-2);
    padding: .5rem 1rem;
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-left: var(--sp-2);
    padding-left: var(--sp-4);
    border-left: 1px solid var(--border);
}

#loggedInState {
    align-items: center;
    gap: var(--sp-3);
}

#userEmailDisplay {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text);
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1023px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        position: fixed;
        inset: var(--nav-h) 0 0 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: var(--sp-1);
        padding: var(--sp-6) var(--gutter) var(--sp-10);
        background: var(--bg);
        border-top: 1px solid var(--border);
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
    }

    .nav-links.active {
        transform: translateX(0);
        visibility: visible;
    }

    .nav-links>a {
        padding: var(--sp-4) var(--sp-3);
        font-size: var(--fs-lg);
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    .nav-links>a.btn {
        margin: var(--sp-4) 0 0;
        padding: var(--sp-4);
        border-radius: var(--r-md);
        justify-content: center;
    }

    .nav-auth {
        margin: var(--sp-4) 0 0;
        padding: var(--sp-4) 0 0;
        border-left: none;
        border-top: 1px solid var(--border);
        flex-direction: column;
        align-items: stretch;
    }

    .nav-auth .btn {
        width: 100%;
    }

    #userEmailDisplay {
        max-width: none;
        text-align: center;
    }
}

/* ==========================================================================
   08  HERO
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--section-y);
}

/* Faint engineering grid + a single brand glow. Replaces three blurred blobs. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 5%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 5%, transparent 70%);
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 767px) {
    .hero::before {
        background-size: 36px 36px;
        opacity: .3;
    }
}

.hero::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 50%;
    width: min(1100px, 120vw);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, var(--brand-a10), transparent 65%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    display: grid;
    gap: var(--sp-10);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 960px) {
    .hero-content {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--sp-16);
    }
}

.hero-title {
    font-size: var(--fs-4xl);
    letter-spacing: var(--ls-tighter);
    margin-top: var(--sp-5);
}

.hero-subtitle {
    margin-top: var(--sp-5);
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 34rem;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.hero-trust b {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hero-visual {
    position: relative;
}

/* Hero verdict card — the same identity check, before and after protection.
   Real text rather than an image, so it stays crisp and readable everywhere. */
.verdict-card {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}

.verdict-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.verdict-card__badge {
    margin-left: auto;
    padding: .1rem .5rem;
    border-radius: var(--r-full);
    background: var(--ok-soft);
    color: var(--ok);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.verdict-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
}

.verdict-row+.verdict-row {
    border-top: 1px solid var(--border);
}

.verdict-thumb {
    width: 48px;
    height: 56px;
    flex: none;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.verdict-thumb svg {
    width: 100%;
    height: 100%;
}

/* A faint speckle stands in for the applied perturbation. */
.verdict-thumb--protected {
    background-color: var(--surface-2);
    background-image:
        radial-gradient(circle at 20% 30%, var(--brand-a40) 1px, transparent 1.5px),
        radial-gradient(circle at 70% 60%, rgb(234 88 12 / .35) 1px, transparent 1.5px),
        radial-gradient(circle at 45% 85%, var(--brand-a40) 1px, transparent 1.5px);
    background-size: 9px 9px, 11px 11px, 13px 13px;
}

.verdict-row__body {
    flex: 1;
    min-width: 0;
}

.verdict-row__label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: var(--sp-2);
}

.verdict-meter {
    display: block;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    overflow: hidden;
}

.verdict-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
}

.verdict-meter i[data-tone="danger"] {
    background: var(--danger);
}

.verdict-meter i[data-tone="ok"] {
    background: var(--ok);
}

.verdict-row__note {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.verdict-tag {
    flex: none;
    padding: .25rem .6rem;
    border-radius: var(--r-full);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.verdict-tag--danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.verdict-tag--ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.verdict-card__foot {
    margin-top: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

@media (max-width: 420px) {
    .verdict-row {
        flex-wrap: wrap;
    }

    .verdict-tag {
        margin-left: 64px;
    }
}

/* Only break the hero headline on wide screens */
.hide-sm {
    display: none;
}

@media (min-width: 720px) {
    .hide-sm {
        display: inline;
    }
}

/* ==========================================================================
   09  CARDS & GRIDS
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}

.card--pad {
    padding: var(--sp-8);
}

/* Retained name: used across marketing pages */
.feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease),
        border-color var(--dur-slow) var(--ease);
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--brand-a16);
}

.feature-card:hover .icon-tile {
    transform: scale(1.06);
}

.feature-card h3 {
    font-size: var(--fs-xl);
}

.feature-card p {
    color: var(--text-muted);
    margin: 0;
}

.feature-card__step {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    color: var(--text-subtle);
}

/* Checklist used on the features page */
.checklist {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}

.checklist .icon-tile {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--brand-a16);
    color: var(--teal-300);
}

.checklist strong {
    display: block;
    font-weight: 600;
    color: #fff;
}

.checklist span {
    font-size: var(--fs-sm);
    color: var(--slate-400);
}

/* Panel used for the inverted "why" block */
.panel-inverse {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 1.4rem + 3vw, 3.75rem);
    border-radius: var(--r-2xl);
    background: var(--surface-inverse);
    color: var(--text-on-inverse);
    box-shadow: var(--sh-lg);
}

.panel-inverse::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    width: 460px;
    height: 460px;
    max-width: 90%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-a40), transparent 70%);
    pointer-events: none;
}

.panel-inverse>* {
    position: relative;
}

.panel-inverse h2,
.panel-inverse h3,
.panel-inverse strong {
    color: #fff;
}

.panel-inverse h4 {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--slate-400);
    margin-bottom: var(--sp-2);
}

.panel-inverse p {
    color: var(--slate-300);
}

.panel-inverse .card {
    background: rgb(255 255 255 / .05);
    border-color: rgb(255 255 255 / .1);
}

/* Callout — the retention statement */
.callout {
    display: flex;
    gap: var(--sp-5);
    padding: var(--sp-8);
    border-radius: var(--r-xl);
    background: var(--ok-soft);
    border: 1px solid rgb(5 150 105 / .2);
}

.callout .icon-tile {
    background: rgb(5 150 105 / .13);
    color: var(--ok);
}

.callout h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-3);
}

.callout p {
    color: var(--text-muted);
}

.callout p+p {
    margin-top: var(--sp-3);
}

@media (max-width: 599px) {
    .callout {
        flex-direction: column;
        padding: var(--sp-6);
    }
}

/* Disclosure used for the methodology block */
.disclosure {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}

.disclosure+.disclosure {
    margin-top: var(--sp-3);
}

.disclosure>summary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.disclosure>summary::-webkit-details-marker {
    display: none;
}

.disclosure>summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--text-subtle);
    border-bottom: 2px solid var(--text-subtle);
    transform: rotate(45deg);
    transition: transform var(--dur) var(--ease);
}

.disclosure[open]>summary::after {
    transform: rotate(-135deg);
}

.disclosure__body {
    padding: 0 var(--sp-5) var(--sp-5);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.disclosure__body p+p,
.disclosure__body ul {
    margin-top: var(--sp-3);
}

.disclosure__body li {
    position: relative;
    padding-left: var(--sp-5);
    margin-bottom: var(--sp-2);
}

.disclosure__body li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-subtle);
}

/* ==========================================================================
   10  STAT TILES & METRICS
   ========================================================================== */

.stat-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.stat-tile {
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
}

.stat-tile__value {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--ls-tighter);
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

.stat-tile__label {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}

.stat-tile__note {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Model comparison */
.compare {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
}

@media (min-width: 820px) {
    .compare {
        grid-template-columns: 1fr 1fr;
    }
}

.model-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.model-card:hover {
    border-color: var(--brand-a24);
    box-shadow: var(--sh-md);
}

.model-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.model-card__head h3 {
    font-size: var(--fs-xl);
}

.model-card__head p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.point-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-top: var(--sp-2);
}

.point-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.point-list .icon {
    color: var(--ok);
    margin-top: 2px;
}

.model-card__when {
    margin-top: var(--sp-5);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.model-card__when strong {
    color: var(--text);
}

.model-card .btn {
    margin-top: var(--sp-5);
}

/* ==========================================================================
   11  EXPLAINER — "how it works" player
   Motion is driven entirely by --t (0..1 within the active scene) and
   [data-scene], both set by explainer.js on the .explainer root.
   ========================================================================== */

.explainer {
    --t: 0;
    max-width: 940px;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.explainer__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.explainer__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--slate-300);
    flex: none;
}

.explainer__dot:first-child {
    background: var(--brand);
}

.explainer__title {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
    margin-left: var(--sp-2);
}

.explainer__time {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.explainer__stage {
    position: relative;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, var(--brand-a04), transparent 70%),
        var(--surface);
    aspect-ratio: 720 / 400;
}

.explainer__scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}

.explainer[data-scene="0"] .explainer__scene[data-index="0"],
.explainer[data-scene="1"] .explainer__scene[data-index="1"],
.explainer[data-scene="2"] .explainer__scene[data-index="2"],
.explainer[data-scene="3"] .explainer__scene[data-index="3"] {
    opacity: 1;
    visibility: visible;
}

/* --- shared SVG vocabulary --- */
.ex-h {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.3px;
    fill: var(--text);
}

.ex-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    fill: var(--text-muted);
}

.ex-cap {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    fill: var(--text-subtle);
}

.ex-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    fill: var(--text-muted);
}

.ex-tag {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
}

.ex-stat {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.3px;
    fill: var(--text);
}

.ex-chip {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    fill: var(--brand);
}

.ex-op {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 28px;
    font-weight: 600;
    fill: var(--slate-300);
}

.ex-card {
    fill: none;
    stroke: var(--border-strong);
    stroke-width: 1.5;
    rx: 16;
}

.ex-thumb {
    fill: var(--surface-2);
    stroke: var(--border-strong);
    stroke-width: 1.25;
    rx: 10;
}

.ex-thumb--ok {
    stroke: rgb(5 150 105 / .45);
}

.ex-neutral {
    fill: var(--slate-400);
}

.ex-ok {
    fill: var(--ok);
}

.ex-danger {
    fill: var(--danger);
}

.ex-thresh {
    stroke: var(--slate-400);
    stroke-width: 1.5;
    stroke-dasharray: 5 5;
}

/* Scene 1 — scan sweep, detector brackets, landmark points */
.ex-scan {
    fill: var(--brand);
    opacity: calc(.75 - max(0, var(--t) - .5) * 2.6);
    transform: translateY(calc(var(--t) * 138px));
}

.ex-brackets {
    opacity: clamp(0, (var(--t) - .12) * 6, 1);
}

.ex-points {
    opacity: clamp(0, (var(--t) - .3) * 5, 1);
}

.ex-fly {
    opacity: clamp(0, (var(--t) - .34) * 5, 1);
    transform: translateX(calc((1 - clamp(0, (var(--t) - .34) * 3.4, 1)) * -140px));
}

/* Scenes 2 and 4 — comparison rows */
.ex-row {
    opacity: clamp(0, (var(--t) * 3.2) - (var(--i, 0) * .55), 1);
}

.ex-meter-fill {
    transform-origin: left center;
    transform: scaleX(clamp(0, (var(--t) - .2) * 2.2, 1));
}

.ex-verdict {
    opacity: clamp(0, (var(--t) - .62) * 5, 1);
}

.ex-sweep {
    stroke: var(--brand);
    stroke-width: 2;
    opacity: calc(.5 - max(0, var(--t) - .6) * 1.4);
    transform: translateY(calc(var(--t) * 196px));
}

/* Scene 3 — composition */
.ex-pert {
    opacity: clamp(0, (var(--t) - .15) * 3, 1);
}

.ex-pert--applied {
    opacity: clamp(0, (var(--t) - .45) * 2.2, .42);
}

.ex-chip-in {
    opacity: clamp(0, (var(--t) - .6) * 4, 1);
    transform: translateY(calc((1 - clamp(0, (var(--t) - .6) * 4, 1)) * 8px));
}

/* Scene 4 — closing stats */
.ex-stats {
    opacity: clamp(0, (var(--t) - .68) * 4, 1);
    transform: translateY(calc((1 - clamp(0, (var(--t) - .68) * 4, 1)) * 10px));
}

/* --- controls --- */
.explainer__controls {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.explainer__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px var(--brand-a24);
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.explainer__play:hover {
    background: var(--brand-hover);
}

.explainer__play:active {
    transform: scale(.94);
}

.explainer__play .icon-pause {
    display: none;
}

.explainer__play[aria-pressed="true"] .icon-play {
    display: none;
}

.explainer__play[aria-pressed="true"] .icon-pause {
    display: block;
}

.explainer__track {
    flex: 1;
    min-width: 0;
}

.explainer__progress {
    height: 4px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    overflow: hidden;
}

.explainer__progress i {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--brand);
    border-radius: inherit;
}

.explainer__chapters {
    display: flex;
    gap: var(--sp-1);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

.explainer__chapter {
    flex: 1 1 0;
    min-width: 84px;
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-subtle);
    text-align: left;
    border: 1px solid transparent;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.explainer__chapter:hover {
    background: var(--surface-2);
    color: var(--text-muted);
}

.explainer__chapter[aria-current="step"] {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand-a16);
    font-weight: 600;
}

.explainer__chapter b {
    display: block;
    font-family: var(--font-mono);
    font-size: .68rem;
    opacity: .7;
    font-weight: 600;
}

.explainer__caption {
    padding: 0 var(--sp-4) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
}

.explainer__caption strong {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 599px) {
    .explainer__chapter {
        min-width: 0;
        text-align: center;
    }

    .explainer__chapter span {
        display: none;
    }
}

/* Static mode: reduced motion, or no JS. All four scenes stack as a diagram. */
.explainer[data-static] .explainer__stage {
    aspect-ratio: auto;
    display: grid;
    gap: 1px;
    background: var(--border);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .explainer[data-static] .explainer__stage {
        grid-template-columns: 1fr 1fr;
    }
}

.explainer[data-static] .explainer__scene {
    position: static;
    opacity: 1;
    visibility: visible;
    background: var(--surface);
    aspect-ratio: 720 / 400;
}

.explainer[data-static] .explainer__controls,
.explainer[data-static] .explainer__time {
    display: none;
}

/* In static mode every scene renders at its end state */
.explainer[data-static] {
    --t: 1;
}

.explainer[data-static] .ex-scan,
.explainer[data-static] .ex-sweep {
    display: none;
}

.explainer[data-static] .ex-fly,
.explainer[data-static] .ex-row,
.explainer[data-static] .ex-verdict,
.explainer[data-static] .ex-stats,
.explainer[data-static] .ex-chip-in,
.explainer[data-static] .ex-brackets,
.explainer[data-static] .ex-points {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   12  PRICING
   ========================================================================== */

.pricing-tiers {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.tier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-6);
    text-align: left;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.tier-card[data-tier] {
    cursor: pointer;
}

.tier-card[data-tier]:hover {
    border-color: var(--brand-a40);
}

.tier-card.selected {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: var(--sh-sm);
}

.tier-card__name {
    font-family: var(--font-heading);
    font-size: var(--fs-base);
    font-weight: 600;
}

.tier-card__price {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.tier-card__note {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.tier-card__ribbon {
    position: absolute;
    top: -10px;
    right: var(--sp-4);
    padding: .15rem .55rem;
    border-radius: var(--r-full);
    background: var(--accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.tier-card--static {
    background: var(--surface-2);
    border-style: dashed;
}

/* ==========================================================================
   13  PEOPLE
   ========================================================================== */

.people {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    max-width: 780px;
    margin-inline: auto;
}

.person {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xs);
}

.person__avatar {
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border);
}

.person__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person__name {
    font-size: var(--fs-lg);
}

.person__role {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand);
}

.person__bio {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* About page image */
.about-figure {
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
    background: var(--surface-2);
}

.about-figure img {
    width: 100%;
    transition: transform var(--dur-slow) var(--ease);
}

.about-figure:hover img {
    transform: scale(1.04);
}

/* ==========================================================================
   14  FORMS & STUDIO
   ========================================================================== */

.form-group {
    margin-bottom: var(--sp-4);
}

.form-group label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: .7rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-control::placeholder {
    color: var(--text-subtle);
}

.form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--sh-focus);
}

.field-hint {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Studio layout */
.studio {
    padding-bottom: var(--section-y);
}

.studio-container {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 900px) {
    .studio-container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.studio-upload-section,
.studio-controls-section {
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}

.studio-controls-section>h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-5);
}

.studio-panel {
    display: none;
}

.studio-panel.active {
    display: block;
}

/* Tabs */
.studio-tabs {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-1);
    margin-bottom: var(--sp-6);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .55rem 1.1rem;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    background: var(--surface);
    color: var(--brand);
    box-shadow: var(--sh-xs);
}

/* Upload dropzone */
.upload-box {
    display: block;
    padding: var(--sp-10) var(--sp-5);
    text-align: center;
    border: 2px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.upload-box:hover,
.upload-box.dragover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.upload-box:focus-within {
    border-color: var(--brand);
    box-shadow: var(--sh-focus);
}

.upload-box .icon-tile {
    margin: 0 auto var(--sp-4);
}

.upload-box h3 {
    font-size: var(--fs-md);
}

.upload-box p {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.upload-preview {
    text-align: center;
}

.upload-preview img {
    max-height: 320px;
    width: auto;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
}

/* Radio cards for model selection */
.control-group {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.radio-card {
    display: block;
    cursor: pointer;
}

.radio-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-card .card-content {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.radio-card:hover .card-content {
    border-color: var(--brand-a40);
}

.radio-card input:checked+.card-content {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.radio-card input:focus-visible+.card-content {
    box-shadow: var(--sh-focus);
}

.radio-card .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
}

.radio-card input:checked+.card-content .card-icon {
    background: var(--brand);
    color: #fff;
}

.radio-card h4 {
    font-size: var(--fs-base);
}

.radio-card .card-text span {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Sliders — both engines */
.slider-field {
    margin-bottom: var(--sp-6);
}

.slider-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.slider-field__head label {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.slider-field__value {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: pointer;
}

input[type="range"]:focus-visible {
    box-shadow: var(--sh-focus);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid var(--surface);
    box-shadow: 0 1px 4px rgb(15 23 42 / .25);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid var(--surface);
    box-shadow: 0 1px 4px rgb(15 23 42 / .25);
    cursor: pointer;
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: var(--r-full);
    background: var(--surface-2);
}

/* Warning shown when epsilon is below the model's measured default */
.slider-warning {
    display: none;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.slider-warning.visible {
    display: flex;
}

/* ==========================================================================
   15  RESULTS & MARKDOWN REPORTS
   ========================================================================== */

.studio-result {
    margin-top: var(--sp-10);
    padding-top: var(--sp-10);
    border-top: 1px solid var(--border);
}

.studio-result>h3 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-6);
}

.result-comparison {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-items: start;
}

.result-box {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}

.result-box h4 {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.result-box img {
    width: 100%;
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.report-panel {
    padding: var(--sp-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    font-size: var(--fs-sm);
}

.markdown-body h3 {
    font-size: var(--fs-lg);
    margin: var(--sp-5) 0 var(--sp-3);
}

.markdown-body h3:first-child,
.markdown-body h4:first-child {
    margin-top: 0;
}

.markdown-body h4 {
    font-size: var(--fs-base);
    margin: var(--sp-4) 0 var(--sp-2);
    color: var(--text);
}

.markdown-body p {
    margin-bottom: var(--sp-3);
    color: var(--text-muted);
}

.markdown-body strong {
    font-weight: 600;
    color: var(--text);
}

.markdown-body ul {
    margin: var(--sp-3) 0;
    padding-left: var(--sp-5);
}

.markdown-body li {
    position: relative;
    margin-bottom: var(--sp-2);
    color: var(--text-muted);
}

.markdown-body li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--sp-4));
    top: .62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}

.markdown-body blockquote {
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--brand);
    background: var(--brand-soft);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--text-muted);
}

.markdown-body hr {
    margin: var(--sp-5) 0;
    border: none;
    border-top: 1px solid var(--border);
}

.markdown-body table {
    width: 100%;
    margin: var(--sp-4) 0;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.markdown-body th,
.markdown-body td {
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.markdown-body th {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-subtle);
}

.markdown-body tbody tr:last-child td {
    border-bottom: none;
}

/* ASCII █ bars from the analyzer reports become real bars */
.markdown-body .bar {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    min-width: 90px;
}

.markdown-body .bar::before {
    content: "";
    flex: none;
    width: calc(var(--n, 0) * 9px);
    max-width: 120px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--brand);
}

.report-scroll {
    overflow-x: auto;
}

/* ==========================================================================
   16  MODALS
   ========================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    background: rgb(15 23 42 / .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow-y: auto;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: auto;
    padding: var(--sp-8);
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}

.modal-close {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-subtle);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.modal-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.auth-tabs {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-1);
    margin-bottom: var(--sp-6);
    background: var(--surface-2);
    border-radius: var(--r-md);
}

.auth-tab {
    flex: 1;
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.auth-tab.active {
    background: var(--surface);
    color: var(--brand);
    box-shadow: var(--sh-xs);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form__head {
    text-align: center;
    margin-bottom: var(--sp-6);
}

.auth-form__head h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-2);
}

.auth-form__head p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.google-auth-btn {
    gap: var(--sp-3);
}

.modal-content .btn+.btn {
    margin-top: var(--sp-3);
}

.paywall-head {
    text-align: center;
    margin-bottom: var(--sp-6);
}

.paywall-head .icon-tile {
    margin: 0 auto var(--sp-4);
}

.paywall-head h2 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--sp-3);
}

.paywall-head p {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.modal-content--wide {
    max-width: 560px;
}

/* ==========================================================================
   17  LOADING OVERLAY
   ========================================================================== */

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--gutter);
    text-align: center;
    background: rgb(248 250 252 / .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.loading-overlay.visible {
    display: flex;
}

.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--brand-a16);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 900ms linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-overlay h3 {
    font-size: var(--fs-xl);
    color: var(--brand);
}

.loading-overlay p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    max-width: 34ch;
}

/* ==========================================================================
   18  ALERTS
   ========================================================================== */

.alert {
    display: none;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.alert.visible {
    display: flex;
}

.alert--error {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid rgb(220 38 38 / .2);
}

.alert--info {
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid var(--brand-a16);
}

/* Legacy hook kept: script.js writes into .error-msg */
.error-msg {
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--danger);
    text-align: center;
    min-height: 1px;
}

/* ==========================================================================
   19  FOOTER
   ========================================================================== */

footer {
    margin-top: auto;
    padding-block: var(--sp-10);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.footer-content {
    display: grid;
    gap: var(--sp-8);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 760px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1.3fr;
        gap: var(--sp-10);
    }
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.footer-brand img {
    height: 30px;
    width: auto;
}

.footer-tag {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    max-width: 30ch;
}

.footer-nav {
    display: grid;
    gap: var(--sp-3);
    justify-items: start;
}

.footer-nav a {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--brand);
}

.footer-legal {
    grid-column: 1 / -1;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    justify-content: space-between;
}

/* ==========================================================================
   20  MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

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

/* Footer tagline — the line we want people to remember */
.footer-slogan {
    margin-top: var(--sp-4);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: var(--ls-tight);
    color: var(--text);
}

.footer-slogan+.footer-tag {
    margin-top: var(--sp-2);
}

/* ==========================================================================
   21  SCROLL REVEAL
   Applied by script.js so the page degrades gracefully without JavaScript:
   nothing is hidden unless the observer is actually running.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .65s var(--ease), transform .65s var(--ease);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   22  FINISHING TOUCHES
   ========================================================================== */

/* A quiet sheen across primary buttons so they read as the main action */
.btn-primary {
    background-image: linear-gradient(180deg, rgb(255 255 255 / .12), transparent 60%);
}

/* Section rhythm: alternating surfaces need a hairline, not a hard seam */
.section--surface+.section--surface {
    border-top: none;
}

/* Cards lift a little more decisively */
.feature-card:hover,
.model-card:hover {
    transform: translateY(-4px);
}

.stat-tile {
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.stat-tile:hover {
    border-color: var(--brand-a16);
    box-shadow: var(--sh-sm);
}

/* The eyebrow reads better with a leading rule */
.eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .5;
}

.section-header--center .eyebrow::before {
    display: none;
}

/* Hero gets a touch more presence */
.hero-title {
    line-height: 1.04;
}

.hero-trust {
    gap: var(--sp-3) var(--sp-6);
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.hero-trust .icon {
    color: var(--ok);
}

/* Explainer sits on the page like a real player, not a flat box */
.explainer {
    box-shadow: 0 4px 12px rgb(15 23 42 / .05), 0 28px 70px rgb(15 23 42 / .10);
}

.explainer__stage {
    border-block: 1px solid var(--border);
}

/* ==========================================================================
   23  DRAG-TO-COMPARE
   ========================================================================== */

.cmp {
    max-width: 640px;
    margin-inline: auto;
}

.cmp__frame {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgb(15 23 42 / .05), 0 28px 70px rgb(15 23 42 / .10);
    isolation: isolate;
}

.cmp__pane {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.cmp__pane--after {
    background:
        radial-gradient(ellipse 80% 70% at 50% 30%, var(--brand-a06), transparent 70%),
        var(--surface-2);
}

.cmp__pane--before {
    background: var(--surface);
    clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.cmp__art {
    position: relative;
    width: 46%;
    max-width: 190px;
}

.cmp__art svg {
    width: 100%;
    height: auto;
    display: block;
}

/* The protective pattern, exaggerated so it is actually visible on screen.
   It covers the whole frame because that is what really happens — the change is
   applied across the entire photo, not just the face. */
.cmp__pane--after::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, var(--brand-a24) .9px, transparent 1.4px),
        radial-gradient(circle at 68% 62%, rgb(234 88 12 / .22) .9px, transparent 1.4px),
        radial-gradient(circle at 45% 85%, rgb(45 212 191 / .3) .8px, transparent 1.3px),
        radial-gradient(circle at 82% 18%, var(--brand-a24) .8px, transparent 1.3px);
    background-size: 7px 7px, 8px 8px, 6px 6px, 9px 9px;
    mix-blend-mode: multiply;
    opacity: .75;
    pointer-events: none;
}

.cmp__scan {
    position: absolute;
    inset: 0;
}

.cmp__tag {
    position: absolute;
    bottom: var(--sp-4);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .35rem .8rem;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* Opposite corners, so the two labels can never overlap at the split. */
.cmp__tag--danger {
    left: var(--sp-4);
    background: var(--danger-soft);
    color: var(--danger);
    box-shadow: 0 1px 3px rgb(15 23 42 / .08);
}

.cmp__tag--ok {
    right: var(--sp-4);
    background: var(--ok-soft);
    color: var(--ok);
    box-shadow: 0 1px 3px rgb(15 23 42 / .08);
}

.cmp__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 2px;
    margin-left: -1px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border-strong);
    pointer-events: none;
}

.cmp__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--brand);
    box-shadow: 0 2px 6px rgb(15 23 42 / .12), 0 8px 24px rgb(15 23 42 / .14);
    transition: transform var(--dur) var(--ease);
}

/* The range input is the real control; it sits invisibly over the whole frame. */
.cmp__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
}

.cmp__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 48px;
    height: 100vh;
    cursor: ew-resize;
}

.cmp__input::-moz-range-thumb {
    width: 48px;
    height: 100vh;
    border: none;
    border-radius: 0;
    cursor: ew-resize;
}

.cmp__input:focus-visible+.cmp__hint,
.cmp__frame:has(.cmp__input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.cmp__frame:has(.cmp__input:active) .cmp__knob,
.cmp__frame:has(.cmp__input:hover) .cmp__knob {
    transform: translate(-50%, -50%) scale(1.08);
}

@media (min-width: 700px) {
    .cmp__frame {
        aspect-ratio: 16 / 10;
    }
}

.cmp__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
}

.cmp__hint .icon {
    color: var(--brand);
}

/* ==========================================================================
   24  SIGNATURE MOTIF
   Corner brackets, borrowed from the frame a face detector draws. Used as the
   product's own framing device so the site does not read as a generic template.
   ========================================================================== */

.framed {
    position: relative;
}

.framed::before,
.framed::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border: 2px solid var(--brand-a24);
    pointer-events: none;
}

.framed::before {
    top: -10px;
    left: -10px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 6px;
}

.framed::after {
    right: -10px;
    bottom: -10px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 6px;
}

@media (max-width: 640px) {

    .framed::before,
    .framed::after {
        display: none;
    }
}

/* Section eyebrow gets a bracket flourish on centred headers */
.section-header--center .eyebrow {
    padding: .3rem .8rem;
    border-radius: var(--r-full);
    background: var(--brand-soft);
    border: 1px solid var(--brand-a16);
}

/* Alternating sections get a soft seam rather than a hard rule */
.section--surface {
    position: relative;
}

.section--surface::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong) 20%,
            var(--border-strong) 80%, transparent);
}

.section--surface {
    border-block: none;
}

/* Numbered step cards carry a quiet index in the corner */
.feature-card {
    position: relative;
    overflow: hidden;
}

.feature-card__step {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--brand);
}

.feature-card__step::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--brand-a24);
}

/* Non-clipping stage so the corner brackets are not cut off by the frame */
.cmp__stage {
    position: relative;
}

/* ==========================================================================
   25  HERO SCANNER
   A single 11s timeline: scan -> identified -> shielded -> protected.
   Every layer keys off the same duration so the phases stay in step.
   ========================================================================== */

.scanner {
    --cycle: 11s;
    max-width: 420px;
    margin-inline: auto;
}

.scanner__frame {
    position: relative;
    padding: var(--sp-4);
    border-radius: var(--r-2xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgb(15 23 42 / .05), 0 30px 70px rgb(15 23 42 / .12);
}

.scanner__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 50% 28%, #fff, transparent 70%),
        linear-gradient(160deg, var(--slate-100), var(--slate-200));
    display: grid;
    place-items: center;
}

/* faint measurement grid, like a capture viewfinder */
.scanner__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgb(15 23 42 / .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(15 23 42 / .05) 1px, transparent 1px);
    background-size: 28px 28px;
}

.scanner__portrait {
    position: relative;
    width: 62%;
    height: auto;
    filter: drop-shadow(0 12px 24px rgb(15 23 42 / .12));
}

.scanner__brackets,
.scanner__points,
.scanner__noise {
    position: absolute;
    width: 62%;
    height: auto;
    aspect-ratio: 120 / 140;
}

/* the protective pattern, exaggerated so it is visible on screen */
.scanner__noise {
    border-radius: var(--r-md);
    background-image:
        radial-gradient(circle at 22% 32%, var(--brand-a24) .9px, transparent 1.4px),
        radial-gradient(circle at 68% 58%, rgb(234 88 12 / .24) .9px, transparent 1.4px),
        radial-gradient(circle at 44% 84%, rgb(45 212 191 / .3) .8px, transparent 1.3px),
        radial-gradient(circle at 84% 20%, var(--brand-a24) .8px, transparent 1.3px);
    background-size: 7px 7px, 8px 8px, 6px 6px, 9px 9px;
    mix-blend-mode: multiply;
    opacity: 0;
}

/* the scanning beam */
.scanner__beam {
    position: absolute;
    left: 0;
    right: 0;
    height: 34%;
    background: linear-gradient(to bottom,
            transparent, var(--brand-a16) 45%, var(--brand-a24) 50%, transparent);
    border-bottom: 2px solid var(--brand);
    opacity: 0;
}

/* the shield wipe that hands the photo over to the protected state */
.scanner__sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            transparent 40%, rgb(20 184 166 / .35) 50%, transparent 60%);
    opacity: 0;
}

.scanner__hud {
    position: relative;
    display: grid;
    margin-top: var(--sp-4);
    min-height: 40px;
}

.scanner__state {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    opacity: 0;
}

.scanner__state.is-scan {
    background: var(--surface-2);
    color: var(--text-muted);
}

.scanner__state.is-found {
    background: var(--danger-soft);
    color: var(--danger);
}

.scanner__state.is-safe {
    background: var(--ok-soft);
    color: var(--ok);
}

.scanner__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

@media (prefers-reduced-motion: no-preference) {
    .scanner__beam {
        animation: scanBeam var(--cycle) linear infinite;
    }

    .scanner__brackets {
        animation: scanFade var(--cycle) linear infinite;
    }

    .scanner__points {
        animation: scanPoints var(--cycle) linear infinite;
    }

    .scanner__sweep {
        animation: scanSweep var(--cycle) linear infinite;
    }

    .scanner__noise {
        animation: scanNoise var(--cycle) linear infinite;
    }

    .scanner__dot {
        animation: scanPulse 1.1s ease-in-out infinite;
    }

    .scanner__state.is-scan {
        animation: stateScan var(--cycle) linear infinite;
    }

    .scanner__state.is-found {
        animation: stateFound var(--cycle) linear infinite;
    }

    .scanner__state.is-safe {
        animation: stateSafe var(--cycle) linear infinite;
    }
}

/* Without motion, settle on the outcome that matters. */
@media (prefers-reduced-motion: reduce) {

    .scanner__noise,
    .scanner__state.is-safe {
        opacity: 1;
    }
}

@keyframes scanBeam {

    0%,
    2% {
        opacity: 0;
        top: -34%;
    }

    4% {
        opacity: 1;
    }

    26% {
        opacity: 1;
        top: 100%;
    }

    30%,
    100% {
        opacity: 0;
        top: 100%;
    }
}

@keyframes scanFade {

    0%,
    6% {
        opacity: 0;
    }

    12%,
    62% {
        opacity: 1;
    }

    72%,
    100% {
        opacity: 0;
    }
}

@keyframes scanPoints {

    0%,
    14% {
        opacity: 0;
        transform: scale(.96);
    }

    22%,
    58% {
        opacity: 1;
        transform: scale(1);
    }

    66%,
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes scanSweep {

    0%,
    58% {
        opacity: 0;
        transform: translateX(-100%);
    }

    62% {
        opacity: 1;
    }

    72% {
        opacity: 1;
        transform: translateX(100%);
    }

    74%,
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes scanNoise {

    0%,
    60% {
        opacity: 0;
    }

    72%,
    96% {
        opacity: .9;
    }

    100% {
        opacity: 0;
    }
}

@keyframes scanPulse {

    0%,
    100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes stateScan {

    0%,
    2% {
        opacity: 0;
    }

    6%,
    28% {
        opacity: 1;
    }

    33%,
    100% {
        opacity: 0;
    }
}

@keyframes stateFound {

    0%,
    33% {
        opacity: 0;
    }

    38%,
    58% {
        opacity: 1;
    }

    64%,
    100% {
        opacity: 0;
    }
}

@keyframes stateSafe {

    0%,
    68% {
        opacity: 0;
    }

    74%,
    96% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* ==========================================================================
   26  EXPLAINER ON SMALL SCREENS
   The scene viewBox is 720 wide, so on a phone everything inside it is scaled
   down by more than half. Bump the in-SVG type and give the stage more height
   rather than shipping a second layout.
   ========================================================================== */

@media (max-width: 700px) {
    .explainer__stage {
        aspect-ratio: 720 / 470;
    }

    .ex-h {
        font-size: 26px;
    }

    .ex-sub {
        font-size: 18px;
    }

    .ex-cap,
    .ex-name {
        font-size: 16px;
    }

    .ex-stat {
        font-size: 22px;
    }

    .ex-chip {
        font-size: 15px;
    }

    .explainer__time {
        display: none;
    }

    .explainer__title {
        font-size: var(--fs-sm);
    }

    .explainer__caption {
        font-size: var(--fs-xs);
    }
}

/* ==========================================================================
   27  FOUNDERS
   ========================================================================== */

.people {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    max-width: 860px;
    margin-inline: auto;
}

.founder {
    display: flex;
    gap: var(--sp-5);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease),
        border-color var(--dur-slow) var(--ease);
}

.founder:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--brand-a16);
}

.founder__avatar {
    width: 84px;
    height: 84px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--brand-a16);
}

.founder__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder__name {
    font-size: var(--fs-lg);
}

.founder__role {
    margin-top: 2px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand);
}

.founder__bio {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.founder__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding: .35rem .75rem;
    border-radius: var(--r-full);
    background: var(--brand-soft);
    border: 1px solid var(--brand-a16);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.founder__link:hover {
    background: var(--brand);
    color: var(--text-on-brand);
}

@media (max-width: 480px) {
    .founder {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ==========================================================================
   28  CONTACT
   ========================================================================== */

.contact-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xs);
}

.contact-card h3 {
    font-size: var(--fs-base);
}

.contact-card a {
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
    word-break: break-word;
}

.contact-card a:hover {
    color: var(--brand);
    text-decoration: underline;
}

.contact-card address {
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.6;
}

.contact-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* footer contact column */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-muted);
    text-decoration: none;
}

.footer-contact a:hover {
    color: var(--brand);
}

.footer-contact address {
    font-style: normal;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    line-height: 1.6;
    max-width: 30ch;
}

.footer-col h4 {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: var(--sp-4);
}

/* ==========================================================================
   29  ATMOSPHERE
   Three quiet effects that give the page depth without decoration for its own
   sake: a film grain, a drifting aurora behind the hero, and an accent edge
   that appears on card hover.
   ========================================================================== */

/* Film grain. A single inline SVG turbulence, fixed to the viewport so it never
   scrolls or repaints. Almost invisible on its own; it stops the large flat
   areas from looking like empty boxes. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Everything interactive must sit above the grain. */
.navbar,
.modal-overlay,
.loading-overlay,
.skip-link {
    z-index: 100;
}

.modal-overlay {
    z-index: 300;
}

.loading-overlay {
    z-index: 400;
}

/* Aurora: two slow, soft brand washes drifting behind the hero. */
.hero__aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    pointer-events: none;
    overflow: hidden;
}

.hero__aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
}

.hero__aurora span:nth-child(1) {
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    top: -8%;
    left: 4%;
    background: radial-gradient(circle, rgb(45 212 191 / .38), transparent 68%);
}

.hero__aurora span:nth-child(2) {
    width: 38vw;
    height: 38vw;
    max-width: 520px;
    max-height: 520px;
    top: 12%;
    right: 2%;
    background: radial-gradient(circle, rgb(15 118 110 / .3), transparent 68%);
}

.hero__aurora span:nth-child(3) {
    width: 30vw;
    height: 30vw;
    max-width: 400px;
    max-height: 400px;
    bottom: -6%;
    left: 38%;
    background: radial-gradient(circle, rgb(234 88 12 / .14), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
    .hero__aurora span:nth-child(1) {
        animation: drift 26s ease-in-out infinite alternate;
    }

    .hero__aurora span:nth-child(2) {
        animation: drift 32s ease-in-out infinite alternate-reverse;
    }

    .hero__aurora span:nth-child(3) {
        animation: drift 38s ease-in-out infinite alternate;
    }
}

@keyframes drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(4%, 6%, 0) scale(1.12);
    }
}

/* Cards reveal a brand edge on hover — a small, consistent reward for pointing
   at something, and it ties the card set together as one system. */
.feature-card,
.model-card,
.contact-card,
.founder {
    position: relative;
    overflow: hidden;
}

.feature-card::after,
.model-card::after,
.contact-card::after,
.founder::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--teal-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease);
}

.feature-card:hover::after,
.model-card:hover::after,
.contact-card:hover::after,
.founder:hover::after {
    transform: scaleX(1);
}

/* Stat tiles get a hairline brand rule above the number. */
.stat-tile {
    position: relative;
    padding-top: var(--sp-8);
}

.stat-tile::before {
    content: "";
    position: absolute;
    top: var(--sp-6);
    left: var(--sp-6);
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    opacity: .55;
}

/* The three-step row reads as a sequence, not three loose cards. */
@media (min-width: 900px) {
    .steps {
        position: relative;
    }

    .steps::before {
        content: "";
        position: absolute;
        top: 3.4rem;
        left: 12%;
        right: 12%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--brand-a24) 15%,
                var(--brand-a24) 85%, transparent);
        z-index: 0;
    }

    .steps>* {
        position: relative;
        z-index: 1;
    }
}

/* ==========================================================================
   30  THREAT VISUALISATIONS
   Two blocks that make the risk concrete: what one photo yields, and how a
   single photo links to everything else. Both animate from a .is-playing class
   added by static/js/viz.js on scroll, so nothing is hidden without JS and
   nothing animates under prefers-reduced-motion.
   ========================================================================== */

.viz {
    max-width: 880px;
    margin-inline: auto;
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow: 0 4px 12px rgb(15 23 42 / .05), 0 26px 64px rgb(15 23 42 / .09);
}

.viz__stage {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
    align-items: start;
}

.viz__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.viz__note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    flex: 1 1 22rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.6;
}

.viz__note .icon {
    color: var(--text-subtle);
    margin-top: 1px;
    flex: none;
}

.viz__replay {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .4rem .9rem;
    border-radius: var(--r-full);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.viz__replay:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* ---------------- 1. what one photo gives away ---------------- */

@media (min-width: 720px) {
    .dossier .viz__stage {
        grid-template-columns: 210px 1fr;
        gap: var(--sp-8);
    }
}

.dossier__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-xl);
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 50% 25%, #fff, transparent 70%),
        linear-gradient(160deg, var(--slate-100), var(--slate-200));
    display: grid;
    place-items: center;
}

.dossier__portrait {
    width: 66%;
    filter: drop-shadow(0 10px 20px rgb(15 23 42 / .12));
}

.dossier__overlay {
    position: absolute;
    width: 66%;
    aspect-ratio: 120 / 140;
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.dossier__beam {
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 30%;
    opacity: 0;
    background: linear-gradient(to bottom, transparent, var(--brand-a16) 50%, transparent);
    border-bottom: 2px solid var(--brand);
}

.dossier__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-3);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.dossier__rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dossier__row {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--surface-2);
    opacity: 0;
    transform: translateX(-8px);
}

.dossier__icon {
    display: grid;
    place-items: center;
    color: var(--text-subtle);
}

.dossier__label {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.dossier__value {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: right;
}

.dossier__row--critical {
    background: var(--danger-soft);
}

.dossier__row--critical .dossier__icon,
.dossier__row--critical .dossier__value {
    color: var(--danger);
}

.dossier__row--critical .dossier__value {
    font-weight: 700;
}

/* ---------------- 2. one photo, found everywhere ---------------- */

.matchweb__stage {
    gap: var(--sp-6);
}

@media (min-width: 760px) {
    .matchweb__stage {
        grid-template-columns: 200px 1fr;
        gap: var(--sp-8);
        align-items: center;
    }
}

.matchweb__query {
    position: relative;
    display: grid;
    place-items: center;
    padding: var(--sp-5) var(--sp-4) var(--sp-8);
    border-radius: var(--r-xl);
    background:
        radial-gradient(ellipse 70% 60% at 50% 30%, #fff, transparent 70%),
        linear-gradient(160deg, var(--slate-100), var(--slate-200));
    overflow: hidden;
}

.matchweb__query svg {
    width: 76%;
    max-width: 130px;
    filter: drop-shadow(0 10px 20px rgb(15 23 42 / .12));
}

.matchweb__beam {
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--brand);
    opacity: 0;
}

.matchweb__querylabel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-3);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.matchweb__grid {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 560px) {
    .matchweb__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.matchweb__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    background: var(--surface);
    text-align: center;
    opacity: .35;
    transition: opacity .35s var(--ease), border-color .35s var(--ease),
        background .35s var(--ease), transform .35s var(--ease);
}

.matchweb__thumb {
    width: 34px;
    opacity: .5;
}

.matchweb__name {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.25;
}

.matchweb__verdict {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-subtle);
}

.matchweb__yield {
    font-size: .6rem;
    color: var(--text-subtle);
    opacity: 0;
    transition: opacity .35s var(--ease);
}

.matchweb__result {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-top: var(--sp-6);
    padding: var(--sp-5);
    border-radius: var(--r-xl);
    background: var(--danger-soft);
    border: 1px solid rgb(220 38 38 / .2);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.matchweb__result strong {
    display: block;
    color: var(--danger);
    font-size: var(--fs-md);
    font-family: var(--font-heading);
}

.matchweb__result span:last-child {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.icon-tile--danger {
    background: rgb(220 38 38 / .12);
    color: var(--danger);
    flex: none;
}

/* ---------------- playback ---------------- */

@media (prefers-reduced-motion: no-preference) {
    .viz.is-playing .dossier__beam {
        animation: dossierBeam 1.6s var(--ease) forwards;
    }

    .viz.is-playing .dossier__overlay {
        opacity: 1;
        transition-delay: .9s;
    }

    .viz.is-playing .dossier__row {
        animation: rowIn .45s var(--ease) forwards;
        animation-delay: calc(1.1s + var(--i) * .16s);
    }

    .viz.is-playing .matchweb__beam {
        animation: queryPulse 1.2s var(--ease) 2;
    }

    .viz.is-playing .matchweb__cell {
        animation: cellScan .5s var(--ease) forwards;
        animation-delay: calc(.5s + var(--i) * .22s);
    }

    .viz.is-playing .matchweb__cell.is-hit .matchweb__yield {
        opacity: 1;
        transition-delay: calc(1.1s + var(--i) * .22s);
    }

    .viz.is-playing .matchweb__result {
        opacity: 1;
        transform: none;
        transition-delay: 2.7s;
    }
}

/* No JS, or reduced motion: show the finished state immediately. */
.viz.is-static .dossier__row,
.viz.is-static .matchweb__result {
    opacity: 1;
    transform: none;
}

.viz.is-static .dossier__overlay,
.viz.is-static .matchweb__yield {
    opacity: 1;
}

.viz.is-static .matchweb__cell {
    opacity: 1;
}

.viz.is-static .matchweb__cell.is-hit,
.viz.is-playing .matchweb__cell.is-hit {
    border-color: rgb(220 38 38 / .45);
    background: var(--danger-soft);
}

.viz.is-static .matchweb__cell.is-hit .matchweb__verdict,
.viz.is-playing .matchweb__cell.is-hit .matchweb__verdict {
    color: var(--danger);
}

.viz.is-static .matchweb__cell.is-hit .matchweb__thumb,
.viz.is-playing .matchweb__cell.is-hit .matchweb__thumb {
    opacity: .9;
}

@keyframes dossierBeam {
    0% {
        opacity: 1;
        top: -30%;
    }

    85% {
        opacity: 1;
        top: 100%;
    }

    100% {
        opacity: 0;
        top: 100%;
    }
}

@keyframes rowIn {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cellScan {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes queryPulse {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* ==========================================================================
   31  EMAIL VERIFICATION
   ========================================================================== */

.verify-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--warn-soft);
    border: 1px solid rgb(180 83 9 / .25);
    color: var(--warn);
}

.verify-banner .icon {
    flex: none;
}

.verify-banner strong {
    display: block;
    font-size: var(--fs-sm);
}

.verify-banner span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    opacity: .85;
}

.verify-banner>div {
    flex: 1;
}

.verify-banner .btn {
    flex: none;
}

@media (max-width: 600px) {
    .verify-banner {
        flex-wrap: wrap;
    }

    .verify-banner>div {
        flex: 1 1 100%;
    }
}

.verify-card {
    max-width: 30rem;
    margin-inline: auto;
    padding: var(--sp-10) var(--sp-8);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-lg);
}

.verify-card .icon-tile {
    margin: 0 auto var(--sp-5);
}

.verify-card h1 {
    font-size: var(--fs-2xl);
}

.verify-card p {
    margin-top: var(--sp-4);
    color: var(--text-muted);
}

.alert--info.visible {
    display: flex;
}