/* access.css: the access strip (terms line + the free-answer counter), the paywall insert in
   its three arms, the notices, and the onboarding screens. Same world as styles.css (tokens live
   there): Plain, with the dark palette through the same custom properties. */
#access-strip { margin-top: 10px; }
#access-strip:empty { display: none; }
.terms-line { margin: 0; font-size: .85rem; line-height: 1.4; color: var(--ink-2); }
.terms-line a { color: var(--accent); }
.turnstile-host { display: flex; justify-content: center; min-height: 0; }
.turnstile-host:not(:empty) { margin-top: 6px; }

/* the counter: a quiet pill in the masthead, one dot per free answer, filled while unread,
   plus the count in words. A change floods the pill with the accent and holds until the
   visitor next types. (The `stamp` class name is the JS contract from leg D; the look is a pill.) */
.stamp {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 3px 10px; border-radius: 999px; color: var(--accent-hover); background: var(--accent-tint);
  font-size: .78rem; font-weight: 500; line-height: 1.4; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
:root[data-theme="dark"] .stamp { color: var(--accent-hover); background: transparent; border: 1px solid var(--accent); padding: 2px 9px; }
.stamp .segs { display: inline-flex; gap: 3px; }
.stamp .seg { display: inline-block; width: 7px; height: 7px; border-radius: 999px; border: 1.5px solid var(--accent); background: transparent; }
.stamp .seg.on { background: var(--accent); }
.stamp.changed { background: var(--accent); color: var(--on-accent); }
/* dark: the rule above loses to the dark pill's transparent background on specificity, which left
   dark dots on a dark pill; restate the flood for dark */
:root[data-theme="dark"] .stamp.changed { background: var(--accent); color: var(--on-accent); }
.stamp.changed .seg { border-color: var(--on-accent); }
.stamp.changed .seg.on { background: var(--on-accent); }
.masthead-nav .stamp { font-size: .76rem; }

/* inserts on the page: the paywall is a card (a raised white card in light; in dark, the one
   light sheet on the page), a notice is a bordered slip */
.insert { margin: 4px 0 0; }
.insert.paywall {
  background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-line); border-radius: var(--r-card);
  padding: 24px 24px 20px; max-width: 560px; margin-left: auto; margin-right: auto; box-shadow: var(--sheet-shadow);
  animation: slip-in .42s var(--ease) both;
}
.insert.paywall a { color: var(--sheet-link); }
.insert.paywall p { margin: .4rem 0; max-width: 52ch; }
.insert-title { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
/* the two tiers (Tailark "Pricing Block One" shape): monthly beside annual, annual raised */
.insert-lead { margin: 0 0 6px; color: var(--sheet-ink-2); }
.tiers { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0 14px; }
.tier {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 18px 16px;
  background: var(--tier-bg); color: var(--sheet-ink); border: 1px solid var(--sheet-line); border-radius: var(--r);
}
.tier.raised { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--tier-shadow); }
.tier-badge {
  position: absolute; top: -10px; right: 14px; padding: 2px 9px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 600; letter-spacing: .01em;
}
.tier-name { font-weight: 600; font-size: .95rem; }
.tier-blurb { font-size: .82rem; color: var(--sheet-ink-2); min-height: 1.2em; }
.tier-price { margin-top: 14px; font-size: 1.9rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.tier-period { font-size: .82rem; color: var(--sheet-ink-2); }
.tier-billed { font-size: .78rem; color: var(--sheet-ink-2); margin-bottom: 12px; }
.tier-billed s { opacity: .7; }
.tier-cta {
  margin-top: auto; width: 100%; padding: 10px 14px; border-radius: var(--r); cursor: pointer; font-weight: 600; font: inherit; font-weight: 600;
  background: var(--well); color: var(--sheet-ink); border: 1px solid var(--sheet-line);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.tier-cta:hover, .tier-cta:focus-visible { border-color: var(--accent); color: var(--accent); }
.tier.raised .tier-cta { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tier.raised .tier-cta:hover, .tier.raised .tier-cta:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.tier-cta:disabled { opacity: .7; cursor: default; }
.tier-cta.busy::after { content: " ..."; }
.includes { margin: 0 0 10px; font-size: .86rem; }
.includes-lead { font-weight: 600; margin-bottom: 4px; }
.includes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.includes li { padding-left: 20px; position: relative; color: var(--sheet-ink-2); }
.includes li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
@media (min-width: 560px) { .tiers { grid-template-columns: 1fr 1fr; } .includes ul { flex-direction: row; flex-wrap: wrap; gap: 3px 18px; } }
.insert-small { font-size: .8rem; color: var(--sheet-ink-2); }
.insert-err { font-size: .85rem; min-height: 1em; margin: 6px 0 0; font-weight: 600; color: var(--danger); }
.insert-err:empty { display: none; }
.insert.notice { border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); padding: 10px 14px; font-size: .92rem; max-width: 60ch; }
@keyframes slip-in { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .insert.paywall { animation: none; } .stamp { transition: none; } }

/* ---- the hard gate (arm C), its dismissal lines, the value reveal, and the
   onboarding / guided-route screens ---- */
.insert.paywall .cta {
  display: block; width: 100%; text-align: left; margin: 4px 0 12px; padding: 12px 14px;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r); font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease);
}
:root[data-theme="dark"] .insert.paywall .cta { background: var(--accent); color: #141618; }
.insert.paywall .cta:hover, .insert.paywall .cta:focus-visible { background: var(--accent-hover); }
:root[data-theme="dark"] .insert.paywall .cta:hover, :root[data-theme="dark"] .insert.paywall .cta:focus-visible { background: var(--accent-hover); color: #141618; }
.insert.paywall .cta:disabled { opacity: .7; cursor: default; }
.insert.paywall .dismiss {
  display: inline-block; margin-top: 10px; padding: 0; background: transparent; border: 0; color: var(--sheet-ink-2); cursor: pointer;
  font-size: .88rem; font-weight: 500; text-decoration: underline; text-underline-offset: .18em;
}
.insert.paywall .dismiss:hover { color: var(--sheet-ink); }
/* dismissed: the card folds to its title so the answer above stays the page */
.insert.paywall.folded > *:not(.insert-title) { display: none; }
.insert.paywall.folded { padding: 14px 18px; }
.insert.paywall.folded .insert-title { margin: 0; font-size: 1rem; }
.insert.offer-line { border-top: 1px solid var(--rule); padding: 12px 0 0; max-width: 560px; }
.insert.offer-line p { margin: .3rem 0; max-width: 60ch; }
.insert.offer-line .plans { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 8px; }
.insert.offer-line .plan {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font: inherit; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.insert.offer-line .plan:disabled { opacity: .7; cursor: default; }
.insert.offer-line .plan.busy .plan-price::after { content: " ..."; }
.insert.offer-line .plan-price { text-align: right; }
.insert.offer-line .plan { background: var(--well); color: var(--ink); border-color: var(--line); }
.insert.offer-line .plan:hover, .insert.offer-line .plan:focus-visible { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }
:root[data-theme="dark"] .insert.offer-line .plan:hover, :root[data-theme="dark"] .insert.offer-line .plan:focus-visible { color: var(--ink); }
.insert.offer-line .insert-small { color: var(--ink-2); }
.insert.reveal { border-top: 1px solid var(--rule); padding-top: 10px; max-width: 60ch; color: var(--ink-2); font-size: .92rem; }
.insert.reveal p { margin: 0; }
.linkish { background: transparent; border: 0; padding: 0; color: var(--accent); font: inherit; letter-spacing: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: .16em; cursor: pointer; }
.linkish:hover { color: var(--accent-hover); }

/* ---- arm C onboarding: one bounded card, three steps (onboard.js) ---- */
.app.onboarding .page { background: transparent; }
.app.onboarding .thread { background: var(--soft); }
.ob-card { width: 100%; max-width: 560px; margin: 8px auto 0; background: var(--well); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sheet-shadow); overflow: hidden; }
.ob-head { padding: 24px 28px 0; }
.ob-progress { display: flex; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.ob-phase { flex: 1; color: var(--ink-3); font-size: .75rem; line-height: 1.3; }
.ob-phase::before { content: ""; display: block; height: 3px; background: var(--rule); border-radius: 3px; margin-bottom: 8px; }
.ob-phase.done::before, .ob-phase.active::before { background: var(--accent); }
.ob-phase.active { color: var(--ink); font-weight: 600; }
.ob-body { padding: 0 28px 26px; }
.ob-title { margin: 0 0 16px; font-size: 1.7rem; line-height: 1.18; letter-spacing: -.03em; font-weight: 650; text-wrap: balance; outline: none; }
.ob-lead { margin: 0 0 18px; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }
.ob-small { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-2); }
.ob-tiles, .ob-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-tile, .ob-option {
  text-align: left; background: var(--well); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; letter-spacing: inherit; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.ob-tile { padding: 14px; min-height: 84px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ob-tile strong { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.ob-tile span { font-size: .78rem; color: var(--ink-2); line-height: 1.4; }
.ob-option { padding: 16px; min-height: 64px; font-weight: 500; }
.ob-options .ob-option:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 44px; border-color: transparent; background: transparent; text-align: center; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: .88rem; }
.ob-tile:hover, .ob-option:hover { border-color: var(--accent); background: var(--accent-tint); }
.ob-tile:focus-visible, .ob-option:focus-visible, .ob-link:focus-visible, .ob-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-link { display: block; margin: 12px auto 0; min-height: 44px; padding: 10px 0; background: transparent; border: 0; color: var(--accent); font: inherit; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ob-foot { border-top: 1px solid var(--rule); padding: 16px 28px; }
.ob-foot .ob-actions + .ob-small { margin-top: 12px; }
.ob-actions { display: flex; gap: 12px; align-items: center; }
.ob-btn { min-height: 48px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r); font: inherit; letter-spacing: inherit; font-weight: 600; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); }
.ob-btn.primary { flex: 1; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ob-btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.ob-btn.primary:disabled { background: var(--muted-fill); border-color: var(--muted-fill); color: var(--ink-3); cursor: default; }
.ob-btn.secondary { background: var(--well); color: var(--ink); }
.ob-btn.secondary:hover { border-color: var(--accent); }
.ob-questions { border: 0; margin: 0; padding: 0; min-width: 0; }
.ob-question { display: flex; align-items: flex-start; gap: 11px; padding: 15px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; line-height: 1.45; }
.ob-question input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; margin: 3px 0 0; }
.ob-question:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.ob-question:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-label { display: block; font-weight: 600; font-size: .9rem; margin: 20px 0 8px; }
.ob-text { display: block; width: 100%; resize: vertical; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; }
.ob-text::placeholder { color: var(--ink-3); }
.ob-text:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ob-text + .ob-small { margin-top: 10px; }
.ob-status { display: flex; align-items: center; gap: 10px; color: var(--ink-2); padding: 20px 0; margin: 0; }
.ob-spin { width: 18px; height: 18px; border: 2px solid var(--rule); border-top-color: var(--accent); border-radius: 50%; animation: ob-spin .8s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ob-spin { animation: none; } }
@media (max-width: 480px) {
  .ob-head { padding: 20px 20px 0; } .ob-body { padding: 0 20px 22px; } .ob-foot { padding: 16px 20px; }
  .ob-title { font-size: 1.5rem; } .ob-progress { margin-bottom: 20px; gap: 10px; }
  .ob-tiles, .ob-options { gap: 10px; } .ob-tile { padding: 12px 11px; min-height: 80px; }
}
@media (max-width: 335px) { .ob-tiles, .ob-options { grid-template-columns: 1fr; } .ob-tile { min-height: 64px; } }
.onboard-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.onboard-actions .btn, .welcome .route-open .btn {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r); padding: 10px 18px;
  font: inherit; letter-spacing: inherit; font-weight: 600; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.onboard-actions .btn:hover, .welcome .route-open .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.onboard-actions .btn.secondary { background: var(--well); color: var(--ink); border-color: var(--line); }
.onboard-actions .btn.secondary:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover); }
:root[data-theme="dark"] .onboard-actions .btn.secondary:hover { color: var(--ink); }
.welcome .route-open { margin-top: 14px; }
/* arm C: no composer until the onboarding is done */
.app.onboarding .composer-form, .app.onboarding #access-strip { display: none; }
/* reduced motion keeps this blink: an opacity change is not movement, and a still mark reads as a stall */

/* the card foot, in three separate pieces (2026-09-20): the cancel promise reads first, the
   billing small print sits under it, the AI disclosure stands apart behind a rule, and the
   sign-in row is split from the legal links by a hairline */
.foot-terms { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--sheet-line); }
.insert.paywall .foot-cancel { margin: 0; font-size: .9rem; font-weight: 600; color: var(--sheet-ink); }
.insert.paywall .foot-terms .insert-small { margin: 2px 0 0; }
.insert.paywall .foot-honest { margin: 12px 0 0; padding-left: 10px; border-left: 2px solid var(--accent); font-size: .82rem; color: var(--sheet-ink-2); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--sheet-line); font-size: .8rem; color: var(--sheet-ink-2); }
.foot-legal { white-space: nowrap; }

