/* ============================================================================
   READBACK — a case file about one message.

   The direction is the object: paper on a desk, a typed message, and the marks
   a reader would make in the margin. Putty ground, sheet paper, deep green ink,
   one signal amber for the actions and the asks.
   ========================================================================== */

:root {
  /* ground and paper */
  --ground: #cfd0cb;
  --paper: #f4f4f1;
  --paper-2: #e7e7e2;
  --ink: #16211b;
  --ink-soft: #4b544a;
  --ink-faint: rgba(22, 33, 27, 0.14);

  /* the field: full-bleed deep green sections */
  --field: #123026;
  --field-ink: #eceee8;
  --field-soft: #a8b7ad;

  /* one accent */
  --signal: #f0b429;
  --signal-deep: #cf9410;
  --signal-ink: #1b1405;

  /* semantic, used only inside the reading */
  --alert: #f3b03a;
  --warn: #dfd08a;
  --calm: #8fc0a9;

  /* type */
  --face: "Albert Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  --face-ar: "IBM Plex Sans Arabic", "Albert Sans", system-ui, sans-serif;

  --t-small: 0.8125rem;
  --t-body: 1.0625rem;
  --t-lead: 1.25rem;
  --t-head: 1.9375rem;
  --t-title: clamp(2rem, 1.1rem + 2.6vw, 3.375rem);
  --t-display: clamp(2.9rem, 7.2vw, 7.2rem);
  --t-monument: clamp(4rem, 16.5vw, 15rem);

  /* one radius: the paper's edge */
  --edge: 2px;
  --margin: clamp(18px, 3.6vw, 58px);
  --gap: clamp(14px, 1.7vw, 26px);
  --section: clamp(76px, 10.5vh, 148px);
  --max: 1440px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  background: var(--ground);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--face);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="ar"] body { font-family: var(--face-ar); }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { padding: 0; list-style: none; }
[hidden] { display: none !important; }

::selection { background: var(--signal); color: var(--signal-ink); }

:focus-visible {
  outline: 3px solid var(--signal-deep);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; inset-block-start: 10px; inset-inline-start: 10px;
  z-index: 40;
  padding: 10px 16px;
  background: var(--ink); color: var(--paper);
  font-size: var(--t-small); font-weight: 600;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease);
}
.skip:focus-visible { transform: none; }

/* --------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  padding: 18px var(--margin);
  max-width: var(--max);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}
.brand-mark { width: 28px; height: 24px; color: var(--ink); }
.brand-word {
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.masthead-nav {
  display: flex;
  gap: clamp(14px, 2vw, 30px);
  margin-inline-start: auto;
  font-size: var(--t-body);
}
.masthead-nav a { color: var(--ink-soft); transition: color 160ms ease; }
.masthead-nav a:hover { color: var(--ink); }

.masthead-actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}
.lang {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 2px;
}
.lang:hover { color: var(--ink); }

/* ------------------------------------------------------------ the stamp */

.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--signal);
  color: var(--signal-ink);
  border: 2px solid var(--ink);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: -0.01em;
  transition: background 140ms ease, transform 120ms var(--ease), border-color 140ms ease;
}
.stamp:hover { background: var(--signal-deep); }
.stamp:active { transform: translate(1px, 1px); }
.stamp[disabled] { opacity: 0.55; cursor: progress; }
.stamp-small { padding: 10px 16px; font-size: var(--t-small); }
.stamp-dark { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.stamp-dark:hover { background: var(--paper-2); }

.text-link, .text-button {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
  padding-block: 4px;
  border-bottom: 2px solid var(--ink-faint);
  transition: border-color 160ms ease, color 160ms ease;
}
.text-link:hover, .text-button:hover { border-color: var(--signal); }
.text-button { color: var(--ink-soft); }

/* ------------------------------------------------------------------ hero */

.hero {
  padding: clamp(26px, 4vh, 54px) var(--margin) var(--section);
  max-width: var(--max);
  margin-inline: auto;
}

.hero-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: end;
}

