/* apps/admin/public/css/public.css
   Forms and pages F3 (README 6, sites.css C; FP-4, FP-19; TESTS S-75, S-76, S-78, S-88, S-123): the public stylesheet,
   the one place the --pub-* set lives. A public page (PublicPage, BlockView's page blocks, PublicForm) reads ONLY
   --pub-* for colour, and each look derives --pub-* from the platform tokens and the tenant pair (--tenant,
   --tenant-fg), so a look cannot break contrast. The tenant pair reaches the page through the per-workspace stylesheet
   the renderer serves (FP-4); nothing here, and nothing inline, sets it. No admin or member stylesheet reads or sets a
   --pub-* (S-123), which is why this file lives here (F5: F2's site.css retired, every public page draws on this), outside the app and packages/ui trees the
   admin's CSS gates scan, and is served as /css/public.css beside /css/tokens.css. It carries its own focus ring and
   reduced-motion block because a public page loads neither motion.css nor an app stylesheet; it keeps their rules
   (the token ring, token durations and curves, the one phone breakpoint), proven by packages/ui/tests/publicCss.test.ts.

   A. The faces: Instrument Sans for every look's body, Source Serif 4 (SIL OFL 1.1, self-hosted, latin and latin-ext,
      the variable weight axis) for the Editorial look's display text only (FP-19). A page may not pick another font.
   B. The looks (README 6): what a look may change is the ground, the display face, heading size and weight, and the
      radius of cards. What it never changes: body type, contrast, the 44 px targets (public buttons and fields 52),
      focus rings, the footer, the form's field look (white, a 1 px --ink-2 border, in every look).
   C. The page: header, the stacked blocks with their width, alignment and background (README 0.3), the footer.
   D. The blocks, E. the public form. */

/* ---- A. Faces ---------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-normal-400-700.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- B. The looks ------------------------------------------------------------------------------------------------- */
[data-look] {
  --pub-font: var(--font);
  --pub-display: var(--font);
  --pub-max: 720px;                 /* the reading column of a public page */
  --pub-narrow: 560px;
  --pub-wide: 960px;
  --pub-gutter: 16px;
  --pub-radius: var(--r-card-sm);
  --pub-btn-h: 52px;                /* public primary button; never under 44 */
  --pub-field-h: 52px;
  --pub-target: 44px;
  /* F3-D1: the ring is --tenant-fg in every look, not only Bold. A button on the look's white card (the form, a card
     background) keeps a 3:1 edge however pale the tenant: the fill or the ring always measures it (S-76). */
  --pub-primary-bg: var(--tenant);
  --pub-primary-fg: var(--tenant-fg);
  --pub-primary-ring: var(--tenant-fg);
  --pub-btn-ring: var(--pub-primary-ring);
  --pub-btn-bg: var(--pub-primary-bg);
  --pub-btn-fg: var(--pub-primary-fg);
  --pub-brand: var(--tenant);
  --pub-brand-ink: var(--tenant-fg);
  /* The field look is the same in every look, so a field is always a field (README 6). */
  --pub-field-bg: var(--surface);
  --pub-field-ink: var(--ink);
  --pub-field-ink-2: var(--ink-2);
  --pub-field-border: var(--ink-2);
  --pub-error: var(--tone-coral-ink);
  --pub-alert-bg: var(--tone-coral);
  --pub-alert-ink: var(--tone-coral-ink);
  --pub-wait-bg: var(--tone-amber);
  --pub-wait-ink: var(--tone-amber-ink);
  /* A lesson callout on a page keeps its tonal pair. */
  --pub-tone-green: var(--tone-green);
  --pub-tone-green-ink: var(--tone-green-ink);
  --pub-tone-amber: var(--tone-amber);
  --pub-tone-amber-ink: var(--tone-amber-ink);
  --pub-tone-blue: var(--tone-blue);
  --pub-tone-blue-ink: var(--tone-blue-ink);
  --pub-display-case: none;
  --pub-display-w: 600;
  --pub-h1: clamp(32px, 5vw + 18px, 50px);
  --pub-h2: clamp(24px, 2vw + 18px, 32px);
}