/* ---- arm C: the check-in under the one free answer, and the pill that walks down to it ---- */
.insert.checkin {
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sheet-shadow);
  padding: 22px 24px 20px; max-width: 560px; margin: 0 auto; animation: slip-in .42s var(--ease) both;
  background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.insert.checkin .ck-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--well); }
.insert.checkin .ck-btn svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.insert.checkin .ck-btn:hover { background: var(--well); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.insert.checkin { text-align: center; }
.insert.checkin .insert-title { font-size: 1.25rem; margin-bottom: 14px; }
.ck-input { text-align: left; }
.ck-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck-btn { min-height: 48px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); color: var(--ink); font: inherit; letter-spacing: inherit; font-weight: 600; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); }
.ck-btn:hover { border-color: var(--accent); background: var(--accent-tint); }
.ck-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ck-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ck-line { margin: 0; color: var(--ink); line-height: 1.5; }
.ck-note { display: flex; gap: 10px; flex-wrap: wrap; }
.ck-input { flex: 1 1 100%; min-height: 48px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--well); color: var(--ink); font: inherit; font-size: 1rem; }
.ck-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ck-note .ck-btn { flex: 1 1 0; }
.ck-skip { background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500; }
.insert.checkin + .insert.paywall { margin-top: 16px; }
.next-pill {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 20;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 600; letter-spacing: inherit; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  animation: slip-in .3s var(--ease) both;
}
.next-pill[hidden] { display: none; }
.next-pill:hover { background: var(--accent-hover); }
.next-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .insert.checkin, .next-pill { animation: none; } }
@media (max-width: 480px) { .insert.checkin { padding: 20px 20px 16px; } }

