/* Page-level additions on top of the design system in workstyle.css. */

/* The `hidden` attribute must actually hide.
   Both pre-landers call element.hidden = true to swap a Start button for a
   Continue button, but .cta and .resume set display, which beats the attribute's
   default styling — so both buttons rendered at once for anyone returning
   mid-run. !important is right here: `hidden` is a semantic override and nothing
   should win against it. */
[hidden] { display: none !important; }

/* Bipolar scale labels: the right-hand pole must right-align, or on rows whose
   labels are short they meet near the middle and read as one run-on sentence
   ("Feels pressure more, and for longer Steadier, less rattled"). */
.bp-labels { gap: 20px; }
.bp-labels span { max-width: 46%; }
.bp-labels span:last-child { text-align: right; }

/* Server-rendered pages show the impersonal version by default; JS adds
   body.ws-personal once it finds a stored run, and the two swap. Doing it this
   way round means the crawlable, cacheable HTML never claims a score. */
.only-personal { display: none; }
body.ws-personal .only-personal { display: block; }
body.ws-personal .only-generic { display: none; }

.ws-cta-row { margin: 36px 0 0; }
.rhero { padding-top: 44px; }

/* The pre-lander trait list and the article cards are real links now. */
/* Padded to a real tap size. The row already has vertical slack, so this only
   grows the hit area; the compensating reduction is on .pole-row padding. */
.pole-row a { display: inline-block; padding: 10px 0; color: inherit; text-decoration: none; }
.pole-row a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a.readcard, a.readcard:hover { text-decoration: none; color: inherit; }
a.crumb { display: inline-block; padding: 12px 0; text-decoration: none; }
a.cta { text-align: center; text-decoration: none; }
a.ghost { display: block; text-align: center; text-decoration: none; color: inherit; }
a.restart { display: inline-block; text-decoration: none; color: inherit; }
.brk .fact-body p { margin: 0 0 14px; max-width: 34em; color: var(--ink-soft); font-size: 17px; }
.brk .fact-body b { color: var(--ink); font-weight: 700; }

/* The dek sits directly above the lede on article pages and needs air. */
.art .dek { margin-bottom: 26px; }


/* Per-test hues. Each funnel gets its own accent so the tests read as siblings
   rather than the same page twice; these tokens let the front page colour each
   card with its test's hue even though the front page itself stays cobalt. */
:root {
  --hue-work: #2743E8;  --hue-work-wash: #E4E8FC;
  --hue-money: #C42B6B; --hue-money-wash: #FBE4EE;
  /* Text colour to sit ON each hue. These must flip with the theme: the hues
     lighten in dark mode so they read as accents on a dark ground, and a light
     hue behind white text is around 1.9:1 — unreadable. */
  --hue-work-ink: #FFFFFF; --hue-money-ink: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hue-work: #6B80FF;  --hue-work-wash: #1E2647;
    --hue-money: #FF7BB0; --hue-money-wash: #3A1428;
    --hue-work-ink: #0B0E1B; --hue-money-ink: #0B0E1B;
  }
}
:root[data-theme="dark"] {
  --hue-work: #6B80FF;  --hue-work-wash: #1E2647;
  --hue-money: #FF7BB0; --hue-money-wash: #3A1428;
  --hue-work-ink: #0B0E1B; --hue-money-ink: #0B0E1B;
}

/* Semantic colours used by the money ledger and by the front page's
   "available now" markers, so they live in the shared stylesheet. All three theme states are
   covered: bare :root is light, the media query handles the unstamped default,
   and the [data-theme] block lets an explicit toggle win. */
