/* ═══════════════════════════════════════════════════════════════════════════
   THE SEARCH PAGES (services/seo_site, templates/pages/seo/): the public pages' language, with a bespoke layer.

   Loaded after public-pages.css (partials/public_page_head.html). Everything not drawn here is the shared reading layout
   (.mk-doc, .mk-toc, .mk-prose, .mk-table, .faq__row, .mk-btn, .zone). DESIGN.md 14.6 documents each component below.

   Rules this layer keeps (house rules 6, 7 and 9, and section 14):
     · every colour is a --cls-* token. The emblem's own hue is artwork, set on the tile as --e, nothing else;
     · a page is INKED by one tutor (data-tutor-ink) and COLOURED by one subject (data-area); controls stay Porcelain blue;
     · one raised paper per chapter; hairlines for structure; no card in a card, no side stripe, no gradient text;
     · a figure draws what the page says (hours, minutes, weights, scores, prices) to scale, with every value also in words;
     · hidden start states exist only under html.js-motion; the finished page is what no-script and reduced motion see.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================ the page's mark ============================ */
/* A program's emblem tile (the signed-in ProgramMark, in Jinja): a rounded square, a wash of the hue over the leaf, a hue hairline. The emblem
   draws in three tones of --e: the base (fills), the ink (lines) and the wash (paper inside shapes), which follow the theme through
   --cls-ink and --cls-leaf, so dark mode needs no second table. Every other page gets the same tile with an icon in its area's ink. */
.page-seo .sp-mark{--e:var(--cls-area);--ei:color-mix(in srgb, var(--e) 64%, var(--cls-ink));--ew:color-mix(in srgb, var(--e) 20%, var(--cls-leaf));
  position:relative;display:grid;place-items:center;flex:none;width:var(--tile,76px);height:var(--tile,76px);border-radius:27%;
  background:linear-gradient(160deg, color-mix(in srgb, var(--e) 22%, var(--cls-leaf)), color-mix(in srgb, var(--e) 8%, var(--cls-leaf)));
  border:1px solid color-mix(in srgb, var(--e) 44%, transparent)}
.page-seo .sp-mark svg{display:block;width:72%;height:72%;overflow:visible;max-width:none}
.page-seo .sp-mark .s{fill:none;stroke:var(--ei);stroke-linecap:round;stroke-linejoin:round}
.page-seo .sp-mark .f{fill:var(--e)}
.page-seo .sp-mark .w{fill:var(--ew)}
.page-seo .sp-mark .i{fill:var(--ei)}
.page-seo .sp-mark--glyph{--e:var(--cls-tutor-mark, var(--cls-teal))}
.page-seo .sp-mark--glyph svg{width:44%;height:44%;color:var(--ei)}
.page-seo .sp-mark--glyph svg path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.page-seo .sp-mark--sm{--tile:46px}
.page-seo .sp-mark__tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);max-width:100%;padding:1px 6px;border:2px solid var(--cls-leaf);border-radius:999px;
  background:var(--ei);color:var(--cls-ground);font-size:8.5px;font-weight:800;letter-spacing:.06em;line-height:1.5;white-space:nowrap}
.page-seo .sp-title-row{display:flex;align-items:flex-end;gap:18px;margin-top:clamp(18px, 2.2vw, 28px)}
.page-seo .sp-title-row + .mk-fit-h{margin-top:clamp(18px, 2vw, 26px)}

/* ============================ the tutor of the page ============================ */
/* The page is inked by one tutor: its face, its name and its own greeting. The greeting is the tutor's, in the tutor's ink. */
.page-seo .sp-who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:center;margin-top:26px;max-width:340px}
.page-seo .sp-who__face{grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;background:var(--cls-sunk);border:1px solid var(--cls-line)}
.page-seo .sp-who__name{font-size:14px;line-height:1.35;color:var(--cls-ink-3)}
.page-seo .sp-who__name b{font-weight:600;color:var(--cls-ink)}
.page-seo .sp-checked{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.page-seo .sp-checked:hover{text-decoration-color:currentColor}
.page-seo .sp-checked:focus-visible{box-shadow:var(--cls-focus);border-radius:3px;outline:2px solid transparent}
.page-seo .sp-who__line{font-size:15.5px;line-height:1.4;font-weight:500;color:var(--cls-tutor-ink, var(--cls-teal-ink))}

/* ============================ the short answer ============================ */
.page-seo .sp-answer{font-size:17px;line-height:1.6;color:var(--cls-ink);margin-top:14px}
.page-seo .mk-doc__sum .sp-answer + ul{margin-top:20px}
.page-seo .sp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}

