/* ==========================================================================
   Resumea design system
   Premium, calm, precise. One accent colour, one radius scale, one type scale.
   ========================================================================== */

:root {
  --ink: #14171a;
  --ink-2: #3b4249;
  --muted: #5d6670;
  --line: #e5e6e3;
  --line-strong: #d3d5d1;
  /* Boundaries of real controls must clear WCAG 1.4.11 (3:1). Decorative
     card borders keep --line / --line-strong. */
  --line-control: #929390;
  --bg: #fbfbf9;
  --surface: #ffffff;
  --surface-2: #f5f5f2;
  /* The accent is stone, not blue. #c8c6c0 is the shade the brand is built on,
     but at 1.7:1 on white it cannot carry a button, a focus ring or a slider,
     so the interactive accent is the same hue taken down to where it reads:
     6.9:1 against white, which clears AA for text and 1.4.11 for controls. */
  --accent: #5f5a51;
  --accent-dark: #47433c;
  --accent-soft: #efeeed;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --ok: #067647;
  --ok-soft: #ecfdf3;
  --warn-soft: #fffaeb;
  --warn-ink: #8a5a00;   /* 5.9:1 on --surface */
  --stone: #c8c6c0;      /* Creative Vision's deeper ground, reused for progress */
  --rail-w: 196px;       /* the rail column, and what the name field lines up with */

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 104px;

  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-md: 15.5px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-4xl: 62px;

  --shadow-sm: 0 1px 2px rgba(20, 23, 26, .05);
  --shadow-md: 0 2px 6px rgba(20, 23, 26, .06), 0 12px 28px rgba(20, 23, 26, .06);
  --shadow-lg: 0 4px 12px rgba(20, 23, 26, .07), 0 28px 64px rgba(20, 23, 26, .10);

  --header-h: 64px;
  --max: 1180px;
  /* Font budget: exactly three concrete families ship.
     1. Inter        - the whole interface (one self-hosted variable webfont)
     2. Helvetica    - Consulting Classic + Modern Professional documents
     3. Times        - Executive Classic documents
     The two document families are PDF base-14 fonts, so they are never
     downloaded and their metrics match the export exactly. */
  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.018em; line-height: 1.18; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.visually-hidden, .skip-link:not(:focus) {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; z-index: 60; top: 10px; left: 10px;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none;
}
.hidden { display: none !important; }

/* ==========================================================================
   Buttons and links
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: 10px 18px; min-height: 42px;
  font-size: var(--fs-sm); font-weight: 550; letter-spacing: -0.005em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-control); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { border-color: #90938e; background: #fff; }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }

.btn-sm { min-height: 34px; padding: 6px 12px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-block { width: 100%; }

.link-button {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.link-button:hover { color: var(--ink); text-decoration-color: currentColor; }
.link-button.danger { color: var(--danger); }

.icon-button {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm);
  cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1;
}
.icon-button:hover:not([disabled]) { color: var(--ink); border-color: var(--line-strong); }
.icon-button[disabled] { opacity: .45; cursor: not-allowed; }

/* A drawn icon is a guess until you click it. The browser's own tooltip takes
   about a second to appear and is easy to miss entirely, so the label the
   screen reader already has is drawn as well - one string, two audiences, and
   nothing to keep in step. Appears on keyboard focus too. */
.has-tip { position: relative; }
.has-tip::after {
  content: attr(aria-label);
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  z-index: 20; padding: 5px 9px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; font-size: var(--fs-xs); font-weight: 500;
  line-height: 1.3; white-space: nowrap; letter-spacing: 0;
  opacity: 0; pointer-events: none; transition: opacity .12s ease .2s;
}
.has-tip-above::after { top: auto; bottom: calc(100% + 7px); }
.has-tip:hover::after, .has-tip:focus-visible::after { opacity: 1; }
/* A control that cannot be used says so by looking unavailable; a tooltip on
   top of that is noise. */
.has-tip[disabled]:hover::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .has-tip::after { transition: none; } }
.icon-button.danger:hover { color: var(--danger); border-color: #f0c6c2; background: var(--danger-soft); }

.back-link {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: var(--muted); font-size: var(--fs-sm); font-weight: 500;
}
.back-link:hover { color: var(--ink); }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 550; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.field label small { font-weight: 400; color: var(--muted); }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input:not([type]), textarea, select {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-control); border-radius: var(--r-md);
  padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
textarea { resize: vertical; min-height: 68px; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px;
}
input::placeholder, textarea::placeholder { color: #71757b; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(95 90 81 / .16); }
input[disabled] { background: var(--surface-2); color: var(--muted); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
/* A label long enough to wrap - "Professional headline" with its optional tag -
   made its own field taller and left the box below the one beside it. The cells
   are already the same height; pushing the control to the bottom of its cell
   puts the boxes on one line whatever the labels above them do. */
.field-grid > .field > input,
.field-grid > .field > select,
.field-grid > .field > textarea { margin-top: auto; }
.field-dates { grid-column: 1 / -1; }
.date-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.date-row span { color: var(--muted); }

.switch { display: inline-flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--accent); }
.switch.small { font-size: var(--fs-xs); margin-top: 6px; }

.form-notice { font-size: var(--fs-xs); min-height: 18px; color: var(--muted); }
.form-notice.error { color: var(--danger); }
.form-notice.success { color: var(--ok); }

.pair-row { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.pair-row.triple { grid-template-columns: 1.4fr 1fr 80px auto; }

.chip-input { display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips em { color: var(--muted); font-size: var(--fs-sm); font-style: normal; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 100px; padding: 4px 6px 4px 11px; font-size: var(--fs-xs);
}
.chip button { border: 0; background: none; cursor: pointer; color: var(--muted); line-height: 1; padding: 0 2px; }
.chip button:hover { color: var(--danger); }

.add-button {
  width: 100%; margin-top: 10px; padding: 10px; cursor: pointer;
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500;
}
.add-button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ==========================================================================
   Header / footer
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  height: var(--header-h); padding: 0 var(--s-5);
  background: rgba(251, 251, 249, .86); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 650; font-size: var(--fs-xl); letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.site-nav { display: flex; align-items: center; gap: var(--s-4); }
.site-nav a, .site-nav .link-button { font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }

.avatar-button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--ink); color: #fff; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.account-menu {
  position: absolute; top: calc(var(--header-h) - 6px); right: var(--s-5); z-index: 45;
  min-width: 210px; padding: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.account-menu-email { padding: 8px 10px 10px; font-size: var(--fs-xs); color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-wrap: anywhere; }
.account-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-2);
}
.account-menu button:hover { background: var(--surface-2); color: var(--ink); }

.site-footer {
  max-width: var(--max); margin: var(--s-8) auto 0; padding: var(--s-7) var(--s-5) var(--s-5);
  border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
/* One row: the copyright line and the legal links, nothing else. The brand
   block and the product column were removed - the header already carries both,
   and repeating them at the foot of every page earned no one anything. */
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); font-size: var(--fs-sm); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: flex-end; }
.footer-legal a { color: var(--ink-2); }
.footer-legal a[aria-current="page"] { color: var(--ink); }

/* ==========================================================================
   Views
   ========================================================================== */

.view { display: none; }
.view.is-active { display: block; }

/* ==========================================================================
   Landing
   ========================================================================== */

.eyebrow {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.hero {
  max-width: 900px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-6); text-align: center;
}
.hero h1 {
  margin: var(--s-3) 0 var(--s-4);
  font-size: clamp(38px, 7.2vw, var(--fs-4xl));
  letter-spacing: -0.035em; line-height: 1.03; font-weight: 620;
}
.hero-sub {
  max-width: 620px; margin: 0 auto var(--s-6);
  font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.5;
}

