/* scan-flow.css: the home page's hero, the brand scanner's card and its pop-up, in all seven themes (cs/website-light,
   plan §3.2). Loaded once, by the first card on a page (components/scanner/scan_card.html), after website.css,
   website-light.css and website-black.css.

   Built from the approved mock (mock/variants/final: e/hero-simple.css, f/hero-cta.css, f/scan-flow.css, g/black.css's
   card rules, final/older-themes.css and final/final.css) in the mock's own order, so each theme cascades as it did
   there. The mock wrote each rule twice, once for Light and Black (html.website-light) and once for the older five
   (html:not(.website-light)); here it is written once for every theme, `html[class*="website-"]`, which has the same
   specificity. Everything reads the --db-* tokens: theme.css sets Light's and Black's, and the older five map theirs
   below. Type: Geist and Geist Mono on Light and Black (theme.css); the older five keep Inter for the words, with Geist
   Mono for the small labels, as the mock. The mock's own controls, its spinner and its placeholder modal don't ship. */

@property --hc-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@keyframes hc-spin { to { --hc-a: 360deg; } }
@keyframes hc-pulse { 50% { box-shadow: 0 0 0 7px rgb(14 159 110 / 0); } }
@keyframes sf-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes sf-up { from { opacity: 0; transform: translateY(40px); } }
@keyframes fx-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes fx-in { from { opacity: 0; transform: translateY(-4px); } }

/* The older five's tokens: each keeps its own colours (theme.css) and Inter. */
html:not(.website-light) {
    --db-ink: var(--text-primary);
    --db-ink-2: var(--text-light);
    --db-ink-3: var(--text-secondary);
    --db-ink-hover: var(--text-light);
    --db-bg: var(--bg-secondary);
    --db-bg-2: color-mix(in srgb, var(--bg-secondary) 88%, #fff 3%);
    --db-bg-3: color-mix(in srgb, var(--bg-secondary) 90%, #fff 7%);
    --db-line: var(--border);
    --db-line-2: color-mix(in srgb, var(--border-hover) 70%, transparent);
    --db-line-3: var(--border-hover);
    --db-flame: var(--accent);
    --db-flame-2: var(--accent-secondary);
    --db-flame-btn: var(--accent);              /* their scan buttons keep the theme's own colour */
    --db-flame-btn-2: var(--accent-secondary);
    --db-spectrum: linear-gradient(100deg, var(--conic-glow-1) 0%, var(--accent) 50%, var(--conic-glow-2) 100%);
    --db-good: #2FBF8B;
    --db-good-bg: rgb(18 194 155 / .15);
    --db-good-ink: #5FD9AE;
    --db-focus: var(--accent);
    --db-sh-1: 0 1px 2px rgb(0 0 0 / .5);
    --db-sh-2: 0 1px 2px rgb(0 0 0 / .5), 0 14px 34px -14px rgb(0 0 0 / .8);
    --db-sh-3: 0 0 0 1px rgb(255 255 255 / .06), 0 2px 4px rgb(0 0 0 / .5), 0 40px 80px -24px rgb(0 0 0 / .9);
    --db-f-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --db-f-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
/* Their native controls inside the card and the pop-up draw dark (the mock set this on the whole page). */
html:not(.website-light) [data-scan-form],
html:not(.website-light) .sf-modal { color-scheme: dark; }

/* A screen's parts the script hides keep hidden, whatever display their class gives them. */
html[class*="website-"] [data-scan-form] [hidden],
html[class*="website-"] .sf-modal [hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   The hero: one centred column, the headline above the card (mock round 2, e)
   ═══════════════════════════════════════════════════════════════════════════ */
html[class*="website-"] .hero-simple {
    min-height: 0;
    padding-top: clamp(132px, 19vh, 210px);
    padding-bottom: clamp(80px, 12vh, 140px);
}
html[class*="website-"] .hero-simple .hero-v1-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    max-width: 1000px;
}
html[class*="website-"] .hero-simple .hero-v1-layout > :first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}
html[class*="website-"] .hero-simple .hero-v1-layout > :first-child > * { order: 0; }   /* website.css puts the eyebrow last on phones */
html[class*="website-"] .hero-simple .huly-headline { font-size: clamp(46px, 7.2vw, 96px); }
html[class*="website-"] .hero-simple h1 { max-width: 52ch; margin-inline: auto; }
html[class*="website-"] .hero-simple .hero-review-pills { justify-content: center; }
html[class*="website-"] .hs-error { margin-top: 10px; color: #C4282D; font-size: 14px; }

@media (max-width: 900px) {
    html[class*="website-"] .hero-simple { padding-top: 112px; padding-bottom: 56px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   The card (mock round 2, f): a title row that asks for the website, the field with example websites typing in, the
   button that says what happens, three steps, and a spectrum ring moving slowly round the card's own border.
   ═══════════════════════════════════════════════════════════════════════════ */
html[class*="website-"] .hc-form {
    position: relative;
    isolation: isolate;
    width: min(780px, 100%);
    margin: 18px auto 24px;
}
/* The glow follows the card's shape, the same distance out on every side and round every corner. */
html[class*="website-"] .hc-form::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -14px;
    border-radius: 38px;          /* the card's 24px plus the 14px */
    background: var(--db-spectrum);
    filter: blur(24px);
    opacity: .34;
    pointer-events: none;
}
/* The moving ring is the card's real 2px border: one even width all round, corners included. */
html[class*="website-"] .hc-card {
    position: relative;
    padding: 12px 12px 10px;
    border: 2px solid transparent;
    border-radius: 24px;
    background:
        linear-gradient(var(--db-bg), var(--db-bg)) padding-box,
        conic-gradient(from var(--hc-a),
            rgb(224 225 230) 0deg, rgb(224 225 230) 140deg,
            #FF6B2C 190deg, #FF2F87 230deg, #8B5CFF 270deg, #1AA8FF 310deg,
            rgb(224 225 230) 350deg) border-box;
    box-shadow: 0 0 0 1px rgb(10 10 15 / .05), 0 2px 4px rgb(10 10 15 / .04), 0 24px 48px -28px rgb(10 10 15 / .16);
    text-align: left;
    animation: hc-spin 7s linear infinite;
}
html[class*="website-"] .hc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px 12px;
}
html[class*="website-"] .hc-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--db-ink);
}
html[class*="website-"] .hc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--db-good);
    box-shadow: 0 0 0 4px var(--db-good-bg);
    animation: hc-pulse 2.4s ease-in-out infinite;
}
html[class*="website-"] .hc-free {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--db-good-bg);
    color: var(--db-good-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}
