/* ═══════════════════════════════════════════════════════════════════════════
   RISKORA SHELL — one vocabulary for every page.

   WHAT THIS IS. The homepage was rebuilt around a small set of decisions:
   three radii that mean different things, one sans and one mono, a flat
   header on the page's own frame, labels made of a rule and a word rather
   than a capsule, and red reserved for three jobs. Every other page was
   still running an older system. Measured across the site before this file:

     wordmark      neon on /, /mirror and /learn, flat on /score,
                   absent on /privacy, /terms, /refund and /compliance
     display face  Inter Tight on /, Chakra Petch on /mirror and the legal
                   pages, Plus Jakarta Sans on /learn and /score
     radius        0/7/14 on /, 3px everywhere from css/riskora-v4.css,
                   10 to 16px on /learn, 14px on /mirror
     light paper   #F4F6F9 on /, #fbfaf8 from v4, #f9fafb on /learn
     the header    framed and hairlined on /, full bleed on /learn and
                   /score, none at all on the four legal pages
     theme         every page respects the toggle except the legal four,
                   which never load js/riskora-theme.js and are dark only

   Six different answers to the same six questions is what makes a site feel
   like several sites. This file gives one answer to each, and it is loaded
   LAST on every page so it wins on order rather than on !important.

   IT SUPERSEDES css/riskora-v4.css AND css/mirror-v4.css where they
   disagree. Those were a coherence pass of their own, and a good one: they
   are why every page already shares a palette and why Mirror's report stopped
   failing contrast. They standardised on a 3px radius and warm #fbfaf8
   paper, both of which the homepage has since moved away from. Their
   measured ink values are kept; only the shape and the paper change. They
   are left in place rather than deleted because their comments carry the
   reasoning for colours that are still correct.

   ADDITIVE AND CSS ONLY on the pages that already have a header. Markup
   changes are limited to the four legal pages, which had no header to
   restyle, and to adding two <link> tags per page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────── 1 · the vocabulary */
:root{
  /* Three radii, each meaning something. Anything outside this set is a
     decision that has to be argued for.
       0    a rule, a column, a table, the header
       7px  something you press
       14px something you read inside of                                  */
  --rk-r-flat:0;
  --rk-r-ctl:7px;
  --rk-r-box:14px;

  /* The frame. The header aligns its contents to the same measure as the
     page body, so the wordmark sits directly above the first word of the
     page rather than 20px inside a floating edge. 1180 is the homepage
     grid; pages built on .wrap or .legal-wrap narrow it below. */
  --rk-frame:1180px;
  --rk-frame-pad:20px;

  --rk-sans:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rk-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Lines. The hairline is the single most used mark in this system now
     that the capsule is gone, so it is a token rather than a literal. */
  --rk-line:rgba(255,255,255,.075);
  --rk-line-2:rgba(255,255,255,.14);

  /* Ink. Matches the homepage scale (css/riskora-glass.css), which is the
     one that has been measured against painted pixels in both themes. */
  --rk-ink:#FAFBFC;
  --rk-ink-2:#A8B1C0;
  --rk-ink-3:#A2ABB9;
}
html.light{
  --rk-line:rgba(10,14,22,.1);
  --rk-line-2:rgba(10,14,22,.18);
  --rk-ink:#0B0E14;
  --rk-ink-2:#424B59;
  --rk-ink-3:#5A6372;
}
/* ONE FRAME, EVERYWHERE. An earlier version narrowed the header to each
   page's own reading measure so the wordmark sat above the first word.
   Measured at 1280 that put it at x=50 on the home page, x=70 on /pilot
   and x=280 on the seven pages built on a 760px column: the first thing
   a reader sees moved halfway across the screen between one page and the
   next. A header is site chrome and does not belong to the column under
   it, so it keeps the home page's frame on every page and the mark lands
   in the same place every time. */
:root{ --rk-frame:1180px; }

/* ──────────────────────────────────────────────────────────── 2 · the type */
/* One sans and one mono. Chakra Petch and Plus Jakarta Sans both go: three
   sans faces across six pages is not a system, and Chakra Petch's squared
   terminals were doing the same job as the Ethnocentric wordmark, twice. */