[data-look="editorial"] {
  --pub-bg: var(--tenant-fg);
  --pub-ink: var(--tenant);
  --pub-ink-2: var(--tenant);
  --pub-surface: var(--surface);
  --pub-surface-ink: var(--ink);
  --pub-surface-ink-2: var(--ink-2);
  --pub-line: var(--line);
  /* FP-19: the one second face, on display text only. */
  --pub-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --pub-display-w: 600;
  --pub-h1: clamp(34px, 6vw + 18px, 50px);
}

[data-look="clean"] {
  --pub-bg: var(--surface);
  --pub-ink: var(--ink);
  --pub-ink-2: var(--ink-2);
  --pub-surface: var(--paper-3);
  --pub-surface-ink: var(--ink);
  --pub-surface-ink-2: var(--ink-2);
  --pub-line: var(--line);
  --pub-display-w: 600;
}

[data-look="bold"] {
  --pub-bg: var(--ink);
  --pub-ink: var(--paper);
  --pub-ink-2: var(--paper);
  --pub-surface: var(--surface);
  --pub-surface-ink: var(--ink);
  --pub-surface-ink-2: var(--ink-2);
  --pub-line: var(--line);
  --pub-display-w: 700;
  --pub-h1: clamp(36px, 7vw + 19px, 56px);
  --pub-radius: var(--r-card);
}

/* A card ground (the form, a Card background) and a brand ground take their own ink, so every child reads --pub-ink
   and stays on a measured pair. */
.ok-pub-form,
.ok-pub [data-background="card"] .ok-pub-inner,
.ok-pub-quote-figure {
  --pub-bg: var(--pub-surface);
  --pub-ink: var(--pub-surface-ink);
  --pub-ink-2: var(--pub-surface-ink-2);
}

/* Codex #593 r2: a form keeps the look's own primary button wherever it sits; on the brand ground the section's
   reversed button would be white on the form's white card. */
.ok-pub-form {
  --pub-btn-bg: var(--pub-primary-bg);
  --pub-btn-fg: var(--pub-primary-fg);
  --pub-btn-ring: var(--pub-primary-ring);
}

.ok-pub [data-background="brand"] {
  --pub-bg: var(--pub-brand);
  --pub-ink: var(--pub-brand-ink);
  --pub-ink-2: var(--pub-brand-ink);
  --pub-btn-bg: var(--pub-brand-ink);
  --pub-btn-fg: var(--pub-brand);
  --pub-btn-ring: var(--pub-brand-ink);
}

/* ---- C. The page -------------------------------------------------------------------------------------------------- */
.ok-pub,
.ok-pub *,
.ok-pub *::before,
.ok-pub *::after { box-sizing: border-box; }

.ok-pub {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pub-bg);
  color: var(--pub-ink);
  font-family: var(--pub-font);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ok-pub a { color: var(--pub-ink); }

.ok-pub a:focus-visible,
.ok-pub button:focus-visible,
.ok-pub input:focus-visible,
.ok-pub select:focus-visible,
.ok-pub textarea:focus-visible,
.ok-pub summary:focus-visible,
.ok-pub-table-wrap:focus-visible,
.ok-pub video:focus-visible,
.ok-pub iframe:focus-visible,
.ok-pub-cookies button:focus-visible,
.ok-pub-cookies a:focus-visible {
  outline: var(--focus-ring) solid var(--pub-ink); /* the token ring, in the ground's own ink */
  outline-offset: var(--focus-offset);
}

.ok-pub-skip {
  position: absolute;
  left: var(--pub-gutter);
  top: -100px;
  display: inline-flex;
  align-items: center;
  min-height: var(--pub-target);
  padding: 0 16px;
  border-radius: var(--r-control);
  background: var(--pub-btn-bg);
  color: var(--pub-btn-fg);
}

.ok-pub .ok-pub-skip { color: var(--pub-btn-fg); }
.ok-pub-skip:focus { top: var(--pub-gutter); }

.ok-pub-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ok-pub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--pub-wide);
  margin: 0 auto;
  padding: 12px var(--pub-gutter);
}

.ok-pub-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--pub-btn-bg);
  color: var(--pub-btn-fg);
  box-shadow: 0 0 0 1px var(--pub-btn-ring);
  font-size: 13px;
  font-weight: 700;
}

.ok-pub-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
}