.hero-title {
  grid-column: 1 / span 8;
  font-size: var(--t-display);
  line-height: 0.9;
  letter-spacing: -0.052em;
  font-weight: 600;
  text-wrap: balance;
}
.hero-title .mask { display: block; overflow: hidden; }
.hero-title .mask > span {
  display: block;
  transform: translateY(108%);
}
body.is-ready .hero-title .mask > span {
  transform: none;
  transition: transform 1050ms var(--ease);
}
body.is-ready .hero-title .mask:nth-child(2) > span { transition-delay: 110ms; }

.hero-aside {
  grid-column: 9 / span 4;
  display: grid;
  gap: 18px;
  padding-bottom: 10px;
}
.hero-sentence {
  font-size: var(--t-lead);
  line-height: 1.38;
  letter-spacing: -0.012em;
  max-width: 34ch;
}
.hero-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 32ch;
}
.privacy-dot {
  width: 9px; height: 9px; flex: none;
  margin-block-start: 0.42em;
  background: var(--signal);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ desk */

.desk {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  margin-block-start: clamp(34px, 5vh, 64px);
  align-items: start;
}

.sheet-wrap {
  grid-column: 1 / span 8;
  position: relative;
  isolation: isolate;
}

.sheet-under {
  position: absolute;
  inset: 0;
  transform: translate(12px, 14px);
  background: var(--paper-2);
  z-index: -1;
}

.tape {
  position: absolute;
  z-index: 2;
  inset-block-start: -13px;
  inset-inline-start: 34px;
  width: 118px;
  height: 32px;
  background: var(--signal);
  opacity: 0.82;
  transform: rotate(-2.5deg);
}
.tape-case { inset-inline-start: auto; inset-inline-end: clamp(24px, 8vw, 120px); width: 96px; height: 26px; transform: rotate(1.6deg); }

.sheet {
  position: relative;
  background: var(--paper);
  padding: clamp(22px, 2.4vw, 38px);
}

.sheet-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 10px;
}
.field-label {
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.char-count {
  font-size: var(--t-small);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

#message-input {
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 16px 18px;
  background: rgba(22, 33, 27, 0.055);
  border: 0;
  border-radius: var(--edge);
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  resize: vertical;
}
.sheet-wrap.has-result #message-input { min-height: 86px; }
#message-input::placeholder { color: rgba(22, 33, 27, 0.42); }
#message-input:focus-visible { outline: 3px solid var(--signal-deep); outline-offset: 2px; }

.field-hint {
  margin-block-start: 8px;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--ink-soft);
}

.sheet-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-block-start: 18px;
}

.modes {
  display: inline-flex;
  border: 2px solid var(--ink);
  padding: 0;
  min-inline-size: 0;
}
.mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-size: var(--t-body);
  font-weight: 500;
  cursor: pointer;
}
.mode input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  inset: 0;
  cursor: pointer;
}
.mode:has(input:checked) { background: var(--ink); color: var(--paper); }
.mode:has(input:focus-visible) { outline: 3px solid var(--signal-deep); outline-offset: 2px; }

.select-wrap {
  position: relative;
  display: inline-flex;
  border: 2px solid var(--ink);
}
.select-wrap select {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 38px 10px 14px;
  font-size: var(--t-body);
  font-weight: 500;
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 50%;
  width: 9px; height: 9px;
  margin-block-start: -7px;
  border-inline-end: 2px solid var(--ink);
  border-block-end: 2px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}

.field-note {
  margin-block-start: 12px;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 62ch;
}

.form-error {
  margin-block-start: 10px;
  font-size: var(--t-body);
  font-weight: 600;
  color: #7d2a17;
  padding-inline-start: 12px;
  border-inline-start: 4px solid #b3402a;
}

.examples {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-block-start: 18px;
}
.examples-label {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-inline-end: 4px;
}
.chip {
  padding: 7px 12px;
  background: var(--paper-2);
  font-size: var(--t-small);
  font-weight: 500;
  transition: background 140ms ease, color 140ms ease;
}
.chip:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------- the reading */