:root { --good:#0E7C5A; --good-wash:#DCF3EA; --bad:#C2410C; --bad-wash:#FFE9DF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --good:#3DD9A0; --good-wash:#13312A; --bad:#FF9E72; --bad-wash:#3A2318;
  }
}
:root[data-theme="dark"] { --good:#3DD9A0; --good-wash:#13312A; --bad:#FF9E72; --bad-wash:#3A2318; }

/* Shared by both funnels: the handoff page between the last question and
   the result. Lives here, not in money.css, because work-style uses it too. */
.ready { padding: 56px 0 64px; text-align: center; }
.ready .eyebrow { display: block; margin-bottom: 18px; }
.ready h1 { font-size: clamp(36px, 10vw, 56px); }
.ready h1 span { color: var(--accent); }
.ready .sub { margin: 20px auto 0; max-width: 26em; font-size: 18px; color: var(--ink-soft); }
.ready .adslot { margin-left: auto; margin-right: auto; }
.ready .readytease {
  margin: 4px auto 20px; max-width: 24em; font-size: 16px; color: var(--ink);
  font-family: var(--display); font-weight: 700; letter-spacing: -.015em;
}

.readystats {
  display: flex; justify-content: center; gap: 0; margin: 30px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.readystats > div { flex: 1 1 33%; padding: 15px 8px; }
.readystats > div + div { border-left: 1px solid var(--line); }
.readystats dt {
  font-family: var(--mono); font-size: 12px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-label);
}
.readystats dd {
  margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Long-form treatment (the in-depth pages)
   ---------------------------------------------------------------------------
   The problem this fixes: .art h2 was 15px grey mono while .art h3 was 20px
   black display, so every section heading was quieter than its own subheadings
   and the numbered structure did nothing. Section numbers are now a CSS counter
   rather than text inside the heading — the numerals were stripped from the
   content by tools/longform-markup.php.
   =========================================================================== */

.art-longform { counter-reset: lf-section; }

/* --- section headings --- */
.art-longform h2 {
  counter-increment: lf-section;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 5.2vw, 30px);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 18px;
  padding-top: 26px;
  max-width: 30em;
}

/* the number, set above the heading as a mono figure against a hairline rule */
.art-longform h2::before {
  content: counter(lf-section, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--accent);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* a section needs air before it, but not before the first one */
.art-longform h2 { margin-top: 52px; }
.art-longform > *:first-child + h2,
.art-longform .toc-list + h2 { margin-top: 34px; }

/* --- subheadings, now clearly below the section headings --- */
.art-longform h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  margin: 32px 0 12px;
  padding-left: 14px;
  border-left: 3px solid var(--pop);
  max-width: 30em;
}

/* --- the lead paragraph of a section --- */
.art-longform p.lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

/* --- table of contents --- */
.art-longform .toc-list {
  counter-reset: lf-toc;
  list-style: none;
  margin: 26px 0 8px;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  max-width: 34em;
}
.art-longform .toc-list li {
  counter-increment: lf-toc;
  position: relative;
  padding-left: 34px;
  margin-bottom: 9px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.art-longform .toc-list li:last-child { margin-bottom: 0; }
.art-longform .toc-list li::before {
  content: counter(lf-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-label);
}

/* the manager-facing bullets read better with a little more room */
.art-longform ul li { margin-bottom: 12px; }

/* ===========================================================================
   Front page
   =========================================================================== */

.home-hero { padding: 54px 0 34px; }
.home-hero h1 { font-size: clamp(38px, 10.5vw, 62px); }
.home-hero h1 em { font-style: normal; }

/* --- the test picker --- */
.testgrid { display: grid; gap: 14px; margin: 0 0 8px; }
@media (min-width: 760px) { .testgrid { grid-template-columns: 1fr 1fr; } }

.testcard {
  display: flex; flex-direction: column;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 22px 24px 20px; box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transition: border-color .14s ease, transform .14s ease;
}
a.testcard:hover { border-color: var(--accent); transform: translateY(-3px); }

.testcard b {
  font-family: var(--display); font-weight: 800; font-size: 24px;
  letter-spacing: -.028em; line-height: 1.1; display: block; margin-bottom: 10px;
  text-wrap: balance;
}
.testcard p { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 18px; }

.cardstats { display: flex; margin: auto 0 18px; border-top: 1px solid var(--line); }
.cardstats > div { flex: 1 1 33%; padding: 13px 0 0; }
.cardstats > div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.cardstats dt {
  font-family: var(--mono); font-size: 12px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-label);
}
.cardstats dd {
  margin: 3px 0 0; font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -.02em;
}
/* A real filled button rather than a text link: it was the least clear thing on
   the page, and the card is shorter now that the stat row is gone. */
.cardbtn {
  display: block; text-align: center;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-weight: 800; font-size: 16.5px;
  letter-spacing: -.015em; padding: 14px 16px; border-radius: 13px;
  margin-top: auto;   /* keeps buttons level when bodies differ in length */
  transition: filter .14s ease;
}
a.testcard:hover .cardbtn { filter: saturate(1.12) brightness(1.06); }
.cardbtn.inert { background: var(--card-2); color: var(--ink-soft); }

/* the not-yet card: legible, obviously inert, not broken-looking */
/* Slimmer than the live cards: it was a tall dashed box with two lines in the
   top half, so its size argued it was the most important thing on the page. */
.testcard.soon { background: transparent; border-style: dashed; box-shadow: none;
  padding-top: 18px; padding-bottom: 18px; }
.testcard.soon .tile { display: none; }
.testcard.soon b { font-size: 19px; }
.testcard.soon p { margin-bottom: 0; }
/* --ink-faint is 2.79:1 on the card ground — fine for a 10px eyebrow, not for
   the only copy on the card. --ink-soft is the theme's muted-body token: still
   clearly de-emphasised against the two live cards, but legible (5.7 / 6.1). */
.testcard.soon b, .testcard.soon p { color: var(--ink-soft); }
.testcard.soon .cardstats dd { color: var(--ink-label); font-weight: 500; }
.testcard.soon .cardgo { color: var(--ink-label); }
@media (min-width: 760px) { .testcard.soon { grid-column: 1 / -1; } }

/* --- content sections below the picker --- */
.homesection { margin: 56px 0 0; }
.homesection .eyebrow { display: block; margin-bottom: 14px; }
.homesection h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(26px, 6vw, 34px);
  letter-spacing: -.03em; line-height: 1.08; margin: 0 0 16px; max-width: 26em;
}
.homesection h3 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -.02em; margin: 34px 0 12px;
}
.homesection p { margin: 0 0 14px; max-width: 34em; color: var(--ink-soft); font-size: 17px; }
.homesection p b { color: var(--ink); }
.homesection .src {
  font-family: var(--mono); font-size: 12px; color: var(--ink-label); margin-top: 18px;
}