/* ============================ the spine: the whole course, to scale ============================ */
/* One block a unit, as wide as the unit's hours; the number sits under the block in ink (a number inside a coloured fill is 3.4:1 in two areas).
   Every block is a link to its unit. The numbers drop out where a block is too narrow to hold one; the block's name is its label. */
.page-seo .sp-spine{container:spine / inline-size;margin-top:22px}
.page-seo .sp-spine__bar{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.page-seo .sp-spine__bar li,.page-seo .mk-doc__sum .sp-spine__bar li{flex:var(--w) 1 0;min-width:0;display:grid;gap:7px;margin:0;padding:0;border:0}
.page-seo .sp-spine__bar a{display:block;height:34px;min-width:0;min-height:34px;border-radius:7px;background:var(--cls-area);text-decoration:none;transition:filter var(--cls-dur-fast) var(--cls-ease-out)}
.page-seo .sp-spine__bar li:nth-child(even) a{background:color-mix(in srgb, var(--cls-area) 66%, var(--cls-leaf))}
.page-seo .sp-spine__bar a:hover{filter:saturate(1.25) brightness(.94)}
.page-seo .sp-spine__bar i{font-style:normal;font-size:12.5px;line-height:1;font-weight:600;color:var(--cls-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;visibility:hidden}
@container spine (min-width:240px){.page-seo .sp-spine__bar li[data-size="l"] i{visibility:visible}}
@container spine (min-width:340px){.page-seo .sp-spine__bar li[data-size="m"] i{visibility:visible}}
@container spine (min-width:480px){.page-seo .sp-spine__bar li[data-size="s"] i{visibility:visible}}
@container spine (min-width:640px){.page-seo .sp-spine__bar li[data-size="xs"] i{visibility:visible}}
.page-seo .sp-spine__cap{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--cls-ink-3)}

/* ============================ the units, one ledger row each ============================ */
.page-seo .sp-units{container:units / inline-size;margin-top:1.6em;border-top:1px solid var(--cls-line-2)}
.page-seo .sp-unit{border-bottom:1px solid var(--cls-line-2)}
.page-seo .sp-unit > summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"n t h chev" "n m h chev";gap:2px 14px;align-items:center;min-height:68px;padding:12px 0;cursor:pointer}
.page-seo .sp-unit > summary::-webkit-details-marker{display:none}
.page-seo .sp-unit__n{grid-area:n;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--cls-r-sm);
  background:color-mix(in srgb, var(--cls-area) var(--cls-area-tint), var(--cls-leaf));color:var(--cls-ink);font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums}
