/* SetupSwift — design tokens and styles. Rationale: app/DESIGN.md.
   Direction: an official file kept with care. Paper-white forms on a cool
   green-grey ground, ink-green as the one brand colour, gold reserved for
   time. One memorable element: the working-day ruler on the overview.
   Logical properties (inline/block) throughout, so Arabic (dir="rtl") flips
   without a second stylesheet. No inline styles anywhere (strict CSP). */

/* ---------------------------------------------------------------- fonts */
/* IBM Plex Sans Arabic, SIL OFL 1.1 (fonts/OFL-LICENSE.txt). One family for
   Arabic, Latin and Turkish. */
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/ibm-plex-sans-arabic-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(fonts/ibm-plex-sans-arabic-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(fonts/ibm-plex-sans-arabic-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ---------------------------------------------------------------- tokens */
/* Palette after the owner's reference site (lusion.co — owner decision 9 Nov
   2026: its colours and feel, not its content): lavender-white ground, pure
   black type, one electric blue, dark pill buttons. Light only, as there. */
:root {
  /* colour — contrast ratios against --paper noted where text uses them */
  --ground: #f0f1fa;        /* page background (lusion --color-off-white) */
  --paper: #ffffff;         /* forms and panels */
  --ink: #000000;           /* body text (21:1) */
  --ink-soft: #4a4d5c;      /* secondary text (8.6:1; 7.4:1 on --ground) */
  --line: #e4e6ef;          /* dividers (lusion --color-dark-white) */
  --line-strong: #8a8ea0;   /* input borders (3.3:1, WCAG 1.4.11) */
  --seal: #1a2ffb;          /* the one accent: links, the moving line (7.4:1) */
  --seal-deep: #071bdf;     /* (lusion --color-dark-blue) */
  --seal-wash: #e6e9ff;
  --on-seal: #ffffff;
  --pill: #2b2e3a;          /* primary buttons (lusion --color-grey-blue; 13.5:1 with white) */
  --pill-deep: #14161d;
  --pill-light: #e4e6ef;    /* secondary buttons */
  --time: #a8761f;          /* gold: time and focus only (owner decision on the status colours) */
  --time-wash: #f6ecd9;
  --time-text: #7d5a14;     /* gold text on --time-wash (5.4:1) */

  --ok-text: #0e5e57;   --ok-bg: #e3f0ee;
  --bad-text: #9f2b23;  --bad-bg: #fbeae8;
  --wait-text: #7a4f00; --wait-bg: #fff1d1;
  --rev-text: #24527d;  --rev-bg: #e6eef6;
  --idle-text: #4a4d5c; --idle-bg: #f2f3f8;

  --focus: var(--time);

  /* type: one family, major-third scale on a 16px base */
  --font: "Plex Arabic", "Segoe UI", "Noto Sans Arabic", "Noto Sans", system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5625rem;
  --fs-2xl: 1.953rem;

  /* space: 4px steps */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;

  /* radius grows with the size of the thing (lusion: 20px panels, pill buttons) */
  --r-input: 8px;
  --r-box: 12px;            /* messages, lists, boxed groups */
  --r-button: 999px;
  --r-panel: 20px;
  --r-pill: 999px;

  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }
h1 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s3); }
ul, ol { margin: 0; }

a { color: var(--seal); text-underline-offset: 0.18em; }
a:hover { color: var(--seal-deep); }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Text for screen readers only (adds context to short visible labels). */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Arabic letters must stay joined. */
:lang(ar) h1, h1:lang(ar) { letter-spacing: 0; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--s3);
  inset-block-start: -10rem;
  padding: var(--s2) var(--s4);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-button);
  z-index: 10;
}
.skip-link:focus { inset-block-start: var(--s3); }

