/* =====================================================================
   Time Tracker — marketing landing page.

   Deliberately standalone: this file is the whole stylesheet for the one
   public page, and is linked with asset() the same way the admin theme is.
   It does NOT go through Vite, because nothing in the deploy runs
   `npm run build` and an unstyled landing page is a worse failure than a
   hand-written stylesheet. It also does not load Bootstrap, so the page
   carries none of the admin theme's weight.

   Colours are the app's own: #1F3BB3 is the admin theme's .btn-primary,
   #4B49AC is the desktop app's Material seed colour, and #1E283D is the
   navy the logo artwork is drawn in.
   ===================================================================== */

:root {
    /* Brand */
    --brand: #1F3BB3;
    --brand-700: #172D88;
    --brand-alt: #4B49AC;
    --ink: #1E283D;

    /* Accents, all lifted from the admin theme palette. --coral and --amber
       document the source hues for the .card-icon--coral / --amber chips,
       which need a tint and a darker text colour rather than the base. */
    --sky: #52CDFF;
    --teal: #34B1AA;
    --coral: #F95F53;
    --amber: #FFAF00;

    /* Neutrals */
    --white: #FFFFFF;
    --paper: #F7F9FC;
    --line: #E3E8F0;
    --text: #1E283D;
    --muted: #5A6782;
    --faint: #8593AD;

    /* Dark sections */
    --night: #131B2E;
    --night-2: #1B2540;
    --night-line: rgba(255, 255, 255, .12);
    --night-text: rgba(255, 255, 255, .72);
    --night-faint: rgba(255, 255, 255, .52);

    --radius: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(30, 40, 61, .06), 0 2px 8px rgba(30, 40, 61, .04);
    --shadow: 0 4px 12px rgba(30, 40, 61, .07), 0 16px 40px rgba(30, 40, 61, .07);
    --shadow-lg: 0 24px 70px rgba(11, 18, 36, .28);

    --container: 1180px;
    --header-h: 68px;
}

/* ---------- Reset ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor targets clear the sticky header instead of hiding under it. */
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.021em;
    color: var(--ink);
    font-weight: 700;
}

p { margin: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-700); }

ul { margin: 0; padding: 0; list-style: none; }

/* One visible focus treatment everywhere, including inside dark sections. */
:focus-visible {
    outline: 3px solid var(--sky);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    padding: 10px 18px;
    background: var(--brand);
    color: var(--white);
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--white); }

/* Announced by assistive tech, invisible on screen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Layout primitives ---------- */

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

.section { padding: clamp(64px, 8vw, 112px) 0; }
.section--paper { background: var(--paper); }

.section-head {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 64px);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brand);
}
.eyebrow--on-dark { color: var(--sky); }

h2.section-title { font-size: clamp(28px, 3.4vw, 42px); }

.section-sub {
    margin-top: 16px;
    font-size: clamp(16px, 1.4vw, 18px);
    color: var(--muted);
}
.on-dark .section-title { color: var(--white); }
.on-dark .section-sub { color: var(--night-text); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
    box-shadow: 0 6px 18px rgba(31, 59, 179, .28);
}
.btn--primary:hover {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: var(--white);
    box-shadow: 0 10px 26px rgba(31, 59, 179, .34);
}

.btn--on-dark {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
    color: var(--white);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); color: var(--white); }

.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--sm { padding: 9px 17px; font-size: 14px; }
.btn svg { flex: none; }

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(19, 27, 46, .82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
}
/* Set by landing.js once the hero has scrolled past. */
.site-header.is-stuck {
    background: rgba(19, 27, 46, .95);
    border-bottom-color: var(--night-line);
}

.site-header > .container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand { display: flex; align-items: center; flex: none; }
/* Size comes from the lockup component's own width prop; this only caps it. */
.brand img { max-width: 234px; }

/* The wrapper that lets the nav and the buttons collapse into one panel on
   narrow screens. On desktop it has to lay them out side by side itself,
   otherwise its two block children stack and the header grows a second row. */
