/* =====================================================================
   Rubikn · legacy restyle layer for the older pages (rubikn-legacy.css)
   ---------------------------------------------------------------------
   Loads after styles.css, the page's own stylesheets and
   rubikn-frame.css. It maps the SHARED parts of styles.css (tokens,
   containers, buttons, eyebrows, breadcrumbs, hero headlines, closing
   blocks, cookie banner) onto the new pages' look, and switches off the
   old "classified dossier" decoration (ghost watermarks, rotated
   stamps, scan lines, fake file numbers), visually only: no text is
   changed, hidden things are aria-hidden decoration.

   Page-family templates (articles, case studies, listings, sprint,
   services, messaging gap) get their own stylesheets after this one
   (see the rk-frame:family-css hook in each page's <head>), so this
   layer stays on the shared parts.

   Scoped to html[data-rk-frame], which only the older pages carry.
   ===================================================================== */

/* ---------- 1. the old token names, re-pointed at the new palette ---------- */
html[data-rk-frame] {
  --paper: #f8f8fa;
  --paper-deeper: #f2f3f7;
  --paper-edge: #d8d8e0;
  --rule: #dcdde4;
  --ink: #0a0f1f;
  --ink-soft: #3a3f52;
  --ink-mute: #6b7085;
  --accent: #3b63d4;
  --accent-deep: #2a4aaf;
  --evidence: #b8f25e;
  --warning: #d4893b;
  --highlight: #e9eefb;
  --font-sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --ease-out-strong: cubic-bezier(.23, 1, .32, 1);
  --container: min(1320px, calc(100% - 96px));
}
/* dark (html.dark): styles.css's old html.dark token block, re-pointed at the
   shared dark palette (rubikn-brand.css --rk-d-*) so old content stays coherent */
html[data-rk-frame].dark {
  --paper: var(--rk-d-bg);
  --paper-deeper: var(--rk-d-raised);
  --paper-edge: var(--rk-d-line);
  --rule: var(--rk-d-line);
  --ink: var(--rk-d-text);
  --ink-soft: var(--rk-d-text-2);
  --ink-mute: var(--rk-d-text-3);
  --accent: var(--rk-d-accent);
  --accent-deep: #b5cdff;
  --evidence: var(--rk-d-ok);
  --warning: var(--rk-d-warn);
  --highlight: #16213a;
}
@media (max-width: 900px) { html[data-rk-frame] { --container: min(1320px, calc(100% - 48px)); } }
@media (max-width: 760px) { html[data-rk-frame] { --container: calc(100% - 40px); } }

/* ---------- 2. page canvas: plain paper, as on the new pages ---------- */
html[data-rk-frame] body::before,
html[data-rk-frame] body::after { content: none; display: none; }
html[data-rk-frame] body { font-size: 18px; }
@media (max-width: 900px) { html[data-rk-frame] body { font-size: 18px; } }

/* ---------- 3. old dossier decoration off (aria-hidden watermarks, stamps, scan lines) ---------- */
html[data-rk-frame] :is(.hero-ghost, .page-hero .ghost, .classified-stamp, .ri-stamp, .svc-hero__stamp, .pricing-dark__stamp, .idx-scan, .study-flagship__scan, .dossier-scan),
html[data-rk-frame] [aria-hidden="true"]:is([class$="-ghost"], [class*="-ghost "], [class$="__ghost"], [class*="__ghost "]) { display: none; }
/* fake file numbers drawn by CSS, not page text */
html[data-rk-frame] .dossier-inner::before { content: none; }

/* ---------- 4. layout primitives ---------- */
html[data-rk-frame] .container { width: var(--container); }

