/* ==========================================================================
   THE PUBLIC PAGES - ONE FIXED LIGHT DESIGN (SETTLED P61 (8), P62 (2)-(4)).

   Home, What is this, Terms & Conditions and Privacy, Real sessions, Sign in
   and Create an account look the SAME on every device and whatever the
   device's own light/dark setting: a different look reads as a wrong address
   or a copycat page (P61 (8)). Signed-in members keep their own choice on
   the session pages (U9); nothing here touches those.

   Everything is scoped under `body.public`, so style.css (the session pages'
   palettes) cannot leak in and this file cannot leak out. The approved
   mock-ups are `design/mockups_step68/` - desktop 1440 wide, phone 390 wide.

   Colours: page #F5F5FA, cards #FFFFFF, alternate band #ECEDF6, borders
   #E3E4EE / #B9BDD4, text #1A1C29 / #4B4F63 / #646779, navy #2B3A7A for
   buttons, labels and links, night #0E1626 for the photo band, the top bar
   and the footer (footer text #D7DAE8 / #A6ABC2). Headings Source Serif 4,
   text Inter - both served from /static/fonts, never from Google (P62 (2)).
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("/static/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }

html:has(body.public) { background: #F5F5FA; }

body.public {
  margin: 0; background: #F5F5FA; color: #1A1C29;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 18px; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
body.public *, body.public *::before, body.public *::after { box-sizing: border-box; }
body.public a { color: #2B3A7A; }
body.public a:hover { color: #1A1C29; }
body.public .serif { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; }
body.public .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
body.public .pub-page { min-height: 100vh; display: flex; flex-direction: column; }
body.public .pub-grow { flex-grow: 1; }

/* ---- The notice strip - SETTLED P106 (g), (h), step 74. ----------------
   At the very top of every public page, above the bar (on the home page and
   the ad pages the bar lies over the photograph). The alternate band's
   lilac with the page's own text colour: 14.4:1. Two texts may stand in it,
   one under the other. `anywhere`: the words are the operator's. */