html[class*="website-"] .hc-time { font: 500 12.5px/1 var(--db-f-mono); color: var(--db-ink-3); white-space: nowrap; }

html[class*="website-"] .hc-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 8px 8px 8px 20px;
    border: 1px solid var(--db-line-2);
    border-radius: 16px;
    background: var(--db-bg-2);
    cursor: text;
    transition: border-color .15s, background .15s;
}
html[class*="website-"] .hc-field:hover { border-color: var(--db-line-3); }
/* focus: a soft violet edge and glow, not a black line; #9B7BFF keeps 3:1 against white */
html[class*="website-"] .hc-field:focus-within { background: var(--db-bg); border-color: #9B7BFF; outline: none; box-shadow: 0 0 0 4px rgb(139 92 255 / .14); }
html[class*="website-"] .hc-globe { flex: none; color: var(--db-ink-3); }
html[class*="website-"] .hc-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    padding: 12px 0;
    font-size: 21px;
    letter-spacing: -.02em;
    color: var(--db-ink);
}
html[class*="website-"] .hc-field input:focus-visible { outline: 0; }
html[class*="website-"] .hc-field input::placeholder { color: var(--db-ink-3); opacity: 1; }
html[class*="website-"] .hc-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    background: var(--db-flame-btn);        /* the button's own flame: white on it is 4.60:1, on its hover 5.42:1 */
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 10px 26px -8px color-mix(in srgb, var(--db-flame-btn) 70%, transparent);
    transition: background .15s, transform .15s, box-shadow .15s;
}
html[class*="website-"] .hc-btn svg { transition: transform .2s; }
html[class*="website-"] .hc-btn:hover { background: var(--db-flame-btn-2); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 14px 30px -8px color-mix(in srgb, var(--db-flame-btn) 75%, transparent); }
html[class*="website-"] .hc-btn:hover svg { transform: translateX(3px); }
html[class*="website-"] .hc-btn:active { transform: scale(.97); }

/* the three steps say what happens and what they get, each a bold line and a detail */
html[class*="website-"] .hc-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
    padding: 14px 8px 6px;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--db-ink-3);
    text-align: left;
}
html[class*="website-"] .hc-steps li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
html[class*="website-"] .hc-steps b {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--db-ink);
    color: #FFFFFF;
    font: 500 11px/1 var(--db-f-mono);
}
html[class*="website-"] .hc-steps strong { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--db-ink); }

html[class*="website-"] .hc-title,
html[class*="website-"] .hc-free { white-space: nowrap; }

/* The line under the field sits on the card, at its foot, where the notices go. */
html[class*="website-"] .hc-card .hs-error { margin: 10px 8px 4px; }