.whygrid { display: grid; gap: 12px; margin: 22px 0 0; }
@media (min-width: 700px) { .whygrid { grid-template-columns: 1fr 1fr; } }
.whygrid > div {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow);
}
.whygrid dt {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -.02em; margin-bottom: 7px;
}
.whygrid dd { margin: 0; font-size: 15px; color: var(--ink-soft); }
.whygrid dd b { color: var(--ink); }
.whygrid a { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Front page: more presence than the article pages.
   The moves that carry it are a wider measure, coloured icon tiles, and one
   full-bleed band so the page is not a single flat tint all the way down.
   --------------------------------------------------------------------------- */

.wrap-wide { max-width: 860px; }

/* the dash-then-label eyebrow, used on the front page's section openers */
.homesection .eyebrow { display: flex; align-items: center; gap: 12px; }
.homesection .eyebrow::before {
  content: ""; width: 24px; height: 2px; background: var(--accent);
  flex: 0 0 24px; border-radius: 2px;
}

/* --- icon tiles --- */
.tile {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px; margin-bottom: 16px;
}
.tile svg { width: 23px; height: 23px; }
.tile-work  { background: var(--hue-work-wash);  color: var(--hue-work); }
.tile-money { background: var(--hue-money-wash); color: var(--hue-money); }
.tile-soon  { background: var(--card-2);         color: var(--ink-faint); }

/* each live card leans toward its own test's hue on hover, not the site accent */
a.testcard:has(.tile-work):hover  { border-color: var(--hue-work); }
a.testcard:has(.tile-money):hover { border-color: var(--hue-money); }
.testcard:has(.tile-work) .cardbtn  { background: var(--hue-work);  color: var(--hue-work-ink); }
.testcard:has(.tile-money) .cardbtn { background: var(--hue-money); color: var(--hue-money-ink); }

/* --- the full-bleed claims band --- */
.band {
  background: var(--accent);
  color: #fff;
  margin: 42px 0 0;
  padding: 34px 0 36px;
}
.bandgrid { display: grid; gap: 26px; margin: 0; }
@media (min-width: 720px) { .bandgrid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.bandgrid dt {
  font-family: var(--mono); font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 9px;
}
.bandgrid dd {
  margin: 0; font-size: 16px; line-height: 1.5; color: #fff;
}

/* --- a touch more air where the band meets the content --- */
.band + .wrap-wide { padding-top: 8px; }
.band + .wrap-wide .adslot { margin-top: 34px; }

/* desktop: the hero and the picker get room to breathe */
@media (min-width: 860px) {
  .home-hero h1 { max-width: 15em; }
  .home-hero .sub { font-size: 19px; }
}


/* ============================================================
   SITE CHROME — header and footer, on every standalone template.

   Structure copied from jobs.reward.land / panel.reward.land so the family
   reads as one product: brand + tagline, a LEGAL column, a COMPANY column,
   then copyright and the company legal line. Those sites get it from Divi's
   header/footer; we bypass Divi entirely, so it is built here.
   ============================================================ */

.sitehead {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.sitehead-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 15px; padding-bottom: 15px;
}

/* Wordmark stands in for the sibling sites' PNG logos ("Jobs | Reward Land").
   Swap in an <img> here if a real mark is ever drawn. */
.brand {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 7px 0;                 /* 31px -> 45px tall; it is the only way home */
  text-decoration: none; color: var(--ink);
}
.brand b {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  letter-spacing: -.03em;
}
.brand i {
  font-family: var(--mono); font-style: normal; font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft);
  padding-left: 9px; border-left: 1px solid var(--line);
}
.brand:hover b { color: var(--accent); }

/* One language today, so .lang.on renders as an inert code. It becomes a real
   set of links the moment a second language exists — see
   personality_lang_switch(). */
.langs { display: inline-flex; align-items: center; gap: 4px; }
.lang {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-decoration: none; color: var(--ink-label);
  padding: 5px 9px; border-radius: 7px; border: 1px solid transparent;
}
a.lang:hover { color: var(--accent); background: var(--accent-wash); }
.lang.on {
  color: var(--ink-soft); border-color: var(--line); background: var(--card);
}

.sitefoot {
  margin-top: 64px; padding: 44px 0 32px;
  border-top: 1px solid var(--line); background: var(--card-2);
}
.sitefoot-slim { margin-top: 48px; padding: 24px 0 22px; }

.footgrid {
  display: grid; gap: 32px;
  grid-template-columns: 1fr; margin-bottom: 34px;
}
@media (min-width: 760px) {
  .footgrid { grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: 40px; }
}
.footbrand p {
  margin: 14px 0 0; max-width: 34em;
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
.footbrand .partof { margin-top: 12px; font-size: 14px; }
.footbrand .partof a { color: var(--accent); text-decoration: none; }
.footbrand .partof a:hover { text-decoration: underline; text-underline-offset: 2px; }

.footcol h2 {
  margin: 0 0 14px;
  /* --ink-soft, not --ink-faint: at 10.5px the faint token is 2.97:1. The
     sibling sites' column headings are readable dark ink, not a whisper. */
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.footcol ul { margin: 0; padding: 0; list-style: none; }
/* The gap between footer links is moved from the li's margin onto the anchor
   as padding: identical spacing on screen, but the tap target grows from 21px
   to ~39px. Stacked 21px links 16px apart is a fat-finger trap, and ~90% of
   this site's traffic is phones. */
.footcol li { margin-bottom: 0; }
.footcol a {
  display: block; padding: 9px 0;
  font-size: 15px; color: var(--ink-soft); text-decoration: none;
}
.footcol a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.footbase { border-top: 1px solid var(--line); padding-top: 22px; }
.sitefoot-slim .footbase { border-top: 0; padding-top: 0; }
.footbase p { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); }
.footbase .legalline {
  margin: 0; font-size: 12.5px; color: var(--ink-soft);
}

/* The legal/info placeholders. */
.art-legal { padding-top: 40px; max-width: 40em; }
.art-legal h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: 34px; line-height: 1.1; margin: 0 0 20px;
}
.art-legal .art-body p { margin: 0 0 16px; color: var(--ink-soft); }
.art-legal .art-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.art-legal .art-body ul, .art-legal .art-body ol { color: var(--ink-soft); padding-left: 22px; }
.art-legal .art-body li { margin-bottom: 8px; }
/* .art h2 in workstyle.css is the article pages' small uppercase mono label.
   This override has to reset text-transform and colour as well as the face, or
   sentence-case headings come out shouting in --ink-faint. */
.art-legal .art-body h2 {
  font-family: var(--display); font-weight: 800; font-size: 21px;
  letter-spacing: -.02em; margin: 30px 0 12px;
  text-transform: none; color: var(--ink);
}


/* ============================================================
   THE SUMMARY BLOCK — shared by both result pages

   Lives here, not in money.css: money.css is enqueued only on money
   templates, so the work-style result page would get the markup and none of
   the styling. Per-test colouring stays in each test's own sheet.
   ============================================================ */
.verdict {
  margin: 32px 0 0; padding: 26px 24px 22px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
}
.verdict h2 {
  margin: 10px 0 0; max-width: 26em;
  font-family: var(--display); font-weight: 800; font-size: 25px;
  line-height: 1.18; letter-spacing: -.025em; color: var(--ink);
}
.vgrid {
  display: grid; gap: 18px; margin-top: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .vgrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px; }
}
.vcol { padding-top: 14px; border-top: 2px solid var(--line); }
.vcount {
  display: block;
  font-family: var(--display); font-weight: 800; font-size: 30px;
  line-height: 1; letter-spacing: -.03em; color: var(--ink);
}
.vlabel {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-soft);
}
.vcol ul { margin: 12px 0 0; padding: 0; list-style: none; }
.vcol li { margin-bottom: 0; font-size: 15.5px; line-height: 1.35; }
.vcol li a { display: inline-block; padding: 8px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.vcol li a:hover { color: var(--accent); }
.vcol li em {
  display: block; font-style: normal;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.vnote {
  margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); max-width: 42em;
}
.vnote a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.vnote a:hover { color: var(--accent); }

/* Work-style grouping: how pronounced a trait is, not good vs bad — the seven
   axes have no favourable side by design. */
.vcol-pron { border-top-color: var(--accent); }
.vcol-lean { border-top-color: var(--pop); }
.vcol-pron .vcount { color: var(--accent); }

/* The two axes the headline is built from. Without this the reader had a
   sentence naming two traits and seven identical-looking rows below it. */
/* The rows are cards now, so the highlight is just a different ground and
   border rather than a bled-out background. */
.axis-lead, .axis-second {
  position: relative;
  background: var(--accent-wash);
  border-color: var(--accent);
}
.axis-lead::before, .axis-second::before {
  content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px 0 0 3px; background: var(--accent);
}
/* Three legible tiers rather than two invisible ones: the lead keeps the wash,
   the second stays on the plain card ground and is marked by its accent border
   and bar. Blending --accent-wash toward --paper was indistinguishable — the two
   tokens are within a few points of each other, so both cards looked identical. */
.axis-second { background: var(--card); }

/* .axis-name and .axis-verdict em are --ink-faint, which is only 2.59:1 on the
   accent wash. Scoped to the two highlighted rows so the other five keep the
   quieter label they were designed with. */
.axis-lead .axis-name, .axis-second .axis-name,
.axis-lead .axis-verdict em, .axis-second .axis-verdict em { color: var(--ink-soft); }

/* The pole name is normally --accent, but accent-on-accent-wash is 4.33:1 in
   dark. These rows already read as highlighted from the wash and the left bar,
   so the colour on the word is redundant emphasis. */
.axis-lead .axis-verdict span, .axis-second .axis-verdict span { color: var(--ink); }
.axis-second::before { opacity: .5; }


/* ============================================================
   NOT FOUND

   404.php uses the site chrome; these are the few extras it needs. The two
   buttons take each test's own hue, matching the front-page cards, so the
   recovery routes are visually the same objects the reader saw there.
   ============================================================ */

.e404 { padding-top: 20px; }
.e404-actions { display: grid; gap: 12px; margin: 30px 0 0; }
@media (min-width: 620px) { .e404-actions { grid-template-columns: 1fr 1fr; } }
.e404-actions .cardbtn { text-decoration: none; }
.e404-work  { background: var(--hue-work);  color: var(--hue-work-ink); }
.e404-money { background: var(--hue-money); color: var(--hue-money-ink); }
.e404-alt { margin: 22px 0 0; font-size: 15.5px; color: var(--ink-soft); }
.e404-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.e404-alt a:hover { color: var(--accent); }


/* ============================================================
   THE WORDMARK

   The "i" of personality carries the slider marker instead of a tittle — the
   same object the result pages draw. Two concentric circles in currentColor,
   NOT a box-shadow ring: a shadow's inner ring has to be painted in the
   background colour, so it would fringe on the footer's ground.

   Sized and positioned in em so the lockup scales with font-size wherever it
   is used, and .overflow:visible keeps the ring from being clipped by the
   viewBox at small sizes.
   ============================================================ */

.dotless { position: relative; display: inline-block; }
.tittle {
  position: absolute; left: 50%; bottom: .98em;
  /* .06em right of centre: the box is centred on the dotless i's advance
     width, whose side bearings are not symmetric, so true centring leaves the
     ring visibly biased toward the preceding l. */
  transform: translateX(calc(-50% + .06em));
  width: .40em; height: .40em;
  overflow: visible;
  color: var(--accent);
}
/* The whole word goes accent on hover; the marker is already accent, so it
   inverts instead of disappearing into the text. */
.brand:hover .tittle { color: var(--ink); }


/* Contact details on the info pages.

   NOT .facts: that is the pre-lander's stat row, tuned for two-word values
   like "28" and "3 min", so a five-line postal address rendered at 20px
   display weight and swamped the page. */
.art-info .contactblock {
  display: grid; gap: 20px; margin: 26px 0 34px;
  padding: 20px 22px 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
@media (min-width: 620px) {
  .art-info .contactblock { grid-template-columns: 1fr 1fr; gap: 30px; }
}
.art-info .contactblock dt {
  margin: 0 0 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-label);
}
.art-info .contactblock dd {
  margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink);
}
.art-info .contactblock dd a {
  display: inline-block; padding: 3px 0;   /* a real tap target, not 21px */
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}

/* The eyebrow above the h1 needs air from the top of the page. */
.art-info .eyebrow { display: block; margin-bottom: 12px; }
.art-info .lede { color: var(--ink); }

/* Twelve full-width pole rows ran ~1,500px down the front page as near-identical
   bands. Two columns halves that and uses the width that was empty anyway. The
   pre-landers keep one column — their measure is narrower and the list is the
   page's main content there, not a footnote. */
@media (min-width: 900px) {
  .homesection .poles { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
}

/* ============================================================
   CLOSING BAND

   The front page used to end on "The short version of the small print" — a
   grey caveat block with no way onward, so anyone who read to the bottom had
   to scroll back up. This is the second ground change on the page (after the
   cobalt band), which is also what gives the lower half some rhythm.
   ============================================================ */

:root { --closeband: #12162B; --closeband-ink: #EDEFF8; --closeband-soft: #A8AFCB; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --closeband: #151A2E; --closeband-ink: #EDEFF8; --closeband-soft: #98A0BF;
  }
}
:root[data-theme="dark"] {
  --closeband: #151A2E; --closeband-ink: #EDEFF8; --closeband-soft: #98A0BF;
}

/* The footer's top margin exists to separate it from ordinary page content.
   After a full-bleed band it just leaves a strip of paper hanging between two
   coloured blocks, so it is cancelled when the band is the last thing. */