.page-seo .sp-unit__t{grid-area:t;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--cls-ink)}
.page-seo .sp-unit__m{grid-area:m;font-size:14px;line-height:1.4;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
.page-seo .sp-unit__h{grid-area:h;justify-self:end;text-align:right;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--cls-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.page-seo .sp-unit__h small{display:block;font-size:12.5px;font-weight:400;color:var(--cls-ink-3)}
.page-seo .sp-unit > summary svg{grid-area:chev;width:16px;height:16px;color:var(--cls-ink-3);transform:rotate(90deg);transition:transform var(--cls-dur) var(--cls-ease-out)}
.page-seo .sp-unit > summary svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-seo .sp-unit[open] > summary svg{transform:rotate(-90deg)}
.page-seo .sp-unit > summary:hover .sp-unit__t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb, currentColor 40%, transparent)}
.page-seo .sp-unit__body{display:grid;gap:22px clamp(28px, 4vw, 56px);padding:4px 0 28px 48px}
.page-seo .sp-unit__lab{margin:0 0 .4em;font-size:15.5px;font-weight:600;letter-spacing:-.005em;line-height:1.3;color:var(--cls-ink)}
.page-seo .sp-unit__body ul,.page-seo .sp-unit__body ol{margin:0;font-size:15.5px;line-height:1.55}
.page-seo .sp-unit__body li + li{margin-top:.4em}
.page-seo .sp-unit__block + .sp-unit__block{margin-top:18px}
.page-seo .sp-topics{padding-left:1.7em}
@container units (min-width:640px){
  .page-seo .sp-unit__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@container units (max-width:520px){
  .page-seo .sp-unit > summary{grid-template-areas:"n t chev" "n m chev" "n h chev"}
  .page-seo .sp-unit__h{justify-self:start;text-align:left}
  .page-seo .sp-unit__h small{display:inline;margin-left:6px}
  .page-seo .sp-unit__body{padding-left:0}
}

/* ============================ the exam, drawn to scale ============================ */
/* A tape a section long: each block is as wide as the section is long in minutes. Under 640px it is a ruled list whose bars share one scale. */
.page-seo .sp-tape{container:tape / inline-size;margin:1.4em 0 0}
.page-seo .sp-tape__bar{display:flex;gap:2px;margin:0;padding:0;list-style:none;align-items:stretch}
.page-seo .sp-tape__bar li{flex:var(--m) 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;margin:0}
.page-seo .sp-tape__fill{display:block;height:12px;border-radius:5px;background:var(--cls-area)}
.page-seo .sp-tape__bar li[data-calc="none"] .sp-tape__fill{background:color-mix(in srgb, var(--cls-area) var(--cls-area-tint), var(--cls-leaf));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cls-area) 46%, transparent)}
.page-seo .sp-tape__text{display:grid;gap:2px;align-content:start;padding-right:6px}
.page-seo .sp-tape__name{font-size:14px;font-weight:600;line-height:1.35;color:var(--cls-ink);overflow-wrap:anywhere}
.page-seo .sp-tape__meta{font-size:12.5px;line-height:1.45;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
.page-seo .sp-tape__cap{margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--cls-ink-3)}
@container tape (max-width:639px){
  .page-seo .sp-tape__bar{flex-direction:column;gap:0}
  .page-seo .sp-tape__bar li{flex:none;flex-direction:column-reverse;gap:8px;padding:14px 0;border-bottom:1px solid var(--cls-line)}
  .page-seo .sp-tape__bar li:last-child{border-bottom:0}
  .page-seo .sp-tape__fill{width:calc(var(--p) * 1%);min-width:12px}
}

/* ============================ how deep: the five levels, and what they come to ============================ */
.page-seo .sp-depth{container:depth / inline-size;display:grid;gap:28px clamp(28px, 4vw, 56px);margin-top:1.4em}
.page-seo .sp-depth__legend{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--cls-ink);padding:0;margin:0 0 4px}
.page-seo .sp-depth fieldset{border:0;margin:0;padding:0;min-width:0}
.page-seo .sp-depth__rows{border-top:1px solid var(--cls-line-2);margin-top:10px}
.page-seo .sp-depth__row{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:14px 12px;margin:0 -12px;border-bottom:1px solid var(--cls-line-2);cursor:pointer;border-radius:var(--cls-r-xs);
  transition:background-color var(--cls-dur-fast) var(--cls-ease-out)}
