/* The public pages (templates/_public.html: landing, terms, privacy). Loaded after ekvi.css and built on
   its tokens and components — the register table, the signal card, the status pills, the four states — so
   going from the landing page into the portal changes the layout and nothing else. Nothing here defines a
   colour: every one is a token from ekvi.css, so both themes and print follow without a second palette.

   What this sheet adds is the frame of a long page the portal never needed: a header with the account
   controls, full-width bands, a reading width for prose, and the example figures. Examples sit in the
   portal's own card with an "Example" tag, so a reader never mistakes them for figures about anyone. */

.public { font-size: 1rem; }
.public main { display: block; }
/* Slides (owner, 2026-10-04): on a desktop every slide is exactly one screen under the sticky header and
   the scroller snaps to slides; an anchor or a snap lands below the header. On the root, not on body:
   scroll-padding belongs to the scroller, and it must see the variable.

   Round 5 (owner, 2026-10-04): the one-screen rule and the snapping are for a wide screen with a mouse or
   a trackpad only. On a phone the deck was the defect: with mandatory snapping a swipe that ended short of
   the next slide was undone (the page slid back, which reads as scrolling the wrong way), and a slide
   taller than the screen (pricing) could not be read through. Below 64rem, and wherever the primary
   pointer is a finger, the page is a plain document: no snap, no fixed slide height, ordinary sections
   with their own padding. The scroll-padding stays everywhere, so section links still land under the
   header. */
html:has(body.public) { --head-h: 57px; --slide-h: calc(100vh - var(--head-h)); scroll-padding-top: var(--head-h); }
@supports (height: 100dvh) { html:has(body.public) { --slide-h: calc(100dvh - var(--head-h)); } }
@media (min-width: 64.0625rem) and (pointer: fine) {
  html:has(body.public) { scroll-snap-type: y mandatory; }
}
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--s5); }
.narrow-copy { max-width: 46rem; }
.center { text-align: center; }

/* ---------- header ---------------------------------------------------------------------------- */
/* Sticky, because the sign-in is what a returning reader came for, wherever they are on the page. The
   header row is wider than the reading column (96rem against 72rem): it carries the section links, the
   theme and language switches and two account controls, which is more than 72rem holds on one line. */
.pub-head { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.pub-head-inner { max-width: 96rem; margin: 0 auto; padding: var(--s2) var(--s5); display: flex; align-items: center; gap: var(--s4); min-height: 56px; }
.pub-nav { display: flex; gap: var(--s1); flex-wrap: wrap; }
.pub-nav a { padding: 6px 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: var(--t-body); }
.pub-nav a:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.pub-nav-wide { flex: 1; justify-content: center; flex-wrap: nowrap; }
.pub-nav-wide a { white-space: nowrap; }
.pub-menu { display: none; }
.pub-account { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
/* Theme and language live in the header on every screen (owner, 2026-10-04). The segmented switches are
   the portal's own; a phone gets one toggle each, so the header stays one row at 360 px. */
.pub-switches { display: flex; align-items: center; gap: var(--s2); margin-right: var(--s2); }
.pub-switches-narrow { display: none; }

/* Disclosures in the header: the menu and the two account forms. A summary looks like the control it is. */
.pop, .pub-menu { position: relative; }
.pop > summary, .pub-menu > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker, .pub-menu > summary::-webkit-details-marker { display: none; }
.pop-link, .pub-menu > summary { display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--t-body); font-weight: 500; }
.pop-link:hover, .pub-menu > summary:hover { background: var(--hover); }
.pop[open] > .pop-link, .pub-menu[open] > summary { background: var(--hover); }
.pop > summary.button { list-style: none; }
.pop-start .short { display: none; }
/* A panel floats over the page: the shadow is what says so (the same reason the company switcher has one). */
.pop-panel, .pub-menu > .pub-nav { position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 40; width: min(22rem, calc(100vw - 2 * var(--s4))); padding: var(--s5); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgb(0 0 0 / 35%); }
.pop-panel label { margin-bottom: var(--s3); }
.pop-panel form { margin-top: var(--s4); }
.pop-panel form button { width: 100%; margin-top: var(--s1); }
.pop-title { margin: 0 0 var(--s3); font-size: var(--t-sub); font-weight: 600; }
/* The title takes focus when its panel opens (landing.js), for the announcement only: it is not in the tab
   order, so no ring — the panel that just appeared is the visible change. */
.pop-title:focus { outline: none; }
.pop-meta { margin: var(--s3) 0 0; color: var(--muted); font-size: var(--t-body); }
.pop-or { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0; color: var(--muted); font-size: var(--t-meta); }
.pop-or::before, .pop-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.hint { margin: calc(-1 * var(--s2)) 0 var(--s3); color: var(--muted); font-size: var(--t-meta); }
.pub-menu > .pub-nav { left: auto; flex-direction: column; padding: var(--s2); width: 14rem; }
.pub-menu > .pub-nav a { padding: var(--s2) var(--s3); color: var(--ink); }

/* In the portal a link styled as a button is the secondary action (ekvi.css); the landing page's one main
   action per band is a link too, so it says so with `primary`. A summary acting as the header's main
   button takes the same box. */
.pop > summary.button { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 var(--s4); border: 1px solid var(--primary); border-radius: var(--radius-sm); font-size: var(--t-body); font-weight: 500; white-space: nowrap; }
.public .button.primary { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.public .button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); text-decoration: none; }
/* The second action beside a primary one: the same size, an outline instead of a fill. */
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button.secondary:hover { background: var(--hover); border-color: var(--line-strong); }
.button.wide { display: flex; width: 100%; }

