/* =====================================================================
   Rubikn · page-family layer for the remaining older pages
   (rubikn-legacy-misc.css)
   ---------------------------------------------------------------------
   Pages: /about-us/, /contact-us/ and /contact-us/thanks/,
   /checkout/thanks/, /404.html, /methodology-and-quality/ and its three
   children (research-lifecycle, quality-control, ethics), and the three
   /trust-center/ pages (privacy-policy, terms, cookie-policy).

   Loads after styles.css, the page's own stylesheet or inline <style>,
   rubikn-frame.css and rubikn-legacy.css (one <link> on the line after
   the rk-frame:family-css hook). It restyles those pages onto the new
   pages' system (About Abdullah, Get in touch, How I use your details):
   Geist body 18px / 1.55, headings Geist 500, Instrument Serif italic
   only as an accent, one left-aligned reading line, 8-point spacing,
   paper / ink / cobalt, 16px minimum text, 44px targets, sentence-case
   labels instead of tiny uppercase mono, no dossier decoration.

   Visual only: no text, link, heading, form field, form action, JSON-LD,
   meta or script is changed. Hidden here (decoration or fake dossier
   labels, never real content):
     .pillar-card__line      about-us   empty hover rule under each pillar
     .ct-file-badge          contact-us "Brief Request" tab cut into the form border
     .ct-stamp               contact-us "Open · Accepting" stamp
     .ct-form-head__ref      contact-us "Ref #RBK-2026" fake reference
     .tc-meta__dot           trust      empty green status dot before "Last updated"
   (rubikn-legacy.css already hides the aria-hidden ghosts and stamps:
   .classified-stamp, .ct-ghost, .tc-ghost, .nf-ghost, .thanks-ghost.)

   Inline style="" attributes in the old markup are overridden with
   !important; everything else wins on specificity.
   Scoped to html[data-rk-frame], which only the older pages carry.
   Dark mode (html.dark) is section 8 at the end, CSS only.
   ===================================================================== */

/* =====================================================================
   0. SHARED
   ===================================================================== */

/* styles.css sets overflow-x: hidden on body, which turns body into a scroll
   container that never scrolls, so position: sticky (the trust-center index,
   the contact aside) could never stick. clip keeps the sideways clipping
   without making a scroll container. */
html[data-rk-frame] body { overflow-x: hidden; overflow-x: clip; }