.closeband + .sitefoot { margin-top: 0; }

.closeband { background: var(--closeband); color: var(--closeband-ink); padding: 54px 0 58px; }
.closeband h2 {
  margin: 0 0 10px; max-width: 20em;
  font-family: var(--display); font-weight: 800; font-size: 30px;
  line-height: 1.14; letter-spacing: -.03em; color: var(--closeband-ink);
}
.closeband p { margin: 0 0 26px; max-width: 34em; font-size: 16.5px; color: var(--closeband-soft); }
.closeband .eyebrow { color: var(--closeband-soft); display: block; margin-bottom: 12px; }
.closeband-actions { display: grid; gap: 12px; }
@media (min-width: 620px) {
  .closeband-actions { grid-template-columns: repeat(2, minmax(0, 260px)); }
}
.closeband-actions .cardbtn { text-decoration: none; }
.cb-work  { background: var(--hue-work);  color: var(--hue-work-ink); }
.cb-money { background: var(--hue-money); color: var(--hue-money-ink); }

/* Highlighted callout on the pre-landers.

   Moved here from money.css: money.css is enqueued only on money templates, so
   the work-style pre-lander had the markup and none of the styling. Third time
   this class of bug has appeared (after .verdict and --good/--bad) — anything
   both funnels use belongs in pages.css. */