/* ---------- bands ----------------------------------------------------------------------------- */
/* A band is one argument of the page and carries its anchor. The background belongs to the slide: adjacent
   slides alternate strictly between the page colour and the strip colour (owner, 2026-10-04), so the eye
   finds where one screen ends without a rule or a heading size doing the work. landing.html gives each slide
   its wide-screen parity (`tone-w*`) and each narrow-screen slide — a plain slide or a part of a split one —
   its narrow parity (`tone-n*`); the breakpoint rules below paint the odd one. */
.band { padding: 0; }
/* A slide is a section with air around it; on a wide screen (below) it is also exactly one screen tall. */
.slide { display: flex; flex-direction: column; justify-content: center; padding-block: var(--s6); scroll-snap-align: start; }
/* A slide whose content can grow in place (the FAQ accordion) starts at the top, so growth moves only what
   is under the opened answer. */
.slide-top { justify-content: flex-start; }
.slide > .wrap { width: 100%; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.part { min-width: 0; }
/* The inner horizontal scrollers (example tables): a sideways flick inside one stays inside it instead of
   turning into the browser's back gesture; vertical swipes chain to the page as on any element. */
.public .table-scroll { overscroll-behavior-x: contain; }
@media (min-width: 64.0625rem) {
  .slide { min-height: var(--slide-h); }
  .slide-top { padding-top: 3rem; }
  .slide.tone-w1, .deck-foot.tone-w1 { background: var(--surface-2); }
  .deck-foot.tone-w0 { background: var(--bg); }
}
/* Headings are tracked a touch tighter than body text, no more: tight display tracking reads as a
   consumer brand, and this page is read by people who check registers. */
.band h2, .band-title { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--s4); }
.band h3 { font-size: 1rem; margin: 0 0 var(--s2); }
.band p { line-height: 1.6; }
.band-lede { max-width: 46rem; color: var(--ink-2); font-size: 1.0625rem; margin: 0 0 var(--s5); }
.eyebrow { margin: 0 0 var(--s2); color: var(--accent); font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
/* A section's second screen names its section (landing.html `continued`): muted, because it is a running
   head, not a new argument. */
.eyebrow-continued { color: var(--muted); margin-bottom: var(--s3); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.cta-row.center { justify-content: center; }
.cta-note { margin-top: var(--s3); color: var(--muted); font-size: var(--t-body); max-width: 36rem; }

/* ---------- hero ------------------------------------------------------------------------------ */
/* Three cells on a wide screen: the text beside the register, the row of differentiators under both. The
   copy part is `display: contents` there (its text and its row are the grid items); on a phone it is a
   slide of its own and the row stacks inside it. Explicit areas, because auto-placement would push the
   register under the row. */
.hero .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s5) 3rem; }
.hero h1 { font-size: clamp(1.875rem, 3.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 var(--s3); }
.hero-sub { font-size: 1.0625rem; color: var(--ink-2); margin: 0 0 var(--s3); }
.hero-for { margin: 0; color: var(--ink-2); font-size: var(--t-body); }
.hero .cta-row { margin-top: var(--s4); }
.hero .cta-note { margin-top: var(--s2); }
/* The differentiators: an icon, a label of two to four words, one short line. Tiles without borders — a
   border would make each a card asking to be clicked; they are a list, read left to right. */
.diffs { list-style: none; margin: 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.diffs li { display: flex; gap: var(--s2); align-items: flex-start; min-width: 0; }
.diffs .icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 2px; color: var(--accent); }
.diffs strong { display: block; font-size: var(--t-body); line-height: 1.3; }
.diffs span { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.45; }
@media (min-width: 64.0625rem) {
  /* The hero carries the register and the row under it: less air than the other slides, so both fit 720 px. */
  .hero .slide { padding-block: var(--s4); }
  .hero .hero-copy { display: contents; }
  .hero-text { grid-area: 1 / 1 / 2 / 2; min-width: 0; }
  .hero [data-part="hero-register"] { grid-area: 1 / 2 / 2 / 3; }
  .diffs { grid-area: 2 / 1 / 3 / 3; }
}
/* A split slide with a heading over both columns (the CSP examples): the first part is `display: contents`
   on a wide screen, so its heading block spans the row above and its figure sits in the first column. */
@media (min-width: 64.0625rem) {
  .pair.headed { align-items: start; grid-template-rows: auto auto; row-gap: var(--s4); }
  .pair.headed > .part-lead { display: contents; }
  .pair.headed .slide-head { grid-column: 1 / -1; }
  .pair.headed .slide-head .band-lede { margin-bottom: var(--s2); }
}

/* ---------- example figures ------------------------------------------------------------------- */
/* An example is the portal's card with a tag; its caption says what it is before the reader reads it. */
.sample { margin: 0; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); min-width: 0; font-size: var(--t-body); }
.sample-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.sample-title { font-weight: 600; font-size: var(--t-sub); }
.example-tag { padding: 0.125rem 0.5rem; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--muted); font-size: var(--t-meta); font-weight: 500; white-space: nowrap; }
.sample-foot { margin: var(--s3) 0 0; color: var(--muted); font-size: var(--t-meta); line-height: 1.5; }
.sample table { margin: 0; }
.sample .signals { margin: 0; }
.sample .signal-fix { color: var(--accent); }
.samples { display: grid; gap: var(--s4); align-content: start; }
.public table th[scope="row"] { font-weight: 500; }
.public tfoot th, .public tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); }
.pool-row th, .pool-row td { color: var(--muted); }

