/* CV Ladder — one stylesheet for the whole site.
   Design rules being enforced here: warm off-white ground, charcoal type,
   exactly one accent, thin borders, whitespace instead of decoration.
   No gradients, no carousels, no oversized illustration. */

:root {
  --bg:          #FCFAF6;   /* warm off-white */
  --surface:     #FFFFFF;
  --surface-alt: #F6F3ED;   /* faint band for alternating sections */

  --ink:   #1C1B18;         /* headings */
  --ink-2: #46443E;         /* body */
  --ink-3: #78746A;         /* meta, captions */

  --line:      #E4DFD5;     /* hairline borders */
  --line-firm: #CFC8BA;

  --accent:      #1B4D3E;   /* the single accent */
  --accent-deep: #123529;
  --accent-tint: #EDF2EF;

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 1px 2px rgba(28, 27, 24, .04);
  --shadow-md: 0 1px 3px rgba(28, 27, 24, .05), 0 8px 24px -12px rgba(28, 27, 24, .10);

  --radius: 6px;
  --measure: 62ch;
  --page: 1080px;
  --gap: clamp(64px, 9vw, 116px);   /* vertical rhythm between sections */
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5.2vw, 54px); letter-spacing: -.02em; }
h2 { font-size: clamp(26px, 3.4vw, 36px); }
h3 { font-size: 19px; line-height: 1.35; }