.page-seo .sp-depth__row:hover{background:color-mix(in srgb, var(--cls-area) 5%, transparent)}
.page-seo .sp-depth__row input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.page-seo .sp-depth__dot{grid-row:1 / span 2;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--cls-ink-4);display:grid;place-items:center;background:var(--cls-leaf)}
.page-seo .sp-depth__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cls-area);transform:scale(0);transition:transform var(--cls-dur-fast) var(--cls-ease-out)}
.page-seo .sp-depth__row:has(input:checked){background:color-mix(in srgb, var(--cls-area) var(--cls-area-wash), transparent)}
.page-seo .sp-depth__row:has(input:checked) .sp-depth__dot{border-color:var(--cls-area)}
.page-seo .sp-depth__row:has(input:checked) .sp-depth__dot::after{transform:scale(1)}
.page-seo .sp-depth__row:has(input:focus-visible){box-shadow:var(--cls-focus)}
.page-seo .sp-depth__name{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--cls-ink)}
.page-seo .sp-depth__tip{grid-column:2;font-size:14px;line-height:1.45;color:var(--cls-ink-3)}
.page-seo .sp-depth__h{grid-row:1 / span 2;grid-column:3;text-align:right;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--cls-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.page-seo .sp-depth__h small{display:block;font-size:12.5px;font-weight:400;color:var(--cls-ink-3)}
/* what the chosen depth comes to: the chapter's one raised paper. Drawn only where a script can compute it; the rows already say every number. */
html:not(.js-ink) .page-seo .sp-depth__out{display:none}
.page-seo .sp-depth__out{align-self:start;padding:clamp(22px, 2.6vw, 32px);container:out / inline-size}
.page-seo .sp-depth__big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}
.page-seo .sp-depth__big b{font-size:var(--mk-d3);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--cls-ink);font-variant-numeric:tabular-nums}
.page-seo .sp-depth__big span{font-size:var(--mk-copy);font-weight:var(--mk-w-air);color:var(--cls-ink-3)}
.page-seo .sp-depth__lines{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--cls-line-2)}
.page-seo .sp-depth__lines li{padding:11px 0;border-bottom:1px solid var(--cls-line);font-size:15.5px;line-height:1.45;color:var(--cls-ink-2);font-variant-numeric:tabular-nums}
.page-seo .sp-depth__lines li:last-child{border-bottom:0;padding-bottom:0}
.page-seo .sp-depth__lines strong{color:var(--cls-ink);font-weight:600}
.page-seo .sp-depth__set{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:20px;justify-items:start}
.page-seo .sp-depth__lab{font-size:14px;line-height:1.3;color:var(--cls-ink-3)}
@container out (min-width:420px){
  .page-seo .sp-depth__set{grid-template-columns:8.5em minmax(0,1fr);align-items:center;gap:12px}
}
@container depth (min-width:760px){
  .page-seo .sp-depth{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
/* a segmented control: native radios, drawn as one pill group */
.page-seo .sp-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:999px;background:var(--cls-sunk);border:1px solid var(--cls-line)}
.page-seo .sp-seg label{position:relative;display:grid;place-items:center;min-width:44px;min-height:38px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--cls-ink-3);cursor:pointer;
  transition:background-color var(--cls-dur-fast) var(--cls-ease-out),color var(--cls-dur-fast) var(--cls-ease-out)}
.page-seo .sp-seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.page-seo .sp-seg label:hover{color:var(--cls-ink)}
.page-seo .sp-seg label:has(input:checked){background:var(--cls-leaf);color:var(--cls-ink);box-shadow:0 0 0 1px var(--cls-line-2), var(--cls-lit)}
.page-seo .sp-seg label:has(input:focus-visible){box-shadow:var(--cls-focus)}

/* ============================ a class, opened: one moment with the tutor's pen on it ============================ */
/* The product's own anatomy (features.html): the question, what the learner wrote, the tutor's mark and note, the rewrite. It is labelled
   Example (written to show how a class sounds, not a real learner), and the pen draws once as the paper comes into view. */
.page-seo .sp-ex{position:relative;max-width:560px;padding:clamp(22px, 2.6vw, 32px);--rot:-.5deg}
.page-seo .sp-ex__head{display:flex;align-items:center;gap:12px}
.page-seo .sp-ex__head img{width:36px;height:36px;border-radius:50%;background:var(--cls-sunk);border:1px solid var(--cls-line)}
.page-seo .sp-ex__who{display:grid;line-height:1.3;font-size:12.5px;color:var(--cls-ink-3)}
.page-seo .sp-ex__who b{font-size:15.5px;font-weight:600;color:var(--cls-ink)}
.page-seo .sp-ex__head .mk-tag{margin-left:auto}
.page-seo .sp-ex__ctx{margin-top:16px;font-size:12.5px;line-height:1.4;color:var(--cls-ink-3)}
.page-seo .sp-ex__q{margin-top:6px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--cls-ink);text-wrap:balance}
.page-seo .sp-ex__work{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;margin-top:18px;padding-top:16px;border-top:1px solid var(--cls-line-2)}
.page-seo .sp-ex__lab{grid-column:1 / -1;font-size:12.5px;line-height:1.3;color:var(--cls-ink-3)}
.page-seo .sp-ex__ans{position:relative;display:inline-block;justify-self:start;padding:2px 2px;font-size:19px;line-height:1.5;color:var(--cls-ink);font-variant-numeric:tabular-nums}
.page-seo .sp-ex__ans i{font-style:italic}
.page-seo .sp-ex__ans .ink-layer{inset:-8px -12px;width:calc(100% + 24px);height:calc(100% + 16px)}
.page-seo .sp-ex__score{font-size:15.5px;font-weight:700;color:var(--cls-tutor-ink, var(--cls-teal-ink));font-variant-numeric:tabular-nums}
.page-seo .sp-ex__note{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--cls-tutor-ink, var(--cls-teal-ink))}
.page-seo .sp-ex__note b{font-weight:600}
.page-seo .sp-ex__foot{margin-top:16px;font-size:12.5px;line-height:1.45;color:var(--cls-ink-3)}
.page-seo .sp-ex .tick{margin-left:8px}

