/* ---------------------------------------------------------------------------
   Iteritur — landing page (design handoff: "Landing Page + App Core Screen · IT")

   High-fidelity surface: the hexes, sizes and spacing here are lifted from the
   handoff and are authoritative. Unlike the app, this page is light-only — it
   deliberately does not read the --bg/--text theme tokens, so the theme toggle
   cannot alter the marketing palette.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Theme tokens.

   The page alternates light and dark bands by design: hero light, "il problema"
   dark, "come funziona" light, the closing CTA deep teal, footer dark. That
   rhythm is the layout, so dark mode cannot simply invert everything — the
   bands have to stay distinguishable from the page and from each other.

   Hence two families. `--l-*` is the page: background, cards, body text. Those
   invert. `--l-band-*` is whatever sits on a contrasting band; in light mode a
   band is dark against a pale page, in dark mode it is a raised surface against
   a near-black one. The closing CTA keeps its deep teal in both, because that
   band IS a brand colour rather than a neutral.

   The dark values are the dashboard's, from api_iteritur's main.css — same
   near-black, same surfaces, same borders — so the two halves of the product
   look like one thing in either mode.

   The six brand colours never appear here: coral, the two teals and white stay
   literal wherever they carry identity rather than describe a surface.
   --------------------------------------------------------------------------- */

:root {
    --l-bg: #F5F8F7;
    --l-surface: #fff;
    --l-text: #0D3B3A;
    --l-muted: #3d5b58;
    --l-muted-2: #6a807d;
    --l-border: #e2ece9;
    --l-border-soft: #c9d8d5;
    --l-border-pill: #cbe4df;
    --l-grid: #eef4f2;
    --l-track: #eef4f2;
    --l-tick: #8aa19d;
    --l-shadow: rgba(13, 59, 58, 0.4);
    --l-shadow-soft: rgba(13, 59, 58, 0.35);

    /* Deep teal chip on a pale band: the step numbers and the nav button. */
    --l-badge-bg: #0D3B3A;
    --l-badge-fg: #fff;
    --l-cta-bg: #0D3B3A;
    --l-cta-fg: #fff;
    --l-cta-bg-hover: #0b302f;

    /* Contrasting bands. */
    --l-band-bg: #0B1413;
    --l-band-surface: #0f1a19;
    --l-band-fg: #F5F8F7;
    --l-band-muted: #b7c8c5;
    --l-band-muted-2: #8aa19d;
    --l-band-muted-3: #4b6764;
    --l-band-border: #24312f;
    --l-band-border-2: #2f4a48;
    --l-cta-band-bg: #0D3B3A;
    --l-input-bg: rgba(245, 248, 247, 0.06);
    --l-placeholder: #6d8683;
}

/* Dark. The page takes the near-black the app uses; the bands rise off it
   rather than sinking into it, which is the inversion that keeps the rhythm:
   in light mode a band is darker than the page, in dark mode it is lighter. */
:root[data-theme="dark"] {
    --l-bg: #0B1413;
    --l-surface: #132220;
    --l-text: #E4EDEB;
    --l-muted: #8FA6A3;
    --l-muted-2: #7d918e;
    --l-border: #24403C;
    --l-border-soft: #24403C;
    --l-border-pill: #24403C;
    --l-grid: rgba(127, 216, 204, 0.10);
    --l-track: #1B2E2B;
    --l-tick: #8FA6A3;
    --l-shadow: rgba(0, 0, 0, 0.55);
    --l-shadow-soft: rgba(0, 0, 0, 0.45);

    /* Deep teal would vanish against near-black, so the chip takes the bright
       teal and dark type instead — same role, legible ground. */
    --l-badge-bg: #18A596;
    --l-badge-fg: #0B1413;
    --l-cta-bg: #18A596;
    --l-cta-fg: #0B1413;
    --l-cta-bg-hover: #13897d;

    --l-band-bg: #132220;
    --l-band-surface: #1B2E2B;
    --l-band-fg: #E4EDEB;
    --l-band-muted: #8FA6A3;
    --l-band-muted-2: #8FA6A3;
    --l-band-muted-3: #6d8683;
    --l-band-border: #24403C;
    --l-band-border-2: #35524f;
    --l-cta-band-bg: #0D3B3A;
    --l-input-bg: rgba(245, 248, 247, 0.05);
    --l-placeholder: #6d8683;
}

