/* ==========================================================================
   HowlTicket — marketing site sample
   Night-forest design system derived from the badge logo + wolf/pine art:
   deep night navy, ember orange, moon gold, vintage cream.
   ========================================================================== */

:root {
    /* palette */
    --night-950: #0a0f1e;
    --night-900: #0d1424;
    --night-800: #121c33;
    --night-700: #182544;
    --surface: #152039;
    --surface-2: #1b2a4b;
    --line: rgba(243, 234, 214, 0.12);
    /* form-field boundary: cream at 42% over the field reads 3.18:1 against
       the --surface card and 3.61:1 against the field (WCAG 1.4.11) */
    --field-border: rgba(243, 234, 214, 0.42);
    --ember: #e8762e;
    --ember-bright: #f68d45;
    --ember-deep: #c75f1d;
    --moon: #f3c969;
    --cream: #f3ead6;
    --text: #e9edf6;
    --muted: #a7b2c9;
    --teal: #1b4a5e;

    /* light band */
    --paper: #f6efe0;
    --paper-ink: #221c12;
    --paper-muted: #5c5444;

    --radius: 14px;
    --radius-lg: 22px;
    --shadow: 0 10px 40px rgba(5, 8, 18, 0.45);
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--night-900);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img { max-width: 100%; }

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: 0.75rem;
    z-index: 100;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    background: var(--moon);
    color: var(--night-950);
    font-weight: 700;
    transform: translateY(-200%);
    transition: transform 0.15s ease;
}

.skip-link:focus { transform: none; color: var(--night-950); outline: 2px solid var(--ember); outline-offset: 2px; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    margin: 0 0 0.6em;
    color: var(--cream);
    letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

a { color: var(--ember-bright); text-decoration: none; }
a:hover { color: var(--moon); }

.container {
    width: min(1160px, 100% - 3rem);
    margin-inline: auto;
}

.narrow { width: min(820px, 100% - 3rem); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-ember {
    background: linear-gradient(160deg, var(--ember-bright), var(--ember-deep));
    color: #1c0f04;
    box-shadow: 0 6px 24px rgba(232, 118, 46, 0.35);
}

.btn-ember:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(232, 118, 46, 0.5);
    color: #1c0f04;
}

.btn-ghost {
    border-color: rgba(243, 234, 214, 0.4);
    color: var(--cream);
    background: transparent;
}

.btn-ghost:hover {
    border-color: var(--cream);
    background: rgba(243, 234, 214, 0.08);
    color: var(--cream);
    transform: translateY(-2px);
}

.btn-lg { padding: 1rem 2.1rem; font-size: 1.08rem; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 15, 30, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

/* full-bleed bar: brand pinned to the far left of the viewport, links to the far right */
.nav-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.4rem;
}

.nav-left { display: flex; align-items: center; gap: 0.75rem; }

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.18rem;
    color: #fff;
    letter-spacing: 0.02em;
}

.nav-brand img { width: 30px; height: 36px; }
.nav-brand .brand-text { white-space: nowrap; }
.nav-brand .accent { color: var(--ember); }
.nav-brand:hover { color: #fff; }

/* demo badge: a small tag hanging off the wordmark. The ::before extends the
   tap target to ~42px tall without making the pill itself look heavier. */
.nav-demo-badge {
    position: relative;
    display: inline-block;
    background: linear-gradient(160deg, var(--ember-bright), var(--ember-deep));
    color: #1c0f04;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(232, 118, 46, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-demo-badge::before {
    content: "";
    position: absolute;
    inset: -10px -4px;
}

.nav-demo-badge:hover {
    color: #1c0f04;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(232, 118, 46, 0.5);
}

/* desktop: links + CTAs share one row, pushed right */
.nav-menu {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 1rem;
    min-width: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    list-style: none;
    padding: 0;
}

.nav-links a {
    color: var(--muted);
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.97rem;
}

.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a[aria-current="page"] { background: rgba(243, 234, 214, 0.07); }

.nav-cta { display: flex; align-items: center; margin-left: 0.75rem; }

/* single outlined login button, sized to sit flush with the text links */
.nav-login {
    display: inline-block;
    border: 1px solid rgba(243, 234, 214, 0.45);
    border-radius: 8px;
    padding: 0.45rem 1.15rem;
    color: var(--cream);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-login:hover { background: rgba(243, 234, 214, 0.08); border-color: var(--cream); color: var(--cream); }

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--cream);
    font-size: 1.3rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--night-950);
        border-bottom: 1px solid var(--line);
        padding: 1rem 1.5rem 1.5rem;
    }
    .nav-menu.open { display: block; }
    .nav-links { flex-direction: column; align-items: stretch; margin: 0 0 1rem; }
    .nav-cta { flex-direction: column; align-items: stretch; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(100deg, rgba(10, 15, 30, 0.96) 0%, rgba(10, 15, 30, 0.82) 45%, rgba(13, 20, 36, 0.55) 100%),
        url("../images/wolf_bg.webp") right center / cover no-repeat;
    border-bottom: 1px solid var(--line);
}

/* The replica column gets the larger share and, on screens wider than the
   container, bleeds past its edge into the page margin (--media-bleed, kept 1rem
   clear of the viewport edge / scrollbar), so the app window shows its desktop
   layout. Text column stays >= 380px at 1280. */
.hero-inner,
.split {
    --media-bleed: clamp(0px, (100vw - 1160px) / 2 - 1rem, 140px);
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 3.5rem;
    align-items: center;
    padding: 5.5rem 0 5rem;
}

.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moon);
    margin-bottom: 1.1rem;
}

.hero h1 {
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    margin-bottom: 1rem;
}

.hero h1 em {
    font-style: italic;
    color: var(--ember-bright);
}

/* rotating hero word */
.word-rotate {
    display: inline-block;
    white-space: nowrap;
    transition: width 0.3s ease;
}

.word-rotate.out { animation: word-out 0.3s ease forwards; }
.word-rotate.in { animation: word-in 0.36s ease; }

@keyframes word-out {
    to { opacity: 0; transform: translateY(0.45em); filter: blur(5px); }
}