.starter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); text-align: left; }
.starter.compact { max-width: 720px; margin: var(--s-5) auto 0; }
.starter-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); cursor: pointer; min-height: 168px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm); text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.starter-card:hover, .starter-card:focus-visible {
  border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.starter-icon {
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink);
  background: var(--surface-2); border-radius: var(--r-md);
}
.starter-icon svg { width: 20px; height: 20px; }
.starter-body { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.starter-body strong { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }
.starter-body small { font-size: var(--fs-sm); color: var(--muted); }
.starter-cta { font-size: var(--fs-sm); font-weight: 550; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }
.starter-card:hover .starter-cta b { transform: translateX(3px); }
.starter-cta b { font-weight: 500; transition: transform .16s ease; }


/* Compact social proof. Grayscale, low contrast and slow on purpose: it should
   register in peripheral vision without competing with the two starter cards. */
.logo-strip { margin-top: var(--s-5); }
.logo-strip-label {
  /* Original treatment restored. The colour is --muted rather than the previous
     #9aa1a9, which measured 2.52:1 against the page and failed WCAG AA for text. */
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* Trademark attribution for the employer logos above. */
.logo-marquee {
  /* One source for the spacing. The keyframe below travels exactly one track
     width plus this gap, so a breakpoint that changes the spacing without
     changing the travel leaves the loop short and the seam visibly jumps -
     which is what 22px here against a hardcoded 30px there was doing. */
  --logo-gap: 30px;
  position: relative; margin-top: var(--s-3); display: flex; gap: var(--logo-gap); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logo-track {
  /* flex-shrink:0 is load-bearing: if the two tracks compress to fit the
     container, the loop seam overlaps instead of butting up cleanly. */
  display: flex; align-items: center; gap: var(--logo-gap); flex: 0 0 auto;
  animation: logo-scroll 64s linear infinite;
}
/* Sized by height, not by slot. A fixed box suits wordmarks and strands a
   square mark in the middle of it: Apple painted 18px inside a 92px slot, so
   the line read as a hole with a small logo in it. Height is the shared
   measure; the gap does the spacing. */
.logo-track img {
  height: 22px; width: auto; max-width: 108px; object-fit: contain; flex: 0 0 auto;
  filter: grayscale(1); opacity: .55;
}
/* A round or square mark reads far smaller than a wordmark set to the same
   height, because the wordmark is all cap-height and the mark is not. These
   three get the extra height that makes them weigh the same on the line. */
.logo-track img[src*="apple"],
.logo-track img[src*="nestle"],
.logo-track img[src*="mercedes"] { height: 30px; }
@keyframes logo-scroll { to { transform: translateX(calc(-100% - var(--logo-gap))); } }

@media (prefers-reduced-motion: reduce) {
  .logo-marquee { flex-wrap: wrap; justify-content: center; gap: 30px 40px; mask-image: none; -webkit-mask-image: none; }
  .logo-track { flex-wrap: wrap; justify-content: center; gap: 30px 40px; animation: none; }
  .logo-track[aria-hidden="true"] { display: none; }
}

.proof { max-width: var(--max); margin: 0 auto; padding: var(--s-7) var(--s-5); }
.proof-stage {
  display: flex; justify-content: center; padding: var(--s-6) var(--s-4) 0;
  background: linear-gradient(180deg, var(--surface-2), rgba(245, 245, 242, 0));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.proof-frame {
  width: min(560px, 100%); position: relative; overflow: hidden;
  max-height: 430px;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.proof-switch { display: flex; justify-content: center; gap: 6px; margin-top: var(--s-5); flex-wrap: wrap; }
.proof-switch button {
  padding: 7px 14px; cursor: pointer; font-size: var(--fs-xs); font-weight: 550;
  background: transparent; border: 1px solid transparent; border-radius: 100px; color: var(--muted);
}
.proof-switch button:hover { color: var(--ink); }
.proof-switch button.is-active { background: var(--surface); border-color: var(--line-strong); color: var(--ink); box-shadow: var(--shadow-sm); }
.proof-note { text-align: center; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }

.how { max-width: var(--max); margin: 0 auto; padding: var(--s-8) var(--s-5); }
/* The hero is centred, so every section below it is centred too. Mixing a
   centred hero with left-aligned sections is what made the page look untidy. */
.how, .reasons, .pricing, .faq { text-align: center; }
.how h2, .reasons h2, .pricing h2, .faq h2 { font-size: var(--fs-2xl); letter-spacing: -0.03em; }
.section-sub { margin: var(--s-2) auto 0; max-width: 56ch; color: var(--muted); font-size: var(--fs-md); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); text-align: left; }
.steps li { display: flex; flex-direction: column; gap: 7px; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.steps span {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 600;
}
.steps strong { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; }
.steps p { color: var(--muted); font-size: var(--fs-sm); }

/* Six reasons, as six separate boxes on the brand ground. Each one is built
   the way the template preview at the top of the page is: a piece of the real
   product standing on a light ground, ending in a fade rather than on a line. */
.reasons { max-width: var(--max); margin: 0 auto; padding: var(--s-7) var(--s-5); }
/* Held to the width of the price cards above it. The section container is the
   full 1180 like How it works, but a 1132-wide block directly under a 1000-wide
   row of prices reads as a section that has slipped its margins. */
.reason-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4); margin: var(--s-5) auto 0; max-width: 1000px; text-align: left;
}
/* Nothing moves on hover. These are six things to read, not six things to
   press, and a card that lifts under the pointer promises a click that is not
   there. */
.reason-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-5); background: var(--surface-2); border-radius: var(--r-lg);
}
/* One control out of the app, small, standing on the floor of a slot of fixed
   height - so the six headings line up across a row however tall each piece is. */
.reason-figure {
  display: flex; align-items: flex-end; justify-content: center;
  height: 88px; margin-bottom: var(--s-4);
}
/* Sharp corners, no frame, and the bottom dissolved into the card - the same
   fade the template preview ends with. Left as the app draws it: blended into
   the ground instead, the white paper went grey and every piece looked like it
   was behind smoke. */
.reason-shot {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 88px;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
.reason-card strong { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.02em; }
.reason-card p { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 1040px) { .reason-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; } }

.pricing { max-width: var(--max); margin: 0 auto; padding: var(--s-8) var(--s-5); }
/* The grid is narrower than the section, so it needs its own centring —
   without the auto margins it sat against the left edge. */
.pricing-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4); margin: var(--s-6) auto 0; max-width: 760px; text-align: left;
}
.price-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; }
.price-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.price-card.is-featured { border-color: var(--ink); box-shadow: var(--shadow-md); background: linear-gradient(180deg, var(--surface), #fafaf6); }
.price-badge {
  position: absolute; top: -12px; right: 18px; padding: 5px 10px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 650; letter-spacing: .03em;
}
.price-kicker { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 4px; }
.price strong { font-size: 38px; font-weight: 600; letter-spacing: -0.035em; }
.price-period { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 900px) { .pricing-grid-3 { grid-template-columns: 1fr; max-width: 460px; } }
.price-line { min-height: 42px; font-size: var(--fs-sm); font-weight: 550; line-height: 1.5; color: var(--ink-2); }
.price-card ul { display: flex; flex-direction: column; gap: 10px; margin: var(--s-2) 0 var(--s-5); flex: 1; }
.price-card li { position: relative; padding-left: 23px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.price-card li::before { content: '✓'; position: absolute; left: 1px; top: 0; color: var(--ink); font-size: 13px; font-weight: 700; }

.faq { max-width: var(--max); margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-9); }
/* The section now spans the full grid like .how and .pricing, but a question
   list 1180px wide is unreadable, so the list keeps its own measure and is
   centred inside it. */
.faq-list {
  max-width: 860px; margin: var(--s-6) auto 0;
  border-top: 1px solid var(--line); text-align: left;
}
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: 20px 0; cursor: pointer; font-weight: 550; font-size: var(--fs-lg); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding-bottom: 20px; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.65; max-width: 68ch; }

/* ==========================================================================
   Focus screens (job intake, upload)
   ========================================================================== */

.focus-screen { max-width: 720px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-9); }
.focus-block { margin-top: var(--s-6); }
.focus-block h1 { font-size: clamp(28px, 4.6vw, 40px); letter-spacing: -0.032em; }
.url-form { display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.url-form input { min-height: 52px; font-size: var(--fs-lg); border-radius: var(--r-md); padding: 12px 16px; }
.url-form .btn { min-height: 52px; padding: 0 22px; }
.focus-hint { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.focus-hint.error { color: var(--danger); }
.focus-hint.success { color: var(--ok); }
#jobTextFallback:not(:empty) { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.focus-actions { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); flex-wrap: wrap; }

.reading-skeleton { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s-6); }
.reading-skeleton span { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), #ececea, var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.reading-skeleton span:nth-child(2) { width: 74%; }
.reading-skeleton span:nth-child(3) { width: 52%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.found-badge { color: var(--ok); font-size: var(--fs-sm); font-weight: 600; }
/* A posting the board would not let us read is not a find. The badge has to
   stop saying so, or the empty card underneath reads as the whole job. */
.found-badge-partial { color: var(--warn-ink); }
.field-optional { font-weight: 400; color: var(--muted); }
.found-sub { margin-top: 6px; color: var(--muted); font-size: var(--fs-md); }
.job-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4);
  margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.job-summary div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.job-summary span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.job-summary strong { font-size: var(--fs-sm); font-weight: 550; overflow-wrap: anywhere; }

.confirm-box {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5);
  background: var(--warn-soft); border: 1px solid #f5e3b3; border-radius: var(--r-lg);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.confirm-box p { font-size: var(--fs-sm); color: #6b4f10; }

.job-details { margin-top: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.job-details summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.job-details h4 { margin-top: var(--s-4); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.job-details ul { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.job-details li { position: relative; padding-left: 16px; font-size: var(--fs-sm); color: var(--ink-2); }
.job-details li::before { content: '·'; position: absolute; left: 4px; color: var(--muted); }
.job-raw {
  margin-top: 8px; max-height: 260px; overflow: auto; white-space: pre-wrap;
  font-family: inherit; font-size: var(--fs-xs); color: var(--muted);
  background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-4);
}

.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
  margin-top: var(--s-6); padding: var(--s-8) var(--s-5); cursor: pointer; text-align: center;
  background: var(--surface); border: 1.5px dashed var(--line-control); border-radius: var(--r-xl);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
/* The file input inside is visually hidden, so without this the only
   keyboard route to uploading a CV gives no sign it has been reached. */
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); color: var(--ink); font-size: 19px;
}
.dropzone-copy { display: flex; flex-direction: column; gap: 3px; }
.dropzone-copy strong { font-size: var(--fs-lg); font-weight: 600; }
.dropzone-copy small { color: var(--muted); font-size: var(--fs-sm); }

/* ==========================================================================
   CV document rendering (shared by studio, workspace, showcase)
   ========================================================================== */

/* On the page rather than above it. In the flow it pushed the CV down the
   moment it appeared, so answering the question moved the very thing the
   question was about. It floats over the top of the document instead, and the
   page does not shift whether it is there or not. */
.cv-stage-wrap { position: relative; }
.fit-offer {
  position: absolute; z-index: 6; top: 28px; left: 50%; transform: translateX(-50%);
  width: min(360px, calc(100% - 32px)); padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); text-align: left;
}
/* Not interested, for now. */
.fit-offer-close {
  position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: var(--r-sm);
  font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer;
}
.fit-offer-close:hover { color: var(--ink); background: var(--surface-2); }
.fit-offer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fit-offer-head { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.fit-offer-why { margin-top: 4px; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.fit-offer .btn { margin-top: var(--s-3); width: 100%; }
.cv-stage { position: relative; width: 100%; overflow: auto; }
.cv-pages {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%) scale(var(--cv-scale, 1));
  transform-origin: top center;
}
/* A template offered in two grounds shows both at once: the deeper one set
   back and to the left, the paler one in front. Offsets are in points, so they
   scale with the page rather than drifting at different widths. */
.cv-stack { position: relative; }
.cv-stack-back { position: absolute; left: 0; }
.cv-stack-back .cv-page { box-shadow: 0 0 0 1px rgba(20, 23, 26, .06), 0 8px 22px rgba(20, 23, 26, .09); }
.cv-stack-front { position: relative; }

.cvp-rect { position: absolute; display: block; }
/* The photo frame clips; the image inside it is what moves and scales. */
.cvp-img { position: absolute; display: block; overflow: hidden; }
.cvp-img-inner { display: block; }
.cvp-circle { position: absolute; display: block; box-sizing: border-box; border-radius: 50%; }
.cv-page[data-font="helvetica"] { font-family: Helvetica, Arial, 'Liberation Sans', sans-serif; }
.cv-page[data-font="times"] { font-family: 'Times New Roman', Times, 'Liberation Serif', serif; }
.cv-page {
  position: relative; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20, 23, 26, .07), 0 10px 30px rgba(20, 23, 26, .10);
  margin-bottom: 26px;
}
.cv-page:last-child { margin-bottom: 0; }
.cvp-t { position: absolute; white-space: pre; line-height: 1; }
.cvp-rule { position: absolute; display: block; }
.cv-stage [data-ref] { cursor: pointer; }
/* Typing on the page itself. The box is drawn where the line was, in the same
   face and size, so the text does not move when it is picked up - only the ring
   and the tint say that it is now a field. */
.cvp-edit {
  position: absolute; z-index: 4; margin: 0; padding: 0; resize: none; overflow: hidden;
  border: 0; border-radius: 2pt; outline: 2px solid var(--accent); outline-offset: 2px;
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  white-space: pre-wrap; word-break: break-word;
  /* The form textarea is floored at 68px and padded to match the editor panel.
     On the page it has to be exactly as tall as the words it holds, or a
     one-line role opens a box five lines deep. */
  min-height: 0; box-shadow: none;
}
.cvp-edit:focus { outline: 2px solid var(--accent); box-shadow: none; }
.cvp-edit::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.cv-stage [data-ref]:hover { background: rgb(200 198 192 / .30); box-shadow: 0 0 0 2px rgb(200 198 192 / .30); }
.cv-stage-note {
  display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--muted);
}
.layout-warning { color: var(--danger); font-weight: 500; }
/* Says the page below is a worked example, not the user's own CV. */
.stage-example {
  margin-left: 10px; padding: 1px 8px; border-radius: 100px;
  background: var(--stone); color: var(--ink); font-size: var(--fs-xs); font-weight: 600;
}

/* ==========================================================================
   Resume Studio
   ========================================================================== */

.studio { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; }
/* The bar carries three things: where you came from, which template the page
   uses, and what to do next. The template switch is centred on its own row so
   it never competes with the buttons for width - in Czech the three groups
   together need 1344px, more than most laptops have. Above that they share one
   row and the switch centres between them. */
