/* ============================================================
   Theme — soft glass
   Loaded LAST on every page, so it overrides the page stylesheets.

   Two techniques, split by job rather than mixed at random:

     GLASS  for surfaces — panels, cards, the header. Translucent, blurred,
            saturated, with a hairline border. Needs something with colour
            behind it, which is what the fixed gradient on <body> is for.
     NEU    for controls — tabs, chips, the theme toggle. Raised by default,
            inset when active. Light source is top-left everywhere.

   Both have real accessibility problems if used carelessly, so:
     · body text never sits on heavy glass, only on near-solid surfaces
     · the primary CTA stays flat and accent-filled, never neumorphic
     · every control keeps a visible :focus-visible ring
     · prefers-reduced-transparency and forced-colors fall back to solid
   ============================================================ */

/* ---- tokens ------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Neumorphism needs the surface and the page to be the same mid-tone —
     pure white leaves the light shadow with nowhere to go. */
  /* Deeper than it looks like it should be. A near-white page gives white
     glass nothing to separate from, which is why the effect read as flat. */
  --surface: #ccd7e8;
  --surface-raised: #dde5f1;
  --neu-dark: #a3aec2;
  --neu-light: #ffffff;

  --glass-fill: rgba(255, 255, 255, 0.90);
  --glass-fill-strong: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.95);
  /* No live blur anywhere. Measured on this machine: backdrop-filter over the
     fixed aurora + arc re-blurs every scroll frame — 16fps on GPU, 10fps on
     software raster; dropping it alone restores ~53fps in both. The glass
     reads from the sheen, edge and shadows; the fills are near-solid so the
     background stays subdued without frosting. Revert = restore blur() here
     and thin the fills back out. */
  --glass-blur: none;
  /* The light catching the top-left edge — this is the part that actually
     reads as glass rather than as a pale box. */
  --glass-sheen: linear-gradient(138deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.14) 46%,
    rgba(255, 255, 255, 0.40) 100%);
  --glass-inner: inset 1px 1px 0 rgba(255, 255, 255, 0.95),
                 inset -1px -1px 0 rgba(120, 140, 175, 0.10);
  --glass-drop: 0 18px 42px rgba(28, 45, 85, 0.15);

  /* Strong enough to survive being seen through 62% white. */
  --tint-a: rgba(37, 99, 235, 0.38);
  --tint-b: rgba(6, 182, 212, 0.30);
  --tint-c: rgba(147, 51, 234, 0.28);
  --tint-d: rgba(244, 114, 182, 0.18);
  --grain-opacity: 0.05;

  /* Remapped from global.css so the existing components follow along. */
  --bg: var(--surface);
  --bg-alt: rgba(255, 255, 255, 0.5);
  --card-bg: #e3e8f0;
  --text: #161a21;
  /* Measured against the glass surfaces, not picked by eye — the previous
     values landed at 3.1–3.6:1, under the 4.5:1 floor for body text. */
  --muted: #454e5c;
  --muted-soft: #4d5867;
  --border: rgba(20, 30, 50, 0.09);
  --border-strong: rgba(20, 30, 50, 0.14);
  --shadow: 6px 6px 14px rgba(160, 172, 190, 0.5), -6px -6px 14px rgba(255, 255, 255, 0.9);
  /* White text needs a darker fill than the link colour provides. */
  --accent-solid: #1f5fd0;

  /* A four-colour accent set, used the way the reference calculator uses one:
     nearly everything stays neutral, and the few coloured things mean
     something. Amber = a number, green = no cost, pink = under test,
     blue = the thing you are reading. Light-mode values are darkened to
     survive on a pale surface. */
  --c-num: #9a6200;
  --c-num-ink: #6b4200;
  --c-pos: #0b7a4f;
  --c-neg: #b8225c;
  --c-num-soft: rgba(154, 98, 0, 0.16);
  --c-tag-ink: #6b4200;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface: #20242c;
  --surface-raised: #262b34;
  --neu-dark: #171a20;
  --neu-light: #2b313b;

  /* Solid equivalents of the old 6%/9% white-over-surface glass; slight
     translucency so the aurora tints still breathe through. See the light
     block for why there is no blur. */
  --glass-fill: rgba(45, 49, 57, 0.92);
  --glass-fill-strong: rgba(52, 56, 63, 0.94);
  --glass-edge: rgba(255, 255, 255, 0.13);
  --glass-blur: none;
  --glass-sheen: linear-gradient(138deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.01) 48%,
    rgba(255, 255, 255, 0.05) 100%);
  --glass-inner: inset 1px 1px 0 rgba(255, 255, 255, 0.10),
                 inset -1px -1px 0 rgba(0, 0, 0, 0.30);
  --glass-drop: 0 20px 46px rgba(0, 0, 0, 0.48);

  --tint-a: rgba(59, 130, 246, 0.34);
  --tint-b: rgba(6, 182, 212, 0.24);
  --tint-c: rgba(168, 85, 247, 0.26);
  --tint-d: rgba(244, 114, 182, 0.14);
  --grain-opacity: 0.07;

  --bg: var(--surface);
  --bg-alt: rgba(255, 255, 255, 0.04);
  --card-bg: #2a303a;
  --text: #eef2f8;
  --muted: #bcc5d2;
  --muted-soft: #b9c2d0;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow: 6px 6px 14px rgba(0, 0, 0, 0.45), -6px -6px 14px rgba(255, 255, 255, 0.03);

  --accent: #7ba9ff;
  --accent-dark: #9dc0ff;
  /* Filled buttons keep white text, so they need a fill dark enough to carry
     it — the lighter link accent measured 2.97:1. */
  --accent-solid: #2a5fc4;
  --brand-avatar-bg: #2c3a55;

  --c-num: #ffd54d;
  --c-pos: #34d399;
  --c-neg: #ff8fbd;
  --c-num-soft: rgba(255, 213, 77, 0.16);
  --c-tag-ink: #ffcf7a;
  --c-num-ink: #ffcc70;
}

/* ---- the page itself ---------------------------------------------- */
/* html as well as body: several pages set a `background` shorthand on
   body.<page>, which outranks a plain `body` rule and resets the colour to
   transparent — the canvas then falls back to white and none of this shows.
   The [class] selector is here to outrank those page rules. */
html {
  background-color: var(--surface);
}
/* body stays transparent so body::before (z-index -1) still paints. An opaque
   body background covers its own pseudo-element. */
body,
body[class] {
  background: transparent;
  color: var(--text);
}

/* The colour glass has to refract. Fixed, so it does not scroll away, and
   behind everything.

   Note for anyone tuning these: check-contrast.js reads the page background
   from the surface token and does not see this layer, so it cannot catch text
   made unreadable by a tint alone. Keep them light enough that the body text
   colour still wins, or check those spots by hand. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62rem 44rem at 4% -10%, var(--tint-a), transparent 58%),
    radial-gradient(54rem 38rem at 99% 2%, var(--tint-b), transparent 56%),
    radial-gradient(50rem 38rem at 38% 112%, var(--tint-c), transparent 58%),
    radial-gradient(38rem 30rem at 78% 74%, var(--tint-d), transparent 60%);
  /* Oversized so the drift never exposes an edge. */
  inset: -12%;
  /* The drift used to run forever. Every surface with backdrop-filter has
     to re-sample and re-blur its backdrop on any frame the backdrop moves,
     so a 34s infinite transform on a full-screen gradient was quietly
     re-blurring the whole page, on every page, at 60fps. It now plays once
     on arrival and stops, which keeps the entrance and drops the cost to
     zero while the page is being read. */
  animation: bloom-in 1.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
/* Navigating to a page brings its colour up rather than snapping it on.
   Opacity only, because aurora already owns transform. */