.readout {
  position: relative;
  margin-block-start: clamp(20px, 2.6vw, 30px);
  padding: 22px 24px 24px;
  color: var(--ink-soft);
  transition: background 260ms ease, color 260ms ease;
  overflow: hidden;
}
.readout[data-risk] {
  background: var(--field);
  color: var(--field-ink);
}
.risk-tab {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 7px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 380ms var(--ease), background 200ms ease;
}
.readout[data-risk] .risk-tab { transform: none; }
.readout[data-risk="high"] .risk-tab { background: var(--alert); }
.readout[data-risk="review"] .risk-tab { background: var(--warn); }
.readout[data-risk="low"] .risk-tab { background: var(--calm); }

.readout-head {
  display: grid;
  gap: 10px;
  margin-block-start: 4px;
}
.readout-title {
  font-size: var(--t-head);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 600;
  max-width: 24ch;
  color: var(--ink);
}
.readout[data-risk] .readout-title { color: var(--field-ink); }

.readout-state {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-small);
  font-weight: 500;
}
.state-mark {
  width: 11px; height: 11px; flex: none;
  background: var(--ink-faint);
}
.state-mark[data-risk="high"] { background: var(--alert); }
.state-mark[data-risk="review"] { background: var(--warn); }
.state-mark[data-risk="low"] { background: var(--calm); }

.readout-summary {
  margin-block-start: 12px;
  font-size: var(--t-body);
  line-height: 1.5;
  max-width: 54ch;
}

.readout-detail { margin-block-start: 20px; display: grid; gap: 20px; }

.readout h3 {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--field-soft);
  margin-block-end: 8px;
}
.readout:not([data-risk]) h3 { color: var(--ink-soft); }

#ask-list { display: grid; gap: 8px; }
#ask-list li {
  position: relative;
  padding-inline-start: 18px;
  font-size: var(--t-body);
  line-height: 1.42;
}
#ask-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  width: 7px; height: 7px;
  background: var(--signal);
}

.identity-note {
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--field-soft);
  padding-inline-start: 14px;
  border-inline-start: 3px solid rgba(239, 232, 215, 0.35);
}

.next-step p { font-size: var(--t-body); line-height: 1.45; max-width: 48ch; }
.model-note { font-size: var(--t-small); line-height: 1.45; color: var(--field-soft); }

.ai-block {
  margin-block-start: 18px;
  padding-block-start: 14px;
  border-block-start: 3px solid rgba(239, 232, 215, 0.2);
}
.ai-status { font-size: var(--t-small); color: var(--field-soft); margin-block-end: 6px; }
.ai-verdict { font-size: var(--t-body); }
progress { width: 100%; height: 6px; margin-block: 8px 10px; }

.readout-caveat {
  margin-block-start: 18px;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--field-soft);
  max-width: 60ch;
}
.readout:not([data-risk]) .readout-caveat { color: var(--ink-soft); }

/* printed onto the sheet */
.readout[data-risk] { animation: print 460ms var(--ease) both; }
@keyframes print {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ------------------------------------------------------- margin notes */

.notes {
  grid-column: 9 / span 4;
  display: grid;
  align-content: start;
  gap: clamp(22px, 3vw, 38px);
  padding-block: clamp(40px, 5vw, 64px) 26px;
}
.note {
  display: grid;
  gap: 7px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--ink-faint);
  transition: border-color 220ms ease;
}
.note-label {
  font-size: var(--t-body);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.note-label::before {
  content: "";
  width: 9px; height: 9px; flex: none;
  background: var(--ink-faint);
}
.note-body {
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink-soft);
}
.note[data-note="ask"] .note-label::before { background: var(--signal); }
.note[data-note="ask"] { border-inline-start-color: var(--signal); }
.notes[data-risk="low"] .note[data-note="ask"] { border-inline-start-color: var(--ink-faint); }
.notes[data-risk="low"] .note[data-note="ask"] .note-label::before { background: var(--ink-faint); }

/* --------------------------------------------------------------- cases */

.cases {
  padding: var(--section) var(--margin);
  max-width: var(--max);
  margin-inline: auto;
}

.cases-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: end;
  margin-block-end: clamp(28px, 3.6vw, 50px);
}
.cases-head .section-title { grid-column: 1 / span 7; }
.cases-head .section-note { grid-column: 9 / span 4; max-width: 38ch; }