.ok-pub-signin {
  display: inline-flex;
  align-items: center;
  min-height: var(--pub-target);
  padding: 0 6px;
  font-size: 15px;
  font-weight: 600;
  text-underline-offset: 3px;
}

.ok-pub-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  padding: 8px 0 40px;
}

.ok-pub-block {
  width: 100%;
  padding: 0 var(--pub-gutter);
}

.ok-pub-inner {
  width: 100%;
  max-width: var(--pub-max);
  margin: 0 auto;
}

.ok-pub-block[data-width="narrow"] .ok-pub-inner { max-width: var(--pub-narrow); }
.ok-pub-block[data-width="wide"] .ok-pub-inner { max-width: var(--pub-wide); }
.ok-pub-block[data-width="full"] .ok-pub-inner { max-width: none; }
.ok-pub-block[data-align="centre"] .ok-pub-inner { text-align: center; }
.ok-pub-block[data-align="centre"] .ok-pub-btn { margin-inline: auto; }

.ok-pub-block[data-background="brand"] {
  padding-block: 32px;
  background: var(--pub-bg);
  color: var(--pub-ink);
}

.ok-pub-block[data-background="card"] .ok-pub-inner {
  padding: 20px;
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  background: var(--pub-bg);
  color: var(--pub-ink);
}

.ok-pub-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: var(--pub-wide);
  margin: 0 auto;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--pub-ink-2);
  font-size: 14px;
}

.ok-pub-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ok-pub-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pub-target);
  min-width: var(--pub-target);
  padding: 0 8px;
}

.ok-pub-made {
  margin-left: auto;
  padding: 0 8px;
  color: var(--pub-ink-2);
}

/* ---- D. The blocks ------------------------------------------------------------------------------------------------ */
.ok-pub-display {
  margin: 0;
  font-family: var(--pub-display);
  font-weight: var(--pub-display-w);
  text-transform: var(--pub-display-case);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.ok-pub-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ok-pub-hero-title { font-size: var(--pub-h1); }

h2.ok-pub-hero-title,
.ok-pub-h2 { font-size: var(--pub-h2); }

.ok-pub-hero-sub {
  margin: 0;
  max-width: 44ch;
  color: var(--pub-ink-2);
  font-size: 17px;
  text-wrap: pretty;
}

.ok-pub-block[data-align="centre"] .ok-pub-hero-sub { margin-inline: auto; }

.ok-pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--pub-btn-h);
  max-width: 100%;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--pub-btn-bg);
  color: var(--pub-btn-fg);
  box-shadow: 0 0 0 2px var(--pub-btn-ring);
  font-family: var(--pub-font);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}

.ok-pub a.ok-pub-btn { color: var(--pub-btn-fg); }
.ok-pub-btn:active { transform: translateY(1px); }

.ok-pub-btn-quiet {
  background: transparent;
  color: var(--pub-ink);
  box-shadow: inset 0 0 0 2px var(--pub-ink);
}

.ok-pub a.ok-pub-btn-quiet { color: var(--pub-ink); }

.ok-pub-bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ok-pub-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ok-pub-bullet {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  text-align: start;
}

.ok-pub-bullet-mark { margin-top: 2px; }

.ok-pub-video { margin: 0; }

.ok-pub-video-el {
  display: block;
  width: 100%;
  border-radius: var(--pub-radius);
  background: var(--pub-surface);
}

.ok-pub-quotes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ok-pub-quote { display: flex; }

.ok-pub-quote-figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  background: var(--pub-bg);
  color: var(--pub-ink);
  text-align: start;
}

.ok-pub-quote-words { margin: 0; }
.ok-pub-quote-words p { margin: 0; }

.ok-pub-quote-name {
  color: var(--pub-ink-2);
  font-size: 14px;
  font-weight: 600;
}

.ok-pub-faq {
  border-top: 1px solid var(--pub-ink-2);
  text-align: start;
}

.ok-pub-faq-item { border-bottom: 1px solid var(--pub-ink-2); }

.ok-pub-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.ok-pub-faq-q::-webkit-details-marker { display: none; }
.ok-pub-faq-mark { flex: none; transition: transform var(--dur-fast) var(--ease); }
.ok-pub-faq-item[open] .ok-pub-faq-mark { transform: rotate(45deg); }