@keyframes bloom-in {
  from { opacity: 0.25; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.2%, -1.6%, 0) scale(1.06); }
  100% { transform: translate3d(-1.8%, 1.8%, 0) scale(1.03); }
}

/* A little film grain. Large flat gradients band badly on 8-bit displays, and
   the texture is what stops the glass reading as plastic. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The decorative gradients those pages shipped are replaced by the one on
   body::before, which is theme-aware. */

/* ---- glass surfaces ------------------------------------------------ */
.site-header,
.jr-panel,
.jr-flowwrap,
.lc-card,
.lc-stat,
.about-card,
.stub,
.sq-panel,
.pz-pane,
.pz-rail,
.pz-controlbar,
.testimonial-slot {
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-drop), var(--glass-inner);
}
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .jr-panel,
:root[data-theme="dark"] .jr-flowwrap,
:root[data-theme="dark"] .lc-card,
:root[data-theme="dark"] .lc-stat,
:root[data-theme="dark"] .about-card,
:root[data-theme="dark"] .stub,
:root[data-theme="dark"] .sq-panel,
:root[data-theme="dark"] .pz-pane,
:root[data-theme="dark"] .pz-rail,
:root[data-theme="dark"] .pz-controlbar,
:root[data-theme="dark"] .testimonial-slot {
  box-shadow: var(--glass-drop), var(--glass-inner);
}

.site-header {
  border-width: 0 0 1px 0;
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(23, 34, 56, 0.07);
}

/* Reading surfaces stay near-solid — long text on heavy glass is the main
   way this style fails people. */
.jr-panel-body,
.jr-panel-head,
.jr-controls,
.sq-textcol {
  background: var(--glass-fill-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- home stat cards ------------------------------------------------
   The calendar's composition: a very large figure, a small caption, and one
   accent colour. The card uses the reference's "active" recipe — outer and
   inner shadow together, plus a diagonal gradient — which is what lifts it off
   the background instead of sitting flat on it. */
.lc-stat {
  background-image:
    linear-gradient(318deg, rgba(163, 177, 198, 0.10) 0%,
                            rgba(163, 177, 198, 0.10) 55%,
                            rgba(163, 177, 198, 0.24) 100%),
    var(--glass-sheen);
  box-shadow:
    var(--glass-drop),
    inset 3px 3px 7px rgba(136, 165, 191, 0.30),
    inset -3px -3px 7px rgba(255, 255, 255, 0.75);
}
:root[data-theme="dark"] .lc-stat {
  background-image:
    linear-gradient(318deg, rgba(120, 150, 200, 0.05) 0%,
                            rgba(120, 150, 200, 0.05) 55%,
                            rgba(120, 150, 200, 0.14) 100%),
    var(--glass-sheen);
  box-shadow:
    var(--glass-drop),
    inset 3px 3px 7px rgba(0, 0, 0, 0.38),
    inset -3px -3px 7px rgba(255, 255, 255, 0.05);
}
/* The display-number rules that used to live here are gone. The proof cards
   were four huge figures with a caption each; they are four claims in
   sentences now, and `.lc-stat b` was still matching the `<b class="n">`
   figures inside those sentences — "20%" rendered at 2.5rem in the middle of
   a line and broke the paragraph in half. Nothing on this page needs a
   display number any more, so the rule is not scoped, it is deleted. */

/* ---- the hero tagline ------------------------------------------------
   One line between the title and the paragraph, doing the job the eyebrow
   tag used to: telling you what kind of thing you are looking at before you
   commit to reading. The eyebrow itself is gone from the hero — with the h1
   now naming the role, a tag above it saying almost the same words was the
   same sentence twice. */
.lc-tagline {
  margin: 12px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  font-weight: 600;
  line-height: 1.42;
  color: var(--text);
  max-width: 36ch;
}

/* ---- proof points ----------------------------------------------------
   These replaced four cards each built around one huge figure. The claims
   are sentences now, so the size contrast moved from a display number to the
   heading, and the figures inside the copy carry the colour instead. */
/* Headings wrap to different depths, so the copy under them would start at
   four different heights without this. */
.lc-proof {
  align-items: stretch;
  /* Explicit counts rather than auto-fit: auto-fit steps 4 → 3 on the way
     down, which strands the fourth card alone on its own row. With four
     items the only layouts that read as designed are 4, 2×2 and 1. The
     tightened card copy holds up fine at the ~210px this gives at 1024. */
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 960px) {
  .lc-proof { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .lc-proof { grid-template-columns: 1fr; }
}
.lc-stat {
  position: relative;
  align-content: start;
  padding: 22px 20px 20px;
  overflow: hidden;
}
/* The same hairline the pillar cards and the page headers carry, so the two
   rows of cards on this page read as the same family. */
.lc-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-num) 0%, rgba(255, 213, 77, 0.28) 34%, transparent 68%);
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 2;
}
.lc-stat:hover::before { opacity: 1; }
.lc-stat h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--pg-ink, var(--c-num));
}
.lc-stat h3 .n { color: inherit; }
.lc-stat p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- the tool marquee ------------------------------------------------
   A fixed label, then a scrolling lane of chips. It was a row of bare words
   before, which read as a list someone had forgotten to style — the chips are
   what make it a stack rather than a sentence.

   Two identical runs side by side, the track sliding left by exactly half its
   width. At the moment the animation loops, the second copy is sitting where
   the first one started, so the seam is invisible and there is nothing to
   measure and no JavaScript involved. Only `transform` moves. */
.lc-marquee {
  margin-top: 38px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lc-marquee-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.lc-marquee-label {
  flex: none;
  margin: 0;
  padding-right: 20px;
  border-right: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-num);
  white-space: nowrap;
}
.lc-marquee-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Faded at both ends, so chips enter and leave rather than being cut off
     against a hard edge. */
  /* Short on the left: the viewport starts right after the label, and a 5%
     fade there was wide enough to swallow most of the first chip, which read
     as a rendering fault rather than as something leaving. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 93%, transparent);
}
.lc-marquee-track {
  display: flex;
  width: max-content;
  animation: lc-marquee 42s linear infinite;
}
.lc-marquee-run {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 5px;
  list-style: none;
}
.lc-marquee-run li {
  padding: 6px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--glass-fill);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}
@keyframes lc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 720px) { .lc-marquee-label { display: none; } }
@media (prefers-reduced-motion: reduce) {
  /* Still the stack, just not a moving one. */
  .lc-marquee-track { animation: none; }
  .lc-marquee-viewport { -webkit-mask-image: none; mask-image: none; }
  .lc-marquee-run:last-child { display: none; }
  .lc-marquee-run { flex-wrap: wrap; gap: 8px; }
}

/* ---- the four pillars -----------------------------------------------
   These were four flat rectangles, each ending in a large blue button, and
   the buttons were the loudest thing in the section — four of them, in the
   one colour on the page that is not part of the palette. The number and the
   heading carry the card now, and the call to action is a link. */
.lc-card {
  position: relative;
  padding: 26px 26px 24px;
  overflow: hidden;
}
/* A hairline of the accent along the top edge, the same one the page headers
   carry. `::after` is already the cursor spotlight on these cards, so this is
   `::before` — and a pseudo-element is not matched by the `> *` reset, so it
   does not need the specificity dance the number does. */
.lc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-num) 0%, rgba(255, 213, 77, 0.3) 30%, transparent 62%);
  opacity: 0.75;
  transition: opacity 0.2s;
  z-index: 2;
}
.lc-card:hover::before { opacity: 1; }
/* The pillar's number, set large and low-contrast in the corner. It is the
   same trick the reference calendar plays: one figure much bigger than
   everything around it, doing the work a graphic would otherwise do. */
