/* ─────────────────────────────────────────────────────────────────────────────
   Ciel Study — design system
   Palette sampled from the hero clip: chalkboard slate, warm amber, coloured
   chalk. One stylesheet drives the landing page AND the policy pages, so the
   whole site moves together.

   Policy pages stay quiet and readable on purpose — a payment reviewer has to
   find the required sections fast, and decoration works against that.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --slate-900: #12171a;
  --slate-850: #171d21;
  --slate-800: #1e2529;
  --slate-600: #3a454b;

  --chalk:       #eceae4;
  --chalk-dim:   #a8b2b8;
  --chalk-faint: #79858c;

  --amber:      #f5c542;
  --amber-soft: #ffd970;

  --bg:        var(--slate-900);
  --surface:   var(--slate-800);
  --surface-2: var(--slate-850);
  --line:      #2b3439;
  --text:      var(--chalk);
  --text-dim:  var(--chalk-dim);
  --faint:     var(--chalk-faint);
  --on-accent: #241c05;

  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1080px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.28);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Readable if forced light (print, reader mode, a reviewer's tooling). */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f5f0; --surface: #ffffff; --surface-2: #fbfaf7;
    --line: #e2ddd2; --text: #23282b; --text-dim: #4f585e; --faint: #6d777d;
    --shadow: 0 1px 2px rgba(30,25,10,.06), 0 8px 24px rgba(30,25,10,.07);
  }
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--amber-soft); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; padding: .1em .4em;
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--amber);
  color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.site-head .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand {
  font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; color: var(--text);
  text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: 9px;
}
.brand .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px rgba(245,197,66,.16); flex-shrink: 0;
}
/* S45: the logo replaces the amber dot in the header. It is already a circular
   badge with its own amber ring, so it is clipped to a circle and given no
   extra border — two rings would fight. `flex-shrink:0` matters: without it the
   mark squashes on narrow phones (the same bug the S43 send button had). */
.brand-mark {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; display: block;
}
.brand em { font-style: normal; color: var(--amber); }

nav { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
nav a {
  color: var(--text-dim); text-decoration: none; font-size: .92rem;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
  transition: background .15s, color .15s;
}
nav a:hover, nav a.on { color: var(--text); background: var(--surface); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px; font-weight: 650; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn-primary {
  background: var(--amber); color: var(--on-accent);
  box-shadow: 0 4px 18px rgba(245,197,66,.22);
}
.btn-primary:hover {
  background: var(--amber-soft); color: var(--on-accent);
  transform: translateY(-1px); box-shadow: 0 8px 26px rgba(245,197,66,.3);
}
.btn-ghost { border-color: var(--line); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--slate-600); color: var(--text); }
.btn-sm { padding: 8px 16px; font-size: .92rem; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
section { padding: 66px 0; }
section + section { border-top: 1px solid var(--line); }

.eyebrow {
  text-transform: uppercase; letter-spacing: .13em; font-size: .74rem;
  font-weight: 700; color: var(--amber); margin: 0 0 10px;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; }
h3 { font-size: 1.08rem; margin: 0 0 7px; }
.lede { color: var(--text-dim); font-size: 1.06rem; max-width: 62ch; margin: 0 0 34px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding: 54px 0 62px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 40% 40% -20%;
  background: radial-gradient(closest-side, rgba(245,197,66,.10), transparent 72%);
  pointer-events: none;
}
.hero-grid {
  position: relative; display: grid; gap: 44px; align-items: center;
  grid-template-columns: 1.05fr .95fr;
}
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); margin: 0 0 16px; text-wrap: balance; }
.hero h1 .hl { color: var(--amber); }
.hero p.sub { color: var(--text-dim); font-size: 1.1rem; margin: 0 0 26px; max-width: 52ch; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-note { color: var(--faint); font-size: .88rem; margin: 16px 0 0; }

.hero-media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--slate-800);
}
.hero-media video { width: 100%; display: block; }

/* ── Stat strip ─────────────────────────────────────────────────────────── */

/* ⚠ FLEX, NOT A FIXED COLUMN COUNT. There are five stats and the grid was
   repeat(5,1fr), so the moment it dropped to three columns the fifth left a
   dead cell — and because the strip is a 1px gap over a line-coloured
   background, that hole is a visible empty panel, not just whitespace.
   ★ With flex-wrap the last row STRETCHES to fill the strip, so it reads as a
   deliberate 3-then-2 layout at every width, and it stays correct if a sixth
   stat is ever added. */
