/* The page around the replica: IAMX tokens only (styles/tokens.css), no raw values. The replica itself is styled by
   vendor/2ic/ and styles/app-replica.css. Motion (phase 2) is at the end of this file, under "Motion"; every rule there
   sits under .motion, which scripts/motion.js sets only when the visitor has not asked for reduced motion, so without
   script or with reduced motion the page is the still page the owner approved. */

/* The scroll-craft engine's stylesheet (vendor/scrollcraft, unedited) loads first and themes itself from six colours and
   two fonts; they map to the IAMX tokens here, so nothing of its own palette or faces reaches the page. */
:root {
  --sc-canvas: var(--bg);
  --sc-surface: var(--surface);
  --sc-ink: var(--text);
  --sc-ink-soft: var(--muted);
  --sc-accent: var(--accent);
  --sc-accent-ink: var(--on-accent);
  --sc-font-display: var(--font-sans);
  --sc-font-text: var(--font-sans);
  --sc-font-mono: var(--font-mono);
}

*, *::before, *::after { box-sizing: border-box; }
/* Script hides with the hidden attribute; a class that sets display must never bring an element back. */
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--header-h) + var(--space-4)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--step-body); line-height: var(--lh-body); font-weight: var(--weight-regular); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 var(--space-4); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: var(--border-divider); text-underline-offset: var(--space-1); }
a:hover { text-decoration-thickness: var(--border-error); }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--grid-margin)); margin-inline: auto; padding-inline: var(--grid-margin); }
.skip { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-10)); z-index: calc(var(--z-header) + 1); padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--on-accent); border-radius: var(--radius-control); }
.skip:focus { top: var(--space-4); }
.eyebrow { font-family: var(--font-mono); font-size: var(--step-caption); line-height: var(--lh-label); letter-spacing: var(--track-mono); color: var(--muted); margin-bottom: var(--space-5); }
.lead { font-size: var(--step-lead); line-height: var(--lh-lead); letter-spacing: var(--track-lead); color: var(--muted); max-width: var(--measure); }
.section-title { font-size: var(--step-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); font-weight: var(--weight-medium); max-width: 22ch; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-5); border: var(--border-control) solid var(--accent); border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent); font-size: var(--step-button); line-height: var(--lh-ui); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer; }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.button:disabled { background: var(--disabled); border-color: var(--disabled); color: var(--on-disabled); cursor: not-allowed; }
.button-quiet { background: transparent; color: var(--text); border-color: var(--control-border); }
.button-quiet:hover { background: var(--surface-2); border-color: var(--text); }
.button-small { padding: 0 var(--space-4); font-size: var(--step-label); }
.link-button { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0; border: 0; background: none; color: var(--text); text-decoration: underline; text-underline-offset: var(--space-1); cursor: pointer; }

.site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--bg); border-bottom: var(--border-divider) solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); color: var(--text); text-decoration: none; }
.brand-name { font-size: var(--step-mark); letter-spacing: var(--track-mark); font-weight: var(--weight-bold); line-height: var(--lh-ui); }
.brand-by { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--step-caption); color: var(--muted); }
.logo { height: var(--logo-h); width: auto; margin-bottom: var(--logo-drop); }
.header-nav { display: flex; align-items: center; gap: var(--space-2); }
.nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-1); }
.nav-links a { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-3); font-size: var(--step-label); text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--text); text-decoration: underline; }
.theme-toggle { display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); cursor: pointer; }
.theme-toggle:hover { background: var(--surface-2); }
.theme-icon { width: var(--space-5); height: var(--space-5); }
@media (min-width: 768px) { .nav-links { display: flex; } }