@keyframes word-in {
    from { opacity: 0; transform: translateY(-0.45em); filter: blur(5px); }
}

/* scroll reveal (class applied by js/site.js; without JS nothing is hidden) */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

@media print {
    .reveal { opacity: 1; transform: none; }
}

.hero .lede {
    font-size: 1.18rem;
    color: var(--muted);
    max-width: 34rem;
    margin-bottom: 1.8rem;
}

.hero .lede strong { color: var(--cream); font-weight: 600; }

.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 2.4rem; }

.stat-row {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 1.6rem;
}

.stat-row .stat b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.55rem;
    color: var(--cream);
    line-height: 1.1;
}

.stat-row .stat span { font-size: 0.88rem; color: var(--muted); }

@media (max-width: 960px) {
    .hero-inner { grid-template-columns: 1fr; padding: 3.5rem 0 3.5rem; }
    .hero { background:
        linear-gradient(180deg, rgba(10, 15, 30, 0.94), rgba(10, 15, 30, 0.9)),
        url("../images/wolf_bg.webp") center / cover no-repeat; }
}

/* --------------------------------------------------------------------------
   Product mock (CSS-drawn admin dashboard)
   -------------------------------------------------------------------------- */
.mock-window {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.mock-titlebar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: var(--night-950);
    border-bottom: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--muted);
}

.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: #2c3a5e; }
.mock-dot.ember { background: var(--ember); }
.mock-dot.moon { background: var(--moon); }

/* A window body is a real app screenshot (.device-browser img); the hero laptop
   holds the dashboard replica (.dash-mock). */

/* green check badge — the hero scan toast and the request-demo success state */
.scan-ok {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(121, 212, 155, 0.15);
    color: #79d49b;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Device frames — the living dashboard on a laptop, real app screenshots
   (images/app/*.webp) in browser and phone frames
   -------------------------------------------------------------------------- */
figure.mock-window, .device-laptop, .device-phone { margin: 0; }

.device-browser img {
    display: block;
    width: 100%;
    height: auto;
}

/* a laptop or browser with a phone resting on its lower corner */
.device-stack {
    position: relative;
    padding-bottom: 6%;
}

.device-laptop-screen {
    width: 90%;
    margin: 0 auto;
    padding: 1.6% 1.6% 2.4%;
    background: linear-gradient(180deg, #1c2233, #0b0f1a);
    border: 1px solid rgba(243, 234, 214, 0.16);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow);
}

.device-laptop-screen img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* marketing.js scales the dashboard to the screen; the padding box clips it */
.device-laptop-screen.is-fitted {
    box-sizing: content-box;
    overflow: hidden;
}

.device-laptop-screen.is-fitted > * { transform-origin: top left; }

.device-laptop-base {
    position: relative;
    height: 14px;
    background: linear-gradient(180deg, #59627a, #2b3246 55%, #1a1f2e);
    border-radius: 2px 2px 14px 14px / 2px 2px 10px 10px;
    box-shadow: 0 18px 30px rgba(5, 8, 18, 0.55);
}

.device-laptop-base::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 16%;
    height: 5px;
    transform: translateX(-50%);
    background: #1a1f2e;
    border-radius: 0 0 8px 8px;
}

/* the frame hugs the screenshot: a thin rim, no inner bezel to show black */
.device-phone {
    position: relative;
    width: 100%;
    max-width: 280px;
    border: 1px solid rgba(243, 234, 214, 0.3);
    border-radius: 12% / 5.6%;
    box-shadow: 0 0 0 4px #1b2233, var(--shadow);
    overflow: hidden;
}

.device-phone img {
    display: block;
    width: 100%;
    height: auto;
}

.device-stack .device-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28%;
}

.split .device-stack .device-phone { width: 30%; right: -3%; }
.split .device-stack.phone-left .device-phone { right: auto; left: -3%; }

/* hero: the laptop sits left so the phone only clips the screen's edge,
   and the scan toast pops on the laptop's base, clear of the queue rows */
.hero-stack { padding-bottom: 3.5rem; min-width: 0; }
.hero-stack .device-laptop { width: 84%; }
.hero-stack .device-phone { width: 26%; }

.mock-float {
    position: absolute;
    left: 2%;
    bottom: 0;
    z-index: 2;
    background: var(--night-950);
    border: 1px solid rgba(232, 118, 46, 0.45);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.88rem;
}

.mock-float b { display: block; color: var(--cream); font-size: 0.92rem; }
.mock-float span { color: var(--muted); font-size: 0.78rem; }

/* bigger mocks: give the media column the larger share */
@media (min-width: 961px) {
    .hero-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; }
}

@media (min-width: 901px) {
    .split.showcase { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; }
    .split.showcase.reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

/* wide screens: let the devices run past the text column into the margin */
@media (min-width: 1360px) {
    .hero-stack { margin-right: -90px; }
    .split.showcase .split-media { margin-right: -80px; }
    .split.showcase.reverse .split-media { margin-right: 0; margin-left: -80px; }
}

@media (max-width: 960px) {
    .hero-stack .device-laptop { width: 86%; }
    .hero-stack .device-phone { width: 30%; }
}

/* phones: a smaller toast still fits on the laptop base, clear of the phone */
@media (max-width: 600px) {
    .hero-stack { padding-bottom: 2.6rem; }
    .mock-float { padding: 0.5rem 0.7rem; gap: 0.55rem; }
    .mock-float .scan-ok { width: 26px; height: 26px; font-size: 0.9rem; }
    .mock-float b { font-size: 0.8rem; }
    .mock-float span { font-size: 0.7rem; }
}

@media (max-width: 900px) {
    .split .device-stack .device-phone { right: 0; }
    .split .device-stack.phone-left .device-phone { left: 0; }
}

/* preview controls above a mock — the light/dark switch and the booking page's
   Customize button (Pages/Shared/_MockThemeToggle, _MockLookPicker) */
.mock-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.8rem;
}

.mock-controls[hidden] { display: none; }
.split.reverse .mock-controls { justify-content: flex-start; }

