/* Ask Eric, the paid product. One visual world across the whole surface, "Plain": leg D's
   information architecture (the first-visit index, the question as a heading with its answer
   beneath, the moments to watch as an index of cited moments, the counter in the masthead, the
   paywall as an insert on the fourth question) with the retro cues removed. Geist in a natural
   case, hairlines where the typed rules were, 10px radii, white bands with a hairline edge, teal
   as the one brand colour (the creator config's own accent). Dark mode is the same structure on
   the curing-chamber palette: near-black ground, bone type, one cured-red accent, and the paywall
   as the one light sheet on the page. The mode is decided by the visitor: prefers-color-scheme by
   default, or the appearance control (auto / light / dark, kept in localStorage and applied by
   the inline script in each page's <head>, which sets data-theme on <html> before first paint).
   Tokens and the font live in tokens.css. Diverges from demo/_templates on purpose (BUILD-NOTES,
   "Leg D divergence"). */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
::selection { background: var(--accent-tint); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: var(--accent); color: var(--on-accent); }
a { color: var(--accent); text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
button { font-family: inherit; font-size: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, textarea { caret-color: var(--accent); }
::placeholder { color: var(--ink-3); opacity: 1; }

/* scrollbars belong to the world too */
.thread { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.thread::-webkit-scrollbar { width: 8px; }
.thread::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

.app { height: 100dvh; display: flex; flex-direction: column; }
.inner { width: 100%; max-width: var(--col); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ---- the bands: paper with a hairline edge ---- */
.band { flex: none; background: var(--band); color: var(--ink); }
.band-top { border-bottom: 1px solid var(--rule); }
.band-bottom { border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; }
.wordmark {
  margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark a { color: inherit; text-decoration: none; }
.masthead-nav { display: flex; align-items: center; gap: 14px; font-size: .84rem; }
.masthead-nav a, .masthead-nav button {
  color: var(--ink-2); background: transparent; border: 0; padding: 0; cursor: pointer;
  text-decoration: none; font-weight: 500;
}
.masthead-nav a:hover, .masthead-nav button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.masthead-nav [hidden] { display: none !important; }
.badge {
  font-size: .72rem; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px 9px; text-decoration: none !important;
}
.premise .premise-short { display: none; }
.premise { margin: 6px 0 12px; font-size: .86rem; line-height: 1.45; max-width: 66ch; color: var(--ink-2); text-wrap: pretty; }
#nav-stamp:empty { display: none; }

/* the appearance mark: a small icon button in the masthead cycling auto, light, dark
   (theme.js draws the glyph and the label; the head script applies the choice before paint) */
.theme-mark {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 1px solid transparent !important; border-radius: 999px; color: var(--ink-2) !important;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.theme-mark svg { width: 15px; height: 15px; display: block; }
.theme-mark:hover, .theme-mark:focus-visible { border-color: var(--accent) !important; color: var(--accent-hover) !important; background: var(--accent-tint); text-decoration: none !important; }

/* ---- the page ---- */
.thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.page { padding-top: 22px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 30px; }
.page > * { min-width: 0; }

/* first-visit moment: a separable section (a later leg may put screens before it) */
.welcome { margin: auto 0; }
.welcome-title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.intro { margin: 10px 0 18px; max-width: 66ch; text-wrap: pretty; color: var(--ink-2); }
.intro:empty { display: none; }
/* an empty page: the heading and the composer sit in the middle, the suggestions under them;
   the first question moves the composer to the bottom band (app.js) */
.app.fresh .page { min-height: 100%; }
.app.fresh .welcome { margin: auto 0; padding-bottom: 6vh; }
.app.fresh .welcome-title { font-size: 1.6rem; letter-spacing: -.025em; text-align: center; margin: 0 0 18px; text-wrap: balance; }
.app.fresh .welcome .composer-form { margin: 0 0 16px; }
.app.fresh .band-bottom { border-top-color: transparent; }
.app.fresh .framing { text-align: center; max-width: none; }

/* first visit (arms A and B): the welcome dialog */
.welcome-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 24px 24px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--band); color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.welcome-dialog::backdrop { background: rgba(10, 12, 13, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.welcome-dialog[open] { animation: dialog-in .22s var(--ease) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
/* first visit: the page stays invisible until onboard.js has put the dialog up (html.pre-welcome, set before first paint) */
html.pre-welcome .app { opacity: 0; }
.app { transition: opacity .25s var(--ease); }
.welcome-dialog h2 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.welcome-dialog p { margin: 0 0 10px; color: var(--ink-2); text-wrap: pretty; }
.welcome-dialog .onboard-actions { margin-top: 18px; }
.welcome-dialog .onboard-actions .btn { width: 100%; }
.index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.idx {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px; margin: 0;
  color: var(--ink); cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.idx:hover, .idx:focus-visible { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-hover); outline-offset: -2px; }
:root[data-theme="dark"] .idx:hover, :root[data-theme="dark"] .idx:focus-visible { background: var(--well); color: var(--ink); }
.idx-t { flex: 1 1 auto; min-width: 0; }
.idx-ask { flex: none; color: var(--accent); font-weight: 500; font-size: .85rem; }

/* ---- a question and its answer ---- */
.msg { display: block; }
/* the visitor's turn: a soft bubble set to the right, the convention of the large chat products,
   so a short or misspelled question never reads as a heading over the answer */
.msg.user { display: flex; justify-content: flex-end; margin-bottom: -10px; }
.msg.user .bubble {
  max-width: min(80%, 60ch); padding: 9px 15px; border-radius: 18px 18px 4px 18px;
  background: var(--muted-fill); color: var(--ink); font-size: 1rem; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.assistant .bubble { max-width: 68ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble p { margin: 0 0 .75em; }
.bubble :last-child { margin-bottom: 0; }
.bubble ol, .bubble ul { margin: .2em 0 .8em; padding-left: 1.4em; }
.bubble li { margin: .25em 0; }
.bubble strong { font-weight: 600; }
.bubble h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 1.1em 0 .4em; }
.bubble a { color: var(--accent); }
.bubble table { border-collapse: collapse; margin: .4em 0 .9em; font-size: .92em; }
.bubble th, .bubble td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.bubble th { border-bottom: 1px solid var(--line); font-weight: 600; }

/* the wait before the first words: status sentence, seconds, a hairline with a travelling mark */
.waiting { display: flex; flex-direction: column; gap: 9px; max-width: 360px; white-space: normal; }
.waiting-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; color: var(--ink-2); }
.waiting-secs { flex: none; color: var(--ink-3); font-size: .85rem; font-variant-numeric: tabular-nums; }
.waiting-hair { position: relative; height: 2px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.waiting-hair::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 32%; border-radius: 2px; background: var(--accent); animation: wait-slide 1.6s var(--ease) infinite; }
@keyframes wait-slide { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes wait-fade { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* typing: a plain cursor, the one moment of motion in an answer */
.typing { display: inline-block; height: 1.2em; vertical-align: text-bottom; }
.typing .cursor { display: inline-block; width: .62ch; height: 1.05em; background: var(--accent); border-radius: 2px; animation: caret 1s steps(1, end) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---- the moments to watch ---- */
.cites { margin-top: 20px; width: 100%; border-top: 1px solid var(--rule); padding-top: 14px; animation: rise-in .32s var(--ease) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cites-label { font-size: .85rem; font-weight: 500; margin: 0 0 10px; color: var(--ink-2); }
.cite-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cite {
  display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: center;
  text-decoration: none; color: inherit; padding: 8px; background: var(--well); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.cite:hover { border-color: var(--accent); }
.cite-thumb { position: relative; aspect-ratio: 16/9; background: var(--rule-soft); overflow: hidden; border-radius: var(--r-sm); }
.cite-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cite-play { position: absolute; left: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 999px; background: var(--play); color: var(--play-ink); display: grid; place-items: center; }
.cite-play svg { width: 10px; height: 10px; display: block; margin-left: 1px; }
.cite-body { min-width: 0; }
.cite-title {
  font-size: .92rem; font-weight: 600; line-height: 1.35; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .15s var(--ease);
}
.cite:hover .cite-title, .cite:focus-visible .cite-title { color: var(--accent-hover); }
:root[data-theme="dark"] .cite:hover .cite-title { color: var(--ink); }
.cite-jump {
  display: inline-block; margin-top: 6px; padding: 3px 9px; font-size: .78rem; font-weight: 500; line-height: 1.3;
  color: var(--accent-hover); background: var(--accent-tint); border-radius: 999px;
}

/* ---- composer band ---- */
.composer-form { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.composer-input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); color: var(--ink);
  font: inherit; letter-spacing: inherit; line-height: 1.45; padding: 11px 14px; resize: none; overflow-y: hidden; max-height: 140px; display: block;
  outline: none; -webkit-appearance: none; appearance: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.composer-form:focus-within .composer-input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.send-btn {
  flex: none; width: 48px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--on-accent); cursor: pointer;
  display: grid; place-items: center; transition: background .15s var(--ease), transform .08s var(--ease);
}
.send-btn svg { width: 22px; height: 22px; display: block; }
.send-btn:hover { background: var(--accent-hover); }
.send-btn:active { transform: translateY(1px); }
.send-btn:disabled { background: var(--muted-fill); color: var(--ink-3); cursor: default; }
.framing { margin: 10px 0 12px; font-size: .76rem; line-height: 1.45; color: var(--ink-2); text-align: center; }
.framing a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .18em; }
.framing a:hover { color: var(--ink); text-decoration-color: currentColor; }
.framing:empty { display: none; }
.framing .note-short { display: none; }

/* ---- feedback ---- */
.fb-hide { display: none !important; }
.fb { margin-top: 16px; width: 100%; }
.fb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fb-q { font-size: .84rem; color: var(--ink-2); margin-right: 2px; }
.fb-thumb, .fb-chip {
  font-size: .82rem; font-weight: 500; color: var(--ink-2); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.fb-thumb:hover, .fb-chip:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-tint); }
:root[data-theme="dark"] .fb-thumb:hover, :root[data-theme="dark"] .fb-chip:hover { color: var(--ink); }
.fb-thumb.sel, .fb-chip.sel { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fb-follow { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { font-size: .76rem; padding: 2px 10px; }
.fb-note-row { display: flex; gap: 0; align-items: stretch; max-width: 460px; }
.fb-note {
  flex: 1; min-width: 0; font: inherit; letter-spacing: inherit; font-size: .86rem; color: var(--ink); background: var(--well);
  border: 1px solid var(--line); border-right: 0; border-radius: var(--r) 0 0 var(--r); padding: 7px 12px; outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.fb-note:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.fb-note-send, .fb-general-send {
  flex: none; font: inherit; letter-spacing: inherit; font-size: .82rem; font-weight: 600; color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: 0 var(--r) var(--r) 0; padding: 7px 14px; cursor: pointer; transition: background .15s var(--ease);
}
.fb-general-send { border-radius: var(--r); }
.fb-note-send:hover, .fb-general-send:hover { background: var(--accent-hover); }
.fb-thanks { font-size: .82rem; color: var(--accent-hover); font-weight: 500; align-self: center; }
:root[data-theme="dark"] .fb-thanks { color: var(--accent); }
.fb-priv { font-size: .74rem; color: var(--ink-2); line-height: 1.45; max-width: 66ch; margin-top: 6px; }

/* general feedback: an insert below the masthead */
.fb-general {
  flex: none; background: var(--band); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 9px; padding: 12px 20px 14px;
}
.fb-general > * { max-width: calc(var(--col) - 40px); width: 100%; margin-left: auto; margin-right: auto; }
.fb-general-text {
  font: inherit; letter-spacing: inherit; font-size: .9rem; color: var(--ink); background: var(--well); border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 12px; outline: none; resize: vertical; width: 100%; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.fb-general-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.fb-general-actions { display: flex; align-items: center; gap: 12px; }

@media (max-width: 599px) {
  /* first viewport on a phone: a one-line premise and the index above the fold; the framing
     line under the composer carries the AI and safety posture on first visit */
  .premise .premise-long { display: none; }
  .premise .premise-short { display: inline; }
  .intro { display: none; }
  .page { padding-top: 16px; }
  /* once a conversation exists the bands give the page back: the premise, the terms line and the
     framing sentence collapse; the counter in the masthead and the terms/privacy links stay */
  .app.has-thread .premise, .app.has-thread .terms-line, .app.has-thread .framing .note-text { display: none; }
  .app.has-thread .framing .note-short { display: inline; }
  .app.has-thread .framing { margin-top: 8px; }
  .masthead { flex-wrap: wrap; row-gap: 6px; }
  .wordmark { font-size: 1.12rem; }
  .masthead-nav { gap: 10px; font-size: .8rem; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .masthead-nav a, .masthead-nav button { white-space: nowrap; }
  .masthead-nav .stamp { font-size: .72rem; padding: 3px 9px; gap: 6px; }
  .masthead-nav .stamp .seg { width: 6px; height: 6px; }
  .msg.user .bubble { max-width: 88%; }
}
@media (min-width: 600px) {
  body { font-size: 16px; }
  .wordmark { font-size: 1.3rem; }
  .cite-grid { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .premise { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .thread { scroll-behavior: auto; }
  /* Reduced motion removes MOVEMENT, not the sign of life: the cursor keeps its blink and the
     hairline fades in place instead of travelling. A still indicator reads as a stalled page
     (Christo, 2026-09-20: the large chat products keep theirs alive under this setting). */
  .waiting-hair::after { width: 100%; animation: wait-fade 1.8s ease-in-out infinite; }
  .welcome-dialog[open], .cites { animation: none; }
  .app { transition: none; }
}

/* ---- 2026-09-25 (Christo's walk): new chat, the Cloudflare check card, the subscribed screen ---- */
.wordmark-link, .wordmark-link:hover { color: inherit; text-decoration: none; }
.wordmark-link:hover { opacity: .8; }
.new-chat { display: none; }
.app.has-thread .new-chat { display: inline; }

/* Collapsed unless Cloudflare wants a click; the widget keeps running inside it. */
.turnstile-host { height: 0; overflow: hidden; margin: 0; }
.turnstile-host.ts-active {
  height: auto; overflow: visible; margin: 0 0 12px; padding: 14px 16px 12px;
  border: 1.5px solid var(--accent); border-radius: 14px; background: var(--accent-tint);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  animation: dialog-in .22s var(--ease) both;
}
.ts-label { margin: 0; font-weight: 600; color: var(--ink); }
.turnstile-host:not(.ts-active) .ts-label { display: none; }

.subscribed-dialog { text-align: center; }
.sub-badge {
  width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent);
  animation: sub-pop .5s cubic-bezier(.2, 1.4, .4, 1) both .1s;
}
.sub-badge svg { width: 34px; height: 34px; }
.subscribed-dialog h2 { font-size: 1.6rem; }
@keyframes sub-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sub-badge, .turnstile-host.ts-active { animation: none; } }
.new-chat-inline { display: none; }
@media (max-width: 440px) {
  .app.has-thread .new-chat { display: none; }
  .app.has-thread .new-chat-inline { display: grid; place-items: center; flex: none; align-self: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); color: var(--ink-2); background: var(--paper); }
  .app.has-thread .new-chat-inline:hover { color: var(--accent); border-color: var(--accent); }
  .new-chat-inline svg { width: 20px; height: 20px; }
}
.nc-icon { display: none; }

/* ---- wallpaper: charcuterie doodles under the page, answers on cards (Christo 09-25 picked
   "doodle with answer cards" from research/eric-visual-concepts-2026-09-25). One tile, used as a
   mask, so colour and strength are two variables per theme. ---- */
:root { --wp-ink: #27272a; --wp-a: .12; --wp-ground: #f3f0ea; }
:root[data-theme="dark"] { --wp-ink: #efece4; --wp-a: .09; --wp-ground: var(--paper); }
body { background: var(--wp-ground); }
.wp-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--wp-ink); opacity: var(--wp-a);
  -webkit-mask-image: url("/img/doodle.svg"); mask-image: url("/img/doodle.svg");
  -webkit-mask-size: 420px 420px; mask-size: 420px 420px; -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.app { position: relative; z-index: 1; }
body .app.onboarding .thread { background: transparent; }
.msg.assistant { background: var(--well); border: 1px solid var(--rule); border-radius: 4px 18px 18px 18px; padding: 14px 16px 16px; }
.msg.assistant .cites { border-top-color: var(--rule-soft); }
.msg.user .bubble { border: 1px solid var(--rule); }

/* ---- welcome: curing rail + answer preview + safety line (Christo 09-25 picked "first answer" with
   the rail, "tint fade" and "accent bar" from research/eric-visual-concepts-2026-09-25). Used by
   the arm A dialog and the arm C intro card (onboard.js). The rail is /img/rail.svg, inlined; its
   drawn height sets the wash (--wash, sized in onboard.js), and the title sits 14 px below its
   lowest item, never below a picture box. ---- */
:root { --art-ink: #1f6f6b; --art-fill: #d3e8e5; --art-bg: #e6f1f0; }
:root[data-theme="dark"] { --art-ink: #e0603f; --art-fill: #4a2518; --art-bg: #2b1a14; }
.wl { isolation: isolate; position: relative; overflow: hidden; }
.wl::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--wash, 160px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--art-bg) 0%, var(--art-bg) 38%, transparent 100%);
}
.wl-rail { display: block; width: 100%; height: auto; max-height: 112px; }
.wl.wl-ready .wl-rail > path:first-child { visibility: hidden; } /* the CSS bar replaces the SVG's own, so the two never sit a subpixel apart */
.wl.wl-ready::after { content: ""; position: absolute; left: 0; right: 0; top: var(--rail-y); height: var(--rail-w); transform: translateY(-50%); background: var(--art-ink); pointer-events: none; }
.welcome-dialog.wl { padding: 0 0 20px; }
.welcome-dialog.wl .wl-body { padding: 0 24px; }
.welcome-dialog.wl .wl-rail + .wl-body > h2 { margin-top: 14px; }
.ob-card.wl.ob-intro .ob-body { padding-top: 0; margin-top: 14px; }
.wl-sample { margin: 14px 0 0; padding: 12px; background: var(--soft); border: 1px solid var(--rule); border-radius: var(--r); }
.ob-card .wl-sample { margin: 0 0 16px; }
.ob-card .ob-points + .wl-sample { margin-top: -4px; }
.welcome-dialog p.wl-cap, .wl-cap { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); text-transform: uppercase; }
.wl-q { margin: 0 0 10px auto; width: fit-content; max-width: 85%; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: var(--muted-fill); font-size: .86rem; line-height: 1.4; color: var(--ink); }
.wl-bars { display: grid; gap: 6px; margin: 0 0 10px; }
.wl-bars span { display: block; height: 7px; border-radius: 4px; background: var(--rule); }
.wl-bars span:nth-child(1) { width: 94%; } .wl-bars span:nth-child(2) { width: 82%; } .wl-bars span:nth-child(3) { width: 58%; }
.wl-sample .cite { grid-template-columns: 96px 1fr; padding: 6px; }
.wl-sample .cite:hover { border-color: var(--line); }
.wl-sample .cite-title { font-size: .82rem; }
.welcome-dialog p.wl-safe, .wl-safe { margin: 16px 0 0; padding: 1px 0 1px 12px; border-left: 3px solid var(--accent); font-size: .92rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.wl-safe strong { font-weight: 600; }
.ob-card .wl-safe { margin: 0 0 18px; }

/* ---- arm C intro card on phones (Christo 09-25): one plain line instead of two bullets, the
   title on one line and a little higher (it may sit on the tint), the button says what it does. ---- */
@media (max-width: 480px) {
  .ob-card.wl.ob-intro .ob-body { margin-top: 2px; }
  .ob-intro .ob-points { margin-bottom: 16px; }
  .ob-intro .ob-points li:nth-child(n+2) { display: none; }
  .ob-intro .ob-points li::before { display: none; }
}
/* arm C intro: the line that sat above the button went, so the safety line now meets the button (Christo 09-25: gap too large; was 18 + 10 + 14 = 42 px) */
.ob-card.ob-intro .wl-safe { margin-bottom: 0; }
.ob-card.ob-intro .ob-body { padding-bottom: 6px; }

/* no safety line in the welcome any more (Christo 09-25): the preview meets the button */
.ob-card.ob-intro .wl-sample { margin-bottom: 0; }

/* the AI line under the onboarding card, centred (Christo 09-25) */
.ob-card .ob-foot .ob-small { text-align: center; }