@media (prefers-reduced-motion: reduce) {
    html[class*="website-"] .hc-card, html[class*="website-"] .hc-dot { animation: none; }
}
@media (max-width: 480px) {
    html[class*="website-"] .hc-time { display: none; }   /* the steps already say it is quick */
}
@media (max-width: 640px) {
    html[class*="website-"] .hc-card { padding: 10px; border-radius: 20px; }
    html[class*="website-"] .hc-form::before { border-radius: 34px; }   /* the phone card's 20px plus the 14px */
    html[class*="website-"] .hc-top { padding: 4px 4px 10px; }
    html[class*="website-"] .hc-title { white-space: normal; line-height: 1.3; }   /* the ask wraps; the chip stays whole */
    html[class*="website-"] .hc-ask { text-wrap: balance; }
    html[class*="website-"] .hc-field { flex-wrap: wrap; padding: 8px; gap: 6px; }
    html[class*="website-"] .hc-globe { margin-left: 10px; }
    html[class*="website-"] .hc-field input { flex-basis: calc(100% - 48px); padding: 12px 4px; font-size: 18px; }
    html[class*="website-"] .hc-btn { width: 100%; }
    html[class*="website-"] .hc-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 6px 6px; }
}

/* The card on Black (the mock's black.css): a lifted surface, the ring dark until the spectrum passes, no drop shadow
   (on black it only swallowed the glow). After the card's rules, so it wins by order as it did in the mock. */
html.website-black .hc-form::before { opacity: .24; }
html.website-black .hc-card {
    background:
        linear-gradient(#0B0B0D, #0B0B0D) padding-box,
        conic-gradient(from var(--hc-a),
            #2A2A30 0deg, #2A2A30 140deg,
            #FF6B2C 190deg, #FF2F87 230deg, #8B5CFF 270deg, #1AA8FF 310deg,
            #2A2A30 350deg) border-box;
    box-shadow: none;
}
html.website-black .hc-field { background: #141417; border-color: var(--db-line-2); }
html.website-black .hc-field:hover { border-color: var(--db-line-3); }
html.website-black .hc-field:focus-within { background: #000000; border-color: #A98FFF; outline: none; box-shadow: 0 0 0 4px rgb(169 143 255 / .18); }   /* soft violet, not white */
html.website-black .hc-steps b { background: #FFFFFF; color: #000000; }


/* ═══════════════════════════════════════════════════════════════════════════
   The pop-up (mock round 3): the scan running in the header, one screen at a time below it.
   ═══════════════════════════════════════════════════════════════════════════ */
html.sf-lock { overflow: hidden; }
html[class*="website-"] .sf-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: start center;          /* the top edge stays put as screens change height */
    padding: max(24px, 9vh) 24px 24px;
    background: rgb(10 10 15 / .42);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
html[class*="website-"] .sf-modal[hidden] { display: none; }
html[class*="website-"] .sf-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(620px, 100%);
    max-height: min(780px, calc(100vh - max(24px, 9vh) - 24px));
    border-radius: 24px;
    background: var(--db-bg);
    box-shadow: var(--db-sh-3);
    overflow: hidden;
    color: var(--db-ink);
    font-family: var(--db-f-ui);
    text-align: left;
    animation: sf-in .28s cubic-bezier(.2, .8, .2, 1);
}

/* header: the website and the scan running */
html[class*="website-"] .sf-head {
    flex: none;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--db-line);
    background: var(--db-bg-2);
}
html[class*="website-"] .sf-site {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 44px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--db-ink);
    overflow-wrap: anywhere;
}
html[class*="website-"] .sf-site svg { flex: none; color: var(--db-ink-3); }
html[class*="website-"] .sf-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--db-ink-2);
    font: 400 26px/1 var(--db-f-ui);
    cursor: pointer;
}
html[class*="website-"] .sf-x:hover { background: var(--db-bg-3); color: var(--db-ink); }
html[class*="website-"] .sf-scan { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 18px; }
html[class*="website-"] .sf-bar { flex: 0 0 132px; height: 6px; border-radius: 6px; background: var(--db-bg-3); overflow: hidden; }
html[class*="website-"] .sf-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--db-spectrum); transition: width .2s linear; }
html[class*="website-"] .sf-scan-text { font: 500 12.5px/1.35 var(--db-f-mono); color: var(--db-ink-3); }
html[class*="website-"] .sf-head.sf-done .sf-bar i { background: var(--db-good); }
html[class*="website-"] .sf-head.sf-done .sf-scan-text { color: var(--db-good-ink); }
html[class*="website-"] .sf-ok { font-family: var(--db-f-ui); font-weight: 700; }