.mock-toggle {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(10, 15, 30, 0.72);
}

.mock-toggle button,
.mock-customize {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    background: transparent;
    color: var(--muted);
    font: 600 0.8rem/1 var(--font-body);
    cursor: pointer;
}

.mock-toggle .ai,
.mock-customize .ai { width: 0.95em; height: 0.95em; }

.mock-toggle button:hover { color: var(--cream); }
.mock-toggle button[aria-pressed="true"] { background: var(--ember); color: #1a1208; }

.mock-customize {
    border: 1px solid var(--line);
    background: rgba(10, 15, 30, 0.72);
    color: var(--cream);
}

.mock-customize:hover { border-color: rgba(232, 118, 46, 0.6); }
.mock-customize .ai { color: var(--ember); }
.mock-look-name { color: var(--moon); }
.mock-look-name:not(:empty)::before { content: "· "; color: var(--muted); }

.mock-toggle button:focus-visible,
.mock-customize:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }

/* the swapped image fades in once it has loaded */
[data-mock-theme] img, [data-looks] img { transition: opacity 0.2s ease; }
img.is-swapping { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
    [data-mock-theme] img, [data-looks] img { transition: none; }
}

@media (max-width: 480px) {
    .btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: 5.5rem 0; }

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }

.section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.section-head p { color: var(--muted); font-size: 1.1rem; }

.band-darker { background: var(--night-950); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.band-pine {
    background:
        linear-gradient(180deg, rgba(10, 15, 30, 0.9), rgba(10, 15, 30, 0.82)),
        url("../images/pine_band.webp") center / cover no-repeat;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* logo / trust strip */
/* One thin band: the label stays put, the venue logo slots loop beside it.
   The track holds two copies of the set and slides exactly one set-width,
   so the loop has no visible seam however many venues are listed. */
.trust-strip {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    background: var(--night-950);
}

.trust-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    color: var(--muted);
}

.trust-label { flex: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; }

.trust-marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.trust-track {
    display: flex;
    width: max-content;
    animation: trust-scroll 34s linear infinite;
}

.trust-marquee:hover .trust-track { animation-play-state: paused; }

.trust-set { display: flex; gap: 1.25rem; padding-right: 1.25rem; }

/* a fixed-size slot per venue: a logo <img> drops in without moving the row */
.trust-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 9.5rem;
    height: 2.75rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(243, 234, 214, 0.03);
    font-family: var(--font-display);
    font-size: 0.88rem;
    line-height: 1.1;
    text-align: center;
    color: rgba(243, 234, 214, 0.65);
}

.trust-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

@keyframes trust-scroll {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .trust-track { animation: none; }
}

/* feature cards */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.7rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.card:hover { transform: translateY(-5px); border-color: rgba(232, 118, 46, 0.5); }

.card h3 { font-size: 1.28rem; margin-bottom: 0.45rem; }
.card p { color: var(--muted); font-size: 0.98rem; margin: 0; }

/* vertical cards */
.vert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }

@media (max-width: 1000px) { .vert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vert-grid { grid-template-columns: 1fr; } }

.vert-card {
    background: linear-gradient(170deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem;
}

.vert-card h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.vert-card p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.vert-card .glyph { font-size: 1.6rem; margin-bottom: 0.8rem; display: block; }

/* cards with a banner across the top: the art bleeds to the card's edges
   and the text keeps the old padding underneath it */
.vert-card.has-art { padding: 0; overflow: hidden; }
.vert-art {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    height: auto;
    object-fit: cover;
    border-bottom: 1px solid var(--line);
}
.vert-body { padding: 1.1rem 1.5rem 1.6rem; }

/* --------------------------------------------------------------------------
   Feature catalog (Features #everything) + integrations strip + "see everything" links
   -------------------------------------------------------------------------- */
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }

@media (max-width: 1100px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .catalog-grid { grid-template-columns: minmax(0, 1fr); } }

.catalog-card { padding: 1.6rem 1.5rem; }
.catalog-card:hover { transform: none; }

.catalog-card h3 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.22rem; margin-bottom: 0.7rem; }

.catalog-card h3 .ai {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    fill: currentColor;
    color: var(--ember-bright);
}

.catalog-card > p { font-size: 0.97rem; line-height: 1.65; }

.integration-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 60rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem 0.8rem;
}

.integration-list li {
    padding: 0.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--night-950);
    font-family: var(--font-display);
    color: rgba(243, 234, 214, 0.82);
    white-space: nowrap;
}

.catalog-more { margin: 2.2rem 0 0; text-align: center; font-weight: 600; }
.catalog-more a::after { content: " \2192"; }

/* split feature rows */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.split + .split { margin-top: 5rem; }

/* Side by side: the replica column is the wider one and bleeds outward (right,
   or left on .reverse rows) by --media-bleed (see .hero-inner). */
@media (min-width: 901px) {
    .split { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
    .split.reverse { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
    .split .split-media { margin-right: calc(-1 * var(--media-bleed)); }
    .split.reverse .split-media { margin-right: 0; margin-left: calc(-1 * var(--media-bleed)); }
}

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; gap: 2rem; }
    .split.reverse .split-media { order: -1; }
}

.split h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.split p { color: var(--muted); }

.split ul { list-style: none; padding: 0; margin: 1.2rem 0 0; }

.split ul li {
    padding-left: 1.7rem;
    position: relative;
    margin-bottom: 0.65rem;
    color: var(--text);
}

.split ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.5em;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--ember-bright);
}

.split ul li span { color: var(--muted); }

.code-chip {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.85rem;
    background: var(--night-950);
    border: 1px solid var(--line);
    color: var(--moon);
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    margin-top: 1.1rem;
}

/* promise band */
.promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }

@media (max-width: 1000px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .promise-grid { grid-template-columns: 1fr; } }

.promise-item {
    border-left: 3px solid var(--ember);
    padding: 0.2rem 0 0.2rem 1.1rem;
}

