/* Marketing landing page — a more editorial register than the app itself: a serif display
   face and mono eyebrows. Scoped under .landing so none of it leaks into the application UI.
   Colour is NOT its own: the accent tracks whichever one the resident chose, and light/dark
   follows their preference, both by deriving from the theme tokens in theme.css. */

.landing {
    /* The landing follows the accent the resident picked, rather than holding its own fixed
       civic green. It used to be independent, which meant choosing a colour at the top of the
       page changed the app around it and left "finally connected", the buttons and the section
       marks stubbornly green — the one page where the choice was most visible was the one page
       that ignored it.

       Derived, not duplicated: -deep and -wash are mixed from --ti-accent, so the dark-mode
       accent values in theme.css flow through here automatically and there is no second palette
       to keep in step. */
    --l-accent: var(--ti-accent);
    --l-accent-deep: color-mix(in srgb, var(--ti-accent) 72%, black);
    --l-accent-wash: color-mix(in srgb, var(--ti-accent) 9%, transparent);
    --l-brass: #9A7433;
    --l-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --l-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

    color: var(--ti-text);
    font-size: 1.0625rem;
    line-height: 1.65;
}

:root[data-bs-theme="dark"] .landing {
    /* --l-accent tracks --ti-accent, which theme.css already brightens for dark mode, so only
       the derived pair needs inverting: "deep" has to go LIGHTER than the accent on a dark
       background, not darker, or the emphasised text disappears into the page. */
    --l-accent-deep: color-mix(in srgb, var(--ti-accent) 75%, white);
    --l-accent-wash: color-mix(in srgb, var(--ti-accent) 14%, transparent);
    --l-brass: #CDA061;
}

.landing h1,
.landing h2,
.landing h3 {
    font-family: var(--l-display);
    font-weight: 600;
    text-wrap: balance;
    letter-spacing: -0.012em;
}

/* The section label.
   Was mono, uppercase and widely letterspaced, sitting a long way above its heading — so it
   read as a technical tag rather than a kicker, and the space between it and the heading made
   the pair look like two unrelated things. The gap belongs ABOVE the pair, not inside it: a
   label and the heading it introduces are one unit. */
.landing .eyebrow {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--l-accent);
    margin: 0 0 0.25rem;
    display: block;
}

.landing .hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.05;
    margin: 0 0 1.2rem;
}
.landing .hero h1 .em {
    color: var(--l-accent);
    font-style: italic;
}
.landing .hero .lead {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    color: var(--ti-muted);
    max-width: 62ch;
}

.landing section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--ti-border);
}
.landing .section-head { max-width: 60ch; margin-bottom: 2.2rem; }
.landing .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.8rem; }
/* The hero's label sits directly on the page rather than in a .section-head, so it needs the
   same tightening. */
.landing .hero .eyebrow { margin-bottom: 0.3rem; }
.landing .section-head p { color: var(--ti-muted); margin: 0; }
/* "Why it matters" is the argument of the whole page, and with the fragment row removed that
   section is now text alone — so the paragraph has to carry it. Full text colour and the hero's
   size, rather than the muted caption treatment the other section intros want. */
.landing .section-head p.lead {
    font-size: clamp(1.02rem, 1.4vw, 1.15rem);
    color: var(--ti-text);
}

.landing .tinted { background: var(--ti-surface-2); }

/* The "scattered files" illustration is gone. It was a row of fragments under the "Why it
   matters" paragraph, and it was restyled twice — out of monospace boxes that read as code,
   then out of anything box-like that read as tappable — before the actual problem became
   clear: with no lead-in it was orphaned text, and it said the same thing as the sentence
   directly above it. The specifics moved into that sentence. */

.landing .feature {
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-radius: 10px;
    padding: 1.4rem 1.3rem;
    height: 100%;
}
/* No index numbers on these cards. "How it works" is a SEQUENCE — collect, extract, connect,
   explore — where a number means something. This is a SET of six capabilities in no order at
   all, so numbering them promised a progression that doesn't exist, and read as inconsistent
   with the steps because the two were doing different jobs with the same decoration. */
.landing .feature h3 { font-size: 1.18rem; margin: 0 0 0.4rem; }
.landing .feature p { font-size: 0.96rem; color: var(--ti-muted); margin: 0; }

