/* Tamsin landing page.
   Built from docs/design/rolescout-landing-page.pdf and recoloured to the Tamsin
   palette in docs/design/tamsin-logo-package/palette.json. Midnight carries the
   brand on light surfaces and celadon reverses it on dark ones, exactly as the
   package specifies. Celadon is far too light for text on white (1.75:1), so
   --celadon-700 is a darkened form of it for links and buttons, and gold is the
   restrained accent the package asks for rather than a second brand colour. */

:root {
  /* brand — docs/design/tamsin-logo-package/palette.json */
  --midnight: #172D32;
  --midnight-700: #24454D;
  --celadon: #AECABD;
  --celadon-700: #44705B;   /* celadon darkened for text on white: 5.7:1 */
  --celadon-050: #EAF2EC;
  --gold: #D4B883;          /* restrained accent only, never text on white */

  /* surfaces */
  --white: #ffffff;
  --warm-white: #F6F7F0;
  --mist: #EEF4EF;
  --line: #E2E8E3;

  /* text */
  --ink: #172D32;
  --muted: #5A6D6B;

  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1140px;
  --shadow-sm: 0 1px 2px rgba(23, 45, 50, .06), 0 4px 14px rgba(23, 45, 50, .05);
  --shadow-md: 0 2px 6px rgba(23, 45, 50, .07), 0 18px 46px rgba(23, 45, 50, .09);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--celadon-700); }

:focus-visible {
  outline: 3px solid var(--celadon-700);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--midnight); color: #fff; padding: 12px 18px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- type */
h1, h2, h3 { color: var(--ink); line-height: 1.12; margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0; }

/* the serif italic accent line the mockup leans on */
.accent {
  display: block;
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--celadon-700);
  letter-spacing: -.01em;
}

.eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--celadon-700);
  margin-bottom: 18px;
}

.lede { color: var(--muted); font-size: 1.06rem; max-width: 56ch; }
.small { font-size: .85rem; color: var(--muted); }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 650;
  font-size: .97rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--midnight); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--midnight-700); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--midnight); }
.btn .arrow { font-size: .85em; opacity: .85; }

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 28px; height: 74px; }
.nav .logo img { height: 30px; width: auto; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 550; }
.nav ul a:hover { color: var(--ink); }
.nav .btn { padding: 11px 18px; }