body.public .pub-notices {
  background: #ECEDF6; color: #1A1C29;
  border-bottom: 1px solid #B9BDD4;
  padding: 10px 24px; text-align: center;
  font-size: 15px; line-height: 1.45;
  overflow-wrap: anywhere; position: relative; z-index: 6;
}
body.public .pub-notices p { margin: 0; }
body.public .pub-notice + .pub-notice { margin-top: 6px; padding-top: 6px; border-top: 1px solid #DADCE8; }
@media (max-width: 760px) {
  body.public .pub-notices { padding: 8px 14px; font-size: 14px; }
}

/* ---- The owl. ONE file, coloured by the stylesheet (U38): a mask. ------ */
body.public .pub-owl {
  display: inline-block; flex-shrink: 0; width: 20px; height: 35px;
  background: currentColor;
  -webkit-mask: var(--owl-url) center / contain no-repeat;
          mask: var(--owl-url) center / contain no-repeat;
}

/* ---- The top bar ------------------------------------------------------- */
/* THE BAR IS A STRIP OF THE HOME PAGE'S PHOTO - its night sky and moon -
   on every public page that has no photo band of its own (SETTLED P93, the
   operator's choice (1) of four, 2 October 2026; a solid night bar before).
   Three layers: the home band's own shade (deeper at the top), the photo,
   and the night colour under both for the moment before the photo loads.
   The photo is as wide as the bar and placed so that the line of the MOON
   (23% down the picture) runs through the middle of the bar at any width -
   38px is half of the 76px bar, 12.9vw is 23% of the picture's height
   (56.04% of its width). A bar laid OVER a photo (the home page, the ad
   pages) is transparent and shows that photo instead.
   STEP 71 (P94 (2b)): the home photo is the operator's to replace, and "a
   new photo changes that bar too". public_base.html then sets --strip-wide
   and --strip-narrow to the new photo's two copies and --strip-y to 0, so
   the bar shows the TOP of his photo; without them this file's own picture
   and its measured placement stand. The 4.5:1 contrast of the words was
   measured on the photo the site ships with - with another photo it is his
   to look at ("Preview"), and the shade above it is unchanged. */
body.public .pub-top {
  display: flex; align-items: center; gap: 36px; padding: 16px 64px;
  background:
    linear-gradient(to bottom, rgba(14,22,38,0.82) 0, rgba(14,22,38,0) 140px),
    var(--strip-wide, url("hero-1920.webp")) 50% var(--strip-y, calc(38px - 12.9vw)) / 100% auto no-repeat,
    #0E1626;
  color: #FFFFFF; position: relative; z-index: 5;
}
body.public .pub-top.over-photo {
  position: absolute; top: 0; left: 0; right: 0; background: transparent;
  padding-top: 22px; padding-bottom: 22px;
}
body.public .pub-brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: #FFFFFF; font-size: 19px; font-weight: 600;
}
body.public .pub-brand:hover { color: #FFFFFF; }
body.public .pub-nav {
  display: flex; gap: 32px; flex-grow: 1; justify-content: flex-end;
  font-size: 15px; font-weight: 500;
}
body.public .pub-nav a { color: #FFFFFF; text-decoration: none; }
body.public .pub-nav a:hover,
body.public .pub-nav a[aria-current="page"] {
  color: #FFFFFF; text-decoration: underline; text-underline-offset: 6px;
}
body.public .pub-actions { display: flex; align-items: center; gap: 12px; }

/* ---- Pills ------------------------------------------------------------- */
body.public .pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 32px; border-radius: 999px;
  font: inherit; font-size: 17px; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  text-align: center;
}
body.public .pill-navy { background: #2B3A7A; color: #FFFFFF; font-weight: 600; }
body.public .pill-navy:hover { background: #22306A; color: #FFFFFF; }
body.public .pill-light { background: #FFFFFF; color: #1A1C29; border-color: #B9BDD4; }
body.public .pill-light:hover { color: #1A1C29; border-color: #2B3A7A; }
body.public .pill-small { min-height: 44px; padding: 0 22px; font-size: 15px; font-weight: 600; }
body.public .pill-ghost {
  background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.7);
}
body.public .pill-ghost:hover { color: #FFFFFF; background: rgba(255,255,255,0.10); }
body.public .pill-ghost[aria-current="page"] { background: rgba(255,255,255,0.14); }
body.public .pill-white { background: #FFFFFF; color: #2B3A7A; font-weight: 600; }
body.public .pill-white:hover { color: #1A1C29; }
body.public .pill-white[aria-current="page"] { box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }
body.public .pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- The phone menu: a <details>, so it opens with no script at all ---- */
body.public .pub-phone { display: none; }
body.public .pub-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7); color: #FFFFFF; position: relative;
  z-index: 30;
}
body.public .pub-menu > summary::-webkit-details-marker { display: none; }
body.public .pub-menu .icon-close { display: none; }
body.public .pub-menu[open] .icon-open { display: none; }
body.public .pub-menu[open] .icon-close { display: inline; }
body.public .pub-menu-panel {
  position: fixed; inset: 0; z-index: 20; background: #0E1626;
  padding: 84px 20px 32px; overflow-y: auto;
  display: flex; flex-direction: column;
}
body.public .pub-menu-panel nav { display: flex; flex-direction: column; }
body.public .pub-menu-panel nav a {
  display: flex; align-items: center; min-height: 64px; color: #FFFFFF;
  text-decoration: none; border-bottom: 1px solid rgba(215,218,232,0.18);
  font-family: "Source Serif 4", Georgia, serif; font-size: 26px;
}
body.public .pub-menu-panel .pub-menu-actions {
  display: flex; flex-direction: column; gap: 12px; padding-top: 32px;
}

/* ---- The photo band (home; the ad pages later) ------------------------ */
body.public .band { position: relative; background: #0E1626; color: #FFFFFF; }
body.public .band img {
  display: block; width: 100%; height: 600px; object-fit: cover;
  object-position: var(--focus-d, 50% 72%);
}
body.public .band::before, body.public .band::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
}
body.public .band::before {
  top: 0; height: 120px;
  background: linear-gradient(to bottom, rgba(14,22,38,0.55), rgba(14,22,38,0));
}
body.public .band::after {
  bottom: 0; height: 220px;
  background: linear-gradient(to bottom, rgba(14,22,38,0) 0%, rgba(14,22,38,0.72) 60%, #0E1626 100%);
}
body.public .band h1 {
  position: absolute; left: 0; right: 0; bottom: 40px; margin: 0; z-index: 2;
  padding: 0 24px; text-align: center;
  font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: 56px; line-height: 1.1; color: #FFFFFF;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}

/* ---- Sections ---------------------------------------------------------- */
body.public .label {
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #2B3A7A; font-weight: 600;
}
body.public .intro {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 56px 24px 96px; text-align: center;
}
body.public .intro h2 { margin: 0; font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
body.public .intro p { margin: 0; max-width: 760px; font-size: 19px; line-height: 1.6; color: #4B4F63; }
body.public .intro .pill-row { margin-top: 6px; }

body.public .white-band { background: #FFFFFF; border-top: 1px solid #E3E4EE; padding: 96px 120px; }
body.public .plain-band { border-top: 1px solid #E3E4EE; padding: 96px 120px; }
body.public .lilac-band { background: #ECEDF6; }
body.public .section-title { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
body.public .section-title h2,
body.public h2.serif-big {
  margin: 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: 44px; line-height: 1.15;
}
body.public .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
body.public .card3 {
  display: flex; flex-direction: column; gap: 14px; padding: 36px 32px;
  border-radius: 20px; background: #F5F5FA; border: 1px solid #E3E4EE;
}
body.public .card3 h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; }
body.public .card3 p { margin: 0; font-size: 17px; line-height: 1.65; }
/* The quotation sits at the foot of each card, so three cards of unequal
   text still line their quotations up (the uneven heights noted at the
   home page's approval). */
body.public .card3 figure { margin: auto 0 0; padding-top: 4px; display: flex; flex-direction: column; gap: 6px; }
body.public .card3 blockquote {
  margin: 0; font-family: "Source Serif 4", Georgia, serif; font-style: italic;
  font-size: 19px; line-height: 1.5; color: #2B3A7A;
}
body.public .card3 figcaption { font-size: 14px; color: #4B4F63; }
body.public .more-link { display: inline-block; margin-top: 40px; font-size: 17px; font-weight: 600; }

body.public .two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
body.public .two-col p { margin: 0 0 18px; font-size: 18px; line-height: 1.65; }

body.public .closing {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 110px 24px; text-align: center; background: #ECEDF6;
}
body.public .closing h2 {
  margin: 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: 50px; line-height: 1.12;
}
body.public .closing p { margin: 0; max-width: 620px; font-size: 18px; color: #4B4F63; }

/* ---- A page with a title and one white card (What is this, legal) ----- */
body.public .page-title { padding: 80px 24px 56px; text-align: center; }
body.public .page-title h1 {
  margin: 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: 52px; line-height: 1.12;
}
body.public .page-title p { margin: 16px auto 0; max-width: 680px; color: #4B4F63; font-size: 19px; }
body.public .doc-card {
  width: 800px; max-width: calc(100% - 24px); margin: 0 auto 96px;
  display: flex; flex-direction: column; gap: 48px; padding: 64px 72px;
  border-radius: 24px; background: #FFFFFF; border: 1px solid #E3E4EE;
  font-size: 18px; line-height: 1.7;
}
body.public .doc-card section { display: flex; flex-direction: column; gap: 14px; }
body.public .doc-card h2 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; }
body.public .doc-card p, body.public .doc-card ul, body.public .doc-card ol { margin: 0; }
/* A link he writes in a page text ([words](/address), step 71) stands out
   as the one approved link on What is this did. */
body.public .doc-card p a, body.public .doc-card li a { font-weight: 600; }
body.public .doc-card ul { padding-left: 26px; display: flex; flex-direction: column; gap: 6px; }
body.public .doc-card .doc { padding-top: 8px; border-top: 1px solid #E3E4EE; scroll-margin-top: 16px; }
body.public .doc-card .doc h2 {
  margin: 16px 0 0; font-family: "Source Serif 4", Georgia, serif;
  font-size: 30px; line-height: 1.2; font-weight: 400;
}
body.public .doc-card .doc h3 { margin: 12px 0 0; font-size: 20px; line-height: 1.3; font-weight: 700; }
body.public .contents ol { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
body.public .contents a { font-weight: 600; }
body.public .blanks {
  padding: 14px 16px; border-radius: 12px; background: #F5F5FA;
  border: 1px dashed #B9BDD4; font-size: 15px; line-height: 1.55; color: #4B4F63;
}

/* ---- Forms (Sign in, Create an account) -------------------------------- */
body.public .form-card {
  width: 480px; max-width: calc(100% - 24px); margin: 88px auto 104px;
  display: flex; flex-direction: column; gap: 18px; padding: 48px 48px 40px;
  border-radius: 24px; background: #FFFFFF; border: 1px solid #E3E4EE;
}
body.public .form-card.wide { width: 540px; margin-top: 72px; margin-bottom: 96px; }
body.public .form-card h1 {
  margin: 0; text-align: center; font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400; font-size: 40px; line-height: 1.15;
}
body.public .form-card .lead { margin: 0; text-align: center; color: #4B4F63; font-size: 16px; }
body.public .form-card form { display: flex; flex-direction: column; gap: 16px; margin: 6px 0 0; }
body.public .form-card label.field { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 600; }
body.public .form-card input[type=email],
body.public .form-card input[type=password],
body.public .form-card input[type=text] {
  display: block; width: 100%; min-height: 50px; padding: 0 14px; border-radius: 10px;
  border: 1px solid #B9BDD4; background: #FFFFFF; color: #1A1C29;
  font: inherit; font-size: 16px;
}
body.public .form-card input:focus-visible { outline: 2px solid #2B3A7A; outline-offset: 1px; }
body.public .form-card .note { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #4B4F63; }
body.public .form-card .boxes {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 16px;
  border-radius: 12px; background: #F5F5FA; border: 1px solid #E3E4EE;
}
body.public .form-card .check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
body.public .form-card .check input { flex-shrink: 0; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #2B3A7A; }
body.public .form-card .boxes p { margin: 0; font-size: 14px; line-height: 1.55; color: #4B4F63; }
body.public .form-card .center { margin: 0; text-align: center; font-size: 15px; line-height: 1.7; color: #4B4F63; }
body.public .form-card .rule { height: 1px; background: #E3E4EE; margin: 4px 0; }
body.public .form-card .error {
  margin: 0; padding: 12px 14px; border-radius: 10px; background: #FBEDEE;
  border: 1px solid #E6B8BD; color: #7A1F2B; font-size: 15px;
}
body.public .form-card .closed p { margin: 0 0 12px; text-align: center; color: #1A1C29; }
body.public .form-card button.pill { width: 100%; border: 0; }

/* ---- Real sessions ------------------------------------------------------ */
body.public .examples-head {
  width: 760px; max-width: calc(100% - 40px); margin: 0 auto; padding: 72px 0 56px;
  display: flex; flex-direction: column; gap: 22px; text-align: center;
}
body.public .examples-head h1 {
  margin: 0; font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: 48px; line-height: 1.15;
}
body.public .examples-head p { margin: 0; font-size: 19px; line-height: 1.6; color: #4B4F63; }
body.public .example { border-top: 1px solid #E3E4EE; padding: 60px 20px 64px; }
body.public .example.odd { background: #ECEDF6; }
body.public .example-inner { width: 760px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
body.public .example h2 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 700; }
body.public .example .note { margin: 0; font-size: 15px; line-height: 1.5; color: #4B4F63; font-style: italic; }
body.public .about-box {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 28px;
  border-radius: 16px; background: #FFFFFF; border: 1px solid #DADCE8;
}
body.public .about-box .label, body.public .conv-label { font-size: 13px; letter-spacing: 0.12em; }
body.public .about-box div.text { white-space: pre-wrap; font-size: 18px; line-height: 1.65; }
body.public .conv-label { margin-top: 6px; text-transform: uppercase; color: #2B3A7A; font-weight: 600; }
/* P78 (C): the beginning of a conversation, fading out, then a button that
   opens the rest IN PLACE - never a box with its own scrolling, which on a
   phone catches the finger and scrolls the box instead of the page. */
body.public .conv {
  position: relative; display: flex; flex-direction: column; padding: 28px 36px;
  border-radius: 16px; background: #F5F5FA; border: 1px solid #DADCE8;
  font-size: 18px; line-height: 1.65;
}
body.public .conv.cut { max-height: 640px; overflow: hidden; }
body.public .conv.cut::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to bottom, rgba(245,245,250,0) 0%, #F5F5FA 85%);
}
body.public .conv .turn-user {
  background: #FFFFFF; border: 1px solid #DADCE8; border-radius: 10px;
  padding: 0.85rem 1.1rem; margin: 0.75rem 0; white-space: pre-wrap;
}
body.public .conv .turn-agent { margin: 0.75rem 0 1.25rem; white-space: pre-wrap; }
/* Step 70: a real session is the dreamer's and the model's own words, and
   since TESTING_TODO 7 the operator's title and note. A long web address or
   an unbroken run in any of them wraps instead of pushing a phone sideways
   (found with a 70-character word in a reply's bold). */
body.public .example h2, body.public .example .note,
body.public .examples-head p, body.public .examples-head li,
body.public .examples-head h2,
body.public .about-box div.text,
body.public .conv .turn-user, body.public .conv .turn-agent,
body.public .conv .turn-agent strong, body.public .conv .turn-agent em {
  overflow-wrap: anywhere;
}
body.public .conv-toggle {
  align-self: center; min-height: 48px; padding: 0 26px; border-radius: 999px;
  border: 1px solid #2B3A7A; background: #FFFFFF; color: #2B3A7A;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
body.public .empty-note {
  width: 760px; max-width: calc(100% - 40px); margin: 0 auto 72px; padding: 28px;
  border-radius: 16px; background: #FFFFFF; border: 1px solid #E3E4EE;
  text-align: center; color: #4B4F63;
}

/* ---- The footer -------------------------------------------------------- */
body.public .pub-foot {
  display: flex; flex-direction: column; gap: 20px; padding: 44px 120px 52px;
  background: #0E1626; color: #A6ABC2;
}
body.public .pub-foot .row { display: flex; align-items: center; gap: 36px; }
body.public .pub-foot .pub-owl { width: 16px; height: 28px; color: #FFFFFF; }
body.public .pub-foot nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; }
body.public .pub-foot nav a { color: #D7DAE8; }
body.public .pub-foot nav a:hover { color: #FFFFFF; }
body.public .pub-foot p { margin: 0; max-width: 900px; font-size: 15px; line-height: 1.6; white-space: pre-line; }

/* ==========================================================================
   THE PHONE (390 wide in the mock-ups). One breakpoint, where the desktop
   top bar stops fitting.
   ========================================================================== */
@media (max-width: 900px) {
  body.public .white-band, body.public .plain-band { padding: 56px 20px; }
  body.public .cards { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  body.public .card3 { padding: 24px 20px; }
  body.public .card3 p { font-size: 16px; }
  body.public .card3 blockquote { font-size: 18px; }
  body.public .two-col { grid-template-columns: 1fr; gap: 16px; }
  body.public .two-col p { font-size: 16px; margin-bottom: 16px; }
  body.public .section-title h2, body.public h2.serif-big { font-size: 30px; line-height: 1.18; }
  body.public .label { font-size: 12px; }
  body.public .pub-foot { padding: 36px 20px 44px; gap: 16px; }
  body.public .pub-foot .row { flex-direction: column; align-items: flex-start; gap: 16px; }
  body.public .pub-foot nav { flex-direction: column; gap: 4px; }
  body.public .pub-foot nav a { display: flex; align-items: center; min-height: 44px; }
  body.public .pub-foot p { font-size: 14px; }
}
@media (max-width: 760px) {
  body.public { font-size: 16px; }
  body.public .pub-top { gap: 8px; padding: 8px 12px 8px 16px; min-height: 60px; }
  body.public .pub-top.over-photo { padding-top: 8px; padding-bottom: 8px; }
  body.public .pub-brand { flex-grow: 1; gap: 10px; font-size: 17px; }
  body.public .pub-brand .pub-owl { width: 18px; height: 32px; }
  body.public .pub-nav, body.public .pub-actions { display: none; }
  body.public .pub-phone { display: flex; align-items: center; gap: 8px; }
  body.public .pub-phone .pill-small { padding: 0 14px; }

  body.public .band img { height: auto; aspect-ratio: 5 / 4; object-position: var(--focus-m, 52% 50%); }
  body.public .band { padding-bottom: 69px; }
  body.public .band::before { height: 80px; }
  body.public .band::after { height: 159px; }
  body.public .band h1 { bottom: 16px; padding: 0 20px; font-size: 28px; line-height: 1.12; }

  body.public .intro { align-items: stretch; text-align: left; gap: 14px; padding: 24px 20px 48px; }
  body.public .intro h2 { font-size: 24px; line-height: 1.25; }
  body.public .intro p { font-size: 16px; }
  body.public .pill-row { flex-direction: column; align-items: stretch; }
  body.public .pill { width: 100%; }
  body.public .closing { padding: 64px 20px; gap: 16px; }
  body.public .closing h2 { font-size: 32px; line-height: 1.15; }
  body.public .closing p { font-size: 16px; }

  body.public .page-title { padding: 40px 20px 28px; }
  body.public .page-title h1 { font-size: 32px; line-height: 1.15; }
  body.public .doc-card {
    width: auto; max-width: none; margin: 0 12px 56px; gap: 36px;
    padding: 32px 20px; border-radius: 18px; font-size: 16px; line-height: 1.65;
  }
  body.public .doc-card h2 { font-size: 20px; }
  body.public .doc-card .doc h2 { font-size: 26px; }
  body.public .doc-card .doc h3 { font-size: 18px; }

  body.public .form-card, body.public .form-card.wide {
    width: auto; max-width: none; margin: 28px 12px 48px; padding: 32px 20px; border-radius: 18px;
  }
  body.public .form-card h1 { font-size: 32px; }

  body.public .examples-head { padding: 32px 0 36px; text-align: left; gap: 16px; }
  body.public .examples-head h1 { font-size: 30px; }
  body.public .examples-head p { font-size: 17px; }
  body.public .example { padding: 36px 20px 40px; }
  body.public .example h2 { font-size: 20px; }
  body.public .about-box { padding: 16px; }
  body.public .about-box div.text, body.public .conv { font-size: 16px; }
  body.public .conv { padding: 18px 16px; }
  body.public .conv.cut { max-height: 560px; }
}

/* ---- The older signed-out pages, brought into the public frame ---------
   signup_pending, verified, reset_request and reset keep their markup and
   their class names; these rules give those names the public look, so the
   pages a new member passes through after "Create an account" stay in the
   same design (P61 (8)) without their wording being touched. */
body.public .form-card h1 + .sub, body.public .form-card .sub {
  margin: 0; text-align: center; color: #4B4F63; font-size: 16px; line-height: 1.6;
}
body.public .form-card label:not(.check):not(.field) {
  display: block; margin: 0 0 -10px; font-size: 15px; font-weight: 600;
}
body.public .form-card .error-text {
  padding: 12px 14px; border-radius: 10px; background: #FBEDEE;
  border: 1px solid #E6B8BD; color: #7A1F2B; font-size: 15px;
}
body.public .form-card .field-note {
  margin: 0; text-align: center; font-size: 15px; line-height: 1.7; color: #4B4F63;
}
body.public .form-card .send {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 54px; border: 0; border-radius: 999px; background: #2B3A7A;
  color: #FFFFFF; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
}
body.public .form-card .menu-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid #B9BDD4;
  background: #FFFFFF; color: #1A1C29; font: inherit; font-size: 16px;
  font-weight: 500; text-decoration: none; cursor: pointer; margin: 0 6px 6px 0;
}
body.public .form-card .resend-form { display: flex; justify-content: center; margin: 0; }
body.public .pub-menu-panel .pub-brand {
  position: absolute; top: 8px; left: 16px; min-height: 44px; flex-grow: 0;
}

/* ---- Fixes from the step-68 independent review -------------------------- */
/* The bar's words never wrap; where they do not fit, the phone bar takes
   over (below). The mock-ups were 1440 and 390 wide only - the widths in
   between are where it broke. */
body.public .pub-brand, body.public .pub-nav a, body.public .pill-small { white-space: nowrap; }
/* style.css's `.check` (the session pages' form) must not leak in. */
body.public .form-card .check { color: #1A1C29; margin: 0; }
body.public .form-card textarea {
  display: block; width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #B9BDD4; background: #FFFFFF; color: #1A1C29;
  font: inherit; font-size: 16px; line-height: 1.5;
}
body.public .form-card .recovery-notice {
  padding: 16px 18px; border-radius: 12px; background: #F5F5FA;
  border: 1px solid #E3E4EE; font-size: 15px; line-height: 1.6;
}
body.public .form-card .recovery-notice p { margin: 0 0 10px; }
body.public .form-card .recovery-notice p:last-child { margin-bottom: 0; }
body.public .form-card .destroyed-list { margin: 0; padding-left: 22px; line-height: 1.8; }
body.public .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50; padding: 10px 16px;
  background: #FFFFFF; color: #2B3A7A; font-weight: 600; border-radius: 0 0 10px 0;
}
body.public .skip-link:focus { left: 0; }
/* White words over the photo: a deeper shade at the top and a soft shadow,
   so the links clear 4.5:1 over the bright middle of the picture. */
body.public .band::before {
  height: 140px;
  background: linear-gradient(to bottom, rgba(14,22,38,0.82), rgba(14,22,38,0));
}
/* Every bar is over a photo since P93 - its own strip, or the page's band. */
body.public .pub-top .pub-nav a,
body.public .pub-top .pub-brand { text-shadow: 0 1px 6px rgba(0,0,0,0.65); }
body.public .pub-top .pill-ghost { background: rgba(14,22,38,0.45); }

/* Tablets and small laptops: the desktop bar does not fit under ~1120px,
   so the compact bar (owl and name, Sign in, menu) runs up to there. The
   page layouts keep their own breakpoints above. */
@media (max-width: 1120px) {
  body.public .pub-top {
    gap: 8px; padding: 8px 12px 8px 16px; min-height: 60px;
    background-position: 0 0, 50% calc(30px - 12.9vw), 0 0;  /* a 60px bar */
  }
  body.public .pub-top.over-photo { padding-top: 8px; padding-bottom: 8px; }
  body.public .pub-brand { flex-grow: 1; gap: 10px; font-size: 17px; }
  body.public .pub-brand .pub-owl { width: 18px; height: 32px; }
  body.public .pub-nav, body.public .pub-actions { display: none; }
  body.public .pub-phone { display: flex; align-items: center; gap: 8px; }
  body.public .pub-phone .pill-small { padding: 0 14px; }
}
/* Narrow phones (360, 375): a smaller name and tighter pills, so nothing
   wraps down to 320. */
@media (max-width: 389px) {
  body.public .pub-top { padding-left: 12px; padding-right: 8px; gap: 6px; }
  body.public .pub-brand { font-size: 15px; gap: 8px; }
  body.public .pub-phone { gap: 6px; }
  body.public .pub-phone .pill-small { padding: 0 11px; font-size: 14px; min-height: 40px; }
  body.public .pub-menu > summary { width: 40px; height: 40px; }
}
@media (max-width: 339px) {
  body.public .pub-brand { font-size: 13.5px; }
  body.public .pub-brand .pub-owl { width: 15px; height: 27px; }
}
/* A signed-in member's compact bar carries "Conversation", which is wider
   than "Sign in" - so the tighter sizes start sooner for a member, or the
   bar pushed a 390-wide phone sideways (found at the step-68 browser check). */
@media (max-width: 430px) {
  body.public .pub-top.is-member { padding-left: 12px; padding-right: 8px; gap: 6px; }
  body.public .pub-top.is-member .pub-brand { font-size: 15px; gap: 8px; }
  body.public .pub-top.is-member .pub-phone { gap: 6px; }
  body.public .pub-top.is-member .pub-phone .pill-small { padding: 0 11px; font-size: 14px; min-height: 40px; }
  body.public .pub-top.is-member .pub-menu > summary { width: 40px; height: 40px; }
}
@media (max-width: 389px) {
  body.public .pub-top.is-member .pub-brand { font-size: 13.5px; }
  body.public .pub-top.is-member .pub-brand .pub-owl { width: 15px; height: 27px; }
}
@media (max-width: 339px) {
  /* The narrowest phones (320): the name does not fit beside
     "Conversation", so the owl alone is the way home. The name stays in the
     page for a screen reader. */
  body.public .pub-top.is-member .pub-brand span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
/* A closed menu's panel is not merely unpainted, it is not there: it is
   fixed over the whole screen, and must never sit over the page unseen. */
body.public .pub-menu:not([open]) .pub-menu-panel { display: none; }

/* ---- The ad pages: Ln and SMn (step 69; SETTLED P72, P75, P79) ---------
   The photo band is the home page's. The bar holds only the owl and the
   name. The photo's crop is per photo: two variables on the <img>. */
body.public .land-top .pub-brand { cursor: default; }
body.public .land-plain-top .pub-top.over-photo {
  position: relative; background: #0E1626; padding-top: 16px; padding-bottom: 16px;
}
body.public .band.land-band img { object-position: var(--focus-d, 50% 50%); }
body.public .land-opening {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 56px 24px 88px; text-align: center;
}
body.public .land-opening.has-more { padding-bottom: 40px; }
body.public .land-opening.land-again { padding-top: 8px; }
body.public .land-opening p, body.public .land-opening li {
  margin: 0; max-width: 720px; font-size: 19px; line-height: 1.6; color: #4B4F63;
}
body.public .land-opening p.lead { font-size: 20px; color: #1A1C29; }
body.public .land-opening h2 { margin: 0; max-width: 720px; font-size: 24px; line-height: 1.3; font-weight: 700; }
/* A long web address or an unbroken word in the operator's text must wrap,
   not push a phone sideways (found by the step-69 review at 320-1024). */
body.public .land-opening p, body.public .land-opening li, body.public .land-opening h2,
body.public .land-chapters p, body.public .land-chapters li, body.public .land-chapters h2,
body.public .band.land-band h1, body.public .land-plain-top + .page-title h1 {
  overflow-wrap: anywhere;
}
body.public .land-opening ul { margin: 0; padding-left: 1.2em; text-align: left; max-width: 720px; }
body.public .land-buttons {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-top: 12px; align-self: stretch;
}
body.public .pill-long { text-align: center; }
body.public .land-chapters {
  width: 760px; max-width: calc(100% - 40px); margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px; padding: 0 0 48px;
}
body.public .land-chapters.sm-intro { padding-top: 56px; }
body.public .land-chapters h2 { margin: 14px 0 0; font-size: 24px; line-height: 1.3; font-weight: 700; }
body.public .land-chapters p, body.public .land-chapters li {
  margin: 0; font-size: 18px; line-height: 1.7; color: #1A1C29;
}
body.public .land-chapters p.lead { font-size: 19px; line-height: 1.6; }
body.public .land-chapters ul { margin: 0; padding-left: 1.2em; }
body.public .land-chapters .land-buttons { margin-top: 0; }
body.public .sm-session h2 { font-size: 24px; }
body.public .closing.plain { background: transparent; padding: 64px 24px 88px; gap: 18px; }
body.public .closing.plain h2 { font-size: 40px; line-height: 1.15; }
body.public .closing.plain .land-buttons { margin-top: 0; }

@media (max-width: 760px) {
  body.public .band.land-band img { object-position: var(--focus-m, 50% 50%); }
  body.public .land-opening { align-items: stretch; text-align: left; gap: 14px; padding: 24px 20px 48px; }
  body.public .land-opening.has-more { padding-bottom: 28px; }
  body.public .land-opening p, body.public .land-opening li { font-size: 16px; max-width: none; }
  body.public .land-opening p.lead { font-size: 17px; }
  body.public .land-opening h2 { font-size: 20px; max-width: none; }
  body.public .land-buttons { align-items: stretch; gap: 12px; margin-top: 8px; }
  body.public .pill-long { padding: 8px 20px; font-size: 16px; line-height: 1.3; }
  body.public .land-chapters { padding-bottom: 40px; }
  body.public .land-chapters.sm-intro { padding-top: 24px; }
  body.public .land-chapters h2 { font-size: 20px; }
  body.public .land-chapters p, body.public .land-chapters li { font-size: 16px; }
  body.public .land-chapters p.lead { font-size: 17px; }
  body.public .sm-session h2 { font-size: 20px; }
  body.public .closing.plain { padding: 40px 20px 48px; }
  body.public .closing.plain h2 { font-size: 28px; }
}

/* P93, the narrower desktop bars (1121-1359px): there is no room between
   the name and the links, and the moon landed behind "What is this" (4.33:1
   at 1121px, measured at the build). The strip is the top of the sky there,
   above the moon. From 1360px the moon sits clear in the gap. */
@media (min-width: 1121px) and (max-width: 1359px) {
  body.public .pub-top { background-position: 0 0, 50% 0, 0 0; }
}

/* P93 on a phone: the moon would sit behind the name, so the strip is the
   TOP of the sky, cut as the home page's phone band cuts it (5:4, 52%
   across) - and from the smaller picture. AFTER every other rule for the
   bar, so it wins over the 1120px block above. A bar laid over a photo is
   untouched: its `background: transparent` is the more specific rule. */
@media (max-width: 760px) {
  body.public .pub-top {
    background-image:
      linear-gradient(to bottom, rgba(14,22,38,0.82) 0, rgba(14,22,38,0) 140px),
      var(--strip-narrow, url("hero-960.webp"));
    background-size: auto, auto 80vw;
    background-position: 0 0, 52% 0;
  }
}

/* Step 71: every text of the public pages is the operator's to edit now -
   the home page, What is this, the legal documents, the sign-in
   introduction, the closed-sign-up message, the footer line. A long web
   address or an unbroken run of letters in any of them wraps instead of
   pushing a phone sideways (found with a 70-character word and a long
   address in every field, at 320 to 1024). Text elements only: a button
   or a menu entry must never break inside a word. */
body.public main p, body.public main li, body.public main h1,
body.public main h2, body.public main h3, body.public main blockquote,
body.public main figcaption, body.public main .label,
body.public .band h1, body.public .page-title h1,
body.public footer p, body.public footer li {
  overflow-wrap: anywhere;
}