/* body: one screen at a time */
html[class*="website-"] .sf-body { flex: 1 1 auto; min-height: 0; padding: 22px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
html[class*="website-"] .sf-intro { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--db-ink-2); }
html[class*="website-"] .sf-kicker { margin: 0 0 8px; font: 500 12.5px/1 var(--db-f-mono); color: var(--db-ink-3); }
html[class*="website-"] .sf-title {
    margin: 0;
    font: 600 24px/1.15 var(--db-f-ui);
    letter-spacing: -.03em;
    color: var(--db-ink);
    text-wrap: balance;
    background: none;
    -webkit-text-fill-color: currentColor;
}
html[class*="website-"] .sf-title:focus { outline: none; }
html[class*="website-"] .sf-title.sf-big { font-size: 28px; }
html[class*="website-"] .sf-hint,
html[class*="website-"] .sf-lede { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--db-ink-2); text-wrap: pretty; }
html[class*="website-"] .sf-lede + .sf-lede { margin-top: 10px; }

html[class*="website-"] .sf-options { display: grid; gap: 8px; margin-top: 18px; }
html[class*="website-"] .sf-options.sf-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[class*="website-"] .sf-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--db-line-2);
    border-radius: 14px;
    background: var(--db-bg);
    color: var(--db-ink);
    font: 500 15.5px/1.3 var(--db-f-ui);
    letter-spacing: -.01em;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
html[class*="website-"] .sf-opt::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--db-line-3);
    background: var(--db-bg);
    box-sizing: border-box;
}
html[class*="website-"] .sf-multi .sf-opt::before { border-radius: 5px; }
html[class*="website-"] .sf-opt:hover { border-color: var(--db-line-3); background: var(--db-bg-2); }
html[class*="website-"] .sf-opt[aria-pressed="true"] { border-color: var(--db-ink); box-shadow: 0 0 0 1px var(--db-ink); }
html[class*="website-"] .sf-opt[aria-pressed="true"]::before { border-color: var(--db-ink); background: var(--db-ink); box-shadow: inset 0 0 0 3.5px var(--db-bg); }
html[class*="website-"] .sf-multi .sf-opt[aria-pressed="true"]::before { box-shadow: none; }
html[class*="website-"] .sf-multi .sf-opt[aria-pressed="true"]::after {
    content: '';
    position: absolute;
    left: 21px;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid var(--db-bg);
    border-width: 0 2px 2px 0;
    transform: translateY(-62%) rotate(45deg);
}

html[class*="website-"] .sf-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
html[class*="website-"] .sf-nav.sf-end { justify-content: flex-start; flex-wrap: wrap; margin-top: 22px; }
html[class*="website-"] .sf-back { padding: 10px 2px; border: 0; background: none; color: var(--db-ink-2); font: 500 15px/1 var(--db-f-ui); cursor: pointer; }
html[class*="website-"] .sf-back:hover { color: var(--db-ink); }
html[class*="website-"] .sf-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: var(--db-flame-btn);
    color: #FFFFFF;
    font: 600 16.5px/1 var(--db-f-ui);
    letter-spacing: -.015em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 10px 26px -8px color-mix(in srgb, var(--db-flame-btn) 60%, transparent);
    transition: background .15s, transform .15s, opacity .15s;
}
html[class*="website-"] .sf-primary:hover:not(:disabled) { background: var(--db-flame-btn-2); transform: translateY(-1px); }
html[class*="website-"] .sf-primary:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
html[class*="website-"] .sf-ghost {
    height: 46px;
    padding: 0 18px;
    border: 1px solid var(--db-line-2);
    border-radius: 12px;
    background: var(--db-bg);
    color: var(--db-ink);
    font: 500 15px/1 var(--db-f-ui);
    cursor: pointer;
}
html[class*="website-"] .sf-ghost:hover { border-color: var(--db-line-3); background: var(--db-bg-2); }

/* waiting for start's answer: a sheen */
html[class*="website-"] .sf-wait { display: grid; justify-items: center; gap: 4px; padding: 30px 8px 18px; text-align: center; }