.preview-flag {
  background: var(--midnight);
  color: var(--celadon);
  font-size: .8rem;
  text-align: center;
  padding: 7px 24px;
  /* The one place gold appears. It is 7.5:1 on midnight and 1.9:1 on white, so
     a dark strip is the only surface it can sit on. */
  border-bottom: 2px solid var(--gold);
}
.preview-flag strong { color: #fff; font-weight: 650; }

/* ----------------------------------------------------------------- hero */
.hero { padding: 76px 0 64px; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -180px; top: -140px;
  width: 620px; height: 620px; border-radius: 50%;
  background: var(--celadon-050); z-index: -1;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 30px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }

/* the product card in the hero */
.shot {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.shot-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: #FBFCFA;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: #DEE5DF; }
/* :not(.dot) — the traffic-light dots are spans too, and would each take the
   auto margin, spreading them across the bar instead of clustering them left. */
.shot-bar span:not(.dot) { margin-left: auto; font-size: .75rem; color: var(--muted); }
.shot-body { padding: 20px; }
.shot-hello { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.shot-body h3 { font-size: 1.2rem; margin: 6px 0 18px; }

.job {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; margin-bottom: 12px; background: #fff;
}
.job-top { display: flex; align-items: start; gap: 12px; }
.job-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--celadon-050); color: var(--celadon-700);
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
.job h4 { margin: 0; font-size: .97rem; font-weight: 700; }
.job .meta { font-size: .84rem; color: var(--muted); margin-top: 2px; }
.job .why { font-size: .85rem; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pill {
  margin-left: auto; flex: none;
  background: var(--celadon-050); color: var(--celadon-700);
  font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.shot-note {
  display: flex; gap: 12px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-top: 16px; background: #fff; box-shadow: var(--shadow-sm);
}
.shot-note .tick { color: var(--celadon-700); font-weight: 800; }
.shot-note strong { font-size: .92rem; }
.shot-note p { font-size: .84rem; color: var(--muted); }

/* ------------------------------------------------------------ trust bar */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--warm-white); }
.trust ul {
  display: flex; flex-wrap: wrap; gap: 14px 56px; justify-content: space-between;
  list-style: none; margin: 0; padding: 20px 0; font-size: .9rem; color: var(--muted);
}
.trust li::before { content: "✓"; color: var(--celadon-700); font-weight: 800; margin-right: 9px; }

/* -------------------------------------------------------------- section */
section { padding: 86px 0; }
.section-head { max-width: 62ch; margin-bottom: 52px; }
.section-head h2 { margin-bottom: 16px; }
.bg-cream { background: var(--warm-white); }
.bg-mist { background: var(--mist); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step .num {
  font-family: Newsreader, Georgia, serif; font-style: italic;
  font-size: 1.7rem; color: var(--celadon-700); margin-bottom: 14px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted); font-size: .95rem; }

/* discover / apply / prepare */
.tabs-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: 40px; }
.tabs {
  display: inline-flex; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 5px; box-shadow: var(--shadow-sm);
}
.tabs button {
  font: inherit; font-size: .9rem; font-weight: 650;
  border: 0; background: none; color: var(--muted);
  padding: 9px 20px; border-radius: 8px; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--midnight); color: #fff; }

.feature { display: grid; grid-template-columns: 5fr 7fr; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
/* A class that sets `display` beats the user-agent `[hidden] { display: none }`
   rule, so without this the two inactive tab panels render anyway. */
.feature[hidden] { display: none; }
.feature-left { background: var(--celadon-050); padding: 40px; }
.feature-left .eyebrow { margin-bottom: 14px; }
.feature-left h3 { font-size: 1.55rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.feature-left p { color: var(--muted); font-size: .95rem; margin-bottom: 26px; }
.feature-right { background: #fff; padding: 40px; }
.feature-right .row { display: flex; justify-content: space-between; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.feature-right h4 { font-size: 1.3rem; font-weight: 800; margin: 12px 0 6px; }
.feature-right .meta { color: var(--muted); font-size: .9rem; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.feature-right h5 { font-size: .95rem; margin: 20px 0 12px; }
.checks { list-style: none; margin: 0 0 18px; padding: 0; }
.checks li { font-size: .92rem; margin-bottom: 9px; }
.checks li::before { content: "✓"; color: var(--celadon-700); font-weight: 800; margin-right: 10px; }

/* helping hand */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.points { list-style: none; margin: 0; padding: 0; }
.points li { display: grid; grid-template-columns: 26px 1fr; gap: 6px 10px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.points li:first-child { padding-top: 0; }
.points li:last-child { border-bottom: 0; }
.points .tick { color: var(--celadon-700); font-weight: 800; }
.points strong { font-size: 1rem; }
.points p { grid-column: 2; color: var(--muted); font-size: .93rem; }

/* pricing */
.pricing { text-align: center; }
.pricing .section-head { margin: 0 auto 48px; text-align: center; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; max-width: 1080px; margin: 0 auto; }
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan .eyebrow { margin-bottom: 12px; }
.plan.featured { border-color: var(--celadon-700); box-shadow: var(--shadow-md); }
/* Two lines reserved, so a card whose eyebrow wraps — or carries the tag —
   does not push its heading and price out of line with its neighbours. */
.plan .eyebrow { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
                 gap: 6px 8px; min-height: 2.8em; line-height: 1.35; }
/* Out of flow on purpose: in the eyebrow its padding made that line box taller
   than a plain text line, which dropped the featured card's heading and price
   6px below its neighbours'. */
.plan-tag {
  position: absolute; top: 20px; right: 20px;
  background: var(--celadon-050); color: var(--celadon-700);
  border-radius: 999px; padding: 3px 10px; font-size: .7rem;
  font-weight: 700; letter-spacing: .02em; text-transform: none;
}
.plan.featured .eyebrow { padding-right: 104px; }
.plan h3 { font-size: 1.15rem; margin-bottom: 8px; }
.price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.price .amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.price .per { color: var(--muted); font-size: .88rem; }
.plan > p { color: var(--muted); font-size: .93rem; margin-bottom: 22px; }
.plan .checks { flex: 1; }
.plan .btn { justify-content: center; width: 100%; }
.plan .small { margin-top: 12px; }
.plan-note { margin-top: 26px; font-size: .86rem; color: var(--muted); }

/* faq */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
details { border-bottom: 1px solid var(--line); }
details summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-weight: 650; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--celadon-700); font-size: 1.3rem; font-weight: 400; flex: none; }
details[open] summary::after { content: "–"; }
details p { color: var(--muted); font-size: .94rem; padding-bottom: 22px; max-width: 62ch; }

/* closing */
.closing { text-align: center; background: var(--warm-white); }
.closing h2 { margin-bottom: 28px; }
.closing .btn { margin-bottom: 12px; }

/* footer */
footer { background: var(--midnight); color: #A9BFB6; padding: 44px 0; font-size: .88rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; }
footer img { height: 26px; width: auto; }
footer .spacer { margin-left: auto; }
footer a { color: var(--celadon); }


/* ---- the grind -------------------------------------------------------------
   Spec: docs/design/LANDING_GSAP_ANIMATION.md.

   Two layouts from one set of rules. WITHOUT `.is-animated` (JS off, or
   prefers-reduced-motion) the section is a plain vertical sequence: seven
   frames, each a caption beside its scene in that scene's finished state.
   WITH `.is-animated`, grind.js has taken over: the grid becomes one pinned
   stage, every layer stacks absolutely and opacity decides which is visible.

   The static form is the one that has to read well on its own, so it is the
   default and the animated form is the override.

   During the grind there is no teal. Colour returns in scene 7, and that
   return is the payoff — see the .calm-* rules at the bottom. */

.grind {
  --grind-paper: #f3f2ef;
  --grind-line: #d9dde2;
  --grind-ink: var(--muted);
  --grind-drain: rgba(90, 100, 112, .5);
  background: var(--warm-white);
  overflow: clip;            /* a rotated clone can never widen the page */
}

.grind-grid { display: grid; gap: 28px; }
.grind-captions { list-style: none; margin: 0; padding: 0; }
.grind-captions > li {
  font-size: 1.35rem; font-weight: 650; line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink);
}
.grind-swap { color: var(--muted); }
.grind-founder {
  display: block; margin-top: 14px; font-size: .86rem; font-weight: 400;
  line-height: 1.6; color: var(--muted);
}

/* --- static frames --------------------------------------------------------
   Each caption is pulled up next to its own layer by putting both in one
   two-column row. `display: contents` on the list lets its children join the
   parent grid, so caption and layer sit on the same row without wrapper divs
   that the animated layout would then have to undo. */
@media (min-width: 901px) {
  .grind:not(.is-animated) .grind-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: 40px 48px; }
  .grind:not(.is-animated) .grind-captions,
  .grind:not(.is-animated) .grind-visual { display: contents; }
  .grind:not(.is-animated) .grind-captions > li { grid-column: 1; }
  .grind:not(.is-animated) .grind-layer { grid-column: 2; }
  /* Each caption and its own layer share a row. Auto-placement will not do
     this: it packs sparsely, so once the seven captions have taken rows 1-7 in
     column 1, the cursor never goes back and the layers land in rows 8-14 —
     every caption stacked at the top, every scene stacked below it. The rows
     have to be stated. */
  .grind:not(.is-animated) .grind-captions > li:nth-child(1),
  .grind:not(.is-animated) .grind-visual > .grind-layer:nth-child(1) { grid-row: 1; }
  .grind:not(.is-animated) .grind-captions > li:nth-child(2),
  .grind:not(.is-animated) .grind-visual > .grind-layer:nth-child(2) { grid-row: 2; }
  .grind:not(.is-animated) .grind-captions > li:nth-child(3),
  .grind:not(.is-animated) .grind-visual > .grind-layer:nth-child(3) { grid-row: 3; }
  .grind:not(.is-animated) .grind-captions > li:nth-child(4),
  .grind:not(.is-animated) .grind-visual > .grind-layer:nth-child(4) { grid-row: 4; }
  .grind:not(.is-animated) .grind-captions > li:nth-child(5),
  .grind:not(.is-animated) .grind-visual > .grind-layer:nth-child(5) { grid-row: 5; }
  .grind:not(.is-animated) .grind-captions > li:nth-child(6),
  .grind:not(.is-animated) .grind-visual > .grind-layer:nth-child(6) { grid-row: 6; }
  .grind:not(.is-animated) .grind-captions > li:nth-child(7),
  .grind:not(.is-animated) .grind-visual > .grind-layer:nth-child(7) { grid-row: 7; }
}
/* Positioned in BOTH layouts. The animated rule below makes layers absolute,
   but without it `.hours` — absolute inside the weight layer — has no
   containing block and escapes the section entirely, landing over the trust
   bar further up the page. */
.grind-layer { position: relative; }
.grind:not(.is-animated) .grind-captions > li { margin-bottom: 14px; }
.grind:not(.is-animated) .grind-layer + .grind-layer { margin-top: 8px; }
.grind:not(.is-animated) .grind-drain,
.grind:not(.is-animated) .cursor { display: none; }
/* The pile and the collage are built by grind.js, so with no JS there is
   nothing in them — an empty box reads as a broken frame, so they are dropped
   rather than shown hollow. That leaves the weight frame with only its counter,
   which then has to sit in the flow: absolute inside a now-zero-height layer
   put it above the layer, overlapping the frame before it. */
.grind:not(.is-animated) [data-scene="pile"],
.grind:not(.is-animated) [data-scene="weight"] .collage { display: none; }
.grind:not(.is-animated) .hours { position: static; display: inline-block; }

/* --- animated stage ------------------------------------------------------- */
/* Height in CSS so ScrollTrigger measures the right value when it pins. The
   fallback matters: it is what applies for the frames before grind.js sets
   --grind-header. */
.grind.is-animated .grind-stage {
  display: flex; align-items: center;
  height: calc(100svh - var(--grind-header, 72px));
}
.grind.is-animated .grind-grid { width: 100%; grid-template-columns: 1fr; align-items: center; }
.grind.is-animated .grind-captions { position: relative; min-height: 8.5em; }
.grind.is-animated .grind-captions > li {
  position: absolute; inset: 0 0 auto 0; opacity: 0;
}
.grind.is-animated .grind-visual {
  position: relative; overflow: hidden;
  width: min(100%, 420px); margin: 0 auto; aspect-ratio: 4 / 3;
}
.grind.is-animated .grind-layer {
  position: absolute; inset: 0; opacity: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.grind.is-animated .grind-drain {
  position: absolute; inset: 0; background: var(--grind-drain);
  opacity: 0; pointer-events: none;
}
@media (min-width: 901px) {
  .grind.is-animated .grind-grid { grid-template-columns: 5fr 7fr; gap: 48px; }
  .grind.is-animated .grind-visual { width: 100%; max-width: none; aspect-ratio: 5 / 4; }
  .grind.is-animated .grind-captions { min-height: 7em; }
}

/* On a phone the caption sits above the visual, and a fixed aspect ratio is the
   wrong shape for what is left: 4/3 of a 327px column is 245px, and the
   application form is 372px tall, so the scene was being clipped by the box's
   own overflow. The visual takes whatever height the stage has left instead. */
@media (max-width: 900px) {
  .grind.is-animated .grind-stage { align-items: stretch; }
  .grind.is-animated .grind-grid {
    height: 100%; grid-template-rows: auto 1fr; align-content: stretch;
    padding-block: 16px; gap: 16px;
  }
  .grind.is-animated .grind-visual { aspect-ratio: auto; height: 100%; min-height: 0; }
}

/* The pinned stage is `100svh - header`, which on a short desktop window is
   under 500px — and the application form has eight fields. Inside the animated
   stage everything on paper is tightened so the tallest scene fits without
   being scaled, and the visual box clips whatever still would not. */
.grind.is-animated .paper { font-size: .72rem; padding: 12px; }
/* `width: 100%` is load-bearing: auto side margins on a stretched flex item
   cancel the stretch, and the card collapses to fit-content. */
.grind.is-animated .form-card { width: 100%; max-width: 380px; margin-inline: auto; }
/* Labels go beside their inputs rather than above. Eight stacked rows made the
   card taller than the pinned stage on a short desktop window. */
.grind.is-animated .field { grid-template-columns: 76px 1fr; align-items: center; gap: 7px; }
.grind.is-animated .field > span:first-child { font-size: .6rem; line-height: 1.25; }
.grind.is-animated .paper-head { padding-bottom: 8px; margin-bottom: 9px; }
.grind.is-animated .paper-body, .grind.is-animated .paper-more { gap: 6px; }
.grind.is-animated .paper-more { margin-top: 9px; padding-top: 9px; }
.grind.is-animated .field > b { min-height: 23px; padding: 4px 7px; }
.grind.is-animated .chip { padding: 4px 8px; }
.grind.is-animated .resume-bullets li { padding: 5px 8px; }
.grind.is-animated .file-list { font-size: .68rem; }
.grind.is-animated .letter-card { line-height: 1.55; }
/* Same width as the form card, so the turn lands on a card the same shape
   as the one the grind started with — and so the submit button is a button
   rather than a 570px bar. */
.grind.is-animated .calm-card { width: 100%; max-width: 380px; margin-inline: auto; }

/* --- paper: the generic, slightly tired surfaces of the grind -------------- */
.paper {
  background: var(--grind-paper); border: 1px solid var(--grind-line);
  border-radius: 10px; padding: 16px; color: var(--grind-ink);
  font-size: .8rem; box-shadow: 0 1px 2px rgba(23, 45, 50, .05);
}
.paper-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--grind-line); padding-bottom: 10px; margin-bottom: 12px;
}
.paper-co { font-weight: 700; color: var(--ink); }
.paper-badge {
  font-size: .68rem; font-weight: 700; color: var(--grind-ink);
  background: #fff; border: 1px solid var(--grind-line);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.paper-body, .paper-more { display: grid; gap: 8px; }
.paper-more { margin-top: 12px; border-top: 1px dashed var(--grind-line); padding-top: 12px; }
.paper-sub { font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.field { display: grid; gap: 3px; }
.field > span:first-child { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.field > b {
  display: block; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--grind-line); border-radius: 6px;
  padding: 6px 8px; min-height: 28px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip {
  display: inline-block; align-self: start;
  background: #fff; border: 1px solid var(--grind-line); border-radius: 6px;
  padding: 6px 10px; color: var(--ink); font-weight: 500;
}

/* --- pile ----------------------------------------------------------------- */
.pile-box { position: relative; width: 100%; height: 100%; }
.pile-box .paper {
  position: absolute; left: 50%; top: 50%; width: 82%;
  transform: translate(-50%, -50%); transform-origin: center;
}
/* A clone is scenery: only the top card's text needs to be legible. */
.pile-clone .paper-body, .pile-clone .paper-more { opacity: .55; }

/* --- résumé --------------------------------------------------------------- */
.resume-row { display: grid; gap: 12px; }
@media (min-width: 620px) { .resume-row { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.resume-name { font-weight: 800; color: var(--ink); font-size: .95rem; }
.resume-role { margin-bottom: 10px; }
.resume-swap { color: var(--ink); font-weight: 650; background: #fff5d6; padding: 0 3px; border-radius: 3px; }
.resume-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.resume-bullets li {
  background: #fff; border: 1px solid var(--grind-line); border-radius: 6px;
  padding: 7px 9px; line-height: 1.35;
}
.file-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 5px;
  font-size: .72rem; color: var(--grind-ink);
}
.file-list li {
  background: var(--grind-paper); border: 1px solid var(--grind-line);
  border-radius: 5px; padding: 5px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- letter --------------------------------------------------------------- */
.letter-card { line-height: 1.7; }
.letter-salutation { color: var(--ink); font-weight: 650; margin-bottom: 10px; }
.letter-body b { color: var(--ink); }
.letter-rest {
  height: 8px; margin-top: 10px; border-radius: 4px;
  background: var(--grind-line);
}
.letter-rest.short { width: 58%; }
.caret {
  display: inline-block; width: 1px; height: 1em; margin-left: 2px;
  background: var(--ink); vertical-align: -2px;
  animation: grind-caret 1s step-end infinite;
}
/* The global prefers-reduced-motion rule already kills this animation. */
@keyframes grind-caret { 50% { opacity: 0; } }

/* --- prep ----------------------------------------------------------------- */
.tabstrip {
  background: var(--grind-paper); border: 1px solid var(--grind-line);
  border-radius: 8px 8px 0 0; padding: 7px 9px;
}
.tabcount {
  display: block; font-size: .66rem; font-weight: 700; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--grind-ink);
}
.tabs-row { display: flex; gap: 3px; align-items: stretch; height: 16px; }
.tab {
  flex: 1 1 0; min-width: 0; background: #fff;
  border: 1px solid var(--grind-line); border-bottom: none; border-radius: 4px 4px 0 0;
}
.notes { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 4px 0; }
.note {
  background: #fdf3c9; border: 1px solid #efe2a8; border-radius: 3px;
  padding: 7px 9px; font-size: .72rem; color: #4a4636;
  box-shadow: 0 1px 2px rgba(23, 45, 50, .08);
}

/* --- weight --------------------------------------------------------------- */
.collage { position: relative; width: 100%; height: 100%; }
.collage > * {
  position: absolute; left: 50%; top: 50%; width: 58%;
  transform: translate(-50%, -50%);
}
.hours {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: #fff; border: 1px solid var(--grind-line); border-radius: 8px;
  padding: 7px 11px; font-size: .68rem; color: var(--grind-ink);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.hours b { display: block; font-size: 1.5rem; letter-spacing: -.02em; color: var(--ink); }

/* --- the turn: teal comes back -------------------------------------------- */
.calm-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-md);
}
.calm-card .job { margin-bottom: 12px; }
.calm-checks { margin-bottom: 16px; }
.calm-submit { position: relative; }
.calm-btn {
  display: block; text-align: center; background: var(--midnight); color: #fff;
  border-radius: 10px; padding: 11px 16px; font-weight: 650; font-size: .9rem;
}
/* The ring settles around the button and nothing is clicked. */
.calm-submit.is-ringed .calm-btn { box-shadow: 0 0 0 3px var(--celadon-050), 0 0 0 5px var(--celadon); }
.cursor {
  position: absolute; left: 50%; top: 50%; width: 15px; height: 21px;
  margin: 0; pointer-events: none;
  background: var(--ink);
  clip-path: polygon(0 0, 0 72%, 26% 56%, 44% 96%, 62% 88%, 44% 48%, 72% 46%);
  opacity: 0;
}
.calm-note {
  margin-top: 12px; text-align: center; font-size: .78rem; color: var(--muted);
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1040px) and (min-width: 901px) {
  .plans { grid-template-columns: repeat(2, 1fr); max-width: 740px; }
}
@media (max-width: 900px) {
  .hero-grid, .split, .faq-grid, .feature { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .plans { grid-template-columns: 1fr; max-width: 460px; }
  .nav ul { display: none; }
  section { padding: 60px 0; }
  .hero { padding: 48px 0 40px; }
  .trust ul { flex-direction: column; gap: 10px; }
  .feature-left, .feature-right { padding: 28px; }
}

/* ------------------------------------------------------------------ legal
   privacy.html and terms.html. One column, generous measure, no animation:
   these are read carefully or not at all, and a policy that moves while you
   read it is a policy nobody finishes. */
.legal { padding: 56px 0 80px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); margin-bottom: 10px; }
.legal .dates { color: var(--muted); font-size: .92rem; margin: 0 0 8px; }
.legal .lede { font-size: 1.06rem; color: var(--ink); margin: 20px 0 0; }
.legal h2 {
  font-size: 1.32rem; font-weight: 750; margin: 44px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1rem; font-weight: 700; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--ink); line-height: 1.68; }
.legal p { margin: 12px 0; }
.legal ul, .legal ol { margin: 12px 0; padding-left: 22px; }
.legal li { margin: 7px 0; }
.legal a { color: var(--celadon-700); }
.legal strong { font-weight: 650; }

/* The promises worth not burying. */
.legal .promise {
  background: var(--celadon-050); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; margin: 22px 0;
}
.legal .promise ul { margin: 8px 0 0; }
.legal .promise p:first-child { margin-top: 0; }
.legal .promise p:last-child { margin-bottom: 0; }

/* Something the reader should not skim past — a disclosure that costs us
   something to make. Amber rather than red: it is candour, not an error. */
.legal .callout {
  background: #FDF8EC; border: 1px solid #E8D9B4; border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: 18px 22px; margin: 22px 0;
}
.legal .callout p:first-child { margin-top: 0; }
.legal .callout p:last-child { margin-bottom: 0; }

.legal table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
.legal th, .legal td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal th { font-weight: 650; color: var(--ink); background: var(--warm-white); }
.legal td { color: var(--ink); }

.legal .toc { margin: 28px 0 0; padding: 18px 22px; background: var(--warm-white);
  border: 1px solid var(--line); border-radius: var(--radius); }
.legal .toc ol { margin: 8px 0 0; }
.legal .toc li { margin: 4px 0; }

@media (max-width: 640px) {
  .legal table, .legal thead, .legal tbody, .legal th, .legal td, .legal tr { display: block; }
  .legal thead { display: none; }
  .legal tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .legal td { border: 0; padding: 4px 0; }
  .legal td::before { content: attr(data-label) " — "; font-weight: 650; }
}