.studio-bar {
  position: sticky; top: var(--header-h); z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(251, 251, 249, .93); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.studio-bar .template-switch.wide { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 1041px) and (max-width: 1359px) {
  .studio-bar .template-switch.wide { margin-right: 158px; }
}
@media (min-width: 1360px) {
  .studio-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .studio-bar .template-switch.wide { grid-column: 2; grid-row: 1; }
  /* Centred on the CV, not on the bar. The studio grid is asymmetric - a 196px
     rail on the left, a 380px editor on the right - so the page sits half that
     difference left of centre, and the switch follows it there. */
  .studio-bar .template-switch.wide { margin-right: 184px; }
}
/* Below 1240 the rail and editor narrow, so the offset narrows with them. */
@media (min-width: 1360px) and (max-width: 1420px) {
  .studio-bar .template-switch.wide { margin-right: 158px; }
}
.studio-bar-main { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
/* The name is the leftmost thing on the bar, so it lines up with the rail
   underneath instead of being indented behind a link that is no longer there. */
.studio-title { min-width: 0; padding-left: var(--s-2); }
/* Scoped to its container to outrank the base input rule, which sets every
   untyped input to 100% and would otherwise decide this one's width. It runs to
   where the progress bar ends: the rail's width, plus the 8px by which the
   grid's padding exceeds the bar's. */
.studio-title .title-input {
  border: 1px solid transparent; background: transparent; padding: 3px 8px; margin-left: -8px;
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em;
  width: min(calc(var(--rail-w) + 8px), 40vw);
}
.title-input:hover { border-color: var(--line); }
.studio-context { font-size: var(--fs-xs); color: var(--muted); padding-left: 1px; }
.studio-bar-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; }
/* The two history arrows read as one control, so they sit tighter to each
   other than to the save state beside them. */
.history-switch { display: inline-flex; align-items: center; gap: 2px; }
.history-switch .icon-button svg { stroke-width: 1.6; }

.save-state { font-size: var(--fs-xs); color: var(--muted); min-width: 54px; }
/* Saving is the studio's normal state, not an achievement. Green read as
   a result the reader had earned, and it was said twice over. */
.save-state.saved { color: var(--muted); }
.save-state.error { color: var(--danger); }

/* The marketing links belong to the landing page. Inside the studio, the
   workspace and the signed-in workspace they are noise, so the header keeps
   only the language picker and the account controls. */
body:not([data-view="landing"]) .site-nav a[data-nav-landing] { display: none; }

.template-switch { display: inline-flex; background: var(--surface-2); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.template-switch button {
  border: 0; background: none; cursor: pointer; border-radius: var(--r-sm);
  padding: 6px 11px; font-size: var(--fs-xs); font-weight: 550; color: var(--muted);
}
.template-switch button:hover { color: var(--ink); }
.template-switch button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* The template switch is the control over how the page looks, so it is named in
   full and centred on the bar rather than tucked in beside Done. */
.template-switch.wide {
  display: flex; justify-content: center; flex-wrap: wrap;
  margin: 0 auto; width: fit-content; max-width: 100%;
  padding: 4px; gap: 3px; border: 1px solid var(--line);
}
.template-switch.wide button {
  padding: 8px 9px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.template-switch.wide button.is-active { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
@media (min-width: 1540px) {
  .template-switch.wide button { padding: 9px 16px; font-size: var(--fs-sm); }
}
/* Narrow enough that the four names cannot sit side by side whatever the
   padding: they share the width instead and wrap if they still must. */
@media (max-width: 620px) {
  .template-switch.wide { width: 100%; }
  .template-switch.wide button { flex: 1 1 auto; padding: 8px 4px; }
}

.studio-mobile-tabs { display: none; }

.studio-grid {
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) 380px;
  gap: var(--s-5); align-items: start;
  padding: var(--s-5); max-width: 1560px; margin: 0 auto; width: 100%;
}
/* The rail is the shape of the job: six sections, in order, with how far you
   have got shown once at the top rather than inferred from eight badges. */
.studio-rail { position: sticky; top: calc(var(--header-h) + 74px); }
.rail-title {
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2);
}
.rail-count { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.rail-progress {
  margin-top: 10px; height: 6px; border-radius: 100px; overflow: hidden;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.rail-progress i { display: block; height: 100%; background: var(--stone); transition: width .22s ease; }

.step-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
/* One continuous line down the numbers, drawn behind them, so the six read as
   a single route rather than six unrelated buttons. */
.step { position: relative; }
.step::before {
  content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 1.5px;
  background: var(--line-strong);
}
.step:first-child::before { top: 22px; }
.step:last-child::before { bottom: calc(100% - 22px); }
.step-button {
  position: relative; display: flex; align-items: flex-start; gap: var(--s-3);
  padding: 8px 10px 8px 8px; margin-left: -8px; width: calc(100% + 8px);
  cursor: pointer; text-align: left;
  background: none; border: 0; border-radius: var(--r-md); font: inherit; color: inherit;
}
.step-button:hover .step-name { color: var(--ink); }
.step-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step-mark {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
}
.step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 5px; }
.step-name { font-size: var(--fs-sm); font-weight: 550; color: var(--ink-2); }
.step-state { font-size: var(--fs-xs); color: var(--muted); }

/* The one optional step. It is about the vacancy rather than the person, so it
   is set apart: the mark from the Resumea logo, and the brand stone rather than
   the plain ring the required steps carry. The ring is drawn at the weight of
   the line running through it - at 2px it was the heaviest thing on a rail of
   1.5px strokes, which read as a border rather than as part of the route. */
.step.is-optional .step-mark { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--stone); color: var(--ink); }
/* The star straddles the ring rather than floating outside it: the outline runs
   through its middle. The mark is 34px across, so the 45-degree point of the
   circle is at (17 + 17/root2, 17 - 17/root2) = (29.0, 5.0) from the top-left
   corner - and these four numbers put the centre of the 15x16 star box there. */
.step.is-optional .step-mark .spark {
  position: absolute; top: -3px; right: -2.5px; width: 15px; height: 16px; color: var(--stone);
}
/* The step you are standing on is black whichever kind it is; the star is what
   marks this one out, not a different colour for being current. */
.step.is-optional.is-progress .step-mark { background: var(--ink); box-shadow: none; color: #fff; }
.step.is-optional.is-progress .step-mark .spark { color: var(--stone); }
/* Finished: the star takes the colour of the tick beside it, so the two read as
   one mark rather than a tick with something stuck to it. */
.step.is-optional.is-done .step-mark .spark { color: var(--ink); }
.step.is-optional .step-state { color: var(--ink-2); }

/* The tailoring panel. The advert is shown before anything is changed, because
   the user is being asked to accept edits on the strength of it. */
.tailor-link { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.tailor-paste summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); padding: 6px 0; }
.tailor-paste textarea { width: 100%; margin-bottom: var(--s-3); }
.job-card {
  margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; gap: 6px;
}
.job-card > strong { font-size: var(--fs-md); }
.job-card > small { color: var(--muted); }
.job-card .salary-rows { margin-top: var(--s-2); }
.job-card .job-details summary { cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); padding: 4px 0; }
.job-card .job-raw { max-height: 220px; overflow: auto; white-space: pre-wrap; font-size: var(--fs-xs); color: var(--ink-2); }
.job-card .link-button { align-self: flex-start; margin-top: 4px; }
.tailor-count { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-sm); color: var(--ink-2); }

.step.is-done .step-mark { background: var(--stone); box-shadow: none; color: var(--ink); }
.step.is-done .step-name { color: var(--ink); }
.step.is-progress .step-mark { background: var(--ink); box-shadow: none; color: #fff; }
.step.is-progress .step-name { color: var(--ink); font-weight: 650; }
/* The step you are on is the one thing on the rail with a surface of its own.
   The panel is the only thing that changes: the circle and the text stay in the
   column they are in on every other step, so the rail does not jump sideways as
   you walk down it. The mark used to be pulled 8px left here - compensation for
   left padding that had already been removed - which is exactly the jump.
   The panel reaches past the circle through padding every step carries, undone
   by a matching negative margin, so the content sits at the same x throughout. */
.step.is-progress .step-button { background: var(--surface); box-shadow: var(--shadow-sm); }

/* The legal pages carry the same furniture as the rest of the site, so a
   footer link is not a dead end for anyone not reading in English. The picker
   is a <details> of plain links rather than a scripted menu: a legal notice has
   to work with JavaScript disabled, and each language is its own URL. */
.legal-header-end { display: flex; align-items: center; gap: var(--s-3); }
.legal-lang { position: relative; }
.legal-lang > summary {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-2); list-style: none;
}
.legal-lang > summary::-webkit-details-marker { display: none; }
.legal-lang > summary:hover { background: var(--surface-2); color: var(--ink); }
.legal-lang[open] > summary { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.legal-lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  width: max-content; max-width: min(420px, calc(100vw - 32px));
  padding: 8px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.legal-lang-menu a {
  display: block; padding: 7px 11px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none;
}
.legal-lang-menu a:hover { background: var(--surface-2); color: var(--ink); }
.legal-lang-menu a[aria-current="true"] { background: var(--stone); color: var(--ink); font-weight: 550; }

/* Language picker: names in their own script, no flags, no codes. */
.lang-picker { position: relative; }
.lang-button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm); color: var(--ink-2);
}
.lang-button:hover { background: var(--surface-2); color: var(--ink); }
.lang-button[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(430px, calc(100vw - 32px));
  padding: var(--s-4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); text-align: left;
}
.lang-menu-title {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.lang-menu-title + .lang-grid { margin: 8px 0 var(--s-4); }
.lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.lang-grid:last-child { margin-bottom: 0; }
.lang-option {
  padding: 8px 10px; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm); color: var(--ink-2);
}
.lang-option:hover { background: var(--surface-2); color: var(--ink); }
.lang-option.is-selected { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 550; }
@media (max-width: 560px) {
  /* The picker is not the rightmost thing in the header - the account button is
     - so a menu anchored right: 0 to the picker and nearly as wide as the
     screen hangs off the LEFT edge: at 375px it started at -79 and cut "English"
     in half. On a phone it belongs to the screen, not to the button, with a
     gutter each side and room to scroll on a short one. */
  .lang-menu {
    position: fixed; top: 66px; left: var(--s-4); right: var(--s-4); width: auto;
    max-height: calc(100vh - 82px); max-height: calc(100dvh - 82px); overflow-y: auto;
  }
 .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lang-button span { display: none; } }

/* Above the CV: which shade the sidebar uses, how far in you are zoomed, and
   a way back to seeing the whole page. */
/* The ground switch is the tallest thing this bar can hold, and only Creative
   Vision brings it - so without a floor the bar grew by 3px when that template
   was chosen and the page under it stepped down. Same reason as .ws-ground-row
   on the finished page: the CV must not move when the template does. */
.canvas-bar {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 38px; margin-bottom: var(--s-4); flex-wrap: wrap;
}
.ground-switch { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-2); border-radius: var(--r-md); }
/* The list heading carries an action and, once the list has anything in it, a
   way to clear the lot. */
.head-actions { display: flex; align-items: center; gap: var(--s-3); }

.ground-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm); font: inherit;
  font-size: var(--fs-xs); font-weight: 550; color: var(--muted);
}
/* The ring sits outside the fill. Drawn inset on a 14px square it covered
   most of the swatch, so the colour the chip showed was not the colour it
   stood for - picking it off the screen gave the wrong value. */
.ground-chip i { width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1px rgb(20 23 26 / .16); }
.ground-chip:hover { color: var(--ink); }
.ground-chip.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
/* The preview, opened out. The control sits with the page count rather than in
   the toolbar, where the zoom already lives - it is about this page, not about
   how the studio is set up. */
/* Real screens of the product under each step. Plain rectangles: a border, a
   radius and a shadow made three little windows out of what should read as
   three pictures. */
.step-shot { display: block; width: 100%; height: auto; margin-top: var(--s-4); background: var(--surface); }

.cv-stage-foot { display: flex; align-items: center; gap: var(--s-3); }
.cv-stage-foot .cv-stage-note { flex: 1; text-align: center; margin: 0; }
.icon-button {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--ink-2);
}
.icon-button svg { width: 17px; height: 17px; }
.icon-button:hover { background: var(--surface-2); color: var(--ink); }
.studio-canvas:fullscreen { background: var(--surface-2); padding: var(--s-5); overflow: auto; }
.studio-canvas:fullscreen .cv-stage { display: grid; place-items: start center; }