.nav-panel {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; align-items: center; gap: 4px; }
.primary-nav a {
    display: block;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--night-text);
    transition: color .15s ease, background-color .15s ease;
}
.primary-nav a:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
/* Scroll-spy state, set by landing.js. */
.primary-nav a[aria-current="true"] { color: var(--white); background: rgba(255, 255, 255, .1); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.header-actions .link-signin {
    padding: 8px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
    border-radius: 8px;
}
.header-actions .link-signin:hover { background: rgba(255, 255, 255, .1); color: var(--white); }

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 1px solid var(--night-line);
    border-radius: 10px;
    color: var(--white);
    cursor: pointer;
}
.nav-toggle svg { margin-inline: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 460px at 78% -8%, rgba(75, 73, 172, .55), transparent 62%),
        radial-gradient(680px 420px at 6% 8%, rgba(31, 59, 179, .45), transparent 60%),
        linear-gradient(170deg, var(--night-2) 0%, var(--night) 58%, #0F1626 100%);
    color: var(--white);
    padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 108px);
}

/* Faint engineering grid, purely decorative. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
    pointer-events: none;
}

.hero > .container { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 7px 15px 7px 9px;
    background: rgba(82, 205, 255, .12);
    border: 1px solid rgba(82, 205, 255, .34);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #BDEBFF;
}
.hero-badge b {
    padding: 3px 9px;
    background: var(--sky);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #06263A;
}

.hero h1 {
    font-size: clamp(34px, 4.9vw, 58px);
    line-height: 1.08;
    letter-spacing: -.028em;
    color: var(--white);
}
.hero h1 .accent {
    background: linear-gradient(100deg, var(--sky) 10%, var(--teal) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lede {
    margin-top: 22px;
    max-width: 560px;
    font-size: clamp(16px, 1.5vw, 18.5px);
    color: var(--night-text);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid var(--night-line);
}
.hero-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--night-text);
}
.hero-points svg { flex: none; margin-top: 3px; color: var(--teal); }

/* ---------- Device mockups (the "screenshots") ----------
   Built as markup rather than images: they are drawn from the real UI, stay
   sharp on any display, and cost no asset download. */

.mock {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    color: var(--text);
}
.mock--float { transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg); }

.mock-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    background: #F1F4F9;
    border-bottom: 1px solid var(--line);
}
.mock-dots { display: flex; gap: 6px; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: #D3DAE6; }
.mock-dots i:nth-child(1) { background: #FF605C; }
.mock-dots i:nth-child(2) { background: #FFBD44; }
.mock-dots i:nth-child(3) { background: #00CA4E; }
.mock-title {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--faint);
    letter-spacing: .01em;
}

.mock-body { padding: 20px; }

.mock-greet {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--faint);
    margin-bottom: 16px;
}

/* A rendered form field: the label sits on the border, like Flutter's
   OutlineInputBorder does in the real desktop window. */
.mock-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    margin-bottom: 16px;
    border: 1px solid #C9D2E0;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
}
.mock-field > .lbl {
    position: absolute;
    top: -8px;
    left: 11px;
    padding: 0 6px;
    background: var(--white);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--faint);
}
.mock-field .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-field svg { flex: none; color: var(--faint); }
.mock-field--area { align-items: flex-start; min-height: 74px; }
.mock-field--area .val { color: var(--muted); font-size: 14px; white-space: normal; line-height: 1.55; }
.mock-field--focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31, 59, 179, .1); }
.mock-field--focus > .lbl { color: var(--brand); }

.mock-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: #FFF6E5;
    border: 1px solid #FFD98A;
    border-radius: 8px;
    font-size: 12.5px;
    color: #8A5A00;
}
.mock-alert svg { flex: none; color: #C07A00; }

.mock-timer {
    margin: 22px 0 18px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(38px, 4.4vw, 50px);
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    color: var(--brand-alt);
    font-variant-numeric: tabular-nums;
}

.mock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    background: #D9382F;
}
.mock-btn--outline {
    margin-top: 10px;
    padding: 10px;
    background: transparent;
    border: 1px solid #C9D2E0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand-alt);
}