.ok-pub-faq-a {
  margin: 0 0 16px;
  color: var(--pub-ink-2);
  white-space: pre-line;
}

.ok-pub-countdown {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.ok-pub-booking {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  border-radius: var(--pub-radius);
  background: var(--pub-surface);
}

/* The lesson's text blocks on a page wear the look, not the admin's ink. */
.ok-pub .ok-blockview-p,
.ok-pub .ok-blockview-h2,
.ok-pub .ok-blockview-h3,
.ok-pub .ok-blockview-list,
.ok-pub .ok-blockview-callout,
.ok-pub .ok-blockview-missing,
.ok-pub .ok-blockview-figure { margin: 0; color: var(--pub-ink); }

.ok-pub .ok-blockview-p { white-space: pre-line; }
.ok-pub .ok-blockview-h2 { font-family: var(--pub-display); font-weight: var(--pub-display-w); font-size: var(--pub-h2); line-height: 1.15; }
.ok-pub .ok-blockview-h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.ok-pub .ok-blockview-list { padding-left: 24px; }
.ok-pub .ok-blockview-missing { color: var(--pub-ink-2); }
.ok-pub .ok-blockview-link { color: var(--pub-ink); }
.ok-pub .ok-blockview-img { display: block; max-width: 100%; height: auto; border-radius: var(--pub-radius); }

.ok-pub .ok-blockview-callout {
  padding: 14px 16px;
  border-radius: var(--r-control);
}

.ok-pub .ok-blockview-callout[data-tone="green"] { background: var(--pub-tone-green); color: var(--pub-tone-green-ink); }
.ok-pub .ok-blockview-callout[data-tone="amber"] { background: var(--pub-tone-amber); color: var(--pub-tone-amber-ink); }
.ok-pub .ok-blockview-callout[data-tone="blue"] { background: var(--pub-tone-blue); color: var(--pub-tone-blue-ink); }

.ok-pub .ok-blockview-embed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--pub-ink-2);
  border-radius: var(--pub-radius);
  color: var(--pub-ink);
}

/* ---- D2. Landing v3 L1 (LV-13): the site header, feature cards, comparison table, image and text, stats, the customer
   story and the pricing display. Every colour is a look's --pub-* pair; a card ground takes the surface pair the form
   and the quotes already measure (S-76). ------------------------------------------------------------------------- */
.ok-pub-card,
.ok-pub-story,
.ok-pub-pricing {
  --pub-bg: var(--pub-surface);
  --pub-ink: var(--pub-surface-ink);
  --pub-ink-2: var(--pub-surface-ink-2);
}

.ok-pub-sitehead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: var(--pub-wide);
  margin: 0 auto;
  padding: 12px var(--pub-gutter);
}

.ok-pub-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--pub-target);
  margin-right: auto;
  text-decoration: none;
}

.ok-pub a.ok-pub-lockup { color: var(--pub-ink); }
.ok-pub-lockup .ok-pub-name { flex: none; }
.ok-pub-logo { display: block; width: auto; max-width: 160px; height: 36px; object-fit: contain; }

.ok-pub-nav-list,
.ok-pub-menu-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ok-pub-nav-list { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ok-pub-menu-list { flex-direction: column; gap: 2px; }

.ok-pub-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pub-target);
  padding: 0 10px;
  font-size: 15px;
  font-weight: 600;
  text-underline-offset: 3px;
}

.ok-pub-menu-list .ok-pub-nav-link { display: flex; width: 100%; padding: 0 14px; }

/* The phone shows the menu, a larger screen the links: one navigation at a time (display none leaves the other out of
   the accessibility tree too). */
.ok-pub-nav { display: none; }

.ok-pub-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--pub-target);
  min-width: var(--pub-target);
  padding: 0 12px;
  border: 1px solid var(--pub-ink-2);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.ok-pub-menu-button::-webkit-details-marker { display: none; }

.ok-pub-menu-panel {
  position: absolute;
  top: 100%;
  right: var(--pub-gutter);
  left: var(--pub-gutter);
  z-index: 2;
  padding: 8px;
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  --pub-ink: var(--pub-surface-ink);
  background: var(--pub-surface);
  color: var(--pub-surface-ink);
}