p { margin: 0; }
p + p { margin-top: 1em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

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

ul { margin: 0; padding: 0; list-style: none; }

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.wrap--narrow { max-width: 760px; }

section { padding-block: var(--gap); }
.band { background: var(--surface-alt); border-block: 1px solid var(--line); }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.eyebrow--accent { color: var(--accent); }

.lede { font-size: clamp(17px, 2vw, 19px); color: var(--ink-2); max-width: var(--measure); }
.section-head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 + p { margin-top: 16px; }

.muted { color: var(--ink-3); }
.small { font-size: 14px; line-height: 1.6; }
.fine { font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  font-family: var(--sans);
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); color: #fff; }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-firm); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(252, 250, 246, .88);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 66px; }

.brand { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--ink); }
.brand__mark {
  background: var(--accent);
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: 7px;
  align-self: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--shadow-sm);
}
.brand__mark svg { width: 25px; height: 25px; overflow: visible; }
.brand__mark path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand__name { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__links a { font-size: 15px; color: var(--ink-2); text-decoration: none; }
.site-nav__links a:hover { color: var(--ink); }
.site-nav .btn { padding: 9px 16px; }
/* the link group is a transparent wrapper at desktop so gap still applies to
   each link individually; below 720px the whole group drops out */
.site-nav__links { display: contents; }
@media (max-width: 720px) { .site-nav__links { display: none; } }

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

.hero { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 88px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero__grid--without-globe { grid-template-columns: minmax(0, 620px); }
.hero h1 { max-width: 15ch; }
.hero__lede { margin-top: 22px; max-width: 52ch; font-size: clamp(17px, 2vw, 19.5px); }
.hero .btn-row { margin-top: 34px; }
.hero__note { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }

/* ---------- hero CV entry ----------
   The right of the hero is the work-experience entry the placement leaves on a
   CV. One sheet, one entry, nothing else: the role, its field and its bullets
   are what move. The outgoing role rolls up behind a per-word mask and the
   incoming one rolls in with a short stagger down the bullets — driven by class
   swaps from main.js, so with JS off the page shows the first entry and the
   full list of roles underneath. */

.cv-card {
  position: relative;
  width: min(100%, 480px);
  justify-self: end;
}
.cv-card[hidden] { display: none; }

.cv-card__label {
  margin: 0 0 14px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cv-sheet {
  overflow: hidden;   /* the nowrap title can never bleed past the sheet edge */
  padding: 36px 38px 34px;
  border: 1px solid var(--line-firm);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.cv-sheet__section {
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cv-entry__role {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  /* the longest title we run — "Junior Project Coordinator" — has to sit on one
     line, so this is sized to the sheet's inner width, not to taste */
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  white-space: nowrap;
}
.cv-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  justify-content: space-between;
  margin: 9px 0 0;
  min-height: 1.5em;
}
.cv-entry__org { color: var(--ink-2); font-size: 13.5px; font-style: italic; }
.cv-entry__dates { flex: none; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }

.cv-entry__bullets {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  min-height: 100px;   /* holds the sheet still while a longer set swaps in */
}
.cv-entry__bullets li {
  position: relative;
  padding-left: 17px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.cv-entry__bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

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

/* one mask per word of the job title, so it rolls word by word */
.cv-entry__role .role-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.cv-entry__role .role-w > span {
  display: inline-block;
  transform: translateY(0);
  transition: transform .44s cubic-bezier(.22, .8, .28, 1);
  transition-delay: var(--d, 0s);   /* set per word by main.js; zeroed on exit */
}
.cv-card--out .cv-entry__role .role-w > span { transform: translateY(-115%); transition-delay: 0s; }
.cv-card--in  .cv-entry__role .role-w > span { transform: translateY(115%); transition: none; }

.cv-entry__org span,
.cv-entry__bullets li {
  transition: opacity .3s ease, transform .36s cubic-bezier(.22, .8, .28, 1);
  transition-delay: var(--d, 0s);
}
.cv-card--out .cv-entry__org span,
.cv-card--out .cv-entry__bullets li { transition-delay: 0s; }
.cv-card--out .cv-entry__org span,
.cv-card--out .cv-entry__bullets li,
.cv-card--in  .cv-entry__org span,
.cv-card--in  .cv-entry__bullets li { opacity: 0; transform: translateY(5px); }
.cv-card--in  .cv-entry__org span,
.cv-card--in  .cv-entry__bullets li { transition: none; }

/* the role list: the no-JS fallback, hidden once main.js drives the entry */
.cv-card__data {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink-3);
  font-size: 11.5px;
}
.cv-card__data li { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; }
.cv-card--live .cv-card__data { display: none; }

.cv-card__caption {
  margin: 16px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}

/* --- the two reflow points, shared with every section below ---
   TABLET (<=900): the two-column hero would leave the copy at ~430px next to a
   squeezed card, while every section under it has already gone wide. So the
   hero stacks here too and the card keeps its full size, left-aligned under the
   copy on the same edge as everything else.
   PHONE (<=620): the card shrinks — supporting evidence for the copy above it,
   not a second hero. */
@media (max-width: 900px) {
  .hero { padding-block: clamp(44px, 7vw, 72px) clamp(40px, 6vw, 64px); }
  .hero__grid,
  .hero__grid--without-globe { grid-template-columns: minmax(0, 620px); gap: 38px; }
  .cv-card { width: 100%; max-width: 480px; justify-self: start; }
}
@media (max-width: 620px) {
  .hero__grid { gap: 32px; }
  .cv-card { max-width: 440px; }
  .cv-card__label { margin-bottom: 10px; font-size: 10px; letter-spacing: .09em; }
  .cv-sheet { padding: 20px 20px 18px; }
  .cv-sheet__section { margin-bottom: 14px; padding-bottom: 10px; font-size: 9.5px; }
  .cv-entry__role { font-size: 18px; }
  .cv-entry__meta { gap: 2px 12px; margin-top: 6px; }
  .cv-entry__org { font-size: 12px; }
  .cv-entry__dates { font-size: 11.5px; }
  .cv-entry__bullets { margin-top: 14px; gap: 8px; min-height: 78px; }
  .cv-entry__bullets li { padding-left: 14px; font-size: 12.5px; line-height: 1.45; }
  .cv-entry__bullets li::before { width: 3px; height: 3px; top: .68em; }
  .cv-card__caption { margin-top: 12px; font-size: 11px; }
}
/* narrowest phones: the longest title still has to sit on one line */
@media (max-width: 380px) {
  .cv-sheet { padding: 17px 16px 16px; }
  .cv-entry__role { font-size: 16.5px; }
  .cv-entry__bullets li { font-size: 12px; }
}

/* ---------- trust strip ---------- */

.trust { border-block: 1px solid var(--line); background: var(--surface); padding-block: 30px; }
.trust ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 34px; }
.trust li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}
.trust__icon, .trust__copy strong { display: none; }
.trust__copy span { display: block; }

.trust--enhanced { border-color: #DCE5E0; background: var(--accent-tint); padding-block: 0; }
.trust--enhanced ul { gap: 0; }
.trust--enhanced li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 13px;
  align-items: center;
  min-width: 0;
  padding: 24px 26px;
}
.trust--enhanced li::before { display: none; }
.trust--enhanced li:first-child { padding-left: 0; }
.trust--enhanced li:last-child { padding-right: 0; }
.trust--enhanced li + li { border-left: 1px solid #D7E1DB; }
.trust--enhanced .trust__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.trust--enhanced .trust__icon { display: grid; }
.trust--enhanced .trust__icon svg { width: 17px; height: 17px; }
.trust__copy { min-width: 0; }
.trust--enhanced .trust__copy strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.trust--enhanced .trust__copy span {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Variant C: individually framed proof points. */
.trust--cards { background: var(--surface-alt); padding-block: 18px; }
.trust--cards ul { gap: 12px; }
.trust--cards li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 19px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.trust--cards li::before { display: none; }
.trust--cards .trust__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid #D7E1DB;
  border-radius: 7px;
}
.trust--cards .trust__icon svg { width: 17px; height: 17px; }
.trust--cards .trust__copy strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.trust--cards .trust__copy span {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.45;
}

/* Variant D: a high-contrast brand band. */
.trust--dark { background: var(--accent); border-color: var(--accent-deep); padding-block: 0; }
.trust--dark ul { gap: 0; }
.trust--dark li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 13px;
  align-items: center;
  min-width: 0;
  padding: 25px 26px;
}
.trust--dark li::before { display: none; }
.trust--dark li:first-child { padding-left: 0; }
.trust--dark li:last-child { padding-right: 0; }
.trust--dark li + li { border-left: 1px solid rgba(255, 255, 255, .16); }
.trust--dark .trust__icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--accent-deep);
  background: #fff;
  border-radius: 50%;
}
.trust--dark .trust__icon svg { width: 17px; height: 17px; }
.trust--dark .trust__copy strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.trust--dark .trust__copy span {
  margin-top: 3px;
  color: rgba(255, 255, 255, .68);
  font-size: 12.5px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .trust ul { grid-template-columns: repeat(2, 1fr); }
  .trust--enhanced li { padding: 21px 20px; }
  .trust--enhanced li:first-child { padding-left: 20px; }
  .trust--enhanced li:last-child { padding-right: 20px; }
  .trust--enhanced li:nth-child(odd) { border-left: 0; }
  .trust--enhanced li:nth-child(n + 3) { border-top: 1px solid #D7E1DB; }
  /* Two-up. Outer edges stay flush to the .wrap gutter so the band's text keeps
     the same left edge as the sections above and below it; only the inner edges
     either side of the divider are padded. */
  .trust--dark { padding-block: 4px; }
  .trust--dark li { align-items: start; padding: 22px 24px; }
  .trust--dark li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .trust--dark li:nth-child(even) { padding-right: 0; }
  .trust--dark li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .trust--dark .trust__icon { margin-top: 1px; }
}
/* Phones: one compact list, not a 2×2 — four boxed quadrants read as heavy
   cards, and a divider crossing the middle of a full-bleed band is the part
   that looks wrong at this width. Tablets keep the two-up above.

   The colour drops out too. A deep field works as punctuation when it's a 90px
   band between two sections; on a phone the same fill runs to ~40% of the
   viewport and stops reading as a rule. So the strip sits on the page ground
   with hairlines top and bottom, and the accent survives only in the ticks —
   whitespace instead of decoration, same as the rest of the page. */
@media (max-width: 620px) {
  .trust--dark {
    background: transparent;
    border-block: 1px solid var(--line);
    padding-block: 12px;
  }
  .trust--dark ul { grid-template-columns: 1fr; }
  .trust--dark li {
    grid-template-columns: 22px 1fr;
    gap: 11px;
    padding: 14px 0;
  }
  .trust--dark li + li { border-left: 0; border-top: 1px solid var(--line); }
  .trust--dark li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .trust--dark .trust__icon {
    width: 22px;
    height: 22px;
    color: #fff;
    background: var(--accent);
    border-radius: 6px;
  }
  .trust--dark .trust__icon svg { width: 13px; height: 13px; }
  .trust--dark .trust__copy strong { color: var(--ink); font-size: 14px; }
  .trust--dark .trust__copy span {
    margin-top: 1px;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.4;
  }
}
@media (max-width: 620px) {
  .trust ul { grid-template-columns: 1fr; }
  .trust--enhanced li { padding: 17px 0; }
  .trust--enhanced li:first-child { padding-left: 0; }
  .trust--enhanced li:last-child { padding-right: 0; }
  .trust--enhanced li + li { border-left: 0; border-top: 1px solid #D7E1DB; }
  .trust--cards { padding-block: 12px; }
  .trust--cards ul { gap: 8px; }
  .trust--cards li { padding: 16px; }
}

/* ---------- generic card grid ---------- */

.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 15px; }

/* problem points — numbered, no card chrome */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.points li { border-top: 1px solid var(--line-firm); padding-top: 20px; }
.points .n { font-family: var(--serif); font-size: 14px; color: var(--accent); display: block; margin-bottom: 12px; }
.points h3 { margin-bottom: 8px; }
.points p { font-size: 15px; color: var(--ink-3); }
/* three points into two columns: the third spans the pair rather than sitting
   as a half-width orphan, with its measure capped so the line length matches */
@media (max-width: 900px) {
  .points { grid-template-columns: repeat(2, 1fr); gap: 30px 34px; }
  .points li:last-child { grid-column: 1 / -1; }
  .points li:last-child p { max-width: 62ch; }
}
@media (max-width: 620px) { .points { grid-template-columns: 1fr; gap: 26px; } }

/* The resolution beneath the three problems. Deliberately no new layout idiom:
   same hairline, same body size and measure as the points above it, and the
   standard button row. It should read as the end of the section, not a panel. */
.turn { margin-top: clamp(34px, 4.5vw, 48px); }
.turn__lead {
  font-size: 17px;
  font-weight: 550;
  color: var(--ink);
  max-width: var(--measure);
}
.turn__body { margin-top: 10px; font-size: 15.5px; color: var(--ink-3); max-width: 58ch; }
.turn .btn-row { margin-top: 26px; }

/* ---------- how it works (numbered steps) ---------- */

.steps { counter-reset: step; display: grid; gap: 2px; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 15px;
  color: var(--accent);
  padding-top: 2px;
}
.steps h3 { margin-bottom: 6px; }
.steps p { font-size: 15px; color: var(--ink-3); max-width: 60ch; }
.steps .when { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 560px) { .steps li { grid-template-columns: 36px 1fr; gap: 14px; } }

/* ---------- outcomes ---------- */

.outcomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.outcomes li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.outcomes strong { color: var(--ink); font-weight: 600; display: block; font-size: 15.5px; }
.outcomes p { font-size: 14.5px; color: var(--ink-3); margin-top: 3px; }
@media (max-width: 620px) { .outcomes { grid-template-columns: 1fr; } }

.tick { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); flex: none; }