/* ---------------------------------------------------------------- header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s4) max(4vw, 1rem);
  background: var(--ground);
}

/* A wordmark, as on the reference site; the mark is a blue square. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-radius: 3px;
  background: var(--seal);
  flex: none;
}

.site-nav { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
/* Pill links in the header (the reference site's "LET'S TALK" / "MENU"). */
.nav-pill {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: 0 1.1rem;
  border-radius: var(--r-pill);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  background: var(--pill-light);
}
.nav-pill:hover { background: #d6d9e6; color: var(--ink); }
.nav-pill-dark { color: #ffffff; background: var(--pill); }
.nav-pill-dark:hover { color: #ffffff; background: var(--pill-deep); }
.nav-order { color: var(--ink-soft); text-decoration: none; font-variant-numeric: tabular-nums; }
.nav-order:hover { color: var(--ink); text-decoration: underline; }
.nav-form { margin: 0; }

/* Language menu (globe + current language), before the account links. */
.header-end { display: flex; align-items: center; gap: var(--s2); }
.lang-menu { position: relative; font-size: var(--fs-sm); }
.lang-toggle { gap: 0.45rem; cursor: pointer; list-style: none; user-select: none; }
.lang-toggle::-webkit-details-marker { display: none; }
.lang-icon { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.lang-list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.5rem);
  z-index: 20;
  min-inline-size: 11rem;
  margin: 0;
  padding: var(--s2);
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.08);
}
.lang-item { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; }
.lang-item.is-current { font-weight: 500; background: var(--ground); }
a.lang-item { color: var(--ink); text-decoration: none; }
a.lang-item:hover, a.lang-item:focus-visible { background: var(--ground); color: var(--ink); }

/* ---------------------------------------------------------------- page frames */
.page {
  max-inline-size: 72rem;
  margin: 0 auto;
  padding: var(--s6) var(--s4) var(--s7);
}

.card, .panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s6);
  max-inline-size: 30rem;
  margin: 0 auto;
}
.card-wide, .panel-wide { max-inline-size: 64rem; }
.panel-form { max-inline-size: 44rem; }

@media (max-width: 40rem) {
  .page { padding: var(--s4) var(--s3) var(--s6); }
  .card, .panel { padding: var(--s5) var(--s4); border-radius: 10px; }
  .site-header { padding: var(--s3) var(--s4); }
  h1 { font-size: var(--fs-xl); }
}

.page-head { margin-block-end: var(--s5); }
.page-head h1 { margin-block-end: var(--s2); overflow-wrap: anywhere; }
.lead { color: var(--ink-soft); max-inline-size: 60ch; }
.kicker { color: var(--ink-soft); font-size: var(--fs-sm); margin-block-end: var(--s1); }

.crumbs {
  max-inline-size: 64rem;
  margin: 0 auto var(--s3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: var(--fs-sm);
}
.crumbs a + a::before { content: "/" / ""; color: var(--ink-soft); margin-inline-end: var(--s2); }
.page:has(.panel-form) .crumbs { max-inline-size: 44rem; }

/* ---------------------------------------------------------------- controls */
label, .label { display: block; font-weight: 500; margin: 0 0 var(--s1); }

/* Sign-in and registration forms: label, field, hint, next label. */
.card form > label:not(.check) { margin-block-start: var(--s4); }

input, select, textarea {
  inline-size: 100%;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  min-block-size: 2.75rem;
}
textarea { resize: vertical; min-block-size: 6rem; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--bad-text);
  border-width: 2px;
}
input[disabled], select[disabled], textarea[disabled] { background: var(--idle-bg); color: var(--ink-soft); }

.code-input { letter-spacing: 0.3em; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }

.help, .hint { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0 0 var(--s2); max-inline-size: 65ch; }
form .help { margin-block-start: var(--s2); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-block-size: 2.75rem;
  margin-block-start: var(--s4);
  padding: 0.625rem 1.5rem;
  font: inherit;
  font-weight: 500;
  color: #ffffff;
  background: var(--pill);
  border: 1px solid var(--pill);
  border-radius: var(--r-button);
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--pill-deep); border-color: var(--pill-deep); color: #ffffff; }
.button-secondary { color: var(--ink); background: var(--pill-light); border-color: var(--pill-light); }
.button-secondary:hover { background: #d6d9e6; border-color: #d6d9e6; color: var(--ink); }
.button-quiet {
  color: var(--seal);
  background: transparent;
  border-color: transparent;
  padding-inline: var(--s3);
  margin-block-start: 0;
}
.button-quiet:hover { background: var(--seal-wash); border-color: transparent; color: var(--seal-deep); }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }

.link-button {
  padding: 0;
  min-block-size: 1.5rem;
  font: inherit;
  color: var(--seal);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.link-quiet { color: var(--ink-soft); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.resend { margin-block-start: var(--s5); }
.aside { margin: var(--s4) 0 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------- messages */
.flash {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-box);
  margin: 0 0 var(--s4);
  border-inline-start: 4px solid currentColor;
}
.flash-error { background: var(--bad-bg); color: var(--bad-text); }
.flash-notice { background: var(--rev-bg); color: var(--rev-text); }
.flash-success { background: var(--ok-bg); color: var(--ok-text); }

.error-summary {
  border: 2px solid var(--bad-text);
  border-radius: var(--r-box);
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s5);
  background: var(--paper);
}
.error-summary h2 { font-size: var(--fs-md); color: var(--bad-text); margin-block-end: var(--s2); }
.error-summary ul { padding-inline-start: var(--s5); }
.error-summary li { margin-block: var(--s1); }
.error-summary a { color: var(--bad-text); font-weight: 500; }

.note-block {
  margin-block-start: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--bad-bg);
  border-radius: var(--r-box);
}
.note-block h2 { font-size: var(--fs-sm); color: var(--bad-text); margin-block-end: var(--s1); }
.note-block p { margin: 0; white-space: pre-line; }

/* ---------------------------------------------------------------- facts */
.facts { display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: var(--s2) var(--s4); margin: 0 0 var(--s4); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts-wide { grid-template-columns: minmax(10rem, 1fr) 2fr; }
@media (max-width: 40rem) {
  .facts, .facts-wide { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-block-end: var(--s3); }
}

/* ---------------------------------------------------------------- status */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15rem 0.7rem 0.2rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--idle-text);
  background: var(--idle-bg);
  border: 1px solid var(--line);
}
.status::before { content: ""; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: currentColor; }
.status-submitted { color: var(--rev-text); background: var(--rev-bg); border-color: transparent; }
/* Owner decision 9 Nov 2026 (design review): gold = our clock is running;
   "Waiting for you" = outlined ink, so it is not mistaken for time;
   complete = solid seal. */
.status-approved { color: var(--ok-text); background: var(--ok-bg); border-color: transparent; }
.status-in_progress { color: var(--time-text); background: var(--time-wash); border-color: transparent; }
.status-complete { color: var(--on-seal); background: var(--seal); border-color: var(--seal); }
.status-rejected { color: var(--bad-text); background: var(--bad-bg); border-color: transparent; }
.status-waiting_client { color: var(--ink); background: transparent; border: 1.5px solid var(--ink); }

/* ---------------------------------------------------------------- the ruler */
/* One mark per stated working day: 2 · 1 · 3 · 30 · 3, then one mark of margin
   (39 stated, 40 promised). The segment widths are the durations themselves,
   so the EIN wait reads as what it is. */
