/* Twine marketing site: page styles.
   Values come from css/tokens.css (the Twine Design System). Everything here mirrors
   the Claude Design pages in design/*.dc.html: Archivo at two weights, 2px rules
   between sections, 1px hairlines between rows, zero radius, no shadow, red only on
   the primary action and live state. */

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

html { scroll-behavior: auto; scroll-padding-top: var(--nav-h, 56px); }
body { min-height: 100vh; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }
button { margin: 0; font: inherit; color: inherit; }
textarea::placeholder, input::placeholder { color: var(--ink-40); }
svg.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.rule { height: var(--rule); background: var(--divider); }
.hairline { height: var(--hairline); background: var(--divider); }
.band { background: var(--surface); }
.section { padding-top: 48px; padding-bottom: 48px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px 56px; align-items: start; }

/* ── Type ───────────────────────────────────────────────────────────────── */
.kicker { display: block; font-size: var(--size-kicker); font-weight: var(--weight-kicker); line-height: var(--leading-tight); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--ink-50); }
.kicker--wide { letter-spacing: var(--tracking-kicker-wide); }
.kicker--tight { letter-spacing: 0.1em; }
.kicker--sm { font-size: var(--size-kicker-sm); }
.kicker--quiet { color: var(--accent-quiet); }
.note { display: block; font-size: var(--size-note); line-height: var(--leading-relaxed); color: var(--ink-60); }
.h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: var(--weight-heading); line-height: 1.08; letter-spacing: var(--tracking-heading-tight); text-wrap: pretty; }
.h1--page { margin-top: 14px; font-size: clamp(30px, 3.6vw, 40px); line-height: var(--leading-heading); max-width: 720px; }
.h2 { margin-top: 14px; font-size: clamp(26px, 3vw, 34px); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: pretty; }
.h2--narrow { max-width: 720px; }
.lead { margin-top: 16px; font-size: var(--size-tile); line-height: var(--leading-loose); color: var(--ink-70); text-wrap: pretty; }
.lead--narrow { max-width: 480px; }
.lead--wide { max-width: 620px; }
.lead--page { margin-top: 14px; max-width: 560px; }
.hero__lead { font-size: 17px; line-height: var(--leading-relaxed); color: var(--ink-70); max-width: 520px; text-wrap: pretty; }
.updated { margin-top: 14px; font-size: var(--size-sm); color: var(--ink-60); }

/* ── Nav ────────────────────────────────────────────────────────────────── */
/* Sticky, on the ground colour, separated from the page by the hairline alone; the
   system has no shadow layer. --nav-h is measured by site.js so anchor targets and the
   document side nav clear the bar. */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: var(--border-hairline); }
.nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 639px) {
  .nav { gap: 10px 16px; }
  .btn-cta { margin-left: auto; }
  .nav__links { order: 3; flex-basis: 100%; margin-left: 0; gap: 16px; }
}
.brand { display: flex; align-items: center; gap: 10px; font-size: var(--size-row); font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading-tight); color: var(--text); }
.brand__mark { display: block; width: 26px; height: 26px; object-fit: contain; }
.nav__links { display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--size-body-sm); margin-left: auto; }
.nav__links a.is-current { border-bottom: var(--rule) solid var(--accent); padding-bottom: 2px; }
.btn-cta { background: var(--accent); color: var(--on-accent); font-size: var(--size-body-sm); font-weight: var(--weight-heading); padding: var(--pad-button); line-height: var(--leading-tight); }
.btn-cta:hover, .btn-cta:active { color: var(--on-accent); background: var(--accent-700); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding-top: 56px; padding-bottom: 48px; }
.hero__copy { display: flex; flex-direction: column; gap: 20px; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.store { display: flex; flex-direction: column; gap: 3px; background: var(--text); color: var(--bg); padding: 9px 16px 10px; min-width: 164px; }
.store__os { font-size: var(--size-kicker-sm); letter-spacing: var(--tracking-kicker); text-transform: uppercase; opacity: 0.7; }
/* Before launch the platform label reads “Coming soon” in pale red on the ink tile. The
   tile flips to light ink in dark mode, so the red steps down its ramp to stay readable. */
.store__os--soon { color: var(--accent-400); opacity: 1; }
:root[data-theme="dark"] .store__os--soon { color: var(--accent-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .store__os--soon { color: var(--accent-700); }
}
.store__name { font-size: var(--size-tile); font-weight: var(--weight-heading); line-height: var(--leading-heading); }
.stores--small { margin-top: 4px; }
.stores--small .store { padding: 8px 14px 9px; min-width: 140px; }
.stores--small .store__name { font-size: var(--size-body); }

/* ── The framed panels (animations 1 and 3) ─────────────────────────────── */
.panel { border: var(--border-ink); background: var(--bg); }
.panel__head { background: var(--surface-fill-strong); color: var(--bg); padding: 9px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--size-kicker); letter-spacing: var(--tracking-kicker); text-transform: uppercase; line-height: var(--leading-body); }
.panel__head-right { margin-left: auto; opacity: 0.7; }
.panel__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel__col--src { border-right: var(--border-hairline); }
.panel__colhead { padding: 10px 14px 8px; border-bottom: var(--border-hairline); }
.ev { padding: 10px 14px; border-bottom: var(--border-hairline); transition: opacity var(--dur-control) var(--ease-control); }
.ev--last { border-bottom: none; }
.ev.is-off { opacity: 0; }
.ev__line { display: flex; align-items: baseline; gap: 8px; }
.ev__title { font-size: var(--size-body-sm); font-weight: var(--weight-heading); line-height: var(--leading-tight); }
.ev__mark { font-size: var(--size-kicker-sm); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--accent-quiet); }
.ev__time { font-size: var(--size-xs); color: var(--ink-60); margin-top: 3px; }
.panel__foot { border-top: var(--border-rule); padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
.panel__status { font-size: var(--size-sm); color: var(--ink-70); }
.icon--spin { color: var(--accent-text); }
.icon--spin.is-spinning { animation: twine-spin var(--dur-spin) linear infinite; }
@keyframes twine-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.panel__body { padding: 14px; }
.cond { margin-top: 8px; border: var(--border-hairline); background: var(--surface); padding: var(--pad-card-tight); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.cond__label { font-size: var(--size-label); }
.cond__input { background: var(--bg); border: var(--border-accent); padding: var(--pad-input); font-size: var(--size-body); line-height: var(--leading-dense); min-height: 36px; display: flex; align-items: center; }
.caret { display: inline-block; width: 1.5px; height: 16px; background: var(--accent); margin-left: 1px; }
.caret.is-off { opacity: 0; }
.panel__count { margin-top: 16px; font-size: var(--size-xl); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.panel__count + .note { margin-top: 4px; }
.panel__rows { border-top: var(--border-rule); }
.prow { padding: 10px 14px; border-bottom: var(--border-hairline); display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: opacity var(--dur-control) var(--ease-control); }
.prow:last-child { border-bottom: none; }
.prow.is-skipped { opacity: 0.45; }
.prow__main { min-width: 0; }
.prow__title { font-size: var(--size-body-sm); font-weight: var(--weight-heading); line-height: var(--leading-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow__time { font-size: var(--size-xs); color: var(--ink-60); margin-top: 2px; }
.prow__result { font-size: var(--size-kicker); letter-spacing: var(--tracking-kicker-tight); text-transform: uppercase; font-weight: var(--weight-heading); color: var(--accent-text); white-space: nowrap; }
.prow.is-skipped .prow__result { color: var(--ink-50); }

/* ── Column lists (refusals, trust) ─────────────────────────────────────── */
.facts { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 32px; border-top: var(--border-hairline); }
.fact { padding: 20px 0 24px; border-bottom: var(--border-hairline); }
.fact__title { font-size: var(--size-row); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.fact__body { margin-top: 8px; font-size: var(--size-body-sm); line-height: var(--leading-loose); color: var(--ink-60); }
.facts--tight .fact { padding: 16px 0; }
.facts--tight .fact__title { font-size: var(--size-body); letter-spacing: 0; line-height: var(--leading-body); }
.facts--tight .fact__body { margin-top: 4px; font-size: var(--size-label); line-height: var(--leading-relaxed); }

/* ── What lands (animation 2) ───────────────────────────────────────────── */
.list { margin-top: 24px; border-top: var(--border-hairline); }
.list__item { padding: 14px 0; border-bottom: var(--border-hairline); }
.list__title { font-size: var(--size-body); font-weight: var(--weight-heading); }
.list__body { font-size: var(--size-label); line-height: var(--leading-relaxed); color: var(--ink-60); margin-top: 3px; }
.card { border: var(--border-hairline); background: var(--bg); padding: var(--pad-card); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.card .chips { margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: var(--pad-chip); background: var(--bg); color: var(--text); border: var(--hairline) solid var(--divider); border-radius: var(--radius); font-size: var(--size-sm); font-weight: var(--weight-body); line-height: var(--leading-tight); cursor: pointer; transition: background var(--dur-control) var(--ease-control); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--text-on-fill); border-color: var(--text); }
.chip--accent[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mode-grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.mini { border: var(--border-hairline); padding: var(--pad-card-tight); background: var(--surface); }
.mini__title { font-size: var(--size-tile); font-weight: var(--weight-heading); margin-top: 8px; line-height: var(--leading-tight); }
.mini__time { font-size: var(--size-xs); color: var(--ink-60); margin-top: 3px; }
.mini__detail { font-size: var(--size-note); line-height: var(--leading-relaxed); color: var(--ink-70); }
.mini__detail--first { margin-top: 9px; }
.mode-arrow { padding-top: 40px; display: flex; justify-content: center; color: var(--accent-quiet); }
.mode-note { margin-top: 12px; }

/* ── How it works ───────────────────────────────────────────────────────── */
.steps { margin-top: 28px; border-top: var(--border-hairline); }
.step { padding: 16px 0; border-bottom: var(--border-hairline); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.step:last-child { border-bottom: none; }
.step__title { font-size: var(--size-card); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.step__body { font-size: var(--size-label); line-height: var(--leading-relaxed); color: var(--ink-60); margin-top: 4px; }

/* ── Who it's for ───────────────────────────────────────────────────────── */
.personas { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; }
.persona { border-top: var(--border-ink); padding-top: 16px; }
.persona__title { font-size: var(--size-dialog); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); margin-top: 8px; }
.persona__pain { margin-top: 8px; font-size: var(--size-label); line-height: var(--leading-relaxed); color: var(--ink-60); }
.persona__rules { margin-top: 16px; border-top: var(--border-hairline); }
.prule { padding: 12px 0; border-bottom: var(--border-hairline); }
.prule__dir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--accent-quiet); }
.prule__name { font-size: var(--size-tile); font-weight: var(--weight-heading); line-height: var(--leading-tight); margin-top: 5px; }
.prule__summary { font-size: var(--size-sm); line-height: var(--leading-body); color: var(--ink-60); margin-top: 3px; }
.prule__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag { display: inline-block; flex: none; padding: var(--pad-tag); background: var(--tag-bg); color: var(--tag-ink); font-size: var(--size-kicker); font-weight: var(--weight-body); line-height: var(--leading-dense); letter-spacing: 0.2px; white-space: nowrap; }
.tag--accent { background: var(--tint); color: var(--accent-pale); }
.persona__fit { margin-top: 12px; font-size: var(--size-sm); line-height: var(--leading-relaxed); color: var(--ink-60); }
.persona__fit strong { font-weight: var(--weight-heading); color: var(--text); }

/* ── Plans ──────────────────────────────────────────────────────────────── */
.plans { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.plan { background: var(--bg); border: var(--border-hairline); padding: 20px; }
.plan__name { font-size: var(--size-lead); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.plan__price { margin-top: 10px; font-size: var(--size-page); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading-tight); }
.plan__price-note { font-size: var(--size-sm); color: var(--ink-60); margin-top: 3px; min-height: 17px; }
.plan__rows { margin-top: 16px; border-top: var(--border-rule); }
.plan__row { padding: 10px 0; border-bottom: var(--border-hairline); display: flex; justify-content: space-between; gap: 12px; font-size: var(--size-label); line-height: var(--leading-body); }
.plan__row span:first-child { color: var(--ink-60); }
.plan__row span:last-child { font-weight: var(--weight-heading); text-align: right; }
.plans__notes { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 32px; font-size: var(--size-label); line-height: var(--leading-loose); color: var(--ink-60); max-width: 980px; }

/* ── Footers ────────────────────────────────────────────────────────────── */
.footer { padding-top: 40px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; justify-content: space-between; }
.footer__brand { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.footer__note { font-size: var(--size-label); line-height: var(--leading-loose); color: var(--ink-60); }
.footer__links { display: flex; flex-direction: column; gap: 10px; font-size: var(--size-body-sm); }
.foot-sub { padding-top: 24px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: var(--size-label); color: var(--ink-60); }

/* ── Sub-pages: header, document layout ─────────────────────────────────── */
.page-head { padding-top: 48px; padding-bottom: 24px; }
.page-head__action { display: inline-block; margin-top: 24px; }
.doc { padding-bottom: 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; align-items: start; }
.doc__nav { padding: 24px 0 8px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; max-width: 260px; }
.doc__body { max-width: 680px; min-width: 0; }
.doc__section { padding: 24px 0; border-bottom: var(--border-hairline); }
.doc__section h2 { font-size: var(--size-dialog); font-weight: var(--weight-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.doc__section p { margin-top: 10px; font-size: var(--size-body); line-height: var(--leading-loose); color: var(--ink-70); text-wrap: pretty; }
.doc__section p + p, .doc__section ul + p, .doc__section p + ul { margin-top: 8px; }
.doc__section ul { margin: 0; padding-left: 18px; font-size: var(--size-body); line-height: var(--leading-loose); color: var(--ink-70); }
.doc__section li + li { margin-top: 4px; }
.doc__section a { color: var(--text); text-decoration: underline; text-decoration-color: var(--divider); text-underline-offset: 2px; }
.doc__section strong { font-weight: var(--weight-heading); color: var(--text); }
.doc__section a:hover { color: var(--accent); text-decoration-color: var(--accent); }
@media (min-width: 900px) {
  .doc { grid-template-columns: 260px minmax(0, 680px); }
  .doc__nav { position: sticky; top: var(--nav-h, 56px); padding-bottom: 24px; }
}

/* ── Support ────────────────────────────────────────────────────────────── */
.support { padding-top: 40px; padding-bottom: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 72px; align-items: start; }
.support-form { max-width: 520px; }
.form-fields { display: flex; flex-direction: column; gap: 20px; }
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.fieldset { display: flex; flex-direction: column; gap: 6px; }
.fieldset--chips { gap: 8px; }
.field { width: 100%; margin: 0; padding: var(--pad-input); background: var(--surface); color: var(--text); caret-color: var(--accent); border: var(--border-hairline); border-radius: var(--radius); outline: none; font-family: var(--font-core); font-size: var(--size-body); font-weight: var(--weight-body); line-height: var(--leading-dense); }
.field:focus { border-color: var(--accent); }
.field--area { line-height: var(--leading-body); resize: vertical; }
.banner { display: flex; align-items: flex-start; gap: 10px; padding: var(--pad-card-tight); background: var(--state-alert-bg); border: var(--border-accent); color: var(--state-alert); }
.banner__icon { margin-top: 1px; }
.banner__title { font-size: var(--size-body); font-weight: var(--weight-heading); color: var(--accent-pale-strong); margin-bottom: 3px; }
.banner__msg { font-size: var(--size-sm); line-height: var(--leading-body); color: var(--accent-pale); }
.sent-box { border: var(--border-accent); background: var(--tint); padding: var(--pad-card); color: var(--accent-pale); }
.sent-box__title { font-size: var(--size-tile); font-weight: var(--weight-heading); line-height: var(--leading-tight); color: var(--accent-pale-strong); }
.sent-box__note { font-size: var(--size-label); line-height: var(--leading-relaxed); margin-top: 4px; }
/* Spam trap: off-screen rather than display:none, since some bots skip hidden fields. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-hint { font-size: var(--size-sm); color: var(--ink-60); }
.btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: var(--pad-button); background: transparent; color: var(--text); border: var(--border-hairline); border-radius: var(--radius); box-shadow: var(--shadow); font-family: var(--font-core); font-size: var(--size-body); font-weight: var(--weight-heading); line-height: var(--leading-tight); letter-spacing: 0; text-align: left; cursor: pointer; }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn--primary:active { background: var(--accent-700); }
.btn:disabled { opacity: var(--disabled-opacity); cursor: default; }
.faqs { min-width: 0; }
.faq-list { margin-top: 14px; border-top: var(--border-rule); }
.faq { padding: 14px 0; border-bottom: var(--border-hairline); }
.faq__q { font-size: var(--size-body); font-weight: var(--weight-heading); line-height: var(--leading-dense); }
.faq__a { font-size: var(--size-label); line-height: var(--leading-relaxed); color: var(--ink-60); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ev, .prow, .chip { transition: none; }
  .icon--spin.is-spinning { animation: none; }
}