/* Conference Desk site. Gather brand, website balance (brand-plan §4): ink on warm paper,
   plum as the signature, apricot as a highlight with ink text only. Newsreader for display, Inter for text.
   Fonts are self-hosted variable woff2 files in /fonts (OFL, licences beside them). */
@font-face { font-family: Newsreader; src: url(/fonts/newsreader.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: Newsreader; src: url(/fonts/newsreader-italic.woff2) format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --paper: #F8F6F1; --surface: #FFFFFF; --subtle: #EEEAE4; --ink: #231B32; --text2: #696174; --line: #DEDAD3;
  --link: #4E3787; --signature: #6246A6; --apricot: #F3B78D; --apricot-tint: #FCE9DB; --apricot-ink: #99592E;
  --action: #231B32; --on-action: #F8F6F1; --focus: #6246A6;
  --success: #1E7A4F; --error: #B4261E;
  --band: #EFE9FA; --on-band: #231B32; --on-band2: #5A5266;
  --s-acc: #6246A6; --s-acc-t: #ECE6F7; --s-acc-ink: #4E3787; --s-deep: #231B32; --bezel: #231B32;
  --s-shadow: 0 28px 56px -28px rgba(35, 27, 50, 0.4);
  --ok-bg: #E1F0E7; --ok-fg: #1E6B45; --warn-bg: #F7EED8; --warn-fg: #7A520A; --bad-bg: #F7E1DF; --bad-fg: #A3231B;
  --serif: Newsreader, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light; /* the site is light for everyone (owner, 23 Oct): one charming look */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.5rem; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.375rem; line-height: 1.3; }
h1 em, h2 em { font-style: italic; }
p { margin: 0 0 1rem; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
/* Visually hidden, still read by screen readers */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 24px; } }
.muted { color: var(--text2); }
.small { font-size: 0.9375rem; line-height: 1.6; }
.lede { font-size: 1.1875rem; color: var(--text2); max-width: 40rem; }
.overline { font: 600 0.875rem/1.4 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text2); margin: 0 0 0.75rem; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--ink); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* Preview notice, header, nav */
.preview { margin: 0; background: var(--apricot); color: #231B32; font-size: 0.9375rem; padding: 8px 16px; text-align: center; }
header.site { border-bottom: 1px solid var(--line); }
nav.main .narrow-only { display: none; }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.125rem; min-height: 44px; }
nav.main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-left: auto; }
nav.main a { color: var(--ink); text-decoration: none; padding: 10px 0; }
nav.main a:hover, nav.main a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.pv-short { display: none; }
/* Phones: logo and button on one row, the five links below (two short rows on narrow phones), a one-line preview notice */
@media (max-width: 559px) {
  header.site .wrap { gap: 4px 8px; padding-top: 8px; padding-bottom: 4px; }
  header.site .btn { margin-left: auto; }
  nav.main { order: 3; margin-left: 0; width: 100%; justify-content: flex-start; gap: 0 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a { white-space: nowrap; }
  nav.main .wide-only { display: none; }
  nav.main .narrow-only { display: inline; }
  .pv-long { display: none; }
  .pv-short { display: inline; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid var(--action); background: var(--action); color: var(--on-action); }
.btn:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); filter: none; }
.btn.small-btn { min-height: 44px; padding: 0 16px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Layout */
main section { padding: 56px 0; border-top: 1px solid var(--line); }
main section:first-child { border-top: 0; }
@media (min-width: 760px) { main section { padding: 96px 0; } }
.grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .g2 { grid-template-columns: 1fr 1fr; gap: 24px; } .g3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 960px) { .g4 { grid-template-columns: repeat(4, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 640px) and (max-width: 959px) { .g4, .g5 { grid-template-columns: 1fr 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.card h3 { margin-bottom: 0.5rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.hero { display: grid; gap: 8px 48px; align-items: end; margin-bottom: 40px; }
.hero .lede { margin-bottom: 0; }
.hero .ctas { margin-top: 20px; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.25fr 1fr; } }
.split { display: grid; gap: 32px; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .split.center { align-items: center; }
  .split.rev { grid-template-columns: 1.2fr 1fr; }
  .split.rev > :first-child { order: 2; }
}
/* Points: short claims in columns under an apricot rule, instead of a row of boxes */
.points { display: grid; gap: 24px; }
@media (min-width: 760px) { .points { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.points > div { border-top: 3px solid var(--apricot); padding-top: 16px; }
.points.thin > div { border-top: 1px solid var(--line); }
.points p:last-child { margin-bottom: 0; }
/* Band: the one full-width ink section on a page, carrying a product screen. Ink leads and plum stays the
   signature (decision 21), so plum's only job here is the rule along the top. */
main section.band { background: var(--band); color: var(--on-band); border-top: 3px solid var(--signature); }
.band { --focus: var(--on-band); }
main section.band + section { border-top: 0; }
.band .overline, .band .lede, .band .shot figcaption { color: var(--on-band2); }
.band a:not(.btn) { color: var(--on-band); }
.band .btn { background: #231B32; color: #F8F6F1; border-color: #231B32; }
.band-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .band-grid { grid-template-columns: 1fr 1.7fr; gap: 48px; } }
.prose { max-width: 44rem; }
.wrap.prose { max-width: 1180px; } /* keep the shared left edge; the measure applies to what is inside */
.wrap.prose > * { max-width: 44rem; }
/* Page intros: one clear gap before the first card or form */
main > section:first-child > .wrap:not(.prose) > .lede:not(:last-child) { margin-bottom: 40px; }
@media (min-width: 960px) { main > section:first-child > .wrap:not(.prose) > .lede:not(:last-child) { margin-bottom: 56px; } }
/* "Read more" links standing alone get a full-size tap area */
p.more a { display: inline-block; padding: 12px 0; }
p.more { margin-bottom: 0; }
/* In-page index: quiet links, not buttons */
.jump p { font: 600 0.875rem/1.4 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text2); margin: 0 0 8px; }
.jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.jump a { display: inline-block; padding: 10px 0; font-weight: 600; }
.prose h2 { font-size: 1.75rem; margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }

/* Lists with an apricot tick */
ul.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.ticks li { position: relative; padding: 6px 0 6px 26px; }
ul.ticks li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 10px; border-radius: 3px; background: var(--apricot); }

/* Notes and highlights */
.note { border-left: 4px solid var(--apricot); background: var(--apricot-tint); padding: 12px 16px; border-radius: 8px; color: var(--ink); }
.draft { border: 2px dashed var(--apricot-ink); border-radius: 12px; padding: 12px 16px; color: var(--ink); font-weight: 600; }
.rule { width: 48px; height: 4px; background: var(--apricot); border: 0; margin: 0 0 24px; }
.chip { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--apricot); color: #231B32; font-size: 0.875rem; font-weight: 600; }

/* Pricing */
.tier { display: flex; flex-direction: column; gap: 8px; }
.tier.featured { border: 2px solid var(--signature); }
.tier .price { font: 500 2.25rem/1.1 var(--serif); font-variant-numeric: tabular-nums; margin: 4px 0 0; }
.tier .per { color: var(--text2); font-size: 0.9375rem; margin: 0; }
.tier .price .from { font: 500 1rem/1 var(--sans); color: var(--text2); }
.tier .zero { margin: 0; font-weight: 600; }
.tier .zero b { color: var(--apricot-ink); }
.tier .opens { margin: 0; color: var(--apricot-ink); font-weight: 600; font-size: 0.9375rem; }
/* The founding chip sits on the featured card's top edge, so names and prices line up across the row */
.tier.featured { position: relative; }
.tier .chip-slot { position: absolute; top: -14px; left: 22px; margin: 0; }
.tier .chip-slot .chip { white-space: nowrap; }
.tier ul.ticks { flex: 1; font-size: 0.9375rem; }
.tier .btn { width: 100%; }
.num { font-variant-numeric: tabular-nums; }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll { overflow-x: auto; }
.calc { display: grid; gap: 24px; }
@media (min-width: 760px) { .calc { grid-template-columns: 1fr 1fr; } }
.calc .big { display: block; font: 500 1.75rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
/* Questions open and close: a chevron on the right replaces the marker that display:flex removes */
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 16px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; margin: 0 6px 4px auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
details[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) { summary::after { transition: transform 0.15s; } }

/* Forms */
form.stack { display: grid; gap: 20px; max-width: 40rem; }
form.stack .two { display: grid; gap: 20px; }
@media (min-width: 760px) { form.stack .two { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; align-content: start; }
.field p { margin: 0; }
label, legend { font-weight: 600; }
legend { padding: 0; }
.hint { color: var(--text2); font-size: 0.9375rem; font-weight: 400; }
/* Errors, GOV.UK pattern: a summary above the form linking to each field, and a message on the field */
.error-summary { border: 3px solid var(--error); border-radius: 12px; padding: 16px 20px; }
.error-summary h2 { font-size: 1.375rem; margin: 0 0 8px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: var(--error); font-weight: 600; }
.field-error { color: var(--error); font-weight: 600; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid var(--error); }
.btn[aria-disabled="true"] { cursor: progress; filter: none; opacity: 0.75; }
input, select, textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--text2); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
textarea { min-height: 128px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choice { display: flex; gap: 10px; align-items: center; font-weight: 400; min-height: 44px; }
/* Radios drawn from the tokens, so light and dark match the fields; the global focus ring still applies */
.choice input { flex: none; appearance: none; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border: 1.5px solid var(--text2); border-radius: 50%; background: var(--surface); display: grid; place-content: center; cursor: pointer; }
.choice input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--signature); transform: scale(0); }
.choice input:checked { border-color: var(--signature); }
.choice input:checked::before { transform: scale(1); }
@media (forced-colors: active) { .choice input::before { forced-color-adjust: none; background: CanvasText; } }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
footer.site { border-top: 1px solid var(--line); padding: 48px 0; font-size: 0.9375rem; }
footer.site .cols { display: grid; gap: 24px; }
@media (min-width: 760px) { footer.site .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
footer.site .fine { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text2); font-size: 0.875rem; }
footer.site h2 { font: 600 0.875rem/1.4 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text2); margin: 0 0 8px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li a { display: inline-block; padding: 10px 0; color: var(--ink); }
footer.site .tagline { font: 500 1.25rem/1.4 var(--serif); margin: 12px 0; }
.mt { margin-top: 24px; }
.h3 { font-size: 1.375rem; line-height: 1.3; }

/* Product screens. HTML pictures of the real screens, drawn with the site's tokens so they follow light and dark.
   Each screen is one role="img" with a full description, inside a figure with a caption. Text inside keeps the
   14px floor; container queries fold each screen to fit its column, down to a 390px phone. */
/* AXIS 2027 drawings: the event zone takes AXIS's one accent (sea #3F6A84), its navy and its mark (brand-plan 4.2) */
.axis { --s-acc: #3F6A84; --s-acc-t: #DCE5EA; --s-acc-ink: #3F6A84; --s-deep: #1F2328; --bezel: #1F2328; --ax-cur: #1F2328; }
.axis .s-next .s-k { color: #DCE5EA; }
.axis .s-chips .on { background: var(--s-acc); border-color: var(--s-acc); color: var(--surface); }
.axis .s-track .cur::before { background: var(--ax-cur); }
.ax-mark { flex: none; width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.scr-top .ax-mark { margin: 0 0 0 8px; }
.shot { margin: 0; display: grid; gap: 14px; min-width: 0; }
.shot figcaption { color: var(--text2); font-size: 0.9375rem; }
.shot.ph { justify-items: center; text-align: center; }
.scr, .phone { container-type: inline-size; background: var(--paper); color: var(--ink); font: 400 0.875rem/1.45 var(--sans); text-align: left; box-shadow: var(--s-shadow); overflow: hidden; }
.scr { border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.scr p { margin: 0; }
.scr b, .phone b { font-weight: 600; }
.scr-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--text2); }
.scr-top i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.scr-top span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-app { display: grid; }
.s-side { display: none; }
.s-side b { padding: 0 8px 10px; }
.s-side span { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 8px; color: var(--text2); }
.s-side .on { background: var(--s-acc-t); color: var(--ink); font-weight: 600; }
.s-side em { font-style: normal; background: var(--s-acc); color: var(--surface); border-radius: 999px; padding: 0 7px; }
.s-main { display: grid; gap: 12px; align-content: start; padding: 18px; min-width: 0; }
.s-h { font: 500 1.25rem/1.25 var(--serif); }
.s-m { color: var(--text2); }
.s-k { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
.s-k.bad { color: var(--bad-fg); }
.s-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 12px; }
.s-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s-tiles > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.s-tiles b { font: 500 1.375rem/1.15 var(--serif); font-variant-numeric: tabular-nums; }
.s-tiles span { color: var(--text2); }
.s-bar, .s-sc { display: block; height: 5px; border-radius: 3px; background: var(--subtle); overflow: hidden; }
.s-bar s, .s-sc s { display: block; height: 100%; width: var(--w); background: var(--s-acc); }
.s-sc { display: inline-block; width: 40px; vertical-align: middle; margin-right: 6px; }
.s-row { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.s-row.hot { background: var(--bad-bg); border-color: var(--bad-fg); }
.s-row > div { display: grid; min-width: 0; }
.s-row > div span { color: var(--text2); }
.s-row > .s-btn { display: none; }
.s-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--s-acc); }
.s-dot.bad { background: var(--bad-fg); }
.s-dot.calm { background: var(--line); }
.s-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 9px; font-weight: 600; white-space: nowrap; background: var(--action); color: var(--on-action); border: 1px solid transparent; }
.s-btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.s-btn.hi { background: var(--apricot); color: #231B32; }
.s-btn.full { width: 100%; }
.s-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s-chips span { display: inline-flex; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; }
.s-chips b { color: var(--text2); font-variant-numeric: tabular-nums; }
.s-chips .on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.s-chips .on b { color: var(--line); }
.s-table { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.s-tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.s-tr:first-child { border-top: 0; }
.s-tr > span { min-width: 0; }
.s-tr .by { display: block; color: var(--text2); }
.s-th { color: var(--text2); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.s-tr .wide { display: none; }
.s-tr .ref { color: var(--text2); font-variant-numeric: tabular-nums; }
.s-table.prog .s-tr { grid-template-columns: 3.25rem minmax(0, 1fr); align-items: start; }
.s-table.prog .s-tr > .s-p { grid-column: 2; justify-self: start; }
.s-rv { display: inline-flex; gap: 3px; margin-right: 6px; }
.s-rv s { width: 9px; height: 9px; border-radius: 50%; background: var(--s-acc); }
.s-rv s.e { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text2); }
.s-p { display: inline-block; padding: 3px 9px; border-radius: 999px; font-style: normal; font-weight: 600; white-space: nowrap; background: var(--subtle); color: var(--text2); }
.s-p.ok { background: var(--ok-bg); color: var(--ok-fg); }
.s-p.warn { background: var(--warn-bg); color: var(--warn-fg); }
.s-p.bad { background: var(--bad-bg); color: var(--bad-fg); }
.s-p.info { background: var(--s-acc-t); color: var(--s-acc-ink); }
.s-next { background: var(--s-deep); color: #F8F6F1; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 8px; justify-items: start; }
.s-next .s-k { color: var(--apricot); }
.s-next .s-m { color: #D9D2E3; }
/* Steppers stay one row; on narrow screens only the bars show, with a "Step 4 of 6" line under them */
.s-track { --n: 6; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px 6px; }
.s-track li { display: grid; grid-template-rows: 5px; grid-auto-rows: 0; overflow: hidden; gap: 5px; color: var(--text2); }
.s-step { color: var(--text2); }
.s-track li::before { content: ""; height: 5px; border-radius: 3px; background: var(--line); }
.s-track .ok { color: var(--ink); }
.s-track .ok::before { background: var(--s-acc); }
.s-track .cur { color: var(--ink); font-weight: 700; }
.s-track .cur::before { background: var(--apricot); }
.s-track.four { --n: 4; }
.s-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.s-li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.s-card .s-k + .s-li { border-top: 0; padding-top: 0; }
.s-li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-qr { flex: none; width: 56px; height: 56px; border-radius: 6px; border: 4px solid var(--surface); outline: 1px solid var(--line); background: repeating-conic-gradient(var(--ink) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }
@container (min-width: 440px) {
  .s-row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .s-row > .s-btn { display: inline-flex; }
  .s-track.four li { grid-auto-rows: auto; overflow: visible; }
  .s-track.four + .s-step { display: none; }
}
@container (min-width: 540px) {
  .s-track li { grid-auto-rows: auto; overflow: visible; }
  .s-track + .s-step { display: none; }
  .s-tr { grid-template-columns: 3rem minmax(0, 1fr) 5rem 6rem 9.5rem; }
  .s-tr .wide { display: block; }
  .s-table.prog .s-tr { grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; }
  .s-table.prog .s-tr > .s-p { grid-column: auto; }
}
@container (min-width: 640px) {
  .s-app { grid-template-columns: 150px minmax(0, 1fr); }
  .s-side { display: grid; gap: 2px; align-content: start; padding: 16px 10px; background: var(--surface); border-right: 1px solid var(--line); }
  .s-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The app, in a phone */
.phone { width: 300px; max-width: 100%; border: 8px solid var(--bezel); border-radius: 40px; display: grid; grid-template-columns: minmax(0, 1fr); outline: 1px solid var(--line); }
.ph-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 22px 16px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ph-top b { font: 500 1.375rem/1.1 var(--serif); }
.ph-top span { color: var(--text2); }
.ph-body { display: grid; gap: 10px; padding: 12px; align-content: start; }
.ph-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; background: var(--surface); border-top: 1px solid var(--line); }
.ph-tabs span { padding: 10px 2px 16px; color: var(--text2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.01em; }
.ph-tabs .on { color: var(--s-acc-ink); font-weight: 700; }
/* Hero: the dashboard with the phone overlapping it, on a plum-to-apricot panel */
.stage .art { position: relative; padding: 16px 16px 24px; border-radius: 28px; background: linear-gradient(135deg, var(--s-acc-t), var(--apricot-tint)); }
.stage .phone { position: relative; margin: -140px 4px 0 auto; width: 280px; }
.stage .s-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .stage .art { padding: 40px 40px 64px; }
  .stage .scr { width: calc(100% - 200px); }
  .stage .s-row > .s-btn { display: none; } /* the phone covers the row ends; no half-cut buttons */
  .stage .phone { position: absolute; right: 40px; bottom: -32px; margin: 0; width: 300px; }
  .stage figcaption { margin-top: 32px; }
}

/* Real app screenshots on the product page, three across even on a phone. */
.shots-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 540px; }
.shots-row img { width: 100%; height: auto; border: 5px solid var(--bezel); border-radius: 26px; box-shadow: var(--s-shadow); background: var(--paper); }
@media (max-width: 480px) { .shots-row { gap: 8px; } .shots-row img { border-width: 3px; border-radius: 16px; } }

/* Homepage hero: a dawn sky in the mark's colours (lavender, blush, apricot), with three real app screens fanned
   like the mark's three passes, each lit softly in its pass colour. The one bold moment on the site; everything
   below stays on paper. Light in both colour schemes on purpose: it is the brand's morning, not a theme. */
main section.dawn { position: relative; overflow: hidden; border-top: 0; color: #231B32; padding: 56px 0 24px;
  background:
    radial-gradient(55% 60% at 80% 45%, rgba(199, 181, 236, 0.75), transparent 70%),
    radial-gradient(45% 45% at 96% 92%, rgba(243, 183, 141, 0.55), transparent 70%),
    radial-gradient(40% 45% at 4% 6%, rgba(252, 233, 219, 0.9), transparent 70%),
    linear-gradient(180deg, #F3EEFB 0%, #F8F2F5 55%, #FDF1E8 100%); }
/* Three soft passes drift behind the screens, echoing the mark. */
.dawn::before, .dawn::after { content: ""; position: absolute; pointer-events: none; border-radius: 34px; filter: blur(2px); }
.dawn::before { width: 220px; height: 290px; right: 6%; top: 12%; transform: rotate(16deg); background: linear-gradient(160deg, rgba(243, 183, 141, 0.45), rgba(243, 183, 141, 0.12)); }
.dawn::after { width: 200px; height: 260px; right: 34%; bottom: -60px; transform: rotate(-14deg); background: linear-gradient(160deg, rgba(199, 181, 236, 0.55), rgba(199, 181, 236, 0.12)); }
.dawn { --focus: #6246A6; }
.dawn-grid { position: relative; z-index: 1; display: grid; gap: 24px; align-items: center; }
.dawn h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 500; max-width: 12ch; margin-bottom: 1.25rem; color: #231B32; }
.dawn .lede { color: #5A5266; max-width: 34rem; }
.dawn .btn { background: #231B32; border-color: #231B32; color: #F8F6F1; }
.dawn .btn.ghost { background: rgba(255, 255, 255, 0.6); color: #231B32; border-color: rgba(35, 27, 50, 0.18); }
.dawn .btn.ghost:hover { border-color: #231B32; }
.btn.apricot { background: var(--apricot); border-color: var(--apricot); color: #231B32; }
.fan { margin: 0; position: relative; z-index: 1; }
.fan figcaption { color: #6E6679; font-size: 0.875rem; text-align: center; margin-top: 4px; }
.fan-row { position: relative; height: clamp(360px, 92vw, 470px); }
.fan-row .screen { position: absolute; left: 50%; top: 18px; width: clamp(140px, 39vw, 200px); height: auto;
  border: 5px solid #231B32; border-radius: 28px; background: #F7F5FA;
  transform: translateX(var(--x, -50%)) rotate(var(--r, 0deg)); transform-origin: 50% 90%; }
.fan-row .screen:nth-child(1) { --x: -112%; --r: -11deg; top: 40px; box-shadow: 0 30px 60px -22px rgba(98, 70, 166, 0.45); }
.fan-row .screen:nth-child(2) { --x: -50%; z-index: 2; box-shadow: 0 36px 70px -20px rgba(35, 27, 50, 0.45); }
.fan-row .screen:nth-child(3) { --x: 12%; --r: 11deg; top: 40px; box-shadow: 0 30px 60px -22px rgba(184, 104, 52, 0.4); }
@media (min-width: 960px) {
  main section.dawn { padding: 88px 0 40px; }
  .dawn-grid { grid-template-columns: 5fr 6fr; gap: 32px; }
  .fan-row { height: 540px; }
  .fan-row .screen { width: 208px; border-width: 6px; border-radius: 32px; left: 44%; }
  .fan-row .screen:nth-child(1) { --x: -104%; }
  .fan-row .screen:nth-child(3) { --x: 4%; }
}
/* The Today section right under the dawn sky starts the paper part of the page. */
main section.dawn + section { border-top: 0; }
.today .s-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The page closes on the same dawn sky, with the mark lifted off it. */
main section.dawn.closing { padding: 72px 0; text-align: center; }
.closing .wrap { display: grid; justify-items: center; }
.closing h2 { font-size: clamp(2rem, 5vw, 3rem); }
.closing .lede { margin-left: auto; margin-right: auto; }
.closing .ctas { justify-content: center; }
.closing-mark { filter: drop-shadow(0 10px 24px rgba(98, 70, 166, 0.35)); margin-bottom: 12px; }

/* Why it matters: what a committee lives with today, beside what changes. The "today" side is quiet, on a fine
   lavender rule; the "with" side carries the weight, marked by a small pair of passes. */
.why .lede { max-width: 40rem; margin-bottom: 40px; }
.why-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.why-row { display: grid; gap: 8px 48px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.why-row p { margin: 0; }
.why-row .without { color: var(--text2); font-size: 1rem; padding-left: 14px; border-left: 2px solid rgba(199, 181, 236, 0.9); }
.why-head { display: none; }
@media (min-width: 860px) { .why-head { display: grid; grid-template-columns: 5fr 7fr; gap: 0 48px; padding-bottom: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--text2); } .why-head span + span { padding-left: 30px; color: var(--ink); } }
.why-row .with { position: relative; padding-left: 30px; font-size: 1.0625rem; }
.why-row .with::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 20px; border-radius: 5px; transform: rotate(-12deg);
  background: linear-gradient(160deg, var(--apricot), #E99A63); box-shadow: 7px -2px 0 -1px rgba(199, 181, 236, 0.9); }
.why-row .with strong { font-family: var(--serif); font-weight: 500; font-size: 1.3125rem; display: block; margin-bottom: 2px; }
@media (min-width: 860px) { .why-row { grid-template-columns: 5fr 7fr; align-items: baseline; padding: 28px 0; } }
/* Stacked hero (phones and tablets): the drifting passes shrink and tuck behind the screens. */
@media (max-width: 959px) {
  .dawn::before { width: 130px; height: 170px; right: -30px; top: auto; bottom: 200px; }
  .dawn::after { width: 120px; height: 160px; right: auto; left: -40px; bottom: 80px; }
}

/* Security page: six plain facts, each under a soft rule in one of the mark's colours. */
.facts { display: grid; gap: 28px; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; } }
.facts > div { border-top: 3px solid var(--apricot); padding-top: 14px; }
.facts > div:nth-child(3n+2) { border-top-color: #C7B5EC; }
.facts > div:nth-child(3n) { border-top-color: var(--signature); }
.facts h2 { font-size: 1.375rem; margin-bottom: 6px; }
.facts p { margin: 0; color: var(--text2); }
table.plain { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.9375rem; }
table.plain th, table.plain td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
table.plain th { font-weight: 600; color: var(--text2); }
@media (max-width: 559px) { table.plain { font-size: 0.875rem; } }

/* Labels above headings: quiet sentence case in plum, not tracked capitals (research and critique, 23 Oct). */
.overline { font: 600 0.9375rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--signature); }
footer.site h2, .jump p { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }

/* Hero: who replies, under the buttons. */
.founder-line { margin: 14px 0 0; font-size: 0.9375rem; color: #5A5266; }

/* From call for papers to next year's committee: a real sequence, so numbered. */
.steps { list-style: none; counter-reset: step; margin: 32px 0 8px; padding: 0; display: grid; gap: 24px; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { counter-increment: step; position: relative; padding-left: 52px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 44px; border-radius: 9px; transform: rotate(-6deg);
  display: grid; place-items: center; font: 500 1.125rem/1 var(--serif); color: #231B32; background: #EFE9FA; box-shadow: inset 0 0 0 1px rgba(98, 70, 166, 0.18); }
.steps li:nth-child(3n+2)::before { background: var(--apricot-tint); transform: rotate(5deg); }
.steps li:nth-child(3n)::before { background: #E4DCF6; transform: rotate(-2deg); }
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; color: var(--text2); }
.steps li:last-child::before { background: var(--apricot); }

/* The AXIS case: a real picture of the live site. */
.screen-wide { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--s-shadow); display: block; }

/* Price, worked through once. */
.example { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--s-shadow); }
.ex-head { font: 500 1.25rem/1.35 var(--serif); margin: 0 0 16px; }
.example dl { margin: 0; display: grid; gap: 0; }
.example dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.example dt { color: var(--text2); }
.example dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.example .ours { border-bottom: 0; margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(120deg, #EFE9FA, var(--apricot-tint)); }
.example .ours dt { color: var(--ink); font-weight: 600; }
.example .ours dd { font: 600 1.5rem/1 var(--serif); }
.example .ex-note { margin-top: 14px; font-size: 0.9375rem; color: var(--text2); }

/* Trust strip and founder. */
.trust .facts { margin: 24px 0 8px; }
.trust .facts h3 { margin-bottom: 4px; }
.founder-card { display: grid; gap: 20px; align-items: start; justify-content: start; }
@media (min-width: 700px) { .founder-card { grid-template-columns: auto minmax(0, 46rem); gap: 28px; } }
.founder-card img { filter: drop-shadow(0 10px 20px rgba(98, 70, 166, 0.3)); }
.founder-card .lede { margin-bottom: 0; }
.closing .ctas .btn.ghost { background: rgba(255, 255, 255, 0.6); }


/* Homepage opening (owner, 23 Oct): the mark assembles from three passes, opens into the three app screens,
   the headline writes itself in with "on the record" underlined, and two moments land on the record.
   It runs only under .motion (motion.js, before first paint); otherwise every element is in its final state. */

/* Headline: words, and a hand-drawn apricot line under "on the record". */
.dawn h1 .w { display: inline-block; }
.mark-line { position: relative; white-space: nowrap; }
.mark-line svg { position: absolute; left: -2%; right: -2%; bottom: -0.12em; width: 104%; height: 0.32em; overflow: visible; }
.mark-line path { fill: none; stroke: var(--apricot); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }

/* Toasts: two small moments on the record, beside the vote and the badge. */
.toast { position: absolute; z-index: 4; margin: 0; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: #231B32; font: 600 0.875rem/1.2 var(--sans); white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(35, 27, 50, 0.35), 0 0 0 1px rgba(35, 27, 50, 0.06); backdrop-filter: blur(6px); }
.toast b { width: 22px; height: 22px; border-radius: 50%; background: #1E7A4F; flex: none; position: relative; }
.toast b::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.toast span { font-weight: 400; color: #5A5266; margin-left: 2px; }
.t-vote { top: 4px; left: calc(44% - 40px); }
.t-wallet { bottom: 64px; right: 0; }
.t-wallet b { background: #231B32; }
.t-c2 b, .t-c3 b { background: #1E7A4F; }
/* Without motion only the first of the three badge-side moments shows; with motion they take turns */
.t-c2, .t-c3 { display: none; }
@media (max-width: 959px) {
  .t-vote { left: 50%; top: 0; transform: translateX(-50%); }
  .t-wallet { right: 2%; bottom: 40px; }
  .toast { font-size: 0.875rem; padding: 7px 12px 7px 8px; }
}
@media (max-width: 420px) { .t-wallet { display: none; } }

/* Ambient life, for everyone who has motion: screens bob, passes drift, sparkles twinkle. */
.fan-row { transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.motion .fan-row .screen { animation: bloom 1050ms cubic-bezier(0.18, 0.9, 0.24, 1.08) 900ms both, bob 6s ease-in-out 2.4s infinite alternate; }
.motion .fan-row .screen:nth-child(1) { animation-delay: 1000ms, 2.9s; animation-duration: 1050ms, 7s; }
.motion .fan-row .screen:nth-child(3) { animation-delay: 1080ms, 3.3s; animation-duration: 1050ms, 6.5s; }
@keyframes bloom { from { opacity: 0; transform: translateX(-50%) translateY(40px) rotate(0deg) scale(0.3); } 55% { opacity: 1; } to { opacity: 1; transform: translateX(var(--x, -50%)) rotate(var(--r, 0deg)); } }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -10px; } }
.motion .dawn::before { animation: drift-a 14s ease-in-out 2s infinite alternate; }
.motion .dawn::after { animation: drift-b 17s ease-in-out 2s infinite alternate; }
@keyframes drift-a { from { translate: 0 0; rotate: 0deg; } to { translate: -18px 22px; rotate: -4deg; } }
@keyframes drift-b { from { translate: 0 0; rotate: 0deg; } to { translate: 24px -16px; rotate: 5deg; } }
.fan { position: relative; }
.sparks { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sparks i { position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0.7; background: radial-gradient(circle, #fff 0 25%, rgba(243, 183, 141, 0.9) 35%, transparent 70%); }
.motion .sparks i { animation: twinkle 3.2s ease-in-out infinite; }
.sparks i:nth-child(1) { left: 12%; top: 8%; animation-delay: 1.8s; }
.sparks i:nth-child(2) { left: 78%; top: 4%; animation-delay: 2.6s; background: radial-gradient(circle, #fff 0 25%, rgba(199, 181, 236, 0.95) 35%, transparent 70%); }
.sparks i:nth-child(3) { left: 92%; top: 46%; animation-delay: 3.4s; width: 7px; height: 7px; }
.sparks i:nth-child(4) { left: 4%; top: 58%; animation-delay: 2.1s; background: radial-gradient(circle, #fff 0 25%, rgba(199, 181, 236, 0.95) 35%, transparent 70%); }
.sparks i:nth-child(5) { left: 55%; top: 1%; animation-delay: 3.9s; width: 6px; height: 6px; }
.sparks i:nth-child(6) { left: 30%; top: 82%; animation-delay: 3s; width: 8px; height: 8px; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.25); } }

/* The mark assembles: lavender and apricot passes fly in behind a plum front pass with its apricot dot,
   hold as the logo for a beat, then swell and dissolve as the screens bloom out of them. */
.assemble { display: none; }
.motion .assemble { display: block; position: absolute; left: 44%; top: 42%; width: 0; height: 0; z-index: 1; pointer-events: none; }
@media (max-width: 959px) { .motion .assemble { left: 50%; top: 40%; } }
.assemble i { position: absolute; width: 84px; height: 110px; left: -42px; top: -55px; border-radius: 18px; opacity: 0; }
.assemble i:nth-child(1) { background: #C7B5EC; animation: pass-a 1500ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both; }
.assemble i:nth-child(2) { background: var(--apricot); animation: pass-b 1500ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both; }
.assemble i:nth-child(3) { background: #6246A6; box-shadow: 0 0 0 4px #F8F6F1; animation: pass-c 1500ms cubic-bezier(0.2, 0.8, 0.2, 1) 280ms both; }
.assemble i:nth-child(3)::after { content: ""; position: absolute; left: 50%; top: 26%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--apricot); }
@keyframes pass-a { 0% { opacity: 0; transform: translate(-190px, -120px) rotate(-60deg) scale(0.6); } 40%, 62% { opacity: 1; transform: translate(-30px, 4px) rotate(-17deg); } 100% { opacity: 0; transform: translate(-60px, 0) rotate(-17deg) scale(2.4); } }
@keyframes pass-b { 0% { opacity: 0; transform: translate(200px, -90px) rotate(70deg) scale(0.6); } 40%, 62% { opacity: 1; transform: translate(30px, 4px) rotate(17deg); } 100% { opacity: 0; transform: translate(60px, 0) rotate(17deg) scale(2.4); } }
@keyframes pass-c { 0% { opacity: 0; transform: translate(0, 140px) scale(0.5); } 40%, 62% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, 10px) scale(2.6); } }

/* Words rise, the line draws, the rest of the copy follows, then the two moments land. */
.motion .dawn h1 .w { animation: word-in 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 75ms + 150ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(0.5em) rotate(3deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.motion .mark-line path { animation: draw 700ms cubic-bezier(0.6, 0, 0.2, 1) 1.5s both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.motion .dawn-copy > :not(h1) { animation: rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.motion .dawn-copy > :nth-child(2) { animation-delay: 700ms; }
.motion .dawn-copy > :nth-child(3) { animation-delay: 850ms; }
.motion .dawn-copy > :nth-child(4) { animation-delay: 1000ms; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.motion .t-vote { animation: pop 560ms cubic-bezier(0.3, 1.4, 0.4, 1) 2.15s both; }
.motion .t-c2, .motion .t-c3 { display: flex; }
.motion .t-wallet { animation: turn 12s ease-in-out infinite both; }
.motion .t-c1 { animation-delay: 2.75s; }
.motion .t-c2 { animation-delay: 6.75s; }
.motion .t-c3 { animation-delay: 10.75s; }
@keyframes turn { 0% { opacity: 0; translate: 0 12px; scale: 0.9; } 4%, 30% { opacity: 1; translate: 0 0; scale: 1; } 34%, 100% { opacity: 0; translate: 0 -8px; scale: 0.96; } }
@keyframes pop { from { opacity: 0; translate: 0 12px; scale: 0.85; } to { opacity: 1; translate: 0 0; scale: 1; } }
.motion .toast b { animation: check 400ms ease-out both; }
.motion .t-vote b { animation-delay: 2.35s; }
.motion .t-c1 b { animation-delay: 2.95s; }
.motion .t-c2 b { animation-delay: 6.95s; }
.motion .t-c3 b { animation-delay: 10.95s; }
@keyframes check { from { scale: 0.4; } 60% { scale: 1.2; } to { scale: 1; } }

/* Get the app: the official black App Store badge with clear space of a quarter of its height on every side
   (Apple's badge guidelines), Android as plain words (no Google artwork), and a QR to /app for desktop visitors. */
.app-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .app-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }
.badge-row { margin: 12px 0; }
.store-badge { display: inline-block; margin: 0 12px 0 0; border-radius: 8px; line-height: 0; }
.store-badge img { display: block; height: 48px; width: auto; }
.android { color: var(--text2); margin: 12px 0 0; }
.app-qr { margin: 0; display: none; justify-items: center; gap: 8px; text-align: center; }
.app-qr img { display: block; width: 148px; height: 148px; border-radius: 12px; border: 1px solid var(--line); background: #FFFFFF; }
.app-qr figcaption { color: var(--text2); font-size: 0.9375rem; max-width: 12rem; }
/* Phones open the App Store badge directly; the QR is for a visitor on a computer. */
@media (min-width: 760px) and (pointer: fine) { .app-qr { display: grid; } }

/* Sign in: organisers on the web, delegates and authors in the app. */
.signin .card { display: flex; flex-direction: column; }
.signin .card .ctas { margin-top: auto; padding-top: 16px; }
.signin .badge-row { margin-top: auto; padding-top: 8px; }

/* Help page: term and explanation pairs */
.prose dl { margin: 0 0 24px; }
.prose dt { font-weight: 600; color: var(--ink); margin-top: 16px; }
.prose dd { margin: 4px 0 0; padding-left: 14px; border-left: 3px solid var(--line); }
@media (max-width: 380px) { nav.main { gap: 0 12px; font-size: 0.9375rem; } }