/* Vanilla CSS only — no build step, no framework (docs/architecture.md). */

/* Latin subsets of Google Fonts' Archivo (expanded width) and Instrument Sans, both OFL, served from the site. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 500 700;
    font-stretch: 125%;
    font-display: swap;
    src: url(../fonts/archivo-expanded.woff2) format('woff2');
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(../fonts/instrument-sans.woff2) format('woff2');
}

:root {
    color-scheme: light dark;

    --accent: #C2510A;

    --page: #FDFBF7;
    --bg: #F6F1EA;
    --card: #FFFFFF;
    --surface: #FFFFFF;
    --raised2: #F6F1EA;
    --raised: #EFE8DF;
    --line: #EDE6DC;
    --divider: #E8E0D6;
    --border: #DDD3C7;
    --text: #1A1614;
    --text2: #2B2522;
    --muted: #5E554E;
    --faint: #6E655D;

    --ember: var(--accent);
    --ember-ink: #A8410A;
    --ember-lip: #8E3508;
    --on-ember: #FFFFFF;
    --ember-soft: #FDEFE2;
    --ready: #0E8F68;
    --ready-ink: #046B4A;
    --ready-soft: #DCF6EA;
    --late: #C8352C;
    --late-ink: #A31D16;
    --late-soft: #FDE2E2;
    --shadow: rgba(60, 40, 20, .16);
    --bezel: #0A0908;

    --font-heading: 'Archivo', 'Inter', system-ui, sans-serif;
    --font-body: 'Instrument Sans', 'Inter', system-ui, sans-serif;

    --maxw: 1240px;
    --gutter: clamp(16px, 4vw, 32px);
}

/* Each colour in light and dark where the browser can choose between them; an older one keeps the light ones above. */
@supports (color: light-dark(#000, #fff)) {
    :root {
        --page: light-dark(#FDFBF7, #0E0C0B);
        --bg: light-dark(#F6F1EA, #12100E);
        --card: light-dark(#FFFFFF, #171412);
        --surface: light-dark(#FFFFFF, #1C1917);
        --raised2: light-dark(#F6F1EA, #211E1C);
        --raised: light-dark(#EFE8DF, #2A2523);
        --line: light-dark(#EDE6DC, #221E1C);
        --divider: light-dark(#E8E0D6, #2E2926);
        --border: light-dark(#DDD3C7, #3A3532);
        --text: light-dark(#1A1614, #F5F0EA);
        --text2: light-dark(#2B2522, #E8E3DB);
        --muted: light-dark(#5E554E, #CFC5B9);
        --faint: light-dark(#6E655D, #A89D92);

        --ember: light-dark(var(--accent), #FF8A3D);
        --ember-ink: light-dark(#A8410A, #FFB27A);
        --ember-lip: light-dark(#8E3508, #C4611F);
        --on-ember: light-dark(#FFFFFF, #12100E);
        --ember-soft: light-dark(#FDEFE2, rgba(255, 138, 61, .15));
        --ready: light-dark(#0E8F68, #12B886);
        --ready-ink: light-dark(#046B4A, #4FD8AC);
        --ready-soft: light-dark(#DCF6EA, rgba(18, 184, 134, .17));
        --late: light-dark(#C8352C, #F2544B);
        --late-ink: light-dark(#A31D16, #FF8B84);
        --late-soft: light-dark(#FDE2E2, rgba(242, 84, 75, .17));
        --shadow: light-dark(rgba(60, 40, 20, .16), rgba(0, 0, 0, .6));
    }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font: 15px/1.5 var(--font-body);
    -webkit-font-smoothing: antialiased;
    transition: background .2s ease, color .2s ease;
}

main { overflow-x: clip; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: var(--ember-ink); text-decoration: none; }
a:hover { color: var(--text); }
img { display: block; max-width: 100%; }
::selection { background: rgba(255, 138, 61, .35); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

h1, h2, h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.ico {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rail-ico { width: 19px; height: 19px; stroke-width: 1.9; }

/* ── buttons ── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 7px 18px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, transform .06s ease;
}

.btn-primary {
    background: var(--ember);
    border-color: var(--ember);
    color: var(--on-ember);
    box-shadow: 0 2px 0 var(--ember-lip);
}
.btn-primary:hover { background: color-mix(in srgb, var(--ember) 88%, black); color: var(--on-ember); }
.btn-primary:active { background: var(--ember-lip); box-shadow: none; transform: translateY(2px); }

.btn-secondary {
    background: var(--raised);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--text) 7%, var(--raised)); color: var(--text); }
.btn-secondary:active { background: color-mix(in srgb, var(--text) 13%, var(--raised)); }

.btn-lg { min-height: 54px; padding-inline: 26px; font-size: 16.5px; }
.btn-block { min-height: 50px; margin-top: 10px; font-size: 15.5px; }

.icon-btn {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.icon-btn:hover { border-color: var(--ember); }
.icon-btn[hidden] { display: none; }

/* ── header ── */

.site-header {
    position: relative;
    z-index: 5;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 20px var(--gutter);
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 32px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    color: var(--text);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.02em;
}
.brand:hover { color: var(--text); }
.brand img { width: 30px; height: 30px; border-radius: 8px; }

.nav-wide { display: flex; gap: 26px; font-size: 15px; white-space: nowrap; }
.nav-wide a { color: var(--muted); }
.nav-wide a:hover { color: var(--text); }

.header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.sign-in { color: var(--text); font-size: 15px; padding: 0 10px; white-space: nowrap; }

.theme-toggle .moon { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .moon { display: block; }

.nav-menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }

.nav-sheet {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% - 4px);
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 50px var(--shadow);
}
.nav-sheet a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-radius: 10px;
    color: var(--text);
    font-size: 16px;
}
.nav-sheet a:hover { background: var(--raised2); }
.nav-sheet .sheet-sign-in { border-top: 1px solid var(--raised); border-radius: 0 0 10px 10px; }

@media (min-width: 900px) {
    .nav-menu { display: none; }
}

@media (max-width: 899.98px) {
    .nav-wide, .sign-in { display: none; }
}

@media (max-width: 420px) {
    .site-header { gap: 8px; }
    .site-header .brand { gap: 8px; font-size: 16px; }
    .header-actions { gap: 6px; }
    .header-actions .btn { padding-inline: 12px; font-size: 13.5px; }
    .header-actions .icon-btn { width: 40px; height: 40px; }
}

@media (max-width: 379.98px) {
    .site-header .wordmark { display: none; }
}

/* ── shared section parts ── */

.section { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow { font-size: 14px; font-weight: 600; color: var(--ember-ink); }
.kicker { font-size: 13px; font-weight: 600; color: var(--ember-ink); }

.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.section-head h2 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.035em; }
.section-head p { font-size: 18px; line-height: 1.6; color: var(--muted); }

.dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--ready);
}

.check {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 2px;
    color: var(--ready-ink);
}

.chip {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.tone-late { background: var(--late-soft); color: var(--late-ink); }
.tone-ready { background: var(--ready-soft); color: var(--ready-ink); }
.tone-ember { background: var(--ember-soft); color: var(--ember-ink); }
.tone-quiet { background: var(--raised2); color: var(--faint); }
.tone-neutral { background: var(--raised); color: var(--text2); }
.tone-muted { background: var(--raised); color: var(--muted); }

/* ── hero ── */

.hero {
    position: relative;
    padding-top: 64px;
    padding-bottom: 96px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
    gap: 56px;
    align-items: center;
}

.hero-glow {
    position: absolute;
    right: -10%;
    top: -20%;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 138, 61, .20), rgba(255, 138, 61, 0));
    pointer-events: none;
}

.hero-copy { position: relative; display: flex; flex-direction: column; gap: 26px; }
.hero h1 { font-size: clamp(44px, 6.2vw, 84px); line-height: .98; letter-spacing: -.04em; }
.hero .lead { max-width: 44ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--muted); }

.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.proof {
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--faint);
}
.proof li { display: flex; align-items: center; gap: 8px; }

/* The till and the kitchen ticket drawn in the hero. */

.hero-shot {
    position: relative;
    width: 100%;
    max-width: 680px;
    justify-self: center;
    padding-bottom: 190px;
}

.device {
    padding: 11px;
    border-radius: 28px;
    background: var(--bezel);
    box-shadow: 0 40px 100px var(--shadow), 0 0 0 1px var(--raised);
}

.screen {
    display: flex;
    aspect-ratio: 16 / 10.4;
    overflow: hidden;
    border-radius: 18px;
    background: var(--bg);
}

.rail {
    width: 76px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding-top: 14px;
    background: var(--surface);
    border-right: 1px solid var(--divider);
}

.rail-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--faint);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.rail-item.on { color: var(--text); }

.rail-pill {
    position: relative;
    width: 48px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 14px;
}
.rail-item.on .rail-pill { background: var(--ember-soft); color: var(--ember-ink); }

.rail-badge {
    position: absolute;
    top: -1px;
    right: 6px;
    min-width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--ember);
    color: var(--on-ember);
    font-size: 9.5px;
    font-weight: 700;
}
.rail-badge.late { right: 8px; background: var(--late); }

.pane-head { display: flex; align-items: baseline; gap: 8px; padding: 14px 14px 10px; }
.pane-title { font-family: var(--font-heading); font-weight: 700; font-size: 19px; letter-spacing: -.03em; line-height: 1.1; }
.pane-sub { font-size: 11px; color: var(--faint); }

.tables-pane {
    width: 38%;
    flex: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--divider);
}

.table-rows { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 8px; overflow: hidden; }

.table-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; }
.table-row.on { background: var(--ember-soft); box-shadow: inset 0 0 0 1.5px var(--ember); }
.table-label { width: 30px; flex: none; font-family: var(--font-heading); font-weight: 700; font-size: 15px; letter-spacing: -.03em; }
.table-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.table-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-row .chip { padding: 2px 7px; font-size: 9.5px; }
.table-total { font-family: var(--font-heading); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }

.order-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.order-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.order-head > div { flex: 1; min-width: 0; }
.order-head .pane-sub { color: var(--muted); font-size: 10.5px; }
.order-head .chip { height: 24px; display: flex; align-items: center; padding: 0 9px; border-radius: 9px; font-size: 10.5px; }

.order-lines { flex: 1; padding: 0 8px; overflow: hidden; }
.order-line { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; }
.order-line .qty { width: 20px; flex: none; font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; }
.order-line .what { flex: 1; min-width: 0; }
.order-line .name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-line .mods { font-size: 10px; color: var(--faint); }
.order-line .price { font-family: var(--font-heading); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }

.order-foot { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 14px; }
.order-total { display: flex; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--divider); }
.order-total .label { font-family: var(--font-heading); font-weight: 700; font-size: 10.5px; letter-spacing: .03em; }
.order-total .sum { margin-left: auto; font-family: var(--font-heading); font-weight: 700; font-size: 22px; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.fake-btn {
    display: grid;
    place-items: center;
    min-height: 32px;
    border-radius: 11px;
    background: var(--raised2);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11.5px;
}
.fake-btn.primary {
    min-height: 38px;
    border-radius: 13px;
    background: var(--ember);
    color: var(--on-ember);
    font-size: 12.5px;
    box-shadow: 0 2px 0 var(--ember-lip);
}

.ticket-float {
    position: absolute;
    right: -14px;
    top: calc(100% - 196px);
    width: 46%;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 30px 70px var(--shadow), 0 0 0 1px var(--divider);
}

@media (max-width: 639.98px) {
    .screen { aspect-ratio: 4 / 3.4; }
    .tables-pane { width: auto; flex: 1; border-right: 0; }
    .order-pane { display: none; }
    .ticket-float { right: 0; }
}

/* ── kitchen tickets, in the hero and the product grid ── */

.band { height: 6px; background: var(--ember); }
.band.late { background: repeating-linear-gradient(45deg, var(--late) 0 6px, #B83A33 6px 12px); }
.band.fresh { background: var(--border); }

.ticket { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 14px; background: var(--surface); }
.ticket-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--divider); }
.ticket-top { display: flex; align-items: baseline; gap: 6px; }
.ticket-top .big { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: -.035em; line-height: 1; }
.ticket-top .age { margin-left: auto; font-variant-numeric: tabular-nums; }
.ticket-label {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ticket-label.fresh { background: var(--raised); color: var(--text2); }
.ticket-lines { padding: 6px 0; }
.ticket-line { display: flex; align-items: baseline; gap: 7px; padding: 5px 12px; font-size: 12px; }
.ticket-line b { font-family: var(--font-heading); font-size: 13px; }
.ticket-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ticket-float .ticket-head { padding: 12px 14px 10px; }
.ticket-float .big { font-size: 22px; }
.ticket-float .order-no { font-size: 11px; font-weight: 600; color: var(--faint); }
.ticket-float .ticket-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.ticket-float .ticket-label { margin-top: 0; padding: 3px 8px; border-radius: 7px; font-size: 10px; }
.ticket-float .who { font-size: 11px; font-weight: 600; color: var(--faint); }
.ticket-float .ticket-lines { padding: 4px 0; }
.ticket-float .dish { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; }
.ticket-float .dish b { width: 24px; font-family: var(--font-heading); font-size: 16px; }
.ticket-float .dish div { flex: 1; }
.ticket-float .dish .name { font-size: 13px; font-weight: 600; }
.ticket-float .dish .mods { font-size: 11px; color: var(--faint); }
.ticket-float .dish.done { opacity: .5; }
.ticket-float .dish.done .name { text-decoration: line-through; }
.ticket-float .dish.done .mods { color: inherit; }
.ticket-float .tick { font-size: 10.5px; font-weight: 700; color: var(--ready-ink); }

/* ── platforms strip ── */

.platforms { border-block: 1px solid var(--line); background: var(--bg); }
.platforms-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 26px var(--gutter);
    display: flex;
    gap: 16px 40px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.platforms-inner > span { font-size: 14px; color: var(--faint); }
.platforms ul { display: flex; gap: 16px 34px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.platforms li { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--text2); }

/* ── product ── */

.product { padding-top: 120px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 52px; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 18px;
}

.card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background: var(--card);
    border: 1px solid var(--raised);
    border-radius: 20px;
}
.card:hover { border-color: var(--border); }

.card-copy { display: flex; flex-direction: column; gap: 10px; }
.card h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.card-copy p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }

.card-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 28px;
    align-items: center;
}
.card-wide .card-copy { gap: 12px; }
.card-wide h3 { font-size: 28px; line-height: 1.1; }
.card-wide .card-copy p { font-size: 16px; }

.kds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: var(--bg);
}

@media (max-width: 480px) {
    .kds { grid-template-columns: minmax(0, 1fr); }
}

.sample {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--raised);
    border-radius: 12px;
    font-size: 13.5px;
}
.sample-row { display: flex; gap: 10px; align-items: center; }
.sample-row.split { justify-content: space-between; }
.sample-row > .grow { flex: 1; }
.sample-note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); }
.sample-quote { padding-left: 36px; font-size: 12.5px; color: var(--muted); }
.sample .was { color: var(--faint); text-decoration: line-through; }
.sample .now { color: var(--ember-ink); font-weight: 600; }
.sample .muted { color: var(--muted); }
.sample .time { width: 44px; font-family: var(--font-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.sample .faint { color: var(--faint); }
.sample.menu { font-size: 14px; }
.sample.cash { gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.sample .total-row { border-top: 1px solid var(--raised); padding-top: 8px; }
.sample .variance { color: var(--ember-ink); font-weight: 600; }

.avatar {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--raised);
    font-size: 11px;
    font-weight: 600;
}

.guests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.guest { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; }
.guest span { font-size: 11px; font-weight: 600; }
.guest b { font-family: var(--font-heading); font-size: 16px; font-variant-numeric: tabular-nums; }
.guest.tone-muted b { color: var(--text); }

.meter { height: 6px; overflow: hidden; border-radius: 3px; background: var(--raised); }
.meter > div { width: 12%; height: 100%; background: var(--late); }

.more { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; }
.more h3 { font-size: 24px; letter-spacing: -.02em; }

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background: var(--raised);
    border: 1px solid var(--raised);
    border-radius: 20px;
}
.features li { display: flex; gap: 14px; align-items: flex-start; padding: 22px 22px 24px; background: var(--card); }
.features li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.features b { font-weight: 600; font-size: 15.5px; }
.features li > div > span { font-size: 14px; line-height: 1.5; color: var(--muted); }

.tile {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--ember-soft);
    color: var(--ember-ink);
}
.tile.lg { width: 44px; height: 44px; border-radius: 13px; }

/* ── offline ── */

.offline { padding-top: 80px; padding-bottom: 120px; }

.offline-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 56px;
    align-items: center;
    padding: clamp(28px, 5vw, 64px);
    background: linear-gradient(180deg, var(--surface), var(--card));
    border: 1px solid var(--raised);
    border-radius: 28px;
}

.offline-copy { display: flex; flex-direction: column; gap: 18px; }
.offline-copy h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.02; letter-spacing: -.035em; }
.offline-copy p { font-size: 17.5px; line-height: 1.6; color: var(--muted); }

.stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 8px; }
.stats div { display: flex; flex-direction: column; gap: 4px; }
.stats b { font-family: var(--font-heading); font-size: 40px; letter-spacing: -.03em; color: var(--ember); }
.stats span { font-size: 14px; color: var(--muted); }

.timeline {
    margin: 0;
    padding: 24px;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--raised);
    border-radius: 18px;
}
.timeline li { display: grid; grid-template-columns: 52px 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.timeline time { padding-top: 1px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .rule { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.timeline .rule::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: none;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--ready);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ready) 22%, transparent);
}
.timeline .down .rule::before { background: var(--ember); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 22%, transparent); }
.timeline .rule::after { content: ""; width: 2px; flex: 1; margin-top: 6px; background: var(--raised); }
.timeline li:last-child .rule::after { background: transparent; }
.timeline li > div:last-child { display: flex; flex-direction: column; gap: 3px; padding-bottom: 22px; }
.timeline b { font-weight: 600; font-size: 15px; }
.timeline li > div:last-child span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ── hosting ── */

.hosting {
    padding-bottom: 120px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    gap: 18px;
    align-items: stretch;
}
.hosting .section-head { grid-column: 1 / -1; max-width: 640px; margin-bottom: 22px; }
.hosting .section-head h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04; }
.hosting .section-head p { font-size: 16.5px; }
.hosting .card { gap: 18px; }
.hosting-name { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 700; font-size: 22px; }
.hosting .card > p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }

.points {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: auto 0 0;
    padding: 16px 0 0;
    list-style: none;
    border-top: 1px solid var(--raised);
    font-size: 14.5px;
}
.points li { display: flex; gap: 10px; align-items: flex-start; }

/* ── pricing ── */

.pricing { background: var(--bg); border-block: 1px solid var(--line); }
.pricing-inner { padding-block: 120px; display: flex; flex-direction: column; gap: 52px; }

.pricing-head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.pricing-head h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.02; letter-spacing: -.035em; }
.pricing-head > p { font-size: 17px; color: var(--muted); }

.pricing-controls { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 12px; }
.pricing-controls[hidden] { display: none; }

.billing {
    width: 100%;
    max-width: 380px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--raised);
}