/* System mode follows the OS. Written as its own block rather than as the
   default so an explicit choice always wins over the preference. */
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --l-bg: #0B1413;
        --l-surface: #132220;
        --l-text: #E4EDEB;
        --l-muted: #8FA6A3;
        --l-muted-2: #7d918e;
        --l-border: #24403C;
        --l-border-soft: #24403C;
        --l-border-pill: #24403C;
        --l-grid: rgba(127, 216, 204, 0.10);
        --l-track: #1B2E2B;
        --l-tick: #8FA6A3;
        --l-shadow: rgba(0, 0, 0, 0.55);
        --l-shadow-soft: rgba(0, 0, 0, 0.45);
        --l-badge-bg: #18A596;
        --l-badge-fg: #0B1413;
        --l-cta-bg: #18A596;
        --l-cta-fg: #0B1413;
        --l-cta-bg-hover: #13897d;
        --l-band-bg: #132220;
        --l-band-surface: #1B2E2B;
        --l-band-fg: #E4EDEB;
        --l-band-muted: #8FA6A3;
        --l-band-muted-2: #8FA6A3;
        --l-band-muted-3: #6d8683;
        --l-band-border: #24403C;
        --l-band-border-2: #35524f;
        --l-cta-band-bg: #0D3B3A;
        --l-input-bg: rgba(245, 248, 247, 0.05);
        --l-placeholder: #6d8683;
    }
}

body.landing {
    background: var(--l-bg);
    color: var(--l-text);
    font-family: var(--font-body);
    line-height: 1.5;
}

body.landing ::selection { background: #FF5D47; color: #fff; }

.landing h1, .landing h2, .landing h3 {
    font-family: var(--font-display);
    margin: 0;
    letter-spacing: -0.02em;
}

.landing a { text-decoration: none; }

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* Mono eyebrow labels recur in every section. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---- Nav ---------------------------------------------------------------- */

.l-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-top: 22px;
    padding-bottom: 22px;
}

/* 46px tall on a 530x180 lockup renders ~135px wide. The brand handoff sets a
   120px minimum for the lockup, and the previous 34px put it at ~100px — under
   the mark's own floor, which is why it read as unclear rather than merely
   small. */
.l-nav .lockup { height: 46px; width: auto; display: block; }

.l-nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.l-nav-links a {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--l-text);
}

.l-nav-links a:hover { color: #18A596; }

.l-nav-cta {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--l-cta-fg) !important;
    background: var(--l-cta-bg);
    padding: 10px 20px;
    border-radius: 9px;
    transition: background-color 0.15s;
}

.l-nav-cta:hover { background: var(--l-cta-bg-hover); }

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

.l-hero {
    display: grid;
    grid-template-columns: 1fr 1.02fr;
    gap: 56px;
    align-items: center;
    padding-top: 56px;
    padding-bottom: 72px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #18A596;
    border: 1px solid var(--l-border-pill);
    background: var(--l-surface);
    padding: 7px 13px;
    border-radius: 100px;
    margin-bottom: 26px;
}

/* The single coral square — the mark's "value now" block, shrunk to a dot. */
.pill-dot {
    width: 7px;
    height: 7px;
    background: #FF5D47;
    border-radius: 2px;
    flex: 0 0 auto;
}

.l-hero h1 {
    font-size: 56px;
    line-height: 1.04;
    font-weight: 700;
    color: var(--l-text);
    margin-bottom: 22px;
    text-wrap: balance;
}

.l-hero-lede {
    font-size: 18.5px;
    line-height: 1.55;
    color: var(--l-muted);
    max-width: 480px;
    margin: 0 0 32px;
}

.l-hero-lede em {
    font-style: normal;
    color: #FF5D47;
    font-weight: 600;
}

.l-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-coral {
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    background: #FF5D47;
    padding: 15px 28px;
    border-radius: 10px;
    transition: box-shadow 0.15s, transform 0.15s;
}

.btn-coral:hover {
    box-shadow: 0 12px 24px -12px rgba(255, 93, 71, 0.7);
    transform: translateY(-1px);
}

.btn-outline {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--l-text);
    padding: 15px 22px;
    border-radius: 10px;
    border: 1px solid var(--l-border-soft);
    background: var(--l-surface);
    transition: border-color 0.15s;
}