.section-title {
  font-size: var(--t-title);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 600;
  text-wrap: balance;
}
.section-note {
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 34ch;
}

.cases-body { position: relative; }

.case-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
  margin-inline-start: clamp(16px, 4.5vw, 62px);
}
.case-tab {
  padding: 12px 22px 15px;
  background: var(--paper-2);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink-soft);
  transition: background 160ms ease, color 160ms ease;
}
.case-tab + .case-tab { border-inline-start: 1px solid rgba(22, 33, 27, 0.09); }
.case-tab:hover { color: var(--ink); }
.case-tab[aria-selected="true"] {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}

.slip {
  position: relative;
  background: var(--paper);
  padding: clamp(26px, 3.8vw, 58px);
  padding-block-start: clamp(30px, 3.4vw, 52px);
  transform: rotate(-0.3deg);
  margin-block-start: -2px;
  --annot-gap: clamp(2rem, 4.2vw, 4.6rem);
  --signal-wash: color-mix(in srgb, var(--signal) 30%, transparent);
}
.slip { transition: opacity 200ms ease; }
.slip.is-swapping { opacity: 0.45; }

.slip-progress {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: rgba(22, 33, 27, 0.1);
}
.slip-progress span {
  display: block;
  height: 100%;
  background: var(--signal);
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: transform 620ms var(--ease);
}
[dir="rtl"] .slip-progress span { transform-origin: right center; }

.slip-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  padding-block-end: 16px;
  border-block-end: 2px solid var(--ink);
  margin-block-end: clamp(24px, 3vw, 38px);
}
.slip-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-block-end: 12px;
}
.kicker-dot { color: var(--signal); }
#demo-counter { color: var(--ink); font-variant-numeric: tabular-nums; }

.slip-title {
  font-size: clamp(1.85rem, 2.9vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.038em;
}

.replay {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 10px 15px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 160ms ease, color 160ms ease;
}
.replay svg { width: 11px; height: 11px; }
.replay:hover { background: var(--ink); color: var(--paper); }
.replay:active { transform: translateY(1px); }

/* the message, with one margin column holding its annotations */

.annot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(10.5rem, 16vw, 14.5rem);
  column-gap: var(--annot-gap);
  row-gap: clamp(10px, 1.1vw, 16px);
  align-items: start;
}

.annot-line {
  position: relative;
  isolation: isolate;
  margin-inline: -10px;
  padding-inline: 10px;
  font-size: clamp(1.14rem, 1.55vw, 1.52rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
}
.annot-line::before {
  content: "";
  position: absolute;
  inset-block: -0.14em;
  inset-inline: -10px;
  background: var(--signal-wash);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease);
  z-index: -1;
}
[dir="rtl"] .annot-line::before { transform-origin: right center; }
.annot-line.is-lit::before { transform: scaleX(1); }

.annot-link {
  padding-inline: 0.12em;
  background: rgba(22, 33, 27, 0.07);
  border-block-end: 2px solid var(--ink-faint);
  color: var(--ink);
  transition: background 320ms ease, border-color 320ms ease;
}
.annot-link.is-lit { background: var(--signal); border-color: var(--signal); }

.annot-notes { display: grid; gap: 12px; padding-block-start: 0.15em; }

.annot-note {
  position: relative;
  display: flex;
  gap: 9px;
  font-size: var(--t-small);
  line-height: 1.35;
  color: var(--ink-soft);
}
.annot-note::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--annot-gap));
  inset-block-start: 0.55em;
  width: var(--annot-gap);
  border-block-start: 1px dashed var(--ink-faint);
}
.note-mark {
  width: 8px;
  height: 8px;
  flex: none;
  margin-block-start: 0.42em;
  background: var(--signal);
  opacity: 0;
  transition: opacity 240ms ease;
}
.annot-note[data-found="false"] .note-mark {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-faint);
}
.note-body b {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-block-end: 4px;
}
.annot-note.is-on .note-mark { opacity: 1; }

.slip.is-armed .annot-note {
  opacity: 0;
  transform: translateY(6px);
}
.slip.is-armed .annot-note.is-on {
  opacity: 1;
  transform: none;
  transition: opacity 380ms ease, transform 440ms var(--ease);
}

.demo-checks {
  margin-block-start: clamp(22px, 2.4vw, 30px);
  padding-block-start: 18px;
  border-block-start: 2px solid var(--ink-faint);
}
.demo-checks-label {
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-block-end: 14px;
}
.checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 30px);
}
.checks li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.check-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border: 1.5px solid var(--ink-faint);
  align-self: center;
}
.checks li[data-resolved="true"][data-found="true"] .check-dot {
  background: var(--signal);
  border-color: var(--signal);
}
.checks li[data-resolved="true"][data-found="false"] .check-dot {
  background: transparent;
  border-color: var(--ink-soft);
}
.check-label {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.check-state {
  font-size: var(--t-small);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.slip-next {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-block-start: clamp(22px, 2.6vw, 32px);
  padding-block-start: 18px;
  border-block-start: 2px solid var(--ink);
  font-size: var(--t-body);
  line-height: 1.5;
}
.slip-next-label {
  flex: none;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slip.is-armed .slip-next {
  opacity: 0;
  transform: translateY(8px);
}
.slip.is-armed .slip-next.is-on {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 520ms var(--ease);
}

.slip-engine {
  margin-block-start: 20px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--ink-faint);
}
.slip-engine summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.slip-engine summary::-webkit-details-marker { display: none; }
.slip-engine summary::after {
  content: "+";
  font-size: 1rem;
  color: var(--ink);
}
.slip-engine[open] summary::after { content: "\2212"; }
.slip-engine summary:hover { color: var(--ink); }

.slip-facts { display: grid; gap: 18px; margin-block-start: 16px; }
.slip-facts dt {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-soft);
  margin-block-end: 6px;
}
.slip-facts dd { font-size: var(--t-body); line-height: 1.45; }
.slip-facts ul { display: grid; gap: 7px; }
.slip-facts li {
  position: relative;
  padding-inline-start: 18px;
}
.slip-facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  width: 7px; height: 7px;
  background: var(--signal);
}

.slip-foot {
  margin-block-start: 20px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- anatomy */

.anatomy {
  background: var(--field);
  color: var(--field-ink);
  padding: var(--section) var(--margin);
}
.anatomy-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.anatomy-head {
  grid-column: 1 / span 4;
  display: grid;
  gap: 20px;
  position: sticky;
  top: 40px;
}
.anatomy .section-title { color: var(--field-ink); }
.anatomy-lede {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--field-soft);
  max-width: 30ch;
}

.stops {
  grid-column: 6 / span 7;
  display: grid;
  gap: clamp(38px, 5vw, 64px);
}
.stop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 0.85fr);
  align-items: center;
  gap: 10px;
}
.stop-quote {
  font-size: var(--t-head);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: balance;
}
.connector {
  width: 72px;
  height: 44px;
  color: var(--signal);
}
.connector path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 900ms var(--ease) 120ms;
}
.stop.is-in .connector path { stroke-dashoffset: 0; }

.stop-note { display: grid; gap: 6px; }
.stop-label {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--signal);
}
.stop-note > p:last-child {
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--field-soft);
}

/* --------------------------------------------------------------- model */

.model {
  padding: var(--section) var(--margin);
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.model-head {
  grid-column: 1 / span 4;
  display: grid;
  gap: 18px;
}
.model-report {
  grid-column: 6 / span 7;
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
}
.model-figure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 30px;
  align-items: end;
}
.figure {
  grid-row: span 2;
  font-size: var(--t-display);
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-weight: 600;
  white-space: nowrap;
}
.figure strong { font-weight: 600; }
.figure-note {
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 24ch;
}
.figure-caveat {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46ch;
}