.billing button {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: 600 15px var(--font-body);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.billing button[aria-pressed="true"] { background: var(--ember); color: var(--on-ember); }

.billing .save-tag {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--ready-soft);
    color: var(--ready-ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.billing button[aria-pressed="true"] .save-tag { background: var(--on-ember); color: var(--ember-ink); }

.stepper { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.stepper > div { display: flex; align-items: center; gap: 4px; }
.stepper button {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.stepper button:hover:not(:disabled) { border-color: var(--ember); background: var(--ember-soft); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper output { min-width: 34px; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }

.plans { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.plan-group { flex: 1 1 526px; min-width: 0; display: flex; flex-wrap: wrap; gap: 16px; }

.plan {
    flex: 1 1 255px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    background: var(--card);
    border: 1px solid var(--raised);
    border-radius: 20px;
}
.plan.popular {
    background: var(--surface);
    border: 1.5px solid var(--ember);
    box-shadow: 0 30px 80px rgba(255, 138, 61, .14);
}

.plan-name { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; }
.badge {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ember);
    color: var(--on-ember);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
}

.plan-price { display: flex; flex-direction: column; gap: 6px; }
.price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-line s { font-family: var(--font-heading); font-weight: 600; font-size: 22px; color: var(--faint); font-variant-numeric: tabular-nums; }
.price-line s:empty { display: none; }
.price { font-family: var(--font-heading); font-weight: 700; font-size: 48px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.price.long { font-size: 34px; }
.price-unit { font-size: 14px; color: var(--muted); }
.price-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.price-sub > span:first-child { font-size: 13.5px; color: var(--muted); }
.saving {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ready-soft);
    color: var(--ready-ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.saving:empty { display: none; }

.plan > p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.plan hr { width: 100%; height: 1px; margin: 6px 0; border: 0; background: var(--raised); }

.plan-features { flex: 1; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; }
.plan-features > li { display: flex; gap: 10px; align-items: flex-start; }

.screens > summary { display: flex; gap: 10px; align-items: center; list-style: none; cursor: pointer; }
.screens > summary::-webkit-details-marker { display: none; }
.screens > summary .check { margin-top: 0; }
.screens > summary b { font-weight: 600; }
.help-dot {
    width: 24px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}
.screens > summary:hover .help-dot { border-color: var(--ember); color: var(--ember-ink); }

.screens-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--raised);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}
.screens-note b { font-weight: 600; color: var(--text); }

.pricing[data-billing="year"] .when-month,
.pricing[data-billing="month"] .when-year { display: none; }

.plan .btn-secondary { background: var(--raised); }

.fine-print { font-size: 14px; color: var(--faint); text-align: center; }

/* ── FAQ ── */

.faq { max-width: 880px; padding-block: 120px; display: flex; flex-direction: column; gap: 36px; }
.faq h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.02; letter-spacing: -.035em; text-align: center; }
.faq details { padding: 22px 4px; border-top: 1px solid var(--raised); }
.faq summary {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 19px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--ember); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 66ch; margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--muted); }

/* ── closing call ── */

.start { padding-bottom: 120px; }

.start-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: clamp(40px, 7vw, 88px) 32px;
    border-radius: 28px;
    background: var(--accent);
    color: #FFFFFF;
    text-align: center;
}
.start-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 0%, rgba(255, 178, 122, .45), rgba(194, 81, 10, 0) 60%);
    pointer-events: none;
}
.start-panel > * { position: relative; }
.start-panel h2 { max-width: 16ch; font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; }
.start-panel p { max-width: 44ch; font-size: 18px; line-height: 1.55; }
.start-panel .actions { justify-content: center; }