.hero { padding-top: var(--space-9); }
.hero-title { font-size: var(--step-h1); line-height: var(--lh-h1); letter-spacing: var(--track-h1); font-weight: var(--weight-medium); max-width: 20ch; margin-bottom: var(--space-5); }
.hero .lead { margin-bottom: var(--space-6); }
/* On a phone the headline ran to four lines at the h1 step; the h2 step keeps it to three and still leads the screen. */
@media (max-width: 479px) { .hero-title { font-size: var(--step-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sources { margin-top: var(--space-9); }
.source-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gutter); }
.source { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.source-figure, .guarantee-figure { width: 100%; --hairline-plate: var(--bg); --hairline-hi: var(--text); --hairline-edge: var(--text); --hairline-mid: var(--muted); --hairline-lo: var(--border); --hairline-stroke: var(--border-divider); }
.source-figure { margin-bottom: var(--space-3); }
.source-name { margin: 0; font-weight: var(--weight-bold); }
.source-line { margin: 0; font-size: var(--step-label); line-height: var(--lh-label); color: var(--muted); }
/* The threads: four from a row of figures, or, on a phone's two by two, two that meet in one stem. */
.threads-plane { position: relative; margin-top: var(--space-4); }
.threads { width: 100%; height: var(--space-10); fill: none; stroke: var(--muted); }
.threads path { vector-effect: non-scaling-stroke; }
.threads-wide { display: none; }
.threads-pen { display: none; }
@media (min-width: 768px) { .source-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .threads-wide { display: block; } .threads-narrow { display: none; } }

.approve { padding-block: var(--space-8) var(--space-9); }
.approve-grid { display: grid; gap: var(--space-7); }
.approve-head { max-width: var(--measure); }
.approve-head .section-title { margin-bottom: var(--space-4); }
.replica-frame { position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.made-up { align-self: flex-start; margin: 0; padding: 0 var(--space-2); border: var(--border-divider) solid var(--control-border); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--step-caption); line-height: var(--lh-label); letter-spacing: var(--track-mono); color: var(--muted); }
.replay { align-self: flex-start; }
.replica-cover, .replica-edge, .waitlist-ground { display: none; }

/* The decision ledger: one row per guarantee, stamped by a decision on the card (scripts/replica.js). */
.guarantees { min-width: 0; }
.guarantees-title { font-size: var(--step-lead); line-height: var(--lh-lead); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.guarantees-hint { color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); margin-bottom: var(--space-4); }
.guarantee-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-divider) solid var(--border); }
.guarantee { position: relative; display: grid; grid-template-columns: var(--space-9) minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-block: var(--space-4); border-bottom: var(--border-divider) solid var(--border); }
.guarantee-figure { --hairline-plate: var(--bg); }
.guarantee-figure-empty { aspect-ratio: 5 / 4; border: var(--border-control) dashed var(--muted); border-radius: var(--radius-control); }
.guarantee-name { font-size: var(--step-body); line-height: var(--lh-ui); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.guarantee-copy p { margin: 0; font-size: var(--step-label); line-height: var(--lh-label); color: var(--muted); max-width: var(--measure); }
.guarantee-copy .guarantee-stamp { margin-top: var(--space-3); padding-left: var(--space-3); border-left: var(--border-error) solid var(--accent); font-family: var(--font-mono); font-size: var(--step-caption); letter-spacing: var(--track-mono); color: var(--text); }
/* A locked row collapses to its placeholder line, so five empty rows do not cost a phone three screens. */
.guarantee.is-locked { min-height: var(--space-8); }
.guarantee.is-locked > * { display: none; }
.guarantee.is-locked::after { content: "Decide on a draft to reveal this one"; position: absolute; inset: 0; display: flex; align-items: center; font-family: var(--font-mono); font-size: var(--step-caption); letter-spacing: var(--track-mono); color: var(--muted); }

@media (min-width: 1024px) {
  .approve-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-7); align-items: start; }
  .approve-head { grid-column: 1 / span 7; }
  .replica-frame { grid-column: 1 / span 7; }
  .guarantees { grid-column: 9 / -1; padding-top: var(--space-7); }
}
/* Act 3, the pin: the card holds still beside the ledger while the ledger grows with each decision. Plain sticky, not the
   engine's pin, because the engine's stage is one viewport tall and clips, and the full ledger (1,229 px at 1440) is
   longer than that. Only where the tallest card with its notice fits under the bar (measured 2 Nov: 821 px at 1024 wide,
   773 px from 1280 up, under a 73 px bar), so its buttons are never held below the fold. Nothing moves the card: it
   simply stops travelling. */
@media (min-width: 1024px) and (min-height: 952px), (min-width: 1280px) and (min-height: 890px) {
  .replica-frame { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

.questions, .coming, .waitlist { padding-block: var(--space-9); border-top: var(--border-divider) solid var(--border); }
.questions-grid, .waitlist-grid, .coming-grid { display: grid; gap: var(--space-6); }
.accordion { border-top: var(--border-divider) solid var(--border); }
.accordion-item { border-bottom: var(--border-divider) solid var(--border); }
.accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: var(--control-h); padding: var(--space-4) 0; border: 0; background: none; text-align: left; cursor: pointer; font-size: var(--step-body); line-height: var(--lh-ui); font-weight: var(--weight-medium); }
.accordion-indicator { flex: none; width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-width: var(--border-error); stroke-linecap: round; stroke-linejoin: round; }
.accordion-trigger[aria-expanded="true"] .accordion-indicator { transform: rotate(180deg); }
.accordion-panel { padding-bottom: var(--space-5); color: var(--muted); max-width: var(--measure); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.plain-list b { color: var(--text); }
.coming-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-divider) solid var(--border); }
.coming-item { display: grid; gap: var(--space-2); padding-block: var(--space-5); border-bottom: var(--border-divider) dashed var(--control-border); }
.coming-item p { margin: 0; color: var(--muted); max-width: var(--measure); }
.coming-item .coming-tag { justify-self: start; padding: 0 var(--space-2); border: var(--border-divider) solid var(--control-border); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--step-caption); line-height: var(--lh-label); letter-spacing: var(--track-mono); color: var(--text); }
.coming-name { font-size: var(--step-lead); line-height: var(--lh-lead); font-weight: var(--weight-medium); }
@media (min-width: 768px) { .coming-item { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--grid-gutter); align-items: baseline; } .coming-item .coming-tag { grid-column: 1 / -1; } }

.waitlist-head .section-title { margin-bottom: var(--space-4); }
.waitlist-facts { font-family: var(--font-mono); font-size: var(--step-caption); color: var(--muted); }
.form { display: grid; gap: var(--space-5); padding: var(--space-5); border: var(--border-divider) solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.field { display: grid; gap: var(--space-2); }
.field label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--step-label); font-weight: var(--weight-medium); }
.req { font-weight: var(--weight-regular); color: var(--muted); }
.input-control input, .input-control textarea { display: block; width: 100%; min-height: var(--control-h); padding: var(--space-3) var(--space-4); border: var(--border-control) solid var(--control-border); border-radius: var(--radius-control); background: var(--bg); color: var(--text); font: inherit; }
.input-control textarea { min-height: var(--field-lg-h); resize: vertical; }
.input-control [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 var(--border-control) var(--error); }
.field-error { margin: 0; font-size: var(--step-label); color: var(--error); }
.form-note { margin: 0; font-size: var(--step-label); color: var(--muted); }
.form-message[data-kind="success"] { color: var(--success); }
.form-message[data-kind="error"] { color: var(--error); }
.honeypot { display: none; }

.site-footer { border-top: var(--border-divider) solid var(--border); padding-block: var(--space-7); }
.footer-inner { display: grid; gap: var(--space-4); }
.footer-line { margin: 0; color: var(--muted); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--control-h); }
.not-found { padding-block: var(--space-10); }

@media (min-width: 1024px) {
  .hero { padding-top: var(--space-10); }
  .hero-title { max-width: 32ch; }
  .questions-grid, .waitlist-grid, .coming-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gutter); }
  .questions-grid > .section-title, .waitlist-head, .coming-grid > .section-title { grid-column: 1 / span 4; }
  .accordion, .form, .coming-lead, .coming-list { grid-column: 6 / -1; }
  .coming-lead { align-self: end; }
  .footer-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); }
}

/* ==== Motion (phase 2, DIRECTIONS.md "Scroll-craft plan"). Calm throughout; the Approve press is the one intense moment.
   Composite-only: every rule below animates transform or opacity, nothing else. Nothing moves a control beside Approve or
   Reject while it can be pressed: the card arrives by opacity alone, in place. ==== */

/* Act 1: the threads draw themselves down toward the card as the hero scrolls. A ground-coloured pen covers the part not
   yet drawn and shrinks toward the bottom (scripts/motion.js sets its scale), so no stroke property is ever animated. */
.motion .threads-pen { display: block; position: absolute; inset: 0; background: var(--bg); transform-origin: 50% 100%; transform: scaleY(1); }

/* Act 2: the card's frame opens from its top edge, where the threads meet. A ground-coloured cover shrinks toward the
   frame's foot while a hairline (the edge) travels down ahead of it. scripts/motion.js sets both transforms from the
   engine's progress for the approve section (--sc-p) between two points it measures: the frame's top at 85% of the
   screen, and at 30%. The edge rides near the foot of the screen while the card rises out of it, so the opening is seen.
   The cover never takes the pointer, and it is gone for good once the frame is open, has focus, or is pressed. */
.motion .replica-cover, .motion .replica-edge { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.motion .replica-cover { background: var(--bg); transform-origin: 50% 100%; transform: scaleY(1); }
.motion .replica-edge { border-top: var(--border-divider) solid var(--muted); }
.motion .replica-frame.is-open :is(.replica-cover, .replica-edge), .motion .replica-frame:focus-within :is(.replica-cover, .replica-edge) { display: none; }

/* Act 3, the peak. The press: Approve (and a chase's Copy draft) gives under the finger. */
.motion .app-replica button.primary { transition: transform var(--dur-fast) var(--ease-settle), background var(--transition-fast), border-color var(--transition-fast); }
.motion .app-replica button.primary:active:not(:disabled) { transform: scale(0.97); }
/* What 2ic would have done arrives first, then the next draft fades up in place. */
.motion .app-replica [data-outcome].is-fresh { animation: notice-in var(--dur-header) var(--ease-settle) both; }
.motion .app-replica .queue.has-decided > .card:not([hidden]) { animation: card-in var(--dur-base) var(--ease-enter) both; }
/* The ledger stamp, the signature move: the row's ink lands, its line is pressed in, and the row's tint dries off. */
.motion .guarantee { isolation: isolate; }
.motion .guarantee.is-new::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface-2); opacity: 0; animation: ink-dry var(--dur-slot) var(--ease-standard) both; }
.motion .guarantee.is-new > * { animation: row-in var(--dur-base) var(--ease-enter) both; }
.motion .guarantee.is-new .guarantee-stamp { transform-origin: 0 50%; animation: stamp-in var(--dur-header) var(--ease-settle) var(--dur-fast) both; }

@keyframes notice-in { from { opacity: 0; transform: translateY(calc(-1 * var(--space-1))); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes row-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes stamp-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes ink-dry { from { opacity: 1; } to { opacity: 0; } }

/* Act 4: Questions and Coming come up once as they arrive (the engine's data-sc-in, set by scripts/motion.js). Anything
   that takes focus before its block has come up is shown at once, so focus never lands on something unseen. */
.motion [data-sc-in]:focus-within, .motion [data-sc-stagger] > :focus-within { opacity: 1; transform: none; }

/* Act 5: the ground settles once, to the surface tone, as the waitlist rises (the drift device). One fixed layer behind
   the page fades in on the engine's progress for the waitlist (scripts/motion.js sets its opacity); a background colour
   is never animated. */
.motion .waitlist-ground { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--surface); opacity: 0; }

/* The engine writes each act's progress (--sc-p) on every scroll frame. Not inherited, so those writes never restyle the
   act's whole subtree (measured in review: about eight times the style work when it was). */
@property --sc-p { syntax: "<number>"; inherits: false; initial-value: 0; }
/* Reduced motion: the same close, still. */
@media (prefers-reduced-motion: reduce) { .waitlist { background: var(--surface); } }