.promise-item b { display: block; color: var(--cream); font-size: 1.05rem; margin-bottom: 0.2rem; }
.promise-item p { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* big quote */
.big-quote {
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
}

.big-quote blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-style: italic;
    color: var(--cream);
    line-height: 1.35;
    margin: 0 0 1.2rem;
}

.big-quote blockquote .hl { color: var(--ember-bright); }

.big-quote cite { color: var(--muted); font-style: normal; font-size: 0.98rem; }

/* testimonial cards */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }

@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }

.quote-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.7rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quote-card p { color: var(--text); font-size: 1rem; margin: 0; flex: 1; }
.quote-card p::before { content: "\201C"; color: var(--ember-bright); font-family: var(--font-display); font-size: 1.4rem; margin-right: 0.15rem; }
.quote-card cite { color: var(--muted); font-style: normal; font-size: 0.9rem; font-weight: 600; }

/* comparison */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.compare-wrap { border-radius: var(--radius-lg); overflow-x: auto; border: 1px solid var(--line); }
.compare-table { min-width: 560px; }

.compare-table th, .compare-table td {
    padding: 0.85rem 1.2rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 0.97rem;
}

.compare-table th { background: var(--night-950); color: var(--cream); font-family: var(--font-display); font-size: 1.02rem; }
.compare-table td:first-child { color: var(--text); }
.compare-table td { color: var(--muted); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .yes { color: #79d49b; font-weight: 600; }
.compare-table .no { color: #e08484; }

.compare-note { color: var(--muted); font-size: 0.86rem; text-align: center; margin: 1rem 0 0; }

/* phones: each row becomes a card — feature name, then both values labelled */
@media (max-width: 640px) {
    .compare-wrap { border: none; border-radius: 0; overflow: visible; }
    .compare-table { min-width: 0; border: none; border-radius: 0; background: none; overflow: visible; }
    .compare-table thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; }
    .compare-table tr {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 0.9rem 1.1rem;
        margin-bottom: 0.8rem;
    }
    .compare-table td { padding: 0.35rem 0; border-bottom: none; }
    .compare-table td:first-child { font-family: var(--font-display); font-weight: 600; color: var(--cream); font-size: 1.05rem; padding-top: 0; }
    .compare-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
    }
}

/* pricing */
.price-hero { text-align: center; padding: 5rem 0 3.5rem; }

.price-big {
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 11vw, 8rem);
    line-height: 1;
    color: var(--cream);
    margin: 0.5rem 0 0.2rem;
    /* it is the page h1: undo the heading weight/tracking so it renders as before */
    font-weight: 400;
    letter-spacing: normal;
}

.price-big sup { font-size: 0.35em; color: var(--ember-bright); top: -1.4em; }

.price-sub { color: var(--muted); font-size: 1.15rem; max-width: 34rem; margin: 0.6rem auto 2rem; }

.price-points {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.4rem;
}

.price-point {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
    font-size: 0.92rem;
    color: var(--text);
}

.price-point b { color: var(--moon); }

/* worked example — a cream receipt card on the dark band */
.example-card {
    background: #fffdf7;
    border: 1px solid #e2d8c0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem 2.2rem;
}

.example-card table { width: 100%; border-collapse: collapse; }

.example-card td {
    padding: 0.55rem 0;
    border-bottom: 1px dashed #e2d8c0;
    color: var(--paper-ink);
    font-size: 1rem;
}

.example-card td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.example-card tr.total td { border-bottom: none; font-family: var(--font-display); font-size: 1.2rem; padding-top: 0.9rem; }
.example-card tr.total td:last-child { color: var(--ember-deep); }
.example-card .fine { color: var(--paper-muted); font-size: 0.86rem; margin: 1rem 0 0; }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; }

.faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 0.8rem;
    padding: 0 1.3rem;
}

.faq summary {
    cursor: pointer;
    padding: 1.05rem 0;
    font-weight: 600;
    color: var(--cream);
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

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

.faq summary::after {
    content: "+";
    position: absolute;
    right: 0.2rem;
    color: var(--ember-bright);
    font-size: 1.3rem;
    line-height: 1;
}

.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); padding-bottom: 1.1rem; margin: 0; }

/* CTA band — warms toward ember dawn: the page's night is ending */
.cta-band {
    text-align: center;
    background:
        linear-gradient(180deg, rgba(10, 15, 30, 0.9), rgba(52, 27, 11, 0.72)),
        url("../images/pine_band.webp") center 70% / cover no-repeat;
    border-top: 1px solid var(--line);
    padding: 5.5rem 0;
}

.cta-band h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.cta-band p { color: var(--muted); max-width: 32rem; margin: 0 auto 2rem; font-size: 1.12rem; }

/* --------------------------------------------------------------------------
   Demo request layout
   -------------------------------------------------------------------------- */
/* markup order is intro, form, details so phones get the form right after
   the lede; on desktop the form spans both rows of the right column */
.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro form" "details form";
    gap: 0 4rem;
    align-items: start;
}

.demo-intro { grid-area: intro; }
.demo-grid > .form-card { grid-area: form; }
.demo-details { grid-area: details; }

.demo-grid h1 { font-size: clamp(2rem, 3.5vw, 2.8rem); }

@media (max-width: 900px) {
    .demo-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "intro" "form" "details"; gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Forms (demo request)
   -------------------------------------------------------------------------- */
.form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2.2rem;
    box-shadow: var(--shadow);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field.full { grid-column: 1 / -1; }

.field label { font-size: 0.88rem; font-weight: 600; color: var(--cream); }

.field input, .field select, .field textarea {
    background: var(--night-900);
    border: 1px solid var(--field-border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    color: var(--text);
    font-family: inherit;
    font-size: 0.98rem;
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--ember);
    outline-offset: 1px;
    border-color: transparent;
}

.field ::placeholder { color: #5f6b85; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
    background: var(--night-950);
    border-top: 1px solid var(--line);
    padding: 3.5rem 0 2.5rem;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.footer-brand p { color: var(--muted); max-width: 20rem; font-size: 0.92rem; }

/* footer column labels are <p class="footer-heading"> (no heading level to skip) */
.footer-heading { line-height: 1.12; margin: 0 0 0.6em; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-family: var(--font-body); font-weight: 700; }

footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin-bottom: 0.55rem; }
footer ul a { color: var(--text); font-size: 0.95rem; }

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 1.6rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.86rem;
}