.model-slip {
  background: var(--paper);
  padding: clamp(18px, 2vw, 26px);
}
.model-slip table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
}
.model-slip caption { text-align: start; }
.model-slip th, .model-slip td {
  text-align: start;
  padding: 12px 8px;
  vertical-align: top;
}
.model-slip thead th {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-soft);
  padding-block-end: 8px;
}
.model-slip tbody tr { border-block-start: 2px solid var(--ink-faint); }
.model-slip tbody th { font-weight: 600; }
.model-slip td { font-variant-numeric: tabular-nums; }
.cell-label { display: none; }
.model-stamp {
  margin-block-start: 14px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- privacy */

.privacy {
  padding: 0 var(--margin);
  max-width: var(--max);
  margin-inline: auto;
}
.privacy-block {
  background: var(--field);
  color: var(--field-ink);
  padding: clamp(30px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: end;
}
.privacy-title {
  grid-column: 1 / span 6;
  font-size: var(--t-title);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-wrap: balance;
}
.privacy-body {
  grid-column: 7 / span 5;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--field-soft);
  max-width: 46ch;
}

/* ----------------------------------------------------------------- faq */

.faq {
  padding: var(--section) var(--margin);
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.faq-head {
  grid-column: 1 / span 4;
  position: sticky;
  top: 40px;
}
.faq-list { grid-column: 6 / span 7; display: grid; gap: 6px; }

.faq-item { background: transparent; }
.faq-item summary {
  position: relative;
  display: block;
  padding: 20px 54px 20px 0;
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.022em;
  cursor: pointer;
  list-style: none;
  transition: color 160ms ease;
}
html[dir="rtl"] .faq-item summary { padding-inline: 54px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 12px;
  background: var(--ink);
  transition: transform 260ms var(--ease), background 160ms ease;
}
.faq-item summary::before {
  width: 18px; height: 3px;
  inset-block-start: calc(50% - 1.5px);
}
.faq-item summary::after {
  width: 3px; height: 18px;
  inset-block-start: calc(50% - 9px);
  inset-inline-end: 19.5px;
}
.faq-item[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq-item[open] summary { color: var(--ink); }
.faq-item p {
  padding: 0 54px 26px 0;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 62ch;
}
html[dir="rtl"] .faq-item p { padding: 0 0 26px 54px; }

/* --------------------------------------------------------------- close */

.close {
  position: relative;
  background: var(--signal);
  color: var(--signal-ink);
  padding: var(--section) var(--margin) 0;
  overflow: hidden;
}
.close-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.close-copy {
  grid-column: 1 / span 6;
  display: grid;
  gap: 18px;
}
.close-title {
  font-size: var(--t-title);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-weight: 600;
  text-wrap: balance;
}
.close-note {
  font-size: var(--t-lead);
  line-height: 1.38;
  max-width: 32ch;
  color: rgba(27, 18, 6, 0.86);
}

.close-form {
  grid-column: 8 / span 5;
  background: var(--field);
  color: var(--field-ink);
  padding: clamp(20px, 2.4vw, 30px);
  display: grid;
  gap: 12px;
}
.close-form .field-label { color: var(--field-ink); }
#close-message {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 14px 16px;
  background: rgba(239, 232, 215, 0.08);
  border: 0;
  border-radius: var(--edge);
  color: var(--field-ink);
  font-size: var(--t-body);
  line-height: 1.45;
  resize: vertical;
}
#close-message::placeholder { color: rgba(239, 232, 215, 0.5); }
#close-message:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.close-form .stamp { justify-self: start; margin-block-start: 4px; }
.close-privacy {
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--field-soft);
}

.close-word {
  font-size: var(--t-monument);
  line-height: 0.78;
  letter-spacing: -0.06em;
  font-weight: 600;
  color: rgba(27, 18, 6, 0.2);
  margin-block-start: clamp(40px, 7vw, 96px);
  margin-inline-start: calc(var(--margin) * -1);
  margin-block-end: -0.14em;
  white-space: nowrap;
  user-select: none;
}

/* ---------------------------------------------------------------- foot */

.foot {
  background: var(--field);
  color: var(--field-ink);
  padding: clamp(44px, 6vh, 80px) var(--margin) 28px;
}
.foot-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.foot-statement {
  grid-column: 1 / span 6;
  font-size: var(--t-head);
  line-height: 1.1;
  letter-spacing: -0.035em;
  max-width: 20ch;
}
.foot-nav {
  grid-column: 7 / span 3;
  display: grid;
  gap: 8px;
  font-size: var(--t-body);
  color: var(--field-soft);
}
.foot-nav a:hover { color: var(--field-ink); }
.foot-meta {
  grid-column: 10 / span 3;
  display: grid;
  gap: 6px;
  font-size: var(--t-body);
  color: var(--field-soft);
}
.foot-clock { font-variant-numeric: tabular-nums; }
.foot-sources {
  grid-column: 1 / span 5;
  display: grid;
  gap: 6px;
  margin-block-start: 26px;
  font-size: var(--t-small);
  color: var(--field-soft);
}
.foot-label { color: var(--signal); font-weight: 500; }
.foot-sources a { color: var(--field-ink); }
.foot-sources a:hover { color: var(--signal); }
.foot-invite {
  grid-column: 8 / span 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: 26px;
  padding: 16px 20px;
  background: rgba(239, 232, 215, 0.1);
  font-size: var(--t-body);
  font-weight: 500;
  transition: background 160ms ease;
}
.foot-invite:hover { background: rgba(239, 232, 215, 0.18); }
.foot-invite svg { width: 22px; height: 22px; }
.foot-legal, .foot-small {
  grid-column: 1 / span 6;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--field-soft);
  margin-block-start: 24px;
}
.foot-small { grid-column: 7 / span 4; margin-block-start: 24px; }