.zoom-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--r-md); }
.zoom-switch button {
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm); font-size: var(--fs-md); line-height: 1; color: var(--ink-2);
}
.zoom-switch button:hover { background: var(--surface); }
.zoom-switch output {
  min-width: 48px; text-align: center; font-size: var(--fs-xs); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* The foot of every section: where you have been, that nothing is lost, and
   the one thing to do next. */
.section-eyebrow {
  margin-bottom: var(--s-3); font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.section-nav {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.section-nav .btn-primary { margin-left: auto; }
.section-save { font-size: var(--fs-xs); color: var(--muted); }
/* Why Next is not available yet. Stated plainly, next to the button it applies
   to, rather than as an error after the fact. */
.section-blocked { font-size: var(--fs-xs); color: var(--warn-ink); line-height: 1.4; }
.section-nav .btn-primary:disabled { opacity: .45; cursor: not-allowed; }

/* Drafting the profile paragraph. The button sits under the box it writes into,
   because that is where the result appears. */
.summary-draft { margin-top: var(--s-4); }
/* Not a sixth button variant - any button carrying an icon lays out the same
   way, so the component system stays at five. */
.btn:has(svg) { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn svg { flex: 0 0 auto; }

/* The last section carries the offer to have the CV read properly. */
.final-review { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.final-review h3 { font-size: var(--fs-md); }
.final-review p { margin: 6px 0 var(--s-4); font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
/* With no Next on the last section, the note keeps to its own side. */
.section-nav:not(:has(.btn-primary)) .section-save { margin-left: auto; }

/* The final check: arithmetic, not opinion, so it reads as a list of facts. */
.check-group { margin-top: var(--s-4); }
.check-group h4 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.check-group ul { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.check-group li button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; cursor: pointer;
  background: none; border: 0; border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-2);
}
.check-group li button:hover { background: var(--surface-2); color: var(--ink); }
.check-where {
  display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.check-blocker li button { border-left: 2px solid #d9534f; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.check-warning li button { border-left: 2px solid #e0a340; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.check-polish li button { border-left: 2px solid var(--line-strong); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* Polish folds up. A dozen "this line would read better" notes buried the
   button that acts on them, so the list arrives closed with its count on show
   and the panel ends where the reader can see what to do next. */
details.check-group > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0;
  list-style: none;
}
details.check-group > summary::-webkit-details-marker { display: none; }
details.check-group > summary h4 { display: flex; align-items: center; gap: 8px; }
details.check-group > summary h4 .count {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; color: var(--ink-2);
  background: var(--surface-2); border-radius: 100px; padding: 1px 7px;
}
/* A caret so the row reads as something that opens. */
details.check-group > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: auto; margin-right: 4px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
details.check-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.check-group > summary:hover h4, details.check-group > summary:hover::after { color: var(--ink); }
details.check-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.studio-canvas {
  min-width: 0; padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.studio-inspector {
  position: sticky; top: calc(var(--header-h) + 74px);
  max-height: calc(100vh - var(--header-h) - 100px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.inspector-head { margin-bottom: var(--s-4); }
/* A section stacks several parts. Every part after the first opens a clear gap,
   so Certifications reads as its own section rather than the tail of Skills. */
.inspector-head:not(:first-of-type) {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line);
}
#studioInspector > .section-eyebrow + .inspector-head { margin-top: 0; padding-top: 0; border-top: 0; }
.inspector-head h3 { font-size: var(--fs-lg); }
.inspector-head p { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.inspector-empty { padding: var(--s-4) 0; font-size: var(--fs-sm); color: var(--muted); }

.photo-control { display: flex; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
/* Empty, the slot shows the chequerboard that means "no image" everywhere else
   a transparent picture is edited. It says the frame is empty far better than a
   dash does - and it belongs to this panel only. The page itself never shows it:
   an empty frame on the CV is empty, not chequered. */
.photo-slot {
  width: 58px; height: 74px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e6e6e3 25%, transparent 25%, transparent 75%, #e6e6e3 75%),
    linear-gradient(45deg, #e6e6e3 25%, transparent 25%, transparent 75%, #e6e6e3 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.photo-slot.has-photo { background-image: none; background-color: var(--surface-2); }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.photo-copy strong { font-size: var(--fs-sm); }
.photo-copy small { font-size: var(--fs-xs); color: var(--muted); }
.photo-actions { display: flex; gap: var(--s-3); align-items: center; margin-top: 6px; }
.photo-actions label { cursor: pointer; }
/* Photo panel. One row per property: placement, size, then a crop section
   holding zoom and the framing actions. Every control writes the current
   template's view, so switching template restores what was left there. */
.photo-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.photo-field-label { flex: 0 0 100%; font-size: var(--fs-xs); font-weight: 550; color: var(--ink-2); }
.photo-slider { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--s-3); }
.photo-slider input[type="range"] {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent;
  accent-color: var(--accent); appearance: auto;
}
.photo-slider-end { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.photo-value { flex: 0 0 42px; text-align: right; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Discrete +/- so zoom is reachable without dragging - and on a touch screen. */
.photo-step {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line-control); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1; cursor: pointer;
}
.photo-step:hover { background: var(--surface-2); }
/* Resets sit among labels like Small and Large, so they read at that size
   rather than a step above everything they belong to. */
.photo-field .link-button,
.photo-section .link-button,
.photo-control .link-button { font-size: var(--fs-xs); }
/* Clicking the photo on the page jumps here; this says so for the moment it
   takes to notice, then gets out of the way. */
.photo-control.is-pointed { animation: photo-pointed 1.4s ease-out 1; border-radius: var(--r-md); }
@keyframes photo-pointed {
  0%, 55% { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); }
  100%    { box-shadow: 0 0 0 3px transparent, 0 0 0 4px transparent; }
}
/* The same nudge for a field arrived at from the page: a click on a date on the
   CV opens Experience, and without this the reader has to hunt for which of the
   fields it meant - especially for an entry near the bottom of a long section. */
.entry-card.is-pointed, .field.is-pointed { animation: photo-pointed 1.4s ease-out 1; border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) {
  .photo-control.is-pointed, .entry-card.is-pointed, .field.is-pointed { animation: none; }
}
.photo-section { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.photo-section-title { display: block; margin-bottom: var(--s-3); font-size: var(--fs-xs); font-weight: 550; color: var(--ink-2); }
.photo-section .photo-field:first-of-type { margin-top: var(--s-3); }
.photo-warning { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--warn-ink); line-height: 1.5; }

/* Offered when a CV was written by hand against a vacancy that has never been
   analysed, so the scratch flows reach the same standard as the upload flows. */
.tailor-prompt {
  margin-bottom: var(--s-4); padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
.tailor-prompt strong { display: block; margin-bottom: 4px; font-size: var(--fs-sm); }
.tailor-prompt p { margin: 0 0 var(--s-3); font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.tailor-prompt small { display: block; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.photo-hint { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.photo-hint kbd {
  padding: 0 4px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface-2); font: inherit; font-size: 0.92em;
}

/* Direct photo manipulation in the live preview. The image itself is the drag
   target; the frame carries the resize handle so the handle never scales with
   the image or lands under the pointer during a drag. */
.cvp-photo { cursor: grab; touch-action: none; }
.cvp-photo:hover { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.cvp-photo:focus-visible, .cvp-photo.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; }
body.is-dragging-photo, body.is-dragging-photo .cvp-photo { cursor: grabbing; user-select: none; }
.cvp-photo-frame { position: absolute; pointer-events: none; z-index: 3; }
/* The handle sits on the inner bottom corner, so the photo grows towards the
   page rather than towards the edge it is anchored to. */
.cvp-photo-handle {
  position: absolute; left: -7px; bottom: -7px; width: 14px; height: 14px; padding: 0;
  border: 1.5px solid #fff; border-radius: 50%; background: var(--accent);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); cursor: nesw-resize; pointer-events: auto;
}
/* Four corner handles, so the photo can be resized from whichever corner is
   nearest - and the selection reads as a selection rather than one stray dot. */
.cvp-photo-handle[data-corner="nw"] { left: -7px; top: -7px; bottom: auto; cursor: nwse-resize; }
.cvp-photo-handle[data-corner="ne"] { left: auto; right: -7px; top: -7px; bottom: auto; cursor: nesw-resize; }
.cvp-photo-handle[data-corner="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.cvp-photo-handle[data-corner="se"] { left: auto; right: -7px; bottom: -7px; cursor: nwse-resize; }
@media (pointer: coarse) {
  .cvp-photo-handle { width: 22px; height: 22px; }
  .cvp-photo-handle[data-corner="nw"] { left: -11px; top: -11px; }
  .cvp-photo-handle[data-corner="ne"] { right: -11px; top: -11px; }
  .cvp-photo-handle[data-corner="sw"] { left: -11px; bottom: -11px; }
  .cvp-photo-handle[data-corner="se"] { right: -11px; bottom: -11px; }
}

/* Crop mode. The frame stays put and the picture moves behind it, so the page
   never reflows while the user is framing. Handles are hidden - resizing the
   frame and repositioning inside it are different jobs. */
.cvp-photo.is-cropping { cursor: move; outline: 2px solid var(--accent); outline-offset: 1px; }
.cvp-photo-frame.is-cropping .cvp-photo-handle { display: none; }
.cvp-photo-frame.is-cropping::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 9999px rgb(15 18 22 / 0.34);
}

.entry-card { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--s-3); background: var(--surface); }
.entry-card > header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.entry-card header strong { display: block; font-size: var(--fs-sm); }
.entry-card header small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.entry-tools { display: flex; gap: 4px; flex-shrink: 0; }
.entry-body { padding: var(--s-4) 12px; display: flex; flex-direction: column; gap: var(--s-3); }

/* AI suggestions */
.suggestion-list { display: flex; flex-direction: column; gap: var(--s-3); }
.suggestion { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); background: var(--surface); }
.suggestion header { display: flex; flex-direction: column; gap: 6px; }
.suggestion header strong { font-size: var(--fs-sm); }
.impact {
  align-self: flex-start; font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
}
.impact-high { background: var(--accent-soft); color: var(--accent-dark); }
.impact-medium { background: var(--surface-2); color: var(--muted); }
.suggestion-reason { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.diff { margin-top: 10px; }
.diff span { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.diff p { margin-top: 3px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-sm); }
.diff-new p { background: var(--ok-soft); color: #05502f; }
.diff textarea { margin-top: 4px; font-size: var(--fs-xs); }
.suggestion-question { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink); }
.suggestion-answer { margin-top: 8px; font-size: var(--fs-xs); }
.suggestion-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.undo-button { margin-top: var(--s-3); }
.review-clear { padding: var(--s-5); background: var(--ok-soft); border-radius: var(--r-md); }
.review-clear strong { display: block; color: #05502f; }
.review-clear p { margin-top: 4px; font-size: var(--fs-sm); color: #0a6b41; }

/* The same bar as the build overlay, inline in the studio's AI panel. It sits
   where three shimmering skeleton rows used to, so the panel says how far along
   the model is rather than only that it is busy. */
.work-meter { margin-top: var(--s-5); }
.work-meter .work-caption { margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.work-meter .progress-meter { margin: 0; }
.skeleton-list { display: flex; flex-direction: column; gap: 10px; }
.skeleton { height: 62px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-2), #ececea, var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton.tall { height: 120px; }

/* ==========================================================================
   Final workspace
   ========================================================================== */

.ws-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  max-width: 1560px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-4);
}
.ws-title h1 { font-size: var(--fs-2xl); margin-top: 4px; }
.ws-title p { margin-top: 5px; font-size: var(--fs-sm); color: var(--muted); }
.ws-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.ws-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-5);
  max-width: 1560px; margin: 0 auto; padding: 0 var(--s-5) var(--s-6); align-items: start;
}
.ws-cv {
  min-width: 0; padding: var(--s-5) var(--s-4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* The finished page shows the same switch the studio does. It sits on its own
   line under the four template names, at the end where Creative Vision is, so
   it reads as belonging to that template rather than to the page.

   The row keeps its height whether or not the template has grounds to offer.
   Only Creative Vision has two, and letting the row collapse on the other three
   meant that choosing Creative Vision pushed the CV down the page and choosing
   anything else pulled it back up. The height is the chip's own: 6px of padding
   either side of an --fs-xs line, inside 3px of switch padding.
   tests/e2e-browser.js measures the CV's top edge on all four templates, so if
   the chip is ever restyled past this the mismatch is caught. */
/* A one-line instruction under a block heading: what order the entries are
   meant to go in, said where they are typed rather than in a help page. */
.block-note { margin: -2px 0 var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.ws-template-block { width: fit-content; max-width: 100%; margin: 0 auto; }
/* The switch sits at the TOP of the row, close under the names it belongs to,
   rather than centred in it where it hung halfway down to the CV. The row's
   total footprint is unchanged - the space the switch gives up above it is
   given back below - so the CV still does not move. */
.ws-ground-row {
  display: flex; justify-content: flex-end; align-items: flex-start;
  min-height: 46px; padding-top: 2px;
}
/* Centred on the last template button rather than flush with the end of the
   group. The offset is measured in renderCv, because the switch is wider than
   the button and both change width with the language. */
.ws-ground-row .ground-switch { position: relative; }
.ws-side { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: calc(var(--header-h) + 16px); }

.module { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.module h2 { font-size: var(--fs-lg); }
.module h3 { margin-top: var(--s-4); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.module-sub { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.module-note { margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
/* 11.5px normal weight needs 4.5:1; #9aa1a9 was 2.61:1. --muted is 5.83:1
   and is the token the rest of the product uses for exactly this. */
.module-disclaimer { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.explain { margin-top: var(--s-3); }
.explain-answer { margin-top: 8px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--ink-2); }

.match-level { margin-top: 8px; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; }
.match-level span { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.match-strong { color: var(--ok); }
.match-stretch { color: #b54708; }

.tick-list, .gap-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tick-list li { position: relative; padding-left: 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.tick-list li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-size: 12px; }
.gap-list li { position: relative; padding-left: 18px; font-size: var(--fs-sm); }
.gap-list li::before { content: '!'; position: absolute; left: 4px; color: #b54708; font-weight: 700; font-size: 12px; }
.gap-list span { display: block; font-size: var(--fs-xs); color: var(--muted); }

.salary-rows { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s-3); }
.salary-rows div { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.salary-rows dt { color: var(--muted); }
.salary-rows dd { margin: 0; font-weight: 550; text-align: right; }

.q-group { border-top: 1px solid var(--line); margin-top: var(--s-3); }
.q-group summary { padding: 10px 0; cursor: pointer; font-size: var(--fs-sm); font-weight: 550; display: flex; justify-content: space-between; }
.q-group summary b { font-weight: 500; color: var(--muted); }
.q-item { padding: 0 0 var(--s-3); }
.q-item .q { font-size: var(--fs-sm); }
.q-item .q-why, .q-item .q-evidence { margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.q-item .q-evidence { color: var(--accent-dark); }

.ws-jobs { max-width: 1560px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-8); }
.ws-jobs h2 { font-size: var(--fs-xl); }
.count { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.job-filters { display: flex; gap: var(--s-3); margin: var(--s-4) 0; flex-wrap: wrap; }
.job-filters input { max-width: 280px; }
.job-filters select { max-width: 170px; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.job-card {
  display: flex; flex-direction: column; gap: 8px; padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.job-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.job-card header { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.job-card header strong { display: block; font-size: var(--fs-md); line-height: 1.3; }
.job-card header small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.fit { flex-shrink: 0; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 100px; }
.fit-strong { background: var(--ok-soft); color: var(--ok); }
.fit-good { background: var(--accent-soft); color: var(--accent-dark); }
.fit-stretch { background: var(--surface-2); color: var(--muted); }
.job-meta { font-size: var(--fs-xs); color: var(--muted); }
.job-salary { font-size: var(--fs-sm); font-weight: 550; }
.signal-list { display: flex; flex-wrap: wrap; gap: 5px; }
.signal-list li { font-size: 11.5px; padding: 2px 8px; background: var(--surface-2); border-radius: 100px; color: var(--ink-2); }
.job-card-actions { display: flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }

.job-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(460px, 100%);
  overflow-y: auto; padding: var(--s-6) var(--s-5);
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.drawer-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); line-height: 1; }
.drawer-kicker { font-size: var(--fs-xs); color: var(--muted); }
.job-drawer h2 { margin-top: 4px; font-size: var(--fs-xl); }
.job-drawer h3 { margin-top: var(--s-5); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.drawer-body { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-2); white-space: pre-wrap; }
.drawer-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.drawer-source { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--muted); }

.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: var(--s-6); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}
.empty-state strong { font-size: var(--fs-lg); }
.empty-state p { font-size: var(--fs-sm); color: var(--muted); max-width: 52ch; }
.empty-actions { display: flex; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.search-chip .chip-boards a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.search-chip .chip-boards a:hover { color: var(--ink); }
.search-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.search-chip {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  background: var(--surface-2); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--muted);
}
.search-chip b { font-size: var(--fs-sm); color: var(--ink); font-weight: 550; }

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dash { max-width: var(--max); margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-8); }
.dash-nav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--s-6); overflow-x: auto; }
.dash-nav button {
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
}
.dash-nav button:hover { color: var(--ink); }
.dash-nav button.is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 550; }

.dash-section { margin-bottom: var(--s-7); }
.dash-section h1 { font-size: var(--fs-2xl); }
.dash-section h2 { font-size: var(--fs-lg); }
.dash-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; }
/* The heading's actions line up with the row actions under them rather than
   with the edge of the section: the cards are inset by their own padding and a
   border, so the two columns of links were a few pixels apart down the page. */
.dash-section-head .head-actions { padding-right: calc(var(--s-5) + 1px); }

.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.quick-action {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: var(--s-5); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.quick-action:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }
.quick-action strong { font-size: var(--fs-lg); font-weight: 600; }
.quick-action small { font-size: var(--fs-sm); color: var(--muted); }

.toolbar { display: flex; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.toolbar input[type="search"] { max-width: 320px; }
.segmented { display: inline-flex; background: var(--surface-2); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.segmented button { border: 0; background: none; cursor: pointer; border-radius: var(--r-sm); padding: 6px 12px; font-size: var(--fs-xs); font-weight: 550; color: var(--muted); }
.segmented button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.card-list { display: flex; flex-direction: column; gap: var(--s-3); }
.record-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.record-card:hover { border-color: var(--line-strong); }
/* Applications are a table, so they need a table's geometry. Every card was its
   own grid with auto columns, so each row sized itself: a SAVED tag instead of
   a dropdown, a longer timestamp, or one button more or fewer moved everything
   after it. Fixed columns make the status, the date and the actions line up
   down the page. */
.track-card {
  /* Fallback for a browser without subgrid: fixed columns, wide enough for the
     longest translation of the action labels (Dutch needs 357px). */
  grid-template-columns: minmax(0, 1fr) 152px 112px 364px;
  column-gap: var(--s-4);
}
/* Where subgrid exists, the list owns the columns and every row borrows them,
   so each one is exactly as wide as its widest content in whatever language is
   on screen - no measuring, and nothing to get wrong when a label grows. */
@supports (grid-template-columns: subgrid) {
  .track-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    column-gap: var(--s-4);
  }
  .track-list .track-card {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
.track-card .record-status { min-width: 0; }
.track-card .record-when {
  font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; text-align: right;
}
.track-card .record-actions { justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
/* Narrower than the columns need: stack rather than crush them. */
@media (max-width: 1180px) {
  .track-card { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-3); }
  .track-card .record-main { grid-column: 1 / -1; }
  .track-card .record-when { text-align: left; }
  .track-card .record-actions { grid-column: 2; }
}

.record-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.record-main strong { font-size: var(--fs-md); overflow-wrap: anywhere; }
.record-main small { font-size: var(--fs-xs); color: var(--muted); }
.tag { align-self: flex-start; font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; }
.tag-base { background: var(--surface-2); color: var(--muted); }
.tag-tailored { background: var(--accent-soft); color: var(--accent-dark); }
.record-meta { font-size: var(--fs-xs); color: var(--muted); }
.record-actions { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Interview prep and salary, side by side under the document. */
.ws-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5);
  /* The same measure and gutters as .ws-grid above it, or the pair runs wider
     than the document it belongs to. */
  max-width: 1560px; margin: 0 auto; padding: 0 var(--s-5);
}
.ws-pair > div:empty { display: none; }
@media (max-width: 860px) { .ws-pair { grid-template-columns: minmax(0, 1fr); } }
/* Tailor CV is the row's primary action, but twelve black buttons down a list
   read as twelve alarms. Stone keeps it clearly ahead of View job without
   shouting; the text stays ink, so it still clears the contrast floor. */
.job-row [data-job-tailor] {
  background: var(--stone); color: var(--ink); border-color: transparent;
}
.job-row [data-job-tailor]:hover { background: var(--stone-deep, #b9b7b0); }
/* Matching jobs use the Overview row, with the fit badge and the date stacked
   in the middle column so a long job title still has room to breathe. */
.job-row .record-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.job-row .job-salary { color: var(--ink-2); }
@media (max-width: 860px) {
  .job-row .record-meta { flex-direction: row; align-items: center; justify-content: flex-start; }
}
/* One width for every row: the select sized itself to its longest option, so
   Ready, Applied and Interview each came out different and the column zig-zagged. */
.status-select { width: 148px; min-width: 148px; padding: 5px 28px 5px 9px; font-size: var(--fs-xs); }

.profile-block { padding: var(--s-5); margin-bottom: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.profile-block h2 { font-size: var(--fs-lg); margin-bottom: var(--s-4); }
.profile-block h2 small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.profile-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.completeness { font-size: var(--fs-sm); color: var(--muted); }
.completeness b { color: var(--ink); font-size: var(--fs-lg); }

/* ==========================================================================
   Modals, overlays, toast
   ========================================================================== */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: var(--s-4); background: rgba(20, 23, 26, .42); backdrop-filter: blur(3px);
  overflow-y: auto;
}
.modal {
  position: relative; width: min(430px, 100%); padding: var(--s-6);
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.modal h2 { font-size: var(--fs-xl); }
.modal-sub { margin-top: 6px; margin-bottom: var(--s-5); font-size: var(--fs-sm); color: var(--muted); }
.modal form { display: flex; flex-direction: column; gap: var(--s-3); }
.modal-close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.modal-close:hover { color: var(--ink); }
.modal-actions { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
/* A question, not a form: narrower than the sign-in card, and the two answers
   sit together at the end rather than pushed to opposite corners. */
.modal-ask { width: min(392px, 100%); }
.modal-ask .modal-sub { margin-bottom: 0; white-space: pre-line; }
.modal-ask .modal-actions { justify-content: flex-end; margin-top: var(--s-5); }
.modal-legal { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--muted); }
.modal-legal a { color: var(--ink-2); }
.checkout-consent {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px;
  margin: var(--s-4) 0 var(--s-3); padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2);
  font-size: var(--fs-xs); line-height: 1.5;
}
.checkout-consent input { margin-top: 3px; }
.checkout-consent a { color: var(--ink); }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal-page { min-height: 100vh; background: var(--bg); }
.legal-header { position: static; }
/* Full-bleed, so the link sits at the page's left edge rather than indenting
   with the 820px reading column - the reader looks left to leave, and the
   arrow makes that unambiguous without a word of instruction. */
.legal-back-bar { max-width: var(--max); margin: 0 auto; padding: var(--s-5) var(--s-5) 0; }
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: 550;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
}
.legal-back:hover { color: var(--ink); text-decoration-color: currentColor; }
/* The arrow leads the eye out of the page on hover. */
.legal-back svg { flex: none; transition: transform .15s ease; }
.legal-back:hover svg { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) { .legal-back svg { transition: none; } }
.legal-shell { max-width: 820px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-9); }
.legal-eyebrow { margin-bottom: var(--s-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.legal-shell h1 { max-width: 18ch; font-size: clamp(36px, 6vw, 56px); letter-spacing: -.045em; line-height: 1.02; }
.legal-updated { margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-sm); }
.legal-intro { margin-top: var(--s-5); font-size: var(--fs-lg); line-height: 1.65; color: var(--ink-2); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: var(--s-6) 0; padding: var(--s-4) 0; border-block: 1px solid var(--line); }
.legal-nav a { color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; }
.legal-nav a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.legal-content { display: grid; gap: var(--s-6); }
.legal-content section { scroll-margin-top: 24px; }
.legal-content h2 { margin-bottom: var(--s-3); font-size: var(--fs-xl); letter-spacing: -.025em; }
.legal-content h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-md); }
.legal-content p, .legal-content li, .legal-content dd, .legal-content dt { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.72; }
.legal-content p + p { margin-top: var(--s-2); }
/* Flush with the paragraphs around them. The 22px indent set the lists apart
   from the prose they belong to, so a section read as two columns of text at
   different depths - most obviously under the prices, where the two passes sat
   inset and the VAT line under them did not. */
.legal-content ul, .legal-content ol { display: grid; gap: 6px; margin: var(--s-3) 0; padding: 0; }
.legal-content li { list-style: none; }
/* ...and the paragraph that follows a list is spaced like any other. */
.legal-content ul + p, .legal-content ol + p, .legal-content dl + p { margin-top: 0; }
.legal-content dl { display: grid; grid-template-columns: minmax(130px, .35fr) 1fr; gap: 8px 18px; }
.legal-content dt { color: var(--muted); }
.legal-content a { color: var(--ink); }
.legal-form { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); white-space: pre-line; }
@media (max-width: 620px) {
  .legal-shell { padding: var(--s-6) var(--s-4) var(--s-8); }
  .legal-back-bar { padding: var(--s-4) var(--s-4) 0; }
  .legal-content dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-content dd { margin-bottom: 8px; }
}
.modal-list { display: flex; flex-direction: column; gap: 7px; margin: var(--s-4) 0; }
.modal-list li { position: relative; padding-left: 20px; font-size: var(--fs-sm); color: var(--ink-2); }
.modal-list li::before { content: '✓'; position: absolute; left: 2px; color: var(--ok); font-size: 12px; }
/* Plan chooser inside the paywall. Two cards, one selected, no dropdown. */
.plan-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-4) 0; }
.plan-option {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
}
.plan-option:hover { border-color: var(--line-strong); }
.plan-option.is-selected { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan-name { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.plan-amount { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.plan-note { font-size: var(--fs-xs); color: var(--muted); }

.modal-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--s-4); }
.modal-price strong { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.modal-price span { font-size: var(--fs-xs); color: var(--muted); }

.progress-overlay {
  position: fixed; inset: 0; z-index: 65; display: grid; place-items: center;
  padding: var(--s-4); background: rgba(251, 251, 249, .93); backdrop-filter: blur(6px);
}
.progress-card { width: min(400px, 100%); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.progress-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--s-4); }
.progress-meter { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-2); }
.progress-track {
  flex: 1; height: 6px; border-radius: 100px; overflow: hidden;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.progress-track i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .6s ease; }
.progress-percent { flex: 0 0 auto; min-width: 38px; text-align: right; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .progress-track i { transition: none; } }
.progress-steps { display: flex; flex-direction: column; gap: 12px; }
.progress-steps li { display: flex; align-items: center; gap: 11px; font-size: var(--fs-sm); color: var(--muted); }
.progress-steps i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex-shrink: 0; display: grid; place-items: center; }
.progress-steps .step-active { color: var(--ink); font-weight: 500; }
.progress-steps .step-active i { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
/* The same mark the studio rail puts on a finished section, so the two read as
   one product rather than a tick in one place and a green disc in the other. */
.progress-steps .step-done i {
  border-color: var(--stone); background: var(--stone); color: var(--ink);
  animation: tick-in .28s ease-out;
}
@keyframes tick-in { from { transform: scale(.7); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .progress-steps .step-done i { animation: none; } }
.progress-steps .step-done i svg { width: 12px; height: 12px; }
.progress-steps .step-done { color: var(--ink-2); }
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 80;
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  max-width: min(440px, calc(100vw - 32px));
  padding: 11px 18px; background: var(--ink); color: #fff;
  border-radius: 100px; font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); }
.toast.success { background: var(--ok); }

.recover-bar {
  position: fixed; left: 50%; bottom: 22px; z-index: 55; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px); padding: 10px 12px 10px 18px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1240px) {
  :root { --rail-w: 172px; }
  .studio-grid { grid-template-columns: var(--rail-w) minmax(0, 1fr) 330px; gap: var(--s-4); }
  .ws-grid { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 1040px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .studio-rail { display: none; }
  .ws-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-side { position: static; }
}

/* Between 861px and 1040px the rail no longer fits beside the canvas and the
   mobile Edit/Preview/AI tabs have not appeared yet, so section navigation used
   to vanish completely: no progress, no way to jump, only Back and Next. An
   iPad in landscape is 1024px, so this was a common width rather than a corner.
   The rail reflows into a strip above the canvas instead of disappearing. */
@media (min-width: 861px) and (max-width: 1040px) {
  .studio-rail { display: block; position: static; grid-column: 1 / -1; }
  .studio-rail .rail-title { display: none; }
  .studio-rail .rail-count { margin: 0; }
  .studio-rail .rail-progress { margin: 8px 0 0; }
  .studio-rail .step-list {
    display: flex; gap: var(--s-2); margin: var(--s-3) 0 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .studio-rail .step-list::-webkit-scrollbar { display: none; }
  /* The connecting line only reads as a route when the steps run downwards. */
  .studio-rail .step::before { display: none; }
  .studio-rail .step-button { width: auto; margin-left: 0; padding: 6px 10px 6px 6px; align-items: center; white-space: nowrap; }
  .studio-rail .step-mark { width: 26px; height: 26px; font-size: var(--fs-xs); }
  /* Same geometry against a 26px mark: the 45-degree point is now (22.2, 3.8). */
  .studio-rail .step.is-optional .step-mark .spark { top: -2.7px; right: -2px; width: 12px; height: 13px; }
  .studio-rail .step-text { padding-top: 0; }
  /* Six section names side by side would push the row off the screen; the one
     you are on still names itself, which is the part that has to be readable. */
  .studio-rail .step-state { display: none; }
  .studio-rail .step:not(.is-progress) .step-name { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 58px; }
  .site-header { padding: 0 var(--s-4); }
  .site-nav { gap: var(--s-3); }
  .site-nav a { display: none; }
  .hero { padding: var(--s-7) var(--s-4) var(--s-6); }
  .starter, .quick-actions, .pricing-grid, .steps, .reason-grid { grid-template-columns: minmax(0, 1fr); }
  .starter-card { min-height: 0; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .url-form { flex-direction: column; }
  .url-form .btn { width: 100%; }

  .studio-bar { flex-direction: column; align-items: stretch; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .studio-bar-actions { justify-content: space-between; }
  .studio-title .title-input { width: 100%; }
  .studio-mobile-tabs {
    display: flex; position: sticky; top: calc(var(--header-h) + 96px); z-index: 25;
    gap: 2px; padding: 6px; margin: 0 var(--s-4); background: var(--surface-2); border-radius: var(--r-md);
  }
  .studio-mobile-tabs button {
    flex: 1; padding: 8px; cursor: pointer; border: 0; background: none; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: 550; color: var(--muted);
  }
  .studio-mobile-tabs button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

  .studio-grid { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .studio-grid[data-mobile-tab="edit"] .studio-canvas,
  .studio-grid[data-mobile-tab="ai"] .studio-canvas { display: none; }
  .studio-grid[data-mobile-tab="preview"] .studio-inspector { display: none; }
  .studio-inspector { position: static; max-height: none; padding: var(--s-4); }

  .ws-head, .ws-grid, .ws-jobs { padding-left: var(--s-4); padding-right: var(--s-4); }
  .ws-actions .btn { flex: 1; }
  .job-grid { grid-template-columns: minmax(0, 1fr); }
  .job-drawer { width: 100%; }
  .record-card { grid-template-columns: minmax(0, 1fr); }
  .record-actions { justify-content: flex-start; }
  .dash { padding: var(--s-5) var(--s-4) var(--s-7); }
  .pair-row, .pair-row.triple { grid-template-columns: minmax(0, 1fr) auto; }
  .focus-screen { padding: var(--s-5) var(--s-4) var(--s-8); }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: var(--s-4); }
  .footer-legal { justify-content: flex-start; }
  .recover-bar { left: 12px; right: 12px; transform: none; max-width: none; justify-content: space-between; }
  .logo-strip { margin-top: var(--s-6); }
  .logo-marquee { --logo-gap: 22px; }
  .logo-track img { height: 19px; max-width: 92px; }
  .logo-track img[src*="apple"],
  .logo-track img[src*="nestle"],
  .logo-track img[src*="mercedes"] { height: 26px; }
  .proof-frame { max-height: 320px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 34px; }
  .hero-sub { font-size: var(--fs-md); }
  .ws-actions { width: 100%; }
}

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

@media print {
  .site-header, .site-footer, .studio-bar, .studio-rail, .studio-inspector, .ws-actions, .toast { display: none !important; }
  .canvas-bar, .studio-mobile-tabs, .cv-stage-note { display: none !important; }
  /* The stage hides its overflow and carries an inline height that JS set from
     the on-screen scale - about half a page at a typical fit. Resetting
     .cv-pages alone brought the pages back to full size inside a box still cut
     to the preview's height, so printing produced the top of page one and
     nothing else. */
  .cv-stage { overflow: visible !important; height: auto !important; }
  .cv-pages { position: static; transform: none; }
  .cv-page { box-shadow: none; margin: 0; page-break-after: always; }
}

.dash-body { display: flex; flex-direction: column; gap: var(--s-6); }

/* An application row carries its status and its CV versions, so it is taller
   than a plain record card and its version list has to sit under both. */
.track-card { flex-wrap: wrap; }
.track-card .record-meta { display: flex; align-items: center; gap: var(--s-3); }
.version-list {
  flex: 1 0 100%; list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0;
  border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px;
}
.version-list li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.version-list time { color: var(--muted); font-size: var(--fs-xs); }

/* The document's own language, set per CV next to the other document controls. */
.cv-language { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.cv-language label { display: block; font-size: var(--fs-sm); margin-bottom: 6px; }
.cv-language select { width: 100%; }
.cv-language small { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }