/* Design tokens — spec §2.10. Paper, ink, muted, line, a deep-teal accent, and the five output-class colours of §4.4.
   --seal and --ledger survive as aliases so every Plans 2–3 selector below keeps its meaning. */
:root{
  --paper:#faf9f6;--ink:#1c1b18;--muted:#6b6760;--line:#e6e2da;--card:#fffefb;--sunk:#f2efe8;
  --accent:#0f6b66;--accent-ink:#ffffff;--accent-soft:#e4efee;--accent-warn:#8a5a12;--accent-warn-soft:#f7efe1;
  --oc-document:#6b6760;--oc-memo:#2b5c9b;--oc-workpaper:#4a5568;--oc-filing:#6b4a9b;--oc-professional:#8a5a12;
  --seal:var(--accent-warn);--ledger:var(--accent);
  --radius:8px;--sidebar:240px;--measure:1100px;--gutter:24px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Inter,"IBM Plex Sans","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.2;margin:0 0 12px;font-weight:600;letter-spacing:-.01em}
h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)}.small{font-size:.85rem}.date,.num,td.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* R40: the first tab stop on every page. Twenty-two of them — the org select, the new-org box, "+ Add" and ten
   links — stood between the top of the document and the first link a reader came for. Off-screen until focused, so
   it costs a sighted reader nothing and a keyboard reader one keystroke. `main` takes tabindex="-1" so the jump
   moves focus and not merely the scroll position. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;padding:10px 14px;background:var(--accent);color:var(--accent-ink);border-radius:0 0 6px 0;text-decoration:none}
.skip-link:focus{left:0}
main:focus{outline:none}
/* the flash on /login after signing out (C20) — a statement, not an alert */
.flash{margin:0 0 14px;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 6px 6px 0}
/* G04: message.html and not_found.html share one wrapper, so the 403, the 404 and the 405 cannot drift apart */
.error-page{max-width:70ch}
/* the drawer toggle's own label — used by _topbar.html at every width and shown only inside the ≤640px drawer (C28) */
.menu-label{margin-left:2px}
/* R02: the submit state. `app/static/app.js` adds `.is-busy` when a form with a [data-busy] button is submitted and
   disables the button a tick later (a tick, not immediately: a button disabled during its own submit event is dropped
   from the data the browser sends). Both need a resting look, or the only signal is the changed label — and a class
   a script sets and no stylesheet defines is the `C28` defect one layer down. */
.button.is-busy,.button:disabled{opacity:.72;cursor:default}

/* ---- shell: 240px sidebar, content column capped at 1100px with 24px gutters ---- */
.layout{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.layout-plain{grid-template-columns:minmax(0,1fr)}
.sidebar{border-right:1px solid var(--line);background:var(--card);padding:16px 12px;position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto}
.column{min-width:0;display:flex;flex-direction:column}
main{width:100%;max-width:var(--measure);margin:0 auto;padding:8px var(--gutter) 80px}

.orgbar{padding:4px 8px 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.org-name{margin:0;font-weight:600}
.org-cin{margin:2px 0 8px;font-variant-numeric:tabular-nums}
.orgbar form.inline{display:flex;gap:6px;align-items:center;margin:6px 0 0}
.orgbar select,.orgbar input{padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font:inherit;min-width:0;flex:1}
.orgbar .button{padding:5px 10px;font-size:.85rem}
/* P23 (Task 98): the "New organisation" box shared its row with "+ Add" inside the 240px sidebar and was a few pixels
   narrower than its own placeholder, so every page read "New organisatic". It takes the sidebar's content box and
   the button its own line — the live box and the disabled one at the cap alike (the latter is a <p>, not a form). */
.orgbar form.org-add{flex-wrap:wrap}
.orgbar .org-add input{flex:1 1 100%;width:100%}

.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav-link,.nav-item{display:block;padding:8px 10px;min-height:24px;border-radius:6px;text-decoration:none;color:var(--ink);font-size:.95rem}
.nav-link:hover{background:var(--sunk)}
.nav-link.nav-current{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-item.nav-locked{color:var(--muted);cursor:not-allowed}
.nav-sep{height:1px;background:var(--line);margin:8px 6px}
.nav-note{margin:10px 6px 0}

/* P1 (Task 98). Measured at 375px on the hosted build: `.banner` was nowrap with no min-width, no overflow and no
   ellipsis — 380px of "PRIVATE DEMO · WE RECOMMEND, YOUR PROFESSIONAL SIGNS" — so every page scrolled sideways, and
   the one flex child that yielded was the page's own name: `.page-title` measured 0px wide on every signed-in screen.
   Now the banner is the only thing in that row that shrinks (down to nothing); the title does not shrink at all — it
   is held to the row's width less the 12px gap, so a long title is cut by its own ellipsis, and never below 8ch of
   its own letters. (A proportional share, even 1000:1, handed the title a sub-pixel cut and an ellipsis — "Set up
   your company f…" at 1280px, measured — while the banner still had 286px to give.) The right-hand cluster does not
   shrink above 640px either; its one long string, the account's address, is capped instead (`.account-email`), so
   the order in which things yield is the banner, then the title, and never the page's width. The floor is declared
   twice on purpose: 8ch everywhere, then `calc-size()` — "8ch, or the title's own width if that is less" — where the
   browser has it (Chromium 129+), so "CA" or "Home" is not held open to 8ch with a gap before the banner. A browser
   without it keeps the plain 8ch, which costs a short title that gap and nothing else. */
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px var(--gutter);border-bottom:1px solid var(--line);background:var(--card)}
.topbar-left{display:flex;gap:12px;align-items:baseline;min-width:0;flex:1 1 auto}
.page-title{margin:0;font-size:1.35rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;max-width:calc(100% - 12px);min-width:8ch;min-width:calc-size(max-content, min(size, 8ch))}
.banner{font-size:.72rem;color:var(--accent-warn);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.brand{font-weight:600;color:var(--ink);text-decoration:none}
.topbar-right{display:flex;gap:14px;align-items:center;font-size:.88rem;min-width:0;flex:0 0 auto}
.topbar-link{display:inline-flex;gap:4px;align-items:center;min-height:24px;color:var(--muted);text-decoration:none;white-space:nowrap}
.topbar-link:hover{color:var(--ink)}
.badge-count{background:var(--accent-warn);color:#fff;border-radius:999px;padding:0 6px;font-size:.72rem;line-height:1.5}
.account{position:relative}
.account>summary{cursor:pointer;list-style:none;color:var(--muted);min-height:24px;white-space:nowrap}
.account>summary::-webkit-details-marker{display:none}
.account>summary::after{content:" \25BE"}
/* the address is held to a width in its own box, with the caret outside it, so the cluster is bounded — 44ch here,
   24ch on the rail, and on a phone its line less the caret's room; the whole address is the control's title */
.account-email{display:inline-block;vertical-align:bottom;max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the signed-out shell draws its title under the top bar, not in it: it keeps the content column's gutter (A01) */
.layout-plain .page-title{width:100%;max-width:var(--measure);margin:0 auto;padding:16px var(--gutter) 0}
.account form{position:absolute;right:0;top:120%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px;z-index:30}
.page-actions{display:flex;gap:10px;flex-wrap:wrap;max-width:var(--measure);margin:0 auto;padding:14px var(--gutter) 0;width:100%}
.page-actions:empty{padding:0}
.crumbs{margin:0 0 10px;font-size:.88rem}

/* ---- controls ---- */
.button{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:9px 15px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);text-decoration:none;font:inherit;font-size:.92rem;cursor:pointer}
.button:hover{background:var(--sunk)}
.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.button.primary:hover{filter:brightness(1.08)}
.actions{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}

/* ---- components ---- */
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:16px 18px;margin:0 0 16px}
.card-head{margin-bottom:10px}.card-head h3{margin:0}.card-head p{margin:2px 0 0}
.chip{display:inline-block;margin-right:6px;padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:12px;line-height:1.6;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.chip-core{color:var(--accent);border-color:var(--accent)}
.chip-watchlist,.chip-unverified{color:var(--accent-warn);border-color:var(--accent-warn)}
.chip-overdue,.chip-blocked{color:var(--oc-professional);border-color:var(--oc-professional);background:var(--accent-warn-soft)}
.chip-document{color:var(--oc-document)}.chip-memo{color:var(--oc-memo);border-color:var(--oc-memo)}
.chip-workpaper{color:var(--oc-workpaper);border-color:var(--oc-workpaper)}.chip-filing{color:var(--oc-filing);border-color:var(--oc-filing)}
.needs-professional{color:var(--oc-professional);border-color:var(--oc-professional);background:var(--accent-warn-soft)}
.chip-subject{font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}

.source{margin:10px 0;padding:10px 12px;border-left:3px solid var(--line);background:var(--sunk);border-radius:0 6px 6px 0;font-size:.88rem}
.source-statute{border-left-color:var(--accent)}
.source-contract{border-left-color:var(--oc-memo)}
.source-user{border-left-color:var(--oc-workpaper)}
.source-watchlist{border-left-color:var(--accent-warn)}
.source p{margin:0 0 4px}.source p:last-child{margin-bottom:0}
.source-arithmetic{font-variant-numeric:tabular-nums}
.stamp{font-style:normal}

.trust-strip{margin:12px 0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);font-size:.88rem;font-variant-numeric:tabular-nums}
.trust-ok{color:var(--accent)}.trust-held{color:var(--accent-warn)}.trust-sep{color:var(--muted)}

.empty{border:1px dashed var(--line);border-radius:var(--radius);background:var(--card);padding:28px 24px;max-width:62ch}
.empty h2{margin:0 0 8px}
.empty p{margin:0 0 14px;color:var(--muted)}

.instance{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:14px 16px;margin:0 0 12px}
.instance-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;justify-content:space-between}
.instance-title{margin:0;flex:1 1 20rem}
.instance-chips,.instance-due{margin:0}
.instance-due{font-variant-numeric:tabular-nums;font-weight:600}
.instance-actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.instance-actions summary{list-style:none}
.instance-actions summary::-webkit-details-marker{display:none}
.instance-actions form{display:grid;gap:8px;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.instance-actions form label{display:grid;gap:4px;font-size:.88rem}
.instance-actions input,.instance-actions select{padding:7px 9px;border:1px solid var(--line);border-radius:6px;font:inherit;background:var(--card)}

table.list{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.list th{position:sticky;top:0;background:var(--card);text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px;border-bottom:1px solid var(--line)}
table.list td{padding:10px 8px;border-bottom:1px solid var(--line)}
/* P10 (Task 98): nothing in the product may be wider than the window. A table compresses to its box first; one that
   still cannot fit — `table.memo` measured 780px on /ca/formation, `table.rows` 685px on /company/facts/cin,
   `table.schedule` 548px on the brief, all in a 375px window — scrolls inside its own wrapper instead of pushing the
   page. The owners of those templates wrap them (Tasks 100 and 102); this is the one rule they wrap them in. */
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}
form.intake{display:grid;gap:14px;max-width:720px}
form.intake label{display:grid;gap:4px;font-size:.9rem}
form.intake input,form.intake select,form.intake textarea{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;background:var(--card)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
/* P25 (Task 98): no text-transform and no tracking. The wizard asks one question per control, and a question asked
   through a <legend> (a group of radios) read "IS AN AUDITOR APPOINTED?" beside one asked through a <label>, which
   read "Registered name". Both carry `.field-label`, so the legend that is a field's label speaks as the label does. */
legend{padding:0 6px;color:var(--muted);font-size:.85rem}
legend.field-label{color:inherit;font-size:inherit}
details summary{cursor:pointer;color:var(--muted);font-size:.9rem}

/* the cross-verify notice: plain text, always present, nothing to close */
.notice{margin:0;padding:10px var(--gutter);background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:.86rem;color:var(--ink)}
main .notice,article .notice{border:1px solid var(--line);border-radius:var(--radius);margin:16px 0;padding:10px 14px}
/* P24 (Task 98): the strip's fold is drawn only on a phone screen, and only where :has() can be evaluated — see the
   guarded block after the drawer's. Everywhere else, print included, the strip is the plain paragraph it always was. */
.notice-fold{display:none}

/* the collapsed rail's glyphs — keyed off the href so the markup stays exactly `<a class="nav-link" href="/x">Label</a>`
   and the label stays the link's accessible name. Decorative: the text is what a screen reader reads. */
.nav-link::before,.nav-item::before{display:none;font-size:1.15rem;line-height:1;font-variant-numeric:normal;letter-spacing:0}
.nav-link[href="/home"]::before,.nav-item[data-nav="home"]::before{content:"\2302"}
.nav-link[href="/advisor"]::before,.nav-item[data-nav="advisor"]::before{content:"?"}
.nav-link[href="/legal"]::before,.nav-item[data-nav="legal"]::before{content:"\00A7"}
.nav-link[href="/ca"]::before,.nav-item[data-nav="ca"]::before{content:"\2713"}
/* Plan 6 §2.3. The rail (≤960px) shows glyphs and nothing else, and the block above is keyed per href with no
   fallback `content`, so without a rule of its own the eleventh link renders on the rail with NO glyph at all — a
   blank row where every other link has a mark. Finance is the summation sign — the founder's own rows, added up
   where they are asked about — and Accounting keeps the rupee it has had since wave 1. */
.nav-link[href="/finance"]::before,.nav-item[data-nav="finance"]::before{content:"\2211"}
.nav-link[href="/accounting"]::before,.nav-item[data-nav="accounting"]::before{content:"\20B9"}
/* Task 432: the Bills entry nav_for draws in Accounting's place */
.nav-link[href="/bills"]::before,.nav-item[data-nav="bills"]::before{content:"\20B9"}
/* Task 504 (SCOPE-CUT): the four entries the public sidebar adds (`app/nav.py::nav_for`) - Owed to you the down arrow (money coming in), Vendors the half circle,
   Packs the boxed square, Licences the star. Before the first media query, like every rule above (the pin in tests/test_shell.py says why). */
.nav-link[href="/receivables"]::before,.nav-item[data-nav="receivables"]::before{content:"\2193"}
.nav-link[href="/vendors"]::before,.nav-item[data-nav="vendors"]::before{content:"\25D0"}
.nav-link[href="/packs"]::before,.nav-item[data-nav="packs"]::before{content:"\25A5"}
.nav-link[href="/licences"]::before,.nav-item[data-nav="licences"]::before{content:"\2605"}
.nav-link[href="/organiser"]::before,.nav-item[data-nav="organiser"]::before{content:"\25EB"}
.nav-link[href="/company"]::before,.nav-item[data-nav="company"]::before{content:"\25A3"}
.nav-link[href="/calendar"]::before,.nav-item[data-nav="calendar"]::before{content:"\25A6"}
.nav-link[href="/documents"]::before,.nav-item[data-nav="documents"]::before{content:"\25A4"}
/* Export (Plan 6, T12). One rule per link is the pattern above, so a link added to `app/nav.py::NAV` without one is
   a blank clickable row between 641px and 960px — the label is font-size:0 there and the glyph is the whole item.
   `tests/test_shell.py::test_every_nav_link_has_a_rail_glyph` pins every href in NAV to a rule here. */
.nav-link[href="/export"]::before,.nav-item[data-nav="export"]::before{content:"\2913"}
.nav-link[href="/settings"]::before,.nav-item[data-nav="settings"]::before{content:"\2699"}
/* Agreements and Hire (Plan 7, Task 130, QA Q48). Appended here rather than at the foot of the file because the glyph
   rules must sit before the first media query (the pin in tests/test_shell.py says why). Agreements is the pencil, a
   document being drafted; Hire is the circled plus, a person being added. Both are text-presentation code points. */
.nav-link[href="/agree"]::before,.nav-item[data-nav="agree"]::before{content:"\270E"}
.nav-link[href="/hire"]::before,.nav-item[data-nav="hire"]::before{content:"\2295"}
/* The assistant (Plan 9, Task 315, RUL-P9-N4). `app/nav.py::nav_for` puts it in Advisor's place, second in the sidebar,
   for an organisation the assistant serves — so on the rail it is the first mark a founder lands on, and a blank one
   would be the finding all over again. Appended here, before the first media query, for the reason above. The
   envelope, U+2709: what is handed to it arrives in the conversation. A text-presentation code point like the rest,
   and not Advisor's "?", which this entry replaces for such an organisation but not for any other. */
.nav-link[href="/assistant"]::before,.nav-item[data-nav="assistant"]::before{content:"\2709"}
.menu-toggle,.nav-close,.nav-scrim{display:none}

/* ≤960px: the sidebar collapses to a 64px icon rail (spec §2.10). The label is still in the DOM and still the
   accessible name — font-size:0 hides it from the eye only — and the glyph above renders at full size. */
@media (max-width:960px) and (min-width:641px){
  :root{--sidebar:64px}
  .sidebar{padding:12px 4px}
  .nav-link,.nav-item{display:flex;align-items:center;justify-content:center;font-size:0;padding:10px 2px;min-height:40px}
  .nav-link::before,.nav-item::before{display:block}
  .nav-sep{margin:8px 10px}
  .nav-note{display:none}
  /* The name, the CIN and "+ Add" give way at 64px — the <select> does NOT. It is the only way to change organisation
     on the whole site (`POST /switch` needs a member org's uuid, and the drawer only starts at 640px), and its
     selected option already reads the current organisation's name, so nothing is lost by folding .org-name into it.
     The <label> stays in the DOM, clipped not removed, because it is the select's accessible name. */
  .orgbar{padding:2px 2px 10px}
  /* `.orgbar form.org-add` as well as `.orgbar .org-add` (P23, Task 98): the live "+ Add" form is also
     `form.inline`, and `.orgbar form.inline{display:flex}` outranks two bare classes, so until this selector it stayed
     in the rail as a 14px sliver of input over a two-line button. Same specificity, later in the file: it goes. */
  .orgbar .org-name,.orgbar .org-cin,.orgbar .org-add,.orgbar form.org-add{display:none}
  .orgbar form.org-switch{display:block;margin:0}  /* form.org-switch, not .org-switch: it has to outrank .orgbar form.inline */
  .orgbar .org-switch label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .orgbar select{width:100%;font-size:.75rem;padding:5px 3px}
  /* the column is 64px narrower here, so the account's address is held shorter — at 641px the title keeps its 8ch */
  .account-email{max-width:24ch}
}

/* ≤640px: off-canvas. The sidebar is a drawer opened by the top bar's Menu link and closed by its own × or by the
   scrim; :target does it with no script, and both closers stay plain anchors so keyboard and back-button work.
   The closed drawer is `visibility:hidden`, not merely translated off-screen: transform alone leaves its ten links,
   the org <select> and the "+ Add" input in the tab order and in the accessibility tree, so a keyboard user tabbing
   through the page would fall into a panel nobody can see. Visibility is switched with no duration but delayed by the
   slide so the panel is still painted while it leaves. Nothing here has to undo the 641–960px rail: that query cannot
   match at this width. */
@media (max-width:640px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;z-index:40;top:0;left:0;bottom:0;width:min(280px,86vw);max-height:100vh;padding:16px 12px;
           border-right:1px solid var(--line);transform:translateX(-100%);visibility:hidden;
           transition:transform .18s ease-out,visibility 0s linear .18s;overflow:auto}
  .sidebar:target{transform:none;visibility:visible;transition:transform .18s ease-out,visibility 0s;
                  box-shadow:2px 0 14px rgba(28,27,24,.18)}
  .sidebar:target .nav-close{display:block;position:absolute;top:10px;right:12px;font-size:1.4rem;line-height:1;
                             text-decoration:none;color:var(--muted);padding:2px 8px;min-height:24px}
  .sidebar:target~.nav-scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(28,27,24,.35)}
  .menu-toggle{display:inline-flex}
  .nav-link,.nav-item{display:flex;align-items:center;gap:10px;font-size:.95rem;padding:9px 10px;text-align:left}
  .nav-link::before,.nav-item::before{display:block;width:1.2em;text-align:center}
  .nav-note{display:block}
  .topbar{flex-wrap:wrap;gap:10px}
  /* P1 (Task 98). Three lines, each as wide as the window and no wider: Menu and the page's name; the banner under
     them, on a line of its own where it wraps rather than cutting its sentence short; then the right-hand cluster,
     where the account's address is what shortens. The name keeps the old rule (it wraps) but to two lines at most —
     unclamped, a sixteen-word obligation title in a narrow box was the 415px empty band on /calendar/1031. */
  .topbar-left{flex:1 1 100%;flex-wrap:wrap;gap:2px 10px}
  .topbar-left .page-title{flex:1 1 0}
  .page-title{white-space:normal;font-size:1.2rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .banner{flex:1 1 100%;white-space:normal}
  .topbar-right{flex:0 1 auto}
  /* the cluster's own line: the account shrinks to what is left of it, and the address — its own box here too — is
     held to the summary's width less the caret's room, so the ellipsis falls on the address and the caret that says
     it opens a menu (Sign out is in it) always shows. The caret's box is exactly that room: were it narrower (" ▾" is
     about 1.1em), an address with room to spare would still lose its last letter to an ellipsis — at 640px, measured.
     The address is whole where it fits (it is at 640px) and ends in an ellipsis where it does not (375px). */
  .account{min-width:0}
  .account-email{max-width:calc(100% - 1.2em)}
  .account>summary::after{display:inline-block;width:1.2em;text-align:right}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.sidebar,.sidebar:target{transition:none}}
/* P24 (Task 98): the cross-verify strip measured 375 × 256px at 375px — 28% of a phone screen, above every page. On a
   phone screen it now shows its first two lines, which always hold its opening words whole ("AI makes mistakes.
   Always cross-verify." needs about 270px, a line here is about 260px at 375px, so one line would cut them), and
   `.notice-fold` — a <details> right after it, whose summary carries none of the wording — opens the rest. The
   wording itself never moves: `tests/test_notice.py` counts it on sixteen surfaces. Every rule of the scheme sits
   inside `@supports selector(:has(*))`, so a browser that cannot evaluate the condition drops the scheme whole and
   shows the strip as it always was (the `R06` lesson: fail open). `screen` keeps a printed page's strip whole.
   The clamp lets go while keyboard focus is inside the paragraph: its Terms link is on the thirteenth line at 375px,
   so a keyboard user sees the link they are on, and the strip folds again when focus moves on. And the clamped box
   clips rather than hides (`overflow:clip`, after `hidden` for a browser without it), so it is never a scroll box:
   with `hidden` alone, a Tab onto that link scrolled the paragraph to scrollTop 213 at 375px, and the folded strip
   read "…and files. Open the source…" instead of its opening words for the rest of the page view. */
@supports selector(:has(*)){
  @media screen and (max-width:640px){
    .notice-strip{display:flex;align-items:flex-end;gap:10px;padding:8px var(--gutter);background:var(--accent-soft);border-bottom:1px solid var(--line)}
    .notice-strip>.notice{flex:1 1 auto;min-width:0;padding:0;border:0;background:none;line-height:1.55}
    .notice-strip:not(:has(>.notice-fold[open]))>.notice:not(:focus-within){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow:clip}
    .notice-fold{display:block;flex:none;font-size:.86rem;line-height:1.55}
    .notice-fold>summary{display:block;min-height:24px;color:var(--accent);font-size:inherit;text-decoration:underline;list-style:none}
    .notice-fold>summary::-webkit-details-marker{display:none}
    .notice-fold[open] .notice-more,.notice-fold:not([open]) .notice-less{display:none}
  }
}
/* P10 (Task 98): the tables this stylesheet draws that no polish task wraps. `table.list` is the matters on /legal
   (460px in a 375px window with two matters, measured) and a matter's versions (355px); `table.memo` outside a
   `.table-scroll` is the review memo's clause and obligation tables (431px and 529px — review.html is Wave H's file).
   On a phone each becomes its own scroll box: the `.table-scroll` behaviour without the wrapper, so a table nobody
   has wrapped still cannot push the page sideways. A wrapped table is left to its wrapper (/ca/formation's memo is
   one), and at every other width these tables are the tables they were. */
@media (max-width:640px){
  table.list,table.memo:not(.table-scroll>table){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* legal (Plans 2–3) — every selector these screens rely on, unchanged below this line (one declaration added: `.tabs`
   wraps — P11, Task 98 — because /matters/new's five document types ran to x=588 in a 375px window) */
.top{display:flex;gap:16px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--card)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.tabs a{padding:8px 14px;border:1px solid var(--line);border-radius:4px 4px 0 0;text-decoration:none;color:var(--ink);background:var(--card)}.tabs a.active{background:var(--ink);color:var(--paper)}
article.draft section.clause{padding:12px 0;border-bottom:1px solid var(--line)}.badge{font-size:.72rem;padding:2px 8px;border-radius:999px;border:1px solid var(--line);margin-left:6px;vertical-align:middle}
.verdict-supported{color:var(--ledger);border-color:var(--ledger)}
.verdict-outdated,.verdict-unverifiable,.verdict-unsupported,.untailored{color:var(--seal);border-color:var(--seal)}
del{background:#f6e0e2;text-decoration:line-through}ins{background:#e3eee7;text-decoration:none}
footer.disclosure,.disclosure{margin-top:20px;padding:12px;border-left:3px solid var(--seal);background:var(--card);font-size:.9rem}
/* Task 407: the copyright line under every page */
.site-foot{margin:32px 0 0;padding:12px 0 20px;border-top:1px solid var(--line);font-size:.85rem}.site-foot p{margin:0}
.needs-advocate{border:2px solid var(--seal);padding:14px;margin:14px 0;background:var(--card);border-radius:var(--radius)}.missing{color:var(--seal)}
table.memo{width:100%;border-collapse:collapse;font-size:.93rem}table.memo th,table.memo td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}.score{font-variant-numeric:tabular-nums}
/* law cards */
a.law{color:inherit;text-decoration:none;border-bottom:1px dotted var(--seal)}a.law:hover,a.law:focus{background:var(--accent-warn-soft);outline:none}
.lawcard{position:absolute;z-index:20;max-width:36rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.12);font-size:.92rem}
.lawcard .law-label{font-weight:600;margin-bottom:6px}.lawcard .text{max-height:40vh;overflow:auto;white-space:pre-wrap;border-left:3px solid var(--line);padding-left:10px;margin:6px 0}
.lawcard .law-note,.lawcard .law-bears{margin-top:8px}.lawcard .law-warn{color:var(--seal);font-weight:600}.lawcard .law-foot{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
pre.law-text{white-space:pre-wrap;border-left:3px solid var(--line);padding:8px 12px;background:var(--card);font-family:inherit}

/* ---- plan 6, wave 0 (task 9): the labelled wait, the collapsed wall and the one next step ------------------------
   htmx ships no stylesheet of its own, and `hx-indicator` appeared nowhere in the repository (finding 6): the class
   pair below is the whole of it. htmx puts `htmx-request` on the requesting element AND on whatever `hx-indicator`
   names, so both selectors are needed — one for an indicator inside the form, one for an indicator that IS it. */
.htmx-indicator{display:none}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:block}
.wait{margin:8px 0 0;font-size:.9rem;color:var(--seal)}
.wait::before{content:"⋯ ";font-variant-numeric:tabular-nums}
/* T6: the overdue wall (finding 8) and the one computed next step above it (product law (2)). */
.start-here{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--seal);background:var(--card);border-radius:var(--radius)}
.pre-signup{margin:0 0 12px}
details.overdue-rest{margin-top:8px}
details.overdue-rest>summary{cursor:pointer;padding:6px 0;font-weight:600}
/* T5: the law card's note arrives after the section it sits under (finding 7). */
.section-note{margin:0 0 12px}

/* ---- plan 6 §3.4 (task 25): the Briefing -------------------------------------------------------------------------
   `/home` is the peace-of-mind surface, so its own rules are about ORDER and restraint: a spine that reads as a
   ladder rather than a progress bar (nothing here fills, because a percentage would be a number with no basis), a
   headline that is the largest thing on the page because it is the thing a founder repeats, and two counted blocks
   that must not look like lists. Everything else on this page is a calendar row and is drawn by
   `/static/surfaces/calendar.css`, which Home links rather than restating. */
.spine{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0;counter-reset:rung}
.spine-rung{flex:1 1 12rem;min-width:11rem;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);opacity:.62}
.spine-rung.is-reached{opacity:1;border-color:var(--ledger)}
.spine-rung.is-current{opacity:1;border-left:3px solid var(--seal);font-weight:600}
.spine-label{display:block;counter-increment:rung}
.spine-label::before{content:counter(rung) ". ";font-variant-numeric:tabular-nums;opacity:.6}
.spine-means{display:block;font-weight:400;margin-top:2px}
.briefing-position{margin:0 0 16px}
/* the exposure counter — §2.6's number IS the activation, so it is the one thing on this page set larger */
.exposure-headline .headline{font-size:1.22rem;margin:0 0 8px}
.exposure-headline .amount,.exposure-headline .headline{font-variant-numeric:tabular-nums}
.coming-up .headline,.watched .headline{font-size:1.05rem;margin:0 0 8px;font-variant-numeric:tabular-nums}
/* "counted, never listed": the register's own three counts sit under the watched row as lines, not as cards */
ul.register-shape{list-style:none;margin:10px 0 0;padding:0}
ul.register-shape>li{padding:6px 0;border-top:1px solid var(--line)}
/* one next step per card, under the row it belongs to (§3.4: "each carrying its exposure and its one next step") */
p.next-step{margin:-6px 0 14px;padding-left:12px;border-left:3px solid var(--line)}
.briefing-cta .button{margin-bottom:6px}
@media (max-width:640px){.spine-rung{flex:1 1 100%}}
/* ---- plan 6, wave A1 (task 11): the seven-part render contract -----------------------------------------------------
   "Our read" is the one section of an answer that may conclude and recommend (spec 1.2), so it is the one section
   that must not read like the four around it: a rule down its left edge and a warmer ground, so a founder scanning
   the page can see where description stops and our view starts. A [K] line sits inside it under its own stamp, the
   one admission the product makes that a sentence came out of no text we hold. */
.answer-section.read{border-left:3px solid var(--seal);padding-left:12px;background:var(--card);border-radius:var(--radius)}
.answer-section.read>h3{margin-top:10px}
.read-line{margin:0 0 10px}
.read-knowledge{border-left:2px dashed var(--accent-warn);padding-left:10px}
.knowledge-stamp{margin:4px 0 0}
.chip-knowledge{color:var(--accent-warn);border-color:var(--accent-warn);border-style:dashed}
/* 1.6's scrutiny block: four departments, named on every page, one line each. A row that reads `not run` is the
   point of the block and is not dimmed away. */
.answer-section.scrutiny .scrutiny-list{margin:0;padding:0}
.scrutiny-row{margin:0;padding:4px 0;border-top:1px solid var(--line);font-size:.92rem}
.scrutiny-row:first-child{border-top:0}
.scrutiny-harness{display:inline-block;min-width:5rem}
.verdict-flags .scrutiny-verdict{color:var(--seal);font-weight:600}
.verdict-not-run .scrutiny-verdict{color:var(--muted)}
/* T4: "that answer was wrong", under the trail rather than beside the answer -- it is an incident report, not an
   action on the advice. */
form.answer-wrong{margin:6px 0 0}
form.answer-wrong .button.quiet{background:none;border:0;padding:0;font-size:.85rem;color:var(--muted);text-decoration:underline;cursor:pointer}
/* What a per-section budget cut, said in one muted line at the foot of the section it cut (fix round). It sits with
   the empty-section sentences rather than with the rows: it is the platform talking about the page, not a claim. */
.section-more{margin:8px 0 0}
/* ---- plan 6, wave C (task 45): §1.5's assembled document, on the answer ------------------------------------------
   The document is not a block of the answer and must not read as one: it is a thing to copy, so it gets the paper
   treatment — a card, a serif-ish measure held by the clause text's own line height, and the blanks in the same
   warning colour every other "you still owe us this" on the product uses. `.draft-clause` mirrors
   `article.draft section.clause` above rather than reusing it: that selector belongs to the Legal side's saved
   version, which carries verdict badges this one deliberately does not. */
.draft-document{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.draft-title{margin:0 0 6px;font-size:1.05rem}
.draft-memo{margin:0 0 10px;font-size:.93rem}
.draft-downloads{margin:0 0 10px;font-size:.9rem}
.draft-blanks{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--seal);background:var(--paper);border-radius:var(--radius)}
/* Both lists fold (task review, Important 2): the summary is what always renders, so it carries the count and reads
   as a heading rather than as the muted "details summary" default two rules up. */
.draft-blanks>summary{margin:0;font-weight:600;font-size:.9rem;color:var(--seal)}
.draft-blanks ul{margin:6px 0 0;padding-left:20px}
.draft-blanks li{color:var(--seal)}
.draft-clauses{margin:0 0 4px}
.draft-clauses>summary{font-weight:600;font-size:.9rem;color:var(--ink)}
.draft-clause{padding:10px 0;border-bottom:1px solid var(--line)}
.draft-clause:last-of-type{border-bottom:0}
.draft-clause h4{margin:0 0 6px;font-size:.95rem}
.draft-clause .clause-text{margin:0 0 6px;line-height:1.6;white-space:pre-wrap}
.draft-no-signature{margin:12px 0 8px;padding:10px 12px;border-left:3px solid var(--seal);background:var(--paper);font-size:.9rem;border-radius:var(--radius)}
.draft-intake{margin:0;font-size:.9rem}
/* §1.6's fourth outcome and the banner that announces it (Task 13). The banner stands immediately above Our read and
   the block it links to stays at §1.2's ⑦ — one rendering of the verdict, two placements of the signal — so it reads
   as a pointer and not as a second verdict. `.read-withheld` is what stands where the recommendation would have been:
   the section keeps its own left rule (`.answer-section.read` above), so this only has to carry the weight of a
   sentence the founder is meant to act on. */
.scrutiny-banner{margin:14px 0 0;font-size:.92rem;color:var(--seal);font-weight:600}
.scrutiny-banner a{color:inherit}
.read-withheld{margin:0;font-weight:600}
/* Plan 7 Task 8, spec §6 — the honest currency statement (`.currency`), the per-section version line and selector
   (`.version-line`/`.version-selector`/`.version-banner`), and the caution strip (`.strip-verified`/`.strip-caution`)
   §6 renders OUTSIDE the section-text guard, so a heading-only section still carries one. */
.currency{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--line);background:var(--card);border-radius:var(--radius);font-size:.88rem}
.currency-heading{margin:0 0 4px;font-weight:600}
.currency-line{margin:2px 0;color:var(--muted,inherit)}
.strip-verified,.strip-caution{margin:0 0 14px;padding:8px 14px;border-left:3px solid var(--line);border-radius:var(--radius)}
.strip-verified{border-color:var(--ledger)}
.strip-caution{border-color:var(--seal)}
.version-line{margin:4px 0}
.version-banner{margin:4px 0;font-weight:600}
.version-selector{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px;font-size:.88rem}
.version-selector a{color:inherit;border-bottom:1px dotted var(--seal)}
.version-selector a[aria-current]{font-weight:600;border-bottom-style:solid}
/* Task 423 (PE-12): the chat's dues card (assistant/_card.html) is drawn on the exit page too, outside .fo-chat: its table is its own scroll box at 390px, as in the chat (the rule above is scoped to the chat). */
.acard-table { overflow-x: auto; max-width: 100%; margin: 8px 0; }
/* Task 423 (PE-9): a file chooser on the person page lists documents by file name; a long name must not push a 390px page sideways. */
.stack select, .stack input[type="file"] { max-width: 100%; }

/* ---- Plan 9 Task 316 (CHAT-SCREEN): tokens and the chat screen ---- */
/* The prototype Mano approved on 15 Oct 2026 ("I like the chat screen design and its look."), built into the product: its tokens
   (Paper and Night), its fonts, its rail, conversation, side panel, cards, chit and composer. RUL-P9-C1: every rule below is
   scoped under `.fo-chat`, the class on the page's root element (`<html class="fo-chat">`, which `app/templates/assistant/
   _chat_base.html` writes and nothing else does), so no other page is touched this task; Tasks 397-398 roll the system out
   to the rest. The tokens carry the guideline's names. Inside `.fo-chat` the shell's own names (`--line`, `--card`, `--sunk`,
   `--accent`, ...) are bridged onto them, so the sidebar, the top bar, the notice strip, the buttons and the forms the shell draws
   take the theme with no rule of their own. Paper is the default; Night follows the phone's setting unless the page says light
   (`data-theme="light"`), and `data-theme="dark"` forces it - the same values twice, as the prototype has them (C2). The
   self-hosted Plex is `/static/fonts/plex.css` (C3), linked by the pages that wear this block and by no other.

   Where the prototype's CSS is not what its own tokens and the guideline promise, this block follows the promise: its `--faint`
   (2.9:1 on Paper) is not used for any text - captions, timestamps, hints and sub-lines are `--muted` (4.5:1 or better, both themes,
   RUL-P9-C8) - and the phone's targets are 44px, not 40. Where the prototype is silent because it is a static page, the product's
   own behaviour decides (the "Needs your yes" rows, the cross-verify fold, the file chips), and the notes below say so. */

.fo-chat {
  --paper: #f3eee4; --paper-deep: #ebe4d6; --sheet: #fffdf8; --tint: #e9e2d4; --ink: #2a2622; --muted: #6b645a; --faint: #948c7f;
  --hair: #d9d1c2; --ctl: #8f8779; --action: #0b6b6a; --on-action: #ffffff; --action-tint: #dff0ee; --action-deep: #084f4e;
  --seal: #b5362b; --on-seal: #ffffff; --green: #27694d; --haldi: #c9892a; --overlay: rgba(42, 38, 34, 0.55);
  --float: 0 12px 32px rgba(42, 38, 34, 0.16), 0 2px 6px rgba(42, 38, 34, 0.08);
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --quick: 160ms; --stamp: 240ms;
  --line: var(--hair); --card: var(--sheet); --sunk: var(--tint); --accent: var(--action); --accent-ink: var(--on-action);
  --accent-soft: var(--action-tint); --accent-warn: var(--muted); --accent-warn-soft: var(--tint); --ledger: var(--green);
  --radius: 10px; --sidebar: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme:dark) {
  .fo-chat:not([data-theme="light"]) {
    --paper: #1c1a17; --paper-deep: #15130f; --sheet: #26231f; --tint: #2e2a25; --ink: #efe9df; --muted: #b3aca0; --faint: #87806f;
    --hair: #3a352e; --ctl: #726b60; --action: #7fd0cd; --on-action: #1c1a17; --action-tint: #1f3d3c; --action-deep: #a8e3e0;
    --seal: #e07a6f; --on-seal: #1c1a17; --green: #7fc8a3; --haldi: #d9a441; --overlay: rgba(0, 0, 0, 0.6);
    --float: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
.fo-chat[data-theme="dark"] {
  --paper: #1c1a17; --paper-deep: #15130f; --sheet: #26231f; --tint: #2e2a25; --ink: #efe9df; --muted: #b3aca0; --faint: #87806f;
  --hair: #3a352e; --ctl: #726b60; --action: #7fd0cd; --on-action: #1c1a17; --action-tint: #1f3d3c; --action-deep: #a8e3e0;
  --seal: #e07a6f; --on-seal: #1c1a17; --green: #7fc8a3; --haldi: #d9a441; --overlay: rgba(0, 0, 0, 0.6);
  --float: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}
@media (prefers-reduced-motion:reduce) {
  .fo-chat { --quick: 0ms; --stamp: 0ms; }
  .fo-chat *, .fo-chat *::before, .fo-chat *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* the page: paper under everything, warm ink on it, the one focus ring (C8: 2px, action, offset 2px) on every control */
.fo-chat, .fo-chat body { background: var(--paper); }
.fo-chat body { color: var(--ink); font: 400 15px/22px var(--sans); -webkit-font-smoothing: antialiased; }
.fo-chat body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1200px 600px at 20% -10%, rgba(255, 255, 255, 0.35), transparent 60%); opacity: 0.6; }
.fo-chat[data-theme="dark"] body::before, .fo-chat:not([data-theme="light"]) body::before { opacity: 0.08; }
.fo-chat :focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
/* where a clipping box (a list, the segment) would cut the ring off, it is drawn inside the control instead */
.fo-chat .list a:focus-visible, .fo-chat .yes-row > summary:focus-visible, .fo-chat .seg button:focus-visible { outline-offset: -2px; }
.fo-chat a { color: var(--action); }
.fo-chat main a:hover, .fo-chat .panel a:hover { color: var(--action-deep); }
.fo-chat .lucide { width: 20px; height: 20px; stroke-width: 1.5; flex: none; }
.fo-chat .layout { position: relative; z-index: 1; }
.fo-chat .column { min-width: 0; }
.fo-chat main { max-width: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.fo-chat input[type="text"], .fo-chat select { border-color: var(--ctl); background: var(--sheet); color: var(--ink); }

/* the shell's chrome, in the theme: the top bar is the page's title with the account beside it, the notice strip stays whole */
.fo-chat .topbar { background: transparent; border-bottom: 0; padding: 20px 32px 6px; }
.fo-chat .page-title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.005em; }
.fo-chat .banner { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 18px; }
.fo-chat .topbar-link { color: var(--muted); }
.fo-chat .topbar-link:hover { color: var(--ink); }
.fo-chat .badge-count { background: var(--action); color: var(--on-action); }
.fo-chat .account form { background: var(--sheet); border-color: var(--hair); box-shadow: var(--float); }
/* the strip keeps its wording whole (RUL-P9-C7); it is drawn as a quiet band of the rail's own paper, not a teal block */
.fo-chat .notice-strip { background: var(--paper-deep); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.fo-chat .notice { background: transparent; border-bottom: 0; color: var(--ink); font-size: 12px; line-height: 17px; }
.fo-chat .page-actions { max-width: none; margin: 0; padding: 0 32px; width: 100%; display: block; }
.fo-chat .button { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ctl); background: var(--sheet); color: var(--ink); font: inherit; font-size: 15px; line-height: 22px; }
.fo-chat .button:hover { background: var(--tint); }
.fo-chat .button.primary { background: var(--action); color: var(--on-action); border-color: transparent; }
.fo-chat .button.primary:hover { background: var(--action-deep); filter: none; }
.fo-chat .orgbar .button { height: 32px; padding: 0 10px; font-size: 13px; line-height: 18px; }
.fo-chat .skip-link { background: var(--action); color: var(--on-action); }

/* the header row: where the shell keeps a page's actions. Badge (below 1100px), theme segment, new-topic chip */
.fo-chat .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding: 8px 0 12px; border: 0; background: transparent; margin: 0; }
.fo-chat .top form { margin: 0; }
.fo-chat .top .back { margin-right: auto; }
.fo-chat .chip { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ctl); background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; margin: 0; font: inherit; font-size: 13px; line-height: 18px; text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background var(--quick) ease-out; }
.fo-chat .chip:hover { background: var(--tint); color: var(--ink); }
.fo-chat .chip .lucide { width: 16px; height: 16px; }
.fo-chat .seg { display: inline-flex; border: 1px solid var(--ctl); border-radius: 999px; overflow: hidden; }
.fo-chat .seg button { height: 36px; width: 40px; border: 0; background: transparent; display: grid; place-items: center; color: var(--muted); cursor: pointer; padding: 0; }
.fo-chat .seg button[aria-pressed="true"] { background: var(--action-tint); color: var(--action); }
.fo-chat .seg .lucide { width: 16px; height: 16px; }
.fo-chat .badge { display: none; }
.fo-chat .chip.badge .dot.none { display: none; }

/* the conversation: the column, the day divider, the founder's bubble, the reply with the product's mark */
.fo-chat .col { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.fo-chat .assistant-note { margin: 0 32px 8px; max-width: 736px; padding: 10px 14px; border: 1px solid var(--hair); border-left: 3px solid var(--action); border-radius: 10px; background: var(--action-tint); color: var(--ink); font-size: 14px; line-height: 20px; }
.fo-chat .thread { flex: 1; padding: 8px 32px 40px; display: flex; flex-direction: column; gap: 18px; max-width: 800px; width: 100%; }
.fo-chat .conv-h { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.fo-chat .turns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.fo-chat .day { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; color: var(--muted); }
.fo-chat .day::before, .fo-chat .day::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }
.fo-chat .amsg { margin: 0; padding: 0; border: 0; background: none; display: block; min-width: 0; }
/* Right-aligned, at most 70% of the column: the guideline's words and the prototype's own `justify-self: end`. In the prototype's
   render that declaration is inert (its thread is a flex column, where justify-self is ignored) and the bubble sits at the left
   edge; here the bubble is a block in a list item, so the alignment is stated as `margin-left: auto`, which every browser honours. */
.fo-chat .founder { justify-self: end; margin-left: auto; max-width: min(70%, 520px); background: var(--tint); border-radius: 16px 16px 4px 16px; padding: 10px 14px; }
.fo-chat .founder .amsg-text { max-width: none; }
.fo-chat .msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.fo-chat .msg .who { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font: 600 11px/1 var(--serif); background: var(--ink); color: var(--paper); margin-top: 2px; }
.fo-chat .msg-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fo-chat .amsg-text { margin: 0; max-width: 66ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.fo-chat .amsg-text .q { display: block; margin-top: 8px; font-weight: 600; }
.fo-chat .attached { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.fo-chat .time { margin: -8px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.fo-chat .amsg-founder .time { margin: 4px 0 0; text-align: right; }
.fo-chat .amsg-system { margin-left: 44px; font-size: 14px; line-height: 20px; color: var(--muted); }
.fo-chat .amsg-system .amsg-text { max-width: none; }
.fo-chat .amsg-fold { margin: -6px 0 0; }
.fo-chat .amsg-fold > summary { cursor: pointer; color: var(--muted); font-size: 12px; line-height: 16px; }
.fo-chat .amsg-fold .card-notice { margin: 6px 0 0; color: var(--muted); }
.fo-chat .empty-thread { text-align: center; padding: 48px 16px; }   /* the one centred thing: an empty conversation is an invitation (the guideline) */
.fo-chat .empty-line { margin: 0 0 8px; font-size: 17px; line-height: 24px; font-weight: 600; }
.fo-chat .panel .empty-line { margin: 8px 0 0; font-size: 13px; line-height: 18px; font-weight: 400; }
.fo-chat .typing { display: none; gap: 4px; margin-left: 44px; align-self: flex-start; }
.fo-chat .htmx-request .typing, .fo-chat .typing.htmx-request { display: inline-flex; }
.fo-chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: fo-blink 1.2s infinite; }
.fo-chat .typing i:nth-child(2) { animation-delay: 0.2s; }
.fo-chat .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes fo-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* cards: a sheet with its plain answer first and the rest folded under it; the document card has a page thumbnail */
.fo-chat .card { background: var(--sheet); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; margin: 0; padding: 0; max-width: 640px; min-width: 0; }
.fo-chat .card > .body { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fo-chat .acard-line { margin: 0; font-weight: 600; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.fo-chat .acard-withheld { background: transparent; border-style: dashed; }
.fo-chat .acard-withheld .acard-line { font-weight: 400; }
.fo-chat .no-signature { margin: 0; color: var(--muted); }
.fo-chat .warning { color: var(--seal); }
.fo-chat .card.doc { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.fo-chat .card.doc .thumb { background: var(--paper-deep); border-right: 1px solid var(--hair); padding: 12px; display: grid; place-items: center; }
.fo-chat .page { width: 64px; height: 88px; background: #ffffff; border: 1px solid #d9d1c2; border-radius: 2px; padding: 6px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.fo-chat .page b { height: 4px; width: 60%; background: #0b6b6a; border-radius: 1px; }
.fo-chat .page i { height: 2px; background: #d9d1c2; border-radius: 1px; }
.fo-chat .page i.s { width: 70%; }
.fo-chat .card.doc > .body { padding: 16px 20px; gap: 6px; }
.fo-chat .card.doc h2 { margin: 0; font: 600 18px/24px var(--serif); letter-spacing: 0; overflow-wrap: anywhere; }
.fo-chat .card.doc .excerpt { font: 400 15px/24px var(--serif); color: var(--ink); max-width: 60ch; overflow-wrap: anywhere; }
.fo-chat .card.doc .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; line-height: 18px; color: var(--muted); margin-top: 4px; }
.fo-chat .card.doc .meta a { text-decoration: none; }
.fo-chat .card.doc .acard-line { margin-top: 2px; font-weight: 400; font-size: 13px; line-height: 18px; color: var(--muted); }
.fo-chat .acard-fold { margin: 6px 0 0; }
.fo-chat .acard-fold > summary { cursor: pointer; color: var(--muted); font-size: 13px; line-height: 18px; }
.fo-chat .acard-fields, .fo-chat .learned-fields { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px 12px; margin: 8px 0; }
.fo-chat .acard-fields dt, .fo-chat .learned-fields dt { color: var(--muted); font-size: 13px; line-height: 18px; }
.fo-chat .acard-fields dd, .fo-chat .learned-fields dd { margin: 0; overflow-wrap: anywhere; }
.fo-chat .acard-table { overflow-x: auto; margin: 8px 0; max-width: 100%; }
.fo-chat .acard-table table { border-collapse: collapse; font-size: 13px; line-height: 18px; }
.fo-chat .acard-table th, .fo-chat .acard-table td { border-bottom: 1px solid var(--hair); padding: 4px 8px; text-align: left; }
/* element-qualified where a card's own kind class is the same word (`article.acard-clocks` is a card, `ul.acard-clocks` its list; `article.acard-letter`, `blockquote.acard-letter`) */
.fo-chat ul.acard-jobs, .fo-chat ul.acard-clocks, .fo-chat ul.acard-checks, .fo-chat ul.acard-protects, .fo-chat ul.acard-assumed, .fo-chat ul.acard-company-needs, .fo-chat ul.acard-company-notes { margin: 8px 0; padding-left: 18px; }
.fo-chat .acard-text, .fo-chat blockquote.acard-letter p { overflow-wrap: anywhere; }
.fo-chat blockquote.acard-letter { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--hair); }
.fo-chat .acard-sources { margin: 8px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.fo-chat .card-notice { margin: 8px 0 0; color: var(--muted); }
.fo-chat .acard-counted, .fo-chat .acard-terms { max-width: 640px; color: var(--muted); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.fo-chat .acard-counted p, .fo-chat .acard-terms p { margin: 0 0 4px; }

/* the chit: the strip, the dashed ring that becomes the stamp, the rows, the two buttons */
.fo-chat .chit { position: relative; }
.fo-chat .chit .strip { display: flex; align-items: center; gap: 8px; padding: 8px 20px; font-size: 13px; line-height: 18px; background: var(--action-tint); color: var(--ink); }
.fo-chat .chit .strip .lucide { width: 16px; height: 16px; color: var(--action); }
.fo-chat .chit .strip-id { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fo-chat .chit .mark { position: absolute; top: 46px; right: 16px; padding: 4px 10px; border-radius: 6px; font-size: 12px; line-height: 16px; border: 2px dashed var(--haldi); color: var(--muted); }
.fo-chat .chit .mark.stamped { border: 2px solid var(--seal); color: var(--seal); font-weight: 600; letter-spacing: 0.02em; transform: rotate(-3deg); }
.fo-chat .chit .mark.stamped.landing { animation: fo-land var(--stamp) ease-out; }
.fo-chat .chit .mark.declined { border: 2px solid var(--muted); color: var(--muted); font-weight: 600; transform: rotate(-3deg); }
@keyframes fo-land { from { transform: rotate(-9deg) scale(1.18); opacity: 0.3; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
.fo-chat .chit > .body { padding: 20px; gap: 14px; }
.fo-chat .chit h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: 0; padding-right: 96px; }
.fo-chat .chit.done h2 { padding-right: 168px; }
.fo-chat .chit-preview { font-weight: 400; max-width: 62ch; }
.fo-chat .rows { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.fo-chat .rows div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 20px; }
.fo-chat .rows dt { color: var(--muted); }
.fo-chat .rows dd { margin: 0; overflow-wrap: anywhere; }
.fo-chat .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fo-chat .actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; margin: 0; }
.fo-chat .actions form { margin: 0; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.fo-chat .confirm-word { display: flex; flex-direction: column; gap: 4px; }
.fo-chat .confirm-word input { padding: 7px 9px; border: 1px solid var(--ctl); border-radius: 6px; font: inherit; background: var(--sheet); color: var(--ink); }
.fo-chat .btn { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; line-height: 22px; text-decoration: none; transition: transform var(--quick) ease-out, background var(--quick) ease-out; }
.fo-chat .btn:active { transform: translateY(1px); }
.fo-chat .btn.primary { background: var(--action); color: var(--on-action); }
.fo-chat .btn.primary:hover { background: var(--action-deep); }
.fo-chat .btn.secondary { background: var(--sheet); color: var(--ink); border-color: var(--ctl); }
.fo-chat .btn.secondary:hover { background: var(--tint); }
.fo-chat .btn .lucide { width: 18px; height: 18px; }
.fo-chat .btn:disabled, .fo-chat .button:disabled { opacity: 0.5; cursor: default; }
.fo-chat .chit.done .strip { background: var(--tint); }
.fo-chat .chit.done .strip .lucide { color: var(--muted); }
.fo-chat .outcome { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }

/* the composer: one sheet at the foot, pinned; the send button is primary only with something to send */
.fo-chat .compose { position: sticky; bottom: 0; padding: 12px 32px 24px; background: linear-gradient(to top, var(--paper) 70%, transparent); }
.fo-chat .assistant-composer { margin: 0; }
.fo-chat .composer { max-width: 800px; background: var(--sheet); border: 1px solid var(--ctl); border-radius: 14px; padding: 10px 10px 10px 16px; display: grid; gap: 8px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset; }
/* the prototype's focus is the sheet's border turning action; C8's ring (2px, action, offset 2px) is drawn round the whole sheet while its text area has the focus */
.fo-chat .composer:focus-within { border-color: var(--action); }
.fo-chat .composer:has(textarea:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.fo-chat .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fo-chat .chips:empty { display: none; }
.fo-chat .chips > span { display: inline-flex; align-items: center; gap: 6px; background: var(--tint); border-radius: 6px; padding: 3px 8px; font-size: 13px; line-height: 18px; max-width: 100%; }
.fo-chat .chips .chip-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.fo-chat .chips button { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; }
.fo-chat .chips .lucide { width: 14px; height: 14px; }
.fo-chat .line { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.fo-chat textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; font: inherit; color: var(--ink); min-height: 44px; max-height: 200px; outline: none; padding: 11px 0; }
.fo-chat textarea:focus-visible { outline: none; }
.fo-chat textarea::placeholder { color: var(--muted); opacity: 1; }
.fo-chat .file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.fo-chat .file-input:focus-visible + .attach { outline: 2px solid var(--action); outline-offset: 2px; }
.fo-chat .icon { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ctl); background: var(--sheet); display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0; flex: none; transition: background var(--quick) ease-out; }
.fo-chat .icon:hover { background: var(--tint); }
.fo-chat .send { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ctl); background: var(--sheet); color: var(--ink); opacity: 0.5; cursor: default; display: inline-flex; align-items: center; gap: 6px; flex: none; font: inherit; font-size: 15px; line-height: 22px; transition: all var(--quick) ease-out; }
.fo-chat .send.ready { background: var(--action); color: var(--on-action); border-color: transparent; opacity: 1; cursor: pointer; }
.fo-chat .send.ready:disabled { opacity: 0.7; cursor: progress; }
.fo-chat .hint { font-size: 12px; line-height: 16px; color: var(--muted); margin: 6px 0 0 4px; }

/* the side panel: the three lists and the meter; a column beside the conversation above 1100px, a sheet below it */
.fo-chat .panel { border-left: 1px solid var(--hair); padding: 24px; display: flex; flex-direction: column; gap: 20px; background: var(--paper); overflow: auto; }
.fo-chat .panel h2 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.fo-chat .panel h2 .lucide { width: 16px; height: 16px; }
.fo-chat .panel h2 .count { margin-left: auto; font-weight: 400; color: var(--muted); }
.fo-chat .list { background: var(--sheet); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; margin-top: 8px; }
.fo-chat .list > a, .fo-chat .list > .row, .fo-chat .yes-row > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 14px; line-height: 20px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--hair); transition: background var(--quick) ease-out; }
.fo-chat .list > a:first-child, .fo-chat .list > .row:first-child, .fo-chat .yes-row:first-child > summary { border-top: 0; }
.fo-chat .list > a:hover { background: var(--tint); color: var(--ink); }
.fo-chat .list > a.current { background: var(--tint); }
.fo-chat .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fo-chat .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--haldi); flex: none; }
.fo-chat .pill { margin-left: auto; font-size: 12px; line-height: 16px; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--muted); white-space: nowrap; }
.fo-chat .list .sub { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
.fo-chat .yes-row > summary { cursor: pointer; list-style: none; }
.fo-chat .yes-row > summary::-webkit-details-marker { display: none; }
.fo-chat .yes-row > summary:hover { background: var(--tint); }
.fo-chat .yes-row > summary .lucide { width: 16px; height: 16px; color: var(--muted); transition: transform var(--quick) ease-out; }
.fo-chat .yes-row[open] > summary .lucide { transform: rotate(180deg); }
.fo-chat .yes-row + .yes-row { border-top: 1px solid var(--hair); }
.fo-chat .yes-more { padding: 0 14px 14px 32px; display: flex; flex-direction: column; gap: 8px; }
.fo-chat .yes-preview { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.fo-chat .yes-more .btn { height: 36px; padding: 0 12px; font-size: 13px; line-height: 18px; }
.fo-chat .assistant-intake { border-top: 1px solid var(--hair); padding-top: 12px; }
.fo-chat .assistant-intake p { margin: 8px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.fo-chat .assistant-intake .intake-address { color: var(--ink); }
.fo-chat .panel-links { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.fo-chat .panel .meter { margin-top: auto; font-size: 12px; line-height: 18px; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 12px; }
.fo-chat .panel .meter b { color: var(--ink); font-weight: 500; }
.fo-chat .sheet-close { display: none; }
.fo-chat .scrim { display: none; }

/* the rail: the shell's own sidebar (`_nav.html`, untouched) as the prototype's 64px icon column. The labels stay in the page as
   the links' names; they are only not drawn. Each entry's icon is a Lucide shape masked in the link's own colour, keyed by href
   (and by `data-nav` for the locked entry), so Night needs nothing of its own and an entry without a rule is caught by
   tests/test_shell_layout.py. Below 640px the sidebar is the shell's drawer, labels and all, with the same icons beside them. */
.fo-chat .nav-link::before, .fo-chat .nav-item::before { content: ""; display: block; flex: none; width: 20px; height: 20px; font-size: 0; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.fo-chat .nav-link[href="/home"], .fo-chat .nav-item[data-nav="home"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/advisor"], .fo-chat .nav-item[data-nav="advisor"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/assistant"], .fo-chat .nav-item[data-nav="assistant"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M13 8H7'/%3E%3Cpath d='M17 12H7'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/legal"], .fo-chat .nav-item[data-nav="legal"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/agree"], .fo-chat .nav-item[data-nav="agree"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 5-2.414-2.414A2 2 0 0 0 14.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2'/%3E%3Cpath d='M21.378 12.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3Cpath d='M8 18h1'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/hire"], .fo-chat .nav-item[data-nav="hire"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/ca"], .fo-chat .nav-item[data-nav="ca"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/finance"], .fo-chat .nav-item[data-nav="finance"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }
/* Task 432: Bills takes Accounting's icon */
.fo-chat .nav-link[href="/accounting"], .fo-chat .nav-item[data-nav="accounting"], .fo-chat .nav-link[href="/bills"], .fo-chat .nav-item[data-nav="bills"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E"); }
/* Task 504: the four public-sidebar entries' icons */
.fo-chat .nav-link[href="/receivables"], .fo-chat .nav-item[data-nav="receivables"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/vendors"], .fo-chat .nav-item[data-nav="vendors"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/packs"], .fo-chat .nav-item[data-nav="packs"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/licences"], .fo-chat .nav-item[data-nav="licences"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/organiser"], .fo-chat .nav-item[data-nav="organiser"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/company"], .fo-chat .nav-item[data-nav="company"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/calendar"], .fo-chat .nav-item[data-nav="calendar"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/documents"], .fo-chat .nav-item[data-nav="documents"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/export"], .fo-chat .nav-item[data-nav="export"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E"); }
.fo-chat .nav-link[href="/settings"], .fo-chat .nav-item[data-nav="settings"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
@media (min-width:641px) {
  .fo-chat { --sidebar: 64px; }
  .fo-chat .sidebar { padding: 16px 0 12px; background: var(--paper-deep); border-right: 1px solid var(--hair); height: 100vh; max-height: 100vh; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  .fo-chat .sidebar::-webkit-scrollbar { display: none; }
  .fo-chat .nav { display: flex; flex-direction: column; align-items: center; min-height: 100%; }
  .fo-chat .nav::before { content: "FO"; content: "FO" / ""; order: 0; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 600 13px/1 var(--serif); letter-spacing: 0.02em; margin-bottom: 12px; }
  .fo-chat .nav-close { display: none; }
  .fo-chat .nav-list { order: 1; align-items: center; gap: 4px; width: 100%; }
  .fo-chat .nav-list li { display: flex; justify-content: center; }
  .fo-chat .nav-link, .fo-chat .nav-item { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; display: grid; place-items: center; font-size: 0; line-height: 0; color: var(--muted); transition: background var(--quick) ease-out, color var(--quick) ease-out; }
  .fo-chat .nav-link:hover { background: transparent; color: var(--ink); }
  .fo-chat .nav-link.nav-current { background: var(--action-tint); color: var(--action); font-weight: 400; }
  .fo-chat .nav-item.nav-locked { opacity: 0.5; cursor: not-allowed; }
  .fo-chat .nav-sep { width: 28px; margin: 6px 0; }
  .fo-chat .nav-note { display: none; }
  .fo-chat .orgbar { order: 2; margin-top: auto; padding: 12px 6px 0; margin-bottom: 0; border: 0; width: 100%; }
  .fo-chat .orgbar .org-name, .fo-chat .orgbar .org-cin, .fo-chat .orgbar .org-add, .fo-chat .orgbar form.org-add { display: none; }
  .fo-chat .orgbar form.org-switch { display: block; margin: 0; }
  .fo-chat .orgbar .org-switch label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fo-chat .orgbar select { width: 100%; height: 36px; font-size: 11px; line-height: 14px; padding: 4px 2px; border-radius: 8px; border: 1px solid var(--hair); background: var(--tint); color: var(--ink); text-overflow: ellipsis; }
  .fo-chat .notice-strip .notice { padding: 7px 32px; }
}

/* the rail's icons are masks over a background colour, which Windows' high-contrast mode replaces: there they take the system's own text colours */
@media (forced-colors:active) {
  .fo-chat .nav-link::before, .fo-chat .nav-item::before { forced-color-adjust: none; background: CanvasText; }
  .fo-chat .nav-link.nav-current::before { background: Highlight; }
}

/* above 1100px the side panel is a fixed 336px column at the right edge and the column of the page leaves it room */
@media (min-width:1101px) {
  .fo-chat.has-panel .column { padding-right: 336px; }
  .fo-chat .panel { position: fixed; top: 0; right: 0; width: 336px; height: 100vh; z-index: 5; }
}

/* below 1100px: the panel is a sheet from the right, opened by the header badge, behind a scrim. Shut, it is out of the tab order */
@media (max-width:1100px) {
  .fo-chat .panel { position: fixed; top: 0; right: 0; width: min(360px, 100%); height: 100vh; height: 100dvh; transform: translateX(100%); visibility: hidden; transition: transform var(--quick) ease-out, visibility 0s linear var(--quick); box-shadow: var(--float); z-index: 20; border-left: 1px solid var(--hair); }
  .fo-chat .panel.open { transform: none; visibility: visible; transition: transform var(--quick) ease-out, visibility 0s; }
  .fo-chat .badge { display: inline-flex; }
  .fo-chat .scrim { display: block; position: fixed; inset: 0; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--quick) ease-out; z-index: 19; }
  .fo-chat .scrim.show { opacity: 1; pointer-events: auto; }
  .fo-chat .sheet-close { display: grid; }
}

/* the pages that are not the conversation ("What I have done", "What I have learned"): the same frame, a column of sheets */
.fo-chat .page-body { max-width: 800px; padding: 8px 32px 40px; width: 100%; }
.fo-chat .page-body h2 { margin: 0 0 8px; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.fo-chat .lede { max-width: 66ch; color: var(--muted); margin: 0 0 16px; }
.fo-chat .page-body .assistant-note { margin: 0 0 16px; max-width: none; }
.fo-chat .activity, .fo-chat .learned-list, .fo-chat .meter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fo-chat .activity-row, .fo-chat .learned-row, .fo-chat .meter-row { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 16px; background: var(--sheet); }
.fo-chat .activity-row.is-undone, .fo-chat .learned-row.is-withdrawn { background: var(--tint); color: var(--muted); }
.fo-chat .activity-line, .fo-chat .learned-key { margin: 0 0 4px; overflow-wrap: anywhere; }
.fo-chat .acard-note { margin: 8px 0 0; padding: 6px 10px; border-radius: 6px; background: var(--action-tint); color: var(--ink); }
.fo-chat .learned { margin: 0 0 24px; }
.fo-chat .learned-edit { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 8px 0; }
.fo-chat .learned-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-chat .learned-field input { padding: 6px 8px; border: 1px solid var(--ctl); border-radius: 6px; font: inherit; max-width: 100%; background: var(--sheet); color: var(--ink); }
.fo-chat .page-body section.meter { margin: 24px 0 0; }
.fo-chat form.inline { display: inline-flex; margin: 0; gap: 8px; flex-wrap: wrap; align-items: flex-end; }

/* a phone: one column with a 16px gutter and no sideways scroll; the rail is the drawer; the panel a sheet from the top; the
   composer pinned above the home bar, every target 44px */
@media (max-width:640px) {
  .fo-chat .layout { grid-template-columns: minmax(0, 1fr); }
  .fo-chat .topbar { padding: 12px 16px 4px; }
  .fo-chat .page-actions { padding: 0 16px; }
  .fo-chat .notice-strip { padding: 7px 16px; }
  .fo-chat .top { padding: 4px 0 8px; justify-content: space-between; width: 100%; }
  .fo-chat .top .back { margin-right: 0; }
  .fo-chat .assistant-note { margin: 0 16px 8px; }
  .fo-chat .thread { padding: 8px 16px 16px; gap: 14px; }
  .fo-chat .turns { gap: 14px; }
  .fo-chat .msg { grid-template-columns: minmax(0, 1fr); }
  .fo-chat .msg .who { display: none; }
  .fo-chat .msg-body { gap: 14px; }
  .fo-chat .card, .fo-chat .outcome, .fo-chat .time, .fo-chat .typing { margin-left: 0; }
  .fo-chat .amsg-system { margin-left: 0; }
  .fo-chat .card.doc { grid-template-columns: minmax(0, 1fr); }
  .fo-chat .card.doc .thumb { display: none; }
  .fo-chat .rows { grid-template-columns: minmax(0, 1fr); }
  .fo-chat .chit h2 { padding-right: 96px; }
  .fo-chat .chit.done h2 { padding-right: 0; padding-top: 40px; }
  .fo-chat .compose { padding: 8px 16px 32px; }
  .fo-chat .panel { width: 100%; top: 0; left: 0; right: 0; height: auto; max-height: 80vh; transform: translateY(-100%); border-radius: 0 0 16px 16px; border-left: 0; border-bottom: 1px solid var(--hair); }
  .fo-chat .panel.open { transform: none; }
  .fo-chat .btn { height: 44px; }
  .fo-chat .yes-more .btn { height: 44px; font-size: 15px; line-height: 22px; }
  .fo-chat .long { display: none; }
  .fo-chat .chip { height: 44px; padding: 0 12px; }
  .fo-chat .seg button { height: 44px; width: 44px; }
  .fo-chat .send { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .fo-chat .icon { width: 44px; height: 44px; }
  .fo-chat textarea { padding: 11px 0; }
  .fo-chat .hint { display: none; }
  .fo-chat .page-body { padding: 8px 16px 32px; }
  .fo-chat .acard-fields, .fo-chat .learned-fields { grid-template-columns: minmax(0, 1fr); }
  .fo-chat .nav-link, .fo-chat .nav-item { min-height: 44px; }
}
/* Task 407: the copyright line under the chat screen */
.fo-chat .site-foot{margin:0;padding:8px 32px 12px;border-top:0;max-width:800px}


/* ---- Plan 10 Task 502 (LANDING): the public landing page ---- */
/* `app/templates/landing.html`, drawn on Task 316's tokens (Paper, light only: the page says `data-theme="light"`), the self-hosted
   Plex and the shell's `.button`. Every rule is scoped under `.fo-landing`, the class on that page's root element and on no other,
   so no page of the product is touched. A phone first: one column at 390px, three at 760px and up; targets are 44px. */
.fo-landing body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.fo-landing .lp-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; width: 100%; position: relative; z-index: 1; }
.fo-landing .lp-bar { border-bottom: 1px solid var(--hair); background: var(--paper); position: relative; z-index: 1; }
.fo-landing .lp-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.fo-landing .lp-mark { font: 600 18px/24px var(--sans); color: var(--ink); text-decoration: none; letter-spacing: -0.005em; min-height: 44px; display: inline-flex; align-items: center; }
.fo-landing .lp-nav { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.fo-landing .lp-signin { color: var(--action); font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.fo-landing .lp-nav .button, .fo-landing .lp-end .button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.fo-landing .lp-main { display: block; flex: 1 1 auto; max-width: none; margin: 0; padding: 0 0 24px; }
.fo-landing .lp-hero { padding-top: 48px; padding-bottom: 32px; }
.fo-landing .lp-h1 { font: 600 32px/38px var(--serif); letter-spacing: -0.01em; margin: 0 0 16px; max-width: 18ch; color: var(--ink); }
.fo-landing .lp-lede { font: 400 17px/26px var(--sans); color: var(--ink); margin: 0; max-width: 62ch; }
.fo-landing .lp-cards { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 16px 0 32px; }
.fo-landing .lp-card { background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--radius); padding: 20px; }
.fo-landing .lp-card h2 { font: 600 18px/24px var(--sans); margin: 0 0 8px; color: var(--ink); }
.fo-landing .lp-card p { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); }
.fo-landing .lp-how { padding-bottom: 16px; }
.fo-landing .lp-h2 { font: 600 13px/18px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.fo-landing .lp-steps { list-style: none; counter-reset: lp; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.fo-landing .lp-steps li { counter-increment: lp; display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; color: var(--ink); }
.fo-landing .lp-steps li::before { content: counter(lp); flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--action-tint); color: var(--action-deep); display: grid; place-items: center; font: 600 15px/1 var(--sans); }
.fo-landing .lp-trust { list-style: none; margin: 8px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 15px; line-height: 22px; color: var(--ink); }
.fo-landing .lp-end { margin: 24px 0 8px; }
.fo-landing .lp-foot { border-top: 1px solid var(--hair); background: var(--paper-deep); position: relative; z-index: 1; }
.fo-landing .lp-foot-row { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; font-size: 13px; line-height: 18px; color: var(--muted); }
.fo-landing .lp-foot a { color: var(--action); display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
@media (max-width: 479px) {
  .fo-landing .lp-nav .button { padding: 0 12px; font-size: 14px; }
}
@media (min-width: 760px) {
  .fo-landing .lp-wrap { padding: 0 32px; }
  .fo-landing .lp-hero { padding-top: 88px; padding-bottom: 48px; }
  .fo-landing .lp-h1 { font-size: 48px; line-height: 56px; max-width: 16ch; }
  .fo-landing .lp-lede { font-size: 19px; line-height: 29px; }
  .fo-landing .lp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 48px; }
  .fo-landing .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .fo-landing .lp-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .fo-landing .lp-end { margin-top: 40px; }
}
/* ---- end Plan 10 Task 502 ---- */