/* the intro card before the topic step (no progress bar) */
.ob-intro .ob-body { padding-top: 30px; padding-bottom: 10px; }
.ob-intro .ob-foot { border-top: 0; padding-top: 14px; }
.ob-intro .ob-title { font-size: 2rem; }
.ob-points { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.ob-points li { display: flex; gap: 10px; line-height: 1.45; color: var(--ink); }
.ob-points li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--accent); }
.ob-free { margin: 0; font-weight: 600; color: var(--ink); }
@media (max-width: 480px) { .ob-intro .ob-body { padding-top: 24px; } .ob-intro .ob-title { font-size: 1.7rem; } }

/* ---- arm C: the exit offer after "Not now" (Christo, 2026-09-24: "could look a bit prettier") ---- */
.insert.exit-card {
  position: relative; max-width: 560px; margin: 16px auto 0; padding: 24px 24px 18px; text-align: center;
  background: var(--well); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--r-card);
  box-shadow: var(--sheet-shadow); animation: slip-in .42s var(--ease) both;
}
.xp-badge { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .85rem; font-weight: 700; letter-spacing: .01em; }
.insert.exit-card .insert-title { font-size: 1.35rem; margin-bottom: 4px; }
.xp-sub { margin: 0 0 16px; color: var(--ink-2); }
.xp-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; min-height: 48px; font: inherit; color: var(--ink); background: var(--well); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.xp:hover, .xp:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: none; }
.xp.primary { background: var(--accent-tint); border-color: var(--accent); }
.xp:disabled { opacity: .7; cursor: default; }
.xp.busy .plan-price::after { content: " ..."; }
.xp-name { font-weight: 600; }
.xp-price { display: flex; align-items: baseline; gap: 8px; }
.xp-price s { color: var(--ink-2); font-size: .95rem; }
.xp-price strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.xp-then { font-size: .82rem; line-height: 1.35; color: var(--ink-2); }
.insert.exit-card .insert-small { margin: 14px 0 0; color: var(--ink-2); font-size: .82rem; }
@media (max-width: 400px) { .xp-plans { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .insert.exit-card { animation: none; } }