/* details */
html[class*="website-"] .sf-told { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
html[class*="website-"] .sf-told em { margin-right: 4px; font: 500 12px/1 var(--db-f-mono); font-style: normal; color: var(--db-ink-3); }
html[class*="website-"] .sf-told span { padding: 4px 10px; border-radius: 999px; background: var(--db-bg-3); color: var(--db-ink-2); font-size: 13px; line-height: 1.4; }
html[class*="website-"] .sf-form { display: grid; gap: 12px; margin: 18px 0 0; }
html[class*="website-"] .sf-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[class*="website-"] .sf-field { display: grid; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: var(--db-ink); }
html[class*="website-"] .sf-field small { font-size: 13px; font-weight: 400; color: var(--db-ink-3); }
html[class*="website-"] .sf-field input,
html[class*="website-"] .sf-phone2 input {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--db-line-2);
    border-radius: 12px;
    background: var(--db-bg-2);
    box-shadow: none;
    color: var(--db-ink);
    font: 400 16px/1 var(--db-f-ui);
}
html[class*="website-"] .sf-field input:focus,
html[class*="website-"] .sf-phone2 input:focus { outline: none; border-color: #9B7BFF; box-shadow: 0 0 0 4px rgb(139 92 255 / .14); background: var(--db-bg); }   /* the same soft violet as the card's field */
html[class*="website-"] .sf-field input[aria-invalid="true"] { border-color: #D92D20; }
html[class*="website-"] .sf-err { margin: 0; font-size: 14px; color: #D92D20; }
html[class*="website-"] .sf-submit { width: 100%; margin-top: 4px; }
html[class*="website-"] .sf-terms { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--db-ink-3); }
html[class*="website-"] .sf-terms a { color: inherit; text-decoration: underline; }
html[class*="website-"] .sf-set { min-width: 0; margin: 0; padding: 0; border: 0; }
html[class*="website-"] .sf-set legend { margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 500; color: var(--db-ink); }
html[class*="website-"] .sf-slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[class*="website-"] .sf-day { grid-column: 1 / -1; margin: 4px 0 0; font: 500 12.5px/1 var(--db-f-mono); color: var(--db-ink-3); }
html[class*="website-"] .sf-slot {
    height: 44px;
    margin: 0;
    border: 1px solid var(--db-line-2);
    border-radius: 10px;
    background: var(--db-bg);
    color: var(--db-ink);
    font: 500 14.5px/1 var(--db-f-ui);
    cursor: pointer;
}
html[class*="website-"] .sf-slot:hover { border-color: var(--db-line-3); }
html[class*="website-"] .sf-slot[aria-pressed="true"] { border-color: var(--db-ink); box-shadow: 0 0 0 1px var(--db-ink); }

/* thank you */
html[class*="website-"] .sf-tick {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--db-good-bg);
    color: var(--db-good-ink);
    font: 700 24px/1 var(--db-f-ui);
}
html[class*="website-"] .sf-phone2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid var(--db-line-2);
    border-radius: 16px;
    background: var(--db-bg-2);
}
html[class*="website-"] .sf-phone2 label { grid-column: 1 / -1; font-size: 15px; font-weight: 500; color: var(--db-ink); }
html[class*="website-"] .sf-phone2 .sf-ghost { height: 50px; }
html[class*="website-"] .sf-phone2 .sf-err { grid-column: 1 / -1; }
html[class*="website-"] .sf-added { color: var(--db-good-ink); font-weight: 500; }
html[class*="website-"] .sf-nw { white-space: nowrap; }   /* an email address or a website stays on one line */