/* Who it's for.
   These used to borrow .node — the monospace pill built for the interconnection diagram — so
   sentences about people rendered as code tokens in variable-width bubbles that wrapped into a
   ragged row. Now a real list of cards.

   Flex, not grid: five items never divide evenly into a column grid, and four columns strand the
   fifth beside a dead gap — the same raggedness in a smarter outfit. A fixed basis with centring
   gives balanced rows and makes whatever wraps read as deliberate. */
.landing .audience {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}
.landing .audience li {
    flex: 0 1 18rem;
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    /* The accent edge does the work the em dash used to: it separates who from what, and ties
       these to the section marks without turning them into full feature cards. */
    border-left: 3px solid color-mix(in srgb, var(--l-accent) 55%, transparent);
    border-radius: 10px;
    padding: 0.8rem 1rem;
}
.landing .audience b {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}
.landing .audience span {
    display: block;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ti-muted);
}

/* The interconnection trail.
   A GRID, not a wrapping flex row. Sized by their own text, the pills put every row out of step
   with the one above — "751 Hope Rd" is half the width of "Town Council meeting", so the arrows
   and the nodes after them never lined up and the whole thing read as ragged rather than as a
   diagram. Equal columns make the rows align, which is the entire point of showing two of them. */
.landing .flow-line {
    display: grid;
    /* The connector columns are FIXED, not auto. Sized to their content they take the width of
       their verb, so "adopts" and "reviewed at" pushed the middle node to a different x in each
       row — the rows still didn't line up, just less obviously. */
    grid-template-columns: 1fr 7rem 1fr 7rem 1fr;
    align-items: stretch;
    gap: 0.5rem;
}
/* A diagram node, not a button.
   These were white cards with a border and a button's corner radius, so people read them as
   controls — and reported the whole illustration as the product's UI. They are a picture of how
   records connect. Flat tint, no card, no shadow, not tappable-looking. */