.ruler { margin: 0 0 var(--s6); }
.ruler-track {
  display: grid;
  grid-template-columns: 2fr 1fr 3fr 30fr 3fr 1fr;
  gap: 0 6px;
  align-items: end;
}
.ruler-seg { display: grid; gap: var(--s1); min-inline-size: 0; }
.ruler-num {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding-inline-start: 1px;
}
.ruler-marks {
  display: flex;
  gap: 2px;
  block-size: 2.75rem;
  padding-block-end: 4px;
  border-block-end: 3px solid var(--line-strong);
}
.mark { flex: 1 1 0; min-inline-size: 2px; border-radius: 2px 2px 0 0; background: var(--seal-wash); border: 1px solid var(--line-strong); }
/* Elapsed working days will take the gold of --time (timer step). */
.mark.is-elapsed { background: var(--time); border-color: var(--time); }
.ruler-seg.is-approved .ruler-marks, .ruler-seg.is-complete .ruler-marks { border-block-end-color: var(--seal); }
.ruler-seg.is-in_progress .ruler-marks { border-block-end-color: var(--time); }
.ruler-seg.is-submitted .ruler-marks { border-block-end-color: var(--rev-text); }
.ruler-seg.is-rejected .ruler-marks { border-block-end-color: var(--bad-text); }
.ruler-seg.is-waiting_client .ruler-marks { border-block-end-color: var(--ink); border-block-end-style: dashed; }
.mark-buffer { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.ruler-num-buffer { color: var(--ink-soft); }
.ruler-day { font-size: var(--fs-xs); color: var(--ink-soft); text-align: end; font-variant-numeric: tabular-nums; line-height: 1; padding-block-start: 2px; }
.ruler figcaption { margin-block-start: var(--s3); color: var(--ink-soft); font-size: var(--fs-sm); max-inline-size: 70ch; }
@media (max-width: 40rem) {
  .ruler-track { gap: 0 3px; }
  .ruler-marks { gap: 1px; block-size: 2rem; }
  .mark { border: 0; }
}

/* ---------------------------------------------------------------- stage list */
.stage-list { list-style: none; padding: 0; border-block-start: 1px solid var(--line); }
.stage-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-block-end: 1px solid var(--line);
}
.stage-row-num {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1;
  color: var(--seal);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.stage-row-title { font-size: var(--fs-lg); margin-block-end: var(--s1); }
.stage-row-title a { color: var(--ink); text-decoration: none; }
.stage-row-title a:hover { text-decoration: underline; }
.stage-row-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.stage-row-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
@media (max-width: 40rem) {
  .stage-row { grid-template-columns: 2.25rem 1fr; gap: var(--s2) var(--s3); }
  .stage-row-num { font-size: var(--fs-xl); }
  .stage-row-side { grid-column: 2; justify-content: space-between; }
}

/* ---------------------------------------------------------------- one Stage */
.stage-head .stage-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.stage-head .stage-state p { margin: 0; color: var(--ink-soft); max-inline-size: 60ch; }

.stage-grid { display: grid; gap: var(--s6); }
@media (min-width: 56rem) {
  .stage-grid { grid-template-columns: minmax(0, 1fr) 18rem; }
  .stage-side { border-inline-start: 1px solid var(--line); padding-inline-start: var(--s5); }
}
.block + .block { margin-block-start: var(--s6); }
.block h2 { font-size: var(--fs-md); margin-block-end: var(--s3); }
.duration { font-size: var(--fs-xl); font-weight: 600; margin-block-end: var(--s1); font-variant-numeric: tabular-nums; }
.receive { padding-inline-start: var(--s5); color: var(--ink); }
.receive li { margin-block: var(--s1); }

.parts { list-style: none; padding: 0; border: 1px solid var(--line); border-radius: var(--r-box); }
.part {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
}
.part + .part { border-block-start: 1px solid var(--line); }
.part-num {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.part.is-done .part-num { background: var(--seal); border-color: var(--seal); color: var(--on-seal); }
.part-title { font-weight: 500; }
.part-state { font-size: var(--fs-sm); color: var(--ink-soft); }
.part.is-done .part-state { color: var(--ok-text); }
.part.is-partial .part-state { color: var(--wait-text); }

.submit-block { margin-block-start: var(--s2); }

/* ---------------------------------------------------------------- forms in a part */
.stage-form .field { margin: 0 0 var(--s5); padding: 0; border: 0; min-inline-size: 0; }
.stage-form fieldset.field legend { padding: 0; }
.field.has-error { padding-inline-start: var(--s4); border-inline-start: 4px solid var(--bad-text); }
.field-error { color: var(--bad-text); font-weight: 500; font-size: var(--fs-sm); margin: 0 0 var(--s2); }
.optional { color: var(--ink-soft); font-weight: 400; font-size: var(--fs-sm); }

.choices { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.choice, .check { display: flex; align-items: center; gap: var(--s2); font-weight: 400; margin: 0; min-block-size: 2.75rem; cursor: pointer; }
.choice input, .check input { inline-size: 1.25rem; block-size: 1.25rem; min-block-size: 0; margin: 0; flex: none; accent-color: var(--seal); }
.check { align-items: flex-start; }
.check input { margin-block-start: 0.2rem; }
.field-check .hint { padding-inline-start: calc(1.25rem + var(--s2)); }

.field-help { margin-block-start: var(--s2); font-size: var(--fs-sm); }
.field-help summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--seal);
  cursor: pointer;
  min-block-size: 1.5rem;
  list-style: none;
}
.field-help summary::-webkit-details-marker { display: none; }
.field-help summary::before {
  content: "?" / ""; /* decorative: not read aloud */
  display: inline-grid;
  place-items: center;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.7rem;
  font-weight: 600;
}
.field-help[open] summary { margin-block-end: var(--s2); }
.field-help dl {
  margin: 0;
  padding: var(--s3) var(--s4);
  background: var(--ground);
  border-radius: var(--r-box);
  max-inline-size: 65ch;
}
.field-help dt { font-weight: 600; color: var(--ink); }
.field-help dd { margin: 0 0 var(--s2); color: var(--ink-soft); }
.field-help dd:last-child { margin-block-end: 0; }

.form-actions .button { margin-block-start: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); border-block-start: 1px solid var(--line); padding-block-start: var(--s4); }