/* ============================ scores: how students did, to scale ============================ */
.page-seo .sp-scores{container:scores / inline-size;margin:1.4em 0 0}
.page-seo .sp-scores__bar{display:flex;gap:2px;margin:0;padding:0;list-style:none}
.page-seo .sp-scores__bar li{flex:var(--v) 1 0;min-width:0;display:grid;gap:8px;margin:0}
.page-seo .sp-scores__fill{display:block;height:40px;border-radius:7px;background:color-mix(in srgb, var(--cls-area) var(--k), var(--cls-leaf))}
.page-seo .sp-scores__txt{display:grid;gap:1px;font-variant-numeric:tabular-nums}
.page-seo .sp-scores__txt b{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--cls-ink)}
.page-seo .sp-scores__txt span{font-size:12.5px;line-height:1.3;color:var(--cls-ink-3)}
.page-seo .sp-scores__cap{margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--cls-ink-3)}

/* ============================ prices, to scale ============================ */
/* Ranges other people publish, and what Tutix works out to, on one axis. A range is a bar from its low to its high; Tutix is a dot. */
.page-seo .sp-scale{container:scale / inline-size;margin:1.4em 0 0}
.page-seo .sp-scale__rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--cls-line-2)}
.page-seo .sp-scale__row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0;border-bottom:1px solid var(--cls-line-2);margin:0}
.page-seo .sp-scale__name{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--cls-ink)}
.page-seo .sp-scale__name small{display:block;font-size:12.5px;font-weight:400;line-height:1.4;color:var(--cls-ink-3)}
.page-seo .sp-scale__track{position:relative;height:14px;border-radius:7px;background:var(--cls-sunk)}
.page-seo .sp-scale__bar{position:absolute;top:0;bottom:0;left:calc(var(--lo) / var(--max) * 100%);width:calc((var(--hi) - var(--lo)) / var(--max) * 100%);min-width:8px;border-radius:7px;background:var(--cls-ink-3)}
.page-seo .sp-scale__dot{position:absolute;top:50%;left:calc(var(--at) / var(--max) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--cls-blue);box-shadow:0 0 0 3px var(--cls-leaf)}
.page-seo .sp-scale__val{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--cls-ink);font-variant-numeric:tabular-nums}
.page-seo .sp-scale__row.is-us .sp-scale__val{color:var(--cls-blue-ink)}
.page-seo .sp-scale__axis{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;line-height:1.3;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
@container scale (min-width:640px){
  .page-seo .sp-scale__row{grid-template-columns:minmax(0,5fr) minmax(0,5fr) 9.5em;gap:8px 24px;align-items:center}
  .page-seo .sp-scale__val{text-align:right}
}

/* ============================ a callout, and the questions ============================ */
.page-seo .sp-note{margin-top:.75em;font-size:14px;line-height:1.5;color:var(--cls-ink-3)}
.page-seo .sp-callout{margin-top:1.4em;padding:clamp(18px, 2.2vw, 26px)}
.page-seo .sp-callout p{font-size:16px;line-height:1.6}
.page-seo .sp-callout p + p{margin-top:.5em}
.page-seo .sp-faq{border-top:1px solid var(--cls-line-2);margin-top:.8em}
.page-seo .mk-prose .faq__a p{font-size:15.5px}

/* ============================ keep reading, sources, the notice ============================ */
.page-seo .sp-sources{font-size:15px;line-height:1.55}
.page-seo .sp-sources li{overflow-wrap:anywhere}
.page-seo .sp-related{list-style:none;padding:0;margin:.6em 0 0;border-top:1px solid var(--cls-line-2)}
.page-seo .sp-related li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--cls-line-2);margin:0}
.page-seo .sp-related a{font-weight:600}
.page-seo .sp-related span{font-size:14px;color:var(--cls-ink-3);line-height:1.45}
.page-seo .sp-notice{margin-top:2.4em;font-size:12.5px;line-height:1.5;color:var(--cls-ink-3)}
.page-seo .sp-close .mk-meta{margin-top:18px}