/* ---------- pricing ---------- */

.pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
/* the pair stays side by side across tablet; the cards just carry less padding
   so the price and list keep a comfortable measure at ~330px a column */
@media (max-width: 900px) { .tier { padding: 28px 24px 26px; } .tier__badge { left: 24px; } }
@media (max-width: 620px) { .pricing { grid-template-columns: 1fr; } .tier { padding: 30px 26px 28px; } }

.tier {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 34px 32px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tier--featured { border-color: var(--accent); box-shadow: var(--shadow-md); }

.tier__badge {
  position: absolute;
  top: -11px; left: 32px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 3px;
}
.tier__name { font-size: 21px; }
.tier__blurb { font-size: 14.5px; color: var(--ink-3); margin-top: 8px; min-height: 44px; }
.tier__price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 4px; }
.tier__amount { font-family: var(--serif); font-size: 40px; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.tier__per { font-size: 14px; color: var(--ink-3); }
.tier__terms { font-size: 13px; color: var(--ink-3); }
.tier hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

.tier__list li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; font-size: 15px; padding: 7px 0; }
.tier__list .inherit { color: var(--ink-3); font-style: italic; padding-bottom: 12px; display: block; font-size: 14px; }
.tier .btn { margin-top: 26px; }
.tier__foot { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

/* ---------- sectors ---------- */

.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sectors li { background: var(--surface); padding: 26px 24px; }
.sectors h3 { font-size: 16.5px; margin-bottom: 8px; }
.sectors p { font-size: 14px; color: var(--ink-3); }
.sectors .tag { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px; }
@media (max-width: 900px) { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sectors { grid-template-columns: 1fr; } }

/* ---------- participant proof (UGC) ---------- */

.ugc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.ugc li {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ugc__shot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.ugc__body { padding: 19px; }
.ugc__quote { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--ink); }
.ugc__meta {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}
.ugc__meta strong { display: block; margin-bottom: 2px; color: var(--ink-2); font-size: 13px; font-weight: 600; }

/* Illustrative mode. The photograph carries the card, so the frame lightens and
   the caption sits quietly under it. The mild desaturation is the thing that
   makes three photographs from three different shoots read as one set — without
   it the temperature difference between them is the first thing you notice. */
.ugc-section--illustrative .ugc li { box-shadow: none; }
.ugc__card--illustrative .ugc__shot { filter: saturate(.82) contrast(.97); }
.ugc__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ugc__when { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.ugc__line { margin: 9px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ugc__note { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 900px) { .ugc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ugc { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- quiz CTA ---------- */

.cta-panel {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cta-panel h2 { color: #fff; }
.cta-panel p { color: rgba(255,255,255,.78); margin-top: 12px; max-width: 46ch; font-size: 15.5px; }
.cta-panel .btn { background: #fff; color: var(--accent-deep); }
.cta-panel .btn:hover { background: #F1EEE7; color: var(--accent-deep); }
@media (max-width: 620px) { .cta-panel { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */

.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-weight: 550;
  color: var(--ink);
  font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq .answer { padding: 0 40px 22px 0; font-size: 15.5px; color: var(--ink-2); max-width: 62ch; }

/* ---------- forms / signup ---------- */

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 550; color: var(--ink); }
.field input, .field select {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line-firm);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.consent { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; margin: 6px 0 20px; }
.consent input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--accent); }
.consent span { font-size: 13px; color: var(--ink-3); line-height: 1.55; }

.form-status { margin-top: 14px; font-size: 14px; }
.form-status[data-state="ok"] { color: var(--accent); }
.form-status[data-state="err"] { color: #A6392E; }

/* ---------- footer ---------- */

/* ---------- footer ----------
   Two bands on one hairline: identity and navigation up top, the legal position
   and registered details below it in small print. No boxes, no second accent —
   the credibility comes from saying who we are and what this isn't, plainly. */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: clamp(48px, 6vw, 72px) 34px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px clamp(48px, 8vw, 120px);
  align-items: start;
}
.site-footer__brand .brand { margin-bottom: 18px; }
.site-footer__line {
  max-width: 40ch;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer__nav { display: flex; gap: clamp(40px, 7vw, 88px); }
.site-footer__nav div { display: grid; gap: 11px; align-content: start; }
.site-footer__nav h2 {
  margin-bottom: 3px;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--ink); }
.site-footer .brand:hover .brand__name { color: var(--ink); }

.site-footer__legal {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.site-footer__legal .fine { max-width: 88ch; font-size: 12.5px; color: var(--ink-3); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 20px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}
/* one hairline pip between the registered details, not a wall of middots */
.site-footer__base span + span { position: relative; }
.site-footer__base > span + span::before {
  content: "";
  position: absolute;
  left: -12px;
  top: .45em;
  width: 1px;
  height: 11px;
  background: var(--line-firm);
}

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 34px; }
  .site-footer__nav { gap: clamp(40px, 12vw, 88px); }
}
@media (max-width: 620px) {
  .site-footer { padding-block: 44px 30px; }
  .site-footer__nav { flex-direction: column; gap: 26px; }
  .site-footer__base > span + span::before { display: none; }
  .site-footer__base { gap: 4px; flex-direction: column; }
}

/* ---------- quiz page ---------- */

.quiz-shell { min-height: calc(100vh - 66px); display: grid; align-items: start; padding-block: clamp(40px, 6vw, 72px) 80px; }

.progress { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.progress__track { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--accent); width: 0; transition: width .28s ease; }
.progress__label { font-size: 12.5px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }

.question h2 { font-size: clamp(24px, 3.2vw, 31px); }
.question__help { margin-top: 12px; font-size: 15px; color: var(--ink-3); max-width: 52ch; }

.options { display: grid; gap: 10px; margin-top: 30px; }
.option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line-firm);
  border-radius: var(--radius);
  padding: 17px 20px;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.option:hover { border-color: var(--accent); background: var(--accent-tint); }
.option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); }
.option__label { font-size: 16px; color: var(--ink); font-weight: 500; }
.option__desc { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.option__key {
  font-size: 12px; color: var(--ink-3);
  border: 1px solid var(--line-firm); border-radius: 4px;
  width: 22px; height: 22px; display: grid; place-items: center; flex: none;
}

.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 16px; }
.linkbtn { background: none; border: 0; font: inherit; font-size: 14px; color: var(--ink-3); cursor: pointer; padding: 6px 0; }
.linkbtn:hover { color: var(--ink); }
.linkbtn[hidden] { display: none; }

/* result */
.result__verdict {
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 8px;
  padding: 26px 28px;
  margin-bottom: 30px;
}
.result__verdict .eyebrow { margin-bottom: 10px; }
.result__verdict h2 { font-size: clamp(23px, 3vw, 30px); }
.result__verdict p { margin-top: 12px; font-size: 15.5px; max-width: 56ch; }

.result__why { display: grid; gap: 10px; margin: 0 0 30px; }
.result__why li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; font-size: 15px; color: var(--ink-2); }

.result-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 22px 26px; margin-bottom: 30px;
}
.result-price__amount { font-family: var(--serif); font-size: 32px; color: var(--ink); line-height: 1; }

[hidden] { display: none !important; }

/* ---------- dev-only variant switcher (see variants.js) ----------
   Never rendered for a real visitor — the gate is in the JS, not here. */

.devbar {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(28, 27, 24, .93);
  backdrop-filter: blur(8px);
  border-radius: 7px;
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .45);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, .62);
  max-width: calc(100vw - 32px);
}
.devbar__label { letter-spacing: .06em; text-transform: uppercase; }
.devbar__btn {
  font: inherit;
  font-size: 11px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  cursor: pointer;
}
.devbar__btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.devbar__btn--wide { width: auto; min-width: 34px; padding-inline: 7px; }
.devbar__btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.devbar__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.devbar__divider { width: 1px; height: 18px; background: rgba(255, 255, 255, .18); margin-inline: 2px; }
.devbar__angle { color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.devbar__hint { color: rgba(255, 255, 255, .38); white-space: nowrap; }
@media (max-width: 620px) { .devbar__angle, .devbar__hint { display: none; } }

/* Optional marketing consent. It is injected only when marketing measurement
   is enabled; accept and reject deliberately have equal visual weight. */
.marketing-consent {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  width: min(470px, calc(100vw - 40px));
  padding: 18px;
  background: var(--paper, #fcfaf6);
  border: 1px solid var(--line, #d9d4ca);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(28, 27, 24, .16);
  color: var(--ink, #1c1b18);
  font-size: 14px;
  line-height: 1.55;
}
.marketing-consent p { margin: 0; }
.marketing-consent a { color: inherit; text-underline-offset: 3px; }
.marketing-consent div { display: flex; gap: 10px; margin-top: 14px; }
.marketing-consent button {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--accent, #1b4d3e);
  border-radius: 5px;
  background: transparent;
  color: var(--accent, #1b4d3e);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.marketing-consent button:hover,
.marketing-consent button:focus-visible { background: rgba(27, 77, 62, .08); }
.cf-turnstile { margin: 16px 0; min-height: 1px; }