@media (max-width: 640px) {
    html[class*="website-"] .sf-modal { place-items: end stretch; padding: 0; }
    html[class*="website-"] .sf-sheet { width: 100%; max-height: 92vh; max-height: 92svh; border-radius: 22px 22px 0 0; animation-name: sf-up; }
    html[class*="website-"] .sf-head { padding: 16px 16px 12px; }
    html[class*="website-"] .sf-body { padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
    html[class*="website-"] .sf-title { font-size: 21px; }
    html[class*="website-"] .sf-title.sf-big { font-size: 24px; }
    html[class*="website-"] .sf-options.sf-two,
    html[class*="website-"] .sf-row2 { grid-template-columns: minmax(0, 1fr); }
    html[class*="website-"] .sf-opt { min-height: 48px; }
    html[class*="website-"] .sf-bar { flex-basis: 84px; }
    html[class*="website-"] .sf-nw { white-space: normal; }
    /* Back and Continue stay in reach when the options run past the screen */
    html[class*="website-"] .sf-nav {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin: 16px -16px calc(-18px - env(safe-area-inset-bottom, 0px));
        padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
        background: var(--db-bg);
        box-shadow: 0 -1px 0 var(--db-line);
    }
    :is(html.website-black, html:not(.website-light)) .sf-nav { background: #0B0B0D; box-shadow: 0 -1px 0 #1A1A1E; }
}
@media (prefers-reduced-motion: reduce) {
    html[class*="website-"] .sf-sheet { animation: none; }
    html[class*="website-"] .sf-bar i { transition: none; }
}

/* The dark themes: the same pop-up, its surfaces lifted off the page (the mock's Black block, which its older five
   also wore; their own colours follow further down). */
:is(html.website-black, html:not(.website-light)) .sf-modal { background: rgb(0 0 0 / .7); }
:is(html.website-black, html:not(.website-light)) .sf-sheet { background: #0B0B0D; box-shadow: 0 0 0 1px #27272C, 0 40px 80px -24px rgb(0 0 0 / .9); }
:is(html.website-black, html:not(.website-light)) .sf-head { background: #0B0B0D; border-bottom-color: #1A1A1E; }
:is(html.website-black, html:not(.website-light)) .sf-x:hover { background: #1A1A1E; }
:is(html.website-black, html:not(.website-light)) .sf-bar { background: #1A1A1E; }
:is(html.website-black, html:not(.website-light)) .sf-opt,
:is(html.website-black, html:not(.website-light)) .sf-slot,
:is(html.website-black, html:not(.website-light)) .sf-ghost { background: #141417; border-color: #27272C; }
:is(html.website-black, html:not(.website-light)) .sf-opt:hover,
:is(html.website-black, html:not(.website-light)) .sf-slot:hover,
:is(html.website-black, html:not(.website-light)) .sf-ghost:hover { background: #1A1A1E; border-color: #3A3A41; }
:is(html.website-black, html:not(.website-light)) .sf-opt::before { background: #141417; }
:is(html.website-black, html:not(.website-light)) .sf-opt[aria-pressed="true"]::before { background: #FFFFFF; box-shadow: inset 0 0 0 3.5px #141417; }
:is(html.website-black, html:not(.website-light)) .sf-multi .sf-opt[aria-pressed="true"]::before { box-shadow: none; }
:is(html.website-black, html:not(.website-light)) .sf-multi .sf-opt[aria-pressed="true"]::after { border-color: #000000; }
:is(html.website-black, html:not(.website-light)) .sf-told span { background: #1A1A1E; }
:is(html.website-black, html:not(.website-light)) .sf-field input,
:is(html.website-black, html:not(.website-light)) .sf-phone2 input { background: #141417; border-color: #27272C; }
:is(html.website-black, html:not(.website-light)) .sf-field input:focus,
:is(html.website-black, html:not(.website-light)) .sf-phone2 input:focus { background: #000000; border-color: #A98FFF; outline: none; box-shadow: 0 0 0 4px rgb(169 143 255 / .18); }
:is(html.website-black, html:not(.website-light)) .sf-field input[aria-invalid="true"] { border-color: #F97066; }
:is(html.website-black, html:not(.website-light)) .sf-err { color: #FDA29B; }
:is(html.website-black, html:not(.website-light)) .sf-phone2 { background: #141417; border-color: #27272C; }
/* the line under a card's field, on a dark card */
:is(html.website-black, html:not(.website-light)) .hc-card .hs-error { color: #FDA29B; }


/* ═══════════════════════════════════════════════════════════════════════════
   The button that opens into the field (Settings › Website look › Scanner starts as). A [data-scan-form] marked
   .is-collapsed shows one wide button; a click opens the field round it while scan-flow.js slides the button to the
   field's end. On phones the field slides open above the button instead.
   ═══════════════════════════════════════════════════════════════════════════ */
html[class*="website-"] [data-scan-form] .hc-field {
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease,
                padding .45s cubic-bezier(.2, .8, .2, 1), gap .45s cubic-bezier(.2, .8, .2, 1);
}
html[class*="website-"] [data-scan-form] .hc-globe,
html[class*="website-"] [data-scan-form] .hc-field input { transition: opacity .3s ease .16s; }
html[class*="website-"] [data-scan-form].is-collapsed .hc-field {
    gap: 0;
    padding-left: 8px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    outline: none;
    cursor: default;
}
html[class*="website-"] [data-scan-form].is-collapsed .hc-globe,
html[class*="website-"] [data-scan-form].is-collapsed .hc-field input { opacity: 0; pointer-events: none; transition-delay: 0s; }
html[class*="website-"] [data-scan-form].is-collapsed .hc-field input { flex: 0 0 0; width: 0; min-width: 0; padding: 0; }
html[class*="website-"] [data-scan-form].is-collapsed .hc-globe { width: 0; margin: 0; }
html[class*="website-"] [data-scan-form].is-collapsed .hc-btn { flex: 1 1 auto; }

/* the closing band's field: white on the band, as today's bar there is */
html[class*="website-"] .bk-form { width: 100%; }
html[class*="website-"] .bk-field { background: #FFFFFF; border-color: transparent; box-shadow: 0 4px 20px rgb(0 0 0 / .2); }
html[class*="website-"] .bk-field:hover { border-color: transparent; }
html[class*="website-"] .bk-field:focus-within { background: #FFFFFF; border-color: #9B7BFF; outline: none; box-shadow: 0 4px 20px rgb(0 0 0 / .2), 0 0 0 4px rgb(169 143 255 / .32); }
html[class*="website-"] .bk-field input { color: #111111; }
html[class*="website-"] .bk-field input::placeholder { color: #8A8A94; }
html[class*="website-"] .bk-field .hc-globe { color: #6B6E79; }
html[class*="website-"] .bk-error { margin: 10px 0 0; font-size: 14px; color: #FDA29B; }

@media (max-width: 640px) {
    html[class*="website-"] [data-scan-form] .hc-field { transition: gap .4s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
    html[class*="website-"] [data-scan-form] .hc-field input {
        max-height: 64px;
        transition: opacity .3s ease .12s, max-height .4s cubic-bezier(.2, .8, .2, 1), padding .4s cubic-bezier(.2, .8, .2, 1);
    }
    html[class*="website-"] [data-scan-form] .hc-globe { height: 20px; transition: opacity .3s ease .12s, height .4s cubic-bezier(.2, .8, .2, 1); }
    html[class*="website-"] [data-scan-form].is-collapsed .hc-field { gap: 0; padding: 8px; }
    html[class*="website-"] [data-scan-form].is-collapsed .hc-field input { flex: 0 1 calc(100% - 48px); width: auto; max-height: 0; padding-top: 0; padding-bottom: 0; }
    html[class*="website-"] [data-scan-form].is-collapsed .hc-globe { width: 20px; height: 0; margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    html[class*="website-"] [data-scan-form] .hc-field,
    html[class*="website-"] [data-scan-form] .hc-field input,
    html[class*="website-"] [data-scan-form] .hc-globe { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   The five older themes (decisions 38, 69): the same hero, card and pop-up in each theme's own colours.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The card's moving ring, in the theme's own two glow colours. */
html:not(.website-light) .hc-form::before { opacity: .28; }
html:not(.website-light) .hc-card {
    background:
        linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
        conic-gradient(from var(--hc-a),
            var(--border-hover) 0deg, var(--border-hover) 140deg,
            var(--conic-glow-1) 190deg, var(--accent) 250deg, var(--conic-glow-2) 310deg,
            var(--border-hover) 350deg) border-box;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .04), 0 2px 4px rgb(0 0 0 / .4), 0 24px 48px -28px rgb(0 0 0 / .8);
}
html:not(.website-light) .hc-field { background: var(--bg-input); border-color: var(--db-line-2); }
html:not(.website-light) .hc-field:hover { border-color: var(--db-line-3); }
html:not(.website-light) .hc-field:focus-within {
    background: var(--bg-primary);
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
html:not(.website-light) .hc-btn { background: var(--accent); color: #fff; box-shadow: 0 10px 28px -10px var(--accent-glow); }
html:not(.website-light) .hc-btn:hover { background: var(--accent-secondary); }
html:not(.website-light) .hc-steps b { background: var(--text-primary); color: var(--bg-primary); }
html:not(.website-light) .hc-free { background: var(--accent-soft); color: var(--text-primary); }
html:not(.website-light) .hc-dot { background: var(--accent); }

/* The pop-up: the theme's own surfaces. */
html:not(.website-light) .sf-modal { background: rgb(0 0 0 / .66); }
html:not(.website-light) .sf-sheet { background: var(--bg-secondary); }
html:not(.website-light) .sf-head { background: color-mix(in srgb, var(--bg-secondary) 92%, #fff 4%); }
html:not(.website-light) .sf-opt { background: color-mix(in srgb, var(--bg-secondary) 92%, #fff 5%); border-color: var(--db-line-2); color: var(--text-primary); }
html:not(.website-light) .sf-opt:hover { border-color: var(--border-hover); background: var(--bg-hover); }
html:not(.website-light) .sf-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
html:not(.website-light) .sf-slot { background: color-mix(in srgb, var(--bg-secondary) 92%, #fff 5%); border-color: var(--db-line-2); color: var(--text-primary); }
html:not(.website-light) .sf-slot:hover { border-color: var(--border-hover); }
html:not(.website-light) .sf-slot[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
html:not(.website-light) .sf-field input { background: var(--bg-input); border-color: var(--db-line-2); color: var(--text-primary); }
html:not(.website-light) .sf-field input:focus { border-color: var(--accent); }
html:not(.website-light) .sf-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 28px -10px var(--accent-glow); }
html:not(.website-light) .sf-primary:hover { background: var(--accent-secondary); }
html:not(.website-light) .sf-primary:disabled { background: var(--bg-hover); color: var(--text-muted); box-shadow: none; }
html:not(.website-light) .sf-ghost { background: transparent; border-color: var(--db-line-2); color: var(--text-primary); }
html:not(.website-light) .sf-told span { background: var(--accent-soft); color: var(--text-primary); }
html:not(.website-light) .sf-avatar { background: var(--accent); color: #fff; }
html:not(.website-light) .hc-notice a { background: var(--accent); color: #fff; }
html:not(.website-light) .sf-nav { background: var(--bg-secondary); }

/* The hero's own line under the headline: Inter is wider than Geist. */
html:not(.website-light) .hero-simple h1 { max-width: 66ch; }


/* ═══════════════════════════════════════════════════════════════════════════
   For every theme, read last (the final mock's final.css): tokens only, the seven themes supply the values.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The pop-up sits above the cookie banner. */
html .sf-modal.sf-modal { z-index: 2147483000; }

/* Loading is a sheen, never a spinner. */
html .fx-sheen {
    display: block;
    border-radius: 12px;
    background: linear-gradient(100deg, var(--db-bg-3) 30%, color-mix(in srgb, var(--db-ink) 14%, var(--db-bg-3)) 50%, var(--db-bg-3) 70%);
    background-size: 200% 100%;
    animation: fx-sheen 1.3s linear infinite;
}
html .sf-wait .fx-sheen { width: 100%; height: 14px; margin-bottom: 10px; }
html .sf-wait .fx-sheen + .fx-sheen { width: 72%; }
html .sf-wait .fx-sheen + .fx-sheen + .fx-sheen { width: 48%; margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { html .fx-sheen { animation: none; } }

/* The button while the address is checked, and Send while it sends. */
html .hc-btn.is-checking,
html .sf-primary.is-sending { position: relative; overflow: hidden; cursor: progress; opacity: .92; }
html .hc-btn.is-checking::after,
html .sf-primary.is-sending::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: fx-sheen 1s linear infinite;
}

/* Told before the pop-up opens: the daily limit, or an address that doesn't exist (decisions 41 and 50). */
html .hc-notice {
    margin: 12px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--db-line-2);
    border-radius: 16px;
    background: var(--db-bg-3);
    color: var(--db-ink-2);
    font-family: var(--db-f-ui);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    animation: fx-in .2s ease-out;
}
html .hc-notice strong { display: block; margin-bottom: 2px; color: var(--db-ink); font-weight: 600; }
html .hc-notice-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
html .hc-notice a {
    flex: none;
    padding: 9px 14px;
    border-radius: 11px;
    background: var(--db-ink);
    color: var(--db-bg);
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
}
html .hc-notice a:hover { opacity: .88; }
@media (max-width: 640px) { html .hc-notice-row { flex-direction: column; align-items: stretch; text-align: left; } html .hc-notice a { text-align: center; } }

/* "Other" with an optional line of their own words (decision 49). */
html .sf-other { margin-top: 10px; animation: fx-in .18s ease-out; }
html .sf-other[hidden] { display: none; }
html .sf-other label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--db-ink);
}
html .sf-other label small { font-weight: 400; color: var(--db-ink-3); font-size: inherit; }
html .sf-other input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--db-line-2);
    border-radius: 12px;
    background: var(--db-bg-3);
    color: var(--db-ink);
    font: inherit;
    font-size: 15px;
    outline: 0;
}
html .sf-other input::placeholder { color: var(--db-ink-3); }
html .sf-other input:focus { border-color: var(--db-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--db-focus) 22%, transparent); }

/* Booking: one person's real free times (decisions 43, 52-54). */
html .sf-with {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--db-ink-2);
}
html .sf-with b { color: var(--db-ink); font-weight: 600; }
html .sf-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--db-ink);
    color: var(--db-bg);
    font-size: 13px;
    font-weight: 700;
}
html .sf-more-times {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--db-ink-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
html .sf-more-times:hover { color: var(--db-ink); }
html .sf-slot-sheen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
html .sf-slot-sheen .fx-sheen { height: 44px; }
html .sf-slot-sheen .fx-sheen.fx-day { grid-column: 1 / -1; height: 14px; width: 84px; margin-top: 6px; }
html .sf-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--db-bg-3);
    color: var(--db-ink-2);
    font-size: 13.5px;
    line-height: 1.45;
}

/* The build's own parts: the thank-you's line while the scan's answer is awaited, the bot check's place, and a title
   only a screen reader hears. */
html .sf-line-sheen { width: 86%; height: 16px; margin-top: 12px; }
html .sf-turnstile:empty { display: none; }
html .sf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}