/* DamagePort - the public site. One stylesheet, no framework.
   Ink (deep navy) for the dark bands, warm paper (ivory) for the reading bands, mint for every accent
   (owner, 2026-10-09: deep navy + warm ivory + fresh mint + atmospheric smoke). The claim-file mocks keep the
   app's own money colours: green = money in, gold = money out, maroon only for a real problem. Fraunces for display, Public Sans for reading,
   JetBrains Mono for the things a claim file numbers (KITCH-004). */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/fraunces.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/public-sans.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 300 800; font-display: swap; src: url("../fonts/public-sans-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
    --ink: #0c1722;
    --ink-2: #122235;
    --ink-3: #1a3049;
    --ink-line: rgba(214, 228, 245, 0.12);
    --on-ink: #eef2f7;
    --on-ink-muted: #a7b4c4;

    --paper: #f5f0e6;
    --paper-2: #ebe3d2;
    --card: #fffdf8;
    --text: #18222e;
    --muted: #5b6573;
    --line: #dcd2bf;

    /* Mint (2026-10-09): the ONLY accent family. Fresh = buttons and accents on ink; Seafoam = hover;
       Deep = darker accents / selected; Soft = quiet highlights. Mint is too light for text on ivory, so
       text, links and focus rings on the paper bands use --mint-ink (a darker shade of Deep Mint, 5.6:1 on
       ivory) and --mint-ink-2 on hover. Tints: --mint-rgb / --mint-deep-rgb in rgba(). */
    --mint: #72d6b1;
    --mint-2: #63cdb1;
    --mint-deep: #45b998;
    --mint-soft: #9adfc8;
    --mint-ink: #2f6a59;
    --mint-ink-2: #255547;
    --mint-rgb: 114, 214, 177;
    --mint-deep-rgb: 69, 185, 152;
    --mark: var(--mint);
    --green: #2a9a5e;
    --green-bright: #3cc47c;
    --gold: #c28a14;
    --gold-bright: #e2b03a;
    --maroon: #a2283a;

    --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --f-body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    --wrap: 1180px;
    --gutter: 24px;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(12, 23, 34, 0.06), 0 8px 28px rgba(12, 23, 34, 0.08);
    --shadow-ink: 0 2px 4px rgba(0, 0, 0, 0.25), 0 18px 48px rgba(0, 0, 0, 0.35);
    --header-h: 68px;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font: 400 17px/1.62 var(--f-body);
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--mint-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--mint-ink-2); }
:focus-visible { outline: 2px solid var(--mint-ink); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible, .site-head :focus-visible, .site-foot :focus-visible, .foot-bar :focus-visible { outline-color: var(--mint); }
::selection { background: rgba(var(--mint-rgb), 0.38); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 520; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.5em; font-optical-sizing: auto; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.9rem); font-weight: 480; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; }
h4 { font-size: 1.1rem; }
em.accent, h1 em, h2 em { font-style: italic; font-weight: 400; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.55; color: var(--muted); max-width: 40em; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); font-size: 0.86em; letter-spacing: 0; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--card); color: var(--text); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- eyebrow + buttons */
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.6em;
    font: 500 0.74rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mint-ink); margin: 0 0 1.25rem;
}
.eyebrow::before { content: ""; width: 0.55em; height: 0.55em; background: currentColor; border-radius: 2px; }
.on-ink .eyebrow { color: var(--mint); }
.eyebrow.is-gold { color: var(--gold); }
.on-ink .eyebrow.is-gold { color: var(--gold-bright); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    min-height: 48px; padding: 0 1.35rem; border-radius: 999px;
    font: 600 0.98rem/1 var(--f-body); text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--mint); color: var(--ink); border-color: var(--mint-deep); }