.on-brand {
    display: inline-flex;
    align-items: center;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16.5px;
}
.on-brand.solid { background: var(--bg); color: var(--text); }
.on-brand.solid:hover { background: var(--raised); color: var(--text); }
.on-brand.outline { border: 1.5px solid rgba(255, 255, 255, .75); color: #FFFFFF; }
.on-brand.outline:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* ── footer ── */

.site-footer { border-top: 1px solid var(--line); }
.footer-cols {
    padding-top: 56px;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 36px;
}
.footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.footer-brand .brand { font-size: 17px; gap: 10px; }
.footer-brand .brand img { width: 28px; height: 28px; border-radius: 7px; }
.footer-brand p { max-width: 34ch; font-size: 14.5px; line-height: 1.55; color: var(--faint); }
.footer-col { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.footer-col b { font-weight: 600; }
.footer-col a { color: var(--faint); }
.footer-col a:hover { color: var(--text); }
.footer-bottom { padding-top: 20px; padding-bottom: 32px; border-top: 1px solid var(--surface); font-size: 13.5px; color: var(--faint); }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ── reading pages: privacy, terms, not found ── */

.doc { max-width: 760px; padding-top: 48px; padding-bottom: 96px; }
.doc h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.04; letter-spacing: -.035em; }
.doc .updated { margin-top: 14px; font-size: 14px; color: var(--faint); }
.doc .lead { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.doc h2 { margin-top: 48px; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.doc h3 { margin-top: 28px; font-size: 18px; letter-spacing: -.01em; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; color: var(--text2); }
.doc p { margin-top: 14px; }
.doc ul { margin: 14px 0 0; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
.doc strong { color: var(--text); }

.doc-toc {
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--card);
    border: 1px solid var(--raised);
    border-radius: 16px;
}
.doc-toc b { font-size: 14px; }
.doc-toc ol { margin: 10px 0 0; padding-left: 20px; columns: 2 220px; column-gap: 32px; }
.doc-toc li { font-size: 15px; line-height: 1.8; }

.doc-table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--raised); border-radius: 14px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--raised); }
.doc th { font-weight: 600; background: var(--card); color: var(--text); }
.doc td { color: var(--text2); line-height: 1.55; }
.doc tr:last-child td { border-bottom: 0; }

.not-found { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: 64px 120px; }
.not-found .code { font-family: var(--font-heading); font-weight: 700; font-size: clamp(72px, 14vw, 160px); line-height: .9; letter-spacing: -.05em; color: var(--ember); }
.not-found h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -.03em; }
.not-found p { max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body, .btn, .billing button { transition: none; }
}