/* ---------- 5. buttons → the new .rk-btn look ---------- */
html[data-rk-frame] .btn {
  gap: 16px; min-height: 56px; padding: 6px 6px 6px 24px; border: 0; border-radius: 2px;
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: -.012em; text-transform: none; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 14px 30px -16px rgba(10, 15, 31, .55);
  transition: transform .5s var(--spring), background .35s var(--out), box-shadow .5s var(--out), color .3s var(--out);
}
html[data-rk-frame] .btn::before { box-shadow: none; }
html[data-rk-frame] .btn:hover { transform: scale(1.03); background: #0f1733; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 22px 40px -18px rgba(59, 99, 212, .65); }
html[data-rk-frame] .btn:active { transform: scale(.97); transition-duration: .12s; }
html[data-rk-frame] .btn .icon-wrap { width: 44px; height: 44px; flex: none; border-radius: 99px; background: rgba(255, 255, 255, .14); color: inherit; transition: transform .55s var(--spring), background .35s var(--out), color .3s var(--out); }
html[data-rk-frame] .btn:hover .icon-wrap { transform: rotate(-8deg); background: var(--acc); color: #fff; }
html[data-rk-frame] .btn svg { width: 18px; height: 18px; }
/* accent = the same ink button with the cobalt chip */
html[data-rk-frame] .btn--accent { background: var(--ink); color: #fff; }
html[data-rk-frame] .btn--accent .icon-wrap { background: var(--acc); }
html[data-rk-frame] .btn--accent:hover { background: #0f1733; }
/* ghost = .rk-btn--light on paper */
html[data-rk-frame] .btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(10, 15, 31, .14), 0 14px 30px -22px rgba(10, 15, 31, .35); }
html[data-rk-frame] .btn--ghost .icon-wrap { background: rgba(10, 15, 31, .07); color: var(--ink); }
html[data-rk-frame] .btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(10, 15, 31, .22), 0 22px 40px -20px rgba(59, 99, 212, .45); }
html[data-rk-frame] .btn--ghost:hover .icon-wrap { background: var(--acc); color: #fff; }
/* dark: the primary button inverts (light button, ink text); ghost = a raised dark button with a hairline */
html[data-rk-frame].dark :is(.btn, .btn--accent) { background: #f8f8fa; color: #0a0f1f; 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 :is(.btn, .btn--accent):hover { background: #fff; color: #0a0f1f; 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 .btn .icon-wrap { background: rgba(10, 15, 31, .08); color: #0a0f1f; }
html[data-rk-frame].dark .btn--accent .icon-wrap,
html[data-rk-frame].dark .btn:hover .icon-wrap { background: var(--rk-d-accent-strong); color: #fff; }
html[data-rk-frame].dark .btn--ghost { background: var(--rk-d-raised); color: var(--rk-d-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 14px 30px -22px rgba(0, 0, 0, .6); }
html[data-rk-frame].dark .btn--ghost:hover { background: var(--rk-d-raised-2); color: var(--rk-d-text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 22px 40px -20px rgba(0, 0, 0, .7); }
html[data-rk-frame].dark .btn--ghost .icon-wrap { background: rgba(255, 255, 255, .08); color: var(--rk-d-text); }
html[data-rk-frame].dark .btn--ghost:hover .icon-wrap { background: var(--rk-d-accent-strong); color: #fff; }

/* ---------- 6. small labels → 16 px, sentence case, Geist (practical-ui minimum) ---------- */
@keyframes rk-legacy-pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 99, 212, .45); } 70% { box-shadow: 0 0 0 10px rgba(59, 99, 212, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 99, 212, 0); } }
/* the eyebrow = the new pages' .rk-kick--dot */
html[data-rk-frame] .eyebrow { gap: 12px; font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -.005em; text-transform: none; color: var(--ink); }
html[data-rk-frame] .eyebrow::before { width: 8px; height: 8px; flex: none; border-radius: 99px; background: var(--acc); opacity: 1; animation: rk-legacy-pulse 2.4s var(--out) infinite; }
html[data-rk-frame] .eyebrow::after { content: none; display: none; }
html[data-rk-frame] .eyebrow--light { color: #fff; }
html[data-rk-frame] .eyebrow--light::before { background: var(--acc3); }
html[data-rk-frame].dark .eyebrow--light { color: var(--rk-d-text); }

/* hero badges and visible stamps across the old templates: the same quiet kicker, same text */
html[data-rk-frame] :is(.intel-badge, .svc-badge, .ri-badge, .nf-badge, .thanks-badge, .mq-badge, .qc-badge, .rl-badge, .eth-badge, .blog-hero__stamp, .studies-hero__stamp, .cs-stamp, .art-badge) {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  width: auto; height: auto; min-height: 0; padding: 0; margin-inline: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -.005em; text-transform: none;
  color: var(--ink);
}
html[data-rk-frame] :is(.intel-badge, .svc-badge, .nf-badge, .thanks-badge, .blog-hero__stamp, .studies-hero__stamp)::before {
  content: ""; display: block; flex: none; width: 8px; height: 8px; border-radius: 99px; background: var(--acc);
  position: static; inset: auto; opacity: 1; transform: none; box-shadow: none; animation: rk-legacy-pulse 2.4s var(--out) infinite;
}
html[data-rk-frame] :is(.intel-badge, .svc-badge, .nf-badge, .thanks-badge, .blog-hero__stamp, .studies-hero__stamp)::after { content: none; display: none; }
/* badges that already carry their own dot element keep it, as the new cobalt dot */
html[data-rk-frame] :is(.mq-badge__dot, .qc-badge__dot, .rl-badge__dot, .eth-badge__dot, .cs-stamp__dot, .art-badge__dot) {
  width: 8px; height: 8px; flex: none; border-radius: 99px; background: var(--acc); box-shadow: none; animation: rk-legacy-pulse 2.4s var(--out) infinite;
}

/* breadcrumbs: 16 px, sentence case, real links underlined, 44 px targets without extra height */
html[data-rk-frame] .breadcrumbs { gap: 8px; font-family: var(--sans); font-size: 16px; line-height: 1.4; letter-spacing: -.005em; text-transform: none; color: var(--ink3); }
html[data-rk-frame] .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--ink2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(10, 15, 31, .25); }
html[data-rk-frame] .breadcrumbs a:hover { color: var(--ink); text-decoration-color: var(--acc); }
html[data-rk-frame] .breadcrumbs .sep { color: var(--ink3); opacity: .6; }
html[data-rk-frame] .breadcrumbs [aria-current] { color: var(--ink); }
html[data-rk-frame].dark .breadcrumbs a { text-decoration-color: rgba(255, 255, 255, .3); }
html[data-rk-frame].dark .breadcrumbs a:hover { text-decoration-color: var(--acc); }
html[data-rk-frame].dark .breadcrumbs .sep { opacity: 1; }   /* --rk-d-text-3 at full strength: 7.9:1 (at .6 it was 3.5:1) */

/* divider marks, small print */
html[data-rk-frame] .divider-mark { font-family: var(--sans); font-size: 16px; letter-spacing: -.005em; color: var(--ink3); }
html[data-rk-frame] .divider-mark::before, html[data-rk-frame] .divider-mark::after { background: var(--line); }

/* ---------- 7. headlines and their serif accent (the new .rk-em--u) ---------- */
html[data-rk-frame] .hero-headline { font-weight: 500; letter-spacing: -.043em; }
html[data-rk-frame] .hero-headline em,
html[data-rk-frame] h1 .serif,
html[data-rk-frame] h2 .serif {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -.015em; color: inherit;
}
html[data-rk-frame] .hero-headline em {
  padding-right: .04em;
  background-image: linear-gradient(var(--acc), var(--acc)); background-repeat: no-repeat; background-position: 0 94%; background-size: 100% 1.5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[data-rk-frame] .hero-headline em::after { content: none; display: none; }
html[data-rk-frame] .accent {
  font-size: 1.08em; letter-spacing: -.015em; color: inherit; padding: 0 .04em;
  background-image: linear-gradient(var(--acc), var(--acc)); background-repeat: no-repeat; background-position: 0 94%; background-size: 100% 1.5px;
}
html[data-rk-frame] .serif-i { font-size: 1.08em; letter-spacing: -.015em; color: inherit; }
/* marked text: the new pages' soft cobalt band */
html[data-rk-frame] mark { color: inherit; padding: 0 .06em; background: linear-gradient(180deg, transparent 58%, rgba(59, 99, 212, .16) 58%, rgba(59, 99, 212, .16) 96%, transparent 96%); }
html[data-rk-frame].dark mark { background: linear-gradient(180deg, transparent 58%, rgba(141, 179, 255, .2) 58%, rgba(141, 179, 255, .2) 96%, transparent 96%); }

/* ---------- 8. hero lead text (the new .rk-lead) ---------- */
html[data-rk-frame] :is(.hero-sub, .lede) { font-size: clamp(19px, 1.45vw, 23px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink2); }
html[data-rk-frame] .hero-cta { gap: 16px; }

/* ---------- 9. closing call-to-action (the new close: big headline, one button) ---------- */
html[data-rk-frame] .closing h2 { font-size: clamp(44px, 5.6vw, 92px); line-height: .98; letter-spacing: -.045em; font-weight: 500; }
html[data-rk-frame] .closing h2 b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -.015em; line-height: 1; color: inherit; }
html[data-rk-frame] .closing-foot { gap: 16px; margin-top: 40px; }
html[data-rk-frame] .closing-foot .small { font-family: var(--sans); font-size: 16px; color: var(--ink3); letter-spacing: 0; }

/* ---------- 10. verdict chips (styles.css ticker + matrix) → a plain bold word, no bordered chip ---------- */
html[data-rk-frame] :is(.ticker-item, .matrix-row) .verdict {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-transform: none;
}

/* ---------- 11. cookie-consent banner (partials.js) in the new look ---------- */
html[data-rk-frame] .cookie-banner {
  left: 16px; right: 16px; bottom: 16px; max-width: 1240px; margin-inline: auto;
  background: rgba(255, 255, 255, .97); color: var(--ink);
  border: 1px solid rgba(10, 15, 31, .08); border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgba(10, 15, 31, .5), 0 2px 8px -4px rgba(10, 15, 31, .12);
  font-family: var(--sans);
}
html[data-rk-frame] .cookie-banner__inner { gap: 24px 40px; padding: 24px 24px 24px 32px; max-width: none; }
html[data-rk-frame] .cookie-banner__eyebrow { margin-bottom: 4px; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--ink); }
html[data-rk-frame] .cookie-banner__body { font-size: 16px; line-height: 1.55; color: var(--ink2); }
html[data-rk-frame] .cookie-banner__link { color: var(--ink); text-decoration-color: var(--acc); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
html[data-rk-frame] .cookie-banner__link:hover { color: var(--acc2); }
html[data-rk-frame] .cookie-banner__actions { gap: 8px; }
html[data-rk-frame] .cookie-banner__btn { min-height: 48px; padding: 0 24px; border-radius: 2px; font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -.01em; text-transform: none; }
html[data-rk-frame] .cookie-banner__btn--reject { background: #fff; color: var(--ink); border-color: rgba(10, 15, 31, .18); }
html[data-rk-frame] .cookie-banner__btn--reject:hover { border-color: var(--ink); }
html[data-rk-frame] .cookie-banner__btn--accept { background: var(--ink); color: #fff; border-color: var(--ink); }
html[data-rk-frame] .cookie-banner__btn--accept:hover { background: #0f1733; border-color: #0f1733; }
/* dark: a raised dark panel with a hairline; Accept inverts like the primary button */
html[data-rk-frame].dark .cookie-banner { background: rgba(17, 22, 32, .97); color: var(--rk-d-text); border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85), 0 2px 8px -4px rgba(0, 0, 0, .5); }
html[data-rk-frame].dark .cookie-banner__eyebrow { color: var(--rk-d-text); }
html[data-rk-frame].dark .cookie-banner__body { color: var(--rk-d-text-2); }
html[data-rk-frame].dark .cookie-banner__link { color: var(--rk-d-text); text-decoration-color: var(--rk-d-accent); }
html[data-rk-frame].dark .cookie-banner__link:hover { color: var(--rk-d-accent); }
html[data-rk-frame].dark .cookie-banner__btn--reject { background: transparent; color: var(--rk-d-text); border-color: var(--rk-d-line-2); }
html[data-rk-frame].dark .cookie-banner__btn--reject:hover { border-color: var(--rk-d-text); }
html[data-rk-frame].dark .cookie-banner__btn--accept { background: #f8f8fa; color: #0a0f1f; border-color: #f8f8fa; }
html[data-rk-frame].dark .cookie-banner__btn--accept:hover { background: #fff; border-color: #fff; }
html[data-rk-frame].dark .cookie-banner__btn:focus-visible { outline-color: var(--rk-d-accent); }
@media (max-width: 720px) {
  html[data-rk-frame] .cookie-banner { left: 10px; right: 10px; bottom: 10px; }
  html[data-rk-frame] .cookie-banner__inner { padding: 20px; gap: 16px; }
}

/* ---------- 12. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-rk-frame] .eyebrow::before,
  html[data-rk-frame] [class*="badge"]::before,
  html[data-rk-frame] :is(.blog-hero__stamp, .studies-hero__stamp)::before,
  html[data-rk-frame] [class*="__dot"] { animation: none; }
  html[data-rk-frame] .btn, html[data-rk-frame] .btn .icon-wrap { transition: none; }
}