/* =====================================================================
   Rubikn · shared frame for the older pages (rubikn-frame.css)
   ---------------------------------------------------------------------
   The header, phone menu, footer, buttons and a base type layer, copied
   from the new pages (How it works / How I use your details) so the older
   pages sit inside the same frame. Tokens: paper, ink, cobalt, amber,
   lime. Type: self-hosted Geist, Geist Mono, Instrument Serif italic.
   Readability (practical-ui): 18 px body, one reading line, 8-point
   spacing, 16 px minimum text, 44 px targets.

   Footer: the dark footer from How it works / About / How I use your
   details (not Home's light one), used on every older page.

   SCOPE: every rule below sits under html[data-rk-frame]. Only the older
   pages carry that attribute (scripts/apply_frame.py adds it), so this
   file changes nothing on the new pages even if it is loaded there. The
   @font-face rules are the same three the new pages declare.
   Markup it styles lives between the rk-frame:* comments in each page;
   do not edit it by hand, re-run scripts/apply_frame.py --apply.
   ===================================================================== */

@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-Variable.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-Variable.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}

/* ---------- tokens (same values as the new pages' .rk root) ---------- */
html[data-rk-frame] {
  --paper: #f8f8fa; --paper2: #ededf1; --edge: #d8d8e0; --rule: #c8c8d2;
  --ink: #0a0f1f; --ink2: #3a3f52; --ink3: #6b7085;
  --acc: #3b63d4; --acc2: #2a4aaf; --acc3: #7497ff;
  --lime: #b8f25e; --amber: #d4893b; --amberink: #7d4410;
  --hl: #e9eefb;
  --navy: #060a15; --navy2: #0c1223; --navy3: #131b31;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring2: cubic-bezier(.2, 1.4, .4, 1);
  --out: cubic-bezier(.23, 1, .32, 1);
  --drawer: cubic-bezier(.32, .72, 0, 1);
  --inout: cubic-bezier(.77, 0, .175, 1);
  --sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --wrap: min(1320px, calc(100% - 96px));
  --bg: #f8f8fa; --fg: #0a0f1f; --fg2: #3a3f52; --fg3: #6b7085;
  --line: rgba(10, 15, 31, .1); --line2: rgba(10, 15, 31, .18);
  --card: #fff; --card2: #f2f3f7; --ax: #3b63d4;
  color-scheme: light;
  background: #f8f8fa;
  scroll-padding-top: 96px;
}
/* ---------- dark theme (html.dark, set before paint by /assets/rubikn-theme.js) ----------
   The same token names, re-pointed at the shared dark palette in
   rubikn-brand.css (--rk-d-*), so every rule that reads a token follows.
   Rules that paint a token as a BACKGROUND under hard-coded white text
   (skip link, buttons) get their own dark rule further down. */
html[data-rk-frame].dark {
  --paper: var(--rk-d-bg); --paper2: var(--rk-d-raised); --edge: var(--rk-d-line); --rule: var(--rk-d-line);
  --ink: var(--rk-d-text); --ink2: var(--rk-d-text-2); --ink3: var(--rk-d-text-3);
  --acc: var(--rk-d-accent); --acc2: #b5cdff;
  --amber: var(--rk-d-warn); --amberink: var(--rk-d-warn);
  --hl: #16213a;
  --bg: var(--rk-d-bg); --fg: var(--rk-d-text); --fg2: var(--rk-d-text-2); --fg3: var(--rk-d-text-3);
  --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .18);
  --card: var(--rk-d-raised); --card2: var(--rk-d-raised-2); --ax: var(--rk-d-accent);
  color-scheme: dark;
  background: var(--rk-d-bg);
}