/* the new pages' hero canvas: 88 px grid fading out, a soft cobalt glow */
html[data-rk-frame] main { position: relative; isolation: isolate; }
html[data-rk-frame] main::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 760px; pointer-events: none;
  background-image:
    radial-gradient(50% 60% at 70% 0%, rgba(59, 99, 212, .12), transparent 70%),
    linear-gradient(rgba(10, 15, 31, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 15, 31, .045) 1px, transparent 1px);
  background-size: auto, 88px 88px, 88px 88px;
  background-position: 0 0, calc(50% + 44px) 0, calc(50% + 44px) 0;
  -webkit-mask-image: radial-gradient(70% 80% at 58% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(70% 80% at 58% 0%, #000 10%, transparent 70%);
}

/* the serif accent inside headings: Instrument Serif italic on a cobalt rule (the new .rk-em--u) */
html[data-rk-frame] :is(.mq-title, .rl-title, .qc-hero__title, .eth-hero__title, .mq-cards-heading, .rl-section h2, .qc-section h2, .eth-section h2, .mq-closing h2, .rl-closing h2, .qc-closing h2, .eth-closing h2, .thanks-headline, .nf-headline) em {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -.015em; line-height: 1; color: inherit;
  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;
}

/* old section labels → the new kicker (.rk-kick--dot): 16 px Geist, sentence case, cobalt dot */
html[data-rk-frame] :is(.mq-cards-label, .rl-section-label, .qc-label, .eth-label, .ct-closing__eyebrow, .ct-aside__badge) {
  display: flex; width: fit-content; align-items: center; gap: 12px; margin: 0 0 24px; padding: 0;
  position: static; background: 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(.mq-cards-label, .rl-section-label, .qc-label, .eth-label, .ct-closing__eyebrow, .ct-aside__badge)::before {
  content: ""; display: block; flex: none; width: 8px; height: 8px; border-radius: 99px; background: var(--acc);
  animation: rk-legacy-pulse 2.4s var(--out) infinite;
}

/* a text link with a 44 px target (the new .rk-tlink / .rp-link) */
html[data-rk-frame] :is(.founder-link, .mq-card__link, .rl-closing-links a, .qc-closing-links a, .eth-closing-links a, .nf-where a) {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0; border: 0;
  font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--acc);
  transition: color .3s var(--out), gap .4s var(--spring);
}
html[data-rk-frame] :is(.founder-link, .mq-card__link, .rl-closing-links a, .qc-closing-links a, .eth-closing-links a, .nf-where a):hover { color: var(--acc2); }

/* breadcrumbs: rubikn-legacy.css gives the links 44 px height; short ones ("Home") also need 44 px width */
html[data-rk-frame] .breadcrumbs a { min-width: 44px; }

/* links inside running text keep their look; vertical padding on the inline box widens the
   tap area to 44 px without moving the line (as .rp-link on How I use your details) */
html[data-rk-frame] main :where(p, li) a:where(:not([class])) { padding-block: 11px; }

/* white card (the new .ra-role / .rp-short) */
html[data-rk-frame] :is(.signal-card, .mq-card, .qc-principle-card, .eth-principle, .qc-card, .eth-card, .qc-deliverable, .eth-scope-card, .qc-tier, .qc-confidence, .rl-artifacts) {
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 30px 60px -48px rgba(10, 15, 31, .35);
}

/* =====================================================================
   1. ABOUT US (/about-us/)
   ===================================================================== */

/* hero: left-aligned, no dotted dossier grid (the canvas above replaces it) */
html[data-rk-frame] .about-hero { text-align: left; padding: 184px 0 96px; background-image: none; overflow: visible; }
html[data-rk-frame] .about-hero > .container { align-items: flex-start; }
html[data-rk-frame] .about-hero .intel-badge { margin: 0 0 24px; }
html[data-rk-frame] .about-hero .hero-headline { max-width: 15ch; margin-inline: 0; font-size: clamp(52px, 6.4vw, 96px); line-height: 1; letter-spacing: -.048em; }
html[data-rk-frame] .about-hero .hero-sub { max-width: 46ch; margin: 32px 0 0; text-align: left; }

/* the sections: one rhythm, one left edge (their padding and headings are inline styles) */
html[data-rk-frame] .about-hero ~ section[style*="padding-block"] { padding-block: clamp(72px, 7.5vw, 112px) !important; }
html[data-rk-frame] .about-hero ~ section .eyebrow[style] { color: var(--ink) !important; }
html[data-rk-frame] .about-hero ~ section:not(.closing) h2[style] {
  margin-top: 0 !important; font-size: clamp(38px, 4.3vw, 66px) !important; line-height: 1.02; letter-spacing: -.04em !important; max-width: 20ch;
}
html[data-rk-frame] .about-hero ~ section .eyebrow + h2,
html[data-rk-frame] .about-hero ~ section .reveal > .eyebrow { margin-bottom: 24px; }
html[data-rk-frame] .about-hero ~ section div[style*="text-align:center"] { text-align: left !important; max-width: none !important; margin-inline: 0 !important; }
html[data-rk-frame] .about-hero ~ section[style*="text-align:center"] { text-align: left !important; }
html[data-rk-frame] .about-hero ~ section p[style*="margin-inline:auto"] {
  margin-inline: 0 !important; max-width: 44ch !important; font-size: clamp(19px, 1.45vw, 23px) !important; line-height: 1.5 !important; letter-spacing: -.01em; color: var(--ink2) !important;
}
html[data-rk-frame] .about-hero ~ section div[style*="justify-content:center"] { justify-content: flex-start !important; margin-top: 32px !important; }

/* philosophy: one reading column; the lead in Geist, not a serif paragraph */
html[data-rk-frame] .philosophy-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 820px; margin-top: 48px !important; }
html[data-rk-frame] .philosophy-grid__lead {
  max-width: 34ch; font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: clamp(22px, 1.95vw, 28px); line-height: 1.36; letter-spacing: -.018em; color: var(--ink);
}
html[data-rk-frame] .philosophy-grid__body { border: 0; padding: 0; }
html[data-rk-frame] .philosophy-grid__body p { max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .philosophy-grid__body p + p { margin-top: 16px; }

/* founder: colour photo on a card, name in Geist, role as plain text */
html[data-rk-frame] .founder-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 72px; margin-top: 48px !important; }
html[data-rk-frame] .founder-portrait { justify-content: flex-start; }
html[data-rk-frame] .founder-photo {
  width: 280px; height: 280px; border: 1px solid var(--ink); border-radius: 2px; background: #000;
  filter: none; box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--edge), 0 40px 60px -40px rgba(10, 15, 31, .5);
}
html[data-rk-frame] .founder-photo:hover { filter: none; }
html[data-rk-frame] .founder-name {
  font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.04; letter-spacing: -.035em; color: var(--ink);
}
html[data-rk-frame] .founder-role {
  margin: 12px 0 32px; font-family: var(--sans); font-size: 18px; font-weight: 500; line-height: 1.4;
  letter-spacing: -.01em; text-transform: none; color: var(--ink3);
}
html[data-rk-frame] .founder-bio p { max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .founder-bio p + p { margin-top: 16px; }
html[data-rk-frame] .founder-links { margin-top: 32px; }
html[data-rk-frame] .founder-link svg { width: 18px; height: 18px; flex: none; }

/* five disciplines: quiet rows (label, title, text) instead of five narrow mono cards */
html[data-rk-frame] .pillars-section { background: transparent; }
html[data-rk-frame] .pillars-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--line2); }
html[data-rk-frame] .pillar-card {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr); column-gap: 40px; row-gap: 8px; align-items: baseline;
  min-height: 0; padding: 32px 0; background: transparent; border-bottom: 1px solid var(--line);
}
html[data-rk-frame] .pillar-card:hover { background: transparent; }
html[data-rk-frame] .pillar-card__num { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--ink3); }
html[data-rk-frame] .pillar-card__title { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: clamp(24px, 2vw, 30px); line-height: 1.16; letter-spacing: -.025em; color: var(--ink); }
html[data-rk-frame] .pillar-card__body { margin-top: 0; max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .pillar-card__line { display: none; }

/* how we work: the new dark chapter (navy, cards, Geist) */
html[data-rk-frame] .method-section { background: var(--navy); color: #eef0f6; padding-block: clamp(96px, 10vw, 144px); }
html[data-rk-frame] .about-hero ~ .method-section .eyebrow[style] { color: #fff !important; }
html[data-rk-frame] .method-section .eyebrow::before { background: var(--acc3); }
html[data-rk-frame] .about-hero ~ .method-section h2[style] { color: #fff !important; }
html[data-rk-frame] .method-section :focus-visible { outline-color: var(--acc3); }
html[data-rk-frame] .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
html[data-rk-frame] .method-step {
  display: flex; flex-direction: column; gap: 12px; padding: 36px 32px 34px;
  background: #0e1528; border: 1px solid rgba(255, 255, 255, .16); border-radius: 2px;
}
html[data-rk-frame] .method-step__num { margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--acc3); }
html[data-rk-frame] .method-step__title { margin: 0; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 24px; line-height: 1.22; letter-spacing: -.02em; color: #fff; }
html[data-rk-frame] .method-step__body { max-width: 52ch; font-size: 18px; line-height: 1.6; color: #b3b9c9; }
html[data-rk-frame] .method-step__body a[style] { color: #fff !important; text-decoration-color: var(--acc3); }
html[data-rk-frame] .method-step__body a[style]:hover { color: var(--acc3) !important; }

/* principles: serif letters as the accent, Geist titles */
html[data-rk-frame] .principles-grid { gap: 48px 64px; margin-top: 56px; }
html[data-rk-frame] .principle { gap: 24px; padding-top: 24px; border-top: 1px solid var(--ink); }
html[data-rk-frame] .principle__letter {
  width: 40px; height: auto; display: block; background: none;
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 56px; line-height: .8; letter-spacing: -.02em; color: var(--acc);
}
html[data-rk-frame] .principle__title { margin-bottom: 8px; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 24px; line-height: 1.22; letter-spacing: -.02em; }
html[data-rk-frame] .principle__body { max-width: 52ch; font-size: 18px; line-height: 1.6; color: var(--ink2); }

/* signals */
html[data-rk-frame] .about-hero ~ section p[style*="font-size:14px"] { max-width: 36ch !important; font-size: 18px !important; line-height: 1.5 !important; color: var(--ink2) !important; }
html[data-rk-frame] .signals-grid { gap: 24px; margin-top: 56px; }
html[data-rk-frame] .signal-card { min-height: 0; justify-content: flex-start; gap: 24px; padding: 40px 36px 36px; }
html[data-rk-frame] .signal-card:hover { background: #fff; }
html[data-rk-frame] .signal-card__icon { margin: 0; }
html[data-rk-frame] .signal-card__title { margin-bottom: 8px; font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: 1.22; letter-spacing: -.02em; text-transform: none; }
html[data-rk-frame] .signal-card__body { font-size: 18px; line-height: 1.6; color: var(--ink2); }

/* closing */
html[data-rk-frame] .about-hero ~ .closing { padding-block: clamp(104px, 11vw, 160px); }
html[data-rk-frame] .about-hero ~ .closing p[style] { max-width: 44ch !important; margin-top: 32px !important; font-size: clamp(19px, 1.45vw, 23px) !important; color: var(--ink2) !important; }

/* =====================================================================
   2. CONTACT US (/contact-us/) — the form in Get in touch's style
   ===================================================================== */
html[data-rk-frame] .ct-hero { padding: 184px 0 64px; }
html[data-rk-frame] .ct-hero .breadcrumbs { margin-bottom: 40px; }
html[data-rk-frame] .ct-hero .hero-headline { max-width: 18ch; font-size: clamp(52px, 6.4vw, 96px); line-height: 1; letter-spacing: -.048em; }
html[data-rk-frame] .ct-hero .hero-sub { max-width: 52ch; margin-top: 32px; }
/* the trust strip: plain sentence-case facts */
html[data-rk-frame] .ct-trust {
  gap: 8px 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: -.005em; text-transform: none; color: var(--ink2);
}
html[data-rk-frame] .ct-trust__sep { color: var(--ink3); opacity: .5; }

html[data-rk-frame] .ct-hero + section { padding: 32px 0 128px; }
html[data-rk-frame] .ct-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }

/* the form card: one white sheet, no double bezel, no dossier tab / stamp / reference */
html[data-rk-frame] .ct-form-wrap { padding: 0; background: none; border: 0; }
html[data-rk-frame] .ct-form-inner {
  padding: 48px 48px 40px; background: #fff; border: 1px solid var(--edge); border-radius: 2px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(10, 15, 31, .04), 0 40px 70px -52px rgba(10, 15, 31, .35);
}
html[data-rk-frame] :is(.ct-file-badge, .ct-stamp, .ct-form-head__ref) { display: none; }
html[data-rk-frame] .ct-form-head { display: block; margin: 0 0 32px; padding: 0; border: 0; }
html[data-rk-frame] .ct-form-head__title {
  display: block; font-family: var(--sans); font-size: clamp(24px, 2vw, 30px); font-weight: 500; line-height: 1.16;
  letter-spacing: -.025em; text-transform: none; color: var(--ink);
}

/* fields (Get in touch's .gt-fld / .gt-in) */
html[data-rk-frame] .ct-field-row { gap: 24px; }
html[data-rk-frame] .ct-field { gap: 8px; margin-bottom: 32px; }
html[data-rk-frame] .ct-label {
  display: block; font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.35;
  letter-spacing: -.012em; text-transform: none; color: var(--ink);
}
html[data-rk-frame] .ct-req { font-size: 1em; font-weight: 600; line-height: 1; color: var(--acc); }
html[data-rk-frame] :is(.ct-input, .ct-select, .ct-textarea) {
  min-height: 56px; padding: 14px 16px; border: 1.5px solid #c8c8d2; border-radius: 2px;
  background-color: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 18px; font-weight: 400; line-height: 1.5;
  box-shadow: none; outline: none;
  transition: border-color .2s, box-shadow .25s var(--out), background-color .2s;
}
html[data-rk-frame] :is(.ct-input, .ct-textarea)::placeholder { font-size: 18px; color: var(--ink3); opacity: 1; }
html[data-rk-frame] .ct-select {
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%233a3f52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 14px;
}
html[data-rk-frame] .ct-textarea { min-height: 160px; resize: vertical; }
html[data-rk-frame] :is(.ct-input, .ct-select, .ct-textarea):hover { border-color: var(--ink3); background-color: var(--paper); }
html[data-rk-frame] .ct-select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%233a3f52' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 14px;
}
/* an answer that does not fit its field: amber, as on Get in touch (focus below wins while typing) */
html[data-rk-frame] :is(.ct-input, .ct-textarea):invalid:not(:placeholder-shown) { border-color: #a75c00; }
html[data-rk-frame] .ct-input:valid:not(:placeholder-shown) { border-color: #c8c8d2; }
html[data-rk-frame] :is(.ct-input, .ct-select, .ct-textarea):focus {
  outline: none; border-color: var(--acc); background-color: #fff; box-shadow: 0 0 0 4px rgba(59, 99, 212, .16);
}

html[data-rk-frame] .ct-form-foot { gap: 16px 24px; margin-top: 8px; padding-top: 32px; border-top: 1px solid var(--edge); }
html[data-rk-frame] .ct-form-note { max-width: 36ch; font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--ink2); }

/* aside: two quiet white cards */
html[data-rk-frame] .ct-aside { top: 104px; }
html[data-rk-frame] .ct-aside__card { padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 30px 60px -48px rgba(10, 15, 31, .35); }
html[data-rk-frame] .ct-aside__card[style] { margin-top: 24px !important; }
html[data-rk-frame] .ct-aside__inner { padding: 36px 32px 32px; background: none; border: 0; box-shadow: none; }
html[data-rk-frame] .ct-aside__badge { margin-bottom: 16px; }
html[data-rk-frame] .ct-aside__title {
  margin: 0 0 12px; font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: clamp(24px, 2vw, 30px); line-height: 1.16; letter-spacing: -.025em; color: var(--ink);
}
html[data-rk-frame] .ct-aside__title[style] { margin-top: 0 !important; }
html[data-rk-frame] .ct-aside__desc { max-width: 40ch; margin-bottom: 24px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .ct-info-item { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
html[data-rk-frame] .ct-info-item:first-child { border-top: 1px solid var(--line); }
html[data-rk-frame] .ct-info-item:last-child { border-bottom: 0; padding-bottom: 0; }
html[data-rk-frame] .ct-info-key { padding: 0; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--ink); }
html[data-rk-frame] .ct-info-val { font-size: 18px; line-height: 1.5; color: var(--ink2); overflow-wrap: anywhere; }
html[data-rk-frame] .ct-info-val a {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--acc);
}
html[data-rk-frame] .ct-info-val a:hover { color: var(--acc2); }
/* the fit-call steps (inline styles): 18 px text, serif numerals as the accent */
html[data-rk-frame] .ct-aside ol[style] { gap: 16px !important; margin-top: 24px !important; }
html[data-rk-frame] .ct-aside ol[style] > li[style] {
  grid-template-columns: 36px minmax(0, 1fr) !important; gap: 12px !important; align-items: baseline;
  font-size: 18px !important; line-height: 1.55 !important; color: var(--ink2) !important;
}
html[data-rk-frame] .ct-aside ol[style] > li > span[style] {
  font-family: var(--serif) !important; font-style: italic; font-weight: 400 !important; font-size: 28px !important; line-height: 1; color: var(--acc) !important;
}

/* closing */
html[data-rk-frame] .ct-closing { padding-block: clamp(104px, 11vw, 160px); border-top: 1px solid var(--line); text-align: left; }
html[data-rk-frame] .ct-closing__headline { max-width: 16ch; margin-inline: 0; font-size: clamp(44px, 5.6vw, 92px); line-height: .98; letter-spacing: -.045em; }
html[data-rk-frame] .ct-closing__headline b { line-height: 1; }
html[data-rk-frame] .ct-closing__sub { max-width: 44ch; margin: 24px 0 0; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink2); }
html[data-rk-frame] .ct-closing div[style*="justify-content:center"] { justify-content: flex-start !important; gap: 16px !important; margin-top: 40px !important; }

/* =====================================================================
   3. THANKS PAGES (/contact-us/thanks/, /checkout/thanks/) AND 404
      (their inline <style> sits before the frame block, so this wins)
   ===================================================================== */
html[data-rk-frame] :is(.thanks-page, .nf-page) { display: block; min-height: 0; padding: 184px 0 128px; text-align: left; overflow: visible; }
html[data-rk-frame] :is(.thanks-inner, .nf-inner) { width: var(--container); max-width: none; margin-inline: auto; }
html[data-rk-frame] :is(.thanks-badge, .nf-badge) { margin: 0 0 24px; }
html[data-rk-frame] :is(.thanks-headline, .nf-headline) {
  max-width: 14ch; margin-bottom: 32px; font-weight: 500;
  font-size: clamp(52px, 6.4vw, 96px); line-height: 1; letter-spacing: -.048em;
}
html[data-rk-frame] :is(.thanks-body, .nf-body) { max-width: 44ch; margin-bottom: 40px; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink2); }
html[data-rk-frame] .thanks-meta {
  max-width: 62ch; margin-bottom: 40px; padding: 16px 0 0; border-top: 1px solid var(--line); border-bottom: 0;
  font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink2);
}
html[data-rk-frame] .thanks-steps { max-width: 62ch; margin: 0 0 40px; text-align: left; border-top: 1px solid var(--line); }
html[data-rk-frame] .thanks-step { gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .thanks-step:last-child { border-bottom: 1px solid var(--line); }
html[data-rk-frame] .thanks-step-num { min-width: 36px; font-family: var(--serif); font-style: italic; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: var(--acc); }
html[data-rk-frame] :is(.thanks-inner, .nf-inner) div[style*="justify-content:center"] { justify-content: flex-start !important; gap: 16px !important; }

/* 404: the requested path as a plain labelled line, the link lists as real lists */
html[data-rk-frame] .nf-path {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; max-width: 62ch; margin-bottom: 40px; padding: 16px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--ink2);
}
html[data-rk-frame] .nf-path b { margin: 0; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--ink); }
html[data-rk-frame] #nf-requested { font-family: var(--mono); font-size: 16px; color: var(--ink); word-break: break-all; }
html[data-rk-frame] .nf-actions { justify-content: flex-start; gap: 16px; margin-bottom: 80px; }
html[data-rk-frame] .nf-where { max-width: 820px; padding-top: 40px; border-top: 1px solid var(--line); }
html[data-rk-frame] .nf-where h2 { margin-bottom: 8px; font-family: var(--sans); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.016em; text-transform: none; color: var(--ink); }
html[data-rk-frame] .nf-where ul { justify-content: flex-start; gap: 0 28px; }
html[data-rk-frame] .nf-where a { font-size: 18px; }
html[data-rk-frame] .nf-where ul + h2 { margin-top: 40px; }

/* =====================================================================
   4. METHODOLOGY & QUALITY (hub + research lifecycle, quality control, ethics)
   ===================================================================== */
/* one left edge for every section (the old pages mixed 780 / 960 / 1060 px columns) */
html[data-rk-frame] :is(.mq-hero, .mq-cards-section, .mq-closing, .rl-header, .rl-section, .rl-closing, .qc-hero, .qc-section, .qc-closing, .eth-hero, .eth-section, .eth-closing) > .container { max-width: none; }

/* heroes */
html[data-rk-frame] :is(.mq-hero, .rl-header, .qc-hero, .eth-hero) { padding: 184px 0 clamp(88px, 9vw, 128px); }
html[data-rk-frame] :is(.mq-hero, .rl-header, .qc-hero, .eth-hero) .breadcrumbs { margin-bottom: 40px; }
html[data-rk-frame] :is(.mq-badge, .rl-badge, .qc-badge, .eth-badge) { margin: 0 0 24px; }
html[data-rk-frame] :is(.mq-title, .rl-title, .qc-hero__title, .eth-hero__title) {
  max-width: 18ch; font-weight: 500; font-size: clamp(44px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.043em; text-wrap: balance;
}
html[data-rk-frame] :is(.mq-lead, .rl-lead, .qc-lead, .eth-lead) { max-width: 52ch; margin-top: 32px; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink2); }
html[data-rk-frame] :is(.rl-lead, .qc-lead)[style] { margin-top: 16px !important; }
html[data-rk-frame] .qc-lead[style] { font-size: 18px !important; line-height: 1.6; color: var(--ink3) !important; }
html[data-rk-frame] :is(.rl-lead, .rl-body) em { font-family: var(--sans); font-style: normal; font-weight: 500; color: var(--ink); }
html[data-rk-frame] .eth-meta { gap: 4px; margin-top: 32px; font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--ink3); }

/* sections */
html[data-rk-frame] :is(.mq-cards-section, .rl-section, .qc-section, .eth-section) { padding-block: clamp(88px, 9vw, 128px); border-top: 1px solid var(--line); }
html[data-rk-frame] :is(.mq-cards-heading, .rl-section h2, .qc-section h2, .eth-section h2) {
  max-width: 22ch; margin-bottom: 0; font-weight: 500; font-size: clamp(34px, 3.1vw, 46px); line-height: 1.06; letter-spacing: -.035em; color: var(--ink);
}
html[data-rk-frame] .mq-cards-heading { margin-bottom: 56px; }
html[data-rk-frame] .rl-body { max-width: 62ch; margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .rl-body p + p { margin-top: 16px; }
html[data-rk-frame] :is(.qc-intro, .eth-intro) { max-width: 62ch; margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .eth-note { max-width: 62ch; margin-top: 24px; font-family: var(--sans); font-size: 16px; line-height: 1.55; letter-spacing: 0; color: var(--ink3); }

/* hub cards */
html[data-rk-frame] .mq-grid { gap: 24px; }
html[data-rk-frame] .mq-card { padding: 40px 36px 36px; }
html[data-rk-frame] .mq-card:hover { border-color: var(--line2); box-shadow: 0 1px 0 #fff inset, 0 50px 80px -46px rgba(59, 99, 212, .45); }
html[data-rk-frame] .mq-card__num { margin-bottom: 16px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 56px; line-height: .9; letter-spacing: -.02em; color: var(--acc); }
html[data-rk-frame] .mq-card__title { margin-bottom: 12px; font-weight: 500; font-size: clamp(24px, 2vw, 30px); line-height: 1.16; letter-spacing: -.025em; }
html[data-rk-frame] .mq-card__desc { margin-bottom: 24px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .mq-card__link { width: fit-content; }
html[data-rk-frame] .mq-card__link:hover { gap: 14px; }
html[data-rk-frame] .mq-card__link svg { width: 16px; height: 16px; }

/* research lifecycle: the six phases */
html[data-rk-frame] .rl-timeline { margin-top: 64px; }
html[data-rk-frame] .rl-timeline::before { left: 27px; width: 1px; background: var(--line2); }
html[data-rk-frame] .rl-phase { padding: 0 0 72px 96px; }
html[data-rk-frame] .rl-phase:last-child { padding-bottom: 0; }
html[data-rk-frame] .rl-phase__num {
  width: 56px; height: 56px; border: 1px solid var(--ink); border-radius: 2px; background: #fff;
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; letter-spacing: -.02em; color: var(--ink);
  box-shadow: 0 16px 30px -22px rgba(10, 15, 31, .45);
  transition: background .3s var(--out), color .3s var(--out);
}
html[data-rk-frame] .rl-phase:hover .rl-phase__num { background: var(--ink); color: #fff; }
html[data-rk-frame] .rl-phase__title { padding-top: 10px; font-weight: 500; font-size: clamp(24px, 2vw, 30px); line-height: 1.16; letter-spacing: -.025em; }
html[data-rk-frame] .rl-phase__tagline { max-width: 52ch; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 20px; line-height: 1.45; letter-spacing: -.012em; color: var(--ink3); }
html[data-rk-frame] .rl-phase__body { max-width: 62ch; margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .rl-phase__body p + p { margin-top: 16px; }
html[data-rk-frame] .rl-artifacts { max-width: 760px; margin-top: 32px; padding: 32px; border-left: 1px solid var(--line); }
html[data-rk-frame] .rl-artifacts__label { margin-bottom: 16px; font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
html[data-rk-frame] .rl-artifacts ul { gap: 12px; }
html[data-rk-frame] .rl-artifacts li { padding-left: 28px; font-size: 18px; line-height: 1.55; color: var(--ink2); }
html[data-rk-frame] .rl-artifacts li::before { left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 1px; background: var(--acc); opacity: 1; }
html[data-rk-frame] .rl-artifacts li strong { font-weight: 600; color: var(--ink); }

/* research lifecycle: governing principles */
html[data-rk-frame] .rl-principles { gap: 48px 64px; margin-top: 56px; }
html[data-rk-frame] .rl-principle { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--ink); transition: border-color .3s var(--out); }
html[data-rk-frame] .rl-principle:hover { border-top-color: var(--acc); }
html[data-rk-frame] .rl-principle__num { display: block; margin-bottom: 16px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 40px; line-height: .9; letter-spacing: -.02em; color: var(--acc); }
html[data-rk-frame] .rl-principle h4 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.016em; }
html[data-rk-frame] .rl-principle p { max-width: 52ch; margin-top: 8px; font-size: 18px; line-height: 1.6; color: var(--ink2); }

/* research lifecycle: the adaptation table */
html[data-rk-frame] .rl-table-wrap { margin-top: 40px; background: #fff; border: 1px solid var(--line); border-radius: 2px; }
html[data-rk-frame] .rl-table { min-width: 880px; font-size: 16px; line-height: 1.5; }
html[data-rk-frame] .rl-table th {
  padding: 16px; background: var(--paper2); border-bottom: 1px solid var(--line2);
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--ink);
}
html[data-rk-frame] .rl-table td { padding: 16px; border-bottom: 1px solid var(--line); color: var(--ink2); }
html[data-rk-frame] .rl-table tr:last-child td { border-bottom: 0; }
html[data-rk-frame] .rl-table td:first-child { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); }
html[data-rk-frame] .rl-table .depth-deep { font-weight: 600; color: var(--acc2); }
html[data-rk-frame] .rl-table .depth-light { color: var(--ink3); }

/* research lifecycle: typical research vs Rubikn */
html[data-rk-frame] .rl-comparisons { gap: 24px; margin-top: 56px; }
html[data-rk-frame] .rl-compare { background: #fff; border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 30px 60px -48px rgba(10, 15, 31, .35); }
html[data-rk-frame] .rl-compare__typical { padding: 32px; background: var(--paper2); }
html[data-rk-frame] .rl-compare__rubikn { padding: 32px; background: #fff; border-left: 2px solid var(--acc); }
html[data-rk-frame] .rl-compare__vs {
  width: 56px; background: var(--paper2); border-inline-start: 1px solid var(--line);
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink3);
}
html[data-rk-frame] .rl-compare__topic { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -.012em; text-transform: none; color: var(--ink); }
html[data-rk-frame] .rl-compare__label { margin-bottom: 12px; font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -.005em; text-transform: none; }
html[data-rk-frame] .rl-compare__typical .rl-compare__label { color: var(--ink3); }
html[data-rk-frame] .rl-compare__rubikn .rl-compare__label { color: var(--acc2); }
html[data-rk-frame] :is(.rl-compare__typical, .rl-compare__rubikn) p { font-size: 18px; line-height: 1.6; }
html[data-rk-frame] .rl-compare__typical p { color: var(--ink2); }
html[data-rk-frame] .rl-compare__rubikn p { color: var(--ink); }

/* quality control + ethics: principle cards */
html[data-rk-frame] :is(.qc-principles, .eth-principles) { gap: 24px; margin-top: 56px; }
html[data-rk-frame] :is(.qc-principle-card, .eth-principle) { gap: 12px; padding: 40px 36px 36px; }
html[data-rk-frame] :is(.qc-principle-card, .eth-principle):hover { border-color: var(--line2); }
html[data-rk-frame] :is(.qc-principle-card__label, .eth-principle__label) {
  font-family: var(--sans); font-size: clamp(24px, 2vw, 30px); font-weight: 500; line-height: 1.16; letter-spacing: -.025em; text-transform: none; color: var(--ink);
}
html[data-rk-frame] :is(.qc-principle-card, .eth-principle) p { font-size: 18px; line-height: 1.6; color: var(--ink2); }

/* numbered rows */
html[data-rk-frame] :is(.qc-rows, .eth-rows) { max-width: 900px; margin-top: 40px; }
html[data-rk-frame] :is(.qc-row, .eth-row) { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
html[data-rk-frame] :is(.qc-row, .eth-row):first-child { border-top: 1px solid var(--line); }
html[data-rk-frame] :is(.qc-row__num, .eth-row__num) { font-family: var(--sans); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--acc); }
html[data-rk-frame] :is(.qc-row__name, .eth-row__name) { font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); }
html[data-rk-frame] :is(.qc-row__sub, .eth-row__sub) { max-width: 62ch; margin-top: 4px; font-size: 18px; line-height: 1.6; color: var(--ink2); }

/* three-up cards */
html[data-rk-frame] :is(.qc-card-grid, .eth-card-grid) { gap: 24px; margin-top: 56px; }
html[data-rk-frame] :is(.qc-card, .eth-card, .qc-deliverable) { padding: 36px 32px 32px; }
html[data-rk-frame] :is(.qc-card, .eth-card, .qc-deliverable, .qc-tier) h4 {
  margin-bottom: 12px; font-family: var(--sans); font-style: normal; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.016em; color: var(--ink);
}
html[data-rk-frame] :is(.qc-card, .eth-card, .qc-deliverable, .qc-tier, .qc-confidence) p { font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .eth-scope-grid { gap: 16px; margin-top: 32px; }
html[data-rk-frame] .eth-scope-card { padding: 28px 28px 24px; }
html[data-rk-frame] .eth-scope-card:hover { border-color: var(--line2); }
html[data-rk-frame] .eth-scope-card h4 { font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; }
html[data-rk-frame] .eth-scope-card p { margin-top: 8px; font-size: 18px; line-height: 1.55; color: var(--ink2); }

/* evidence tiers and deliverables: two up, so 18 px text has room */
html[data-rk-frame] :is(.qc-tier-grid, .qc-deliverable-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
html[data-rk-frame] .qc-tier { gap: 8px; padding: 32px; border-top: 3px solid var(--acc); }
html[data-rk-frame] .qc-tier__label { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--ink3); }
html[data-rk-frame] .qc-tier h4 { margin-bottom: 4px; }
html[data-rk-frame] .qc-tier--t1 { border-top-color: var(--ink); }
html[data-rk-frame] .qc-tier--t2 { border-top-color: var(--acc); }
html[data-rk-frame] .qc-tier--t3 { border-top-color: var(--amber); }
html[data-rk-frame] .qc-tier--t4 { border-top-color: var(--rule); }

/* confidence tiers */
html[data-rk-frame] .qc-confidence-grid { gap: 24px; margin-top: 56px; }
html[data-rk-frame] .qc-confidence { padding: 32px; border-top: 3px solid var(--rule); }
html[data-rk-frame] .qc-confidence__label { margin-bottom: 12px; font-family: var(--sans); font-size: 22px; font-weight: 600; letter-spacing: -.016em; text-transform: none; color: var(--ink); }
html[data-rk-frame] .qc-confidence--high { border-top-color: var(--acc); }
html[data-rk-frame] .qc-confidence--medium { border-top-color: var(--amber); }
html[data-rk-frame] .qc-confidence--low { border-top-color: var(--ink3); }

/* callouts */
html[data-rk-frame] .qc-callout {
  max-width: 56ch; margin-top: 48px; padding: 0 0 0 20px; border-left: 2px solid var(--acc);
  font-family: var(--sans); font-style: normal; font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -.012em; color: var(--ink);
}
html[data-rk-frame] .eth-callout { max-width: 62ch; margin-top: 40px; padding: 32px; background: var(--hl); border: 0; border-radius: 2px; font-size: 18px; line-height: 1.6; color: var(--ink); }
html[data-rk-frame] .eth-callout strong { font-weight: 600; }

/* closings: left-aligned, the new close */
html[data-rk-frame] :is(.mq-closing, .rl-closing, .qc-closing, .eth-closing) { padding-block: clamp(104px, 11vw, 160px); border-top: 1px solid var(--line); text-align: left; }
html[data-rk-frame] :is(.mq-closing, .rl-closing, .qc-closing, .eth-closing) h2 {
  max-width: 18ch; margin-bottom: 0; font-weight: 500; font-size: clamp(38px, 4.3vw, 66px); line-height: 1.02; letter-spacing: -.04em; color: var(--ink);
}
html[data-rk-frame] :is(.mq-closing, .rl-closing, .qc-closing, .eth-closing) p { max-width: 44ch; margin: 24px 0 40px; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink2); }
html[data-rk-frame] :is(.rl-closing-cta, .qc-closing-cta, .eth-closing-cta) { margin-top: 0; }
html[data-rk-frame] .mq-closing .btn { margin-inline: 0; }
html[data-rk-frame] :is(.rl-closing-links, .qc-closing-links, .eth-closing-links) {
  justify-content: flex-start; align-items: center; gap: 8px 16px; margin-top: 32px;
  font-family: var(--sans); font-size: 18px; letter-spacing: 0; text-transform: none;
}

/* =====================================================================
   5. TRUST CENTER (privacy policy, terms, cookie policy)
      The quiet reading column of How I use your details: 18 px ink text
      in one 680 px column; on wide screens the three trust pages become
      the sticky index beside it.
   ===================================================================== */
html[data-rk-frame] .tc-hero { padding: 184px 0 0; overflow: visible; }
html[data-rk-frame] :is(.tc-hero, .tc-hero ~ section) > .container { max-width: 680px; }
html[data-rk-frame] .tc-hero .breadcrumbs { margin-bottom: 40px; }
html[data-rk-frame] .tc-hero .hero-headline { max-width: 14ch; font-size: clamp(44px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.043em; }
html[data-rk-frame] .tc-hero .hero-sub { max-width: none; margin-top: 24px; font-size: 21px; line-height: 1.5; letter-spacing: -.012em; color: var(--ink); }
html[data-rk-frame] .tc-meta { gap: 0; margin-top: 24px; font-family: var(--sans); font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--ink3); }
html[data-rk-frame] .tc-meta time { font-weight: 400; color: var(--ink3); }
html[data-rk-frame] .tc-meta__dot { display: none; }

/* the trust pages as text links (a row on phones and tablets) */
html[data-rk-frame] .tc-nav { gap: 0 24px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
html[data-rk-frame] .tc-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; text-transform: none; color: var(--ink3);
  transition: color .3s var(--out);
}
html[data-rk-frame] .tc-nav a:hover { color: var(--ink); border: 0; }
html[data-rk-frame] .tc-nav a[aria-current="page"] {
  color: var(--ink); background: none; border: 0;
  text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* the reading column */
html[data-rk-frame] .tc-hero + section { padding: 0 0 128px; }
html[data-rk-frame] .tc-body { max-width: 680px; margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--line); }
html[data-rk-frame] .tc-body h4 {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 24px;
  font-family: var(--sans); font-size: clamp(28px, 2.4vw, 34px); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; color: var(--ink);
}
html[data-rk-frame] .tc-body h4 > span { color: var(--acc); font-variant-numeric: tabular-nums; }
html[data-rk-frame] .tc-body h5 { margin: 40px 0 12px; font-family: var(--sans); font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; text-transform: none; color: var(--ink); }
html[data-rk-frame] .tc-body p { max-width: none; margin-bottom: 16px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .tc-body ul { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
html[data-rk-frame] .tc-body ul > li { position: relative; margin: 0; padding-inline-start: 28px; font-size: 18px; line-height: 1.6; color: var(--ink2); }
html[data-rk-frame] .tc-body ul > li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .72em; width: 6px; height: 6px; border-radius: 1px; background: var(--ink3); }
html[data-rk-frame] .tc-body :is(strong, li strong) { font-weight: 600; color: var(--ink); }
html[data-rk-frame] .tc-body a {
  padding-block: 11px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--acc);
  transition: color .3s var(--out);
}
html[data-rk-frame] .tc-body a:hover { color: var(--acc2); text-decoration-color: var(--acc); }
html[data-rk-frame] .tc-body code { padding: 1px 6px; background: var(--paper2); border: 1px solid var(--line); border-radius: 2px; font-size: 16px; color: var(--ink); }
html[data-rk-frame] .tc-body hr { margin: 64px 0; border: 0; border-top: 1px solid var(--line); }
/* terms: "Service Terms" starts a second part: Geist, and the rule above it drawn in ink */
html[data-rk-frame] .tc-body hr:has(+ .tc-section-title) { border-top: 2px solid var(--ink); }
html[data-rk-frame] .tc-body .tc-section-title {
  margin: 0 0 24px; padding: 0; border: 0;
  font-family: var(--sans); font-style: normal; font-weight: 500; font-size: clamp(34px, 3.1vw, 46px); line-height: 1.06; letter-spacing: -.035em; color: var(--ink);
}
/* cookie table */
html[data-rk-frame] .tc-body div[style*="overflow-x"] { margin: 24px 0 32px; background: #fff; border: 1px solid var(--line); border-radius: 2px; }
html[data-rk-frame] .tc-table { display: table; width: 100%; min-width: 820px; margin: 0; overflow: visible; table-layout: auto; font-size: 16px; }
html[data-rk-frame] .tc-table thead { display: table-header-group; width: auto; table-layout: auto; }
html[data-rk-frame] .tc-table tbody { display: table-row-group; width: auto; table-layout: auto; }
html[data-rk-frame] .tc-table th {
  padding: 12px 14px; background: var(--paper2); border-bottom: 1px solid var(--line2);
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; text-transform: none; color: var(--ink);
}
html[data-rk-frame] .tc-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink2); }
html[data-rk-frame] .tc-table tr:last-child td { border-bottom: 0; }
html[data-rk-frame] .tc-table tr:hover td { background: none; }
html[data-rk-frame] .tc-table td code { padding: 1px 5px; font-size: 16px; white-space: nowrap; }
/* the note under the table was 13.5 px grey (inline style) */
html[data-rk-frame] .tc-body p[style*="font-size"] { font-size: 16px !important; line-height: 1.55; color: var(--ink2) !important; margin-top: 0 !important; }
html[data-rk-frame] .tc-body p[style*="font-size"] em { font-style: normal; font-weight: 500; color: var(--ink); }
/* closing note: normal body text, set apart (the new .rp-resp__card) */
html[data-rk-frame] .tc-closing { margin-top: 80px; padding: 40px; background: var(--paper2); border: 1px solid var(--line); border-radius: 2px; }
html[data-rk-frame] .tc-closing p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink); }

/* wide screens: index | column, the How I use your details geometry (232 + 96 + 680) */
@media (min-width: 1100px) {
  html[data-rk-frame] main:has(> .tc-hero) {
    display: grid; align-items: start; padding-top: 184px;
    grid-template-columns: minmax(0, 1fr) 232px 96px minmax(0, 680px) minmax(0, 1fr);
  }
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero,
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero > .container { display: contents; }
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero > .container > * { grid-column: 4; }
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero > .container > .breadcrumbs { grid-row: 1; }
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero > .container > .hero-headline { grid-row: 2; }
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero > .container > .hero-sub { grid-row: 3; }
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero > .container > .tc-meta { grid-row: 4; justify-self: start; }
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero ~ section { grid-column: 4; grid-row: 5; min-width: 0; }
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero ~ section > .container { width: 100%; max-width: none; margin: 0; }
  /* the index: sticky beside the column, the current page in ink with a cobalt bar */
  html[data-rk-frame] main:has(> .tc-hero) > .tc-hero > .container > .tc-nav {
    grid-column: 2; grid-row: 5; align-self: start; position: sticky; top: 112px;
    flex-direction: column; flex-wrap: nowrap; gap: 4px; margin-top: 128px; padding: 0; border: 0;
    border-inline-start: 1px solid var(--line2);
  }
  html[data-rk-frame] main:has(> .tc-hero) .tc-nav a { display: flex; padding: 8px 0 8px 20px; }
  html[data-rk-frame] main:has(> .tc-hero) .tc-nav a::before {
    content: ""; position: absolute; inset-inline-start: -1px; top: 10px; bottom: 10px; width: 2px;
    background: var(--acc); transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--out);
  }
  html[data-rk-frame] main:has(> .tc-hero) .tc-nav a[aria-current="page"] { text-decoration: none; }
  html[data-rk-frame] main:has(> .tc-hero) .tc-nav a[aria-current="page"]::before { transform: scaleY(1); }
  /* the cookie table may use the free space to the right of the column before it has to scroll */
  html[data-rk-frame] main:has(> .tc-hero) .tc-body div[style*="overflow-x"] { width: calc(100% + clamp(0px, (100vw - 1008px) / 2 - 72px, 280px)); }
}

/* =====================================================================
   6. BETWEEN PHONE AND DESKTOP
   ===================================================================== */
@media (max-width: 1100px) {
  html[data-rk-frame] .pillar-card { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  html[data-rk-frame] .pillar-card__body { grid-column: 2; }
}
@media (max-width: 960px) {
  html[data-rk-frame] .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html[data-rk-frame] .ct-aside { position: static; }
}
@media (max-width: 900px) {
  html[data-rk-frame] .founder-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  html[data-rk-frame] .founder-photo { width: 200px; height: 200px; }
  html[data-rk-frame] .method-grid,
  html[data-rk-frame] .principles-grid,
  html[data-rk-frame] .signals-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-rk-frame] .rl-principles { grid-template-columns: minmax(0, 1fr); }
  html[data-rk-frame] .rl-compare { grid-template-columns: minmax(0, 1fr); }
  html[data-rk-frame] .rl-compare__vs { width: auto; height: auto; min-height: 40px; border-inline-start: 0; border-block: 1px solid var(--line); }
  html[data-rk-frame] .rl-compare__rubikn { border-left: 0; border-top: 2px solid var(--acc); }
  html[data-rk-frame] :is(.qc-principles, .qc-card-grid, .qc-confidence-grid, .eth-principles, .eth-card-grid) { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   7. PHONE (max-width: 760px), the new pages' phone sizes
   ===================================================================== */
@media (max-width: 760px) {
  html[data-rk-frame] main::before { height: 520px; }

  /* heroes clear the 66 px phone bar */
  html[data-rk-frame] :is(.about-hero, .ct-hero, .mq-hero, .rl-header, .qc-hero, .eth-hero, .tc-hero) { padding-top: 112px; }
  html[data-rk-frame] :is(.thanks-page, .nf-page) { padding: 112px 0 88px; }
  html[data-rk-frame] :is(.about-hero .hero-headline, .ct-hero .hero-headline, .thanks-headline, .nf-headline) { font-size: 42px; line-height: 1.04; letter-spacing: -.045em; }
  html[data-rk-frame] :is(.mq-title, .rl-title, .qc-hero__title, .eth-hero__title, .tc-hero .hero-headline) { font-size: 40px; line-height: 1.06; }
  html[data-rk-frame] :is(.mq-hero, .rl-header, .qc-hero, .eth-hero, .tc-hero, .ct-hero) .breadcrumbs { margin-bottom: 24px; }
  html[data-rk-frame] :is(.about-hero .hero-sub, .mq-lead, .rl-lead, .qc-lead, .eth-lead, .thanks-body, .nf-body, .ct-closing__sub) { font-size: 18.5px; }
  html[data-rk-frame] .about-hero { padding-bottom: 72px; }

  /* sections */
  html[data-rk-frame] .about-hero ~ section[style*="padding-block"] { padding-block: 72px !important; }
  html[data-rk-frame] .about-hero ~ section:not(.closing) h2[style] { font-size: 34px !important; line-height: 1.06; }
  html[data-rk-frame] :is(.mq-cards-section, .rl-section, .qc-section, .eth-section) { padding-block: 72px; }
  html[data-rk-frame] :is(.mq-cards-heading, .rl-section h2, .qc-section h2, .eth-section h2) { font-size: 32px; }
  html[data-rk-frame] :is(.mq-closing, .rl-closing, .qc-closing, .eth-closing, .ct-closing) { padding-block: 88px; }
  html[data-rk-frame] :is(.mq-closing, .rl-closing, .qc-closing, .eth-closing) h2 { font-size: 36px; }
  html[data-rk-frame] .ct-closing__headline { font-size: 42px; }
  html[data-rk-frame] .about-hero ~ .closing { padding-block: 88px; }
  html[data-rk-frame] .method-section { padding-block: 88px; }

  /* about */
  html[data-rk-frame] .philosophy-grid__lead { font-size: 22px; }
  html[data-rk-frame] .pillar-card { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  html[data-rk-frame] .pillar-card__body { grid-column: 1; margin-top: 4px; }
  html[data-rk-frame] .method-step { padding: 28px 22px 26px; }
  html[data-rk-frame] .principle { gap: 16px; }
  html[data-rk-frame] .principle__letter { width: 32px; font-size: 44px; }
  html[data-rk-frame] .signal-card { padding: 28px 22px 26px; }

  /* buttons take the full width on a phone, as the new pages' .rk-btn */
  html[data-rk-frame] main .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; }

  /* contact */
  html[data-rk-frame] .ct-hero + section { padding: 16px 0 88px; }
  html[data-rk-frame] .ct-field-row { row-gap: 0; }
  html[data-rk-frame] .ct-form-inner { margin-inline: -6px; padding: 26px 18px 24px; }
  html[data-rk-frame] .ct-field { margin-bottom: 26px; }
  html[data-rk-frame] .ct-label { font-size: 18px; }
  html[data-rk-frame] .ct-form-foot { align-items: stretch; }
  html[data-rk-frame] .ct-form-foot .btn { justify-content: space-between; width: 100%; }
  html[data-rk-frame] .ct-aside__inner { padding: 26px 20px 24px; }
  html[data-rk-frame] .ct-info-item { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  html[data-rk-frame] .ct-trust { gap: 4px 12px; }

  /* thanks + 404 */
  html[data-rk-frame] .thanks-step-num { min-width: 28px; font-size: 24px; }
  html[data-rk-frame] :is(.thanks-inner, .nf-inner) :is(.btn) { width: 100%; justify-content: space-between; }
  html[data-rk-frame] .nf-actions { margin-bottom: 56px; }
  html[data-rk-frame] .nf-where h2 { font-size: 20px; }

  /* methodology */
  html[data-rk-frame] .mq-card { padding: 28px 22px 26px; }
  html[data-rk-frame] .mq-card__num { font-size: 44px; }
  /* phases: the marker sits above each phase, so the text gets the full width */
  html[data-rk-frame] .rl-timeline { margin-top: 48px; }
  html[data-rk-frame] .rl-timeline::before { display: none; }
  html[data-rk-frame] .rl-phase { padding: 0 0 56px; }
  html[data-rk-frame] .rl-phase__num { position: static; width: 48px; height: 48px; margin-bottom: 16px; font-size: 26px; }
  html[data-rk-frame] .rl-phase__title { padding-top: 0; }
  html[data-rk-frame] .rl-phase__tagline { font-size: 18px; }
  html[data-rk-frame] .rl-artifacts { padding: 24px 20px; }
  html[data-rk-frame] :is(.qc-principle-card, .eth-principle, .qc-card, .eth-card, .qc-deliverable, .qc-tier, .qc-confidence) { padding: 28px 22px 26px; }
  html[data-rk-frame] :is(.qc-tier-grid, .qc-deliverable-grid, .eth-scope-grid) { grid-template-columns: minmax(0, 1fr); }
  html[data-rk-frame] :is(.qc-row, .eth-row) { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  html[data-rk-frame] :is(.qc-row__name, .eth-row__name) { font-size: 18px; }
  html[data-rk-frame] .rl-compare__typical, html[data-rk-frame] .rl-compare__rubikn { padding: 24px 20px; }
  html[data-rk-frame] :is(.eth-callout, .tc-closing) { padding: 24px 20px; }
  html[data-rk-frame] :is(.mq-closing, .rl-closing, .qc-closing, .eth-closing) .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; }

  /* trust */
  html[data-rk-frame] .tc-hero .hero-sub { font-size: 19px; }
  html[data-rk-frame] .tc-body { margin-top: 48px; padding-top: 48px; }
  html[data-rk-frame] .tc-body h4 { font-size: 26px; margin-bottom: 16px; }
  html[data-rk-frame] .tc-body hr { margin: 48px 0; }
  html[data-rk-frame] .tc-body .tc-section-title { font-size: 32px; }
  html[data-rk-frame] .tc-hero + section { padding-bottom: 88px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-rk-frame] :is(.mq-cards-label, .rl-section-label, .qc-label, .eth-label, .ct-closing__eyebrow, .ct-aside__badge)::before { animation: none; }
  html[data-rk-frame] :is(.founder-link, .mq-card__link, .rl-closing-links a, .qc-closing-links a, .eth-closing-links a, .nf-where a, .tc-nav a, .tc-nav a::before, .rl-phase__num, .rl-principle) { transition: none; }
}

/* =====================================================================
   8. DARK MODE (html.dark, set before first paint by rubikn-theme.js)
      Every rule sits under html[data-rk-frame].dark, so the light pages
      are untouched. Colours come only from the shared palette in
      rubikn-brand.css (--rk-d-*) and the frame tokens that
      rubikn-frame.css / rubikn-legacy.css already re-point in dark.
      The white cards and sheets become raised dark surfaces (one step
      up from the page; a second step inside a raised band), the ink
      panel keeps its dark voice as a raised band with hairlines, the
      strong ink rules become the strong line colour, and the form
      fields take the raised-2 field surface with a 3:1 border.
      These rules also out-rank the old html.dark rules in about.css,
      contact.css, the methodology and trust-center stylesheets and the
      inline <style> of the thanks and 404 pages (all lower specificity).
   ===================================================================== */

/* the hero canvas: the same 88 px grid in light lines, the cobalt glow at about half strength */
html[data-rk-frame].dark main::before {
  background-image:
    radial-gradient(50% 60% at 70% 0%, rgba(66, 112, 218, .12), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
}

/* white cards -> raised dark cards (their 1px var(--line) border already reads as a hairline in dark) */
html[data-rk-frame].dark :is(.signal-card, .mq-card, .qc-principle-card, .eth-principle, .qc-card, .eth-card, .qc-deliverable, .eth-scope-card, .qc-tier, .qc-confidence, .rl-artifacts, .rl-compare, .ct-aside__card),
html[data-rk-frame].dark .signal-card:hover {
  background: var(--rk-d-raised);
  box-shadow: 0 30px 60px -44px rgba(0, 0, 0, .85);
}
html[data-rk-frame].dark .mq-card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 50px 80px -46px rgba(66, 112, 218, .28);
}
/* strong ink rules -> the strong line colour (a full-strength text-colour rule would glare) */
html[data-rk-frame].dark :is(.principle, .rl-principle) { border-top-color: var(--rk-d-line-2); }
html[data-rk-frame].dark .rl-principle:hover { border-top-color: var(--acc); }
html[data-rk-frame].dark .tc-body hr:has(+ .tc-section-title) { border-top-color: var(--rk-d-line-2); }

/* ---------- about us ---------- */
html[data-rk-frame].dark .founder-photo {
  border-color: var(--rk-d-line-2);
  box-shadow: 0 0 0 6px var(--rk-d-bg), 0 0 0 7px var(--rk-d-line), 0 40px 60px -40px rgba(0, 0, 0, .85);
}
/* the navy "How we work" chapter: stays dark, as a raised band with hairlines; its cards one step up */
html[data-rk-frame].dark .method-section {
  background: var(--rk-d-raised);
  box-shadow: inset 0 1px 0 var(--rk-d-line), inset 0 -1px 0 var(--rk-d-line);
}
html[data-rk-frame].dark .method-step { background: var(--rk-d-raised-2); border-color: rgba(255, 255, 255, .1); }
html[data-rk-frame].dark .method-step__num { color: var(--rk-d-accent); }
html[data-rk-frame].dark .method-step__body { color: var(--rk-d-text-2); }
html[data-rk-frame].dark .method-step__body a[style] { text-decoration-color: var(--rk-d-accent); }
html[data-rk-frame].dark .method-step__body a[style]:hover { color: var(--rk-d-accent) !important; }
html[data-rk-frame].dark .method-section .eyebrow::before { background: var(--rk-d-accent); }
html[data-rk-frame].dark .method-section :focus-visible { outline-color: var(--rk-d-accent); }

/* ---------- contact us: the form sheet, its fields, the aside ---------- */
html[data-rk-frame].dark .ct-trust__sep { opacity: 1; }   /* --rk-d-text-3 at full strength: 7.9:1 (at .5 it was 2.8:1) */
html[data-rk-frame].dark .ct-form-inner {
  background: var(--rk-d-raised); border-color: var(--rk-d-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .3), 0 40px 70px -52px rgba(0, 0, 0, .85);
}
/* fields: the raised-2 field surface, a 3:1 border (--rk-d-line-2 on the sheet: 3.3:1).
   Same cascade as light: valid / invalid out-rank hover and focus. */
html[data-rk-frame].dark :is(.ct-input, .ct-select, .ct-textarea) {
  background-color: var(--rk-d-raised-2); border-color: var(--rk-d-line-2); color: var(--rk-d-text);
}
html[data-rk-frame].dark :is(.ct-input, .ct-select, .ct-textarea):hover { border-color: var(--rk-d-text-3); background-color: var(--rk-d-raised-2); }
html[data-rk-frame].dark :is(.ct-input, .ct-textarea):invalid:not(:placeholder-shown) { border-color: var(--rk-d-warn); }
html[data-rk-frame].dark .ct-input:valid:not(:placeholder-shown) { border-color: var(--rk-d-line-2); }
html[data-rk-frame].dark :is(.ct-input, .ct-select, .ct-textarea):focus {
  border-color: var(--rk-d-accent); background-color: var(--rk-d-raised-2); box-shadow: 0 0 0 4px rgba(141, 179, 255, .2);
}
html[data-rk-frame].dark :is(.ct-input, .ct-textarea)::placeholder { color: var(--rk-d-text-3); }
/* the select chevron in the secondary text colour (#b8bec7) */
html[data-rk-frame].dark .ct-select,
html[data-rk-frame].dark .ct-select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23b8bec7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-rk-frame].dark .ct-select option { background-color: var(--rk-d-raised-2); color: var(--rk-d-text); }
/* browser autofill keeps the dark field (no pale autofill block) */
html[data-rk-frame].dark .ct-input:-webkit-autofill {
  -webkit-text-fill-color: var(--rk-d-text); caret-color: var(--rk-d-text);
  box-shadow: inset 0 0 0 100px var(--hl);
}
html[data-rk-frame].dark .ct-input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px var(--hl), 0 0 0 4px rgba(141, 179, 255, .2); }

/* ---------- methodology: phase markers, tables, comparisons ---------- */
/* the timeline sits in a raised band (inline var(--paper-deeper)): its markers and artifact cards go one step up */
html[data-rk-frame].dark .rl-phase__num {
  background: var(--rk-d-raised-2); border-color: var(--rk-d-line-2); color: var(--rk-d-text);
  box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .85);
}
html[data-rk-frame].dark .rl-phase:hover .rl-phase__num { background: #f8f8fa; border-color: #f8f8fa; color: #0a0f1f; }   /* inverts, as the ink fill does in light */
html[data-rk-frame].dark .rl-artifacts { background: var(--rk-d-raised-2); }
/* the adaptation table (also in a raised band) and the cookie table: a hairlined sheet, raised-2 header row */
html[data-rk-frame].dark :is(.rl-table-wrap, .tc-body div[style*="overflow-x"]) { background: var(--rk-d-raised); border-color: var(--rk-d-line); }
html[data-rk-frame].dark :is(.rl-table, .tc-table) th { background: var(--rk-d-raised-2); }
html[data-rk-frame].dark .tc-table td code { background: var(--rk-d-raised-2); }
/* typical research vs Rubikn: typical on the card surface, Rubikn one step up with its cobalt rule */
html[data-rk-frame].dark .rl-compare__rubikn { background: var(--rk-d-raised-2); }
/* quality-control tiers and confidence: the colour-coded top rules in the dark palette */
html[data-rk-frame].dark .qc-tier--t1 { border-top-color: var(--rk-d-text); }
html[data-rk-frame].dark :is(.qc-tier--t2, .qc-confidence--high) { border-top-color: var(--rk-d-accent); }
html[data-rk-frame].dark :is(.qc-tier--t3, .qc-confidence--medium) { border-top-color: var(--rk-d-warn); }
html[data-rk-frame].dark .qc-tier--t4 { border-top-color: var(--rk-d-line-2); }
html[data-rk-frame].dark .qc-confidence--low { border-top-color: var(--rk-d-text-3); }