.ok-pub .ok-pub-menu-panel a { color: var(--pub-surface-ink); }

.ok-pub-features,
.ok-pub-compare { display: grid; gap: 16px; }

.ok-pub-cards,
.ok-pub-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ok-pub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  background: var(--pub-bg);
  color: var(--pub-ink);
  text-align: start;
}

.ok-pub-card-icon { display: inline-flex; color: var(--pub-ink); }
.ok-pub-card-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ok-pub-card-text { margin: 0; color: var(--pub-ink-2); line-height: 1.5; }
.ok-pub .ok-pub-card a.ok-pub-card-link,
.ok-pub .ok-pub-story a.ok-pub-story-link { color: var(--pub-ink); }

.ok-pub-card-link,
.ok-pub-story-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--pub-target);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* The table scrolls inside itself on a narrow screen, never the page (S-88). */
.ok-pub-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  /* The surface pair directly, so the focus ring outside the box keeps the page ground's own ink. */
  background: var(--pub-surface);
  color: var(--pub-surface-ink);
}

.ok-pub-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ok-pub-table th,
.ok-pub-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pub-line);
  text-align: start;
  vertical-align: top;
  line-height: 1.4;
}

.ok-pub-table thead th { font-size: 14px; font-weight: 700; }
.ok-pub-table tbody th { font-weight: 600; }
.ok-pub-table tbody tr:last-child th,
.ok-pub-table tbody tr:last-child td { border-bottom: 0; }

.ok-pub-imagetext {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.ok-pub-imagetext-media { margin: 0; }
.ok-pub-imagetext-body { display: grid; gap: 12px; justify-items: start; }
.ok-pub-imagetext-text { margin: 0; white-space: pre-line; line-height: 1.6; }

.ok-pub-stat { display: flex; flex-direction: column; gap: 4px; }

.ok-pub-stat-figure {
  font-family: var(--pub-display);
  font-weight: var(--pub-display-w);
  font-size: var(--pub-h2);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ok-pub-stat-label { color: var(--pub-ink-2); font-size: 15px; line-height: 1.4; }

.ok-pub-story {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  background: var(--pub-bg);
  color: var(--pub-ink);
  text-align: start;
}

.ok-pub-story-words { margin: 0; font-family: var(--pub-display); font-size: 20px; line-height: 1.45; }
.ok-pub-story-words p { margin: 0; }
.ok-pub-story-who { display: flex; align-items: center; gap: 12px; }
.ok-pub-story-photo { flex: none; width: 52px; height: 52px; border-radius: var(--r-pill); object-fit: cover; }
.ok-pub-story-person { display: flex; flex-direction: column; gap: 2px; }
.ok-pub-story-name { font-weight: 700; }
.ok-pub-story-role { color: var(--pub-ink-2); font-size: 14px; }

.ok-pub-pricing {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 24px;
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  background: var(--pub-bg);
  color: var(--pub-ink);
  text-align: start;
}

.ok-pub-pricing .ok-pub-h2 { margin: 0; }
.ok-pub-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }

.ok-pub-price-amount {
  font-family: var(--pub-display);
  font-weight: var(--pub-display-w);
  font-size: var(--pub-h1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ok-pub-price-period { color: var(--pub-ink-2); font-size: 16px; }
.ok-pub-price-note { margin: 0; color: var(--pub-ink-2); font-size: 14px; }

/* ---- E. The public form ------------------------------------------------------------------------------------------- */
.ok-pub-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--pub-line);
  border-radius: var(--pub-radius);
  background: var(--pub-bg);
  color: var(--pub-ink);
  text-align: start;
}

.ok-pub-form .ok-pub-btn {
  align-self: stretch;
  width: 100%;
}

.ok-pub-alert {
  padding: 12px 14px;
  border-radius: var(--r-control);
  background: var(--pub-alert-bg);
  color: var(--pub-alert-ink);
  font-size: 15px;
  line-height: 1.45;
}

.ok-pub-alert[data-tone="wait"] {
  background: var(--pub-wait-bg);
  color: var(--pub-wait-ink);
}

.ok-pub-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ok-pub-field-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.ok-pub-label { font-weight: 600; }
.ok-pub-word { color: var(--pub-ink-2); }

.ok-pub-input {
  display: block;
  width: 100%;
  min-height: var(--pub-field-h);
  padding: 13px 14px;
  border: 1px solid var(--pub-field-border);
  border-radius: var(--r-control);
  background: var(--pub-field-bg);
  color: var(--pub-field-ink);
  font-family: var(--pub-font);
  font-size: 16px;
  line-height: 1.4;
}

.ok-pub-textarea { min-height: 120px; resize: vertical; }

.ok-pub-input[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--pub-error);
}