body{
  font-family:var(--rk-sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.hero h1,article h2,article h3,.legal-body h2,.legal-body h3{
  font-family:var(--rk-sans);
  font-weight:600;
  letter-spacing:-.03em;
  text-wrap:balance;
}
h1,.hero h1{ letter-spacing:-.042em; line-height:1.03; }

/* Machine text keeps the mono it already had. Listed rather than inherited
   because these classes live in five different stylesheets. */
.crumb,.byline,.ct,.brand,.eff,.header-right a,footer a,.disclaimer,
.hub-list .hk,.privacy-line{ font-family:var(--rk-mono); }

/* ────────────────────────────────────────────────────────── 3 · the header */
/* Flat, full bleed, one hairline, contents on the page's own frame. The
   floating inset capsule is what every generated page has at the top; it
   was removed from the homepage and it goes from everywhere else too. */
/* `body > header` and not bare `header`: /privacy wraps its title block in
   a <header class="legal-header">, and styling every header element turned
   the title, the reference number and the effective date into one flex row
   inside a box. A page banner is the only header this rule means. */
body > header,
.legal-shell__head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  /* No extra gutter on top of the frame: the home page pads straight to
     the frame edge, and adding --rk-frame-pad here put the wordmark 20px
     further in than it sits there. */
  padding:9px max(16px, calc((100% - var(--rk-frame)) / 2));
  min-height:57px;
  border:0; border-bottom:1px solid var(--rk-line);
  border-radius:0; box-shadow:none;
  background:rgba(7,8,12,.74);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
}
/* .94, not .82. The header is translucent with a backdrop blur, so
   whatever scrolls behind it tints it: measured on /mirror, the dark
   WebGL panel passing underneath took the light-theme ground to
   rgb(209,209,211) and the red of the wordmark with it, to 3.58. At .94
   the darkest thing on the site can no longer drag it below rgb(237).
   The dark theme has the opposite exposure and measured clean, so it is
   left alone. */
html.light body > header,
html.light .legal-shell__head{ background:rgba(252,252,253,.94); }

/* ── THE WORDMARK IS ONE OBJECT ──────────────────────────────────────
   MEASURED, and it was not. The first version of this file took the
   glow off and left every page's own size and face in place, so the
   mark rendered differently on all of them:

     /                 Ethnocentric   24px    1.32px   161px wide
     /score /learn     Ethnocentric Rg 18.4px 1.01px   124px wide
     /mirror           Inter Tight     16px   0.88px    69px wide

   Mirror's was the worst and it was mine: deleting that page's inline
   <style> took its @font-face stack with it, so the brand mark was
   setting in the body sans at two thirds the size.

   The home page is the reference, so its values are stated here once
   and nothing else is allowed to set them. 'Ethnocentric Rg' leads the
   stack because that is the name the shipped /fonts/ethnocentric.woff
   declares; the home page led with 'Ethnocentric', which resolves only
   on a machine that happens to have it installed and silently falls to
   Chakra Petch everywhere else. */
.logo,.legal-shell__head .logo{
  font-family:'Ethnocentric Rg','Ethnocentric','Chakra Petch',system-ui,sans-serif !important;
  font-weight:400 !important;
  font-size:24px !important;
  letter-spacing:.055em !important;
  line-height:1.1;
  color:#fff;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}
.brand{ -webkit-text-stroke:0 !important; text-shadow:none !important; }
html.light .logo,html.light .legal-shell__head .logo{ color:#0B0E14; }
.logo span,.brand span{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:currentColor !important;
  color:#FF3B38 !important; filter:none !important;
}
html.light .logo span,html.light .brand span{ color:#D01A17 !important; }
@media (max-width:620px){
  .logo,.legal-shell__head .logo{ font-size:19px !important; letter-spacing:.045em !important; }
}

/* Nav links mark themselves with a rule under the word, not a capsule. */
.header-right{ display:flex; align-items:center; gap:7px; }
/* 12px JetBrains Mono, which is the home page's nav. It was 16px on
   /mirror and 13.44px on the seven -learn- pages. */
.header-right a,body > header nav a{
  font-family:var(--rk-mono) !important;
  font-size:12px !important; letter-spacing:.06em;
}
.header-right a{
  border-radius:0; padding:8px 10px; color:var(--rk-ink-2);
  text-decoration:none;
  box-shadow:inset 0 -1px 0 transparent;
  transition:color .18s ease, box-shadow .18s ease;
}
.header-right a:hover{
  color:var(--rk-ink); box-shadow:inset 0 -1px 0 currentColor;
}

/* The theme control is a square. js/riskora-theme.js draws the mark itself
   now, so the operating system's emoji is gone from every page at once. */
.theme-toggle{
  width:34px; height:34px; min-height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rk-line-2); border-radius:var(--rk-r-ctl);
  background:none; color:var(--rk-ink); cursor:pointer; line-height:0;
}
.theme-toggle:hover{ border-color:var(--rk-ink); }
@media (max-width:620px){
  .theme-toggle{ min-height:44px; min-width:44px; width:44px; height:44px; }
}

/* ───────────────────────────────────────────────────────── 4 · the buttons */
/* Rectangles, sentence case, no gradient and no halo. v4 settled these on
   flat #D50000 after finding a 135deg gradient on Mirror; the colour was
   right and stays. The shape moves from 3px to 7px so a control reads as a
   control against the 0 of a rule and the 14 of a panel. */
.btn,.btn-primary,.btn-outline,.btn-submit,.btn-dashboard,
button,input,select,textarea{ border-radius:var(--rk-r-ctl); }
.btn,.btn-primary,a.btn-primary,.btn-submit{
  font-family:var(--rk-sans);
  font-weight:600; letter-spacing:-.008em; text-transform:none;
  background-image:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 1px 2px rgba(0,0,0,.4);
}
/* The measured gradient from the homepage: white on it reads 4.62 at the
   top stop, 5.47 in the middle and 6.38 at the foot. Do not brighten the
   top stop and do not add brightness() on hover, which took it to 4.45. */
/* .btn.btn-primary and a.btn.btn-primary are here because css/mirror-v4.css
   matches those exact selectors to pin a flat #D50000, and two classes
   outrank one however late this file loads. */
.btn,.btn-primary,a.btn-primary,.btn-submit,
.btn.btn-primary,a.btn.btn-primary{
  background:linear-gradient(180deg,#E02B26 0%,#D01A17 52%,#BE1310 100%);
  color:#fff;
  /* The radius is repeated on the two-class selector for the same
     reason the background is: css/mirror-v4.css section 3 pins
     `.btn.btn-primary { border-radius: 3px }`, and the single-class
     rule above cannot reach it however late this file loads. Caught by
     the WebKit pass, which asserts the computed radius; the Chromium
     sweep was not asking. */
  border-radius:var(--rk-r-ctl);
}
.btn:hover,.btn-primary:hover,a.btn-primary:hover,.btn-submit:hover,
.btn.btn-primary:hover,a.btn.btn-primary:hover{
  background:linear-gradient(180deg,#E02B26 0%,#D01A17 52%,#BE1310 100%);
  color:#fff; transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 4px 14px -4px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn-primary:hover,.btn-submit:hover{ transform:none; }


}
/* The secondary action is an outline, never a second red. */
.btn-outline,.btn-ghost,.btn.secondary{
  background:none; background-image:none;
  border:1px solid var(--rk-line-2); color:var(--rk-ink);
  box-shadow:none;
}
.btn-outline:hover,.btn-ghost:hover,.btn.secondary:hover{
  background:rgba(255,255,255,.06); border-color:var(--rk-ink); color:var(--rk-ink);
}
html.light .btn-outline:hover,html.light .btn-ghost:hover{ background:rgba(10,14,22,.05); }

/* ────────────────────────────────────────────────────────── 5 · the labels */
/* A label is a rule and a word. Every eyebrow on this site was a capsule,
   several of them with a coloured dot that reported no status. */
.ct,.eff,.sample-tag,.ins-tag,.hub-group > .gk,.sec-k{
  display:inline-flex; align-items:center; gap:11px;
  padding:0 !important; border:0 !important; background:none !important;
  border-radius:0 !important; box-shadow:none !important;
  font-family:var(--rk-mono);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
}
.ct::before,.eff::before{
  content:''; width:26px; height:1px; flex:none;
  background:currentColor; opacity:.5;
}

/* A numbered step is a number and a rule, not a number in a red disc. The
   disc was the only circle left in the system and it put brand red on
   nineteen bullets across the guides. */
.steps li{
  padding:14px 0 14px 46px; border:0; border-radius:0;
  background:none; border-bottom:1px solid var(--rk-line);
}
.steps li::before{
  left:0; top:14px; width:auto; height:auto; border-radius:0;
  background:none; color:var(--rk-ink-3);
  font-family:var(--rk-mono); font-size:11px; letter-spacing:.1em;
  content:counter(step,decimal-leading-zero);
}

/* The callout keeps its left rule, which is the one piece of furniture here
   that was already in the new vocabulary. It loses the rounded right end. */
.callout{ border-radius:0; border-right:0; border-top:0; border-bottom:0; }

/* ─────────────────────────────────────────────────────── 6 · the surfaces */
/* Something you read inside of is 14px; v4 took everything to 3px, which
   read as a form field rather than as a panel. Nothing is a capsule. */
.card,.panel,.box,.tile,.drop,.warn-banner,.privacy,
details.how,.pilot-card,.runs-card,.cta,.tablewrap,.hub-list li,
.bot-window{ border-radius:var(--rk-r-box); }
.hub-list li{ border-radius:10px; }
/* Mirror's upload box is a real drop target, so it keeps its dashes. It is
   the only dashed outline left on the site.

   An earlier version of this rule set `border-style: solid` on the byline
   and the callout to normalise them. That is a four sided property: the
   byline declares border-top and border-bottom only, so setting the style
   on all four sides let the untouched left and right render at the initial
   `medium` width, and the guides' bylines grew 3px bars down both ends. */

/* ────────────────────────────────────────────────────────── 7 · the footer */
footer{ border-top:1px solid var(--rk-line); margin-top:48px; }
footer a{ color:var(--rk-ink-3); }
footer a:hover{ color:var(--rk-ink); }

/* ─────────────────────────────────── 8 · the legal pages get the same head */
/* These four had no header at all: a back link, a wordmark set as a caption
   and then the title. They now carry the site's header, and the wrapper
   below it drops the body padding that was standing in for one. */
/* The wordmark is defined once, in section 3. This block used to restate
   its face, size and colour and quietly won on order, which is how the
   legal pages ended up with ink-coloured RISK while the home page had
   white. */
.legal-shell__head .logo{ text-decoration:none; }
body:has(.legal-shell__head){ padding-top:0; }
body:has(.legal-shell__head) .legal-wrap{ padding:34px 20px 0; }
/* The back link and the caption wordmark these pages carried above their
   title are the header's job now. They were removed from the markup rather
   than hidden here: a hidden element still ships, still counts to a screen
   reader, and reported as content missing when the page was checked with
   JavaScript off. */

/* ───────────────────────────────────────────────────── 9 · what red means */
/* Red is a loss, a flag on a loss, and the one primary action on a screen.
   It was also the step bullets, the status dots, the nav hover and every
   link in running copy. Links in copy take the ink colour with a rule under
   them, which is what a link has always been. */
/* "Running copy" means a link inside a sentence. The hub list and the
   related list wrap a whole card in an anchor, and underlining those drew a
   rule across every card's two lines of description. */
p a:not([class*="btn"]),
li:not(.hub-list li):not(.related li) a:not([class*="btn"]),
dd a:not([class*="btn"]),
.legal-body a{
  color:var(--rk-ink);
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--rk-line-2);
}
p a:not([class*="btn"]):hover,
li:not(.hub-list li):not(.related li) a:not([class*="btn"]):hover,
.legal-body a:hover{ text-decoration-color:currentColor; }
.hub-list a,.related a,.header-right a,footer a{ text-decoration:none; }

:focus-visible{ outline:2px solid var(--rk-ink); outline-offset:3px; }

/* ─────────────────────────────────────────── 10 · the drawn marks */
/* .rk-i replaces the emoji that were doing signifying work. An emoji is
   drawn by whatever font the reader's operating system supplies: one
   padlock was three different pictures across Windows, macOS and Android,
   in colours nothing else in this palette uses, at a size CSS could not
   set. These are stroked paths in currentColor, so they take the colour and
   the weight of the sentence they sit in. */
.rk-i{
  display:inline-block; vertical-align:-.16em;
  flex:none; stroke:currentColor;
}
.privacy .rk-i,.privacy-line .rk-i{ vertical-align:-.19em; margin-right:3px; }
.uploader .icon,.lock-icon{ color:var(--rk-ink-3); line-height:0; }

/* Mirror's primary action was a full bleed red slab 1180px wide, which is
   a banner rather than a button. It stays full width where that is right,
   on a phone, and stops at a control's width on a desktop. */
.btn-lg{ max-width:26rem; margin-left:auto; margin-right:auto; }

/* Red is a loss, a flag on a loss, and the primary action. Mirror's eyebrow
   was the fourth thing spending it, on a label. */
.hero .eyebrow,.eyebrow{ color:var(--rk-ink-3); }

/* ────────────────────────────────────────── 11 · the last of the capsules */
/* /status reported seven services with a 999px lozenge each, which is the
   same tag-cloud shape the ledger's flags had. A status is a word and a
   mark: the mark carries the colour, the word carries the meaning, and
   seven of them line up in a column instead of floating. */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:0 !important; border-radius:0 !important;
  background:none !important;
  font-family:var(--rk-mono); font-size:10.5px; letter-spacing:.14em;
}
.pill::before{
  content:''; width:6px; height:6px; flex:none;
  background:currentColor; border-radius:50%;
}

/* Mirror's section eyebrow. Red is a loss, a flag on a loss, and the
   primary action; a label naming the page is none of those. */
.kicker{ color:var(--rk-ink-3); }

/* /status and /demo carry the site header now, so the page body stops
   paying for one with top padding. */
body:has(.legal-shell__head) > .wrap,
body:has(.legal-shell__head) > .container{ padding-top:30px; }
/* /demo centres a 900px container rather than the 760px reading measure
   the guides use, so its header frame follows it. status.html was a third
   variant, a 760px box with no side padding; it was normalised to the
   site convention in the page rather than taught to this file. */
/* /demo used to widen its own header frame; see ONE FRAME above. */
.brand{ color:var(--rk-ink-3); font-size:10.5px; letter-spacing:.18em;
        text-transform:uppercase; }

/* ────────────────────────────────────────── 12 · the header at 320px */
/* MEASURED. The header is one non-wrapping flex row, and at 320 the
   wordmark, two links and the toggle came to 374px: the document scrolled
   sideways by 54. /score and /learn were already 32px over before this
   file existed, for the same reason, so this fixes those too.

   Nothing is hidden, because a reader on a 320px phone needs the links as
   much as anyone. The type and the padding give way instead, which is what
   css/riskora-learn.css already does at 620 and simply did not go far
   enough for the narrowest phones still in use. */
/* The bar at a phone's width.

   MEASURED at 320 after the wordmark went to its proper 24px: the
   wordmark link is 127, the three nav links and the control are 205,
   and with padding that is 352 in a 320 viewport. Both of the blocks
   that used to live here set font-size without !important, so section 3
   of this file beat them and neither did anything at all.

   Everything gives a little and nothing is dropped. A reader on a 320px
   phone needs the links as much as anyone, and hiding them would be the
   easy fix rather than the right one. The control keeps a 34px target,
   which clears WCAG 2.5.8 at AA; 44 is the larger best-practice size
   and there is not room for it beside three links at this width. */
@media (max-width:440px){
  body > header,.legal-shell__head{ padding-left:12px; padding-right:12px; gap:6px; }
  .logo,.legal-shell__head .logo{ font-size:19px !important; letter-spacing:.04em !important; }
  .header-right{ gap:0; }
  .header-right a{ font-size:.68rem !important; padding:0 5px; white-space:nowrap; }
}
@media (max-width:380px){
  body > header,.legal-shell__head{ padding-left:10px; padding-right:10px; gap:4px; }
  .logo,.legal-shell__head .logo{ font-size:15px !important; letter-spacing:.02em !important; }
  .header-right a{ font-size:.58rem !important; padding:0 3px; letter-spacing:.01em; }
  .theme-toggle{
    width:34px !important; min-width:34px !important;
    height:34px !important; min-height:34px !important;
  }
}

/* A link in a sentence has to be told apart from the sentence by more than
   colour. axe found the one in /status's footer, which is not a <p>. */
.foot a,.disclaimer a,a[href^="mailto:"]{
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px;
}

/* /status lists a service name and its state on one row. Neither side was
   allowed to shrink, so at 320 the row measured 290 inside a 280 column
   and the document scrolled sideways by six pixels. The name wraps, and
   below 400 the state drops under it rather than squeezing. */
.row{ flex-wrap:wrap; gap:6px 12px; }
.row > *{ min-width:0; }

/* ───────────────────────────────────────────── 13 · one paper, one ground */
/* THREE WHITES. css/riskora-v4.css and css/mirror-v4.css standardised the
   light theme on a warm #fbfaf8 in an earlier coherence pass, correctly,
   because at that time the homepage was #fbfaf8 too. The homepage's finish
   layer has since moved to the cooler #F4F6F9, and /learn was never on
   either: it is #f9fafb. Three papers across one product.

   The homepage is the one the whole system is being matched to, so its
   values win here rather than the other way round. The dark ground follows
   the same rule: #06070A, not the #000000 and #030406 that /status and the
   legal pages each chose for themselves.

   This only restates the ground. The ink that v4 measured against it is
   kept, and every page is re-measured against painted pixels afterwards,
   which is how a paper change of four percent luminance gets caught if it
   takes anything under AA. */
html.light{
  --bg:#F4F6F9; --surface:#FFFFFF; --panel:#FFFFFF; --card:#FFFFFF;
  --rk-bg:#F4F6F9; --rk-surface:#FFFFFF;
}
html.light body{ background:#F4F6F9; }
:root{ --bg:#06070A; --rk-bg:#06070A; }
body:not(.bx){ background:var(--bg,#06070A); }
/* The legal pages, /status and /demo each picked their own near-black:
   #030406 and #000000. Measured, those are a visible step darker than the
   rest of the site when a reader moves between them. */
html:not(.light) body:not(.bx){ background:#06070A; }

/* /demo's action was a bordered red block in bold caps. It is the same
   primary action as everywhere else, so it takes the same shape; the
   border went because a filled button does not need one. */
.btn-alt{ background:none !important; border:1px solid var(--rk-line-2) !important;
          color:var(--rk-ink) !important; box-shadow:none !important; }

/* /pilot's gate uses .p-btn for the same primary action everyone else
   calls .btn-primary. One action, one object. */
.p-btn{
  border-radius:var(--rk-r-ctl);
  background:linear-gradient(180deg,#E02B26 0%,#D01A17 52%,#BE1310 100%) !important;
  font-family:var(--rk-sans); font-weight:600; letter-spacing:-.008em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 1px 2px rgba(0,0,0,.4);
}

/* ────────────────────────────────── 14 · the type scale is the home page's */
/* MEASURED. h1 letter-spacing ran -3.11px on the home page, -2.28 on
   /mirror, -1.68 on the four built on riskora-learn.css and -1.14 on the
   legal pages, because each stylesheet set its own and section 2 of this
   file only set the face. A headline that tracks differently on every page
   is the same inconsistency as a wordmark that does, and harder to name. */
h1,.hero h1{ letter-spacing:-.045em !important; line-height:1.03; }
h2,.seo-block h2,article h2,.legal-body h2{ letter-spacing:-.032em; }
h3,.seo-block h3,article h3,.legal-body h3{ letter-spacing:-.025em; }

/* And one button. 15px/30px on /score and /learn, 13px/26px on /pilot,
   12px/20px on the home page. */
.btn,.btn-primary,.btn-outline,.btn-submit,.btn-dashboard,.p-btn,.seo-cta-btn{
  padding:12px 20px !important; font-size:14.5px !important;
  min-height:44px; line-height:1.3;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
/* There is no large variant. .btn-lg stays as a hook for the full-width
   behaviour on a phone, but a second button size across the site is the
   same inconsistency as a second wordmark size. */
.btn-lg{ padding:12px 20px !important; font-size:14.5px !important; }

/* ───────────────────────────────────────────── 15 · one nav, everywhere */
/* There were four. The home page listed six sections and a login; /mirror
   listed Home, Learn and The score; /score and the guides listed Learn and
   Free Discipline Score; the legal pages listed Mirror and Learn. A reader
   moving between them had to relearn the bar each time, which is the same
   fault as four wordmarks and less obvious.

   Every page now carries the home page's six, with absolute hrefs so the
   section anchors work from anywhere. The home page keeps its own markup
   and its own hamburger; this styles the shared one to match it. */
.header-right nav{ display:flex; align-items:center; gap:0; }
.header-right nav a{
  font-family:var(--rk-mono) !important; font-size:12px !important;
  letter-spacing:.06em; text-transform:uppercase;
  padding:8px 10px; border-radius:0; color:var(--rk-ink-2); text-decoration:none;
  box-shadow:inset 0 -1px 0 transparent;
  transition:color .18s ease, box-shadow .18s ease;
}
.header-right nav a:hover{ color:var(--rk-ink); box-shadow:inset 0 -1px 0 currentColor; }
/* border-radius is restated because section 3's `.header-right a` sets it
   to 0 for the nav links, and that selector is one element more specific
   than the `.btn-outline` in section 4: the Login button was the only
   square-cornered control on the site. */
.header-right > .btn-outline{
  margin-left:4px; font-size:12px !important; padding:8px 14px !important;
  min-height:34px; letter-spacing:.06em; text-transform:uppercase;
  font-family:var(--rk-mono) !important;
  border-radius:var(--rk-r-ctl) !important;
}

/* Six links plus a control plus a button does not fit a phone, and the home
   page answers that with a hamburger these pages do not have. Rather than
   hide navigation, the bar sheds the three that are reachable from any page
   it links to, keeping the two destinations and the way in. */
@media (max-width:1040px){
  /* The in-page deep links shed first; the links that go somewhere stay.
     "For academies" is deliberately absent from this list: it is the only
     entry an educator has, and a bar that hides the B2B door on a laptop
     is a bar with no B2B door. The home page's own nav uses relative
     hrefs, so both spellings are matched. */
  .header-right nav a[href="/#how"],
  .header-right nav a[href="#how"],
  .header-right nav a[href="/#failures"],
  .header-right nav a[href="#failures"],
  .header-right nav a[href="/#faq"],
  .header-right nav a[href="#faq"]{ display:none; }
}
@media (max-width:620px){
  /* THE BAR HAS TO FIT THE SCREEN. At 320px the logo needs 98px and the
     right-hand group 258px: 380 inside a 320 viewport, so the page
     scrolled sideways. Privacy, terms, refund, compliance, data-sources
     and status were already doing this before a seventh nav item
     existed, and adding one carried it to for-brokers, score and pilot
     as well. Shedding links one at a time only moves the width at which
     it breaks, so below 620 the bar keeps the logo, the theme toggle
     and the way in. Every destination stays one tap away in the footer,
     which all of these pages carry.

     This has to sit AFTER `.header-right nav{ display:flex }` earlier in
     the file: written above it the specificity tied, the later
     declaration won, and the rule silently did nothing. */
  .header-right nav{ display:none; }
  .header-right > .btn-outline{ padding:8px 10px !important; }
}
@media (max-width:380px){
  .header-right nav a{ font-size:.58rem !important; padding:0 4px; }
  .header-right > .btn-outline{ font-size:.58rem !important; padding:7px 8px !important; }
}

/* ───────────────────────────────────────── 99 · not for sale yet ────── */
/* A control that is deliberately not on offer. Still a real button, and
   still answers when pressed, but set back from the red so a reader
   scanning the plans does not see four live offers.

   AT THE END OF THE FILE ON PURPOSE. This layer is the one that loads
   last on every page, and .btn-submit's red gradient is declared in at
   least three places inside it. Two earlier attempts at this rule lost
   to a later declaration and silently did nothing, which is the same
   way the narrow-width nav rule failed an hour earlier. Last word in
   the last stylesheet is the only placement that cannot be undone by
   one more declaration further down. */
.btn-submit.is-soon,
.btn-submit.is-soon:hover,
.btn-submit.is-soon:focus-visible{
  background:none !important;
  background-image:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  color:var(--rk-ink-2) !important;
  border:1px solid var(--rk-line-2) !important;
}
.btn-submit.is-soon:hover{
  color:var(--rk-ink) !important;
  border-color:var(--rk-ink-2) !important;
}