.honest-note {
  margin: 26px 0 0; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px; color: var(--ink-soft);
}
.honest-note b { color: var(--ink); }


/* A work-style profile where nothing leans gets the balanced headline instead
   of an archetype its own answers do not support. Both versions are in the
   server-rendered HTML; site.js adds body.ws-flat and CSS does the swap, the
   same two-layer pattern as .only-personal. The cold page shows the archetype,
   which is what makes the URL crawlable content. */
.only-flat { display: none; }
body.ws-flat .only-flat { display: block; }
body.ws-flat .not-flat { display: none !important; }


/* Getting the top slot into the first frame on a phone.

   The work-style pre-lander's headline runs a line taller than money's, which
   put its slot at 877px — outside the 844px viewport of an iPhone 13/14/15,
   though inside a Pixel's 915px. These two rules reclaim ~38px so it lands
   above the fold on the common sizes too. Scoped to the slot that follows a CTA
   note, so the mid-article slots keep their full breathing room. */
.cta-note + .adslot { margin-top: 12px; }
.facts { margin: 26px 0 22px; }


/* Summary table on the info pages.

   Wrapped in .tablewrap with overflow-x as a safety net, but the layout is
   built to fit 360px without scrolling: three columns, the first allowed to
   wrap, and no fixed widths. A cookie table that needs sideways scrolling on a
   phone is a cookie table nobody reads, and ~90% of this site is phones. */