/* ---------- base: the page ---------- */
html[data-rk-frame] body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  font-feature-settings: "ss01", "ss03", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[data-rk-frame] ::selection { background: var(--acc); color: #fff; }
html[data-rk-frame].dark ::selection { background: var(--rk-d-accent-strong); color: #fff; }

/* ---------- base type for the older content ----------
   Element-level only (specificity 0,0,1): it replaces styles.css's element
   rules, while every class rule in styles.css and the page stylesheets still
   wins. Scale = the new pages' .rk-h1 / .rk-h2 / .rk-h3. */
:where(html[data-rk-frame]) h1,
:where(html[data-rk-frame]) h2,
:where(html[data-rk-frame]) h3,
:where(html[data-rk-frame]) h4,
:where(html[data-rk-frame]) h5,
:where(html[data-rk-frame]) h6 { font-family: var(--sans); font-weight: 500; color: var(--ink); text-wrap: balance; }
:where(html[data-rk-frame]) h1 { font-size: clamp(40px, 4.45vw, 66px); line-height: 1.01; letter-spacing: -.043em; }
:where(html[data-rk-frame]) h2 { font-size: clamp(36px, 4.3vw, 66px); line-height: 1.02; letter-spacing: -.04em; }
:where(html[data-rk-frame]) h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.16; letter-spacing: -.025em; }
:where(html[data-rk-frame]) h4 { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; }
:where(html[data-rk-frame]) h5,
:where(html[data-rk-frame]) h6 { font-size: 18px; line-height: 1.4; letter-spacing: -.01em; font-weight: 600; }
:where(html[data-rk-frame]) p { max-width: 64ch; }
:where(html[data-rk-frame]) :where(strong, b) { font-weight: 600; }
:where(html[data-rk-frame]) small { font-size: 16px; }

/* links inside running text are real links, so underlined (practical-ui); classed links keep their own look */
:where(html[data-rk-frame]) :where(p, li, dd, td, th, blockquote, figcaption) a:where(:not([class])) {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; text-decoration-color: var(--acc); transition: color .2s var(--out);
}
:where(html[data-rk-frame]) :where(p, li, dd, td, th, blockquote, figcaption) a:where(:not([class])):hover { color: var(--acc2); }

/* lists, tables, quotes, images, code */
:where(html[data-rk-frame]) li::marker { color: var(--ink3); }
:where(html[data-rk-frame]) table { border-collapse: collapse; }
:where(html[data-rk-frame]) table:where(:not([class])) { width: 100%; font-size: 17px; line-height: 1.5; }
:where(html[data-rk-frame]) table:where(:not([class])) :where(th, td) { padding: 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
:where(html[data-rk-frame]) table:where(:not([class])) th { font-size: 16px; font-weight: 600; color: var(--ink); border-bottom-color: var(--line2); }
:where(html[data-rk-frame]) blockquote:where(:not([class])) { padding-inline-start: 20px; border-inline-start: 2px solid var(--acc); color: var(--ink); font-size: 18px; line-height: 1.6; }
:where(html[data-rk-frame]) img { max-width: 100%; height: auto; }
:where(html[data-rk-frame]) :where(code, kbd, samp, pre) { font-family: var(--mono); }
:where(html[data-rk-frame]) code:where(:not([class])) { font-size: .9em; padding: .1em .35em; border-radius: 2px; background: var(--paper2); }
:where(html[data-rk-frame]) pre { overflow-x: auto; }
:where(html[data-rk-frame]) hr { border: 0; border-top: 1px solid var(--line); }

/* focus: the new pages' ring, everywhere */
html[data-rk-frame] :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }

/* ---------- skip link ---------- */
html[data-rk-frame] .rk-skip { position: absolute; inset-inline-start: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 2px; font-size: 16px; font-weight: 500; text-decoration: none; }
html[data-rk-frame] .rk-skip:focus { top: 16px; }
html[data-rk-frame].dark .rk-skip { background: #f8f8fa; color: #0a0f1f; }
html[data-rk-frame] #rk-main { display: block; height: 0; outline: 0; }

/* =====================================================================
   HEADER — the new pages' floating bar (How it works). position: fixed
   here instead of sticky: styles.css sets overflow-x: hidden on both html
   and body, which makes body a scroll container and would stop a sticky
   header from staying on screen. Same geometry, same look.
   ===================================================================== */
html[data-rk-frame] .rk-hd { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 0; color: var(--ink); view-transition-name: site-nav; }
html[data-rk-frame] .rk-hd *, html[data-rk-frame] .rk-hd *::before, html[data-rk-frame] .rk-hd *::after { box-sizing: border-box; }
html[data-rk-frame] .rk-hd a { color: inherit; text-decoration: none; }
html[data-rk-frame] .rk-hd svg { display: block; }
html[data-rk-frame] .rk-hd__bar {
  position: absolute; top: 14px; inset-inline-start: 50%; transform: translateX(-50%);
  width: min(1240px, calc(100% - 28px)); height: 58px;
  display: flex; align-items: center; gap: 28px; padding: 0 8px 0 10px;
  border-radius: 2px; background: rgba(248, 248, 250, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(10, 15, 31, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -26px rgba(10, 15, 31, .35);
  color: var(--ink);
  font-family: var(--sans); font-feature-settings: "ss01", "ss03", "cv11"; line-height: 1.6;
  transition: background .5s var(--out), border-color .5s var(--out), color .5s var(--out), transform .6s var(--drawer), box-shadow .5s var(--out);
}
html[data-rk-frame] .rk-hd[data-t="dark"] .rk-hd__bar,
html[data-rk-frame].dark .rk-hd__bar { background: rgba(10, 15, 31, .62); border-color: rgba(255, 255, 255, .1); color: #eef0f6; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -26px rgba(0, 0, 0, .7); }
html[data-rk-frame] .rk-hd[data-hide] .rk-hd__bar { transform: translate(-50%, -96px); }
html[data-rk-frame] .rk-hd__logo { display: flex; align-items: center; gap: 12px; height: 44px; padding-inline-end: 6px; font-weight: 600; font-size: 16px; letter-spacing: -.015em; white-space: nowrap; }
/* the logo: the home cube (.rk-cube, rubikn-brand.css) filling the 36 px mark box */
html[data-rk-frame] .rk-hd__mark { width: 36px; height: 36px; perspective: none; transform-style: preserve-3d; display: grid; place-items: center; }
html[data-rk-frame] .rk-hd__mark .rk-cube { --cube: 36px; }
html[data-rk-frame] .rk-hd .rk-cube i { transition: background-color .5s var(--out); }
html[data-rk-frame] .rk-hd__nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
html[data-rk-frame] .rk-hd__nav a { position: relative; height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; border-radius: 2px; color: inherit; opacity: .78; transition: opacity .3s var(--out), background .3s var(--out); }
html[data-rk-frame] .rk-hd__nav a:hover { opacity: 1; background: rgba(10, 15, 31, .05); }
html[data-rk-frame] .rk-hd[data-t="dark"] .rk-hd__nav a:hover,
html[data-rk-frame].dark .rk-hd__nav a:hover { background: rgba(255, 255, 255, .07); }
html[data-rk-frame] .rk-hd__nav a[aria-current] { opacity: 1; }
html[data-rk-frame] .rk-hd__nav a[aria-current]::after { content: ""; position: absolute; inset-inline: 16px; bottom: 9px; height: 1.5px; background: var(--acc); }
html[data-rk-frame] .rk-hd[data-t="dark"] .rk-hd__nav a[aria-current]::after { background: var(--acc3); }
/* the light / dark switch (.rk-theme, rubikn-brand.css): after the links, 8 px from the last one's padding */
html[data-rk-frame] .rk-hd__logo { margin-inline-end: auto; }
html[data-rk-frame] .rk-hd__bar > .rk-theme { margin-inline-start: -20px; color: inherit; }
html[data-rk-frame] .rk-hd__bar > .rk-theme + .rk-hd__menu { margin-inline-start: 0; }
html[data-rk-frame] .rk-hd__menu { display: none; }
html[data-rk-frame] .rk-hd__prog { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; overflow: hidden; }
html[data-rk-frame] .rk-hd__prog i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--acc), var(--acc3)); transform-origin: 0 50%; transform: scaleX(var(--pg, 0)); }
/* between phone and desktop the five links need a little less air to fit on one line */
@media (min-width: 761px) and (max-width: 1000px) {
  html[data-rk-frame] .rk-hd__bar { gap: 12px; }
  html[data-rk-frame] .rk-hd__nav { gap: 0; }
  html[data-rk-frame] .rk-hd__nav a { padding: 0 10px; }
  html[data-rk-frame] .rk-hd__nav a[aria-current]::after { inset-inline: 10px; }
  html[data-rk-frame] .rk-hd__bar > .rk-theme { margin-inline-start: -8px; }
}

/* =====================================================================
   FOOTER — the dark site footer (How it works / About / How I use your
   details), standing on its own navy block as on /enquiry-privacy/.
   ===================================================================== */
html[data-rk-frame] .rk-foot {
  --bg: var(--navy); --fg: #eef0f6; --fg2: #b3b9c9; --fg3: #858da3;
  --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .16); --card: #0e1528; --card2: #121a31; --ax: var(--acc3);
  position: relative; z-index: 2; display: block; clear: both;
  background: var(--navy); color: var(--fg);
  font-family: var(--sans); font-size: 18px; line-height: 1.6;
  font-feature-settings: "ss01", "ss03", "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
/* on a dark page the footer is a separate dark block: a hairline on top */
html[data-rk-frame].dark .rk-foot { box-shadow: inset 0 1px 0 var(--rk-d-line); }
html[data-rk-frame] .rk-foot *, html[data-rk-frame] .rk-foot *::before, html[data-rk-frame] .rk-foot *::after { box-sizing: border-box; }
html[data-rk-frame] .rk-foot :where(p, h2, ul, li) { margin: 0; padding: 0; max-width: none; }
html[data-rk-frame] .rk-foot :where(ul) { list-style: none; }
html[data-rk-frame] .rk-foot a { color: inherit; text-decoration: none; }
html[data-rk-frame] .rk-foot svg { display: block; }
html[data-rk-frame] .rk-foot :focus-visible { outline-color: var(--acc3); }
html[data-rk-frame] .rk-foot ::selection { background: var(--acc3); color: var(--navy); }
html[data-rk-frame] .rk-wrap { width: var(--wrap); margin-inline: auto; position: relative; }
html[data-rk-frame] .rk-ft { position: relative; z-index: 2; margin: 0; padding: 96px 0 0; border-top: 0; view-transition-name: site-footer; }
/* old content footers (article/case-study sign-offs) are not the site chrome: they must not share its transition name */
html[data-rk-frame] footer:not(.rk-ft) { view-transition-name: none; }
html[data-rk-frame] .rk-ft__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 40px; }
html[data-rk-frame] .rk-ft__h { margin: 0 0 12px; font-family: var(--mono); font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: .01em; color: var(--fg2); text-transform: none; text-wrap: wrap; }
html[data-rk-frame] .rk-ft__list { display: flex; flex-direction: column; align-items: flex-start; }
html[data-rk-frame] .rk-ft__list a { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.012em; color: #fff; padding: 8px 0; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; background-image: linear-gradient(var(--acc3), var(--acc3)); background-repeat: no-repeat; background-size: 0 1.5px; background-position: 0 85%; transition: background-size .5s var(--out), color .3s; }
html[data-rk-frame] .rk-ft__list a:hover { background-size: 100% 1.5px; color: var(--acc3); }
html[data-rk-frame] .rk-ft__fine { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .1); color: var(--fg2); font-size: 16px; line-height: 1.6; }
html[data-rk-frame] .rk-ft__fine a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-block: -12px; }
html[data-rk-frame] .rk-ft__fine a:hover { color: var(--acc3); }
html[data-rk-frame] .rk-ft__fine .rk-ft__row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
html[data-rk-frame] .rk-ft__fine .rk-ft__row a { margin-block: 0; }
html[data-rk-frame] .rk-ft__word { display: flex; align-items: center; gap: .18em; margin: 64px 0 0; padding-bottom: 28px; font-size: clamp(96px, 22vw, 340px); line-height: .9; letter-spacing: -.055em; font-weight: 500; color: rgba(255, 255, 255, .92); white-space: nowrap; overflow: hidden; max-width: none; }
html[data-rk-frame] .rk-ft__mark { width: .5em; flex: none; }
html[data-rk-frame] .rk-ft__mark svg { width: 100%; fill: var(--acc3); }
html[data-rk-frame] .rk-ft__word > span:last-child { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .25)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* footer: two columns of links between phone and desktop */
@media (max-width: 1099px) and (min-width: 761px) {
  html[data-rk-frame] .rk-ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   BUTTONS — the new pages' .rk-btn, for older markup that is rebuilt
   later (rubikn-legacy.css maps the old .btn onto this look).
   ===================================================================== */
html[data-rk-frame] .rk-btn {
  --bb: var(--ink); --bf: #fff; --bi: rgba(255, 255, 255, .14);
  position: relative; display: inline-flex; align-items: center; gap: 18px;
  min-height: 60px; padding: 8px 8px 8px 26px; border-radius: 2px; border: 0;
  background: var(--bb); color: var(--bf); text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: -.012em; white-space: nowrap;
  transform: scale(var(--bs, 1));
  transition: transform .5s var(--spring), background .35s var(--out), box-shadow .5s var(--out);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 14px 30px -16px rgba(10, 15, 31, .55);
  overflow: hidden; isolation: isolate;
}
html[data-rk-frame] .rk-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 48%, transparent 66%); transform: translateX(-110%); transition: transform .9s var(--out); }
html[data-rk-frame] .rk-btn:hover::before { transform: translateX(110%); }
html[data-rk-frame] .rk-btn:hover { --bs: 1.03; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 22px 40px -18px rgba(59, 99, 212, .65); background: #0f1733; }
html[data-rk-frame] .rk-btn:active { --bs: .97; transition-duration: .12s; }
html[data-rk-frame] .rk-btn__i { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 99px; background: var(--bi); transition: transform .55s var(--spring), background .35s var(--out); }
html[data-rk-frame] .rk-btn__i svg { width: 20px; height: 20px; }
html[data-rk-frame] .rk-btn:hover .rk-btn__i { background: var(--acc); transform: rotate(-8deg); }
html[data-rk-frame] .rk-btn--light { --bb: #fff; --bf: var(--ink); --bi: rgba(10, 15, 31, .07); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -18px rgba(116, 151, 255, .55); }
html[data-rk-frame] .rk-btn--light:hover { background: #fff; }
html[data-rk-frame] .rk-btn--light:hover .rk-btn__i { color: #fff; }
html[data-rk-frame].dark .rk-btn { --bb: #f8f8fa; --bf: #0a0f1f; --bi: rgba(10, 15, 31, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 30px -16px rgba(0, 0, 0, .7); }
html[data-rk-frame].dark .rk-btn::before { background: linear-gradient(105deg, transparent 30%, rgba(59, 99, 212, .12) 48%, transparent 66%); }
html[data-rk-frame].dark .rk-btn:hover { background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 22px 40px -18px rgba(66, 112, 218, .55); }
html[data-rk-frame].dark .rk-btn:hover .rk-btn__i { background: var(--rk-d-accent-strong); color: #fff; }
html[data-rk-frame] .rk-btn--lg { min-height: 68px; font-size: 18px; padding-inline-start: 30px; }
html[data-rk-frame] .rk-btn--lg .rk-btn__i { width: 52px; height: 52px; }

/* =====================================================================
   PHONE (max-width: 760px) — the new pages' phone block for the frame
   ===================================================================== */
@media (max-width: 760px) {
  html[data-rk-frame] { --wrap: calc(100% - 40px); scroll-padding-top: 84px; }
  :where(html[data-rk-frame]) h1 { font-size: 38px; line-height: 1.07; letter-spacing: -.045em; }
  :where(html[data-rk-frame]) h2 { font-size: 34px; line-height: 1.06; }
  :where(html[data-rk-frame]) h3 { font-size: 24px; }

  html[data-rk-frame] .rk-hd__bar { top: 10px; width: calc(100% - 20px); height: 56px; gap: 10px; padding: 0 6px 0 8px; }
  html[data-rk-frame] .rk-hd__name { font-size: 16px; }
  html[data-rk-frame] .rk-hd__nav { position: absolute; top: calc(100% + 8px); inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; margin: 0; border-radius: 2px; background: rgba(248, 248, 250, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(10, 15, 31, .08); box-shadow: 0 30px 60px -30px rgba(10, 15, 31, .5); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--out), transform .4s var(--spring), visibility 0s .3s; color: var(--ink); }
  html[data-rk-frame] .rk-hd[data-open] .rk-hd__nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  html[data-rk-frame] .rk-hd__nav a { height: 52px; font-size: 18px; opacity: 1; padding: 0 16px; }
  html[data-rk-frame] .rk-hd__nav a[aria-current]::after { inset-inline: 16px auto; width: 24px; bottom: 12px; }
  html[data-rk-frame] .rk-hd__menu { display: inline-flex; align-items: center; gap: 10px; height: 44px; min-width: 44px; margin-inline-start: auto; padding: 0 12px; border: 0; border-radius: 2px; background: transparent; color: inherit; cursor: pointer; font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1; }
  html[data-rk-frame] .rk-hd__burger { width: 18px; height: 10px; position: relative; display: block; }
  html[data-rk-frame] .rk-hd__burger i { position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor; transition: transform .45s var(--spring), top .3s; }
  html[data-rk-frame] .rk-hd__burger i:first-child { top: 0; }
  html[data-rk-frame] .rk-hd__burger i:last-child { top: 8px; }
  html[data-rk-frame] .rk-hd[data-open] .rk-hd__burger i:first-child { top: 4px; transform: rotate(45deg); }
  html[data-rk-frame] .rk-hd[data-open] .rk-hd__burger i:last-child { top: 4px; transform: rotate(-45deg); }
  /* over the dark footer the open menu stays a light sheet, as on the new pages */
  html[data-rk-frame] .rk-hd[data-t="dark"] .rk-hd__nav a:hover { background: rgba(10, 15, 31, .05); }
  /* dark page: the sheet is a raised dark panel with a hairline, fully opaque (its own
     backdrop-filter cannot blur inside the bar's, so a see-through sheet would ghost the
     bright page text behind it) */
  html[data-rk-frame].dark .rk-hd__nav { background: var(--rk-d-raised); border-color: rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85); color: var(--rk-d-text); }
  html[data-rk-frame].dark .rk-hd .rk-hd__nav a:hover { background: rgba(255, 255, 255, .07); }
  /* the switch sits in the bar beside Menu (the links are in the sheet) */
  html[data-rk-frame] .rk-hd__bar > .rk-theme { margin-inline-start: 0; }
  html[data-rk-frame] .rk-hd__bar > .rk-theme + .rk-hd__menu { margin-inline-start: 0; }

  html[data-rk-frame] .rk-btn { width: 100%; justify-content: space-between; min-height: 58px; font-size: 16.5px; padding-inline-start: 22px; }

  html[data-rk-frame] .rk-ft { padding-top: 64px; }
  html[data-rk-frame] .rk-ft__cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  html[data-rk-frame] .rk-ft__fine { margin-top: 40px; }
  html[data-rk-frame] .rk-ft__fine .rk-ft__row { column-gap: 24px; }
  html[data-rk-frame] .rk-ft__row > span[aria-hidden] { display: none; }   /* links wrap onto their own lines on a phone, so no dot is left hanging */
  html[data-rk-frame] .rk-ft__word { font-size: 90px; margin-top: 44px; padding-bottom: 40px; }
}

/* ---------- reduced motion: the finished frame, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-rk-frame] .rk-hd *, html[data-rk-frame] .rk-hd *::before, html[data-rk-frame] .rk-hd *::after,
  html[data-rk-frame] .rk-foot *, html[data-rk-frame] .rk-btn, html[data-rk-frame] .rk-btn::before { transition: none !important; animation: none !important; }
  html[data-rk-frame] .rk-hd[data-hide] .rk-hd__bar { transform: translateX(-50%); }
}