/* PathMosaic's styles: layout and components. Every colour, font, corner and
   width is a name defined in theme.css (loaded first); change the look there.
   Data colours (AI exposure, growth, the Claude split) carry meaning and are
   also named in theme.css. */

/* Colours, fonts, corners and widths are named in theme.css; this file only
   refers to those names. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--sans);
}
a { color: var(--link); text-decoration-color: var(--link-underline); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); text-decoration-color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- Frame --------------------------------------------------------------- */

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 32px; }
header.site { border-bottom: 1px solid var(--line); }
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 28px;
  flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .home {
  font-family: var(--heading-font); font-size: 26px; font-weight: 600; color: var(--text);
  text-decoration: none; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 10px;
}
/* The mark and wordmark (Oct 18). The mark's colours come from theme.css. */
.brand .home svg { width: 28px; height: 28px; flex: none; }
.brand .home .wm { font-weight: 800; letter-spacing: -0.02em; }
.brand .home .wm-2 { color: var(--logo-path); }
.chip.preview { background: var(--preview-bg); color: var(--preview-text); font-size: 12px; }
header.site nav { display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: 15px; }
header.site nav a[aria-current="page"] { font-weight: 700; text-decoration: none; color: var(--text); }
/* A page's own menu, under the site menu. */
.subnav { border-bottom: 1px solid var(--line); background: var(--paper); }
.subnav .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; }
.subnav nav { display: flex; gap: 6px 20px; flex-wrap: wrap; font-size: 14px; }

ol.steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; align-items: center; flex-wrap: wrap; }
ol.steps li { display: flex; gap: 8px; align-items: center; color: var(--muted); }
ol.steps li.sep { width: 28px; height: 1px; background: var(--field-line); }
ol.steps li.done { color: var(--accent); }
ol.steps li.now { color: var(--text); font-weight: 700; }
.dot {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: #E7E1D5; color: var(--text-2);
}
li.done .dot { background: var(--accent-tint); color: var(--accent); }
li.now .dot { background: var(--accent); color: #FFFFFF; }

main.page { padding-top: 40px; padding-bottom: 64px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.layout > .main-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.layout > aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }

footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer.site .wrap { padding-top: 20px; padding-bottom: 32px; }

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, h2.serif, .serif { font-family: var(--heading-font); letter-spacing: var(--heading-tracking); }
h1, h2.serif, .serif { font-weight: var(--heading-weight); }
h1 { font-size: 40px; line-height: 1.1; margin: 0 0 10px; }
h2 { font-size: 20px; line-height: 1.25; margin: 0 0 12px; }
section.report > h2, .report-head h2, h2.serif { font-family: var(--heading-font); font-size: 22px; font-weight: var(--heading-weight); }
h3 { font-size: 17px; margin: 22px 0 8px; }
h4 { font-size: 13px; margin: 22px 0 4px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lede { font-size: 18px; color: var(--text-2); max-width: 46rem; margin: 0; line-height: 1.5; }
.eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.note { font-size: 13px; color: var(--muted); }
.hint { font-size: 14px; color: var(--muted); margin: 4px 0 8px; }
.src { font-size: 12px; color: var(--muted); font-weight: 400; }
.empty { color: var(--muted); font-style: italic; }
.headline { font-weight: 600; }

/* --- Blocks -------------------------------------------------------------- */

.card, section.report, form.review section {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
section.report { overflow-x: auto; }
section.report > *:last-child, .card > *:last-child { margin-bottom: 0; }
.card.tint { background: var(--guide-bg); border-color: var(--guide-line); }

.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.exp, .chip.exp { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.exp-low { background: var(--x-low); color: var(--text); }
.exp-moderate { background: var(--x-mod); color: var(--text); }
.exp-high { background: var(--x-high); color: #FFFFFF; }
.exp-very-high { background: var(--x-vhigh); color: #FFFFFF; }
.exp.big { font-size: 15px; padding: 6px 14px; }

/* "How to read this": one per report section. */
.howto, .explainer {
  margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text);
  background: var(--guide-bg); border: 1px solid var(--guide-line);
  padding: 12px 16px; border-radius: var(--radius); max-width: none;
}
.howto b, .explainer b { color: var(--text); }

.alert { background: var(--warn-bg); border: 1px solid #E9D3B0; border-radius: var(--radius); padding: 12px 16px; margin: 0; }
.hedge { color: var(--warn); font-size: 14px; margin: 6px 0; }
.hedge::before { content: "! "; font-weight: 700; }
.improve { font-size: 14px; background: var(--paper); border-radius: var(--radius); padding: 12px 16px; margin: 16px 0 0; }
.privacy { font-size: 14px; color: var(--text-2); max-width: 46rem; line-height: 1.55; }

/* Split bar: handed off vs worked on together. */
.split { display: flex; gap: 2px; height: 18px; border-radius: 9px; overflow: hidden; background: var(--surface); }
.split .handed { background: var(--handed); }
.split .together { background: var(--together); }
.split-legend { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-top: 8px; flex-wrap: wrap; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; margin: 14px 0; }
.mode { background: var(--paper); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.mode strong { display: block; margin-bottom: 4px; }
.sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.handed { background: var(--handed); }
.sw.together { background: var(--together); }

/* Horizontal bars for shares. */
.bars { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.bars .bar-row { display: grid; grid-template-columns: minmax(8rem, 22rem) minmax(4rem, 1fr) 4.5rem; gap: 12px; align-items: center; font-size: 14px; }
.bars .track { height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; }
.bars .fill { height: 100%; background: var(--x-vhigh); }
.bars .fill.teal { background: var(--accent); }
.bars .val { text-align: right; font-variant-numeric: tabular-nums; }

/* Key figures. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 18px 20px; margin: 18px 0 8px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.facts div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-size: 13px; color: var(--muted); }
.facts dd { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.facts dd .exp { font-size: 14px; }
.facts .hint { font-size: 12px; margin: 2px 0 0; line-height: 1.4; }
.facts.compact { gap: 8px; margin: 10px 0; padding-top: 10px; }
.facts.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts.compact dd { font-size: 18px; }
.report-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.report-head .rating { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; }

/* --- Forms --------------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); }
input[type=text], input[type=search], input:not([type]), input[type=password], select, textarea {
  width: 100%; font: 400 15px/1.4 var(--sans); color: var(--text); background: var(--surface);
  border: 1px solid var(--field-line); border-radius: 8px; padding: 10px 12px; margin-top: 6px; min-height: 44px;
}
textarea { resize: vertical; }
input[type=file] { font: inherit; margin-top: 8px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > label { flex: 1 1 12rem; }
.row > label.narrow { flex: 0 1 8rem; }
label.check, label.radio { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; color: var(--text); margin: 6px 0; }
label.check input, label.radio input { margin-top: 2px; }
fieldset.picker label.radio, fieldset.choice label.radio {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0; background: var(--surface);
}
fieldset.picker label.radio:has(input:checked), fieldset.choice label.radio:has(input:checked) { border-color: var(--accent); }
label.remove { color: var(--muted); font-size: 13px; }
fieldset { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
legend { font-size: 15px; font-weight: 700; color: var(--text); padding: 0; margin-bottom: 4px; }
fieldset.choice { background: var(--warn-bg); border-radius: var(--radius); padding: 16px; }
fieldset.choice label.radio { margin: 8px 0 0; }
.ticklist { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 16px; }

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: var(--radius); font: 600 15px var(--sans);
  text-decoration: none; cursor: pointer; margin-top: 12px;
  background: var(--accent); color: #FFFFFF; border: 1.5px solid var(--accent);
}
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
button.secondary, .button.secondary { background: var(--button-2-bg); color: var(--button-2-text); border: 1px solid var(--button-2-border); }
button.secondary:hover, .button.secondary:hover { background: var(--button-2-hover-bg); color: var(--button-2-text); border-color: var(--card-hover-border); }
button.link { background: none; border: 0; color: var(--text-2); text-decoration: underline; padding: 0 8px; }
button.link:hover { background: none; color: var(--text); }
button.big, .button.big { min-height: 52px; font-size: 16px; padding: 0 28px; }
button.add { margin-top: 10px; font-weight: 600; min-height: 38px; padding: 0 14px; font-size: 14px; }
.actions {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; z-index: 1;
}
.actions button { margin-top: 0; }
form.edit { margin: 0; }

/* The review page's sections. */
form.review { display: flex; flex-direction: column; gap: 24px; }
form.review section { display: flex; flex-direction: column; gap: 10px; }
form.review section > h2 { margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.group-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 0; }
.subcard { border-top: 1px solid var(--line-soft); padding: 12px 0; }
.subcard.new { opacity: .9; }

/* An entry that folds: a summary line, with the fields behind "Edit". */
details.entry { border-top: 1px solid var(--line-soft); }
details.entry > summary {
  list-style: none; display: flex; gap: 12px; align-items: center; padding: 14px 0; cursor: pointer; font-size: 15px;
}
details.entry > summary::-webkit-details-marker { display: none; }
details.entry > summary .what { flex-grow: 1; }
details.entry > summary .edit-link { color: var(--link); text-decoration: underline; font-size: 14px; }
details.entry[open] > summary .edit-link::after { content: " (close)"; }
details.entry .fields { padding: 4px 0 16px; }

.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--line-soft); border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 14px; }
.tag label.remove { margin: 0; font-size: 12px; }
.tag.inferred {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%;
  background: var(--surface); border: 1px dashed #9FB6AF; border-radius: var(--radius); padding: 16px 18px;
}
.tag.inferred > span:first-of-type { font-weight: 700; font-size: 16px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: var(--accent-tint); color: var(--accent); }
.evidence { font-size: 15px; font-style: italic; color: var(--text); }
.definition { font-size: 13px; color: var(--text-2); }
.infer { margin: 8px 0; }
.infer button { margin-top: 0; }

/* The form's hidden default button (review.html): present for Enter, never seen. */
.checks li > [data-when] { display: contents; }
.checks li > [data-when][hidden] { display: none; }
.picker-loading { opacity: 0.5; transition: opacity 0.15s; }
.default-submit { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Side guide ---------------------------------------------------------- */

aside .card { padding: 22px; }
aside h2 { font-size: 16px; margin: 0 0 12px; font-family: var(--sans); }
ul.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
ul.checks li { display: flex; gap: 10px; align-items: flex-start; }
ul.checks svg { flex-shrink: 0; margin-top: 3px; }
.w { color: var(--warn); }
.g { color: var(--accent); }
ol.next { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }
.step { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.step .dot { background: var(--accent-tint); color: var(--accent); }
.step strong { display: block; font-size: 15px; }
.jump { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

/* --- Tables -------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0; }
th, td { text-align: left; border-top: 1px solid var(--line-soft); padding: 10px 8px; vertical-align: top; }
thead th { border-top: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
th:first-child, td:first-child { padding-left: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.compact td, table.compact th { padding: 6px 6px; font-size: 14px; }
tr.current td { font-weight: 600; }

details { margin: 8px 0; }
details > summary { cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 14px; }
details.occ { border-top: 1px solid var(--line-soft); padding-top: 10px; }
details.occ > summary { font-size: 17px; color: var(--text); }
blockquote { margin: 10px 0; padding-left: 14px; border-left: 3px solid var(--line); color: var(--text-2); }

/* --- About (R8) --------------------------------------------------------- */

.about { display: flex; flex-direction: column; gap: 24px; max-width: 56rem; }
.about-head h1 { max-width: 44rem; }
.about section.report p { max-width: 46rem; line-height: 1.55; }
.about h3:first-of-type { margin-top: 4px; }
.nowrap { white-space: nowrap; }
/* About and Sources (redesign, Oct 2026) */
.about .about-title { font-size: 32px; line-height: 1.15; margin: 4px 0 12px; }
.about .worry { font-size: 19px; font-weight: 600; color: var(--text); }
.about section.report h3 { line-height: 1.35; margin-top: 28px; }
/* Headings, the exposure table and its note keep to the text column (46rem), like the paragraphs. */
.about section.report h3, .about section.report table, .about section.report .src { max-width: 46rem; }
/* About, reframed (Oct 20): our reading set apart as interpretation; the three ways in. */
.about .about-reading { max-width: 46rem; margin-top: 24px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.about .about-reading h3 { margin-top: 0; }
.about .about-reading .src { font-weight: 400; margin-left: 6px; }
.about .about-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 12px; max-width: 46rem; }
.about .about-ways a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.about .about-ways a:hover { border-color: var(--text-2); }
.about .about-ways span { font-size: 14px; color: var(--muted); line-height: 1.45; }
ul.refs-list { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
ul.refs-list > li { padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 15px; line-height: 1.55; display: flex; flex-direction: column; gap: 4px; }
ul.refs-list .used { font-size: 14px; color: var(--text-2); }
ul.refs-list .data-name { font-weight: 700; font-size: 16px; }
ul.refs-list .credit { margin-top: 4px; padding: 10px 12px; background: var(--guide-bg); border-left: 3px solid var(--field-line); font-size: 13px; color: var(--text-2); }
ul.refs { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }

/* --- Landing ------------------------------------------------------------- */

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { font-size: var(--hero-size); line-height: 1.08; margin: 12px 0 18px; }
.hero .lede { font-size: 19px; }
.kicker { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--kicker); }
.example { display: flex; flex-direction: column; gap: 14px; }
.example .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.example h2 { font-family: var(--heading-font); font-size: 22px; margin: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 24px; margin: 40px 0 0; }
a.card.path { display: flex; flex-direction: column; gap: 12px; color: var(--text); text-decoration: none; transition: border-color .15s; }
a.card.path:hover, a.card.path:focus-visible { border-color: var(--card-hover-border); }
a.card.path h2 { font-family: var(--heading-font); font-size: 24px; margin: 0; }
a.card.path p { margin: 0; color: var(--text-2); }
a.card.path .button { align-self: flex-start; }
.promises { display: flex; gap: 12px 28px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--text-2); margin-top: 28px; }
.promises span { display: inline-flex; gap: 8px; align-items: center; }

/* --- Start --------------------------------------------------------------- */

.ways { display: flex; flex-direction: column; gap: 16px; }
.way h2 { margin-bottom: 4px; }
.drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px;
  border: 2px dashed var(--field-line); border-radius: var(--radius); background: #FBF9F4; text-align: center;
  font-size: 16px; font-weight: 600; color: var(--text);
}
.drop .src { font-size: 14px; }

/* --- Student results ----------------------------------------------------- */

.dark-quote { background: var(--text); color: #FFFFFF; border-radius: var(--radius); padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.dark-quote .eyebrow { color: #F0C58A; }
.dark-quote blockquote { border: 0; padding: 0; margin: 0; color: #FFFFFF; font-family: var(--heading-font); font-size: 21px; line-height: 1.4; font-weight: 500; }
.dark-quote blockquote + blockquote { font-family: var(--sans); font-size: 15px; color: #D9DEE5; }
.dark-quote .note { color: #B8C1CC; }
.dark-quote a { color: #F0C58A; }
.career-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 18px; }
.career { display: flex; flex-direction: column; gap: 12px; }
.career .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.career h2 { font-family: var(--heading-font); font-size: 22px; margin: 0; }
fieldset.ip { border-top: 1px solid var(--line-soft); margin: 8px 0 0; padding: 8px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 16px; }

/* Feedback widgets. */
.clear { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--line-soft); }
.clear button { min-height: 32px; padding: 0 12px; margin: 0; border-radius: 8px; font-size: 13px; background: var(--surface); color: var(--text); border: 1px solid var(--field-line); }
.clear button:hover { background: var(--accent-tint); color: var(--text); }
.thanks { margin: 0; font-size: 14px; color: var(--accent); font-weight: 600; }
.survey { border: 2px solid var(--accent); display: flex; flex-direction: column; gap: 6px; }
.survey fieldset { margin-top: 10px; }
.rating { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.rating button { width: 52px; padding: 0; margin: 0; }
.rating button[aria-pressed="true"] { background: var(--accent); color: #FFFFFF; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chipbox { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--field-line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; }
.chipbox:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.survey button[type=submit] { align-self: flex-start; }
.fb-tab {
  position: fixed; right: 0; top: 45%; transform: rotate(-90deg) translateY(-100%); transform-origin: top right;
  margin: 0; min-height: 40px; border-radius: var(--radius) 10px 0 0; background: var(--text); border-color: var(--text); font-size: 14px; z-index: 5;
}
.fb-tab:hover { background: #000000; border-color: #000000; }
/* On a phone (Oct 18) the side tab covered text: it becomes a small pill tucked
   into the bottom corner instead. */
@media (max-width: 640px) {
  .fb-tab { top: auto; bottom: 12px; right: 10px; transform: none; min-height: 0; padding: 5px 11px; font-size: 12px; border-radius: 999px; opacity: .88; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
}
.fb-dialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; width: min(92vw, 30rem); background: var(--surface); color: var(--text); }
.fb-dialog::backdrop { background: rgba(27, 36, 48, .35); }
.fb-dialog h2 { font-family: var(--heading-font); font-size: 22px; margin: 0 0 6px; }
.fb-dialog .fb-scale { display: flex; justify-content: space-between; width: 292px; max-width: 100%; margin: 4px 0 6px; font-size: 12px; }
.fb-dialog .fb-label { display: block; font-weight: 600; margin-top: 14px; }
.fb-dialog .fb-label + .hint { margin-top: 2px; }

/* The stats page. */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 16px; }
.stat-tiles .card { display: flex; flex-direction: column; gap: 4px; padding: 20px; }
.stat-tiles strong { font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 24px; }
.bars.counts .bar-row { grid-template-columns: minmax(8rem, 18rem) minmax(4rem, 1fr) 10.5rem; }
.bars.counts .val { white-space: nowrap; }
.bars.wide .bar-row { grid-template-columns: minmax(8rem, 16rem) minmax(4rem, 1fr) 7.5rem; }
svg.daily { display: block; margin: 8px 0; overflow: visible; }
svg.daily .axis { stroke: var(--line); stroke-width: 1; }
svg.daily .bar { fill: var(--accent); }
svg.daily .hit { fill: transparent; }
svg.daily .day:hover .bar { fill: var(--accent-hover); }
svg.daily .deploy { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
svg.daily .deploy-label, svg.daily .tick { font: 11px var(--sans); fill: var(--muted); }

/* Visible to screen readers only. */
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Legal pages and the invite form -------------------------------------- */

.legal section.report h2 { margin: 0 0 10px; font-family: var(--heading-font); font-size: 22px; }
.legal section.report li { margin-bottom: 8px; max-width: 46rem; line-height: 1.55; }
.legal section.report ul { margin: 0; padding-left: 20px; }
.narrow-page { max-width: 34rem; }
form.invite { display: flex; flex-direction: column; gap: 12px; }
form.invite input[type=text] { font-size: 18px; }
form.invite button { align-self: flex-start; }

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > aside { position: static; order: -1; }
  .layout > aside .optional { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .report-head { grid-template-columns: minmax(0, 1fr); }
  .report-head .rating { align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  main.page { padding-top: 24px; }
  h1 { font-size: 30px; }
  .hero h1 { font-size: 34px; }
  .card, section.report, form.review section { padding: 18px; }
  section.report > h2, h2.serif { font-size: 22px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts dd { font-size: 20px; }
  .bars .bar-row { grid-template-columns: minmax(0, 1fr) 4rem; }
  .bars .track { grid-column: 1 / -1; grid-row: 2; }
  .bars.counts .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  ol.steps li:not(.now):not(.sep) span.label { display: none; }
  header.site nav { font-size: 14px; }
}

/* T5: switch between all lower-exposure moves and those at the occupation's entry education. CSS only. */
.lx-radio { position: absolute; opacity: 0; pointer-events: none; }
.lx-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.lx-switch label { border: 1px solid var(--field-line); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 0.92em; }
#lx-all:checked ~ .lx-switch label[for="lx-all"],
#lx-level:checked ~ .lx-switch label[for="lx-level"] { background: var(--accent); color: var(--surface); border-color: var(--accent); }
#lx-all:focus-visible ~ .lx-switch label[for="lx-all"],
#lx-level:focus-visible ~ .lx-switch label[for="lx-level"] { outline: 2px solid currentColor; outline-offset: 2px; }
#lx-all:checked ~ .lx-body .lx-row:not(.lx-a),
#lx-level:checked ~ .lx-body .lx-row:not(.lx-l),
#lx-all:checked ~ .lx-body .lx-l-only,
#lx-level:checked ~ .lx-body .lx-a-only { display: none; }
.tag-more { display: inline-block; margin-top: 3px; font-size: 0.85em; font-weight: 600; color: var(--warn); }

/* --- Growth, charts and share cards (Sept 26) ----------------------------- */

/* Growth carries its direction three ways: colour, arrow, sign. The pair
   passes the colour-blind check (pipeline/cards.py). Exposure keeps the
   one-hue blue scale above: no exposure level is coloured good or bad. */
.growth { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.growth svg { width: .62em; height: .62em; fill: currentColor; }
.growth.up { color: var(--grow-up); }
.growth.down { color: var(--grow-down); }
.growth.flat { color: var(--muted); }
td .growth { font-weight: 600; }

.hero-single { display: block; max-width: 52rem; }
.hero-single h1 { font-size: var(--hero-size); }
.reality { margin-top: 18px; max-width: var(--text-max); font-size: 16px; line-height: 1.6; }
.reality p { margin: 0 0 10px; }
.reality p:last-child { margin: 0; }
h2.choose { font-size: 24px; margin: 40px 0 0; }
.choose + .choices { margin-top: 16px; }
.example-wrap { margin-top: 44px; max-width: 40rem; }
.example-wrap > h2 { font-size: 24px; margin: 0 0 14px; }

.chart-wrap { margin: 16px 0 8px; }
figure.chart-wrap { margin: 18px 0 8px; }
figure.chart-wrap figcaption { font-size: 14px; color: var(--text-2); margin-bottom: 8px; max-width: 46rem; }
svg.quad { width: 100%; height: auto; display: block; font-family: var(--sans); }
svg.quad-narrow { display: none; }
svg.quad .tick { font-size: 11px; fill: var(--muted); }
svg.quad .grp { font-size: 12px; font-weight: 700; }
svg.quad .cnt { font-size: 12px; fill: var(--muted); }
svg.quad .hl { font-size: 13px; font-weight: 700; fill: var(--text); }
svg.quad a circle { fill-opacity: .8; stroke: transparent; stroke-width: 7px; cursor: pointer; }
svg.quad a.up circle { fill: var(--grow-up); }
svg.quad a.down circle { fill: var(--grow-down); }
svg.quad a.flat circle { fill: var(--muted); }
svg.quad a:hover circle, svg.quad a:focus circle { fill-opacity: 1; stroke: var(--text); stroke-width: 1.5px; }
svg.quad a:focus { outline: none; }
/* The pop-up a dot opens (static/quad.js). */
.quad-pop { position: absolute; z-index: 20; width: min(300px, calc(100vw - 16px)); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--popup-shadow); padding: 14px 16px; }
.quad-pop .quad-title { font-family: var(--heading-font); font-weight: 600; font-size: 18px; margin: 0 24px 8px 0; line-height: 1.25; }
.quad-pop .quad-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quad-pop .growth { font-size: 18px; }
.quad-close { position: absolute; top: 6px; right: 6px; min-height: 0; width: 30px; height: 30px; padding: 0;
  background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; }
.quad-close:hover { background: var(--line-soft); color: var(--text); }
.quad-tip { position: absolute; z-index: 19; pointer-events: none; background: var(--text); color: #FFFFFF;
  font-size: 13px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
ul.points { padding-left: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 46rem; line-height: 1.55; }

.share-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.share-card .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.share-card h1 { margin: 0; }
.share-growth { font-size: 15px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.share-growth .growth { font-size: 40px; }
.share-actions { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 10px; }
.share-actions h2 { margin: 0; }
.share-actions p { margin: 0; }
.share-actions .button { width: 100%; justify-content: center; }
p.share a { font-weight: 600; }
/* AI exposure beside growth, always as a pair: the point of the card is to
   read them together. */
.exp-growth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.exp-growth > div { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; align-items: flex-start; }
.exp-growth > div + div { border-left: 1px solid var(--line); }
.exp-growth .lab { font-size: 13px; color: var(--muted); }
.exp-growth .val .growth { font-size: 26px; line-height: 1.1; }
.share-card .exp-growth .val .growth { font-size: 40px; }
.share-card .exp-growth .exp.big { font-size: 18px; padding: 8px 16px; }
.share-card h1 { margin: 6px 0 14px; }
.facts.compact.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.print-only { display: none; }
.card-back { margin: 0 0 8px; }
h2.card-sub { font-size: 16px; margin: 18px 0 8px; }
ol.moves-top { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
ol.moves-top li { line-height: 1.5; }
ol.moves-top .mt-name { font-weight: 600; margin-right: 6px; }
ol.moves-top .mt-share { color: var(--text-2); margin-right: 8px; font-variant-numeric: tabular-nums; }
ol.moves-top .exp { font-size: 12px; padding: 2px 9px; margin-right: 4px; }

@media (max-width: 900px) {
  .share-page { grid-template-columns: minmax(0, 1fr); }
  .share-actions { position: static; }
}
@media (max-width: 640px) {
  .hero-single h1 { font-size: var(--hero-size-phone); }
  .share-growth .growth { font-size: 32px; }
  svg.quad-wide { display: none; }
  .share-card .exp-growth .val .growth { font-size: 28px; }
  .exp-growth > div { padding: 10px 12px; }
  svg.quad-narrow { display: block; }
}

/* "Print / Save as PDF" gives a one-page brief of a card. */
@media print {
  header.site nav, .subnav, footer.site, .share-actions, .card-back, .fb-tab, .clear, .survey { display: none !important; }
  body { background: #FFFFFF; }
  .print-only { display: block; }
  .share-page { display: block; }
  .card { border: 0; box-shadow: none; padding: 0; }
  .growth.up { color: #0F7B5C; } .growth.down { color: #C4461B; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Site header and menus (Sept 28) ------------------------------------- */

header.site { background: var(--header-bg); border-bottom: 1px solid var(--line); }
header.site .wrap { padding-top: 12px; padding-bottom: 12px; }
.brand .home { font-family: var(--heading-font); font-weight: var(--heading-weight); font-size: 20px; color: var(--text); text-decoration: none; }
header.site nav { gap: 4px; font-size: 14px; }
header.site nav a { text-decoration: none; color: var(--nav-link); padding: 6px 12px; border-radius: var(--radius); font-weight: 500; }
header.site nav a:hover { background: var(--nav-hover-bg); color: var(--text); }
header.site nav a[aria-current="page"] { background: var(--nav-active-bg); color: var(--text); font-weight: 600; }
.chip.preview { border: 1px solid var(--line); }
.subnav { background: var(--header-bg); }
.subnav nav a { text-decoration: none; color: var(--nav-link); }
.subnav nav a:hover { color: var(--text); }
footer.site { background: var(--header-bg); }

/* Cards: a thin border, no shadow. */
.card, section.report, form.review section { box-shadow: var(--shadow); }

/* Icons: ticks meaning "done" in --ok; the home page's promise ticks and
   decorative icons in --icon. */
svg.tick { color: var(--ok); }
.promises svg.tick { color: var(--icon); }
svg.deco { color: var(--icon); }
svg.warnicon { color: var(--warn); }

/* The home page is narrower than other pages: its two path cards sit only a
   little wider than the intro text. */
body[data-page="landing"] main.page > .wrap,
body[data-page="landing"] header.site > .wrap,
body[data-page="landing"] footer.site > .wrap { max-width: calc(var(--landing-max) + 64px); }
body[data-page="landing"] .lede { max-width: var(--text-max); }

/* --- Career card page, v2 (Oct 18) ---------------------------------------- */
/* Built from the "Career card page — v2" board. One article: the occupation,
   AI exposure and growth (tasks, where people use AI, Claude), the chart,
   career moves both ways, education and training. */

.cp { max-width: 62rem; margin: 0 auto; padding: 32px; }
.cp h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.25; }
.cp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; }
.cp-id { display: flex; flex-direction: column; gap: 6px; flex: 1 1 28rem; max-width: 42rem; }
.cp-id h1 { margin: 0; font-size: clamp(34px, 5vw, 48px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; }
.cp-id p { margin: 6px 0 0; color: var(--text-2); }
.cp-also { font-size: 14px; color: var(--muted); }
.cp-share { flex: none; display: flex; flex-direction: column; gap: 6px; width: 11.5rem; margin-top: 28px; }
.cp-share .button, .cp-share button { width: 100%; justify-content: center; min-height: 40px; font-size: 14px; }
.cp-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px; margin-top: 22px; }
.cp-boxes > div, .cp-eg > div, .cp-sum > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.cp .lab { font-size: 13px; color: var(--muted); }
.cp-boxes .big { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-boxes .mid { font-size: 18px; font-weight: 700; margin-top: 4px; }
.cp-sec { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.cp-eg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 16px; }
.cp-eg > div { gap: 8px; padding: 16px 18px; }
.cp-eg-top { margin-top: 12px; }
.cp-get.cp-get-one { grid-template-columns: 1fr; gap: 16px; }
.cp-eg .small { color: var(--text-2); }
.cp-eg details p { margin: 8px 0 0; }
.cp-growth .growth { font-size: 30px; line-height: 1.1; font-weight: 800; }
/* What the data says (Oct 21): one sentence under the two boxes, body size. */
.cp-says { margin: 12px 2px 0; font-size: 16px; color: var(--text); max-width: 62rem; }
.cp-says a { font-weight: 600; white-space: nowrap; }
.cp-proj { margin: 8px 2px 0; color: var(--text-2); }
.cp-proj summary { cursor: pointer; font-weight: 600; color: var(--text); }
.cp-proj p { margin: 8px 0 0; max-width: 62rem; }
.cp-h3 { margin: 28px 0 10px; font-size: 18px; }
.cp-h4 { margin: 28px 0 12px; font-size: 16px; text-transform: none; letter-spacing: normal; color: var(--text); font-weight: 700; }
.cp-count { color: var(--task-count); }
.cp-count.teal { color: var(--use-did); }
.cp-lede { margin: 0 0 16px; color: var(--text-2); max-width: 44rem; }
.cp-p { margin: 0 0 8px; font-size: 14px; }

.sq { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--field-line); }
.sq.small { margin-right: 3px; }
.sq-e1 { background: var(--task-alone); box-shadow: none; }
.sq-e2 { background: var(--task-software); box-shadow: none; }
.sq-e0 { background: var(--task-notmuch); box-shadow: none; }
.cp-squares-row { display: grid; gap: 5px; max-width: 40rem; }
.cp-squares-row .sq { width: auto; height: 22px; border-radius: 4px; }
.cp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13px; color: var(--text-2); }
.cp-legend .sq { width: 12px; height: 12px; margin-right: 6px; }

.cp-table { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.cp-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cp-table th { background: var(--bg); text-align: left; font-weight: 600; padding: 10px 14px; vertical-align: bottom; }
.cp-table td { padding: 10px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.cp-table thead + tbody tr:first-child td { border-top: 0; }
.cp-table .num { text-align: right; white-space: nowrap; }
.cp-table th.num { white-space: normal; width: 9.5rem; }
.cp-table td.cp-sw { width: 28px; padding-right: 0; }
.cp-acts { min-width: 44rem !important; }
.cp-acts td:first-child { font-size: 15px; line-height: 1.35; }
.cp-squares, .cp-acts td { white-space: nowrap; }
.cp-acts td:first-child { white-space: normal; }
.cp-bar { display: inline-flex; align-items: center; gap: 8px; }
.cp-bar .bar { display: inline-block; height: 10px; border-radius: 2px; }
.cp-bar .bar.help { background: var(--use-help); }
.cp-bar .bar.did { background: var(--use-did); }
.cp-bar strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-more { margin: 10px 0 0; }
.cp-more > summary { color: var(--link); text-decoration: underline; font-weight: 500; }
.cp-more .cp-table { margin-top: 8px; }
.cp-more .cp-table td:first-child { border-top: 0; }

.cp-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 12px; margin: 0 0 18px; }
.cp-sum > div { border-radius: 8px; padding: 12px 16px; gap: 2px; }
.cp-sum .big { font-size: 24px; font-weight: 800; line-height: 1.2; }
.cp-callout { margin: 22px 0 0; padding: 14px 18px; background: var(--paper); border-radius: 8px; font-size: 15px; line-height: 1.5; }

.cp-claude { max-width: 36rem; }
.cp-made { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cp-made li { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr 3.2rem; gap: 12px; align-items: center; }
.cp-made .track { height: 10px; background: var(--line); border-radius: 4px; overflow: hidden; }
.cp-made .track span { display: block; height: 100%; background: var(--handed); }
.cp-made .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-claude .split { background: var(--line); }
.cp-read { margin-top: 18px; font-size: 14px; color: var(--text-2); }
.cp-read p { margin: 8px 0 0; max-width: 46rem; }

.cp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 24px; }
.cp-moves-h { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
ol.cp-moves { list-style: none; margin: 0 0 12px; padding: 0; }
ol.cp-moves li { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 8px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
ol.cp-moves .rk { color: var(--muted); font-weight: 700; }
ol.cp-moves strong { font-weight: 600; }
ol.cp-moves .sub { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
ol.cp-moves .sub .exp { font-size: 12px; padding: 1px 8px; }
ol.cp-moves .sub .growth { font-size: 13px; }
ol.cp-moves .sh { font-weight: 600; font-variant-numeric: tabular-nums; }

.cp-get { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 12px; margin-top: 10px; }
.cp-get > div { background: var(--paper); border-radius: 8px; padding: 14px 16px; font-size: 14px; }
.cp-progs { margin: 6px 0 0; padding-left: 18px; columns: 2; column-gap: 24px; }
.cp-paths { margin-top: 32px; padding: 18px 20px; border-radius: var(--radius); background: var(--paper);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cp-paths > span:first-child { font-weight: 600; }
.cp-paths .row { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-sources { margin: 18px 0 0; }

@media (max-width: 640px) {
  .cp { padding: 20px 16px; }
  .cp-share { width: 100%; margin-top: 4px; }
  .cp-progs { columns: 1; }
  .cp-made li { grid-template-columns: minmax(7rem, 1fr) 1fr 3rem; }
  .cp-table th, .cp-table td { padding: 9px 10px; }
  .cp-table th.num { width: 6.5rem; }
}
@media print {
  .cp-share, .cp-paths, .cp-more > summary { display: none !important; }
  .cp-more { display: block; }
  .cp { padding: 0; max-width: none; }
}

/* --- Homepage, redesign (Oct 18) -------------------------------------------- */
/* Headline, two path cards, and the example card in the share image's D
   layout, made responsive (chart beside on desktop, below on phones). */

.home-intro { max-width: var(--text-max); padding-top: 16px; }
.home-intro h1 { font-size: clamp(32px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 16px; }
.home-intro .lede { font-size: 19px; }
.home-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 24px; margin-top: 36px; }
.home-paths .card { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.home-paths h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.home-pill { align-self: flex-start; padding: 4px 10px; border-radius: var(--pill); background: var(--paper); color: var(--nav-link);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.home-paths .button { align-self: flex-start; margin-top: 8px; gap: 8px; }
.home-example { margin-top: 64px; }
.home-ex-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.home-ex-head h2 { font-size: 24px; margin: 0; }
.home-card { padding: 28px; }
.home-card h3 { font-size: clamp(30px, 5vw, 40px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; margin: 8px 0 6px; }
.home-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 28px 36px; align-items: start; }
.home-left { display: flex; flex-direction: column; gap: 14px; }
.home-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: 8px; }
.home-box > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; }
.home-box > div + div { border-left: 1px solid var(--line); }
.home-box dt { font-size: 13px; color: var(--muted); }
.home-box dd { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; }
.home-box .exp { font-size: 18px; padding: 3px 12px; font-weight: 700; }
.home-growth .growth { font-size: 28px; font-weight: 800; }
.home-left h4 { margin: 10px 0 0; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 800; text-transform: none; color: var(--text); }
.home-squares { display: grid; gap: 4px; }
.home-squares .sq { width: auto; height: 32px; border-radius: 4px; }
.home-examples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.35; }
.home-examples li { display: flex; gap: 8px; }
.home-examples .sq { flex: none; width: 12px; height: 12px; margin-top: 3px; }
.home-examples .sq-e0 { background: #D1D5DB; }
.t-e1 { color: var(--task-alone); } .t-e2 { color: var(--task-software); } .t-e0 { color: var(--muted); }
.home-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.home-chart-line { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; }
.home-chart-line .ln { display: block; }
@media (max-width: 640px) { .home-chart-line .ln { display: inline; } }
.home-right .chart-wrap { margin: 0; }
/* The column is half the card: the phone-shaped chart reads better there. */
.home-right svg.quad-wide { display: none; }
.home-right svg.quad-narrow { display: block; }
.home-src { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

.st-gh-next { margin-top: 24px; }
.cp-common { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.35; }
.cp-common .src { display: inline-block; min-width: 2.6em; }
/* Pay in a state (Oct 18) */
.nw-state { margin-top: 12px; }
.nw-state-out { margin: 8px 0 0; font-size: 15px; }
.nw-state-table { font-size: 14px; }

/* Look up an occupation (Oct 18): the form on /find and the home page. */
.find-form { display: flex; flex-direction: column; gap: 6px; max-width: 36rem; }
.find-form label { font-weight: 600; font-size: 15px; }
.find-row { display: flex; gap: 8px; align-items: stretch; }
.find-row button { margin: 0; flex: none; }
.find-row input { flex: 1; min-width: 0; margin-top: 0; }
/* Search as the home page's front door (Oct 18). */
.home-search { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; max-width: 40rem; }
.home-search .find-form { max-width: none; }
.home-search .find-form label { font-size: 16px; color: var(--text); }
.home-search .find-row input { font-size: 18px; min-height: 56px; padding: 12px 16px; border-radius: 10px; border-width: 2px; }
.home-search .find-row button { min-height: 56px; padding: 0 26px; font-size: 17px; border-radius: 10px; }
.home-try { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.chip-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--field-line); background: var(--surface); color: var(--text); text-decoration: none; }
.chip-link:hover { border-color: var(--card-hover-border); background: var(--paper); }
.home-deeper { font-size: 18px; margin: 48px 0 0; color: var(--text-2); }
.home-deeper + .home-paths { margin-top: 14px; }
.card-searched { margin: 0 0 14px; padding: 10px 14px; background: var(--paper); border-radius: 8px; }
.find-results { margin-top: 28px; }
.find-list { list-style: none; margin: 8px 0 0; padding: 0; }
.find-list > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.find-list > li.find-group { display: block; border-top: 0; padding: 10px 0 0; }
.find-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.find-figs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Footer (Oct 18): the three promises and three links, as on the mockups. */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
footer.site .promises { margin: 0; color: var(--text-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* --- Guide and FAQ (Oct 18) ------------------------------------------------ */
.guide-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 12px; margin: 8px 0 12px; }
.guide-boxes > div { background: var(--paper); border-radius: 8px; padding: 14px 16px; font-size: 15px; }
.guide-boxes p { margin: 6px 0 0; }
.guide-boxes ul { margin: 6px 0 0; padding-left: 18px; }
.guide-boxes li { margin: 2px 0; }
ul.guide-groups { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.guide-groups li { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; align-items: start; }
ul.guide-groups .exp { justify-self: start; }
.guide-group { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 28px 0 4px; }
.guide-entry { border-top: 1px solid var(--line-soft); padding: 14px 0 4px; scroll-margin-top: 16px; }
.guide-entry h4 { margin: 0 0 6px; font-size: 18px; text-transform: none; letter-spacing: normal; color: var(--text); }
.guide-entry h4 .n { color: var(--muted); }
.guide-entry p { margin: 6px 0; }
.guide-entry:target { background: var(--paper); border-radius: 6px; padding-left: 12px; padding-right: 12px; }
details.faq-item { border-top: 1px solid var(--line-soft); padding: 12px 0; margin: 0; }
details.faq-item > summary { font-size: 17px; color: var(--text); }
details.faq-item p { margin: 8px 0 0; }
@media (max-width: 640px) { ul.guide-groups li { grid-template-columns: 1fr; gap: 4px; } }

/* --- Working-adult report, redesign (stage 4, Oct 18) ----------------------- */
.rp { display: flex; flex-direction: column; gap: 24px; max-width: 62rem; margin: 0 auto; }
.rp section.report { padding: 28px 32px; }
.rp-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; }
.rp-strip-h { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rp-strip .small { margin: 2px 0 0; }
.rp-strip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-strip-actions form { margin: 0; }
.rp-strip-note { flex-basis: 100%; margin: 0; }
.rp-h1 { margin: 4px 0 10px; font-size: clamp(30px, 4.5vw, 40px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }
.rp h2 { font-size: 22px; margin: 0 0 12px; }
.rp h3 { font-size: 18px; margin: 28px 0 10px; }
.rp .lab { font-size: 13px; color: var(--muted); }
.rp-lede { color: var(--text-2); max-width: 46rem; margin: 0 0 14px; }
.rp-links { margin-top: 14px; }
.rp-bars { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; max-width: 40rem; }
.rp-bars li { display: grid; grid-template-columns: minmax(10rem, 17rem) 1fr 3.2rem; gap: 12px; align-items: center; }
.rp-bars .track { height: 10px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rp-bars .track span { display: block; height: 100%; background: var(--x-high); }
.rp-bars .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-howto { margin: 6px 0 12px; font-size: 14px; }
.rp-howto dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 10px 18px; margin: 10px 0 0; }
.rp-howto dl > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 8px; align-items: start; }
.rp-howto dt { font-weight: 700; } .rp-howto dd { margin: 0; color: var(--text-2); }
ol.rp-moves, ul.rp-moves { list-style: none; margin: 8px 0 0; padding: 0; }
.rp-move { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.rp-move .rk { color: var(--muted); font-weight: 700; }
.rp-mh { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rp-mh .exp { font-size: 12px; padding: 1px 8px; }
.rp-mh .growth { font-size: 14px; }
.rp-share { color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.rp-move .src { margin: 4px 0 0; }
.rp-ov { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; }
.rp-ovbar { display: inline-block; width: 90px; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; flex: none; }
.rp-ovbar span { display: block; height: 100%; background: var(--accent); }
.rp-carry { margin-top: 6px; font-size: 14px; }
.rp-carry > summary { font-weight: 500; color: var(--link); text-decoration: underline; }
.rp-carry-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 12px 24px;
  margin-top: 8px; padding: 12px 14px; background: var(--paper); border-radius: 8px; }
.rp-carry-cols ul { margin: 4px 0 0; padding-left: 18px; } .rp-carry-cols li { margin: 3px 0; }
.rp-carry-h { margin: 0; font-weight: 700; }
.rp-all td, .rp-all th { padding: 4px 8px; }
.rp-side td:first-child { color: var(--text-2); }
.rp-side td, .rp-side th { vertical-align: middle; }
.rp-tasks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.rp-tasks li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; align-items: start; }
.rp-tasks .sq { margin-top: 4px; }
.rp-h2like { font-size: 22px !important; }
@media (max-width: 640px) {
  .rp section.report { padding: 20px 16px; }
  .rp-bars li { grid-template-columns: minmax(7rem, 1fr) 1fr 3rem; }
  .rp-howto dl > div { grid-template-columns: 1fr; }
}
@media print { .rp-strip-actions, .rp-carry > summary { display: none !important; } }

/* --- Student results, redesign (stage 5, Oct 18) ---------------------------- */
.st .st-h2 { font-size: 30px; margin: 4px 0 6px; letter-spacing: -0.01em; }
.st h3 { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.st-h4 { font-size: 15px; margin: 16px 0 6px; }
.st-also { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.st-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 10px; }
.st-show { margin-top: 6px; }
.st-show > summary { font-weight: 600; color: var(--link); }
.st-show[open] > summary { margin-bottom: 4px; }
.st-subjects { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 4px; max-width: 30rem; font-size: 15px; }
.st-subjects li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px; border-radius: 6px; }
.st-subjects li.on { background: var(--accent-tint); font-weight: 600; }
.st-subjects .tick { vertical-align: -4px; color: var(--ok); }
.st-subjects .v { font-variant-numeric: tabular-nums; }
.st-subjects.all { font-size: 14px; }
.st-jobs { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-jobs li { padding-left: 12px; border-left: 3px solid var(--line); }
.st-get, .st-ai { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 16px 32px; }
.st-gh { font-weight: 700; margin: 0 0 4px; }
.st-get.st-get-one { grid-template-columns: 1fr; gap: 28px; }
.st-get-one > div + div { border-top: 1px solid var(--line-soft); padding-top: 20px; }
.st-get-one .st-bars { max-width: 40rem; }
.st-bars li { grid-template-columns: minmax(8rem, 1fr) minmax(3rem, 7rem) 3.6rem; }
.st-bars .track span.help { background: var(--use-help); }
.st-bars .track span.made { background: var(--use-did); }
.st-counts { max-width: 30rem; }
.st-counts li.on { font-weight: 700; }
.st-defs { margin: 10px 0; display: grid; gap: 6px; font-size: 14px; }
.st-defs div { display: grid; grid-template-columns: 8rem 1fr; gap: 10px; }
.st-defs dt { font-weight: 700; } .st-defs dd { margin: 0; color: var(--text-2); }
.st-fold { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; }
.st-fold > summary { font-weight: 600; cursor: pointer; }
.st-fold[open] > summary { margin-bottom: 8px; }
.st-count { display: inline-block; min-width: 1.6em; text-align: center; font-size: 13px; background: var(--line); border-radius: 10px; padding: 0 6px; margin-left: 4px; }
.st-zone > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.st-zone > summary::-webkit-details-marker { display: none; }
.st-zn { font-weight: 700; }
.st-zc { margin-left: auto; font-size: 14px; color: var(--text-2); font-weight: 500; }
.st-fits td, .st-fits th { padding: 5px 8px; }
.st-fits .exp { font-size: 12px; padding: 1px 8px; }
.st-mine td { background: var(--accent-tint); }
.st-tag { font-size: 12px; color: var(--muted); white-space: nowrap; }
.st-rel { list-style: none; margin: 4px 0 10px; padding: 0; font-size: 14px; }
.st-rel li { display: grid; grid-template-columns: 1fr 5.5rem 5.5rem; gap: 8px; padding: 3px 0; border-top: 1px solid var(--line-soft); }
.st-rel .v { text-align: right; font-variant-numeric: tabular-nums; }
.st-quote { margin: 10px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); font-size: 16px; }
@media (max-width: 640px) {
  .st-bars li { grid-template-columns: 1fr 3.6rem; }
  .st-bars .track { display: none; }
  .st-rel li { grid-template-columns: 1fr auto; }
  .st-rel li > span:nth-child(3) { grid-column: 2; }
  .st-defs div { grid-template-columns: 1fr; gap: 2px; }
  .st-zc { margin-left: 0; flex-basis: 100%; }
}

/* --- Pay strip, education bar, right now, sticky bar, rail (Oct 18) -------- */
.nw-pay { margin-top: 16px; max-width: 40rem; }
.nw-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: baseline; }
.nw-v { font-size: 14px; color: var(--text-2); }
.nw-track { position: relative; height: 6px; background: var(--line); border-radius: 3px; margin: 8px 0 4px; }
.nw-mark { position: absolute; top: -4px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: var(--x-very-high, #0F2F86); }
.nw-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.nw-edu { margin-top: 8px; max-width: 40rem; }
.nw-bar span.gap { background: repeating-linear-gradient(45deg, var(--line) 0 4px, transparent 4px 8px); }
.nw-key li.gap .sw { background: repeating-linear-gradient(45deg, #C9CED6 0 2px, transparent 2px 4px); }
.nw-key li.mine { font-weight: 700; color: var(--text); }
.nw-now { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.nw-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.nw-now ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.nw-now li { padding-left: 10px; border-left: 3px solid var(--line); }
.nw-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--header-bg, #fff); border-bottom: 1px solid var(--line); }
.nw-sticky-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.nw-sticky .exp { font-size: 12px; padding: 1px 8px; }
.nw-sl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.nw-sg { font-size: 14px; }
.nw-rail { display: none; }
@media (min-width: 1360px) {
  .nw-rail { display: flex; flex-direction: column; gap: 10px; position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 40; font-size: 13px; max-width: 150px; }
  .nw-rail a { color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 8px; line-height: 1.25; }
  .nw-rail .ln { display: inline-block; flex: none; width: 14px; height: 1px; background: var(--line); transition: width .15s; }
  .nw-rail a.on { color: var(--text); font-weight: 700; }
  .nw-rail a.on .ln { width: 26px; height: 2px; background: var(--text); }
}
@media print { .nw-sticky, .nw-rail { display: none !important; } }
.nw-both { display: flex; flex-direction: column; gap: 4px; }
.nw-sub { margin: 12px 0 0; font-weight: 600; font-size: 14px; }
.nw-why { margin-top: 6px; }
/* Look up certifications, training, licenses, apprenticeships (DOL links, Oct 18) */
.nw-find ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.nw-find li a { font-weight: 600; }
.nw-find li .muted { display: block; font-size: 13px; }
.nw-find > .src { margin-top: 8px; }
.nw-cred { margin-top: 6px; font-size: 14px; max-width: 30rem; }
.nw-cred td, .nw-cred th { padding: 3px 8px 3px 0; }
.nw-cred .n { text-align: right; font-variant-numeric: tabular-nums; }
.nw-cred tr.muted td { color: var(--muted); }
.cp-get .nw-find { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.cp-get .nw-find:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cp-get .nw-find:first-child .nw-sub { margin-top: 0; }
/* Pictures for the figures (Oct 18): coloured education bars, pay by degree as
   columns, credential dots and pay by state as a tile map. */
.nw-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--line); }
.nw-bar span { display: block; height: 100%; background: #C9CED6; }
.nw-bar span.mine { box-shadow: inset 0 0 0 3px #E8A317; }
.nw-key { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--text-2); }
.nw-key b { color: var(--text); }
.nw-key .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #C9CED6; margin-right: 6px; vertical-align: -1px; }
.nw-key li.mine { font-weight: 700; color: var(--text); }
.nw-key li.mine .sw { box-shadow: 0 0 0 2px #E8A317; }
.nw-cols { display: flex; align-items: flex-end; gap: 10px; max-width: 34rem; margin-top: 10px; }
.nw-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nw-col .t { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: 160px; }
.nw-col .v { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.nw-col .b { display: block; width: 100%; max-width: 92px; min-height: 4px; background: var(--accent, #0E5E57); border-radius: 6px 6px 0 0; }
.nw-col .l { font-size: 13px; color: var(--text-2); line-height: 1.25; margin-top: 6px; height: 34px; }
.nw-col.mine .b { box-shadow: inset 0 0 0 3px #E8A317; }
.nw-waffles { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 10px 0 6px; }
.nw-waffles p { margin: 6px 0 0; font-size: 14px; }
.nw-waffles strong { font-size: 20px; }
.nw-waffle { display: grid; grid-template-columns: repeat(10, 11px); gap: 3px; }
.nw-waffle i { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.nw-waffle.this i.on { background: var(--accent, #0E5E57); }
.nw-waffle.all i.on { background: #9CA3AF; }
.nw-map-wrap { container-type: inline-size; max-width: 40rem; margin-top: 10px; }
.nw-map { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.nw-tile { aspect-ratio: 1; width: 100%; min-width: 0; overflow: hidden; border: 0; border-radius: 5px; padding: 0; margin: 0; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; cursor: pointer; color: #111827; }
.nw-tile b { font-size: 13px; }
.nw-tile span { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nw-tile.b0 { background: #D7EDE9; } .nw-tile.b1 { background: #A9D6CE; } .nw-tile.b2 { background: #6FB6AA; }
.nw-tile.b3 { background: #2F8F80; color: #fff; } .nw-tile.b4 { background: #0E5E57; color: #fff; }
.nw-tile.np { background: repeating-linear-gradient(45deg, #F3F4F6 0 5px, #E5E7EB 5px 10px); color: var(--muted); }
.nw-tile.on { outline: 3px solid #E8A317; outline-offset: 1px; position: relative; z-index: 1; }
.nw-tile:focus-visible { outline: 3px solid var(--text); outline-offset: 1px; }
@container (max-width: 480px) { .nw-tile span { display: none; } .nw-tile b { font-size: 10px; } .nw-map { gap: 3px; } }
.nw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; color: var(--text-2); }
.nw-legend i.nw-tile { display: inline-block; width: 26px; height: 12px; aspect-ratio: auto; border-radius: 3px; cursor: default; }
.nw-legend span + i.nw-tile.np { margin-left: 12px; }
.nw-state-out { min-height: 1.5em; }
@media print { .nw-tile.on { outline: none; } }
.nw-hires { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; }
.nw-ops { display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--text-2); }
.nw-ops i { width: 16px; height: 16px; border-radius: 3px; border: 2px solid #86198F; background: linear-gradient(90deg, #86198F var(--f), transparent var(--f)); }
.nw-ops.all i { border-color: #9CA3AF; background: linear-gradient(90deg, #9CA3AF var(--f), transparent var(--f)); }
.nw-ops i.x { border-color: #D8A8DD; background: linear-gradient(90deg, #D8A8DD var(--f), transparent var(--f)); }
.nw-ops i.x:nth-child(11) { margin-left: 6px; }
.nw-ops span { margin-left: 8px; }
.nw-hires-read { display: block; font-size: 13px; }
.cp-share-what { margin: 4px 0 0; font-size: 12px; line-height: 1.4; }
.dl-panel { margin-top: 18px; padding: 16px 18px; background: var(--paper); border-radius: 10px; }
.dl-head { display: flex; justify-content: space-between; align-items: center; }
.dl-touch { display: none; margin: 6px 0 0; }
@media (hover: none) { .dl-touch { display: block; } }
.dl-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 16px; margin-top: 12px; max-width: 40rem; }
.dl-pages figure { margin: 0; }
.dl-pages img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.dl-pages figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.dl-share { margin: 14px 0 0; }
@media print { .dl-panel { display: none !important; } }
.nw-jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 0; padding-bottom: 8px; }
.nw-jump::-webkit-scrollbar { display: none; }
.nw-jump a { flex: none; font-size: 13px; text-decoration: none; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; white-space: nowrap; background: var(--surface, #fff); }
.nw-jump a.on { background: var(--text); border-color: var(--text); color: var(--surface, #fff); }
/* The bar's section row on windows under 1,360 px; the side list takes over at
   1,360 px and up (Oct 18, John). Sections land below the bar, not under it. */
.report[id], .cp-sec h2[id], #cp-title, .st-tabs { scroll-margin-top: 104px; }
@media (min-width: 1360px) { .nw-jump { display: none; } .report[id], .cp-sec h2[id], #cp-title, .st-tabs { scroll-margin-top: 64px; } }
/* Career tabs on the student results (Oct 18): one tab per career when there are two or more. */
.st-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; margin: 24px 0 0; border-bottom: 2px solid var(--line); }
.st-tabs button { flex: none; white-space: nowrap; }
.st-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 14px; font: inherit; font-weight: 700; color: var(--text-2); cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 6px 6px 0 0; }
.st-tabs button:hover { color: var(--text); background: var(--paper); }
.st-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent, #0E5E57); }
.st-tabs .exp { font-size: 11px; padding: 1px 7px; }
.st-tabs + .st-career { margin-top: 0; }
@media print { .st-tabs { display: none !important; } .st-career[hidden] { display: block !important; } }

/* Tap-to-explain (Oct 20, explain.js): a dotted underline on abbreviations in
   source labels; the explanation floats above the page, so nothing moves. */
abbr.term { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; }
abbr.term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.term-pop { position: absolute; z-index: 60; box-sizing: border-box; padding: 10px 12px; border-radius: 6px; background: #111827; color: #FFFFFF; font-size: 13px; line-height: 1.45; font-weight: 400; box-shadow: 0 4px 14px rgba(17, 24, 39, .25); }
@media print { .term-pop { display: none !important; } abbr.term { border-bottom: 0; } }

/* ===========================================================================
   Sleek layer (Oct 21). The look of the home page's scroll story carried to
   every page: a white page, heavy tightly set titles and figures, tinted tiles
   with rounded corners instead of bordered boxes, pill buttons and search, a
   few dark panels, and figures that rise, fill or pop in once as they scroll
   into view. Later rules win, so this layer restyles what is above without
   rewriting it. Every value comes from theme.css.
   =========================================================================== */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }

/* --- Header, with search on every page but home --------------------------- */
header.site .wrap { padding-top: 14px; padding-bottom: 14px; gap: 12px 24px; }
.brand .home { font-size: 24px; }
.brand .home .wm { font-weight: 900; letter-spacing: -0.03em; }
.hsearch { flex: 1 1 15rem; max-width: 26rem; position: relative; margin: 0; }
.hsearch input[type=search] { width: 100%; min-height: 42px; margin: 0; padding: 0 16px 0 40px; border-radius: var(--pill);
  border: 1px solid transparent; background: var(--tile); font-size: 15px; }
.hsearch input[type=search]:focus { background: var(--surface); border-color: var(--field-line); }
.hs-icon, .hs-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hs-icon { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hs-toggle { display: none !important; }
@media (max-width: 720px) {
  html.js .hs-toggle:not([hidden]) { display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; min-height: 44px; padding: 0; margin: 0 0 0 auto; }
  .hs-toggle svg { width: 18px; height: 18px; }
  html.js .hsearch { display: none; order: 10; flex-basis: 100%; max-width: none; }
  html.js.hs-open .hsearch { display: block; }
}

/* --- Type ------------------------------------------------------------------ */
h1 { font-size: clamp(36px, 5.2vw, 60px); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.02; }
h2 { font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); }
.lede { font-size: 19px; }
.cp-id h1, .about-title, .st-career h2:first-of-type { letter-spacing: var(--display-tracking); }
.cp-id h1 { font-size: var(--title-size); font-weight: var(--display-weight); line-height: 1; }
.cp-sec h2, section.report > h2, .report-head h2, h2.about-title, h2.serif, .about h2 {
  font-size: var(--section-size); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 14px; }
h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; }

/* --- Panels: tinted, rounded, no border ------------------------------------ */
.card, form.review section { border: 0; border-radius: var(--radius-xl); background: var(--panel); }
/* Long reading pages (the card, the reports): sections sit on the page itself,
   separated by space and a big heading, not boxed. */
section.report { border: 0; background: transparent; padding: 0; overflow: visible; }
.layout > .main-col { gap: 72px; }
.card.cp, article.cp { background: transparent; border: 0; padding: 8px 0 0; }
.cp-sec { border-top: 0; margin-top: 80px; padding-top: 0; }
.card.tint, .howto, .explainer { border: 0; border-radius: var(--radius-lg); }

/* --- Figure tiles ---------------------------------------------------------- */
.cp-boxes > div, .cp-eg > div, .cp-sum > div { border: 0; border-radius: var(--radius-lg); background: var(--tile); padding: 20px 22px; }
.cp-boxes { gap: 14px; margin-top: 36px; }
.cp-eg { gap: 14px; }
.cp-eg-top { margin-top: 14px; }
.cp-boxes .big, .cp-sum .big { font-size: var(--figure-size); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.05; }
.cp-boxes .mid { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.cp .lab { font-size: 14px; }
/* AI exposure: a dark tile, the group's own colour kept, with a light ring so
   the darkest group still reads on it. */
.cp-eg > div:has(.exp.big) { background: var(--ink-panel); color: var(--ink-panel-text); gap: 14px; }
.cp-eg > div:has(.exp.big) .lab, .cp-eg > div:has(.exp.big) .src, .cp-eg > div:has(.exp.big) .small { color: var(--ink-panel-sub); }
.cp-eg > div:has(.exp.big) abbr.term { border-bottom-color: var(--ink-panel-sub); }
.exp.big { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; padding: 6px 22px; }
.cp-eg .exp.big { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
/* Projected growth: tinted by direction. */
.cp-eg > div:has(.cp-growth .growth.up) { background: var(--grow-up-bg); }
.cp-eg > div:has(.cp-growth .growth.down) { background: var(--grow-down-bg); }
.cp-growth .growth { font-size: clamp(40px, 4.6vw, 56px); font-weight: var(--display-weight); letter-spacing: -0.04em; line-height: 1; }
.cp-says { font-size: 18px; margin-top: 22px; }
.cp-says a { font-weight: 700; }
.facts { border-top: 0; padding-top: 0; gap: 12px; }
.facts > div { background: var(--tile); border-radius: var(--radius-lg); padding: 16px 18px; }
.facts dd { font-weight: var(--display-weight); letter-spacing: -0.03em; }

/* --- Buttons: pills -------------------------------------------------------- */
button, .button { border-radius: var(--pill); font-weight: 700; padding-left: 22px; padding-right: 22px; }
button.secondary, .button.secondary { background: var(--paper); border-color: transparent; }
button.secondary:hover, .button.secondary:hover { background: #E5E9F0; border-color: transparent; }
button.link { border-radius: 0; padding: 0 8px; }
.cp-share { flex-direction: row; flex-wrap: wrap; width: auto; max-width: 25rem; margin-top: 0; align-self: flex-end; }
.cp-share .button, .cp-share button { width: auto; min-height: 44px; }
.cp-share-what { flex-basis: 100%; }
input[type=text], input[type=search], input:not([type]), input[type=password], select, textarea { border-radius: var(--radius); }
.find-row input[type=search] { border-radius: var(--pill); min-height: 52px; padding: 0 20px; }
.find-row button { min-height: 52px; }

/* --- Task squares, bars, tables -------------------------------------------- */
.cp-squares-row { gap: 7px; max-width: none; }
.cp-squares-row .sq { height: 34px; border-radius: 8px; }
.bars .track, .cp-made .track { height: 12px; border-radius: var(--pill); }
.bars .fill, .cp-made .track span { border-radius: var(--pill); }
.cp-table { border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cp-table th { background: var(--tile); }
.cp-callout, .cp-get > div, .mode, .improve { border-radius: var(--radius-lg); }
.cp-get > div { background: var(--tile); padding: 18px 20px; font-size: 15px; }
ol.cp-moves li { padding: 12px 0; font-size: 15px; }

/* --- Closing panel on the card: dark, centred ------------------------------ */
.cp-paths { margin-top: 88px; padding: 48px 32px; border-radius: var(--radius-xl); background: var(--ink-panel); color: var(--ink-panel-text);
  flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.cp-paths > span:first-child { font-size: var(--section-size); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.05; }
.cp-paths .row { justify-content: center; }
.cp-paths .button { background: var(--surface); color: var(--ink-panel); border-color: var(--surface); }
.cp-paths .button.secondary { background: #1E293B; color: var(--ink-panel-text); border-color: #1E293B; }

/* --- Motion: once, as a figure scrolls into view ---------------------------- */
@keyframes pm-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pm-pop { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
@keyframes pm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .cp-sec, section.report, .about > section, .rv { animation: pm-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 16%; }
    .cp-squares-row .sq { animation: pm-pop linear both; animation-timeline: view(); animation-range: entry 50% cover 40%; }
    .bars .fill, .cp-made .track span, .cp-bar .bar, .nw-meter { transform-origin: left center; animation: pm-grow linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
  }
}

@media print {
  .hsearch, .hs-toggle { display: none !important; }
  .cp-eg > div:has(.exp.big), .cp-paths { background: none !important; color: var(--text) !important; }
  .cp-eg > div:has(.exp.big) .lab, .cp-eg > div:has(.exp.big) .src { color: var(--muted) !important; }
}
@media (max-width: 640px) {
  .cp-sec { margin-top: 56px; }
  .cp-paths { padding: 36px 20px; }
  .cp-boxes > div, .cp-eg > div { padding: 16px 18px; }
}

/* Card head: the title gets the full width; buttons sit in a row under it. */
.cp-head { flex-direction: column; align-items: stretch; gap: 22px; }
.cp-id { flex: none; max-width: none; }
.cp-id p { max-width: 46rem; font-size: 18px; }
.cp-share { max-width: none; align-self: flex-start; }
.cp-share-what { max-width: 46rem; }
/* Recent conditions, the pay strip and pay by state: tiles of their own. */
.nw-now, .nw-pay, .nw-state { background: var(--tile); border-radius: var(--radius-lg); padding: 22px 24px; margin-top: 14px; border: 0; }
.nw-now ul { margin-bottom: 4px; }
.nw-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }
.nw-sub { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
.nw-pay { max-width: none; }
.nw-pay > * { max-width: 40rem; }
.nw-now li { border-left-color: var(--field-line); }
@media (max-width: 640px) {
  .cp-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cp-boxes > div:nth-child(3):last-child { grid-column: 1 / -1; }
  .cp-boxes .big { font-size: 26px; }
  .cp-boxes .mid { font-size: 20px; }
  .cp-eg { gap: 10px; }
  .cp-eg > div { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  .exp.big { font-size: 22px; padding: 5px 18px; }
  .cp-growth .growth { font-size: 38px; }
  .cp-id p, .cp-says { font-size: 16px; }
}
.cp-h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: var(--display-weight); letter-spacing: -0.025em; line-height: 1.1; margin-top: 36px; }

/* --- The home page's scroll story (Oct 21) ---------------------------------
   Full-width scenes, one idea each. Text-only scenes are as tall as their
   words (John: no empty scrolling); scenes with a picture get room for it.
   The task squares stay on screen while they fill (a pinned scene). */
body[data-page="landing"] main.page { padding: 0; }
body[data-page="landing"] main.page > .wrap { max-width: none; padding: 0; }
.story-hero, .story-scene, .story-pin-in, .story-future, .story-deeper { padding-left: 24px; padding-right: 24px; }
.story-hero { min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 56px; padding-bottom: 56px; }
.story-hero h1 { font-size: var(--hero-size); max-width: 54rem; margin: 0 0 18px; line-height: 1.02; }
.story-hero .lede { margin: 0 auto; }
.story-hero .home-search { width: 100%; max-width: 40rem; margin: 32px auto 0; text-align: left; }
.story-hero .home-try { justify-content: center; text-align: center; }
.story-skip { margin-top: 22px; font-weight: 700; color: var(--accent); }
.story-cue { margin: 40px 0 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.story-scene { min-height: 720px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 88px; padding-bottom: 88px; }
.story-short { min-height: 0; padding-top: 104px; padding-bottom: 104px; }
.story-dark { background: var(--ink-panel); color: var(--ink-panel-text); }
.story-dark .src, .story-dark .src a { color: #94A3B8; }
.story-dark .story-sub { color: #E2E8F0; }
.story-tint { background: var(--tile); }
.story-scene > .src, .story-pin-in > .src { margin: 18px auto 0; max-width: 46rem; }
.story-big { margin: 0; font-size: clamp(36px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.story-big2 { margin: 6px 0 0; font-size: clamp(54px, 8.5vw, 110px); line-height: 1; letter-spacing: -0.04em; font-weight: var(--display-weight); }
.story-big2 .growth { font-weight: var(--display-weight); }
.story-big3 { margin: 0; max-width: 52rem; font-size: clamp(30px, 4.8vw, 58px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.story-mid { margin: 0; font-size: clamp(26px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; }
.story-mid .src { font-size: 14px; letter-spacing: 0; vertical-align: middle; }
.story-huge { margin: 6px 0 0; font-size: clamp(64px, 12vw, 160px); line-height: 1; letter-spacing: -0.04em; font-weight: var(--display-weight); }
.story-rest { font-size: .42em; color: var(--text); letter-spacing: -0.02em; }
.story-sub { margin: 18px auto 0; max-width: 40rem; font-size: 20px; color: var(--text-2); }
.story-note { margin: 14px 0 0; font-size: 16px; color: var(--text-2); }
.story-title { margin: 12px 0 0; font-size: clamp(44px, 8.5vw, 112px); line-height: 1; letter-spacing: -0.03em; font-weight: var(--display-weight); }
.story-accent { margin-top: 20px; color: #7FB0FF; }
.story-orange { color: #FDBA74; }
.story-blue { color: var(--task-count); }
.story-green { color: var(--grow-up); }
.story-pill { margin-top: 14px; font-size: clamp(28px, 3.9vw, 44px); font-weight: 800; padding: 9px 30px; letter-spacing: -0.02em; }
.count-n { counter-reset: num var(--n); }
.count-n::after { content: counter(num); }

.story-pin { position: relative; view-timeline-name: --pin; }
.story-pin-in { position: sticky; top: 0; min-height: 720px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.story-squares { display: grid; gap: 8px; width: 100%; max-width: 54rem; margin-top: 40px; }
.story-squares .sq { width: auto; height: auto; aspect-ratio: 1; border-radius: 8px; }
.story-legend { margin: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 15px; color: var(--text-2); }
.story-dark .story-legend { color: #E2E8F0; }
.story-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.story-legend .sq { width: 12px; height: 12px; margin: 0; }
.story-legend i, .story-dots i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.story-dots { margin-top: 36px; width: 100%; max-width: 46rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.story-dots i { width: 14px; height: 14px; }
i.up { background: var(--grow-up); } i.down { background: var(--grow-down); } i.flat { background: #D1D5DB; }
.story-legend i.l-up, .story-legend i.l-down { width: 18px; height: 4px; border-radius: 2px; }
i.l-up { background: #7FB0FF; } i.l-down { background: #FDBA74; }
.story-track { margin-top: 26px; width: 100%; max-width: 40rem; height: 14px; border-radius: var(--pill); background: #E5E7EB; overflow: hidden; }
.story-tint .story-track { background: #DDE3EC; }
.story-fill { display: block; width: 100%; height: 100%; border-radius: var(--pill); background: var(--grow-up); }
.story-lines { margin-top: 36px; width: 100%; max-width: 44rem; height: auto; }
.story-lines .base { stroke: #334155; stroke-dasharray: 4 6; }
.story-lines .line { fill: none; stroke-width: 6; stroke-linecap: round; }
.story-lines .line.up { stroke: #7FB0FF; } .story-lines .line.down { stroke: #FDBA74; }
.story-lines circle { fill: #FFFFFF; }
.story-lines text { font: 15px var(--sans); fill: #CBD5E1; text-anchor: middle; }
.story-lines text.end { text-anchor: end; }
.story-lines text.v { font-size: 22px; font-weight: 800; }
.story-lines text.v.up { fill: #7FB0FF; } .story-lines text.v.down { fill: #FDBA74; }
.story-moves { margin-top: 40px; width: 100%; max-width: 44rem; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.story-moves p { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 700; }
.story-moves .muted { font-weight: 400; }
.story-moves .story-track { margin-top: 6px; max-width: none; height: 12px; background: var(--tile); }
.story-moves .story-fill { background: var(--task-count); }
.story-scale { position: relative; margin-top: 36px; width: 100%; max-width: 44rem; height: 8px; border-radius: var(--pill); background: linear-gradient(90deg, #E5E7EB, #9CA3AF); }
.story-mark { position: absolute; top: -12px; width: 6px; height: 32px; margin-left: -3px; border-radius: 3px; background: var(--x-vhigh); }
.story-ends { margin: 14px 0 0; width: 100%; max-width: 44rem; display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }

.story-future { padding-top: 120px; padding-bottom: 56px; text-align: center; }
.home-ex { margin: 48px auto 0; max-width: 56rem; text-align: left; background: var(--surface); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--lift-shadow), 0 0 0 1px var(--line); }
.home-ex-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.home-ex-top h3 { margin: 2px 0 0; font-size: 34px; letter-spacing: -0.02em; font-weight: 800; }
.home-ex-top a { font-weight: 700; }
.home-ex-tiles { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 12px; }
.home-ex-tiles > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--tile); }
.home-ex-tiles span:first-child { font-size: 13px; color: var(--muted); }
.home-ex-tiles strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.home-ex-tiles .exp { font-size: 16px; padding: 3px 12px; }
.home-ex-says { margin: 18px 0 8px; font-size: 16px; }
.home-search-2 { margin: 44px auto 0; text-align: left; }
.story-deeper { max-width: 60rem; margin: 0 auto; padding-top: 40px; padding-bottom: 112px; }
.story-deeper .home-deeper { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
.story-deeper .home-paths { margin-top: 20px; gap: 20px; }
.story-deeper .card h3 { margin: 0; font-size: 26px; letter-spacing: -0.015em; }
.story-deeper .card p { margin: 0; color: var(--text-2); }

/* Story motion: only where the browser supports scroll timelines, only on
   screens, and never for visitors who ask for less motion. */
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
@keyframes pm-count { from { --n: 0; } }
@keyframes pm-zoom { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }
@keyframes pm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pm-slide { from { left: 0%; } }
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .rv-late { animation: pm-rise linear both; animation-timeline: view(); animation-range: entry 60% cover 50%; }
    .zoom { animation: pm-zoom linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .story-cue { animation: pm-fade linear both; animation-timeline: view(); animation-range: cover 30% cover 45%; }
    .story-pin { height: 1700px; }
    .story-pin .count-n { animation: pm-count linear both; animation-timeline: --pin; animation-range: contain 8% contain 60%; }
    .story-pin .story-squares .sq { animation: pm-pop linear both; animation-timeline: --pin;
      animation-range: contain calc(8% + 52% * var(--i) / var(--of)) contain calc(12% + 52% * var(--i) / var(--of)); }
    .count-n.late { animation: pm-count linear both; animation-timeline: view(); animation-range: entry 50% cover 55%; }
    .wipe { animation: pm-wipe linear both; animation-timeline: view(); animation-range: entry 50% cover 55%; }
    .story-fill { transform-origin: left center; animation: pm-grow linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
    .story-lines .line { stroke-dasharray: 1; animation: pm-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
    .story-mark { animation: pm-slide linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; }
  }
}
@media (max-width: 640px) {
  .story-hero { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
  .story-scene { min-height: 0; padding-top: 72px; padding-bottom: 72px; }
  .story-short { padding-top: 72px; padding-bottom: 72px; }
  .story-pin-in { min-height: 100svh; }
  .story-squares { gap: 4px; }
  .story-squares .sq { border-radius: 4px; }
  .story-dots { gap: 4px; }
  .story-dots i { width: 10px; height: 10px; }
  .story-moves p { font-size: 16px; }
}
@media print { .story-pin { height: auto; } .story-pin-in { position: static; } .story-dark { background: none; color: var(--text); } }
.story-scene, .story-pin, .story-future { overflow-x: clip; }
.home-ex-tiles .growth { font-size: 24px; font-weight: 800; }
@supports (animation-timeline: view()) { @media screen and (max-width: 640px) and (prefers-reduced-motion: no-preference) { .story-pin { height: 1300px; } } }

/* --- Content pages: About, Guide, FAQ, Sources, Privacy, Terms (Oct 21) ---- */
.about h1, .about .about-title:is(h1), .about-head h1 { font-size: var(--title-size); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.02; margin: 6px 0 18px; }
.about h2, .about h2.about-title, .about .about-title:is(h2) { font-size: var(--section-size); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 16px; }
.about section.report + section.report { margin-top: 72px; }
.about h3 { margin-top: 32px; }
.about p { font-size: 17px; }
.about p.src, .about p.small, .about p.note, .about p.hint { font-size: 13px; }
.about .worry { font-size: 22px; font-weight: 700; }
.about .about-ways a { border: 0; border-radius: var(--radius-lg); background: var(--tile); padding: 18px 20px; }
.about .about-ways a:hover { background: #E5E9F0; }
.about .about-ways strong { font-size: 17px; }
.about-reading { border: 0 !important; border-radius: var(--radius-lg) !important; background: var(--tile) !important; }
.about table.compact th { background: transparent; }
section.report { overflow-x: auto; }

/* The two download images in place of the shortened card (Oct 21). */
.home-pics { margin: 48px auto 0; max-width: 60rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.home-pic { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--text-2); font-size: 15px; }
.home-pic img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--lift-shadow), 0 0 0 1px var(--line);
  transition: transform .25s ease, box-shadow .25s ease; }
.home-pic:hover img { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(17, 24, 39, .16), 0 0 0 1px var(--line); }
.home-pics-link { margin: 24px 0 0; font-weight: 700; }
@media (max-width: 640px) { .home-pics { grid-template-columns: 1fr; gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .home-pic img { transition: none; } .home-pic:hover img { transform: none; } }

/* Home hero, Oct 21 (John): the short headline on one line, the mockup's
   plain "Try:" links. */
.story-hero h1 { max-width: none; font-size: clamp(34px, 5.9vw, 78px); }
@media (min-width: 700px) { .story-hero h1 { white-space: nowrap; } }
.story-try { margin: 4px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.story-try a { color: var(--text-2); }
/* Spacing, Oct 21 (John): more room between the card images and the second
   search; "Or go deeper" closer to that search. */
.home-search-2 { margin-top: 72px; }
.story-future { padding-bottom: 20px; }
.story-deeper { padding-top: 24px; }
.story-deeper .home-deeper { margin-top: 0; }
/* The opening line (Oct 21, John): a little more room, so it holds the screen
   for a moment as it scrolls past. */
.story-hook { min-height: 560px; padding-top: 128px; padding-bottom: 128px; }
.story-hook .story-big { max-width: 60rem; }
@media (max-width: 640px) { .story-hook { min-height: 440px; padding-top: 96px; padding-bottom: 96px; } }