.stats {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-top: 46px;
}
.stat { flex: 1 1 170px; background: var(--surface);
  padding: 20px 16px; text-align: center; }
.stat b {
  display: block; font-size: 1.5rem; font-weight: 700;
  color: var(--text); letter-spacing: -.02em;
}
.stat span { font-size: .82rem; color: var(--text-dim); }

/* ── Cards / steps ──────────────────────────────────────────────────────── */

.grid { display: grid; gap: 18px; }
/* ⚠ The feature grid holds TEN cards in three columns, so the last row was one
   card with two empty slots beside it — read as a broken layout rather than as
   the end of a list.
   ★ Flex-wrap plus justify-content:center leaves the orphans CENTRED, with
   equal space either side, which reads as deliberate. The max-width is what
   keeps it to three per row; without it a lone card would stretch across the
   whole width, which looks worse than the hole did. Cards are not padded out
   with invented features to make the count divide — the layout gives way, not
   the content. */
.grid-3 { display: flex; flex-wrap: wrap; justify-content: center; }
.grid-3 > * { flex: 1 1 250px; max-width: calc((100% - 36px) / 3); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px;
}
.card .ic {
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 13px;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--surface-2); border: 1px solid var(--line);
}
.card p { margin: 0; color: var(--text-dim); font-size: .95rem; }

.steps { counter-reset: s; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.step { position: relative; padding-left: 50px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  color: var(--amber); background: var(--surface); border: 1px solid var(--line);
}
.step p { margin: 0; color: var(--text-dim); font-size: .95rem; }

/* ── Pricing ────────────────────────────────────────────────────────────── */

/* ⚠ `align-items: start` was harmless while every card was a one-line summary,
   but once the cards carry feature lists of different lengths it leaves them
   ragged (467px next to 251px). `stretch` squares them off. */
/* ⚠ THE COLUMN COUNT WAS HARDCODED AT 4 AND THE CARD COUNT CHANGED (S54).
   Retiring the auto-renew plan left three cards in a four-column grid, so the
   row rendered with an empty slot on the right — found by measuring the grid in
   the browser, not by reading this file. `auto-fit` collapses the empty track,
   so the row fills correctly at three cards today AND at four when the ₹449 GT
   plan lands, with no further edit. The explicit 2-column and 1-column rules at
   the breakpoints below still win where they apply. */
.plans { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: stretch; }
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 20px; position: relative;
}
.plan.featured { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245,197,66,.3); }
.plan .tag {
  position: absolute; top: -11px; left: 20px; background: var(--amber);
  color: var(--on-accent); font-size: .7rem; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
}
.plan h3 { margin: 0 0 4px; font-size: 1rem; color: var(--text-dim); font-weight: 600; }
.plan .price { font-size: 1.95rem; font-weight: 700; letter-spacing: -.03em; }
.plan .price small { font-size: .8rem; font-weight: 500; color: var(--text-dim); }
.plan .per { color: var(--text-dim); font-size: .88rem; margin: 0 0 6px; }
/* What each plan actually includes. The Free card previously said only
   "3 questions a day", which undersold the tier a stranger judges you on. */
.plan-list {
  list-style: none; margin: 14px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-size: .86rem; line-height: 1.5; color: var(--text-dim);
}
.plan-list li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.plan-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--amber); font-weight: 700;
}
.plan-list li:last-child { margin-bottom: 0; }
.plan-list strong { color: var(--text); font-weight: 650; }
.plan-list code {
  font-size: .82em; background: rgba(255,255,255,.06);
  padding: 1px 5px; border-radius: 4px;
}

/* ── Notes ──────────────────────────────────────────────────────────────── */

.note {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: var(--radius-sm);
  padding: 18px 20px; margin: 26px 0; color: var(--text-dim); font-size: .96rem;
}
.note strong { color: var(--text); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

details.faq {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: 10px;
}
details.faq summary {
  cursor: pointer; padding: 15px 18px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--amber); font-size: 1.25rem; line-height: 1; }
details.faq[open] summary::after { content: "\2212"; }
details.faq .body { padding: 0 18px 16px; color: var(--text-dim); font-size: .95rem; }
details.faq .body p { margin: 0 0 8px; }
details.faq .body p:last-child { margin: 0; }