.art-info .tablewrap { overflow-x: auto; margin: 22px 0 26px; }
.art-info .sumtable {
  width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4;
}
.art-info .sumtable th {
  text-align: left; padding: 0 10px 8px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-label); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.art-info .sumtable td {
  padding: 11px 10px 11px 0; vertical-align: top;
  border-bottom: 1px solid var(--line); color: var(--ink-soft);
}
.art-info .sumtable tr td:first-child { color: var(--ink); }
.art-info .sumtable code { font-size: 12.5px; overflow-wrap: anywhere; }
.art-info .sumtable i {
  font-style: normal; display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-label);
}
.art-info .sumtable tr td:last-child { white-space: nowrap; color: var(--ink-label); }

/* At 360px the three columns needed 334px inside a 320px wrap, so the table
   scrolled sideways — which defeats the point of a summary. Tightening the
   cell padding buys back the 14px. */
@media (max-width: 380px) {
  .art-info .sumtable { font-size: 13px; }
  .art-info .sumtable th,
  .art-info .sumtable td { padding-right: 4px; }
  .art-info .sumtable code { font-size: 11.5px; }
}

/* Cookie Script's generated report. The vendor's markup and styling are left
   alone except for width: its table has no min-width and uses auto layout, so
   it settles at ~545px natural width (the Description column alone wants
   215px) and scrolled sideways inside a 350px phone column.

   Switching to fixed layout with explicit column widths makes the cells wrap
   instead. Only the four columns it actually emits are targeted, and
   overflow-wrap handles long cookie names and domains that cannot break on a
   space. overflow-x stays as a safety net if the vendor ever changes shape. */
.art-info .cookiereport { margin: 22px 0 30px; overflow-x: auto; }
.art-info .cookiereport table { max-width: 100%; font-size: 13.5px; }

@media (max-width: 760px) {
  .art-info .cookiereport table {
    table-layout: fixed; width: 100%; font-size: 12.5px;
  }
  .art-info .cookiereport td,
  .art-info .cookiereport th { padding-left: 4px; padding-right: 4px; }
  /* Only the data cells may break inside a word — cookie names like
     VISITOR_PRIVACY_METADATA have nowhere else to break. Headers must not, or
     "Expiration" splits across lines. */
  .art-info .cookiereport td { overflow-wrap: anywhere; }
  .art-info .cookiereport th { font-size: 11px; overflow-wrap: normal; }
  .art-info .cookiereport td:nth-child(1), .art-info .cookiereport th:nth-child(1) { width: 27%; }
  .art-info .cookiereport td:nth-child(2), .art-info .cookiereport th:nth-child(2) { width: 22%; }
  .art-info .cookiereport td:nth-child(3), .art-info .cookiereport th:nth-child(3) { width: 21%; }
  .art-info .cookiereport td:nth-child(4), .art-info .cookiereport th:nth-child(4) { width: 30%; }
}