.landing .node {
    font-family: var(--l-mono);
    font-size: 0.82rem;
    padding: 0.6rem 0.8rem;
    background: color-mix(in srgb, var(--ti-border) 28%, transparent);
    border: 0;
    border-radius: 4px;
    color: var(--ti-text);
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* The emphasised node is emphasised by its TEXT, not by a fill.
   It used to carry a green wash plus a green left rule, and because the two rows put their
   accent nodes in the same column, the fills stacked into what read as a green band running
   through the middle of the diagram — a section of the page rather than two highlighted
   items. The colour survives where it can't gang up: on the words themselves. */
.landing .node.k-accent {
    color: var(--l-accent-deep);
}
.landing .arrow {
    color: var(--ti-muted);
    font-family: var(--l-mono);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0 0.15rem;
}
/* The verb is the meaning of the diagram — "adopts", "codified as" — so it gets read, not
   squinted at. Was 0.6rem, which is below the size anyone actually reads. */
.landing .arrow small {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    /* The deep accent, at full strength. The accent at 0.85 opacity came out as #3f83ed on
       the panel — 3.35:1 at 10.5px, the worst contrast on the site, on the words that carry
       the diagram's whole meaning. Small uppercase text is exactly where a tint is least
       affordable. */
    color: var(--l-accent-deep);
}

/* Narrow screens: five columns can't hold a sentence. Stack, and turn the arrows to match. */
@media (max-width: 720px) {
    .landing .flow-line {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .landing .arrow {
        flex-direction: row;
        gap: 0.5rem;
    }
    .landing .arrow::first-line { line-height: 1; }
}

.landing blockquote {
    margin: 2rem 0 0;
    padding-left: 1.2rem;
    border-left: 3px solid var(--l-accent);
    font-family: var(--l-display);
    font-style: italic;
    font-size: 1.18rem;
    max-width: 60ch;
}

.landing .step .num {
    font-family: var(--l-mono);
    font-size: 0.8rem;
    color: var(--l-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--l-accent) 40%, transparent);
    background: var(--l-accent-wash);
    margin-bottom: 0.7rem;
}

.landing .stat .n {
    font-family: var(--l-display);
    font-size: 2rem;
    color: var(--l-accent);
    line-height: 1;
}
.landing .stat .l {
    font-family: var(--l-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ti-muted);
    margin-top: 0.35rem;
}

/* CTAs use the landing's own green rather than the app accent, so the marketing page
   keeps one confident voice regardless of the theme a visitor has chosen. */
.landing .btn-civic {
    background: var(--l-accent);
    border: 1px solid var(--l-accent);
    color: #fff;
    padding: 0.6rem 1.3rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}
.landing .btn-civic:hover { background: var(--l-accent-deep); border-color: var(--l-accent-deep); color: #fff; }
.landing .btn-civic-outline {
    border: 1px solid var(--ti-border);
    color: var(--ti-text);
    padding: 0.6rem 1.3rem;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
}
.landing .btn-civic-outline:hover { border-color: var(--l-accent); color: var(--l-accent); }

/* ── Audience chooser (AudienceNav) ────────────────────────────────────────────
   The six-way split. Built as LINKS, not the .audience pills above, because these
   go somewhere and the older list does not — a card that navigates must look
   clickable and take focus, or it fails both a mouse user's expectation and a
   keyboard user's outright. */
.landing .audience-grid {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.9rem;
}
.landing .audience-grid > li { margin: 0; }
.landing .audience-grid a {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 1rem 1.1rem;
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-left: 3px solid color-mix(in srgb, var(--l-accent) 55%, transparent);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
.landing .audience-grid a:hover,
.landing .audience-grid a:focus-visible {
    border-left-color: var(--l-accent);
    border-color: color-mix(in srgb, var(--l-accent) 40%, var(--ti-border));
    transform: translateY(-2px);
}

/* An arrow, so a card reads as somewhere to GO rather than as a panel of copy. The whole card
   is already the link; this is the affordance that says so before the pointer arrives.
   aria-hidden by construction — it is generated content, so a screen reader never announces a
   stray arrow after the link text. */
.landing .audience-grid a .who::after {
    content: "→";
    margin-left: 0.4rem;
    color: var(--l-accent);
    opacity: 0.55;
    transition: transform .15s ease, opacity .15s ease;
    display: inline-block;
}
.landing .audience-grid a:hover .who::after,
.landing .audience-grid a:focus-visible .who::after {
    opacity: 1;
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    .landing .audience-grid a .who::after,
    .landing .audience-grid a:hover .who::after { transition: none; transform: none; }
}
/* Never suppress the focus ring — the whole card is the target, so the ring is the
   only thing telling a keyboard user where they are. */
.landing .audience-grid a:focus-visible {
    outline: 3px solid var(--l-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .landing .audience-grid a { transition: none; }
    .landing .audience-grid a:hover,
    .landing .audience-grid a:focus-visible { transform: none; }
}
.landing .audience-grid .who {
    font-weight: 600;
    font-size: 0.98rem;
}
.landing .audience-grid .says {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--l-accent);
}
.landing .audience-grid .gist {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ti-muted);
}
.landing .audience-grid.compact { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.landing .audience-grid.compact a { padding: 0.6rem 0.8rem; }

/* ── Day in the life ──────────────────────────────────────────────────────────
   An ordered list of moments through a working day. <ol> because the order is the
   content — it is a narrative, and a screen reader announcing "list of 6" with
   position is doing exactly the right thing. */
.landing .day {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    counter-reset: none;
}
.landing .day > li {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--ti-border);
}
.landing .day > li:last-child { border-bottom: 1px solid var(--ti-border); }
.landing .day .when {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--l-accent);
    font-size: 0.92rem;
    padding-top: 0.1rem;
}
.landing .day .what { margin: 0; }
.landing .day .what b { display: block; margin-bottom: 0.2rem; }
.landing .day .what span {
    display: block;
    color: var(--ti-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}
@media (max-width: 34rem) {
    .landing .day > li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* An honest-limits callout. Marketing pages that admit what the product cannot do
   need somewhere to say it that does not look like a warning about the reader's
   own action — hence neutral, not amber. */
.landing .candid {
    background: var(--ti-surface);
    border: 1px solid var(--ti-border);
    border-left: 3px solid var(--ti-muted);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-top: 1.2rem;
}
.landing .candid p:last-child { margin-bottom: 0; }