/* ---------------------------------------------------------------- documents */
.slot { padding-block: var(--s5); border-block-start: 1px solid var(--line); }
.slot:first-of-type { border-block-start: 0; padding-block-start: 0; }
.slot h2 { font-size: var(--fs-lg); margin-block-end: var(--s2); }
.slot.has-error { padding-inline-start: var(--s4); border-inline-start: 4px solid var(--bad-text); }
.files { list-style: none; padding: 0; margin: var(--s3) 0; }
.files li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--ground);
  border-radius: var(--r-input);
  overflow-wrap: anywhere;
}
.files li + li { margin-block-start: var(--s2); }
.file-meta { color: var(--ink-soft); font-size: var(--fs-sm); }
.file-name { font-weight: 500; }
.scan { font-size: var(--fs-sm); }
.scan-pending { color: var(--rev-text); }
.scan-clean { color: var(--ok-text); }
.scan-failed { color: var(--bad-text); font-weight: 500; }
.inline-form { display: inline; margin: 0; margin-inline-start: auto; }
.remove-link { margin-inline-start: auto; min-block-size: 1.5rem; display: inline-flex; align-items: center; }

/* A group of fields that applies in one case only (Stage 5 address). */
.field-group { margin: 0 0 var(--s5); padding: var(--s4) var(--s4) 0; border: 1px solid var(--line); border-radius: var(--r-box); }
.field-check:has(input:checked) + .field-group { display: none; }
.field-group legend { font-weight: 600; padding-inline: var(--s1); }
.field-group > .hint { margin-block-end: var(--s4); }
.slot:focus { outline: none; }
.slot:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.upload-form { display: grid; gap: var(--s2); max-inline-size: 30rem; margin-block-start: var(--s3); }
.upload-form .button { justify-self: start; margin-block-start: 0; }
input[type="file"] { padding: var(--s2); min-block-size: 0; background: var(--ground); border-style: dashed; }