/* --------------------------------------------------------------------------
   Page headers (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
    padding: 4.5rem 0 3.5rem;
    background:
        linear-gradient(180deg, rgba(10, 15, 30, 0.92), rgba(13, 20, 36, 0.97)),
        url("../images/pine_band.webp") center 30% / cover no-repeat;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.page-head h1 { font-size: clamp(2.2rem, 4vw, 3.1rem); margin-bottom: 0.5rem; }
.page-head h1 em { font-style: italic; color: var(--ember-bright); }
.page-head p { color: var(--muted); font-size: 1.15rem; max-width: 40rem; margin: 0 auto; }

/* prose (promise/about body) */
.prose h2 { font-size: 1.6rem; margin-top: 2.6rem; }
.prose p, .prose li { color: var(--muted); }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--cream); }

.tldr {
    background: var(--surface);
    border: 1px solid rgba(232, 118, 46, 0.4);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.8rem;
    margin-top: 3rem;
}

.tldr h2 { margin-top: 0; font-size: 1.3rem; }
.tldr ul { margin: 0; padding-left: 1.2rem; }
.tldr li { color: var(--text); margin-bottom: 0.35rem; }

/* --------------------------------------------------------------------------
   Small-screen rhythm — tighten the desktop-scale vertical spacing
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .section { padding: 3.5rem 0; }
    .section-head { margin-bottom: 2rem; }
    .split + .split { margin-top: 3rem; }
    .cta-band { padding: 4rem 0; }
    .page-head { padding: 3rem 0 2.5rem; }
    .price-hero { padding: 3.5rem 0 2.5rem; }
    .trust-inner { gap: 1.2rem; }
    .trust-label { font-size: 0.7rem; }
    .trust-logo { width: 8rem; height: 2.4rem; font-size: 0.8rem; }
    .trust-set { gap: 1rem; padding-right: 1rem; }
    .example-card { padding: 1.4rem 1.2rem; }
    .form-card { padding: 1.5rem 1.2rem; }
    footer { padding: 2.5rem 0 2rem; }
}

@media (max-width: 480px) {
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn { text-align: center; }
    .stat-row { gap: 1.2rem 2rem; }
}

/* --------------------------------------------------------------------------
   Night ambience — drifting fog and wolf eyes on the forest bands
   -------------------------------------------------------------------------- */
.band-pine, .cta-band, .page-head { position: relative; overflow: hidden; }
.band-pine > .container, .cta-band > .container, .page-head > .container { position: relative; z-index: 1; }

.band-pine::after, .cta-band::after, .page-head::after {
    content: "";
    position: absolute;
    inset: -25% -30%;
    background:
        radial-gradient(48% 34% at 16% 70%, rgba(243, 234, 214, 0.17), transparent 68%),
        radial-gradient(42% 30% at 80% 28%, rgba(243, 234, 214, 0.12), transparent 68%),
        radial-gradient(30% 22% at 48% 90%, rgba(167, 178, 201, 0.12), transparent 70%);
    /* the radial falloffs already do most of the softening; a smaller blur on
       its own compositor layer keeps the look at a fraction of the paint cost */
    filter: blur(18px);
    will-change: transform;
    animation: fog-drift 38s ease-in-out infinite alternate;
    pointer-events: none;
}

/* js/site.js adds .fog-paused while a band is off-screen */
.fog-paused::after, .fog-paused .wolf-eyes { animation-play-state: paused; }

@keyframes fog-drift {
    from { transform: translateX(-8%); }
    to { transform: translateX(8%); }
}

.wolf-eyes {
    position: absolute;
    width: 34px;
    height: 11px;
    opacity: 0;
    z-index: 1; /* above the fog layer, below nothing interactive */
    pointer-events: none;
    animation: eyes-appear 26s ease-in-out infinite;
}

.wolf-eyes::before, .wolf-eyes::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe3a6 0%, var(--ember-bright) 55%, transparent 80%);
    box-shadow: 0 0 14px rgba(246, 141, 69, 0.95);
}

.wolf-eyes::before { left: 0; }
.wolf-eyes::after { right: 0; }

@keyframes eyes-appear {
    0%, 76% { opacity: 0; transform: scaleY(1); }
    80%, 85% { opacity: 1; transform: scaleY(1); }
    87% { opacity: 1; transform: scaleY(0.1); } /* blink */
    89%, 95% { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .band-pine::after, .cta-band::after, .page-head::after { animation: none; }
    .wolf-eyes { display: none; }
}

/* --------------------------------------------------------------------------
   Hero dashboard mock (.dash-mock) — a replica of the portal dashboard in dark mode, laid out at
   1000px and scaled to the laptop screen by marketing.js. Colours, radii and
   type sizes are the app's own computed values (dashboard.css, dark theme).
   -------------------------------------------------------------------------- */
.dash-mock {
    --dm-bg: #0e1218;
    --dm-raised: #151b23;
    --dm-line: rgba(255, 255, 255, 0.07);
    --dm-text: #e6edf5;
    --dm-muted: #94a3b8;
    --dm-accent: #e88634;
    --dm-top: linear-gradient(90deg, #0b0d11, #17130f 70%, #0b0d11);
    --dm-field: #12161d;
    --dm-field-line: #2a323e;
    --dm-chip: #151b23;
    --dm-chip-text: #c9d1dc;
    --dm-select-line: #3a4352;
    --dm-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --dm-card-line: rgba(255, 255, 255, 0.04);
    --dm-count-bg: #1d2430;
    --dm-count-text: #b9c4d3;
    --dm-bad: #f87171;
    display: flex;
    width: 1000px;
    background: var(--dm-bg);
    color: var(--dm-text);
    font: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    text-align: left;
    border-radius: 4px;
    overflow: hidden;
}

.dash-mock .ai { width: 1em; height: 1em; flex: none; }
.dash-mock b, .dash-mock strong { font-weight: 600; }

.dm-rail {
    flex: none;
    width: 68px;
    padding: 10px 6px;
    background: #050608;
    border-right: 1px solid var(--dm-line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 0 6px;
    border-radius: 10px;
    font-size: 10px;
    color: #c9d1dc;
}

.dm-rail-item .ai { font-size: 19px; }
.dm-rail-item.active { background: rgba(232, 134, 52, 0.18); color: var(--dm-accent); }

.dm-main { flex: 1; min-width: 0; }

.dm-top {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--dm-line);
    background: var(--dm-top);
}

.dm-title { display: flex; flex-direction: column; margin-right: 10px; }
.dm-title b { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.dm-title span { font-size: 12px; color: var(--dm-muted); }

.dm-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid var(--dm-field-line);
    border-radius: 999px;
    background: var(--dm-field);
    color: var(--dm-muted);
    font-size: 13px;
    margin-right: 8px;
}

.dm-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    font-size: 15px;
}

.dm-btn.ember { background: #e8862f; color: #1a1a1a; }
.dm-btn.round { border-radius: 50%; background: var(--dm-chip); border: 1px solid var(--dm-field-line); color: var(--dm-chip-text); }

.dm-dot {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 16px; height: 16px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font: 700 10px/16px system-ui, sans-serif;
    text-align: center;
}

.dm-user {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--dm-field-line);
    border-radius: 6px;
    font-size: 13px;
}

.dm-user .ai { font-size: 15px; }

.dm-content { padding: 16px 20px 18px; }

.dm-welcome { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dm-welcome b { display: block; font-size: 17px; font-weight: 700; }
.dm-welcome span { font-size: 12px; color: var(--dm-muted); }

.dm-select {
    width: 170px;
    padding: 6px 10px;
    border: 1px solid var(--dm-select-line);
    border-radius: 4px;
    font-size: 12px;
    color: var(--dm-text) !important;
}

.dm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }

.dm-card {
    padding: 12px;
    border-radius: 12px;
    background: var(--dm-bg);
    box-shadow: var(--dm-card-shadow);
    border: 1px solid var(--dm-card-line);
}

.dm-card-head { display: flex; align-items: center; gap: 9px; color: var(--dm-muted); font-size: 13px; font-weight: 600; margin-bottom: 8px; }

.dm-card-icon {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(232, 134, 52, 0.15);
    color: var(--dm-accent);
    font-size: 16px;
}

.dm-card > b { display: block; font-size: 23px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dm-card-label { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dm-muted); }

.dm-card-alltime {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--dm-line);
    font-size: 11px;
    color: var(--dm-muted);
}

.dm-card-alltime b { font-size: 14px; color: var(--dm-text); margin-right: 2px; }
.dm-spark { display: block; width: 76px; height: 22px; margin-top: 6px; }
.dm-spark polyline { fill: none; stroke: var(--dm-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }

.dm-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--dm-bg);
    border: 1px solid var(--dm-line);
    font-size: 12px;
}

.dm-actions b { display: flex; align-items: center; gap: 6px; margin-right: 8px; font-size: 13px; }
.dm-actions b .ai { color: var(--dm-accent); }
.dm-actions span { padding: 5px 10px; border: 1px solid var(--dm-field-line); border-radius: 6px; color: var(--dm-chip-text); }

.dm-lower { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 12px; align-items: start; }

.dm-panel {
    border-radius: 12px;
    background: var(--dm-bg);
    border: 1px solid var(--dm-line);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.dm-panel-head { display: flex; align-items: center; gap: 4px; padding: 11px 14px; border-bottom: 1px solid var(--dm-line); }
.dm-panel-head b { font-size: 15px; margin-right: auto; }

.dm-tab { padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--dm-muted); }
.dm-tab.active { background: rgba(232, 134, 52, 0.15); color: #d87a2f; font-weight: 600; }

/* fixed height: rows come and go without the laptop screen changing size */
.dm-queue-list { height: 300px; overflow: hidden; }

.dm-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: var(--dm-raised);
    font-size: 12.5px;
    font-weight: 600;
}

.dm-group-head > span:first-child { margin-right: auto; }
.dm-group-time { font-size: 11px; font-weight: 400; color: var(--dm-muted); }
.dm-count { padding: 1px 7px; border-radius: 4px; background: var(--dm-count-bg); color: var(--dm-count-text); font-size: 11px; font-weight: 700; }

.dm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-top: 1px solid var(--dm-line);
}

.dm-row.late { background: rgba(239, 68, 68, 0.05); }
.dm-row.checked { opacity: 0.6; }
.dm-row.row-enter { animation: row-in 0.45s ease; }

.dm-who { flex: 1; min-width: 0; }
.dm-who strong { font-size: 13px; font-weight: 700; margin-right: 7px; }
.dm-ref { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dm-muted); }
.dm-party { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dm-muted); }

.dm-badges { display: flex; gap: 5px; }

.dm-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.4px;
    font-weight: 600;
}

.dm-badge.ok { background: rgba(34, 197, 94, 0.1); color: #10b981; }
.dm-badge.warn { background: rgba(234, 179, 8, 0.1); color: #f59e0b; }
.dm-badge.bad { background: rgba(239, 68, 68, 0.1); color: var(--dm-bad); }
.dm-badge.late { background: rgba(239, 68, 68, 0.15); color: var(--dm-bad); }

.dm-checkin {
    display: grid;
    place-items: center;
    width: 32px; height: 30px;
    border-radius: 8px;
    background: #e8862f;
    color: #1a1a1a;
    font-size: 14px;
}

.dm-checked { display: grid; place-items: center; width: 32px; color: #10b981; font-size: 16px; }

.dm-comment { padding: 10px 14px; border-top: 1px solid var(--dm-line); font-size: 12px; }
.dm-comment:first-of-type { border-top: 0; }
.dm-comment strong { display: block; font-weight: 600; margin-bottom: 2px; }
.dm-comment span { color: var(--dm-muted); font-size: 11px; }

/* light mode — the app's light-theme computed values; the rail stays dark, as it does in the app */
[data-mock-theme="light"] .dash-mock {
    --dm-bg: #ffffff;
    --dm-raised: #faf8f4;
    --dm-line: rgba(0, 0, 0, 0.08);
    --dm-text: #1a1a1a;
    --dm-muted: #6f665b;
    --dm-top: linear-gradient(90deg, #ffffff, #fbefe2 70%, #ffffff);
    --dm-field: #ffffff;
    --dm-field-line: #e3ddd3;
    --dm-chip: #ffffff;
    --dm-chip-text: #3d3830;
    --dm-select-line: #cfc8bd;
    --dm-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    --dm-card-line: rgba(0, 0, 0, 0.05);
    --dm-count-bg: #6c757d;
    --dm-count-text: #ffffff;
    --dm-bad: #ef4444;
}

[data-mock-theme="light"] .dash-mock .dm-btn.ember,
[data-mock-theme="light"] .dash-mock .dm-checkin { color: #ffffff; }

/* --------------------------------------------------------------------------
   Living dashboard — queue rows slide in, toast pops
   -------------------------------------------------------------------------- */

@keyframes row-in {
    from { opacity: 0; transform: translateY(-8px); }
}

.mock-float.pop { animation: toast-pop 0.4s ease; }

@keyframes toast-pop {
    from { transform: scale(0.92); opacity: 0.4; }
}

/* --------------------------------------------------------------------------
   Ticket-stub CTA
   -------------------------------------------------------------------------- */
.ticket-cta {
    position: relative;
    display: inline-block;
    color: var(--cream);
    text-align: left;
    filter: drop-shadow(0 8px 18px rgba(232, 118, 46, 0.35));
    transition: transform 0.15s ease, filter 0.15s ease;
}

.ticket-cta:hover {
    transform: translateY(-2px) rotate(-0.5deg);
    color: var(--cream);
    filter: drop-shadow(0 12px 28px rgba(232, 118, 46, 0.55));
}

/* Notched corners like a punched ticket. The "border" is a 3px ember layer
   (.ticket-body) masked with circle notches at its corners; the dark face
   (.ticket-inner) sits 3px inside, masked with the SAME circles (3px larger,
   centered on the outer corners), so an ember rim traces the concave arcs. */
.ticket-body {
    display: inline-flex;
    padding: 3px;
    background: linear-gradient(160deg, var(--ember-bright), var(--ember-deep));
    -webkit-mask:
        radial-gradient(circle 11px at 0 0, transparent 11px, #000 12px) 0 0 / 51% 51% no-repeat,
        radial-gradient(circle 11px at 100% 0, transparent 11px, #000 12px) 100% 0 / 51% 51% no-repeat,
        radial-gradient(circle 11px at 0 100%, transparent 11px, #000 12px) 0 100% / 51% 51% no-repeat,
        radial-gradient(circle 11px at 100% 100%, transparent 11px, #000 12px) 100% 100% / 51% 51% no-repeat;
    mask:
        radial-gradient(circle 11px at 0 0, transparent 11px, #000 12px) 0 0 / 51% 51% no-repeat,
        radial-gradient(circle 11px at 100% 0, transparent 11px, #000 12px) 100% 0 / 51% 51% no-repeat,
        radial-gradient(circle 11px at 0 100%, transparent 11px, #000 12px) 0 100% / 51% 51% no-repeat,
        radial-gradient(circle 11px at 100% 100%, transparent 11px, #000 12px) 100% 100% / 51% 51% no-repeat;
}

.ticket-inner {
    display: inline-flex;
    align-items: stretch;
    background: linear-gradient(160deg, #161d31, #0a0f1e);
    -webkit-mask:
        radial-gradient(circle 14px at -3px -3px, transparent 14px, #000 15px) 0 0 / 51% 51% no-repeat,
        radial-gradient(circle 14px at calc(100% + 3px) -3px, transparent 14px, #000 15px) 100% 0 / 51% 51% no-repeat,
        radial-gradient(circle 14px at -3px calc(100% + 3px), transparent 14px, #000 15px) 0 100% / 51% 51% no-repeat,
        radial-gradient(circle 14px at calc(100% + 3px) calc(100% + 3px), transparent 14px, #000 15px) 100% 100% / 51% 51% no-repeat;
    mask:
        radial-gradient(circle 14px at -3px -3px, transparent 14px, #000 15px) 0 0 / 51% 51% no-repeat,
        radial-gradient(circle 14px at calc(100% + 3px) -3px, transparent 14px, #000 15px) 100% 0 / 51% 51% no-repeat,
        radial-gradient(circle 14px at -3px calc(100% + 3px), transparent 14px, #000 15px) 0 100% / 51% 51% no-repeat,
        radial-gradient(circle 14px at calc(100% + 3px) calc(100% + 3px), transparent 14px, #000 15px) 100% 100% / 51% 51% no-repeat;
}

.ticket-cta:hover .ticket-body { background: var(--ember-bright); }

.ticket-qr {
    display: flex;
    align-items: center;
    padding: 0.7rem 0 0.7rem 0.9rem;
}

.ticket-qr img {
    display: block;
    width: 58px;
    height: 58px;
    background: #fffdf7;
    border-radius: 7px;
    padding: 4px;
}

.ticket-main { padding: 0.9rem 1.5rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.15rem; justify-content: center; }
.ticket-main b { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.08em; color: var(--moon); }
.ticket-main span { font-size: 0.82rem; color: var(--muted); }

.ticket-stub {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    border-left: 2px dashed rgba(243, 201, 105, 0.45);
    font-weight: 800;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    color: var(--ember-bright);
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.ticket-cta.torn .ticket-stub { transform: translateX(28px) rotate(16deg); opacity: 0; }

/* --------------------------------------------------------------------------
   Pricing calculator
   -------------------------------------------------------------------------- */
.calc-controls {
    display: flex;
    gap: 2rem 3rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.8rem;
}

.calc-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--text);
    min-width: 230px;
    font-size: 0.95rem;
}

.calc-controls output { font-family: var(--font-display); font-size: 1.35rem; color: var(--moon); }
.calc-controls input[type="range"] { accent-color: var(--ember); cursor: pointer; }

/* #a94e14 on the #fffdf7 receipt = 5.45:1 (the old --ember-deep was 4.06:1) */
.calc-savings { margin: 1rem 0 0; font-weight: 600; color: #a94e14; font-size: 0.95rem; }

/* ==========================================================================
   BusinessPortal additions (not in the design sample)
   Long-form prose for the legal/support pages, the server-rendered demo
   form's states, and the TL;DR jump button.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Long-form prose — privacy, terms, cookies, SMS consent, support
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.narrow.prose { max-width: min(820px, 100% - 3rem); }

.prose h2 { scroll-margin-top: 5.5rem; }
.prose h3 { font-size: 1.22rem; margin-top: 2rem; }
.prose h4 { font-size: 1.05rem; margin-top: 1.6rem; font-family: var(--font-body); font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li > ul, .prose li > ol { margin: 0.4rem 0 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose em { color: var(--text); }

.prose code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.88em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.08em 0.4em;
    color: var(--cream);
    word-break: break-word;
}

.prose blockquote {
    margin: 1.5rem 0;
    padding: 1.1rem 1.4rem;
    background: var(--surface);
    border-left: 4px solid var(--ember);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text);
}

/* tables scroll sideways on phones instead of widening the page */
.prose .table-scroll { overflow-x: auto; margin: 0 0 1.5rem; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    margin: 0 0 1.5rem;
}
.prose .table-scroll table { margin: 0; min-width: 32rem; }
.prose th, .prose td {
    text-align: left;
    vertical-align: top;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}
.prose th { color: var(--cream); font-weight: 700; background: var(--surface); }

.legal-meta { color: var(--muted); font-size: 0.98rem; margin: 0 auto; }

.legal-toc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.6rem;
    margin: 0 0 2.5rem;
}
.legal-toc-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 0.6rem;
}
.legal-toc ul { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 2rem; }
.legal-toc li { margin-bottom: 0.35rem; break-inside: avoid; }
.legal-toc a { text-decoration: none; }

.contact-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.5rem;
    margin: 0 0 1.5rem;
}
.contact-box p { margin: 0 0 0.3rem; }
.contact-box p:last-child { margin: 0; }

.prose-note { font-size: 0.9rem; }

.callout {
    background: var(--surface);
    border: 1px solid rgba(232, 118, 46, 0.4);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    margin: 0 0 1.5rem;
    color: var(--text);
}

/* SMS consent: business identity table, numbered opt-in flow, sample texts */
.info-table td:first-child { color: var(--cream); font-weight: 600; width: 38%; }

.flow-step {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
    margin-bottom: 1rem;
}
.flow-step-num {
    flex-shrink: 0;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--ember-bright), var(--ember-deep));
    color: #1c0f04;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flow-step h3 { margin: 0.15rem 0 0.5rem; font-size: 1.12rem; }
.flow-step p:last-child { margin-bottom: 0; }

.sample-message {
    background: var(--surface);
    border-left: 4px solid var(--moon);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.5rem; }
.two-col > .card:hover { transform: none; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

.figure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.figure-grid figure { margin: 0; text-align: center; }
.figure-grid img { border-radius: var(--radius); box-shadow: var(--shadow); height: auto; }
.figure-grid figcaption { color: var(--muted); font-size: 0.92rem; margin-top: 0.8rem; }
@media (max-width: 720px) { .figure-grid { grid-template-columns: 1fr; } }

/* Support page contact cards */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 820px; margin-inline: auto; }
.contact-grid .card { text-align: center; }
.contact-grid .card .btn { margin-top: 1.2rem; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }

.faq details > div { color: var(--muted); padding-bottom: 1.1rem; }

/* --------------------------------------------------------------------------
   TL;DR summary card + floating jump button (legal pages)
   -------------------------------------------------------------------------- */
.tldr-card { margin-top: 0; scroll-margin-top: 2rem; }
.tldr-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #1c0f04;
    background: var(--moon);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    margin-bottom: 0.8rem;
}
.tldr-subtitle { color: var(--muted); }
.tldr-card ul.tldr-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.tldr-list li { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.7rem; }
.tldr-check { color: var(--ember-bright); font-weight: 800; line-height: 1.65; flex-shrink: 0; }
.tldr-disclaimer { color: var(--muted); font-size: 0.88rem; margin: 0; }

.tldr-fab {
    position: fixed;
    left: 1.1rem;
    bottom: 1.1rem;
    z-index: 40;
    background: var(--surface-2);
    color: var(--cream);
    border: 1px solid rgba(243, 201, 105, 0.5);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: var(--shadow);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.tldr-fab:hover { color: var(--moon); }
.tldr-fab.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tldr-fab { transition: none; } }
@media print { .tldr-fab { display: none; } }

/* --------------------------------------------------------------------------
   Demo request form — validation, honeypot, sent/failed states
   -------------------------------------------------------------------------- */
.field-error { color: #ffb38a; font-size: 0.85rem; font-weight: 600; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
    border-color: #ffb38a;
}
.field-optional { color: var(--muted); font-weight: 400; }

/* honeypot: off-screen for people, still in the DOM for form-filling bots */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
    border: 1px solid #ffb38a;
    background: rgba(255, 179, 138, 0.08);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.3rem;
}
.form-alert p { margin: 0; }

.form-sent { text-align: center; }
/* green success check (was shared with the old hero toast, which is now the
   Scan-page replica toast; the request-demo confirmation keeps its own) */
.scan-ok {
    border-radius: 50%;
    background: rgba(121, 212, 155, 0.15);
    color: #79d49b;
    display: grid;
    place-items: center;
    font-weight: 700;
}
.form-sent .scan-ok { margin: 0 auto 1rem; width: 3rem; height: 3rem; font-size: 1.4rem; }
.form-sent h2 { font-size: 1.8rem; }
.form-sent p { color: var(--muted); }