/* Browser-style mock used for the web app shots. */
.mock-urlbar {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    padding: 5px 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: #FBFCFE;
}
.mock-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}
.mock-chip svg { color: var(--faint); }
.mock-chip--go { background: var(--brand); border-color: var(--brand); color: var(--white); font-weight: 600; }
.mock-chip--go svg { color: var(--white); }
.mock-chip--export { margin-left: auto; background: rgba(52, 177, 170, .1); border-color: rgba(52, 177, 170, .4); color: #1F7F79; font-weight: 600; }
.mock-chip--export svg { color: #1F7F79; }

.mock-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mock-table th,
.mock-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid #EEF1F6; white-space: nowrap; }
.mock-table th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint);
    background: #FBFCFE;
}
.mock-table td { color: var(--muted); }
.mock-table td:first-child { color: var(--text); font-weight: 600; }
.mock-table tr:last-child td { border-bottom: 0; }
.mock-table .dur { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); font-weight: 600; }
/* ---------- Annotated tour ---------- */

.tour-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}
.tour-row + .tour-row { margin-top: clamp(64px, 8vw, 104px); }
/* Alternate sides so the eye zig-zags down the page. */
.tour-row--flip .tour-visual { order: -1; }

.tour-copy h3 { font-size: clamp(23px, 2.6vw, 31px); }
.tour-copy > p { margin-top: 16px; color: var(--muted); font-size: 16.5px; }

.callouts { margin-top: 28px; display: grid; gap: 18px; }
.callouts li { display: flex; gap: 14px; }
.callouts .num {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    background: var(--brand);
    color: var(--white);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.callouts strong { display: block; font-size: 16px; color: var(--ink); }
.callouts p { margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* The numbered pin that sits on the mock itself. */
.tour-visual { position: relative; }
.pin {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    background: var(--brand);
    color: var(--white);
    border: 2.5px solid var(--white);
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(31, 59, 179, .45);
    font-variant-numeric: tabular-nums;
}

/* ---------- Cards / feature grid ---------- */

.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}
.tab {
    padding: 9px 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tab:hover { border-color: var(--brand); color: var(--brand); }
.tab[aria-checked="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
}

.card {
    padding: 26px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #CBD5E6; }
.card[hidden] { display: none; }

.card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 11px;
    background: rgba(31, 59, 179, .09);
    color: var(--brand);
}
.card-icon--teal { background: rgba(52, 177, 170, .13); color: #23857F; }
.card-icon--sky { background: rgba(82, 205, 255, .18); color: #0E7FAD; }
.card-icon--coral { background: rgba(249, 95, 83, .13); color: #C93E33; }
.card-icon--amber { background: rgba(255, 175, 0, .16); color: #96690A; }
.card-icon--violet { background: rgba(75, 73, 172, .12); color: var(--brand-alt); }

.card-tag {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--faint);
}
.card h3 { font-size: 18px; }
.card p { margin-top: 9px; font-size: 15px; color: var(--muted); }

/* ---------- Steps ---------- */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
}
.step {
    padding: 28px 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.step .step-n {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 16px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--brand), var(--brand-alt));
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 17.5px; }
.step p { margin-top: 9px; font-size: 14.8px; color: var(--muted); }

/* ---------- Security band ---------- */

.trust {
    background:
        radial-gradient(760px 400px at 88% 0%, rgba(75, 73, 172, .4), transparent 62%),
        linear-gradient(165deg, var(--night-2), var(--night) 72%);
    color: var(--white);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 20px;
}
.trust-item {
    padding: 24px 22px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--night-line);
    border-radius: var(--radius);
    transition: background-color .18s ease, border-color .18s ease;
}
.trust-item:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); }
.trust-item .card-icon { background: rgba(82, 205, 255, .14); color: var(--sky); }
.trust-item h3 { font-size: 17px; color: var(--white); }
.trust-item p { margin-top: 9px; font-size: 14.5px; color: var(--night-text); }

/* ---------- Free band ---------- */

.free-band {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    padding: clamp(34px, 4vw, 52px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.free-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 6px 0 4px;
}
.free-price .amount {
    font-size: clamp(44px, 5.4vw, 62px);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--ink);
    line-height: 1;
}
.free-price .per { font-size: 15px; font-weight: 500; color: var(--muted); }

.free-list { display: grid; gap: 11px; margin-top: 22px; }
.free-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--muted); }
.free-list svg { flex: none; margin-top: 4px; color: var(--teal); }