.btn-primary:hover { background: var(--mint-2); color: var(--ink); }
.on-ink .btn-primary, .site-head .btn-primary { border-color: transparent; }
.btn-ghost { border-color: currentColor; color: var(--text); background: transparent; }
.btn-ghost:hover { background: rgba(24, 34, 46, 0.06); color: var(--text); }
.on-ink .btn-ghost { color: var(--on-ink); border-color: rgba(238, 242, 247, 0.4); }
.on-ink .btn-ghost:hover { background: rgba(238, 242, 247, 0.08); color: #fff; border-color: rgba(238, 242, 247, 0.7); }
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------- header */
.site-head {
    position: sticky; top: 0; z-index: 50;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    color: var(--on-ink);
}
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 650 1.2rem/1 var(--f-body); letter-spacing: -0.01em; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.brand:hover { color: #fff; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--on-ink-muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 8px 12px; border-radius: 8px; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 4px; background: var(--mint); border-radius: 2px; }
.head-cta { display: flex; align-items: center; gap: 8px; }
.head-cta .signin { color: var(--on-ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 8px 12px; }
.head-cta .signin:hover { color: #fff; text-decoration: underline; }
.head-cta .btn { min-height: 40px; padding: 0 1.05rem; font-size: 0.92rem; }
.burger { display: none; background: none; border: 1px solid var(--ink-line); color: #fff; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; margin: auto; position: relative; transition: transform 0.2s ease; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.site-head.is-open .burger span { background: transparent; }
.site-head.is-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.site-head.is-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
    .burger { display: block; }
    .site-head .wrap { gap: 12px; }
    .nav, .head-cta .signin { display: none; }
    .site-head.is-open .nav {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: absolute; left: 0; right: 0; top: var(--header-h);
        background: var(--ink); border-bottom: 1px solid var(--ink-line);
        padding: 8px var(--gutter) 20px;
    }
    .site-head.is-open .nav a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--ink-line); border-radius: 0; }
    .site-head.is-open .nav a[aria-current="page"]::after { display: none; }
    .site-head.is-open .nav .nav-signin { display: block; }
}
.nav .nav-signin { display: none; }
@media (max-width: 420px) { .head-cta .btn { padding: 0 0.85rem; } .brand span { font-size: 1.08rem; } }

/* ---------------------------------------------------------------- bands */
:root { --fade-x: 210px; --band-share: 0.9; --fade-split: 0.8; --fade-round: 0.42; } /* owner's pick, 2026-10-10 (fade tuner) */
.band {
    --band-pad: clamp(64px, 9vw, 120px); --pad-t: var(--band-pad); --pad-b: var(--band-pad);
    --pad-top-x: 0px; --pad-bot-x: 0px; --cut-top: 0px; --cut-bot: 0px;
    --band-fade: calc(var(--fade-x) + var(--band-pad) * var(--band-share));
    padding: calc(var(--pad-t) + var(--pad-top-x) - var(--cut-top)) 0 calc(var(--pad-b) + var(--pad-bot-x) - var(--cut-bot));
    position: relative;
}
.band.tight { --band-pad: clamp(48px, 6vw, 80px); }
.band:not(.on-ink) { background: var(--paper); }
.band.paper-2 { background: var(--paper-2); }
.band.on-ink { background: transparent; }
/* Ivory bands fade into the smoke (owner, 2026-10-09; picked live with the local fade tuner - assets/js/fade-tuner.js):
   top AND bottom, wherever an ivory band meets a navy band (or the footer). A faded edge gets TALLER by --fade-x
   (extra padding), and the fade runs over that extra room plus --band-share of the normal padding (both on :root; owner's
   pick 2026-10-10: 210px + 90% = 318px on a wide screen). At 1 the fade would end exactly where the words start -
   never go past 1. An edge against another ivory band stays hard (a fade there would show a strip of smoke). The fade is
   EASED, not a straight line: it lingers near the smoke and settles gently into the ivory at both ends (a straight
   navy-to-ivory ramp reads as an edge). */
.band:not(.on-ink) { --band-rgb: 245, 240, 230; --fade-top: 0px; --fade-bot: 0px; background: transparent; isolation: isolate; }
/* ROUNDED CORNERS (owner, 2026-10-10: "sexy"; --fade-round 0.42): the ivory is painted on a ::before layer (so a mask
   never touches the words) and each fade strip is masked by a wide ellipse - full strength down the middle, thinning
   toward the outer corners - so the smoke reaches deeper at the sides and the edge reads as a soft dome, not a ruler
   line. --fade-round (0.1 tight corners ... 0.5 a bow across the whole width) = how far in from the corner it starts.
   The strip's bottom row and centre column stay solid, so it never seams with the body or changes the middle.
   No mask support = the straight fade, as before. */
.band:not(.on-ink)::before {
    --s: calc(1 - var(--fade-round));
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse calc(50% / var(--s)) calc(100% / var(--s)) at 50% 100%, #000 calc(var(--s) * 100%), transparent),
        linear-gradient(#000, #000),
        radial-gradient(ellipse calc(50% / var(--s)) calc(100% / var(--s)) at 50% 0%, #000 calc(var(--s) * 100%), transparent);
    mask-image: radial-gradient(ellipse calc(50% / var(--s)) calc(100% / var(--s)) at 50% 100%, #000 calc(var(--s) * 100%), transparent),
        linear-gradient(#000, #000),
        radial-gradient(ellipse calc(50% / var(--s)) calc(100% / var(--s)) at 50% 0%, #000 calc(var(--s) * 100%), transparent);
    -webkit-mask-size: 100% var(--fade-top), 100% calc(100% - var(--fade-top) - var(--fade-bot) + 2px), 100% var(--fade-bot);
    mask-size: 100% var(--fade-top), 100% calc(100% - var(--fade-top) - var(--fade-bot) + 2px), 100% var(--fade-bot);
    -webkit-mask-position: 0 0, 0 calc(var(--fade-top) - 1px), 0 100%;
    mask-position: 0 0, 0 calc(var(--fade-top) - 1px), 0 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    background: linear-gradient(to bottom,
        rgba(var(--band-rgb), 0) calc(var(--fade-top) * 0),
        rgba(var(--band-rgb), 0.02) calc(var(--fade-top) * 0.1),
        rgba(var(--band-rgb), 0.07) calc(var(--fade-top) * 0.2),
        rgba(var(--band-rgb), 0.15) calc(var(--fade-top) * 0.3),
        rgba(var(--band-rgb), 0.26) calc(var(--fade-top) * 0.4),
        rgba(var(--band-rgb), 0.39) calc(var(--fade-top) * 0.5),
        rgba(var(--band-rgb), 0.53) calc(var(--fade-top) * 0.6),
        rgba(var(--band-rgb), 0.68) calc(var(--fade-top) * 0.7),
        rgba(var(--band-rgb), 0.82) calc(var(--fade-top) * 0.8),
        rgba(var(--band-rgb), 0.93) calc(var(--fade-top) * 0.9),
        rgba(var(--band-rgb), 1) calc(var(--fade-top) * 1),
        rgba(var(--band-rgb), 1) calc(100% - var(--fade-bot) * 1),
        rgba(var(--band-rgb), 0.93) calc(100% - var(--fade-bot) * 0.9),
        rgba(var(--band-rgb), 0.82) calc(100% - var(--fade-bot) * 0.8),
        rgba(var(--band-rgb), 0.68) calc(100% - var(--fade-bot) * 0.7),
        rgba(var(--band-rgb), 0.53) calc(100% - var(--fade-bot) * 0.6),
        rgba(var(--band-rgb), 0.39) calc(100% - var(--fade-bot) * 0.5),
        rgba(var(--band-rgb), 0.26) calc(100% - var(--fade-bot) * 0.4),
        rgba(var(--band-rgb), 0.15) calc(100% - var(--fade-bot) * 0.3),
        rgba(var(--band-rgb), 0.07) calc(100% - var(--fade-bot) * 0.2),
        rgba(var(--band-rgb), 0.02) calc(100% - var(--fade-bot) * 0.1),
        rgba(var(--band-rgb), 0) calc(100% - var(--fade-bot) * 0));
}
.band.paper-2 { --band-rgb: 235, 227, 210; }
.band.on-ink + .band:not(.on-ink) { --fade-top: var(--band-fade); --pad-top-x: var(--fade-x); }
.band:not(.on-ink):has(+ .band.on-ink), main > .band:not(.on-ink):last-child { --fade-bot: var(--band-fade); --pad-bot-x: var(--fade-x); }
/* SPLIT THE DIFFERENCE (owner, 2026-10-10: "That fixed it!"): the navy band beside a fade gives up --fade-split
   (owner's pick 0.8; 1 = all) of the fade's length from its own padding, so the fade reaches into the navy band instead of sitting
   wholly inside the ivory one - capped at that padding, so the navy band's words never move under the fade (at 1
   the navy padding next to a fade is 0 on most widths). --fade-split: 0 = the fade stays in the ivory band. */
.band.on-ink:has(+ .band:not(.on-ink)) { --cut-bot: min(var(--pad-b), calc(var(--band-fade) * var(--fade-split))); }
.band:not(.on-ink) + .band.on-ink { --cut-top: min(var(--pad-t), calc(var(--band-fade) * var(--fade-split))); }
.on-ink { background: var(--ink); color: var(--on-ink); }
.on-ink .lede, .on-ink .muted { color: var(--on-ink-muted); }
.on-ink a:not(.btn) { color: var(--mint); }
.on-ink a:not(.btn):hover { color: var(--mint-soft); }
.on-ink h1, .on-ink h2, .on-ink h3 { color: #fff; }
.band-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.band-head.center { margin-inline: auto; }

/* Atmospheric smoke (owner, 2026-10-09; replaced the ruled grid - never bring a grid, dots or circuit lines
   back). ONE smoke picture pinned to the WINDOW behind the page: every navy band (and the footer) is see-through,
   so each one is a window onto the same smoke as the page scrolls past - no band has its own copy, so nothing
   is ever cut at a band's edge. The ivory bands and the sticky header stay solid.
   The picture is rendered ONCE from SVG turbulence (www.damageport.com/art/smoke/render.py - seafoam / teal smoke that reads as smoke,
   heaviest at the window's edges, thin behind the headline): smoke.webp landscape,
   smoke-tall.webp portrait (only one is downloaded). The drift is transform only, 97 s, eased, never looped
   back to front; prefers-reduced-motion stops it (the global rule). Decorative: no pointer events. */
html { background: var(--ink); }
body { background: transparent; }
body::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    top: -4vh; left: -4vw; width: 108vw; height: 108vh; height: 108lvh;
    background: var(--ink) url("../img/smoke.webp?v=3") center / cover no-repeat;
    will-change: transform; animation: smoke-drift 97s ease-in-out infinite alternate;
}
@media (orientation: portrait) { body::before { background-image: url("../img/smoke-tall.webp?v=4"); } }
@keyframes smoke-drift {
    0%   { transform: translate3d(-1.2%, 0.5%, 0) scale(1.01); }
    45%  { transform: translate3d(0.6%, -0.8%, 0) scale(1.03); }
    100% { transform: translate3d(1.6%, 0.3%, 0) scale(1.02); }
}

/* ---------------------------------------------------------------- hero */
.hero { --pad-t: clamp(56px, 8vw, 104px); --pad-b: clamp(64px, 9vw, 120px); overflow: hidden; }
.hero-grid { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; z-index: 1; }
.hero h1 { margin-bottom: 0.4em; }
.hero h1 em { color: var(--mint); }
.hero .lede { margin-bottom: 2rem; }
.hero-note { margin-top: 1.4rem; font-size: 0.88rem; color: var(--on-ink-muted); }
.hero-note strong { color: var(--on-ink); font-weight: 600; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.page-hero { --pad-t: clamp(56px, 7vw, 96px); --pad-b: clamp(48px, 6vw, 80px); }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); max-width: 16em; }
.page-hero .lede { max-width: 44em; }

/* ---------------------------------------------------------------- the claim-file mock (pure HTML, never a screenshot) */
.file { position: relative; display: grid; gap: 14px; }
.file .sheet {
    background: #f9f6ef; color: var(--text); border-radius: var(--radius);
    box-shadow: var(--shadow-ink); padding: 18px 20px; position: relative;
}
.file .sheet.dark { background: var(--ink-2); color: var(--on-ink); border: 1px solid var(--ink-line); }
.file .sheet.offset { margin-left: 13%; }
.file .sheet.inset { margin-right: 9%; }
@media (min-width: 961px) { .file .sheet.tilt { transform: rotate(-1.2deg); } .file .sheet.tilt-r { transform: rotate(0.8deg); } }

.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.inv-id { font: 600 0.78rem/1 var(--f-mono); color: var(--mint-ink); background: rgba(var(--mint-deep-rgb), 0.14); padding: 5px 8px; border-radius: 6px; letter-spacing: 0.02em; }
.dark .inv-id { color: var(--mint); background: rgba(var(--mint-rgb), 0.14); }
.sheet-title { font: 600 1.06rem/1.3 var(--f-body); margin: 0 0 4px; }
.sheet-sub { font-size: 0.82rem; color: var(--muted); margin: 0; }
.dark .sheet-sub { color: var(--on-ink-muted); }
.sheet-label { font: 500 0.68rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.dark .sheet-label { color: var(--on-ink-muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { --c: var(--mint-deep); display: inline-flex; align-items: center; gap: 5px; font: 600 0.72rem/1 var(--f-body); padding: 5px 9px; border-radius: 999px;
        background: color-mix(in srgb, var(--c) 15%, transparent); color: color-mix(in srgb, var(--c) 72%, #111); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); white-space: nowrap; }
.dark .chip, .on-ink .chip { color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 22%, transparent); }
.on-ink .sheet:not(.dark) .chip { color: color-mix(in srgb, var(--c) 72%, #111); background: color-mix(in srgb, var(--c) 15%, transparent); }
.chip.smoke { --c: #8a7f6d; } .chip.loss { --c: var(--maroon); } .chip.ok { --c: var(--green); } .chip.gold { --c: var(--gold); } .chip.mint { --c: var(--mint-deep); } .chip.teal { --c: #1f8f9a; }
/* mint is light: on a light sheet its chip text is --mint-ink (the 72%-dark mix of Deep Mint reads only 3.4:1) */
.chip.mint { color: var(--mint-ink); }
.dark .chip.mint, .on-ink .chip.mint { color: color-mix(in srgb, var(--c) 45%, #fff); }
.on-ink .sheet:not(.dark) .chip.mint { color: var(--mint-ink); }

.money-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.dark .money-row { border-color: var(--ink-line); }
.money-row div { min-width: 0; }
.money-row span { display: block; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.dark .money-row span { color: var(--on-ink-muted); }
.money-row b { font: 600 0.98rem/1.2 var(--f-mono); }
.in { color: var(--green); } .out { color: var(--gold); } .bad { color: var(--maroon); }
.dark .in, .on-ink .in { color: var(--green-bright); } .dark .out, .on-ink .out { color: var(--gold-bright); }

.bar { display: flex; height: 12px; border-radius: 999px; background: rgba(12, 23, 34, 0.08); overflow: hidden; margin: 10px 0 8px; }
.dark .bar { background: rgba(255, 255, 255, 0.08); }
.bar i { display: block; height: 100%; }
.bar .paid { background: var(--green-bright); }
.bar .claimed { background: var(--gold-bright); }
.bar .unpaid { background: #7a2232; }
.bar-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.76rem; color: var(--muted); }
.dark .bar-key { color: var(--on-ink-muted); }
.bar-key i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -0.5px; }

.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tl li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 0.84rem; }
.tl time { font: 500 0.74rem/1.3 var(--f-mono); color: var(--muted); }
.dark .tl time { color: var(--on-ink-muted); }
.tl b { font-weight: 600; }
.tl .amt { font: 600 0.82rem/1 var(--f-mono); }

/* ---------------------------------------------------------------- statement strip */
.statement { font-family: var(--f-display); font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 30em; margin: 0; font-weight: 400; }
.statement em { color: var(--mint-ink); }
.statement-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
@media (max-width: 860px) { .statement-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step; border-top: 1px solid var(--ink-line); }
.steps li { padding: 28px 24px 8px 0; position: relative; counter-increment: step; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--ink-line); }
.steps li::before { content: "0" counter(step); display: block; font: 500 0.8rem/1 var(--f-mono); color: var(--mint); margin-bottom: 18px; letter-spacing: 0.08em; }
.steps h3 { color: #fff; margin-bottom: 0.4em; }
.steps p { color: var(--on-ink-muted); font-size: 0.96rem; margin: 0; }
@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps li:nth-child(3) { border-left: 0; padding-left: 0; }
    .steps li:nth-child(n+3) { border-top: 1px solid var(--ink-line); }
}
@media (max-width: 560px) {
    .steps { grid-template-columns: minmax(0, 1fr); }
    .steps li, .steps li + li { padding: 24px 0 20px; border-left: 0; }
    .steps li + li { border-top: 1px solid var(--ink-line); }
}

/* ---------------------------------------------------------------- feature rows */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.feature + .feature { margin-top: clamp(72px, 10vw, 128px); }
.feature.flip > :first-child { order: 2; }
.feature h2 { font-size: clamp(1.75rem, 3.2vw, 2.55rem); }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); } .feature.flip > :first-child { order: 0; } }

.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 0.98rem; }
.ticks li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 6px; background: rgba(var(--mint-deep-rgb), 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.4' fill='none' stroke='%232f6a59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.on-ink .ticks li::before { background-color: rgba(var(--mint-rgb), 0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.4' fill='none' stroke='%2372d6b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ticks b { font-weight: 600; }

/* a light "panel" frame around the paper-side mocks */
.stage { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(16px, 3vw, 28px); box-shadow: var(--shadow); }
.stage.ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-ink); }
.stage .file .sheet { box-shadow: 0 1px 2px rgba(12, 23, 34, 0.06), 0 6px 18px rgba(12, 23, 34, 0.08); border: 1px solid var(--line); }
.stage.ink .file .sheet { box-shadow: none; }

/* phone frame for the field-capture mock */
.phone { width: min(300px, 100%); margin-inline: auto; background: #0a121b; border-radius: 38px; padding: 12px; box-shadow: var(--shadow-ink), inset 0 0 0 1px rgba(255,255,255,0.08); }
.phone-screen { border-radius: 28px; overflow: hidden; background: var(--ink-2); color: var(--on-ink); }
.phone-view { aspect-ratio: 4 / 3.4; background:
    radial-gradient(120% 90% at 30% 20%, rgba(226, 176, 58, 0.18), transparent 60%),
    radial-gradient(90% 80% at 80% 90%, rgba(120, 140, 165, 0.16), transparent 60%),
    linear-gradient(160deg, #2a3442, #121b26); position: relative; }
.phone-view::before { content: ""; position: absolute; inset: 18% 22%; border: 2px solid rgba(255,255,255,0.75); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,0.12); }
/* The shutter (owner, 2026-10-09): red like a phone camera - white ring, a gap, a red disc. */
.phone-view .shot { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); box-sizing: border-box; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; padding: 3px; background: #ff3b30; background-clip: content-box; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.phone-view .rec { position: absolute; top: 10px; left: 12px; font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.08em; color: #fff; background: rgba(0,0,0,0.35); padding: 5px 7px; border-radius: 6px; }
.phone-fields { padding: 14px; display: grid; gap: 9px; font-size: 0.8rem; }
.pf { display: grid; gap: 3px; }
.pf span { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-muted); }
.pf b { font-weight: 500; background: rgba(255,255,255,0.06); border: 1px solid var(--ink-line); padding: 7px 9px; border-radius: 8px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.seg i { font-style: normal; text-align: center; font-size: 0.66rem; padding: 6px 2px; border-radius: 6px; background: rgba(255,255,255,0.05); color: var(--on-ink-muted); }
.seg i.on { background: rgba(var(--mint-rgb), 0.2); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--mint-rgb), 0.6); }
.phone-nav { display: grid; grid-template-columns: 34px 34px 1fr 34px 34px; gap: 4px; padding: 0 14px 16px; }
.phone-nav i { font-style: normal; display: grid; place-items: center; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.06); font-size: 0.75rem; color: var(--on-ink-muted); }
.phone-nav i.save { background: var(--mark); color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- posture demo */
.posture { display: grid; gap: 16px; }
.posture-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.posture-band { font: 600 1.05rem/1 var(--f-body); }
.posture-band small { font: 500 0.8rem/1 var(--f-mono); color: var(--on-ink-muted); margin-left: 6px; }
.posture input[type="range"] { width: 100%; accent-color: var(--mark); height: 28px; margin: 0; cursor: pointer; }
.posture-scale { display: flex; justify-content: space-between; font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-muted); margin-top: -6px; }
.comps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.comps li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ink-line); font-size: 0.86rem; transition: background-color 0.2s ease, border-color 0.2s ease; }
.comps li .where { color: var(--on-ink-muted); font-size: 0.78rem; display: block; }
.comps li .price { font: 600 0.92rem/1 var(--f-mono); }
.comps li .pick { font: 600 0.66rem/1 var(--f-mono); letter-spacing: 0.08em; color: var(--ink); background: var(--mark); padding: 4px 6px; border-radius: 5px; visibility: hidden; }
.comps li.is-picked { background: rgba(var(--mint-rgb), 0.12); border-color: rgba(var(--mint-rgb), 0.55); }
.comps li.is-picked .pick { visibility: visible; }
.posture-out { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--ink-line); }
.posture-out b { font: 600 1.6rem/1 var(--f-mono); color: #fff; }
.posture-why { font-size: 0.82rem; color: var(--on-ink-muted); margin: 0; min-height: 2.6em; }

/* ---------------------------------------------------------------- cards grid */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards, .cards.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards, .cards.two, .cards.four { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; }
.card h3 { margin-bottom: 0.45em; }
.card p { color: var(--muted); font-size: 0.97rem; }
.card p:last-child { margin-bottom: 0; }
.card .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--mint-deep-rgb), 0.14); color: var(--mint-ink); margin-bottom: 18px; }
.card .icon svg { width: 22px; height: 22px; }
.card .more { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.card .role-tag { font: 500 0.7rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.on-ink .card { background: var(--ink-2); border-color: var(--ink-line); }
.on-ink .card p { color: var(--on-ink-muted); }
.on-ink .card .icon { background: rgba(var(--mint-rgb), 0.14); color: var(--mint); }

/* ---------------------------------------------------------------- the "everything on one claim" index */
.index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.index > div { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); }
.index > div:not(:nth-child(3n+1)) { padding-left: 22px; border-left: 1px solid var(--line); }
.index h4 { font-family: var(--f-body); font-weight: 650; font-size: 1rem; letter-spacing: 0; margin-bottom: 0.35em; display: flex; gap: 10px; align-items: baseline; }
.index h4 .mono { color: var(--mint-ink); font-weight: 500; font-size: 0.74rem; }
.index p { color: var(--muted); font-size: 0.92rem; margin: 0; }
@media (max-width: 900px) {
    .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .index > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
    .index > div:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
    .index { grid-template-columns: minmax(0, 1fr); }
    .index > div, .index > div:nth-child(2n) { padding: 18px 0; border-left: 0; }
}

/* ---------------------------------------------------------------- layouts (DamagePort / X-Port) */
.layouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) { .layouts { grid-template-columns: minmax(0, 1fr); } }
.layout { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-line); background: var(--ink-2); }
.layout-shot { aspect-ratio: 16 / 9.5; display: grid; grid-template-columns: 26% 1fr; }
.layout-shot .side { background: #0f1823; border-right: 1px solid var(--ink-line); padding: 10px; display: grid; align-content: start; gap: 6px; }
.layout-shot .side i { display: block; height: 7px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.layout-shot .side i.on { background: var(--mark); width: 70%; }
.layout-shot .main { padding: 12px; display: grid; align-content: start; gap: 7px; }
.layout-shot .main i { display: block; height: 9px; border-radius: 3px; background: rgba(255,255,255,0.07); }
.layout-shot .main i.h { height: 14px; width: 45%; background: rgba(255,255,255,0.16); }
.layout-shot .main .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.layout-shot .main .tiles i { height: 30px; border-radius: 6px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--ink-line); }
.layout-shot.xp { grid-template-columns: 30% 1fr; }
.layout-shot.xp .side { background: #34495e; gap: 7px; }
.layout-shot.xp .side i { background: rgba(255,255,255,0.18); }
.layout-shot.xp .side i.on { background: #ffb900; width: 60%; }
.layout-shot.xp .main { background: #eef1f4; }
.layout-shot.xp .main i { background: #d6dde4; }
.layout-shot.xp .main i.h { background: #1a8fd1; width: 30%; }
.layout-shot.xp .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid #c9d2db; }
.layout-shot.xp .grid i { height: 11px; border-radius: 0; border-right: 1px solid #c9d2db; border-bottom: 1px solid #c9d2db; background: #fff; }
.layout-body { padding: 18px 20px 22px; }
.layout-body h3 { margin-bottom: 0.3em; }
.layout-body p { color: var(--on-ink-muted); font-size: 0.95rem; margin: 0; }

/* ---------------------------------------------------------------- trust list */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
@media (max-width: 760px) { .trust { grid-template-columns: minmax(0, 1fr); } }
.trust > div { padding: 22px 0; border-top: 1px solid var(--line); }
.on-ink .trust > div { border-color: var(--ink-line); }
.trust h3 { font-family: var(--f-body); font-size: 1.04rem; font-weight: 650; letter-spacing: 0; margin-bottom: 0.4em; }
.trust p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.on-ink .trust p { color: var(--on-ink-muted); }

/* ---------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 600 1.06rem/1.4 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 22px; color: var(--muted); max-width: 46em; }

/* ---------------------------------------------------------------- pricing */
.plan { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); overflow: hidden; box-shadow: var(--shadow); }
.plan-main { padding: clamp(28px, 4vw, 48px); }
.plan-side { padding: clamp(28px, 4vw, 48px); background: var(--ink); color: var(--on-ink); }
.plan-side h3 { color: #fff; }
.plan-price { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; margin: 0.2em 0 0.3em; letter-spacing: -0.02em; }
.plan-price small { font: 500 0.95rem/1 var(--f-body); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
@media (max-width: 860px) { .plan { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.mail-card { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); }
.mail-card .addr { font: 600 clamp(1.1rem, 2.4vw, 1.5rem)/1.2 var(--f-mono); word-break: break-all; display: inline-block; margin: 0.4em 0 1em; }
.checklist { margin: 0; padding-left: 1.2em; color: var(--muted); }
.checklist li { margin-bottom: 0.45em; }

/* ---------------------------------------------------------------- CTA band */
.cta { text-align: center; }
.cta h2 { max-width: 18em; margin-inline: auto; }
.cta .lede { margin: 0 auto 2rem; }
.cta .btn-row { justify-content: center; }

/* ---------------------------------------------------------------- footer */
/* The main footer fades in from the smoke: see-through at its top edge, solid DamagePort Navy from --foot-fade down
   (owner, 2026-10-09: "about 50%, the rate may change"; 65% since - change the one number). No top border: a line would undo the fade. */
.site-foot { --foot-fade: 65%; background: linear-gradient(to bottom, rgba(12, 23, 34, 0), var(--ink) var(--foot-fade)); color: var(--on-ink-muted); padding: 64px 0 48px; font-size: 0.92rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }
.site-foot .brand { margin-bottom: 14px; }
.site-foot h4 { font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink); margin: 6px 0 16px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot a, .foot-bar a { color: var(--on-ink-muted); text-decoration: none; }
.site-foot a:hover, .foot-bar a:hover { color: #fff; text-decoration: underline; }
.foot-tag { max-width: 24em; margin: 0; }
/* The Xactware trademark note: in the main footer, under the columns, on pages that name Xactimate (tm=1). */
.foot-tm { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--ink-line); font-size: 0.76rem; line-height: 1.55; color: rgba(167, 180, 196, 0.75); }
/* The bottom bar: one slim line, solid DamagePort Navy (the header's --ink) - copyright | links | owner. Desktop: pinned to
   the bottom of the window (sticky, a direct child of <body>); phones and tablets: an ordinary last line. */
.foot-bar { background: var(--ink); color: var(--on-ink-muted); border-top: 1px solid var(--ink-line); font-size: 0.82rem; }
@media (min-width: 1001px) { .foot-bar { position: sticky; bottom: 0; z-index: 40; } }
.foot-bar-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; padding-block: 14px; }
.foot-bar p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; }
.foot-links span { color: rgba(214, 228, 245, 0.3); }
.foot-owner { text-align: right; }
@media (min-width: 1100px) { .foot-copy, .foot-owner { white-space: nowrap; } }
@media (max-width: 1000px) {
  .foot-bar-row { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-block: 18px; }
  .foot-owner { text-align: center; }
}
}

/* ---------------------------------------------------------------- 404 */
.lost { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.lost .mono { color: var(--mint); }

/* reveal on scroll (site.js adds .is-in; without JS everything is simply shown) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* phones: the 16px gutter */
@media (max-width: 600px) {
    :root { --gutter: 16px; --header-h: 60px; }
    body { font-size: 16px; }
    .btn { min-height: 46px; }
    .hero .btn-row .btn { flex: 1 1 auto; }
    .file .sheet.offset { margin-left: 6%; }
    .file .sheet.inset { margin-right: 4%; }
    .money-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .money-row b { font-size: 0.86rem; }
    .tl li { grid-template-columns: 3.6rem minmax(0, 1fr) auto; }
}

/* ---------------------------------------------------------------- the "on this page" jump bar */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2rem; }
.jump a, .on-ink .jump a { font: 500 0.82rem/1 var(--f-body); color: var(--on-ink); text-decoration: none; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--ink-line); background: rgba(255, 255, 255, 0.03); }
.jump a:hover, .on-ink .jump a:hover { border-color: rgba(var(--mint-rgb), 0.6); color: #fff; background: rgba(var(--mint-rgb), 0.1); }
@media (max-width: 600px) {
    .jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
    .jump::-webkit-scrollbar { display: none; }
    .jump a { flex: 0 0 auto; }
}

/* Pricing: the plan cards (2026-10-09). Three across, two rows; a price word under the name; a quiet note at the foot. */
.cards.offers .offer { gap: 0; }
.offer h3 { margin-bottom: 0.15em; }
.offer-price { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.1; color: var(--ink) !important; margin: 0 0 0.2em; }
.offer .ticks { margin-top: 0.9rem; gap: 8px; }
.offer .ticks li { font-size: 0.93rem; }
.offer-note { margin-top: auto !important; padding-top: 14px; font-size: 0.88rem !important; }
.offer.is-custom { border-style: dashed; background: transparent; }
.offers-foot { margin-top: 1.5rem; text-align: center; }

/* Live plans (/pricing, conf/njs/plans.js): the tagline under the price, the unit beside an amount, the add-ons heading. */
.offer-tag { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--ink-2, inherit); }
.offer-price .per { font-family: inherit; font-size: 0.9rem; color: var(--muted, inherit); }
.offers-addons { margin-top: 3rem; }

/* The tagline (owner, 2026-10-09): "Born of necessity. Forged by fire." - the home hero's eyebrow and the footer's brand line. */
.eyebrow.tagline { text-transform: none; letter-spacing: 0.02em; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; }
.foot-slogan { margin: 0 0 0.6rem; font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--on-ink, #fff); }

/* Our story (owner, 2026-10-09): the home page's founder teaser (dark card, before the closing call to action) and /our-story. */
.story-card { max-width: 760px; margin-inline: auto; padding: clamp(24px, 4vw, 44px); border-radius: calc(var(--radius) + 4px); border: 1px solid var(--ink-line); box-shadow: var(--shadow-ink); }
.story-card h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 0.6em; }
.story-card p:not(.eyebrow) { font-size: 1.08rem; line-height: 1.6; color: var(--on-ink); }
.story-close { font-weight: 650; margin-top: 1.4rem; }
.story-card .btn { margin-top: 0.6rem; }
.btn-light { background: #ececec; color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--ink); }
.story-page { max-width: 720px; }
.story-page p { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.7; }
.story-page .story-close { font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; font-weight: 500; margin-top: 2rem; }
.story-page .story-intro { font-family: var(--f-display); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.45; color: var(--mint-ink); padding-bottom: 1.6rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
/* /our-story rev 2 (owner, 2026-10-09): intro, "Why I built it", the full story in a native <details> (text stays in the HTML
   for search; summary = an accessible button), the signature + P.S. inside it, and extra room so the letter ends visibly
   before the Early access band. */
.story-page .story-head { display: flex; margin: 2.6rem 0 1rem; font-size: 0.78rem; }
.story-page .story-beat { font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.3; margin: 1.2rem 0; }
.story-more { margin-top: 2.2rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.story-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.6em; min-height: 46px; padding: 0 1.2rem; border-radius: 999px;
    border: 1px solid currentColor; color: var(--mint-ink); font: 600 0.98rem/1 var(--f-body); cursor: pointer; user-select: none; }
.story-more > summary::-webkit-details-marker { display: none; }
.story-more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.story-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.story-more > summary:hover { background: rgba(var(--mint-deep-rgb), 0.1); }
.story-more .when-open, .story-more[open] .when-closed { display: none; }
.story-more[open] .when-open { display: inline; }
.story-more-body { padding-top: 1.6rem; }
.story-page .story-sign { font-family: var(--f-display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.7rem); margin: 2.2rem 0 0.2rem; line-height: 1.2; }
.story-page .story-sign span { display: block; font: 500 0.85rem/1.4 var(--f-body); font-style: normal; color: var(--muted); margin-top: 0.4rem; letter-spacing: 0.02em; }
.story-page .story-ps { font-size: 0.98rem; color: var(--muted); margin-top: 1.6rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.story-band { --pad-b: clamp(72px, 10vw, 128px); }
/* /our-story toggle rev 2 (owner, 2026-10-09): no rule above it; a centred, wider pill with a line running out from each side
   in the pill's own border colour. The summary is the whole row (lines = its ::before / ::after); the pill is .story-toggle. */
.story-more { border-top: 0; padding-top: 0; margin-top: 2.6rem; }
.story-more > summary { display: flex; align-items: center; gap: 1.1rem; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--mint-ink); }
.story-more > summary:hover { background: none; }
.story-more > summary::before, .story-more > summary::after { content: ""; flex: 1 1 0; height: 1px; width: auto; border: 0; background: currentColor; transform: none; transition: none; }
.story-more[open] > summary::after { transform: none; }
.story-more .story-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-width: 15rem; min-height: 48px; padding: 0 2rem; border: 1px solid currentColor; border-radius: 999px; transition: background-color 0.15s ease; }
.story-more .story-toggle::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.story-more[open] .story-toggle::after { transform: translateY(2px) rotate(-135deg); }
.story-more > summary:hover .story-toggle { background: rgba(var(--mint-deep-rgb), 0.1); }
.story-more > summary:focus-visible { outline: none; }
.story-more > summary:focus-visible .story-toggle { outline: 2px solid var(--mint-ink); outline-offset: 3px; }
@media (max-width: 420px) { .story-more .story-toggle { min-width: 0; padding: 0 1.4rem; } .story-more > summary { gap: 0.7rem; } }