/* ---------------------------------------------------------------- session warning */
.session-dialog {
  max-inline-size: min(28rem, calc(100vw - 2rem));
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--paper);
  color: var(--ink);
}
.session-dialog::backdrop { background: rgb(20 22 29 / 0.45); }
.flash-title { font-size: var(--fs-md); margin-block-end: var(--s1); }
.session-banner a { color: inherit; font-weight: 600; }
.session-dialog h2 { margin-block-end: var(--s2); }
.session-dialog .actions .button { margin-block-start: var(--s2); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- screen zero and legal pages */
.order-line { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0 0 var(--s3); overflow-wrap: anywhere; }
.agreement {
  max-block-size: 55vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  padding: var(--s1) var(--s4);
  margin: var(--s3) 0;
  background: var(--ground);
}
.agreement table, .legal table { border-collapse: collapse; inline-size: 100%; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.agreement th, .agreement td, .legal th, .legal td { border: 1px solid var(--line); padding: var(--s2); text-align: start; vertical-align: top; }
.agreement h3, .legal h3 { font-size: var(--fs-md); margin: var(--s5) 0 var(--s2); }
.legal p, .legal li, .agreement p, .agreement li { max-inline-size: 72ch; }
@media (max-width: 40rem) { .agreement { max-block-size: none; overflow: visible; } }
.consent-box { margin: var(--s3) 0; }
.consent-box .check { margin: 0; }
.consent-items { margin: var(--s2) 0 0; padding-inline-start: calc(1.25rem + var(--s2) + var(--s5)); }
.consent { margin-block-start: var(--s4); }
.consent .check { margin: var(--s3) 0; }
.consent .check ul { margin: var(--s2) 0 0; padding-inline-start: var(--s5); }
.pay { margin-block-start: var(--s2); padding-block-start: var(--s1); border-block-start: 1px solid var(--line); }

/* ================================================================ the public page */
/* After the owner's reference site: huge light headlines, one electric blue,
   "+" marks on the page grid, a blue line that draws as the Stages pass, a
   statement that fills word by word, moving text near the end. The line is the
   one bold thing; everything around it stays quiet. Motion stops for anyone
   who asks for reduced motion, and the page reads fully without JavaScript. */
.page-home { max-inline-size: none; padding: 0 max(4vw, 1rem) var(--s7); }

.hero { padding-block: clamp(2rem, 8vh, 6rem) clamp(2rem, 6vh, 4rem); }
.hero-title {
  font-size: clamp(2.75rem, 8.5vw, 7.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-inline-size: 14ch;
}
.hero-title .line { display: block; overflow: hidden; padding-block-end: 0.28em; margin-block-end: -0.22em; }
.hero-title .line > span { display: inline-block; }
.hero-body {
  display: grid;
  gap: var(--s4);
  margin-block-start: clamp(1.5rem, 4vw, 3rem);
  margin-inline-start: clamp(0rem, 40vw, 44%);
  max-inline-size: 36rem;
}
.hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--ink); margin: 0; }
.button-large { justify-self: start; min-block-size: 3.25rem; padding-inline: 2rem; font-size: var(--fs-lg); margin-block-start: 0; }
.hero-facts {
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 7vw, 5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s5);
}
.hero-facts li { display: grid; gap: var(--s1); padding-block-start: var(--s3); border-block-start: 1px solid var(--ink); }
.hero-facts strong { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.hero-facts span { color: var(--ink-soft); max-inline-size: 32ch; }

/* The "+" marks on the page grid, between sections (decorative). */
.crosses { display: flex; justify-content: space-between; margin-block: clamp(2rem, 6vw, 4rem); font-size: 1.25rem; line-height: 1; color: var(--ink); user-select: none; }

.home-section { padding-block: clamp(1rem, 4vw, 3rem); }
.display {
  font-size: clamp(2.25rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-inline-size: 18ch;
  margin-block-end: clamp(1.25rem, 3vw, 2.5rem);
}
.home-lead { color: var(--ink-soft); font-size: var(--fs-lg); max-inline-size: 48ch; }
.home-note { color: var(--ink-soft); margin-block-start: var(--s5); max-inline-size: 60ch; }

/* The statement that fills as you read: words start pale, turn black. */
.statement {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-inline-size: 34ch;
  margin-inline-start: clamp(0rem, 40vw, 44%);
  margin-block-end: clamp(2rem, 5vw, 4rem);
}
.statement.is-filling .w { opacity: 0.2; transition: opacity 0.35s ease; }
.statement.is-filling .w.on { opacity: 1; }

.opens-grid { display: grid; gap: var(--s5); }
@media (min-width: 60rem) { .opens-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opens-item { background: var(--paper); border-radius: var(--r-panel); padding: clamp(1.25rem, 3vw, 2.25rem); }
.opens-item h3 { font-size: var(--fs-xl); font-weight: 400; letter-spacing: -0.015em; margin-block-end: var(--s4); }
.opens-item ul { padding-inline-start: var(--s5); margin-block-end: var(--s3); }
.opens-item li { margin-block: var(--s2); }
.opens-item p, .opens-item li { max-inline-size: 62ch; }
.source { font-size: var(--fs-sm); color: var(--ink-soft); margin: var(--s4) 0 0; overflow-wrap: anywhere; }

/* The five Stages, with the blue line behind the cards only (not the heading,
   so the heading stays easy to read). */
.stage-track { position: relative; isolation: isolate; }
.ribbon {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
  /* --p (0..1) is set by home.js as the section scrolls by; without it the line is whole. */
  clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0);
}
.ribbon path { fill: none; stroke: var(--seal); stroke-width: clamp(14px, 2.2vw, 30px); stroke-linecap: round; }
.stage-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(2.5rem, 7vw, 5.5rem); }
.stage-card {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s4) var(--s5);
  background: var(--paper);
  border-radius: var(--r-panel);
  padding: clamp(1.25rem, 3vw, 2rem);
  max-inline-size: 60rem;
}
.stage-card:nth-child(even) { margin-inline-start: auto; }
.stage-card-n { font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.04em; }
.stage-card h3 { font-size: var(--fs-xl); font-weight: 400; margin-block-end: var(--s2); }
.stage-card p { margin: 0; color: var(--ink-soft); max-inline-size: 60ch; }
.stage-card-days { white-space: nowrap; font-weight: 500; color: var(--ink) !important; padding: 0.35rem 0.9rem; border-radius: var(--r-pill); background: var(--pill-light); }
@media (max-width: 40rem) {
  .stage-card { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .stage-card-days { grid-column: 2; justify-self: start; }
}

.how-list, .ready-list { max-inline-size: 60rem; padding-inline-start: 1.5em; font-size: var(--fs-lg); line-height: 1.5; }
.how-list li, .ready-list > li { margin-block: var(--s3); padding-inline-start: var(--s2); }
.how-list li::marker { font-weight: 500; }
.ready-list ul { font-size: var(--fs-md); padding-inline-start: var(--s5); margin-block-start: var(--s2); color: var(--ink-soft); }
.ready-list ul li { margin-block: var(--s1); }

.price-big { font-size: clamp(3.5rem, 12vw, 10rem); font-weight: 400; letter-spacing: -0.045em; line-height: 0.95; margin-block-end: clamp(1.5rem, 4vw, 3rem); }
.price-cols { display: grid; gap: var(--s5); }
@media (min-width: 52rem) { .price-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-col { background: var(--paper); border-radius: var(--r-panel); padding: clamp(1.25rem, 3vw, 2rem); }
.price-col h3 { font-size: var(--fs-lg); font-weight: 500; margin-block-end: var(--s3); }
.price-col ul { padding-inline-start: var(--s5); }
.price-col li { margin-block: var(--s2); max-inline-size: 60ch; }

.terms { display: grid; gap: var(--s6); }
@media (min-width: 52rem) { .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.terms h2 { font-size: var(--fs-xl); font-weight: 400; margin-block-end: var(--s3); }
.terms p { max-inline-size: 60ch; }

/* The moving text: one line of large type sliding by (two copies loop seamlessly). */
.marquee {
  overflow: hidden;
  margin-inline: calc(-1 * max(4vw, 1rem));
  padding-block: clamp(1rem, 3vw, 2rem);
  border-block: 1px solid var(--line);
  margin-block: clamp(2rem, 6vw, 4rem);
}
.marquee-track { display: flex; inline-size: max-content; }
.marquee-track span {
  font-size: clamp(2.5rem, 8vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  padding-inline-end: 0.6em;
}
.marquee-track span::after { content: "+" / ""; color: var(--seal); padding-inline-start: 0.6em; }

.final { padding-block: clamp(2rem, 6vw, 4rem); }
.final .display { max-inline-size: 14ch; }
.home-footer { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding-block-start: var(--s5); border-block-start: 1px solid var(--line); font-size: var(--fs-sm); }

@media (prefers-reduced-motion: no-preference) {
  /* The one page-load moment: the headline rises line by line. */
  .hero-title .line > span { animation: hero-rise 1s cubic-bezier(0.2, 0.75, 0, 1) both; }
  .hero-title .line:nth-child(2) > span { animation-delay: 0.12s; }
  @keyframes hero-rise { from { transform: translateY(105%); } to { transform: none; } }
  .marquee-track { animation: marquee 32s linear infinite; }
  @keyframes marquee { to { transform: translateX(-50%); } }
  :dir(rtl) .marquee-track { animation-name: marquee-rtl; }
  @keyframes marquee-rtl { to { transform: translateX(50%); } }
}
@media (max-width: 40rem) {
  .hero-body, .statement { margin-inline-start: 0; }
}

/* ---------------------------------------------------------------- Arabic */
/* Arabic letters join: extra letter spacing breaks the joins, so the tight
   spacing of the big headlines is for Latin text only. Arabic also needs more
   room above and below the line than the 1.04 of the Latin headlines. */
:lang(ar) * { letter-spacing: normal; }
:lang(ar) .hero-title, :lang(ar) .display, :lang(ar) .price-big, :lang(ar) .marquee { line-height: 1.35; }
/* The headline lines clip their overflow (for the rise); Arabic letters reach lower. */
:lang(ar) .hero-title .line { padding-block-end: 0.3em; margin-block-end: -0.1em; }

/* ---------------------------------------------------------------- owner panel */
/* Same tokens as the client pages, quiet like them (no motion). Tables can
   scroll sideways on a narrow screen; the wrapper is focusable so the
   keyboard can scroll it too (WCAG 2.1.1). */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--paper); }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.data-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th, .data-table td { padding: var(--s2) var(--s3); text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
.data-table thead th { color: var(--ink-soft); font-weight: 500; background: var(--ground); white-space: nowrap; }
.data-table tbody tr:last-child td { border-block-end: 0; }
.data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .note-cell { white-space: pre-line; min-inline-size: 14rem; }
.data-table .button { margin: 0; white-space: nowrap; }

/* Hours since Submit against the 24-hour promise: words first, colour second. */
.elapsed { white-space: nowrap; font-variant-numeric: tabular-nums; }
.elapsed-near { color: var(--time-text); font-weight: 500; }
.elapsed-late { color: var(--bad-text); font-weight: 600; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); list-style: none; margin: 0; padding: 0; }
.chip-row li { display: inline-flex; align-items: center; gap: var(--s1); }
.chip-num { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.subblock + .subblock { margin-block-start: var(--s5); }
.subblock h3 { font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 600; margin-block-end: var(--s2); }
.slot h3 { font-size: var(--fs-md); margin-block-end: var(--s2); }

/* The decision forms in the side column. */
.decisions { display: grid; gap: var(--s5); }
.decision { display: grid; gap: var(--s2); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-box); background: var(--paper); }
.decision h2 { font-size: var(--fs-md); margin: 0; }
.decision .button { justify-self: start; margin-block-start: var(--s1); }
.decision .check { margin: 0; }
/* The Stage 1 approval note: time-related (refunds end), so in the gold of time. */
.note-block-time { margin: 0; background: var(--time-wash); color: var(--time-text); }

.filter-form { display: grid; grid-template-columns: minmax(0, 14rem) auto auto; align-items: end; gap: var(--s1) var(--s3); margin-block-end: var(--s4); }
.filter-form .label, .filter-form .hint { grid-column: 1 / -1; margin: 0; }
.filter-form input { grid-column: 1; }
.filter-form .button { margin: 0; }
@media (max-width: 40rem) {
  .filter-form { grid-template-columns: 1fr; }
  .filter-form .button { justify-self: start; }
}

/* ---------------------------------------------------------------- timers */
/* The 40-working-day promise on the overview, and each Stage's timer.
   Time is gold in this design (DESIGN.md), so the numbers use it; the
   state ("running", "stopped") is always written in words. */
.promise { display: grid; gap: var(--s1); margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border-inline-start: 3px solid var(--time); background: var(--time-wash); border-radius: var(--r-box); }
.promise h2 { font-size: var(--fs-sm); color: var(--time-text); margin: 0; }
.promise-value { margin: 0; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.promise .help { margin: 0; color: var(--ink); }
.timer-value { margin: 0 0 var(--s1); font-weight: 600; color: var(--time-text); font-variant-numeric: tabular-nums; }
.timer-facts { margin-block-start: var(--s3); font-size: var(--fs-sm); }
/* "What we need you to do": the one thing the client must act on. */
.waiting-step { padding: var(--s4); border: 1.5px solid var(--ink); border-radius: var(--r-box); background: var(--paper); }
.waiting-step h2 { margin-block-end: var(--s2); }
.note-block-wait { background: var(--ground); }
.note-block-wait h3 { font-size: var(--fs-sm); margin-block-end: var(--s1); }

/* ---------------------------------------------------------------- Handover (item 4 — 10 Nov 2026) */
/* One box per account in the owner's form. */
.account-set { margin: 0 0 var(--s5); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-box); background: var(--paper); min-inline-size: 0; }
.account-set legend { font-weight: 600; padding-inline: var(--s2); }
.account-grid { display: grid; gap: var(--s3) var(--s4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.account-grid .field, .account-set > .field { margin: 0 0 var(--s3); }
/* A sentence quoted from the Agreement, with its clause. */
.quote { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-inline-start: 3px solid var(--seal); background: var(--ground); border-radius: var(--r-box); }
.quote p { margin: 0 0 var(--s2); }
.quote cite { display: block; font-style: normal; font-size: var(--fs-sm); color: var(--ink-soft); }
/* The Handover file's password: easy to read and to copy, always left to right. */
.secret-value { display: inline-block; margin: var(--s2) 0; padding: var(--s2) var(--s4); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--fs-lg); letter-spacing: 0.06em; border: 1px solid var(--line-strong); border-radius: var(--r-box); background: var(--paper); user-select: all; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.handover-box { margin-block-end: var(--s5); padding: var(--s4); border: 1.5px solid var(--ink); border-radius: var(--r-box); background: var(--paper); }
.handover-box h2 { margin-block-end: var(--s2); }
.handover-box p:last-child { margin-block-end: 0; }