/* `.lc-card > *` forces position:relative on every child so the content sits
   above the spotlight highlight. One class ties with that, and a tie is
   settled by source order — which is how this ended up in the top-left corner
   on top of the kicker instead of in the opposite corner. Two classes wins
   outright, whatever order the rules end up in. */
.lc-card .lc-num {
  position: absolute;
  top: 12px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-num);
  opacity: 0.13;
  pointer-events: none;
}
.lc-card:hover .lc-num { opacity: 0.2; }
.lc-card .lc-kicker {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-num);
}
.lc-card h3 {
  margin: 0 0 12px;
  padding-right: 62px;
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.5vw, 1.34rem);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.015em;
  color: var(--text);
}
.lc-card > p {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
}

/* The call to action. A link with an arrow that steps forward on hover,
   rather than a fifth of the section given over to a solid blue block. */
.lc-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  align-self: flex-start;
  padding: 7px 2px 3px;
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pg-ink, var(--c-num));
  text-decoration: none;
  transition: border-color 0.15s, gap 0.15s;
}
.lc-go span { transition: transform 0.18s; }
.lc-go:hover,
.lc-go:focus-visible { border-bottom-color: var(--pg, var(--c-num)); }
.lc-go:hover span { transform: translateX(4px); }
.lc-go--soon { color: var(--muted); }
.lc-go--soon:hover,
.lc-go--soon:focus-visible { border-bottom-color: var(--muted); }

/* ---- deep links on the pillar cards ---------------------------------
   Every one of these opens the page with that example already selected, so
   the card can name what is inside it instead of describing it. */
.lc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.lc-links a,
.lc-links--flat span {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--glass-fill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lc-links a:hover,
.lc-links a:focus-visible {
  color: var(--c-num);
  border-color: var(--c-num);
  background: var(--c-num-soft);
}
/* The copy page does not exist yet, so its chips name what is coming without
   pretending to be links to it. */
.lc-links--flat span {
  border-style: dashed;
  background: transparent;
  color: var(--muted-soft);
}
/* Inline, so it must not take a line box of its own or push the words either
   side of it apart. */
.lc-card code {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

/* ---- section headings ------------------------------------------------
   Every h1 on the site is the display face; the h2s above each section were
   still Inter, which made the two look like they came from different pages.
   Same face, but sentence case in the body colour rather than uppercase in
   yellow — that treatment belongs to the h1, and a section heading wearing
   it reads as a second page title. */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.2;
  background: linear-gradient(99deg, #ffffff 30%, #ffe9a0 140%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  .section-title { background: none; -webkit-text-fill-color: currentColor; }
}

/* ---- about ------------------------------------------------------------
   Five paragraphs at the full container width run to about 95 characters a
   line, which is well past the point where the eye starts losing its place
   coming back to the left margin. The card keeps its width; the text does
   not. */
.about-card {
  position: relative;
  overflow: hidden;
  padding: 34px 38px 32px;
}
.about-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-num) 0%, rgba(255, 213, 77, 0.28) 22%, transparent 52%);
  opacity: 0.75;
  z-index: 2;
}
.about-card .section-title { margin-bottom: 18px; }
.about-card p { max-width: 74ch; }
.about-card p:last-child { color: var(--muted-soft); }

/* ---- cursor spotlight ----------------------------------------------
   A soft radial highlight that follows the pointer, drawn on a pseudo-element
   above the glass but under the content. scripts/theme.js writes --mx/--my.
   Only on card surfaces — never on the height-locked journeys panes. */
.lc-card,
.lc-stat,
.testimonial-slot,
.stub {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lc-card::after,
.lc-stat::after,
.testimonial-slot::after,
.stub::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    18rem 18rem at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.55), transparent 68%);
}
:root[data-theme="dark"] .lc-card::after,
:root[data-theme="dark"] .lc-stat::after,
:root[data-theme="dark"] .testimonial-slot::after,
:root[data-theme="dark"] .stub::after {
  background: radial-gradient(
    18rem 18rem at var(--mx, 50%) var(--my, 0%),
    rgba(140, 180, 255, 0.16), transparent 66%);
}
.lc-card:hover::after,
.lc-stat:hover::after,
.testimonial-slot:hover::after,
.stub:hover::after { opacity: 1; }

.lc-card:hover,
.lc-stat:hover,
.testimonial-slot:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-drop), var(--glass-inner),
              0 0 0 1px rgba(255, 255, 255, 0.5);
}
:root[data-theme="dark"] .lc-card:hover,
:root[data-theme="dark"] .lc-stat:hover,
:root[data-theme="dark"] .testimonial-slot:hover {
  box-shadow: var(--glass-drop), var(--glass-inner),
              0 0 0 1px rgba(140, 180, 255, 0.22);
}
/* The card content has to sit above the highlight. */
.lc-card > *, .lc-stat > *, .testimonial-slot > *, .stub > * { position: relative; z-index: 1; }

/* ---- the shared page header -----------------------------------------
   The header now lives inside the card, above the tabs, on all three pages.
   Sitting on the page background it read as loose text floating over a
   gradient with nothing holding it; here it is the top of the thing it
   introduces, and it gets the card's own surface behind it.

   Title on the left, framing copy on the right. Stacking them made each page
   look like a different page. */
.pg-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  gap: 8px 34px;
  align-items: start;
  padding: 22px 26px 20px;
  border-bottom: 1px solid var(--border-strong);
  /* A touch lighter than the panes below it, so the eye reads top-of-card
     rather than one more row. */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.015) 100%);
  position: relative;
}
/* A hairline of the title colour along the top edge of the card. */
.pg-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg,
    var(--c-num) 0%, rgba(255, 213, 77, 0.35) 34%, transparent 68%);
}
@media (max-width: 700px) { .pg-head { padding: 18px 18px 16px; } }

/* The eyebrow was grey-on-grey and disappeared. It is a tag now — on every
   page, so the label above a heading always looks like the same thing. */
.eyebrow {
  display: inline-block;
  margin: 0 0 5px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pg-soft, var(--c-num-soft));
  color: var(--text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
/* Page titles take the display face and the yellow from the reference. All
   caps, because at this weight and colour a title in sentence case reads as a
   sentence; in caps it reads as a sign. Tracking is opened up rather than
   tightened — caps need the air, lowercase does not. */
/* Every page's title, not just the three with a .pg-head — the home hero and
   the two shorter pages are titles too, and the point of a display face is
   that it means the same thing everywhere. */
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  /* Molten amber instead of flat yellow: the colour stays, the surface
     gets light falling across it. color remains as the paint fallback. */
  color: var(--c-num);
  background: linear-gradient(97deg, var(--h1-a, #ffe9a0) 0%, var(--h1-b, #ffd54d) 45%, var(--h1-c, #eda62a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
@media (forced-colors: active) {
  h1 { background: none; -webkit-text-fill-color: currentColor; }
}
.pg-head-title h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
}

/* Borrowed from the calendar: a tiny label, one very large number, and a
   short caption. Size contrast does the work, not decoration. */
.pg-metric {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 6px 18px 8px;
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow:
     8px  8px 16px var(--neu-dark),
    -8px -8px 16px var(--neu-light),
    inset 2px 2px 5px rgba(136, 165, 191, 0.16),
    inset -2px -2px 5px rgba(255, 255, 255, 0.55);
}
:root[data-theme="dark"] .pg-metric {
  box-shadow:
     8px  8px 16px var(--neu-dark),
    -8px -8px 16px var(--neu-light),
    inset 2px 2px 5px rgba(0, 0, 0, 0.42),
    inset -2px -2px 5px rgba(255, 255, 255, 0.05);
}
.pg-metric b {
  font-size: clamp(2.2rem, 3.7vw, 2.9rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--c-num);
}
.pg-metric span {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-soft);
  max-width: 14ch;
  line-height: 1.35;
}
@media (max-width: 1080px) { .pg-metric { display: none; } }
.pg-head-copy {
  /* Optically aligned with the title rather than the eyebrow above it. */
  padding-top: 4px;
  columns: 1;
}
.pg-head-copy p {
  margin: 0 0 8px;
  font-size: 15.2px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}
.pg-head-copy p:last-child { margin-bottom: 0; }
/* The emphasised clause used to get a marker-pen underline. It was added when
   the header sat on the page background and needed something to lift it; now
   the header has a surface of its own and the underline just cut through the
   descenders of a three-line clause. Plain bright text does the job, and the
   yellow title above it is already carrying the colour. */
.pg-head-copy strong {
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--pg-soft) 0);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A figure in running text. Same amber as the big metric numbers, so a number
   reads the same way wherever it appears. */