/* The date control of the register: a segmented row of radio buttons. Only the checked stop's table is
   displayed; the others are display:none, so a screen reader meets one table at a time too. */
.stops { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); position: relative; }
.stops > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stops > label { margin: 0 0 var(--s2); padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.stops > label:hover { background: var(--hover); }
.stop-label { font-size: var(--t-meta); color: var(--muted); font-weight: 500; }
.stop-date { font-variant-numeric: tabular-nums; font-weight: 600; }
.stops > input:checked + label { border-color: var(--accent); background: var(--info-bg); }
.stops > input:checked + label .stop-label { color: var(--ink); }
.stops > input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
/* All three panels share one grid cell: the block is as tall as its tallest state whichever is shown, so
   switching the date moves nothing on the page. Hidden panels are visibility:hidden, which also takes them
   out of the accessibility tree — a screen reader meets one table at a time. */
.stop-panels { grid-column: 1 / -1; display: grid; min-width: 0; }
.stop-panel { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
#stop-incorporation:checked ~ .stop-panels .stop-panel-incorporation,
#stop-seed:checked ~ .stop-panels .stop-panel-seed,
#stop-today:checked ~ .stop-panels .stop-panel-today { visibility: visible; }
/* Column heads may wrap (Greek ones are longer); figures never do. */
.sample thead th { white-space: normal; vertical-align: bottom; }

.refusal-sample { margin: var(--s2) 0 0; }
.refusal-sample .rejection { margin: 0; }
.law-line { max-width: 46rem; padding-left: var(--s4); border-left: 3px solid var(--accent); color: var(--ink-2); }

.point { margin-top: var(--s4); }
.point p { margin: 0; color: var(--ink-2); }
.step { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: var(--s2); border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: var(--t-meta); font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.points { list-style: none; margin: 0; padding: 0; }
.points li { margin: 0 0 var(--s4); padding-left: var(--s4); border-left: 2px solid var(--line); color: var(--ink-2); line-height: 1.6; }
.points li strong { color: var(--ink); }

/* Dilution: two bars on one scale, the lost share split into the parts of the round. */
.dil-head { margin: 0 0 var(--s2); }
.dil-bar { display: block; width: 100%; height: 4.25rem; }
.dil-track { fill: var(--chart-track); }
.dil-before { fill: var(--chart-other); }
.dil-after { fill: var(--chart-1); }
.dil-part-1 { fill: var(--chart-5); }
.dil-part-2 { fill: var(--chart-3); }
.key { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: var(--s2); border-radius: 2px; vertical-align: -1px; }
.key-before { background: var(--chart-other); }
.key-after { background: var(--chart-1); }
.key-part-1 { background: var(--chart-5); }
.key-part-2 { background: var(--chart-3); }

/* The filing strip: one month of days, a dot where an event was recorded, a block where a form is due. */
.strip-sample { margin: 0 0 var(--s4); }
.strip { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; list-style: none; margin: 0; padding: 0; }
.strip-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 2.5rem; padding: 2px 0 4px; border-radius: 3px; background: var(--chart-track); }
.strip-week { background: var(--hover); box-shadow: inset 0 -2px 0 var(--line-strong); /* a week's edge, not depth */ }
.strip-num { color: var(--muted); font-size: 0.625rem; font-variant-numeric: tabular-nums; line-height: 1; }
.strip-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--accent); }
.strip-due { background: var(--state-due); }
.strip-due .strip-num { color: var(--bg); font-weight: 600; }
.strip-filed { background: var(--ok-ink); }
.strip-filed .strip-num { color: var(--bg); font-weight: 600; }
.strip-key { display: flex; flex-wrap: wrap; gap: var(--s4); list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; color: var(--muted); font-size: var(--t-meta); }
.key-event { background: var(--accent); border-radius: 999px; }
.key-due { background: var(--state-due); }
.key-filed { background: var(--ok-ink); }
.chip { display: inline-flex; align-items: center; gap: var(--s1); padding: 0.125rem 0.5rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; }

/* The rule card (owner, 2026-10-04: one real rule in place of a ladder of counts): four labelled lines,
   the label a column of its own so the four values line up and read as a record, which is what a rule is. */
.rule-id { color: var(--muted); font-weight: 500; white-space: nowrap; }
/* The caption row may wrap: on a phone the rule id takes its own line rather than squeezing the title. */
.rule-sample .sample-head { flex-wrap: wrap; }
.rule-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; }
.rule-facts > div { display: contents; }
.rule-facts dt { color: var(--muted); font-size: var(--t-body); }
.rule-facts dd { margin: 0; }
.rule-facts .status { margin-right: var(--s1); }

/* The partner's account (funds): label over figure, the figures right-aligned in tabular numerals so the
   amounts line up by digit — the way the partner's own page shows them. */
.lp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); margin: 0; }
.lp-stats > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lp-stats dt { color: var(--muted); font-size: var(--t-meta); }
.lp-stats dd { margin: 0; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; text-align: right; }

/* Proof tiles: a number and what it counts. No icons — an icon beside a figure reads as a badge, and
   these are not certifications. */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: 0; }
.proof-tile { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s1); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); }
.proof-tile dd { margin: 0; font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.proof-tile dt { color: var(--muted); font-size: var(--t-body); }
.deploy-line { margin-top: var(--s4); }

/* Pricing: one table, plans as columns (owner, 2026-10-04). The Company column is emphasised by its
   edge, not by size. A `<details>` in a cell holds what needs more than a line; the slide is top-aligned
   (`slide-top`), so an opened one grows the table downward and nothing above it moves. Below 64rem the
   table gives way to one card per plan (`.plan-cards`, the same facts from the same data in landing.html):
   a five-column comparison has no honest shape on a phone, and the stacked table of round 4 read as
   labels jammed against the edge. Only one of the two is displayed at a time, so a screen reader meets
   one. */
.plans { width: 100%; margin: 0; table-layout: fixed; font-size: var(--t-body); }
.plan-cards { display: none; }
.plans th, .plans td { vertical-align: top; padding: var(--s2) var(--s3); white-space: normal; line-height: 1.45; }
.plans thead th { font-size: var(--t-sub); color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.plans th[scope="row"] { color: var(--muted); font-weight: 500; width: 8rem; }
.plans thead th:first-child { width: 8rem; }
.plans .plan-main { background: var(--info-bg); }
.plans thead .plan-main { box-shadow: inset 0 -2px 0 var(--accent); }
.plans tfoot td { font-weight: 400; border-top: 1px solid var(--line-strong); border-bottom: 0; background: transparent; }
.plans tfoot td.plan-main { background: var(--info-bg); }
.plans tfoot .button { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 36px; padding-block: var(--s2); }
.plans .amount { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.plans .amount-word { font-size: 1.0625rem; }
.plans .per { color: var(--muted); font-size: var(--t-meta); }
.plans small { color: var(--muted); }
.more { margin-top: var(--s1); }
.more > summary { cursor: pointer; color: var(--accent); font-size: var(--t-meta); font-weight: 500; list-style-position: inside; }
.more > summary:hover { text-decoration: underline; }
.more > p { margin: var(--s1) 0 0; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.5; }
.plans-note { margin-top: var(--s3); }
/* The pricing slide starts at the top (a disclosure grows it downward) with less air than the FAQ's 3rem. */
@media (min-width: 64.0625rem) {
  [data-slide="pricing"] { padding-top: var(--s4); padding-bottom: var(--s4); }
}
[data-slide="pricing"] .band-lede { margin-bottom: var(--s4); }
/* The plan cards (phones and narrow tablets): the plan's name, its price, then the same facts as the
   table's rows, each under its label, and the plan's action at the foot. The Company card keeps the
   table column's emphasis — its edge, not its size. Type stays at the page's 1rem: a price list is read
   closely. */
.plan-card { margin: 0; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: var(--s3); font-size: 1rem; }
.plan-card.plan-main { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.plan-card h3 { margin: 0; font-size: 1.125rem; }
.plan-card.plan-main h3 { color: var(--accent); }
.plan-price { margin: 0; line-height: 1.45; }
.plan-price .amount { font-size: 1.5rem; }
.plan-facts { margin: 0; display: grid; gap: var(--s1); }
.plan-facts dt { color: var(--muted); font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.plan-facts dd { margin: 0 0 var(--s2); line-height: 1.5; }
.plan-facts dd:last-child { margin-bottom: 0; }
.plan-card .more > summary, .plan-card .more > p { font-size: var(--t-body); }
.plan-card .cta-row { margin-top: auto; padding-top: var(--s2); }
.plan-card .cta-row .button { flex: 1; text-align: center; white-space: normal; height: auto; min-height: 40px; padding-block: var(--s2); }

/* FAQ: native disclosures, one hairline between questions. Two columns on a wide screen (owner, 2026-10-04),
   each a `.part` so that below 64rem a column is a slide of its own. Columns start at the top: an opened
   answer grows downward and moves nothing in the other column. The heading is a fixed block (3rem) so the
   second column of the first slide can start level with the first question under it. */
.faq-pair { align-items: start; gap: var(--s6) 3rem; }
.band .faq-title { height: 2rem; line-height: 2rem; margin: 0 0 var(--s4); }
.faq-item { border-bottom: 1px solid var(--line); }
/* Nine questions a column on one screen (owner): rows of 12 px padding, which fits 1280x720 and a 360x740
   phone with the questions closed; an opened answer grows downward, as before.

   The marker is drawn inside the item's box (polish, 2026-10-04). The browser's own marker with
   `list-style-position: outside` hangs into the gutter, and on a phone the gutter is the 16 px side
   padding: the triangle sat 2–4 px from the screen edge while the text and the hairline started at 16 px,
   which read as a row with no padding. Here it is a column of the summary's own grid, so the marker, the
   question and the hairline share one left edge, and a question that wraps keeps a hanging indent. The
   mask is the chevron ekvi.css already uses for the sign-in page's disclosure, turned to point right when
   closed and down when open. */
.faq-item summary { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr); column-gap: var(--s2); align-items: baseline; cursor: pointer; padding: var(--s3) 0; font-weight: 500; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: ""; align-self: center; width: 0.75rem; height: 0.75rem; background-color: var(--muted); -webkit-mask: var(--icon-chevron) no-repeat center / 100% 100%; mask: var(--icon-chevron) no-repeat center / 100% 100%; transform: rotate(-90deg); }
.faq-item[open] > summary::before { transform: none; }
.faq-item summary:hover::before { background-color: var(--ink); }
.faq-item p { margin: 0 0 var(--s4); padding-left: calc(0.75rem + var(--s2)); color: var(--ink-2); }
@media (min-width: 64.0625rem) {
  .faq-offset { padding-top: 3rem; }
  /* On a wide screen the second column sits beside the heading; its "Questions, continued" running head is
     for the phone, where that column is a screen of its own. */
  .faq-continued { display: none; }
}

/* Contact: the closing argument beside the form. The three reasons are a numbered list — an order, not
   bullets, because three is a count a reader keeps. */
.contact-pair { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.reasons { margin: 0; padding-left: 1.25rem; color: var(--ink-2); }
.reasons li { margin-bottom: var(--s3); line-height: 1.55; }
.reasons li::marker { color: var(--accent); font-weight: 600; }
.reasons strong { color: var(--ink); }
.contact-note { margin-top: var(--s4); font-size: var(--t-body); }
.band .form-title { margin: 0 0 var(--s3); font-size: var(--t-sub); color: var(--muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.contact-form textarea { height: auto; padding: var(--s2) 0.75rem; resize: vertical; }
.contact-form .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); }
.field { margin: 0 0 var(--s4); }
.field > label { margin-bottom: 0; }
.field-hint { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--t-meta); font-weight: normal; }
.req { color: var(--muted); font-size: var(--t-meta); font-weight: normal; }
/* The honeypot: out of sight and out of the tab order, but not display:none, which some programs skip. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The Turnstile widget's slot: its normal size is 300 x 65, reserved so the Send button does not jump. */
.turnstile { min-height: 65px; margin: 0 0 var(--s4); }
.state p { margin: 0; }
.state p + p { margin-top: var(--s1); }

/* ---------- round 6: the graphics ------------------------------------------------------------------ */
/* Owner, 2026-10-04: pictures of the same facts, drawn from landing.py's data. Every colour is a chart token
   (ekvi.css .chart-N) so both themes follow; every width that encodes a number is an SVG attribute. */

/* The register as bars: holder | bar | figure, the shares in small type under the holder. The bar is an SVG
   rect whose width is the register's own fully diluted percentage on a 100-unit track. */
.own-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.own-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 4.5rem; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; }
.own-name { grid-area: 1 / 1; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.own-bar { grid-area: 1 / 2; display: block; width: 100%; height: 0.75rem; }
.own-track { fill: var(--chart-track); }
.own-pct { grid-area: 1 / 3; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.own-pct small { font-size: var(--t-meta); font-weight: 500; color: var(--muted); margin-left: 1px; }
.own-shares { grid-area: 2 / 1 / 3 / 4; color: var(--muted); font-size: var(--t-meta); line-height: 1.3; }
.own-pool .own-name, .own-pool .own-pct { color: var(--muted); font-weight: 500; }

/* The timeline: one node under another, the line at the left, the date in its own column so the six
   dates line up and the text has the width it needs. The line and the dots are borders and backgrounds,
   not an image. A node that completes a register stop is marked with the accent and says how many events
   the register there is worked out from. */
.timeline { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s3); position: relative; }
.timeline::before { content: ""; position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0.375rem; border-left: 2px solid var(--line-strong); }
.tl-node { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s3); padding-left: 1.5rem; min-width: 0; }
.tl-dot { position: absolute; top: 0.2rem; left: 0; width: 0.875rem; height: 0.875rem; border-radius: 999px; background: var(--panel); border: 2px solid var(--line-strong); box-sizing: border-box; }
.tl-stop .tl-dot { border-color: var(--accent); background: var(--accent); }
.tl-date { grid-column: 1; color: var(--muted); font-size: var(--t-body); font-variant-numeric: tabular-nums; line-height: 1.4; }
.tl-label { grid-column: 2; font-size: var(--t-body); line-height: 1.4; }
.tl-detail { grid-column: 2; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.45; }
.tl-register { grid-column: 2; margin-top: 2px; color: var(--accent); font-size: var(--t-meta); font-weight: 600; line-height: 1.35; }

/* Client companies as tiles: the left edge is the worst state the company is in; three counts, the zero
   ones muted. No totals row exists to style. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.tile { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--state-watch); border-radius: var(--radius); background: var(--bg); min-width: 0; }
.tile.state-action_required { border-left-color: var(--state-action); }
.tile.state-due_soon { border-left-color: var(--state-due); }
.tile.state-clear { border-left-color: var(--state-ok); }
.tile-name { font-weight: 600; line-height: 1.3; }
.tile-counts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--t-meta); color: var(--muted); }
.count { display: inline-flex; align-items: baseline; gap: 0.3em; }
.count-n { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-body); color: var(--muted); }
.count-action .count-n { color: var(--state-action-ink); }
.count-due .count-n { color: var(--state-due-ink); }
.count-watch .count-n { color: var(--ink-2); }
/* A zero is still shown, in the muted colour: a hidden zero reads as a missing check. */
.tile .count-n[data-zero] { color: var(--muted); }

/* The round: two stacked bars on one 100-unit scale, the legend before → after. */
.rb-row { margin: 0 0 var(--s3); }
.rb-label { margin: 0 0 var(--s1); font-size: var(--t-body); }
.rb-bar { display: block; width: 100%; height: 1.25rem; border-radius: 3px; overflow: hidden; background: var(--chart-track); }
.rb-bar .chart-slice { stroke: var(--panel); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rb-legend { margin-top: var(--s2); }
.rb-legend .num { font-weight: 500; }
.rb-legend small { color: var(--muted); font-weight: 400; }

/* The filings list under the strip: form chip, status pill, one line, the section in small type. */
.filing-list { list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.filing-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t-body); line-height: 1.4; }
.filing-item:first-child { border-top: 0; }
.filing-text { flex: 1 1 14rem; min-width: 0; }
.filing-text time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.filing-law { color: var(--muted); white-space: nowrap; }

/* The assistant's exchange: question bubbles to the right in the accent tint, answers to the left on the
   panel, with the source chips the assistant shows. Drawn, not screenshotted. */
.chat-demo { display: flex; flex-direction: column; gap: var(--s3); }
.bubble { margin: 0; max-width: 88%; padding: var(--s2) var(--s3); border-radius: var(--radius-card); line-height: 1.5; font-size: var(--t-body); }
.bubble-q { align-self: flex-end; background: var(--primary); color: var(--primary-ink); border-bottom-right-radius: 4px; }
.bubble-a { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble-a p { margin: 0; }
.chat-source { margin-top: var(--s2) !important; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.chat-source .chip { font-size: var(--t-meta); font-weight: 500; }
.chip-form { border-color: var(--accent); color: var(--accent); }

@media (max-width: 48rem) {
  .own-row { grid-template-columns: minmax(0, 1fr) 4rem; grid-template-rows: auto auto auto; }
  .own-name { grid-area: 1 / 1; }
  .own-pct { grid-area: 1 / 2; }
  .own-bar { grid-area: 2 / 1 / 3 / 3; }
  .own-shares { grid-area: 3 / 1 / 4 / 3; }
  /* The timeline's date sits over the text on a phone. */
  .tl-node { grid-template-columns: minmax(0, 1fr); }
  .tl-label, .tl-detail, .tl-register { grid-column: 1; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .bubble { max-width: 94%; }
}

/* ---------- legal pages ----------------------------------------------------------------------- */
.legal h1 { font-size: 1.875rem; margin-bottom: var(--s2); }
.legal h2 { font-size: 1.125rem; margin: var(--s6) 0 var(--s2); }
.legal p, .legal li { color: var(--ink-2); line-height: 1.65; }
.legal li { margin-bottom: var(--s2); }
.draft-mark { display: inline-block; margin: 0 0 var(--s4); padding: var(--s1) var(--s3); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--t-body); }

/* ---------- footer ---------------------------------------------------------------------------- */
/* After the deck the footer is the last snap target, aligned to its end: scrolling to the bottom rests on
   it instead of snapping back to the start of the contact slide (owner, 2026-10-04). Its background is the
   tone after the last slide's (`deck-foot`, see the bands); on the legal pages it keeps the sidebar colour. */
.pub-foot { border-top: 1px solid var(--line); background: var(--sidebar); }
.deck-foot { scroll-snap-align: end; scroll-snap-stop: always; }
.pub-foot-inner { max-width: 72rem; margin: 0 auto; padding: var(--s6) var(--s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.pub-foot-brand p { margin: 0 0 var(--s2); }
/* The mark beside the footer's first line, top-aligned so a wrapped sentence hangs under its own text. */
.pub-foot-line { display: flex; align-items: flex-start; gap: var(--s3); }
.pub-foot-line .brand-mark { flex: none; }
.pub-foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-body); }
.pub-fine { margin: 0; color: var(--muted); font-size: var(--t-meta); }

/* ---------- breakpoints ----------------------------------------------------------------------- */
/* The header row holds the brand, eight section links, the two switches and two account controls: about
   1,280 px in English, a third more in Greek. Below that the links give way to the menu rather than the
   header wrapping onto two lines. */
@media (max-width: 100rem) {
  html[lang="el"] .pub-nav-wide { display: none; }
  html[lang="el"] .pub-menu { display: block; }
}
@media (max-width: 84rem) {
  .pub-nav-wide { display: none; }
  .pub-menu { display: block; }
}
@media (max-width: 64rem) {
  /* A plain document (round 5): no slide is a screen here. A slide is a section with 2rem of air above and
     below; a split slide becomes a plain container and each of its parts a section of its own, with the
     reading column's side padding on the part so that the part's background reaches the edges of the
     screen. Nothing snaps and nothing is squeezed to fit a height. */
  .slide { display: block; padding-block: var(--s6); scroll-snap-align: none; }
  .slide.split { padding-block: 0; }
  .slide.split > .pair { display: block; padding-inline: 0; }
  .slide.split .part { display: block; padding-block: var(--s6); padding-inline: var(--s5); }
  .diffs { margin-top: var(--s4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slide-head .band-lede { margin-bottom: var(--s4); }
  .slide.tone-n1, .part.tone-n1, .deck-foot.tone-n1 { background: var(--surface-2); }
  .deck-foot.tone-n0 { background: var(--bg); }
  .deck-foot { scroll-snap-align: none; }
  /* Pricing: the cards, two across on a narrow tablet, one on a phone (below). */
  .plans { display: none; }
  .plan-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
}
@media (max-width: 48rem) {
  .wrap, .pub-head-inner, .pub-foot-inner { padding-inline: var(--s4); }
  .pub-head-inner { gap: var(--s2); }
  .pub-head .brand-words { display: none; }
  .pub-account { gap: var(--s1); }
  .pub-switches-wide { display: none; }
  .pub-switches-narrow { display: flex; gap: var(--s1); margin-right: var(--s1); }
  .pub-switches-narrow button { color: var(--ink); }
  .pop-link, .pub-menu > summary { padding: 0 var(--s2); }
  .pop > summary.button { padding: 0 var(--s3); }
  /* The reading column keeps 16 px from either edge on every block, the parts included. Type stays at
     the page's size (1rem body, 1.25rem headings): on a phone nothing has to fit a height any more, so
     nothing is shrunk to make it. */
  .slide.split .part { padding-inline: var(--s4); }
  .band h2, .band-title { font-size: 1.25rem; margin-bottom: var(--s3); }
  .band-lede { font-size: 1rem; margin-bottom: var(--s4); }
  .hero h1 { font-size: 1.75rem; }
  .hero-sub { font-size: 1rem; }
  .contact-form .grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form label, .contact-form .field { margin-bottom: var(--s3); }
  .contact-form .field > label { margin-bottom: 0; }
  .rule-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .rule-facts dd { margin-bottom: var(--s2); }
  .diffs { padding-top: var(--s3); gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diffs li:last-child { grid-column: 1 / -1; }
  .lp-stats dd { font-size: 1rem; }
  /* One plan card under another, the width of the reading column. */
  .plan-cards { grid-template-columns: minmax(0, 1fr); }
  .pub-foot-inner { grid-template-columns: minmax(0, 1fr); }
  /* The long label and the word "Menu" leave the screen, not the accessibility tree: display:none would
     leave both summaries nameless (the icon and the short label are aria-hidden). Same box as
     .visually-hidden in ekvi.css. */
  .pop-start .long, .pub-menu > summary span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .pop-start .short { display: inline; }
  /* On a phone a panel spans the screen under the header rather than hanging off its button. It scrolls
     on its own when taller than the screen, and reaching its end does not scroll the page beneath. */
  .pop-panel, .pub-menu > .pub-nav { position: fixed; left: var(--s3); right: var(--s3); top: 60px; width: auto; max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  .sample { padding: var(--s3); }
  .sample th, .sample td { padding: 0.5rem 0.5rem; }
  .sample thead th { white-space: normal; }
  .strip-sample td small { display: block; white-space: normal; overflow-wrap: anywhere; }
  .strip-sample time { white-space: nowrap; } /* the date does not break at its hyphens */
  .stops > label { padding: var(--s1); }
  /* 31 cells do not fit 360 px with their numbers: the strip keeps its dots and colours, the table under
     it keeps the dates. */
  .strip { gap: 1px; }
  .strip-num { display: none; }
  .strip-day { height: 1.75rem; justify-content: center; }
}

/* The smallest phones (360 px): the filings list and the register bars give up a little of the card's own
   padding, so no figure is clipped and nothing scrolls sideways inside the card. */
@media (max-width: 24rem) {
  .register-sample, .strip-sample { padding: var(--s2); }
  /* The filings table likewise: at the register's type size its four columns, the filing reference
     unbroken, fit the card. */
  .strip-sample table { font-size: var(--t-meta); }
  .strip-sample th, .strip-sample td { padding: 0.4rem 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Snapping moves the page on its own after the reader stops; with reduced motion it does not. */
  html:has(body.public) { scroll-snap-type: none; }
}

/* ---------- print ----------------------------------------------------------------------------- */
/* On paper: the copy, the examples and their tables; not the header controls, the forms or the bands' fills.
   Every stop of the register prints, because a reader cannot click a radio button on paper. */
@media print {
  .pub-head, .pop, .pub-menu, .cta-row, .contact-form, .stops > label, .stops > input { display: none; }
  .band { padding: var(--s4) 0; }
  .band, .slide, .part, .pub-foot { background: #fff; border: 0; }
  .slide, .slide.split .part { min-height: 0; display: block; padding-block: var(--s3); }
  .stop-panels { display: block; }
  .stop-panel { visibility: visible; margin-bottom: var(--s4); }
  .pair, .proof { display: block; }
  .plans { display: table; }
  .plan-cards { display: none; }
  .plans, .proof-tile, .sample { margin-bottom: var(--s3); break-inside: avoid; }
  .more > p { display: block; }
  .faq-item { break-inside: avoid; }
  .faq-item > p { display: block; }
}