.ok-pub-error {
  margin: 0;
  color: var(--pub-error);
  font-size: 14px;
  font-weight: 600;
}

.ok-pub-consent {
  display: grid;
  cursor: pointer;
  grid-template-columns: var(--pub-target) minmax(0, 1fr);
  align-items: start;
  min-height: var(--pub-target);
}

.ok-pub-check {
  width: 22px;
  height: 22px;
  margin: 11px;
  accent-color: var(--pub-field-ink);
}

.ok-pub-consent-words {
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.ok-pub-fine {
  margin: 0;
  color: var(--pub-ink-2);
  font-size: 13px;
  line-height: 1.5;
}

/* The honeypot: off screen, out of the tab order, hidden from assistive technology (FP-6). */
.ok-pub-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The document a public page is (F5: the renderer's own body, class ok-pub-body): the page fills it edge to edge. */
.ok-pub-body { margin: 0; }

/* ---- F. After a send (F5, README 6k, 6l) ---------------------------------------------------------------------------
   The thank-you stands where the form stood, on the same card; the Confirmed page answers in the Hero's place. */
.ok-pub-thanks-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.ok-pub-thanks-line {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.ok-pub-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ok-pub-form .ok-pub-thanks-actions .ok-pub-btn { width: auto; flex: 1 1 200px; }

.ok-pub-btn:disabled { cursor: not-allowed; opacity: 0.55; }

/* The one live region (packages/ui Announcer, ruling RD-11) is visually hidden; a public page loads no a11y.css. */
.ok-pub .ok-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ok-pub-noscript {
  margin: 0;
  padding: 12px var(--pub-gutter);
  color: var(--pub-ink);
  font-size: 15px;
}

/* ---- F8: the cookie banner (FP-14, README 6t, S-83) ----------------------------------------------------------------- */
/* Only while a pixel is on, hidden until site.js finds no choice on the device. It carries the page's look (data-look)
   and sits on the look's surface; the two choices are the same size and weight (no nudge), 48 px tall. */
.ok-pub-cookies {
  position: fixed;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 10;
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--pub-surface);
  color: var(--pub-surface-ink);
  border: 2px solid var(--pub-line);
  border-radius: var(--pub-radius);
  font-family: var(--pub-font);
}
.ok-pub-cookies[hidden] { display: none; }
.ok-pub-cookies-title { margin: 0; font-size: 16px; font-weight: 600; }
.ok-pub-cookies-line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pub-surface-ink-2); }
.ok-pub-cookies-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ok-pub-cookies-choice {
  min-height: 48px;
  border: 1px solid var(--pub-surface-ink);
  border-radius: var(--r-control);
  background: var(--pub-surface);
  color: var(--pub-surface-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ok-pub-cookies-why {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--pub-surface-ink);
  text-decoration: underline;
}

/* ---- Desktop ------------------------------------------------------------------------------------------------------- */
/* F6b: a look root marked data-viewport="phone" keeps the phone layout at any window (the page editor's Phone preview at
   --canvas-phone draws what a phone draws); a public page never carries the mark. */
@media (min-width: 768px) {
  [data-look]:not([data-viewport="phone"]) { --pub-gutter: 40px; }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-head { padding-block: 20px; }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-main { gap: 40px; padding-top: 24px; }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-quotes[data-layout="row"] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-footer { padding: 12px 32px; }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-sitehead { padding-block: 20px; }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-nav { display: block; }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-menu { display: none; }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-imagetext { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .ok-pub:not([data-viewport="phone"]) .ok-pub-imagetext[data-side="right"] .ok-pub-imagetext-media { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ok-pub-btn,
  .ok-pub-faq-mark { transition: none; }
}