.pg-head-copy b,
.pz-sub b.n {
  color: var(--c-num-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* …but the two <b> words in personalization's intro are terms, not figures. */
.pz-sub b:not(.n) { color: var(--text); font-weight: 650; }
/* Two paragraphs of framing sit side by side rather than doubling the height. */
.pg-head-copy:has(p + p) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 4px 26px;
}
@media (max-width: 940px) {
  .pg-head { grid-template-columns: 1fr; gap: 12px; }
  .pg-head-title h1 { max-width: none; }
}

/* ---- numbers in running text ----------------------------------------
   Same idea at small scale: the figure a reader is looking for is the one
   thing that is not the body colour. */
.n {
  font-weight: 700;
  color: var(--c-num-ink);
  font-variant-numeric: tabular-nums;
}
.n--pos { color: var(--c-pos); }
.n--neg { color: var(--c-neg); }

/* ---- the shared tab strip ------------------------------------------
   Taken from the segmentation page, which had the best version of this: a
   segmented control built into the top edge of the panel it controls, so the
   active tab merges into the content instead of floating above it.

   Equal columns, hairline dividers, and a 2px accent bar sitting on the
   panel's own border line — that last detail is what makes it read as
   connected. Now used by all three pages. */
/* ---- page accents ------------------------------------------------
   The calculator reference keeps one neutral surface and four colours
   that each mean something. The site now does the same at page level:
   blue stays the colour of links and of the inspection page
   (personalization), and the other tool pages each commit to one of the
   remaining calculator colours, so no page is wall-to-wall blue.
     journeys        coral      (its TESTING pink grows up into this)
     segmentation    green      (the finding-money page)
     personalization blue       (reading and inspecting)
     copy            amber      (the craft page, the numbers' family)
   --pg       accents on chrome: borders, underlines, rings
   --pg-ink   text at small sizes, AA against the surface
   --pg-solid fills that carry --pg-btn-ink text
   --pg-soft  tint washes and focus rings */
:root {
  --pg: var(--accent);
  --pg-ink: var(--accent-dark);
  --pg-solid: var(--accent-solid);
  --pg-soft: rgba(37, 99, 235, 0.14);
  --pg-btn-ink: #ffffff;
}
body.home-page     { --pg: #c08a1c; --pg-ink: #7d5a12; --pg-solid: #e2a70f; --pg-soft: rgba(192, 138, 28, 0.17); --pg-btn-ink: #241a02; }
body.journeys-page { --pg: #d84a72; --pg-ink: #a81f52; --pg-solid: #bb2e5d; --pg-soft: rgba(216, 74, 114, 0.15); }
body.sql-page      { --pg: #159a63; --pg-ink: #0b6b45; --pg-solid: #0d7d51; --pg-soft: rgba(21, 154, 99, 0.15); }
/* Dark is the only theme users see; these page identities colour the
   title gradient and retune the number tokens (the .n rules stay tied to
   --c-num-ink — the pages retune the token, same trick as the home cards). */
:root[data-theme="dark"] body.journeys-page {
  --h1-a: #ffd9e4; --h1-b: #ff86a8; --h1-c: #e4487a;
  --c-num: #ff86a8; --c-num-ink: #ff9db9;
  --c-num-soft: rgba(255, 134, 168, 0.15); --c-tag-ink: #ff9db9;
}
:root[data-theme="dark"] body.sql-page {
  --h1-a: #d2f7e6; --h1-b: #45d197; --h1-c: #159a63;
  --c-num: #45d197; --c-num-ink: #6fdfae;
  --c-num-soft: rgba(69, 209, 151, 0.15); --c-tag-ink: #6fdfae;
}
:root[data-theme="dark"] body.certs-page {
  --h1-a: #e6e2ff; --h1-b: #b6adff; --h1-c: #7a68e0;
  --c-num: #b6adff; --c-num-ink: #cdc6ff;
  --c-num-soft: rgba(139, 127, 240, 0.16); --c-tag-ink: #cdc6ff;
}
:root[data-theme="dark"] body.testimonials-page {
  --h1-a: #ffe3cc; --h1-b: #ff9650; --h1-c: #e0662a;
  --c-num: #ff9650; --c-num-ink: #ffb27a;
  --c-num-soft: rgba(255, 150, 80, 0.16); --c-tag-ink: #ffb27a;
  --pg: #ff9650; --pg-ink: #ffb27a; --pg-solid: #d1631f; --pg-soft: rgba(255, 150, 80, 0.18);
}
:root[data-theme="dark"] body.personalization-page {
  --h1-a: #dbe7ff; --h1-b: #7ba9ff; --h1-c: #4a83e8;
  --c-num: #7ba9ff; --c-num-ink: #9dc0ff;
  --c-num-soft: rgba(123, 169, 255, 0.15); --c-tag-ink: #9dc0ff;
  /* the blue wash was invisible at the shared alpha */
  --pg-soft: rgba(123, 169, 255, 0.26);
}
body.copy-page     { --pg: #c08a1c; --pg-ink: #7d5a12; --pg-solid: #e2a70f; --pg-soft: rgba(192, 138, 28, 0.17); --pg-btn-ink: #241a02; }
body.certs-page    { --pg: #8b7ff0; --pg-ink: #b6adff; --pg-solid: #5b4bbd; --pg-soft: rgba(139, 127, 240, 0.17); }
body.testimonials-page { --pg: #d1631f; --pg-ink: #a8460f; --pg-solid: #d1631f; --pg-soft: rgba(209, 99, 31, 0.16); }
/* The corner bloom carries the page's colour too. --tint-d is the
   bottom-right lobe of the background wash. */
body.home-page, body.copy-page      { --tint-d: rgba(255, 213, 77, 0.15); }
body.journeys-page                  { --tint-d: rgba(255, 134, 168, 0.17); }
body.sql-page                       { --tint-d: rgba(69, 209, 151, 0.15); }
body.personalization-page           { --tint-d: rgba(123, 169, 255, 0.16); }
body.testimonials-page              { --tint-d: rgba(255, 150, 80, 0.16); }
body.certs-page                     { --tint-d: rgba(139, 127, 240, 0.16); }

:root[data-theme="dark"] body.home-page     { --pg: #ffd54d; --pg-ink: #ffdf75; --pg-solid: #f5c026; --pg-soft: rgba(255, 213, 77, 0.16); --pg-btn-ink: #241a02; }
:root[data-theme="dark"] body.journeys-page { --pg: #ff86a8; --pg-ink: #ff9db9; --pg-solid: #c73763; --pg-soft: rgba(255, 134, 168, 0.17); }
:root[data-theme="dark"] body.sql-page      { --pg: #45d197; --pg-ink: #6fdfae; --pg-solid: #0f8f5c; --pg-soft: rgba(69, 209, 151, 0.16); }
:root[data-theme="dark"] body.copy-page     { --pg: #ffd54d; --pg-ink: #ffdf75; --pg-solid: #f5c026; --pg-soft: rgba(255, 213, 77, 0.16); --pg-btn-ink: #241a02; }

.ui-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-drop), var(--glass-inner);
}

.ui-tabstrip {
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-alt);
  margin: 0;
  gap: 0;
}
.ui-tabstrip > button {
  font: inherit;
  font-size: 13.2px;
  font-weight: 600;
  padding: 9px 10px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  text-align: center;
  transform: none;
  transition: background 0.14s, color 0.14s;
}
.ui-tabstrip > button:last-child { border-right: 0; }
.ui-tabstrip > button small,
.ui-tabstrip > button.is-active small {
  display: block;
  font-weight: 500;
  font-size: 11px;
  opacity: 0.85;
  margin-top: 1px;
  color: inherit;
}
.ui-tabstrip > button:hover {
  color: var(--text);
  background: var(--glass-fill-strong);
  transform: none;
  box-shadow: none;
}
.ui-tabstrip > button.is-active {
  background: var(--glass-fill-strong);
  color: var(--pg-ink);
  font-weight: 700;
  box-shadow: none;
  transform: none;
}
.ui-tabstrip > button.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--pg);
}
.ui-tabstrip > button:focus-visible { outline: 2px solid var(--pg); outline-offset: -3px; }

/* Inside the shell the panes are divided by rules, not by gaps and borders. */
.ui-shell .jr-stage,
.ui-shell .pz-stage { gap: 0; }
.ui-shell .jr-flowwrap,
.ui-shell .jr-panel,
.ui-shell .pz-pane,
.ui-shell .pz-rail {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-image: none;
}
.ui-shell .jr-flowwrap,
.ui-shell .pz-rail,
.ui-shell .pz-pane { border-right: 1px solid var(--border-strong); }
.ui-shell .jr-panel,
.ui-shell .pz-pane:last-child { border-right: 0; }
.ui-shell .jr-flowwrap {
  background-color: rgba(255, 255, 255, 0.02);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}
.ui-shell .jr-panel { background-color: var(--glass-fill-strong); }

/* Inside the card the header is a row of the card, so its own page-level
   spacing has to go — every page had its own margin under it. */
.ui-shell > .pg-head { margin: 0; flex: none; }
.ui-shell .pz-controlbar-label { font-size: 11px; }
.ui-shell .pz-controlbar .ui-tabstrip > button { padding: 7px 10px; }

/* The personalization control bar becomes the strip's own row. */
.ui-shell .pz-controlbar {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-alt);
  background-image: none;
  border-bottom: 1px solid var(--border-strong);
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.ui-shell .pz-controlbar-label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--border-strong);
  white-space: nowrap;
}
.ui-shell .pz-controlbar .ui-tabstrip {
  flex: 1;
  border-bottom: 0;
  background: transparent;
}

/* ---- neumorphic controls -------------------------------------------
   Only the free-standing controls now. Anything that belongs to a panel uses
   the tab strip above instead — a raised, floating tab is exactly the thing
   that made these read as five unrelated components. */
.sq-extab,
.sq-vtab,
.pz-chip,
.pz-ver,
.theme-toggle {
  background: var(--surface-raised);
  border: 1px solid transparent;
  box-shadow:
     5px  5px 11px var(--neu-dark),
    -5px -5px 11px var(--neu-light);
  color: var(--muted);
  transition: box-shadow 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sq-extab:hover,
.sq-vtab:hover,
.pz-chip:hover,
.pz-ver:hover,
.theme-toggle:hover {
  color: var(--text);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow:
     7px  7px 15px var(--neu-dark),
    -7px -7px 15px var(--neu-light);
}

/* Pressed = the same shadows turned inward, at smaller offsets. */
.sq-extab.is-active,
.sq-vtab.is-active,
.pz-chip.is-active,
.pz-ver.is-active {
  background: var(--surface);
  color: var(--accent-dark);
  border-color: transparent;
  transform: none;
  box-shadow:
    inset  4px  4px  9px var(--neu-dark),
    inset -4px -4px  9px var(--neu-light);
}

/* One focus treatment for every control on the site. Neumorphism removes the
   edge that normally carries focus, so this is not optional. */
.sq-extab:focus-visible,
.sq-vtab:focus-visible,
.pz-chip:focus-visible,
.pz-ver:focus-visible,
.theme-toggle:focus-visible,
.btn:focus-visible,
.site-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- buttons ------------------------------------------------------- */
/* The primary action stays flat and filled. A neumorphic CTA is a CTA nobody
   can find. */
.btn-primary,
.jr-btn:not(.ghost),
.cvn,
.pz-avatar {
  background: var(--pg-solid);
  border-color: var(--pg-solid);
  color: var(--pg-btn-ink);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pg) 30%, transparent);
}
/* A light sweeping across the button on hover. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent,
              rgba(255, 255, 255, 0.42), transparent);
  transition: left 0.55s ease;
}
.btn-primary:hover::after { left: 120%; }

.btn-outline,
.jr-btn.ghost {
  background: var(--surface-raised);
  border: 1px solid transparent;
  color: var(--pg-ink);
  box-shadow: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light);
}

/* ---- navigation ------------------------------------------------------ */
.site-nav a {
  position: relative;
  transition: color 0.16s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--accent-dark); }

/* ---- the theme toggle ---------------------------------------------- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  margin-left: 14px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.theme-toggle .t-sun { display: none; }
.theme-toggle .t-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .t-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .t-moon { display: none; }

/* ---- dark-mode corrections for hardcoded light colours -------------- */
:root[data-theme="dark"] .jr-panel-head,
:root[data-theme="dark"] .jr-controls,
:root[data-theme="dark"] .jr-set-head { background: rgba(255, 255, 255, 0.045); }
:root[data-theme="dark"] .cvnode,
:root[data-theme="dark"] .jr-hyp,
:root[data-theme="dark"] .jr-cells,
:root[data-theme="dark"] .jr-code { background: #262b34; }
:root[data-theme="dark"] .cvbr { background: #2c323d; }
:root[data-theme="dark"] .jr-tip { background: #262b34; color: var(--text); }
:root[data-theme="dark"] .cvrk { background: #3a414d; }
:root[data-theme="dark"] .cvbr.last { background: #3a2f24; color: #e6b98a; border-color: #574434; }
:root[data-theme="dark"] .cvn,
:root[data-theme="dark"] .cvflag { border-color: var(--surface); }
:root[data-theme="dark"] {
  --jr-line: #59637a;
  --jr-grid: rgba(255, 255, 255, 0.045);
  --jr-soft: transparent;
  --jr-card: #262b34;
  --jr-ink-2: #c3cbd8;
  --jr-accent-soft: rgba(91, 147, 255, 0.16);
  --jr-accent-line: rgba(91, 147, 255, 0.34);
  --jr-test-soft: rgba(194, 65, 122, 0.16);
  --jr-test-line: rgba(194, 65, 122, 0.36);
  --jr-test: #ff9ec5;
}

/* Segmentation. The page defines its own ink and surface tokens; overriding
   those is cleaner than chasing the rules that use them. */
:root[data-theme="dark"] {
  --sq-ink-2: #c3cbd8;
  --sq-ink-3: #98a2b3;
  --sq-soft: rgba(255, 255, 255, 0.04);
  --sq-line: rgba(91, 147, 255, 0.34);
  --sq-tint: rgba(69, 209, 151, 0.13);
  --sq-code-bg: #1b1f27;
  --sq-kw: #7aa7ff;
  --sq-str: #5fd0a0;
  --sq-num: #f0b072;
  --sq-comment: #7c8798;
  --sq-c0: #5b93ff;
  --sq-c1: #ff9d5c;
}
:root[data-theme="dark"] .sq-extab,
:root[data-theme="dark"] .sq-textcol { background: transparent; }
:root[data-theme="dark"] .sq-bracket i {
  background: #262b34; border-color: #4a5568; color: #aab6c8;
}
:root[data-theme="dark"] .sq-bartrack { background: rgba(255, 255, 255, 0.09); }
:root[data-theme="dark"] .sq-delta { background: rgba(15, 122, 79, 0.22); color: #6fdcab; }
:root[data-theme="dark"] .sq-sec:hover { background: rgba(91, 147, 255, 0.07); }
:root[data-theme="dark"] .sq-sec.is-active { background: rgba(91, 147, 255, 0.11); }

/* Personalization — the code pane now follows the theme the way the SQL one
   does, instead of being permanently dark. */
:root {
  --pz-code-bg: #fbfcfe;
  --pz-code-bg-0: rgba(251, 252, 254, 0);
  --pz-code-fg: #2b3648;
  --pz-tok: #a35a06;
  --pz-blk-bg: rgba(163, 90, 6, 0.055);
  --pz-blk-line: rgba(163, 90, 6, 0.3);
  --pz-blk-on: rgba(163, 90, 6, 0.12);
  /* The tooltip is a dark chip in both themes — --pz-ink is a text colour in
     dark, and reusing it here is what made the tooltip white on white. */
  --pz-tip-bg: #10141f;
  --pz-tip-fg: #e8eefb;
  --pz-tip-key: #ffd479;
}
:root[data-theme="dark"] {
  --pz-code-bg: #1b1f27;
  --pz-code-bg-0: rgba(27, 31, 39, 0);
  --pz-code-fg: #dbe3f0;
  --pz-tok: #ffd479;
  --pz-blk-bg: rgba(255, 212, 121, 0.07);
  --pz-blk-line: rgba(255, 212, 121, 0.34);
  --pz-blk-on: rgba(255, 212, 121, 0.15);
  --pz-tip-bg: #0b1220;
}

.pz-code {
  background:
    linear-gradient(var(--pz-code-bg) 30%, var(--pz-code-bg-0)) top / 100% 26px no-repeat local,
    linear-gradient(var(--pz-code-bg-0), var(--pz-code-bg) 70%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(15, 25, 45, 0.22), rgba(0, 0, 0, 0)) top / 100% 13px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(15, 25, 45, 0.22), rgba(0, 0, 0, 0)) bottom / 100% 13px no-repeat scroll,
    var(--pz-code-bg);
  border-top: 1px solid var(--border);
}
:root[data-theme="dark"] .pz-code {
  background:
    linear-gradient(var(--pz-code-bg) 30%, var(--pz-code-bg-0)) top / 100% 26px no-repeat local,
    linear-gradient(var(--pz-code-bg-0), var(--pz-code-bg) 70%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) top / 100% 13px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) bottom / 100% 13px no-repeat scroll,
    var(--pz-code-bg);
}

.pz-tip { background: var(--pz-tip-bg); color: var(--pz-tip-fg); }
.pz-tip b { color: var(--pz-tip-key); }
.pz-tip::after { border-top-color: var(--pz-tip-bg); }
.pz-tip.is-below::after { border-bottom-color: var(--pz-tip-bg); }

:root[data-theme="dark"] {
  --pz-ink: #e9edf4;
  --pz-soft: rgba(255, 255, 255, 0.04);
  --pz-accent-soft: rgba(91, 147, 255, 0.16);
  --pz-accent-line: rgba(91, 147, 255, 0.34);
  --pz-warn: #e8a765;
  --pz-warn-soft: rgba(180, 83, 15, 0.18);
  --pz-warn-line: rgba(240, 207, 174, 0.3);
  --pz-good: #6fdcab;
  --pz-good-soft: rgba(15, 122, 79, 0.2);
  --pz-good-line: rgba(189, 227, 206, 0.28);
}
:root[data-theme="dark"] .pz-rail.is-live { background: transparent; }
:root[data-theme="dark"] .pz-drawer-body { background: rgba(255, 255, 255, 0.04); }

/* The email preview is a picture of somebody else's inbox, so it does not
   follow the site theme — inverting it would misrepresent what the recipient
   actually sees. It stays light in both themes, on purpose. */
.pz-preview,
.pz-preview .pz-prod {
  color-scheme: light;
  background: #ffffff;
  color: #1b1f27;
}
.pz-preview { background: var(--pz-code-bg); padding: 18px; }
:root[data-theme="dark"] .pz-preview { border-top: 1px solid var(--border); }

/* ---- dark: surfaces that ship a hardcoded light background ---------- */
:root[data-theme="dark"] .home-page .about-card,
:root[data-theme="dark"] .home-page .hero-grid,
:root[data-theme="dark"] .pz-details,
:root[data-theme="dark"] .testimonials-shell,
:root[data-theme="dark"] .testimonial-player,
:root[data-theme="dark"] .site-footer {
  background: var(--glass-fill);
  background-image: none;
  border-color: var(--border-strong);
  color: var(--text);
}
/* An opaque white section wrapper the about card sits inside. */
.about-section, .section { background: transparent; }
:root[data-theme="dark"] .testimonials-intro .section-title,
:root[data-theme="dark"] .testimonial-meta h3 { color: var(--text); }
:root[data-theme="dark"] .testimonial-meta p,
:root[data-theme="dark"] .more-projects { color: var(--muted); }
:root[data-theme="dark"] .more-projects a,
:root[data-theme="dark"] .testimonials-page .site-nav a.current::after { color: var(--accent); }

/* The pink used for TESTING badges and brief labels is a light accent in dark
   mode, so anything filled with it needs a darker variant behind white text. */
:root[data-theme="dark"] { --jr-test-solid: #a4325f; }
:root[data-theme="dark"] .cvflag { background: var(--jr-test-solid); }
:root[data-theme="dark"] .is-none .pz-mark {
  background: rgba(255, 255, 255, 0.07); color: var(--muted);
}

/* The preview is locked to a light surface, so the tokens inside it have to be
   the light ones too — otherwise dark-mode text colours land on white. */
:root[data-theme="dark"] .pz-preview {
  --pz-ink: #0f172a;
  --pz-good: #0f7a4f;
  --pz-good-soft: #edfaf3;
  --pz-good-line: #bde3ce;
  --pz-warn: #b4530f;
  --pz-warn-soft: #fdf1e7;
  --pz-warn-line: #f0cfae;
  --pz-accent-soft: #eef3ff;
  --pz-accent-line: #c7d7fb;
  --text: #1b1f27;
  --muted: #454e5c;
  --muted-soft: #55606e;
  --border: rgba(20, 30, 50, 0.09);
  --border-strong: rgba(20, 30, 50, 0.14);
  --accent: #1f5fd0;
  --accent-dark: #1d4ed8;
  --accent-solid: #1f5fd0;
  --card-bg: #eef1f6;
  --bg-alt: #f7f9fc;
  --surface: #ffffff;
  --surface-raised: #f4f7fb;
}

/* ---- accessibility fallbacks --------------------------------------- */
/* Transparency off: solid surfaces, no blur. */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .jr-panel, .jr-flowwrap, .lc-card, .lc-stat, .about-card,
  .stub, .sq-panel, .pz-pane, .pz-rail, .pz-controlbar, .testimonial-slot,
  .ui-shell {
    background: var(--surface-raised);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--border-strong);
  }
  body::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .lc-card, .lc-stat, .testimonial-slot, .stub, .site-nav a::after,
  .btn-primary::after { transition: none; }
  .lc-card:hover, .lc-stat:hover, .testimonial-slot:hover { transform: none; }
  .sq-extab, .sq-vtab, .pz-chip, .pz-ver, .theme-toggle, .ui-tabstrip > button {
    transition: none;
  }
  .sq-extab:hover, .sq-vtab:hover, .pz-chip:hover, .pz-ver:hover, .theme-toggle:hover {
    transform: none;
  }
}

/* Forced colours strips both transparency and shadow. The 1px border is then
   the only edge these components have, so it has to be a real one. */
@media (forced-colors: active) {
  .site-header, .jr-panel, .jr-flowwrap, .lc-card, .lc-stat, .about-card,
  .stub, .sq-panel, .pz-pane, .pz-rail, .pz-controlbar, .testimonial-slot,
  .ui-shell, .ui-tabstrip > button,
  .sq-extab, .sq-vtab, .pz-chip, .pz-ver, .theme-toggle {
    border: 1px solid CanvasText;
    background: Canvas;
  }
  body::before { display: none; }
}

/* Personalization's masthead runs two paragraphs where the other pages run
   one, so it gives the width back to the copy column. */
.pz-masthead.pg-head { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr) auto; }


/* ---- page-accent consumption ------------------------------------ */

/* The home hero commits to amber, the site's own number colour, and
   the four cards each take one calculator colour: coral, green, blue,
   amber, in reading order. */
body.home-page .btn-primary {
  background: #e2a70f;
  border-color: #e2a70f;
  color: #241a02;
}
body.home-page .btn-primary:hover,
body.home-page .btn-primary:focus-visible {
  background: #f2b81f;
  border-color: #f2b81f;
  color: #241a02;
}
:root[data-theme="dark"] body.home-page .btn-primary {
  background: #f5c026;
  border-color: #f5c026;
}
:root[data-theme="dark"] body.home-page .btn-primary:hover,
:root[data-theme="dark"] body.home-page .btn-primary:focus-visible {
  background: #ffd54d;
  border-color: #ffd54d;
}

.lc-cards .lc-card:nth-child(1), .lc-proof .lc-stat:nth-child(1) { --pg: #d84a72; --pg-ink: #a81f52; }
.lc-cards .lc-card:nth-child(2), .lc-proof .lc-stat:nth-child(2) { --pg: #159a63; --pg-ink: #0b6b45; }
.lc-cards .lc-card:nth-child(3), .lc-proof .lc-stat:nth-child(3) { --pg: #4a83e8; --pg-ink: #1f5fd0; }
.lc-cards .lc-card:nth-child(4), .lc-proof .lc-stat:nth-child(4) { --pg: #c08a1c; --pg-ink: #7d5a12; }
.lc-cards .lc-card:nth-child(5) { --pg: #d97a2e; --pg-ink: #a35a1a; }
.lc-cards .lc-card:nth-child(6) { --pg: #6d5bd8; --pg-ink: #4c3fae; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(1),
:root[data-theme="dark"] .lc-proof .lc-stat:nth-child(1) { --pg: #ff86a8; --pg-ink: #ff9db9; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(2),
:root[data-theme="dark"] .lc-proof .lc-stat:nth-child(2) { --pg: #45d197; --pg-ink: #6fdfae; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(3),
:root[data-theme="dark"] .lc-proof .lc-stat:nth-child(3) { --pg: #7ba9ff; --pg-ink: #9dc0ff; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(4),
:root[data-theme="dark"] .lc-proof .lc-stat:nth-child(4) { --pg: #ffd54d; --pg-ink: #ffdf75; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(5) { --pg: #ff9d5c; --pg-ink: #ffb37e; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(6) { --pg: #8b7ff0; --pg-ink: #b6adff; }

.lc-proof .lc-stat { border-top: 3px solid var(--pg); }
.lc-cards .lc-card .lc-kicker { color: var(--pg-ink); }
.lc-cards .lc-card .lc-num { color: var(--pg); }


/* Card figures follow their card: the .n rule stays tied to --c-num-ink
   (a suite guard), so the cards retune the token instead of the rule. */
.lc-cards .lc-card:nth-child(1), .lc-proof .lc-stat:nth-child(1) { --c-num: #d84a72; --c-num-ink: #a81f52; }
.lc-cards .lc-card:nth-child(2), .lc-proof .lc-stat:nth-child(2) { --c-num: #159a63; --c-num-ink: #0b6b45; }
.lc-cards .lc-card:nth-child(3), .lc-proof .lc-stat:nth-child(3) { --c-num: #4a83e8; --c-num-ink: #1f5fd0; }
.lc-cards .lc-card:nth-child(4), .lc-proof .lc-stat:nth-child(4) { --c-num: #c08a1c; --c-num-ink: #7d5a12; }
.lc-cards .lc-card:nth-child(5) { --c-num: #d97a2e; --c-num-ink: #a35a1a; }
.lc-cards .lc-card:nth-child(6) { --c-num: #6d5bd8; --c-num-ink: #4c3fae; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(1),
:root[data-theme="dark"] .lc-proof .lc-stat:nth-child(1) { --c-num: #ff86a8; --c-num-ink: #ff9db9; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(2),
:root[data-theme="dark"] .lc-proof .lc-stat:nth-child(2) { --c-num: #45d197; --c-num-ink: #6fdfae; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(3),
:root[data-theme="dark"] .lc-proof .lc-stat:nth-child(3) { --c-num: #7ba9ff; --c-num-ink: #9dc0ff; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(4),
:root[data-theme="dark"] .lc-proof .lc-stat:nth-child(4) { --c-num: #ffd54d; --c-num-ink: #ffdf75; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(5) { --c-num: #ff9d5c; --c-num-ink: #ffb37e; }
:root[data-theme="dark"] .lc-cards .lc-card:nth-child(6) { --c-num: #8b7ff0; --c-num-ink: #b6adff; }

/* The outline button follows the page too, so the home pair reads
   amber-filled + amber-outlined instead of amber + stray blue. */
.btn-outline { color: var(--pg-ink); border-color: currentColor; }
.btn-outline:hover, .btn-outline:focus-visible { color: var(--pg-ink); border-color: var(--pg); background: var(--pg-soft); }


/* ---- typography reach ------------------------------------------- */
/* The same highlighter wash on every page's emphasised lede clause. */
.lc-sub strong,
.section-lede strong,
.jr-lede strong {
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--pg-soft) 0);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* ---- nav wears the destination's colour --------------------------- */
.site-nav a[href="/journeys/"]:hover,
.site-nav a[href="/journeys/"][aria-current="page"] { color: #ff9db9; }
.site-nav a[href="/journeys/"]::after { background: #ff86a8; }
.site-nav a[href="/segmentation/"]:hover,
.site-nav a[href="/segmentation/"][aria-current="page"] { color: #6fdfae; }
.site-nav a[href="/segmentation/"]::after { background: #45d197; }
.site-nav a[href="/personalization/"]:hover,
.site-nav a[href="/personalization/"][aria-current="page"] { color: #9dc0ff; }
.site-nav a[href="/personalization/"]::after { background: #7ba9ff; }
.site-nav a[href="/copy/"]:hover,
.site-nav a[href="/copy/"][aria-current="page"] { color: #ffdf75; }
.site-nav a[href="/copy/"]::after { background: #ffd54d; }




/* The segmentation example strip is a card row, like the control bar on
   personalization: no rounding, no margin, full bleed. */
.ui-shell .sq-exbar { margin: 0; }
/* The shared strip rule above says flex: none (strips are usually shell
   rows); inside the exbar this one must stretch past the label instead,
   and theme.css loads last so the shared rule was winning. */
.ui-shell .sq-extabs { background: transparent; flex: 1; }
/* The shell already blurs; a second backdrop-filter on the panel inside it
   is a nested re-blur, the exact cost the perf pass removed everywhere else. */
.ui-shell .sq-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ---- the brand, wearing the page's colour ------------------------- */
.brand-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--pg-ink);
  transition: color 0.2s ease;
}

/* ---- reaching me: the dropdown rows ------------------------------- */
.nc-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  transition: background 0.14s;
}
.nc-row:hover { background: var(--bg-alt); }
.nc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nc-ico {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--pg-soft);
  color: var(--pg-ink);
}
/* drawn, like the rest of the iconography on this site. Both pseudo
   elements share the grid cell, so they centre together: the body is an
   18x13 bordered box, and the flap is a rotated square whose left and
   right points land exactly on the body's top corners. */
.nc-ico--mail::before {
  content: "";
  grid-area: 1 / 1;
  width: 18px;
  height: 13px;
  margin-top: 3px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
}
.nc-ico--mail::after {
  content: "";
  grid-area: 1 / 1;
  width: 12.6px;
  height: 12.6px;
  margin-top: -8px;
  transform: rotate(45deg);
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  border-radius: 0 0 3px 0;
}
.nc-ico--in {
  background: #0a66c2;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-display);
  line-height: 1;
  /* Lowercase glyphs sit below the box centre, so lift them a hair. */
  transform: translateY(-1px);
}
.nc-txt {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.nc-txt b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.nc-txt span {
  font-size: 12px;
  color: var(--muted-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-hint {
  margin-left: auto;
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.nc-row:hover .nc-hint { color: var(--pg-ink); }
.nc-row.is-done .nc-hint { color: var(--c-pos); }



/* The marquee is a full-bleed band, so the section under it already has a
   visual edge. A second 72px of section padding on top of the band's own
   made that seam the widest gap on the page. */
.lc-marquee + .section,
.lc-hero + .section { padding-top: 46px; }

/* The about section closes with a way to reach me, not just a sign-off. */
.about-reach {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.site-nav a[href="/certifications/"]:hover,
.site-nav a[href="/certifications/"][aria-current="page"] { color: #b6adff; }
.site-nav a[href="/certifications/"]::after { background: #8b7ff0; }
.site-nav a[href="/testimonials/"]:hover,
.site-nav a[href="/testimonials/"][aria-current="page"] { color: #ffb27a; }
.site-nav a[href="/testimonials/"]::after { background: #ff9650; }


/* ---- compositing budget -------------------------------------------
   Glass is only worth its cost on the outermost surface. A blurred card
   inside an already-blurred shell samples the same backdrop twice for no
   visual gain, and on a page with several cards that is what makes
   scrolling stutter. Cards keep the fill and the border, and give up the
   blur. */
.ts-card,
.cf-card,
.lc-card,
.lc-stat {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: var(--glass-fill-strong);
  /* the card's paint stays inside the card */
  contain: paint;
}


/* ---- contact, in the nav ------------------------------------------ */
/* The footer's reach rows moved up here: one dropdown, same drawn icons. */
.nav-contact { position: relative; }
.nav-contact-btn {
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.16s ease;
}
.nav-contact-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}
.nav-contact-btn:hover,
.nav-contact-btn[aria-expanded="true"] { color: var(--text); }
.nav-contact-btn[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 3px; }
.nav-contact-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The author display would beat the hidden attribute's UA rule, so the
   closed state has to be spelled out. */
.nav-contact-menu[hidden] { display: none; }
/* The menu lives inside .site-nav, whose anchor rule out-specifies
   .nc-row and zeroed the LinkedIn row's padding. */
.nav-contact-menu .nc-row { padding: 8px 10px; }
.nav-contact-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 16px);
  min-width: 312px;
  padding: 10px;
  display: grid;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-drop);
  z-index: 60;
}
@media (max-width: 900px) {
  .nav-contact { width: 100%; }
  .nav-contact-btn { width: 100%; padding: 9px 0; justify-content: flex-start; }
  .nav-contact-menu { position: static; min-width: 0; box-shadow: none; margin-top: 4px; }
}

/* About gets a colour of its own, like every other nav destination. */
.site-nav a[href$="#about"]:hover { color: #f9a8d4; }
.site-nav a[href$="#about"]::after { background: #ec4899; }

/* The avatar's backing circle wears the page accent, not a stale pastel. */
.brand-avatar { background: color-mix(in srgb, var(--pg) 34%, var(--surface)); }


/* ---- one frame for every tool page --------------------------------
   The card starts 14px under the header and ends 14px above the
   viewport bottom, on every page, at every screen height. Interiors
   flex and scroll inside; the page itself never scrolls. Small or
   short screens get their scroll back below. */
body.journeys-page .ui-shell,
body.sql-page .ui-shell,
body.personalization-page .ui-shell,
body.copy-page .ui-shell,
body.testimonials-page .ui-shell,
body.certs-page .ui-shell {
  height: calc(100vh - var(--header-height, 77px) - 28px);
  min-height: 480px;
  /* The base .ui-shell rule says flex: 1, whose basis-0 beats an
     explicit height inside flex parents (segmentation and
     personalization both wrap the shell in flex columns). */
  flex: none;
}
@media (max-width: 900px), (max-height: 700px) {
  body.journeys-page .ui-shell,
  body.sql-page .ui-shell,
  body.personalization-page .ui-shell,
  body.copy-page .ui-shell,
  body.testimonials-page .ui-shell,
  body.certs-page .ui-shell {
    height: auto;
    min-height: 0;
  }
}
/* Journeys stacks its two panes at 1080px, which doubles the content
   height — the frame has to let go at the same point. */
@media (max-width: 1080px) {
  body.journeys-page .ui-shell {
    height: auto;
    min-height: 0;
  }
}


/* ---- compact headers ----------------------------------------------
   Segmentation, copy, and certifications carry real paragraphs in the
   header. Stacked in one column they ate the card's height, so here
   the copy runs WIDE in two columns and the chrome tightens. Journeys
   and personalization keep the default header. */
body.sql-page .pg-head,
body.certs-page .pg-head,
body.copy-page .pg-head {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.55fr) auto;
  gap: 4px 30px;
  padding: 13px 26px 13px;
}
body.sql-page .pg-head-copy,
body.certs-page .pg-head-copy,
body.copy-page .pg-head-copy {
  columns: 2;
  column-gap: 30px;
  padding-top: 2px;
}
body.sql-page .pg-head-copy p,
body.certs-page .pg-head-copy p,
body.copy-page .pg-head-copy p {
  max-width: none;
  font-size: 13.6px;
  line-height: 1.52;
  margin-bottom: 6px;
  break-inside: avoid;
}
body.sql-page .pg-head-copy li,
body.certs-page .pg-head-copy li,
body.copy-page .pg-head-copy li { break-inside: avoid; }
body.sql-page .eyebrow,
body.certs-page .eyebrow,
body.copy-page .eyebrow {
  font-size: 9.5px;
  padding: 1px 8px;
  margin-bottom: 3px;
}
body.sql-page .pg-head-title h1,
body.certs-page .pg-head-title h1,
body.copy-page .pg-head-title h1 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  margin-bottom: 4px;
}
body.sql-page .pg-metric b,
body.certs-page .pg-metric b,
body.copy-page .pg-metric b { font-size: 2.1rem; }
body.sql-page .pg-metric,
body.certs-page .pg-metric,
body.copy-page .pg-metric { padding: 5px 14px 6px; }

/* Segmentation's long title needs a wider column and a step down to
   wrap in two lines instead of three. */
body.sql-page .pg-head { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr) auto; }
body.sql-page .pg-head-title h1 { font-size: clamp(1.2rem, 1.75vw, 1.5rem); }


/* With one paragraph left, the copy page spreads wide in a single
   column at full size instead of the two-column squeeze. */
body.copy-page .pg-head {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) auto;
  align-items: center;
}
body.copy-page .pg-head-copy { columns: 1; }
body.copy-page .pg-head-copy p { font-size: 15px; line-height: 1.6; }
body.copy-page .pg-head-title h1 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }