/* MIC Study & Career Pathway — interface styles.

   The brief asks for premium, clean and simple, not corporate. That is read
   here as: a lot of white, one strong accent, generous spacing, and colour
   used only where it carries meaning — the three career categories, the
   confidence levels, and the warning states. The MIC blue, green and pink
   appear as signals, never as decoration. */

:root {
  --blue: #1c8fff;
  --blue-dark: #0f6ecb;
  --blue-soft: #eaf4ff;
  --green: #5fe223;
  --green-dark: #3aa30f;
  --green-soft: #eefbe6;
  --pink: #fe007a;
  --pink-dark: #c8005f;
  --pink-soft: #fff0f6;

  --ink: #12203a;
  --ink-2: #3d4c66;
  --ink-3: #6b7a94;
  --ink-4: #97a3b8;

  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --line: #e5eaf2;
  --line-2: #d3dbe8;

  --warn: #b06800;
  --warn-bg: #fff6e8;
  --danger: #c02444;
  --danger-bg: #fdeef1;
  --ok: #17794c;
  --ok-bg: #e8f6ef;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(18, 32, 58, 0.05);
  --shadow: 0 2px 8px rgba(18, 32, 58, 0.06), 0 1px 2px rgba(18, 32, 58, 0.04);
  --shadow-lg: 0 12px 32px rgba(18, 32, 58, 0.10);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: 2.1rem; font-weight: 750; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 650; }
h4 { font-size: .95rem; font-weight: 650; }
p { margin: 0 0 .8em; }

.muted { color: var(--ink-3); }
.small { font-size: .84rem; }
.tiny { font-size: .76rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .82em; }

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

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { display: flex; gap: 3px; }
.brand-mark i { width: 7px; height: 18px; border-radius: 3px; display: block; }
.brand-mark i:nth-child(1) { background: var(--blue); }
.brand-mark i:nth-child(2) { background: var(--green); }
.brand-mark i:nth-child(3) { background: var(--pink); }
.brand small { display: block; font-weight: 500; font-size: .68rem; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }

.topnav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.topnav a {
  padding: 7px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 550; font-size: .89rem;
}
.topnav a:hover { background: var(--blue-soft); color: var(--blue-dark); text-decoration: none; }
.topnav a.active { background: var(--ink); color: #fff; }

main { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 80px; }
.wide { max-width: 1400px; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-tight { gap: 6px; }
.spread { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.stack > * + * { margin-top: 14px; }

/* ---------------------------------------------------------------- surfaces */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.card-body { padding: 20px; }
.card.hover:hover { box-shadow: var(--shadow); border-color: var(--line-2); }

.section-title { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 14px; }
.section-title h2 { margin: 0; }
.section-title .muted { font-size: .86rem; }

.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }

/* ---------------------------------------------------------------- controls */

button, .btn {
  font: inherit; font-weight: 600; font-size: .9rem;
  border-radius: 10px; border: 1px solid transparent; padding: 10px 16px;
  cursor: pointer; background: var(--ink); color: #fff; transition: .12s ease;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: var(--blue); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-accent { background: var(--pink); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { padding: 6px 11px; font-size: .82rem; border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; }

input, select, textarea {
  font: inherit; font-size: .92rem; width: 100%;
  padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px;
  background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
textarea { min-height: 90px; resize: vertical; }
label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field { margin-bottom: 14px; }
.field-inline { display: flex; align-items: center; gap: 9px; }
.field-inline input[type=checkbox] { width: auto; }
.field-inline label { margin: 0; font-weight: 500; font-size: .89rem; color: var(--ink); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 16px; }
legend { font-size: .82rem; font-weight: 700; color: var(--ink-2); padding: 0 6px; }

/* ---------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 650; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 999px; background: #eef1f6; color: var(--ink-2);
  white-space: nowrap;
}
.badge-blue { background: var(--blue-soft); color: var(--blue-dark); }
.badge-green { background: var(--green-soft); color: var(--green-dark); }
.badge-pink { background: var(--pink-soft); color: var(--pink-dark); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }

.cat-continuity { background: var(--blue-soft); color: var(--blue-dark); }
.cat-upgrade { background: var(--green-soft); color: var(--green-dark); }
.cat-transition { background: var(--pink-soft); color: var(--pink-dark); }

.conf-high { background: var(--ok-bg); color: var(--ok); }
.conf-medium { background: var(--warn-bg); color: var(--warn); }
.conf-low { background: #eef1f6; color: var(--ink-3); }

/* ---------------------------------------------------------------- scores */

.score {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 62px; padding: 8px 10px; border-radius: 12px;
  background: var(--blue-soft); color: var(--blue-dark);
}
.score b { font-size: 1.32rem; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.score span { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin-top: 3px; }
.score.high { background: var(--green-soft); color: var(--green-dark); }
.score.low { background: #f0f2f6; color: var(--ink-3); }

.meter { height: 7px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.meter.green > i { background: var(--green-dark); }
.meter.pink > i { background: var(--pink); }
.meter-row { display: grid; grid-template-columns: 1fr 92px 46px; gap: 10px; align-items: center; margin-bottom: 7px; font-size: .84rem; }
.meter-row .label { color: var(--ink-2); }
.meter-row .value { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.meter-row .value.na { color: var(--ink-4); font-weight: 500; font-size: .78rem; }

.stat { padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.stat b { display: block; font-size: 1.7rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.stat span { font-size: .78rem; color: var(--ink-3); }

/* ---------------------------------------------------------------- notices */

.notice {
  border-radius: var(--radius-sm); padding: 12px 15px; font-size: .87rem;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
}
.notice-warn { background: var(--warn-bg); border-color: #f0dcbb; color: #7a4900; }
.notice-danger { background: var(--danger-bg); border-color: #f3ccd6; color: #8d1832; }
.notice-info { background: var(--blue-soft); border-color: #c9e2ff; color: #0b4f92; }
.notice + .notice { margin-top: 8px; }

.legal {
  margin-top: 40px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: #f0f3f8; color: var(--ink-3); font-size: .78rem; line-height: 1.6;
}

/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; font-size: .87rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; background: var(--surface-2); }
tbody tr:hover { background: var(--surface-2); }
.table-wrap { overflow-x: auto; }

.compare th:first-child { width: 190px; position: sticky; left: 0; background: var(--surface-2); z-index: 2; }
.compare td:first-child { position: sticky; left: 0; background: #fff; font-weight: 600; color: var(--ink-2); z-index: 1; }
.compare td.best { background: var(--green-soft); }

/* ---------------------------------------------------------------- landing */

.hero { padding: 64px 0 42px; text-align: center; }
.hero h1 { font-size: 2.9rem; max-width: 17ch; margin: 0 auto .5rem; }
.hero p.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; margin: 0 auto 28px; }
.hero .row { justify-content: center; }
.hero-rule { display: flex; gap: 5px; justify-content: center; margin-bottom: 26px; }
.hero-rule i { width: 34px; height: 5px; border-radius: 3px; }
.hero-rule i:nth-child(1) { background: var(--blue); }
.hero-rule i:nth-child(2) { background: var(--green); }
.hero-rule i:nth-child(3) { background: var(--pink); }

.steps { counter-reset: step; }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; }
.step::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}

/* ---------------------------------------------------------------- program card */

.program-card { display: flex; flex-direction: column; gap: 12px; }
.program-card .title-row { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.program-card h3 { margin: 0 0 2px; font-size: 1.02rem; }
.program-card .inst { font-size: .85rem; color: var(--ink-3); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 14px; }
.fact { font-size: .8rem; }
.fact b { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); font-weight: 700; }
.fact span { color: var(--ink); font-weight: 550; }
.fact span.na { color: var(--ink-4); font-weight: 400; font-style: italic; }
.why { background: var(--surface-2); border-left: 3px solid var(--blue); padding: 11px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .87rem; }
.why.pink { border-left-color: var(--pink); background: var(--pink-soft); }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* ---------------------------------------------------------------- career map */

.map-flow { display: grid; gap: 14px; }
.map-stage { display: grid; gap: 10px; }
.map-stage > .stage-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; color: var(--ink-4);
}
.map-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.map-node { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; background: #fff; }
.map-node.continuity { border-top: 3px solid var(--blue); }
.map-node.upgrade { border-top: 3px solid var(--green-dark); }
.map-node.transition { border-top: 3px solid var(--pink); }
.map-node h4 { margin: 0 0 4px; font-size: .93rem; }
.map-arrow { text-align: center; color: var(--ink-4); font-size: 1.1rem; line-height: 1; }
.map-current {
  background: var(--ink); color: #fff; border-radius: var(--radius-sm);
  padding: 15px 18px; text-align: center;
}
.map-current b { font-size: 1.1rem; }

/* ---------------------------------------------------------------- misc */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: .78rem; padding: 4px 10px; border-radius: 999px;
  background: #eef1f6; color: var(--ink-2); border: 1px solid transparent; cursor: default;
}
.chip.gap { background: var(--warn-bg); color: var(--warn); }
.chip button { all: unset; cursor: pointer; margin-left: 4px; opacity: .6; }

details.data { margin-top: 8px; }
details.data > summary {
  cursor: pointer; font-size: .78rem; font-weight: 650; color: var(--blue-dark);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
details.data > summary::-webkit-details-marker { display: none; }
details.data > summary::before { content: "▸"; font-size: .7rem; }
details.data[open] > summary::before { content: "▾"; }
details.data > div { margin-top: 9px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: .82rem; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button {
  background: transparent; color: var(--ink-3); border-radius: 0; border: 0;
  border-bottom: 2px solid transparent; padding: 9px 14px; font-size: .88rem;
}
.tabs button:hover { transform: none; box-shadow: none; color: var(--ink); }
.tabs button.active { color: var(--ink); border-bottom-color: var(--blue); font-weight: 700; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px;
  box-shadow: var(--shadow-lg); z-index: 200; font-size: .88rem; max-width: 90vw;
}
.toast.error { background: var(--danger); }
.toast.ok { background: var(--ok); }

.spinner {
  width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
.spinner.dark { border-color: rgba(18,32,58,.15); border-top-color: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }

.loading { padding: 60px 0; text-align: center; color: var(--ink-3); }
.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--radius); }

.auth-shell { max-width: 420px; margin: 60px auto; }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.filters .field { margin: 0; }

.sticky-bar {
  position: sticky; bottom: 0; z-index: 30;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 12px 24px; margin: 24px -24px -80px;
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
}

@media (max-width: 720px) {
  .topbar-inner { padding: 10px 16px; flex-wrap: wrap; }
  main { padding: 20px 16px 70px; }
  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: 2.05rem; }
  .brand small { display: none; }
  .sticky-bar { margin: 20px -16px -70px; padding: 10px 16px; flex-wrap: wrap; }
}

@media print {
  .topbar, .card-actions, .sticky-bar, button { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Access, pricing and account.

   Same restraint as the rest of the interface: white space, one accent, and
   colour used only where it carries meaning. The pricing cards are the one
   place the pink is allowed to lead, because that is the single decision the
   whole screen exists to support — and even there it marks the option, it does
   not shout at anybody.
   ========================================================================== */

.notice-ok { background: var(--ok-bg); border-color: #c8e8d8; color: var(--ok); }
.text-warn { color: var(--warn); }

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line-2);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue-dark); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }

.page-head { margin-bottom: 20px; }
.page-head h1 { margin: 0 0 4px; font-size: 1.7rem; letter-spacing: -0.02em; }

.card-title { margin: 0 0 14px; font-size: 1.05rem; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.data-table tbody tr:last-child td { border-bottom: 0; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-2);
}
.pill-ok { background: var(--ok-bg); border-color: #c8e8d8; color: var(--ok); }
.pill-warn { background: var(--warn-bg); border-color: #f0dcbb; color: var(--warn); }
.pill-danger { background: var(--danger-bg); border-color: #f3ccd6; color: var(--danger); }

/* --- the header chip ------------------------------------------------------ */
.access-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface);
  white-space: nowrap;
}
.access-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.access-chip.ok { color: var(--ok); border-color: #c8e8d8; background: var(--ok-bg); }
.access-chip.warn { color: var(--warn); border-color: #f0dcbb; background: var(--warn-bg); }
.access-chip.locked { color: var(--pink-dark); border-color: #f8cfe2; background: var(--pink-soft); }
.access-chip:hover { filter: brightness(.97); }

/* --- the snapshot --------------------------------------------------------- */
.snapshot { max-width: 820px; margin: 0 auto; }
.snapshot-head { text-align: center; margin-bottom: 26px; }
.snapshot-head h1 { margin: 0 0 10px; font-size: 2rem; letter-spacing: -0.025em; line-height: 1.2; }
.snapshot-head .lead { color: var(--ink-2); max-width: 640px; margin: 0 auto; }

.snapshot-figures {
  display: grid; gap: 12px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.snapshot-figure {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px; text-align: center; box-shadow: var(--shadow-sm);
}
.snapshot-figure strong { display: block; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.snapshot-figure span { display: block; margin-top: 6px; font-size: .82rem; color: var(--ink-3); line-height: 1.35; }
.snapshot-figure.accent { border-color: #bfe0ff; background: var(--blue-soft); }
.snapshot-figure.accent strong { color: var(--blue-dark); }

.snapshot-teaser {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--green); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.snapshot-teaser p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }

.snapshot-detail { text-align: center; margin-bottom: 22px; }

.snapshot-locked {
  background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px;
}
.snapshot-locked h2 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.snapshot-locked ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.snapshot-locked li { margin-bottom: 5px; }

.snapshot-cta { text-align: center; margin-bottom: 26px; }
.snapshot-cta .btn { margin-bottom: 10px; }
.snapshot-legal { text-align: center; max-width: 620px; margin: 0 auto; }

/* --- pricing -------------------------------------------------------------- */
.paywall { max-width: 940px; margin: 0 auto; }
.paywall-head { text-align: center; margin-bottom: 28px; }
.paywall-head h1 { margin: 0 0 10px; font-size: 2rem; letter-spacing: -0.025em; }
.paywall-head .lead { color: var(--ink-2); max-width: 620px; margin: 0 auto; }

.pricing-grid {
  display: grid; gap: 18px; margin-bottom: 30px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}

.pricing-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.pricing-card.featured { border-color: var(--blue); box-shadow: var(--shadow); }
.pricing-card h2 { margin: 0 0 12px; font-size: 1.25rem; letter-spacing: -0.015em; }

.pricing-flag {
  position: absolute; top: -11px; left: 24px;
  background: var(--blue); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}

.pricing-amount { margin-bottom: 14px; min-height: 46px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pricing-amount strong { font-size: 2rem; letter-spacing: -0.03em; line-height: 1; }
.pricing-once { font-size: .82rem; color: var(--ink-3); }
.pricing-pending { font-size: .92rem; color: var(--ink-3); font-style: italic; }

.pricing-blurb { margin: 0 0 8px; color: var(--ink-2); font-size: .95rem; }
.pricing-note { margin: 0 0 16px; color: var(--ink-3); font-size: .86rem; }

.pricing-points { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.pricing-points li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: .91rem; color: var(--ink-2);
}
.pricing-points li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green-dark); font-weight: 700;
}

.pricing-fineprint { margin: 10px 0 0; font-size: .78rem; color: var(--ink-4); text-align: center; }

.compare-plans { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.compare-plans th, .compare-plans td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.compare-plans tbody th { text-align: left; font-weight: 500; color: var(--ink-2); }
.compare-plans thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.compare-plans tbody tr:last-child th, .compare-plans tbody tr:last-child td { border-bottom: 0; }
.compare-plans .tick { color: var(--green-dark); font-weight: 700; }
.compare-plans .cross { color: var(--ink-4); font-size: .85rem; }

.paywall-foot { margin-top: 26px; text-align: center; }
.paywall-foot p { max-width: 620px; margin: 0 auto 10px; }

/* --- the single-offer paywall ---------------------------------------------
 *
 * One product, one price, so one card rather than a grid of choices. The
 * layout puts what the client gets on the left and what it costs on the right,
 * and on a narrow screen the offer stacks underneath rather than shrinking.
 *
 * Built from the same tokens as the rest of the interface: no new colours, no
 * new radii, no new shadows. */
.paywall-single { max-width: 900px; }

.paywall-body {
  display: grid; gap: 22px; align-items: start;
  grid-template-columns: 1fr minmax(300px, 380px);
  margin-bottom: 26px;
}

.paywall-includes {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.paywall-includes-title {
  margin: 0 0 16px; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
}
.paywall-checklist { list-style: none; margin: 0; padding: 0; }
.paywall-checklist li {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 11px; font-size: .95rem; color: var(--ink-2); line-height: 1.45;
}
.paywall-checklist li:last-child { margin-bottom: 0; }
.paywall-checklist .check {
  flex: 0 0 auto; color: var(--green-dark); font-weight: 700; line-height: 1.45;
}

/* The offer itself. The blue edge marks it as the thing to act on without
 * shouting: no flag, no badge, no urgency. */
.offer-card {
  background: var(--surface); border: 1px solid var(--blue);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow);
  position: sticky; top: 18px;
}
.offer-title { margin: 0 0 18px; font-size: 1.15rem; letter-spacing: -0.015em; }

/* The three facts of the sale, in the order they matter: how much, that it
 * happens once, and that it does not end. */
.offer-price {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.offer-amount {
  font-size: 2.6rem; line-height: 1; letter-spacing: -0.035em; color: var(--ink);
}
.offer-amount-pending {
  font-size: 1.05rem; color: var(--ink-3); font-style: italic; letter-spacing: 0;
}
.offer-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.offer-term {
  background: var(--blue-soft); color: var(--blue-dark);
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  padding: 5px 11px; border-radius: 999px;
}

.offer-reassurance {
  margin: 0 0 18px; font-size: .88rem; color: var(--ink-3); line-height: 1.5;
}
.offer-fineprint {
  margin: 12px 0 0; font-size: .78rem; color: var(--ink-4); text-align: center;
}

/* --- the cancelled checkout ------------------------------------------------ */
.checkout-cancelled { text-align: center; padding: 12px 0; }
.checkout-cancelled h1 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -0.02em; }
.checkout-cancelled .lead { color: var(--ink-2); margin: 0 0 4px; }

/* --- lifetime, on the account screen --------------------------------------- */
.access-lifetime-badge {
  margin: 2px 0 6px; font-weight: 700; color: var(--ok); font-size: .95rem;
}

/* --- staff: admin mode and the client list ---------------------------------
 *
 * Deliberately quiet. Somebody working inside the tool needs to be able to see
 * that they are staff, not to be reminded of it — so the badge uses the same
 * pill shape as every other chip, in the brand's own pink rather than a new
 * colour invented for the occasion. */
.access-chip.admin {
  background: var(--pink-soft);
  color: var(--pink-dark);
  border-color: var(--pink);
  font-weight: 700;
  letter-spacing: .02em;
}

/* Whose plan is open, stated on every screen a member of staff works on. */
.working-on {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--pink-soft); border: 1px solid var(--pink);
  border-radius: var(--radius-sm); padding: 9px 14px; margin-bottom: 18px;
  font-size: .92rem;
}
.working-on-label {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pink-dark); font-weight: 700;
}
.working-on .btn { margin-left: auto; }

.clients { max-width: 1080px; margin: 0 auto; }
.clients-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.clients-head p { max-width: 52ch; }

.client-form { margin-bottom: 20px; }
.client-form h2 { margin: 0 0 14px; font-size: 1.05rem; letter-spacing: -0.01em; }
.client-form .field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 10px; }
.client-form .row { margin-top: 14px; }

.clients-table { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.clients-table th, .clients-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.clients-table thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.clients-table tbody th { font-weight: 600; color: var(--ink); }
.clients-table tbody tr:last-child th, .clients-table tbody tr:last-child td { border-bottom: 0; }
.clients-actions { white-space: nowrap; text-align: right; }
.clients-actions .btn { margin-left: 6px; }

.btn-sm { padding: 5px 11px; font-size: .82rem; }

/* --- account -------------------------------------------------------------- */
.account { max-width: 860px; margin: 0 auto; }
.account .card { margin-bottom: 18px; }
.account-legal { text-align: center; margin-top: 20px; }

.access-card { display: flex; flex-direction: column; gap: 16px; }
.access-card.locked { border-left: 3px solid var(--pink); }
.access-card.active { border-left: 3px solid var(--green); }
.access-card.warn { border-left: 3px solid var(--warn); }
.access-card h2 { margin: 0 0 4px; font-size: 1.2rem; letter-spacing: -0.015em; }
.access-card p { margin: 0; }

.access-state { display: flex; gap: 12px; align-items: flex-start; }
.access-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 8px; flex: none; }
.access-dot.ok { background: var(--green-dark); }
.access-dot.warn { background: var(--warn); }
.access-dot.locked { background: var(--pink); }

.access-upsell { margin-top: 4px; }
.access-upsell a { color: var(--blue-dark); }

.usage-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.usage-figure { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.usage-figure strong { display: block; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1; }
.usage-figure span { display: block; margin-top: 4px; font-size: .82rem; color: var(--ink-3); }
.usage-figure small { display: block; margin-top: 2px; font-size: .74rem; }

/* --- checkout return ------------------------------------------------------ */
.checkout-return { max-width: 620px; margin: 40px auto; }
.checkout-success { text-align: center; padding: 12px 0; }
.checkout-success h1 { margin: 14px 0 8px; font-size: 1.7rem; letter-spacing: -0.02em; }
.checkout-tick {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 700;
}

/* --- administration: access and billing ----------------------------------- */
.billing-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 20px; }
.billing-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.billing-kpi b { display: block; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.15; }
.billing-kpi span { display: block; margin-top: 4px; font-size: .8rem; color: var(--ink-3); }

.funnel-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.funnel-bar .funnel-label { flex: 0 0 190px; font-size: .84rem; color: var(--ink-2); }
.funnel-bar .funnel-track { flex: 1; height: 20px; background: var(--surface-2); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.funnel-bar .funnel-fill { height: 100%; background: var(--blue); opacity: .85; }
.funnel-bar .funnel-value { flex: 0 0 46px; text-align: right; font-size: .84rem; font-weight: 600; }

.grant-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.grant-form input, .grant-form select { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit; font-size: .88rem; }

/* --- mobile --------------------------------------------------------------- */
@media (max-width: 720px) {
  .snapshot-head h1, .paywall-head h1 { font-size: 1.55rem; }
  .snapshot-figures { grid-template-columns: repeat(2, 1fr); }
  .snapshot-figure strong { font-size: 1.55rem; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 22px 18px; }
  .pricing-amount strong { font-size: 1.7rem; }
  /* The offer stacks under what it buys, and stops sticking: on a short
   * viewport a sticky card can cover the very list it is selling. */
  .paywall-body { grid-template-columns: 1fr; }
  .clients-head { flex-direction: column; align-items: stretch; }
  .clients-table th, .clients-table td { padding: 10px 8px; font-size: .85rem; }
  .clients-actions { text-align: left; white-space: normal; }
  .clients-actions .btn { margin: 4px 6px 0 0; }
  .offer-card { position: static; padding: 22px 18px; }
  .paywall-includes { padding: 22px 18px; }
  .offer-amount { font-size: 2.1rem; }
  .access-card { gap: 12px; }
  .access-chip { font-size: .72rem; padding: 3px 8px; }
  .funnel-bar .funnel-label { flex: 0 0 118px; font-size: .78rem; }
  .compare-plans th, .compare-plans td { padding: 9px 8px; font-size: .84rem; }
}

@media (max-width: 420px) {
  .snapshot-figures { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; }
}

/* A lone button inside the access card must not stretch to the card's width:
   the card is a flex column, which would make a call to action look like a
   banner. Rows keep their buttons at their natural size. */
.access-card .row { display: flex; gap: 10px; flex-wrap: wrap; }
.access-card .row > .btn { flex: 0 0 auto; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(18, 32, 58, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 50;
}
.modal-card {
  background: #fff; border-radius: 14px; padding: 26px; max-width: 420px; width: 100%;
  box-shadow: 0 12px 40px rgba(16, 32, 64, .25);
}