/* --------------------------------------------------------------- motion */

.reveal, .reveal-object {
  opacity: 0;
  transform: translateY(20px);
}
.reveal-object { transform: translateY(30px) rotate(1.1deg); }
body.is-ready .reveal.is-in,
body.is-ready .reveal-object.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease), transform 800ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
body.is-ready .sheet-wrap.is-in { transition-duration: 1000ms; }

@supports (animation-timeline: view()) {
  .sheet-wrap {
    animation: sheet-settle linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 42%;
  }
  @keyframes sheet-settle {
    from { rotate: 1.1deg; translate: 0 14px; }
    to { rotate: 0deg; translate: 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sheet-wrap { animation: none; }
  }
}

.stop { opacity: 0.35; }
.stop.is-in { opacity: 1; transition: opacity 600ms ease; }
.stop .connector path { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-title .mask > span { transform: none; }
  .reveal, .reveal-object, .stop { opacity: 1; transform: none; }
  .connector path { stroke-dashoffset: 0; }
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .hero-title { grid-column: 1 / span 12; }
  .hero-aside { grid-column: 1 / span 12; padding-block-start: 22px; }
  .hero-sentence { max-width: 46ch; }
  .sheet-wrap { grid-column: 1 / span 9; }
  .notes { grid-column: 10 / span 3; }

  .cases-head, .anatomy-head, .faq-head, .model-head { grid-column: 1 / span 12; position: static; }
  .cases-head { gap: 14px; }
  .cases-body { grid-column: 1 / span 12; margin-block-start: 26px; }
  .anatomy .stops { grid-column: 1 / span 12; margin-block-start: 34px; }
  .model-report { grid-column: 1 / span 12; margin-block-start: 30px; }
  .faq-list { grid-column: 1 / span 12; margin-block-start: 26px; }
  .privacy-title, .privacy-body { grid-column: 1 / span 12; }
  .close-copy, .close-form { grid-column: 1 / span 12; }
  .close-form { margin-block-start: 28px; }
}

@media (max-width: 860px) {
  .masthead-nav { display: none; }
  .hero { padding-block-start: 18px; }
  .hero-actions { gap: 16px; }
  .desk { margin-block-start: 26px; }
  .sheet-wrap { grid-column: 1 / span 12; }
  .notes {
    grid-column: 1 / span 12;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding-block-start: 24px;
  }
  .note { padding-inline-start: 12px; }
  .note-body { font-size: var(--t-small); }

  .cases-head .section-title,
  .cases-head .section-note { grid-column: 1 / span 12; }
  .cases-head .section-note { margin-block-start: 14px; }
  .slip { --annot-gap: 1.8rem; }
  .annot { grid-template-columns: minmax(0, 1fr) 11.5rem; }
  .annot-line { font-size: 1.12rem; }
  .tape-case { inset-inline-start: auto; inset-inline-end: 8%; }

  .stop { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .connector { display: none; }
  .stop-quote { font-size: var(--t-head); }

  .model-report { margin-block-start: 22px; }
  .model-figure { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .foot-statement, .foot-nav, .foot-meta { grid-column: 1 / span 12; }
  .foot-nav, .foot-meta { margin-block-start: 18px; }
  .foot-sources, .foot-invite { grid-column: 1 / span 12; }
  .foot-legal, .foot-small { grid-column: 1 / span 12; }
}

@media (max-width: 600px) {
  .hero-title { font-size: var(--t-display); }
  .hero { padding-block-end: 64px; }
  .masthead { padding-block: 14px; gap: 10px; }
  .masthead-actions { margin-inline-start: auto; }
  .stamp-small { display: none; }
  .sheet { padding: 18px; }
  .sheet-under { display: none; }
  .tape { inset-inline-start: 18px; width: 92px; height: 26px; }
  #message-input { font-size: var(--t-body); min-height: 118px; }
  .sheet-wrap.has-result #message-input { min-height: 132px; }

  .sheet-controls { gap: 10px; }
  .modes { width: 100%; }
  .mode { flex: 1; justify-content: center; }
  .select-wrap { flex: 1; }
  .select-wrap select { width: 100%; }
  #submit-button { flex: 1 1 100%; }

  .readout { padding: 18px 16px 20px; }
  .readout-title { font-size: var(--t-head); }

  .notes { grid-template-columns: 1fr; gap: 16px; padding-block-start: 24px; }


  .model-slip table { font-size: var(--t-body); }
  .slip { padding: 22px 18px 26px; transform: none; }
  .slip-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .replay { align-self: flex-start; }
  .slip-kicker { flex-direction: column; align-items: flex-start; gap: 3px; }
  .kicker-dot { display: none; }
  .case-tabs {
    margin-inline-start: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .case-tab { padding: 10px 6px 12px; font-size: var(--t-small); text-align: center; }
  .tape-case { display: none; }
  .annot-notes { border-inline-start-color: rgba(22, 33, 27, 0.18); }
  .annot { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .annot-line { font-size: 1.1rem; margin-inline: -6px; padding-inline: 6px; }
  .annot-notes { gap: 8px; padding-inline-start: 12px; border-inline-start: 2px solid var(--signal-wash); margin-block-end: 6px; }
  .annot-note::before { display: none; }
  .annot-notes:empty { display: none; }
  .checks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .check-state { margin-inline-start: 0; }
  .slip-next { flex-wrap: wrap; gap: 10px; }
  .model-slip thead { display: none; }
  .model-slip tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    padding: 16px 0;
  }
  .model-slip tbody th { grid-column: 1 / -1; }
  .model-slip tbody th,
  .model-slip tbody td { padding: 0; }
  .cell-label {
    display: block;
    font-size: var(--t-small);
    font-weight: 400;
    color: var(--ink-soft);
    margin-block-end: 2px;
  }


  .case-tabs {
    padding-inline-start: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .case-tabs::-webkit-scrollbar { display: none; }
  .case-tab { padding: 9px 12px 11px; font-size: var(--t-small); white-space: nowrap; }
  .slip { padding: 22px 18px; transform: none; }
  .slip-message { font-size: var(--t-body); padding: 14px 16px; }

  .privacy-block { padding: 26px 20px; }
  .close { padding-block-end: 0; }
  .close-word { font-size: var(--t-monument); }
  .foot { padding-block-end: 20px; }
  .foot-invite { padding: 14px 16px; }
}

/* Arabic setting */
html[lang="ar"] .hero-title { letter-spacing: -0.01em; line-height: 1.02; }
html[lang="ar"] .section-title,
html[lang="ar"] .close-title,
html[lang="ar"] .readout-title { letter-spacing: 0; }
html[lang="ar"] .figure { letter-spacing: 0; }
html[lang="ar"] .select-wrap::after { border-inline-end: 0; border-inline-start: 2px solid var(--ink); }