/* ── Final CTA ──────────────────────────────────────────────────────────── */

.cta-band {
  text-align: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 46px 26px;
}
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: var(--text-dim); margin: 0 auto 24px; max-width: 48ch; }

/* ── Document pages ─────────────────────────────────────────────────────── */

/* ⚠ THE DOCUMENT PAGES USED TO BE NARROWER THAN THE HOME PAGE, AND IT SHOWED.
   `.doc` sits on `<main class="wrap doc">`, so it was overriding .wrap's
   --maxw (1080px) down to 800px — while the nav and the footer on those same
   pages kept using --maxw. The result was text starting ~140px inside the
   header above it, which reads as a different site rather than a deliberate
   measure. Nawar spotted it as the pages "not matching the home page".
   ⇒ The container now matches the home page, and the READING MEASURE is capped
     on the text itself instead. That is exactly what index.html already does
     (.lede is 62ch and .hero p.sub is 52ch inside the same 1080px wrap), so
     this makes the inner pages consistent with the home page's own method,
     not just with its width.
   ⚠ Capped on p and li ONLY. Headings keep their full width because .doc h2
     carries the rule line that separates sections, and a half-width divider
     looks broken; tables are full width because a table has its own measure
     and .table-scroll already handles overflow. */
.doc { padding-top: 44px; padding-bottom: 10px; }
.doc h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 6px; }
.doc h2 {
  font-size: 1.2rem; margin: 34px 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.doc p, .doc li { color: var(--text-dim); max-width: 70ch; }
.doc strong { color: var(--text); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 7px; }
/* A cell is inside a table's own measure; capping it there would fight the
   column widths. */
.doc td p, .doc td li, .doc th p { max-width: none; }
.updated { color: var(--faint); font-size: .9rem; margin: 0 0 8px; }

.table-scroll { overflow-x: auto; margin: 18px 0; }
table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: .95rem; }
.table-scroll table { margin: 0; min-width: 460px; }
th, td {
  text-align: left; padding: 11px 14px; border: 1px solid var(--line);
  vertical-align: top; color: var(--text-dim);
}
th { background: var(--surface-2); color: var(--text); font-weight: 650; }
td strong { color: var(--text); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--line); margin-top: 46px; padding: 32px 0 46px;
  color: var(--faint); font-size: .9rem;
}
.site-foot .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 22px;
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between;
}
.site-foot a { color: var(--text-dim); text-decoration: none; }
.site-foot a:hover { color: var(--amber); }
.site-foot .fine { max-width: 52ch; margin: 14px 0 0; line-height: 1.55; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  /* 5 stats do not fit here, and 4-across would leave one orphan on its own
     row. Three and two both divide five into rows that look deliberate.
     ⚠ These are flex-basis values now, not column counts: the basis decides
     how many fit per row, and the last row then STRETCHES to fill instead of
     leaving the dead cell the old fixed grid produced. */
  .stat { flex-basis: 30%; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > * { max-width: calc((100% - 18px) / 2); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .stat { flex-basis: 30%; }
}
@media (max-width: 620px) {
  .stat { flex-basis: 45%; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 44px 0; }
  .steps, .plans { grid-template-columns: 1fr; }
  .grid-3 > * { max-width: 100%; }
  .site-head .inner { padding: 10px 16px; gap: 8px; }
  .brand { font-size: 1.08rem; }
  nav a { padding: 5px 8px; font-size: .85rem; }
  .wrap { padding: 0 16px; }
  .cta-row .btn { width: 100%; }
}

/* Fixes log: capped so "What's next" is reachable without scrolling past 28
   entries. The list is meant to be long — it is the evidence — but it must not
   bury the roadmap underneath it. */
.log-scroll{max-height:58vh;overflow-y:auto;padding-right:6px;
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  background:var(--surface-2)}
.log-scroll h3{margin-top:18px}
.log-scroll h3:first-child{margin-top:0}
.log-scroll::-webkit-scrollbar{width:10px}
.log-scroll::-webkit-scrollbar-thumb{background:var(--slate-600);border-radius:6px}

/* Milestone band on the home page.
   Deliberately quiet: a timeline of small honest numbers, not a trophy shelf.
   It must not read like the Fixes page — that one is a changelog with a
   "what's next"; this is only "how far this has come". */
.milestone-band { background: var(--surface-2); border-block: 1px solid var(--line) }
ol.milestones { list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 0; counter-reset: none }
ol.milestones li { display: grid; grid-template-columns: 1fr auto;
  gap: 2px 18px; align-items: baseline; padding: 14px 0 14px 22px;
  border-top: 1px solid var(--line); position: relative }
ol.milestones li:first-child { border-top: 0 }
/* the dot on the spine */
ol.milestones li::before { content: ""; position: absolute; left: 4px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim) }
ol.milestones li:first-child::before { background: var(--accent, #6ea8c8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #6ea8c8) 22%, transparent) }
/* the spine itself */
ol.milestones li:not(:last-child)::after { content: ""; position: absolute;
  left: 7px; top: 27px; bottom: -14px; width: 1px; background: var(--line) }
ol.milestones b { font-weight: 600; font-size: 1rem }
ol.milestones time { color: var(--faint); font-size: .8rem;
  font-variant-numeric: tabular-nums; white-space: nowrap }
ol.milestones span { grid-column: 1 / -1; color: var(--text-dim);
  font-size: .9rem; line-height: 1.5 }
@media (max-width: 560px) {
  ol.milestones li { grid-template-columns: 1fr }
  ol.milestones time { grid-row: 1; justify-self: start }
}

/* ── EXAM DATES BAND ──────────────────────────────────────────────────────────
   Sits directly under the hero stats: the first thing below the fold, because
   for seven weeks it is the most useful sentence on the page.

   ⚠ THE WORD "COUNTDOWN" IS DELIBERATELY ABSENT from the copy here. Three
   places on this site say the free tier is "not a countdown" and there is "no
   trial, no countdown" — that is a promise about the ALLOWANCE and it is still
   true. This band counts down to an exam, not to the end of anything the reader
   has. Hence "31 days to go", never "expires" and never "trial".

   ★ Amber is spent on ONE thing: the number of days. It is the only part that
   changes while you look at the page, and the only part a reader scans for. */
/* ⚠ NARROWER THAN THE PAGE. The wrap is 1080px and a four-row list stretched
   across all of it reads as a wall — the eye has to travel the full width to
   pair a label with its date. 560px keeps label, date and days in one glance,
   which is the only thing this band is for. */
.exam-band { background: var(--surface-2); border-block: 1px solid var(--line);
  padding: 34px 0 }
.exam-band h2 { font-size: 1.5rem }
.exam-band .lede { max-width: 560px }
ul.exams { list-style: none; margin: 18px 0 0; padding: 0; max-width: 560px }
li.exam-row { display: grid; grid-template-columns: 1fr auto auto;
  gap: 2px 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line) }
li.exam-row:first-child { border-top: 0 }
li.exam-row b { font-weight: 600; font-size: .95rem }
li.exam-row time { color: var(--text); font-size: .88rem;
  font-variant-numeric: tabular-nums; white-space: nowrap }
.exam-tbd { color: var(--faint); font-size: .88rem; font-style: italic;
  white-space: nowrap }
.exam-countdown { color: var(--amber); font-weight: 700; font-size: .88rem;
  font-variant-numeric: tabular-nums; white-space: nowrap }
.exam-countdown.is-now { color: var(--on-accent); background: var(--amber);
  border-radius: var(--radius-sm); padding: 2px 9px; font-size: .82rem }
/* The source and the note share the second line: the note earns its place only
   because it is short, and the citation is the reason the date is safe to
   print, so neither gets a row of its own. */
.exam-note { grid-column: 1 / -1; color: var(--text-dim);
  font-size: .84rem; line-height: 1.45 }
.exam-src { color: var(--faint); font-size: .75rem; text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid var(--line) }
.exam-src:hover { color: var(--text-dim) }
.exam-nosrc { border-bottom: 0; font-style: italic }
.exam-tent { color: var(--faint); font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap }
@media (max-width: 620px) {
  /* Stack rather than squeeze: the date and the days are the two things worth
     reading on a phone, so they get their own line instead of three columns
     fighting over 340px. */
  li.exam-row { grid-template-columns: auto auto; justify-content: start;
    column-gap: 10px }
  li.exam-row b { grid-column: 1 / -1 }
}