.free-aside {
    padding: 28px 26px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.free-aside h3 { font-size: 18px; }
.free-aside p { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.free-aside .btn { margin-top: 20px; width: 100%; }
.free-note { margin-top: 14px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin-inline: auto; }
.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.faq-item + .faq-item { margin-top: 12px; }
.faq-item.is-open { border-color: #C6D1E8; }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 19px 22px;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
}
.faq-q:hover { color: var(--brand); }
.faq-q svg { flex: none; color: var(--faint); transition: transform .2s ease, color .2s ease; }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--brand); }

.faq-a { padding: 0 22px 20px; font-size: 15.3px; color: var(--muted); }
.faq-a[hidden] { display: none; }
.faq-a p + p { margin-top: 12px; }

/* ---------- Final CTA ---------- */

.cta {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 104px) 0;
    background:
        radial-gradient(720px 380px at 18% 0%, rgba(82, 205, 255, .22), transparent 60%),
        linear-gradient(125deg, var(--brand) 0%, var(--brand-alt) 58%, #2E2C7A 100%);
    color: var(--white);
    text-align: center;
}
.cta h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--white); max-width: 760px; margin-inline: auto; }
.cta p { max-width: 620px; margin: 18px auto 0; font-size: clamp(16px, 1.4vw, 18px); color: rgba(255, 255, 255, .84); }
.cta .hero-cta { justify-content: center; margin-top: 34px; }
.cta .btn--primary { background: var(--white); border-color: var(--white); color: var(--brand); box-shadow: 0 10px 30px rgba(6, 12, 30, .3); }
.cta .btn--primary:hover { background: #EFF3FF; border-color: #EFF3FF; color: var(--brand-700); }
.cta-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin-top: 34px;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}
.cta-points li { display: flex; align-items: center; gap: 8px; }

/* ---------- Footer ---------- */

.site-footer {
    padding: clamp(48px, 6vw, 72px) 0 32px;
    background: var(--night);
    color: var(--night-faint);
    font-size: 14.5px;
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--night-line);
}
.footer-brand img { max-width: 234px; margin-bottom: 18px; }
.footer-brand p { max-width: 330px; color: var(--night-faint); font-size: 14.5px; }

.footer-col h4 {
    margin-bottom: 15px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--white);
}
.footer-col li + li { margin-top: 10px; }
.footer-col a { color: var(--night-faint); }
.footer-col a:hover { color: var(--white); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 26px;
    font-size: 13.5px;
}
.footer-bottom a { color: var(--night-faint); }
.footer-bottom a:hover { color: var(--white); }

/* ---------- Scroll reveal ----------
   Scoped to .js, which the inline snippet in <head> sets. Without scripting
   the rule never applies, so the page is never left with invisible content
   waiting on an observer that will not run. */

.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .hero-grid,
    .tour-row,
    .free-band { grid-template-columns: minmax(0, 1fr); }
    .tour-row--flip .tour-visual { order: 0; }
    .mock--float { transform: none; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .nav-toggle { display: grid; place-items: center; }

    /* Collapsed nav becomes one panel under the header. Both blocks sit in
       normal flow inside that panel, so no magic offsets are needed. The
       header stays sticky: position:sticky is itself a containing block, so
       the absolutely positioned panel anchors to it and travels with it. */
    .nav-panel {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        padding: 12px 18px 18px;
        background: var(--night);
        border-bottom: 1px solid var(--night-line);
        box-shadow: 0 18px 40px rgba(6, 12, 30, .4);
    }
    .site-header.nav-open .nav-panel { display: block; }

    .primary-nav { margin-left: 0; }
    .primary-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .primary-nav a { padding: 11px 12px; font-size: 15.5px; }

    .header-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--night-line);
    }
    .header-actions .link-signin { text-align: center; padding: 12px; border: 1px solid var(--night-line); }
    .header-actions .btn { width: 100%; }
}

@media (max-width: 640px) {
    .container { padding-inline: 18px; }
    .hero-points { grid-template-columns: minmax(0, 1fr); }
    .hero-cta .btn { width: 100%; }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    /* Pins crowd the mock at phone widths; the numbered list carries the meaning. */
    .pin { display: none; }
}

/* Wide tables scroll inside their own box rather than squashing the page. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    .site-header, .nav-toggle, .cta, .hero-cta { display: none !important; }
    body { color: #000; }
    .reveal { opacity: 1; transform: none; }
}