/* ============================ the hubs: a ledger of pages, each with its mark ============================ */
.page-seo .sp-hub__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:1.2em 0 0}
.page-seo .sp-hub__search{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:999px;background:var(--cls-leaf);border:1px solid var(--mk-field-edge)}
.page-seo .sp-hub__search svg{width:16px;height:16px;flex:none;color:var(--cls-ink-3)}
.page-seo .sp-hub__search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--cls-ink);outline:none}
.page-seo .sp-hub__search:focus-within{box-shadow:var(--cls-focus)}
.page-seo .sp-hub__count{font-size:14px;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
html:not(.js-ink) .page-seo .sp-hub__bar{display:none}
@media (max-width:480px){.page-seo .sp-hub__search{flex-basis:100%}}
.page-seo .sp-hub__group{margin-top:clamp(28px, 3.4vw, 44px)}
.page-seo .sp-hub__group h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--cls-ink)}
.page-seo .sp-hub__group h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cls-area);flex:none}
.page-seo .sp-hub__rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--cls-line-2)}
.page-seo .sp-hub__rows li{margin:0}
.page-seo .sp-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 16px;align-items:center;min-height:76px;padding:14px 12px;margin:0 -12px;border-bottom:1px solid var(--cls-line-2);border-radius:var(--cls-r-xs);text-decoration:none;color:inherit;
  transition:background-color var(--cls-dur-fast) var(--cls-ease-out)}
.page-seo .sp-row:hover{background:color-mix(in srgb, var(--cls-area) 6%, transparent)}
.page-seo .sp-row .sp-mark{grid-row:1 / span 2;--tile:48px}
.page-seo .sp-row__t{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--cls-ink)}
.page-seo .sp-row__s{grid-column:2;font-size:14px;line-height:1.45;color:var(--cls-ink-3)}
.page-seo .sp-row__m{grid-row:1 / span 2;grid-column:3;text-align:right;font-size:14px;line-height:1.35;color:var(--cls-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.page-seo .sp-row__m svg{display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;color:var(--cls-ink-3);transition:transform var(--cls-dur-fast) var(--cls-ease-out)}
.page-seo .sp-row__m svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-seo .sp-row:hover .sp-row__m svg{transform:translateX(3px)}
.page-seo .sp-hub__empty{margin-top:28px;font-size:var(--mk-copy);color:var(--cls-ink-3)}
@media (max-width:560px){
  .page-seo .sp-row{grid-template-columns:auto minmax(0,1fr)}
  .page-seo .sp-row__m{grid-row:auto;grid-column:2;text-align:left;white-space:normal}
}

/* ============================ a versus table, and a checklist ============================ */
.page-seo .mk-prose .mk-vs{margin-top:1.4em}
.page-seo .mk-prose .mk-table--vs{font-size:15.5px}
.page-seo .sp-ticks{margin-top:1.2em}
.page-seo .mk-prose .mk-ticks > li{font-size:17px;line-height:1.55;color:var(--cls-ink-2)}

/* a stacked table is as wide as its column on a phone (the design system's 640px floor is for the sideways-scrolling kind) */
@media (max-width:767px){.page-seo .mk-table--stack.mk-table--wide{min-width:0}.page-seo .mk-table--stack caption{display:block;width:100%}}
/* a figure or a time such as "1 h 15" never breaks across two lines */
.page-seo .mk-table td.is-num{white-space:nowrap}

/* a small caption under a figure keeps a readable line */
.page-seo :is(.sp-tape__cap,.sp-scores__cap,.sp-scale__cap){max-width:64ch}

/* ============================ status: a program that is planned, not ready-made yet ============================ */
.page-seo .sp-soon{display:inline-block;margin-inline-end:6px;padding:1px 10px;border-radius:999px;border:1px solid var(--cls-line-2);vertical-align:1px;
  background:color-mix(in srgb, var(--cls-area, var(--cls-teal)) 9%, var(--cls-leaf));font-size:12.5px;font-weight:600;line-height:1.5;letter-spacing:0;color:var(--cls-ink-2);white-space:nowrap}
.page-seo .sp-row__t .sp-soon{margin-inline-start:6px;font-size:12px}

/* ============================ motion ============================ */
@media (prefers-reduced-motion:reduce){
  .page-seo .sp-unit > summary svg,.page-seo .sp-row__m svg,.page-seo .sp-depth__dot::after{transition:none}
}