.btn-outline:hover { border-color: #18A596; }

.l-stats {
    display: flex;
    gap: 28px;
    margin-top: 38px;
    font-family: var(--font-mono);
}

.l-stats .value {
    font-size: 22px;
    font-weight: 600;
    color: var(--l-text);
    letter-spacing: -0.01em;
}

.l-stats .label {
    font-size: 11.5px;
    color: var(--l-muted-2);
    margin-top: 3px;
}

/* ---- Hero visual: the true-cost panel ----------------------------------- */

.panel-wrap { position: relative; }

.panel-glow {
    position: absolute;
    inset: -18px -18px auto auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, #7FD8CC55, transparent 70%);
    z-index: 0;
}

.panel {
    position: relative;
    z-index: 1;
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 40px 80px -40px var(--l-shadow);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.panel-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--l-tick);
    margin-bottom: 5px;
}

.panel-car {
    font-size: 19px;
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--l-text);
}

.panel-figure { text-align: right; }

.panel-total {
    font-size: 34px;
    font-weight: 700;
    color: #FF5D47;
    letter-spacing: -0.02em;
    line-height: 1;
    font-family: var(--font-display);
}

.panel-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--l-muted-2);
    margin-top: 4px;
}

.panel-chart { height: 260px; position: relative; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--l-grid);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--l-muted);
}

.legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 auto;
}

/* ---- Il problema (dark) -------------------------------------------------- */

.l-problem {
    background: var(--l-band-bg);
    color: var(--l-band-fg);
    padding-top: 88px;
    padding-bottom: 88px;
}

.l-problem-head { max-width: 660px; margin-bottom: 52px; }
.l-problem-head .eyebrow { color: #7FD8CC; margin-bottom: 18px; }

.l-problem h2 {
    font-size: 40px;
    line-height: 1.12;
    font-weight: 700;
    color: var(--l-band-fg);
    text-wrap: balance;
}

.l-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stat-card {
    border: 1px solid var(--l-band-border);
    border-radius: 14px;
    padding: 28px;
    background: var(--l-band-surface);
}

.stat-card .stat {
    font-size: 52px;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    line-height: 1;
}

.stat-card .tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7FD8CC;
    margin: 14px 0 10px;
}

.stat-card p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--l-band-muted);
    margin: 0;
}

/* ---- Come funziona ------------------------------------------------------- */

.l-how { padding-top: 92px; padding-bottom: 92px; }

.l-section-head { text-align: center; margin-bottom: 56px; }
.l-section-head .eyebrow { color: #18A596; margin-bottom: 16px; }

.l-how h2 {
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--l-text);
}

.l-cards-3.gap-24 { gap: 24px; }

.step-card {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 16px;
    padding: 30px 28px 32px;
}

.step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.step-n {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--l-badge-fg);
    background: var(--l-badge-bg);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* The descending-blocks motif from the mark, reused as a step glyph. */
.step-blocks { display: flex; gap: 4px; align-items: flex-end; }
.step-blocks span { border-radius: 2px; align-self: flex-end; }

.step-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--l-text);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.step-card p {
    font-size: 15px;
    line-height: 1.58;
    color: var(--l-muted);
    margin: 0;
}

/* ---- Confronta ----------------------------------------------------------- */

.l-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 96px;
}

.l-compare .eyebrow { color: #18A596; margin-bottom: 18px; display: block; }

.l-compare h2 {
    font-size: 38px;
    line-height: 1.12;
    font-weight: 700;
    color: var(--l-text);
    margin-bottom: 20px;
    text-wrap: balance;
}

.l-compare-lede {
    font-size: 17px;
    line-height: 1.6;
    color: var(--l-muted);
    margin: 0 0 26px;
    max-width: 450px;
}

.checklist { display: flex; flex-direction: column; gap: 14px; }

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    list-style: none;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--l-muted);
}

.check {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #18A596;
    flex: 0 0 auto;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.compare-card {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-radius: 16px;
    padding: 26px 26px 24px;
    box-shadow: 0 30px 70px -45px var(--l-shadow-soft);
}

.compare-card .panel-eyebrow { margin-bottom: 20px; }

.compare-bars { display: flex; flex-direction: column; gap: 20px; }

.compare-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.compare-bar-head .name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--l-text);
}

.compare-bar-head .value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
}

.compare-track {
    height: 12px;
    background: var(--l-track);
    border-radius: 6px;
    overflow: hidden;
}

.compare-fill { height: 100%; border-radius: 6px; }

.compare-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--l-grid);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--l-muted);
}

.compare-foot .dot {
    width: 9px;
    height: 9px;
    background: #FF5D47;
    border-radius: 2px;
    flex: 0 0 auto;
}

.compare-foot strong { color: var(--l-text); font-weight: 600; }

/* ---- CTA finale ---------------------------------------------------------- */

.l-cta {
    background: var(--l-cta-band-bg);
    color: var(--l-band-fg);
}

.l-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 84px;
    padding-bottom: 84px;
}

.blocks-motif { display: flex; gap: 6px; margin-bottom: 26px; height: 44px; }
.blocks-motif span { width: 22px; height: 22px; border-radius: 3px; }
.blocks-motif .b1 { background: #7FD8CC; align-self: flex-start; }
.blocks-motif .b2 { background: #18A596; align-self: center; }
.blocks-motif .b3 { background: #FF5D47; align-self: flex-end; }

.l-cta h2 {
    font-size: 44px;
    line-height: 1.08;
    font-weight: 700;
    max-width: 660px;
    text-wrap: balance;
    margin-bottom: 20px;
}

.l-cta p {
    font-size: 18px;
    line-height: 1.5;
    color: var(--l-band-muted);
    max-width: 500px;
    margin: 0 0 34px;
}

.l-cta .l-buttons { justify-content: center; }

.btn-coral-lg {
    font-size: 16px;
    font-weight: 600;
    color: #0B1413;
    background: #FF5D47;
    padding: 16px 32px;
    border-radius: 11px;
    transition: box-shadow 0.15s, transform 0.15s;
}

.btn-coral-lg:hover {
    box-shadow: 0 14px 28px -12px rgba(255, 93, 71, 0.55);
    transform: translateY(-1px);
}

.btn-ghost {
    font-size: 16px;
    font-weight: 600;
    color: var(--l-band-fg);
    background: transparent;
    border: 1px solid var(--l-band-border-2);
    padding: 16px 28px;
    border-radius: 11px;
    transition: border-color 0.15s;
}

.btn-ghost:hover { border-color: #7FD8CC; }

/* ---- Beta signup form ---------------------------------------------------- */

/* Lives inside .l-cta, which is the dark panel (#0D3B3A) — hence the light text
   and the translucent-white field backgrounds rather than main.css's defaults. */

.beta-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 560px;
    text-align: left;
}

.beta-fields {
    display: flex;
    gap: 14px;
    width: 100%;
}

.beta-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

.beta-field label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7FD8CC;
}

.beta-field input {
    width: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--l-band-fg);
    background: var(--l-input-bg);
    border: 1px solid var(--l-band-border-2);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.beta-field input::placeholder { color: var(--l-placeholder); }

.beta-field input:focus {
    outline: none;
    border-color: #7FD8CC;
    box-shadow: 0 0 0 3px rgba(127, 216, 204, 0.18);
}

.beta-field.has-error input { border-color: #FF5D47; }

.beta-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--l-band-muted);
    cursor: pointer;
}

.beta-consent input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #18A596;
}

.beta-consent.has-error { color: #FF5D47; }

.beta-submit {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    align-self: center;
}

.beta-submit:disabled { opacity: 0.6; cursor: default; }

.beta-error {
    font-size: 13px;
    color: #FF5D47;
}

/* Collapse when empty so the layout does not reserve a gap for errors that
   are not there. */
.beta-error:empty { display: none; }

.beta-error-form { align-self: center; }

.beta-done {
    font-size: 17px;
    line-height: 1.5;
    color: #7FD8CC;
    text-align: center;
    margin: 0;
}

/* Honeypot. Off-screen rather than display:none — some bots skip fields that
   are explicitly hidden, and all of them are happy to fill this one. */
.beta-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.beta-alt {
    font-size: 14px;
    color: var(--l-band-muted-2);
    margin: 22px 0 0;
}

.beta-alt a { color: #7FD8CC; text-decoration: underline; }

.beta-banner {
    font-size: 15px;
    border-radius: 10px;
    padding: 12px 18px;
    margin: 0 0 22px;
}

.beta-banner-ok  { background: rgba(24, 165, 150, 0.18); color: #7FD8CC; }
.beta-banner-err { background: rgba(255, 93, 71, 0.16); color: #FF5D47; }

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

.l-footer {
    background: var(--l-band-bg);
    color: var(--l-band-muted-2);
}

.l-footer-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 44px;
    padding-bottom: 44px;
}

/* ~124px wide — also brought above the 120px lockup minimum. */
.l-footer .lockup { height: 42px; width: auto; display: block; }

.l-footer-links {
    margin-left: auto;
    display: flex;
    gap: 26px;
    font-size: 13.5px;
}

.l-footer-links a { color: var(--l-band-muted-2); }
.l-footer-links a:hover { color: #7FD8CC; }

.l-legal {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--l-band-muted-3);
    padding-top: 10px;
}

/* ---- Responsive ----------------------------------------------------------
   Handoff: collapse the hero and the multi-column grids to one column under
   ~900px; the nav links fold away on mobile, leaving the lockup and the CTA. */

@media (max-width: 900px) {
    .l-hero,
    .l-compare {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .l-cards-3 { grid-template-columns: 1fr; }

    .l-hero h1 { font-size: 42px; }
    .l-problem h2, .l-how h2 { font-size: 32px; }
    .l-compare h2 { font-size: 30px; }
    .l-cta h2 { font-size: 34px; }
    .stat-card .stat { font-size: 42px; }
    .panel-glow { display: none; }
}

@media (max-width: 640px) {
    .wrap { padding-left: 20px; padding-right: 20px; }
    .l-nav { gap: 16px; }
    .l-nav-links a:not(.l-nav-cta) { display: none; }
    .l-hero h1 { font-size: 34px; }
    .l-hero-lede { font-size: 16.5px; }
    .l-stats { flex-wrap: wrap; gap: 20px; }
    .panel { padding: 20px 18px; }
    .panel-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .panel-figure { text-align: left; }
    .l-footer-links { margin-left: 0; }
    /* Nome and email side by side leaves each ~130px wide on a phone — stack
       them and let the submit go full width. */
    .beta-fields { flex-direction: column; }
    .beta-submit { align-self: stretch; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Landing split (2026-08) — the hero chart is SVG in the markup, not a canvas.

   The old rule fixed .panel-chart at 260px and let Chart.js redraw into
   whatever width the canvas got. An SVG scales by viewBox instead, so the box
   is given the chart's aspect ratio and the SVG fills it: proportional at every
   width, no distortion, and no reflow when the fonts land.
   --------------------------------------------------------------------------- */

.panel-chart {
    height: auto;
    aspect-ratio: 480 / 260;
}

.hero-chart {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;   /* the €6,3k above the tallest bar sits on the edge */
}

/* The dashboard link, demoted. During the private beta it answers a stranger
   with a basic-auth prompt, so it must not look like the thing to click — the
   coral button is the waitlist, which works for everyone. */
.l-nav-quiet {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--l-muted-2) !important;
}

.l-nav-quiet:hover { color: #18A596 !important; }

/* Five nav items instead of four; tighten before they crowd the lockup. */
@media (max-width: 1080px) {
    .l-nav-links { gap: 22px; }
}

/* ---- Theme toggle -------------------------------------------------------- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--l-muted-2);
    background: transparent;
    border: 1px solid var(--l-border-soft);
    border-radius: 100px;
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.theme-toggle:hover { border-color: #18A596; color: var(--l-text); }
.theme-toggle .theme-icon { font-size: 13px; line-height: 1; }

/* Nothing renders until the script has read the stored preference, so a
   no-JS visitor sees no dead control. */
.no-js .theme-toggle { display: none; }

/* ---- Colour transitions --------------------------------------------------
   Only the surfaces animate. Text is left alone: a fading headline reads as a
   rendering fault rather than as a transition. */
body.landing,
.panel, .stat-card, .step-card, .compare-card, .l-problem, .l-cta, .l-footer {
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* ---- Hero chart ----------------------------------------------------------
   The SVG is generated at build time (chart.py) and carries classes rather
   than baked-in colours for anything that is furniture — gridlines, axis
   labels, the totals. The five category fills stay literal in the markup:
   they encode which cost is which, in both themes, and are brand identity. */
.hero-chart .c-grid  { stroke: var(--l-grid); }
.hero-chart .c-tick  { fill: var(--l-tick); }
.hero-chart .c-tickx { fill: var(--l-tick); }
.hero-chart .c-total { fill: var(--l-text); }

/* ---- Brand lockup, per theme ---------------------------------------------
   The nav sits on the page background, which inverts; the footer sits on a
   band that stays dark in both modes, so it keeps the dark variant outright. */

.l-brand { display: inline-flex; line-height: 0; }
.l-brand .on-dark { display: none; }

:root[data-theme="dark"] .l-brand .on-light { display: none; }
:root[data-theme="dark"] .l-brand .on-dark { display: block; }

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] .l-brand .on-light { display: none; }
    :root[data-theme="system"] .l-brand .on-dark { display: block; }
}

/* ---- Chart segments in dark mode -----------------------------------------
   Two of the five category fills are deep teal (#0D3B3A carburante) and near
   black is what dark mode puts behind them, so those segments dissolve into
   the panel — and a cost line you cannot see is not identity, it is a missing
   number. A hairline edge restores the boundary without touching the fills,
   which stay exactly what they are in light mode and in the legend.

   Light mode needs none of this: every fill already contrasts with white. */

:root[data-theme="dark"] .hero-chart .c-bar,
:root[data-theme="dark"] .legend-swatch {
    stroke: rgba(228, 237, 235, 0.22);
    stroke-width: 0.6;
    box-shadow: inset 0 0 0 1px rgba(228, 237, 235, 0.22);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] .hero-chart .c-bar,
    :root[data-theme="system"] .legend-swatch {
        stroke: rgba(228, 237, 235, 0.22);
        stroke-width: 0.6;
        box-shadow: inset 0 0 0 1px rgba(228, 237, 235, 0.22);
    }
}

/* ---- Prose pages (privacy) -----------------------------------------------
   A reading column, not a marketing layout: 68ch is about 12 words a line,
   which is where continuous prose stops being tiring. */

.l-prose {
    max-width: 68ch;
    padding-top: 56px;
    padding-bottom: 96px;
    color: var(--l-text);
}

.l-prose h1 { font-size: 40px; line-height: 1.1; margin-bottom: 10px; }

.l-prose h2 {
    font-size: 21px;
    margin: 42px 0 12px;
    color: var(--l-text);
}

.l-prose p { margin-bottom: 14px; line-height: 1.65; color: var(--l-muted); }
.l-prose a { color: #18A596; text-decoration: underline; }

.l-prose-meta {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--l-muted-2);
    margin-bottom: 32px;
}

/* The summary, boxed: most readers want only this. */
.l-prose-lead {
    background: var(--l-surface);
    border: 1px solid var(--l-border);
    border-left: 3px solid #18A596;
    border-radius: 12px;
    padding: 20px 24px 8px;
    margin-bottom: 8px;
}

.l-prose-lead p { color: var(--l-text); }

.l-prose-list { margin: 0 0 14px 20px; }
.l-prose-list li { margin-bottom: 8px; line-height: 1.6; color: var(--l-muted); }

/* Scrolls inside itself rather than widening the page on a phone. */
.l-table-wrap { overflow-x: auto; margin: 18px 0 22px; }

.l-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 14.5px;
}

.l-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--l-muted-2);
    font-weight: 500;
    padding: 0 14px 8px 0;
    border-bottom: 1px solid var(--l-border);
}

.l-table td {
    padding: 12px 14px 12px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--l-border);
    color: var(--l-muted);
    line-height: 1.55;
}

.l-table td strong { color: var(--l-text); font-weight: 600; }
.l-table-basis { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }

@media (max-width: 640px) {
    .l-prose h1 { font-size: 30px; }
    .l-prose { padding-top: 36px; }
}

/* ---- Short pages: grazie, errore, 404, 50x -------------------------------
   These carry a heading and one sentence. Left alone they end a third of the
   way down a desktop screen, with the footer stranded mid-viewport and a band
   of empty background below it — which reads as a page that failed to finish
   loading rather than one that is simply short.

   So the body becomes a full-height column: the message region takes whatever
   space is left over and centres its content in it, and the footer sits on the
   bottom edge. Content taller than the viewport still pushes the footer down
   normally, because the height is a MINIMUM.

   Scoped to `.l-short` deliberately — the landing page and the privacy page
   are long enough to fill a screen on their own and must keep their own flow. */

body.l-short {
    min-height: 100vh;
    /* dvh accounts for a mobile browser's collapsing address bar; the vh above
       stays as the fallback for anything that does not know it. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.l-short main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.l-short main > .l-cta {
    flex: 1;
    display: flex;
    align-items: center;
}

body.l-short .l-cta-inner { width: 100%; }