/* ============================================================
   Vyrsa — shared shell.
   Loaded AFTER each page's own <style>, so it is the single place
   the frame is defined. One container, one type scale, one header,
   one footer, one set of accessible defaults.

   In a real build this replaces the duplicated blocks in each page.
   Here it overrides them, which gives the same result for review
   and leaves the developer a clear spec.
   ============================================================ */

.vy-booting *,.vy-booting *::before,.vy-booting *::after{
  transition:none !important; animation-duration:.001ms !important;
}

:root{
  --vy-wrap: 1200px;
  --vy-gutter: clamp(20px, 4vw, 44px);
  --vy-header: 64px;
  --vy-focus: #12B5C4;
}

/* ---------- 1. ONE CONTAINER ---------- */
.wrap{
  max-width: var(--vy-wrap) !important;
  padding-left: var(--vy-gutter) !important;
  padding-right: var(--vy-gutter) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 2. ONE TYPE SCALE ---------- */
h1, h1.head{ font-size: clamp(32px, 4.6vw, 58px) !important; line-height: 1.08 !important; letter-spacing: -.02em !important; }
main h2, section h2, .sechead h2, .shead h2{ font-size: clamp(23px, 3vw, 34px) !important; line-height: 1.16 !important; }
h3{ font-size: clamp(16px, 1.5vw, 19px) !important; }

/* ---------- 3. ONE HEADER ---------- */
header{ position: sticky !important; top: 0 !important; z-index: 90 !important; }
header .bar, header > .wrap.bar{ min-height: var(--vy-header) !important; height: var(--vy-header) !important; }

/* ---------- 4. CONTRAST ----------
   Generic class names (.tag, .k, .b, .em) mean different things on different
   pages, so blanket colour rules here caused more damage than they fixed.
   shell.js measures each text element against its real background instead and
   nudges only the ones that fail, keeping the original hue.
   Nothing to declare in CSS. */

/* ---------- 5. FOCUS — visible on every control ---------- */
/* Modern browsers: ring only for keyboard focus. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline: 2px solid var(--vy-focus) !important;
  outline-offset: 3px !important;
  border-radius: 1px;
}
/* Browsers without :focus-visible fall back to a ring on any focus,
   which is the safe direction to fail in. */
@supports not selector(:focus-visible){
  a:focus,button:focus,input:focus,select:focus,textarea:focus,[tabindex]:focus{
    outline: 2px solid var(--vy-focus) !important;
    outline-offset: 3px !important;
  }
}
#vyrsa-rev a:focus-visible,#vyrsa-rev button:focus-visible{ outline-offset: -2px !important; }
/* programmatic landing point for "back to top" — never in the tab order,
   so it must never paint a ring */
[data-vy-anchor]:focus,[data-vy-anchor]:focus-visible{ outline: none !important; }

/* ---------- 6. SKIP LINK ---------- */
.vy-skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:#12B5C4; color:#0E141D; font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 18px; text-decoration:none; transition:top .18s;
}
.vy-skip:focus{ top:12px; }

/* ---------- 7. MOBILE NAV (v2 grid button + overlay) ---------- */
.vy-gridbtn{
  display:none; width:42px; height:42px; border:0; background:transparent;
  cursor:pointer; padding:7px; margin-left:auto; flex:none;
  color:inherit;   /* UA gives buttons black — the squares use currentColor */
}
.vy-gridbtn .gm{ width:100%; height:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.vy-gridbtn .gm span{
  background:currentColor; opacity:.7; border-radius:1.5px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.vy-gridbtn .gm span:nth-child(5){ background:#12B5C4; opacity:1 }
.vy-gridbtn .gm span:nth-child(9){ background:#B8912F; opacity:1 }
.vy-gridbtn:hover .gm span:nth-child(1){ transform:translate(-1.5px,-1.5px) rotate(-4deg) }
.vy-gridbtn:hover .gm span:nth-child(3){ transform:translate(1.5px,-1.5px) rotate(4deg) }
.vy-gridbtn:hover .gm span:nth-child(7){ transform:translate(-1.5px,1.5px) rotate(4deg) }
.vy-gridbtn:hover .gm span:nth-child(9){ transform:translate(1.5px,1.5px) rotate(-4deg) }

.vy-menu{
  position:fixed; inset:0; z-index:300; background:#0E141D; color:#F7F5F1;
  display:flex; align-items:center; visibility:hidden; opacity:0;
  transition:opacity .34s ease, visibility 0s .34s;
}
.vy-menu.open{ visibility:visible; opacity:1; transition:opacity .34s ease; }
.vy-menu .vy-mwrap{ width:100%; max-width:var(--vy-wrap); margin:0 auto; padding:0 var(--vy-gutter); }
.vy-menu .vy-mhead{
  position:absolute; top:0; left:0; right:0; height:var(--vy-header);
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--vy-wrap); margin:0 auto; padding:0 var(--vy-gutter);
}
.vy-menu .vy-mmark{ display:flex; align-items:center; gap:11px; text-decoration:none; color:#F7F5F1; }
.vy-menu .vy-mmark svg{ width:23px; height:21px; }
.vy-menu .vy-mmark span{ font-family:'Spectral',Georgia,serif; font-weight:600; font-size:21px; color:#F7F5F1; }
.vy-menu .vy-close{
  width:44px; height:44px; background:transparent; border:1px solid rgba(143,163,181,.35);
  color:#F7F5F1; font-size:18px; cursor:pointer; line-height:1;
}
.vy-menu .vy-close:hover{ border-color:#F7F5F1; }
/* --- the menu is a map of the site, not a list of six words -------------
   The header carries a How-we-work dropdown with three routes and a line on
   each. The old overlay flattened that to one word and dropped ClearSight,
   the focused solutions, both Umbraco pages and Legal entirely — several public
   pages reachable, which made the menu a WORSE map than the header covering
   it up. Groups carry their children; the aside says where you already are. */
.vy-menu .vy-mgrid{
  width:100%; max-width:var(--vy-wrap); margin:0 auto; padding:0 var(--vy-gutter);
  display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(30px,6vw,80px); align-items:start;
}
.vy-menu .vy-grp{
  border-bottom:1px solid rgba(143,163,181,.10); padding:11px 0;
  opacity:0; transform:translateY(16px);
}
.vy-menu.open .vy-grp{ animation:vyMenuIn .5s cubic-bezier(.2,.8,.15,1) forwards }
.vy-menu.open .vy-grp:nth-child(2){ animation-delay:.05s }
.vy-menu.open .vy-grp:nth-child(3){ animation-delay:.10s }
.vy-menu.open .vy-grp:nth-child(4){ animation-delay:.15s }
.vy-menu.open .vy-grp:nth-child(5){ animation-delay:.20s }
.vy-menu .vy-mtop{
  display:inline-flex; align-items:baseline; gap:14px;
  font-family:'Spectral',Georgia,serif; font-weight:300;
  font-size:clamp(26px,3.9vw,42px); line-height:1.16;
  color:#F7F5F1; text-decoration:none; transition:color .16s;
}
.vy-menu a.vy-mtop:hover{ color:#12B5C4 }
.vy-menu .vy-mtop .c{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em;
  color:#8FA3B5; font-weight:400;
}
.vy-menu .vy-kids{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:8px; padding-left:2px }
.vy-menu .vy-kids a{
  display:inline-flex; align-items:center; gap:8px; font-size:13.4px; line-height:1.5;
  color:#9FB0BF; text-decoration:none; transition:color .16s;
}
.vy-menu .vy-kids a:hover{ color:#F7F5F1 }
.vy-menu .vy-kids a[aria-current]{ color:#12B5C4 }
.vy-menu .vy-sw{ width:11px; height:11px; flex:none; border:1px solid rgba(143,163,181,.4) }
.vy-menu .vy-kids a[aria-current] .vy-sw{ border-color:#12B5C4 }

/* The CTA is a button in the header. It was the sixth identical line here. */
.vy-menu .vy-mact{ margin-top:26px; opacity:0; transform:translateY(16px) }
.vy-menu.open .vy-mact{ animation:vyMenuIn .5s cubic-bezier(.2,.8,.15,1) .26s forwards }
.vy-menu .vy-mcta{
  display:inline-flex; align-items:center; gap:12px; background:#12B5C4; color:#141C27;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; padding:16px 24px; text-decoration:none; font-weight:500;
  transition:.18s;
}
.vy-menu .vy-mcta:hover{ background:#F7F5F1 }
.vy-menu .vy-mfine{
  margin-top:16px; display:flex; gap:20px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#8FA3B5;
}
.vy-menu .vy-mfine a{ color:#8FA3B5; text-decoration:none }
.vy-menu .vy-mfine a:hover{ color:#F7F5F1 }

.vy-menu .vy-aside{
  border-left:1px solid rgba(143,163,181,.10);
  padding-left:clamp(20px,3vw,36px); opacity:0;
}
.vy-menu.open .vy-aside{ animation:vyMenuIn .6s ease .3s forwards }
.vy-menu .vy-aside .k{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#8FA3B5; margin-bottom:10px;
}
.vy-menu .vy-aside .here{
  font-family:'Spectral',Georgia,serif; font-weight:300; font-size:23px;
  line-height:1.25; color:#F7F5F1;
}
.vy-menu .vy-aside .heresub{ margin-top:7px; font-size:13.2px; line-height:1.66; color:#9FB0BF }
.vy-menu .vy-aside .blk{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(143,163,181,.10) }
.vy-menu .vy-aside .blk p{ font-size:13.2px; line-height:1.7; color:#C6D2DD }
.vy-menu .vy-aside .blk a{ color:#12B5C4; text-decoration:none; border-bottom:1px solid rgba(18,181,196,.4) }

@keyframes vyMenuIn{ to{ opacity:1; transform:none } }
body.vy-locked{ overflow:hidden; }

/* Two separate problems, and merging them into one query was a mistake:

   HEIGHT decides whether centring is safe. Vertical centring only works while
   the content is shorter than the window; on a short one it pushes the top of
   the list behind the header with no way to scroll back. So a short window
   top-aligns, allows scrolling, AND tightens the rhythm so it usually still
   fits without needing to. Most laptops are well under 800px of viewport once
   the browser chrome is taken off, so this is the common case, not the edge.

   WIDTH decides the column count. Collapsing to one column on a short-but-wide
   window is what dropped the "you are here" aside below the fold on a 1300x700
   laptop — plenty of room beside the list, and it went underneath instead.

   Both blocks must stay BELOW .vy-menu's own padding shorthand, or that
   shorthand resets padding-top to zero and the fix silently does nothing. */
@media(max-height:860px){
  .vy-menu{ align-items:flex-start; overflow-y:auto }
  .vy-menu .vy-mgrid{ padding-top:calc(var(--vy-header) + 16px); padding-bottom:30px }
  .vy-menu .vy-mtop{ font-size:clamp(22px,2.9vw,33px) }
  .vy-menu .vy-grp{ padding:7px 0 }
  .vy-menu .vy-mact{ margin-top:18px }
  .vy-menu .vy-mcta{ padding:13px 21px }
  .vy-menu .vy-aside .blk{ margin-top:18px; padding-top:16px }
}
@media(max-width:900px){
  .vy-menu .vy-mgrid{ grid-template-columns:1fr; gap:26px }
  .vy-menu .vy-aside{ border-left:none; padding-left:0;
    border-top:1px solid rgba(143,163,181,.10); padding-top:24px }
}

@media(max-width:900px){
  .vy-gridbtn{ display:block; }
  header .navcta,header .nav-cta{ display:none !important; }
}


/* ---------- 7b. HOW WE WORK DROPDOWN (every page) ---------- */
.vy-dd{ position:relative; display:inline-block }
.vy-dd > button{
  background:none; border:0; cursor:pointer; padding:0; color:inherit;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.75;
}
.vy-dd > button::after{ content:' \2193'; opacity:.5 }
.vy-dd > button:hover,.vy-dd.open > button{ opacity:1; color:#12B5C4 }
.vy-dd.on > button{ opacity:1; border-bottom:1px solid #12B5C4; padding-bottom:3px }
.vy-ddpanel{
  position:absolute; top:calc(100% + 18px); left:-22px;
  width:min(430px, calc(100vw - 40px)); z-index:120;
  background:#18222F; border:1px solid rgba(143,163,181,.22);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1), visibility 0s .22s;
}
.vy-dd.open .vy-ddpanel,.vy-dd:hover .vy-ddpanel{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
/* flipped when the panel would otherwise run off the right edge */
.vy-dd.flip .vy-ddpanel{ left:auto; right:-22px }
.vy-ddpanel a{
  display:grid; grid-template-columns:10px 1fr; gap:14px; align-items:start;
  padding:16px 20px; text-decoration:none; border-bottom:1px solid rgba(143,163,181,.12);
  transition:background .18s; color:#F7F5F1;
  /* the surrounding nav sets mono/uppercase on its links — undo it in here */
  font-family:'Archivo',system-ui,sans-serif !important;
  text-transform:none !important; letter-spacing:normal !important; font-size:14.5px !important;
}
.vy-ddpanel a:last-child{ border-bottom:none }
.vy-ddpanel a:hover{ background:rgba(18,181,196,.08) }
.vy-ddpanel .sw{ width:10px; height:38px; margin-top:3px; display:block }
.vy-ddpanel b{ display:block; font-family:'Archivo',system-ui,sans-serif !important; font-size:14.5px !important;
  font-weight:600; margin-bottom:4px; color:#F7F5F1; text-transform:none !important; letter-spacing:normal !important }
.vy-ddpanel i{ display:block; font-style:normal; font-size:12.5px !important; line-height:1.55; color:#9FB0BF;
  font-family:'Archivo',system-ui,sans-serif !important; text-transform:none !important; letter-spacing:normal !important }
.vy-ddpanel em{ display:block; font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.16em !important; text-transform:uppercase !important; color:#8FA3B5; margin-top:6px; font-size:9.5px !important }
@media(max-width:900px){ .vy-dd{ display:none } }

/* ---------- 7c. CONDENSING HEADER (v2) ----------
   Full navigation in the hero; on scroll the bar condenses to the lockup and
   the nine-square button, and the overlay carries the routes. */
header nav.main, header nav.navlinks, header .navcta{
  transition: opacity .28s ease, transform .28s ease;
}
body.vy-condensed header nav.main,
body.vy-condensed header nav.navlinks,
body.vy-condensed header .navcta{
  opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none;
}
body.vy-condensed .vy-gridbtn{ display:block }
.vy-gridbtn{ opacity:0; transition:opacity .28s ease }
body.vy-condensed .vy-gridbtn,
.vy-gridbtn.vy-always{ opacity:1 }
@media(max-width:900px){ .vy-gridbtn{ opacity:1 } }
@media(prefers-reduced-motion:reduce){
  header nav.main, header nav.navlinks, header .navcta, .vy-gridbtn{ transition:none !important }
}

/* ---------- 8. SHARED FOOTER ---------- */
.vy-foot{ border-top:1px solid; border-color:color-mix(in srgb, currentColor 22%, transparent); margin-top:0; }
.vy-foot .vy-fin{
  max-width:var(--vy-wrap); margin:0 auto; padding:44px var(--vy-gutter) 30px;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px;
}
@media(max-width:860px){ .vy-foot .vy-fin{ grid-template-columns:1fr 1fr; gap:28px } }
@media(max-width:520px){ .vy-foot .vy-fin{ grid-template-columns:1fr } }
.vy-foot .vy-fh{
  font-size:9.5px !important; font-weight:500;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:14px; opacity:.65; font-weight:500;
}
.vy-foot a{ display:block; color:inherit; font-size:14px; line-height:1.5; padding:7px 0; text-decoration:none; opacity:.85; }
.vy-foot a:hover{ opacity:1; color:#12B5C4; }
.vy-foot .vy-fbrand p{ font-size:13px; line-height:1.6; opacity:.66; margin-top:12px; max-width:30ch; } /* .6 fell just under 4.5:1 on paper */
.vy-foot .vy-fmark{ display:flex; align-items:center; gap:10px; text-decoration:none; padding:0; color:inherit; opacity:1; }
.vy-foot .vy-fmark svg{ width:20px; height:18px; }
.vy-foot .vy-fmark > span:not(.vy-wmstack){ font-family:'Spectral',Georgia,serif; font-weight:600; font-size:18px; }

/* ---------- 9. TAP TARGETS ---------- */
@media(max-width:900px){
  header .lock{ min-height:32px; align-items:center }
  footer a, .vy-foot a, .crumb a, nav a, .scrollcue, .breadcrumb a,
  p a, li a, .p a, .why a{ min-height:24px; display:inline-flex; align-items:center; }
  .vy-foot a{ display:flex; }
  .crumb, .breadcrumb{ line-height:2.2 }
}

/* ---------- 10. REDUCED MOTION SAFETY NET ----------
   Anything whose reveal is animation-driven must still be visible. */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .vy-menu a.vy-mlink,.vy-menu .vy-mfoot,.reveal,.fade,[class*="settle"]{ opacity:1 !important; transform:none !important; }
  .vy-sign span{ opacity:.38 !important; transform:none !important }
  .vy-sign span:nth-child(5),.vy-sign span:nth-child(9){ opacity:1 !important }
}

/* ---------- 11. THE FULL LOCKUP ----------
   Vyrsa is the trading shorthand; Vyrsa Logic is the company. The full
   lockup tucks LOGIC into the y-descender zone, as the brand work set out.
   Used wherever we sign off — footers — rather than in running navigation. */
.vy-lockup{ display:inline-flex !important; align-items:center; gap:13px; text-decoration:none; color:inherit }
.vy-lockup svg{ width:30px !important; height:27px !important; display:block; flex:none }
.vy-wmstack{ position:relative; display:inline-block; line-height:1 }
.vy-wmstack{ position:relative !important; display:inline-block !important; line-height:1 !important }
.vy-wmstack .vy-wm{
  font-family:'Spectral',Georgia,serif !important; font-weight:600 !important; font-size:26px !important;
  line-height:1 !important; letter-spacing:-.004em; display:block !important;
}
.vy-wmstack .vy-sub{
  position:absolute !important; right:1px; bottom:-4px; margin-right:-.34em;
  font-family:'IBM Plex Mono',monospace !important; font-weight:500 !important;
  font-size:7.5px !important; letter-spacing:.34em !important; line-height:1 !important;
  opacity:.7; text-transform:none !important; display:block !important; /* .62 fell to 4.4:1 contrast on the dark ground — WCAG AA needs 4.5 */
}
/* footers set display:block on every link — the lockup is not a list item */
footer a.lock, footer a.vy-lockup, footer a.vy-fmark,
.fcol a.lock, .fcol a.vy-lockup{ display:inline-flex !important; align-items:center }
/* the page's own lockup once the shared footer supplies one */
footer a.vy-dupe, footer .vy-dupe, .fcol a.vy-dupe{ display:none !important }
.vy-former{
  width:min(var(--vy-wrap),calc(100% - (var(--vy-gutter) * 2))); box-sizing:border-box; margin:18px auto 0 !important;
  padding:16px 0 0; border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);
  font-family:'Archivo',Arial,sans-serif !important; font-size:13px !important; line-height:1.6 !important;
  letter-spacing:0 !important; opacity:.66;
}
.vy-former em{ font:inherit !important; font-style:normal !important; letter-spacing:inherit !important; }
@media(max-width:620px){ .vy-former{ margin-top:14px !important; padding-top:13px } }

/* ---------- 12. CLOSING SECTION — use the right-hand half ----------
   Every close section was a headline in a narrow left column with an empty
   half beside it. The process is the same on every page, so the panel is too. */
.vy-endgrid{ display:grid; grid-template-columns:1.2fr .95fr; gap:clamp(28px,6vw,84px); align-items:start }
@media(max-width:900px){ .vy-endgrid{ grid-template-columns:1fr; gap:36px } }
.vy-next{ border-top:1px solid; border-color:color-mix(in srgb, currentColor 26%, transparent); padding-top:20px }
.vy-next h2{
  font-family:'IBM Plex Mono',monospace !important; font-size:9.5px !important; letter-spacing:.2em;
  text-transform:uppercase; font-weight:500; opacity:.7; margin-bottom:6px;
  max-width:none !important; white-space:nowrap; line-height:1.4 !important;
}
.vy-next ol{ list-style:none; padding:0; margin:0; counter-reset:vn }
.vy-next li{
  counter-increment:vn; position:relative; padding:14px 0 14px 38px;
  border-bottom:1px solid; border-color:color-mix(in srgb, currentColor 14%, transparent);
  font-size:13.8px; line-height:1.62;
}
.vy-next li:last-child{ border-bottom:none }
.vy-next li::before{
  content:counter(vn,decimal-leading-zero); position:absolute; left:0; top:16px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; opacity:.75;
}
.vy-next li b{ font-weight:600; display:block; margin-bottom:3px }
.vy-next li span{ opacity:.78; display:block }
.vy-next li a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor;
  padding-bottom:1px; opacity:.95; white-space:nowrap }
.vy-next li a:hover{ color:#12B5C4; border-color:#12B5C4 }
.vy-next .vy-nfoot{
  margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; opacity:.66; /* .6 fell just under 4.5:1 on paper */
}

/* ---------- 13. GROUND RHYTHM ON EVERY PAGE ----------
   The tokens do not mean the same thing on every page. On a dark page
   --paper is the light TEXT colour; on a light page it is the light
   BACKGROUND. Remapping it blindly inverted every card. So the remap is
   scoped to the page's own ground as well as the band's. */

/* --- Paper page: the contrast band goes dark --- */
body[data-ground="paper"] .vy-g-ink{
  background:#141C27; color:#F7F5F1;
  --paper:#1E2A38;                /* card fills become raised ink */
  --ink:#F7F5F1;                  /* text that was ink becomes light */
  --steel:#9BBAD2;                /* steel text is unreadable on ink */
  --teal:#7FD3DC; --gold:#D8AE47; --signal:#12B5C4;
  --ink-deep:#141C27; --ink-raise:#1E2A38;
  --body-c:#C6D2DD; --mid:#AEBECC; --slate:#98ABBD;
  --line:rgba(143,163,181,.20); --line2:rgba(143,163,181,.12);
  --rule:rgba(143,163,181,.20); --rule2:rgba(143,163,181,.12);
}

/* --- Ink page: the contrast band goes light --- */
body[data-ground="ink"] .vy-g-paper{
  background:#F7F5F1; color:#141C27;
  --paper:#141C27;                /* paper was the text colour here */
  --ink:#141C27; --ink-deep:#FFFFFF; --ink-raise:#FFFFFF;
  --signal:#0C7C88; --teal:#2A7C86; --gold-lit:#8A6B1E;
  --body-c:#4A5563; --mid:#54657A; --slate:#546678;
  --line:rgba(35,64,92,.18); --line2:rgba(35,64,92,.10);
  --rule:rgba(35,64,92,.18); --rule2:rgba(35,64,92,.10);
}

/* --- Steel page: the contrast band goes light --- */
body[data-ground="steel"] .vy-g-paper{
  background:#F7F5F1; color:#141C27;
  --paper:#141C27; --ink:#141C27;
  --signal:#0C7C88; --teal:#2A7C86;
  --ground:#FFFFFF; --ground-d:#FFFFFF; --ink-raise:#FFFFFF;
  --body-c:#4A5563; --mid:#54657A; --slate:#546678;
  --line:rgba(35,64,92,.18); --line2:rgba(35,64,92,.10);
  --rule:rgba(35,64,92,.18); --rule2:rgba(35,64,92,.10);
  --gold-lit:#8A6B1E;
}

/* A filled --signal button takes --ink for its label. On a light band
   --signal darkens to #0C7C88 while --ink stays #141C27, so the label sinks
   into its own fill. Anything sitting ON signal goes white there. */
body[data-ground="ink"] .vy-g-paper .endcta,
body[data-ground="steel"] .vy-g-paper .endcta{ color:#FFFFFF }

/* the band change is the divider; a rule on top of it reads as a seam */
.vy-g-ink + .vy-g-paper, .vy-g-paper + .vy-g-ink,
.vy-g-ink + .vy-g-steel, .vy-g-steel + .vy-g-ink,
.vy-g-paper + .vy-g-steel, .vy-g-steel + .vy-g-paper{ border-top-color:transparent !important }

/* ---------- 14. BACK TO TOP ----------
   Deliberately NOT the nine-square mark. The nav button is already a grid,
   sits on the same screen, and two identical controls doing different things
   is a real confusion rather than a stylistic one. A utility looks like a
   utility; the motif stays rare enough to keep meaning something. */
.vy-top{
  position:fixed; right:clamp(16px,2.4vw,30px); bottom:clamp(16px,2.4vw,30px);
  z-index:200; width:44px; height:44px; display:grid; place-items:center;
  background:#141C27; border:1px solid rgba(143,163,181,.34); cursor:pointer;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .26s ease, transform .26s ease, border-color .18s, background .18s;
  padding:0; color:#F7F5F1;
}
.vy-top.on{ opacity:1; transform:none; pointer-events:auto }
.vy-top:hover{ border-color:#12B5C4; background:#18222F; color:#12B5C4 }
.vy-top svg{ width:15px; height:15px; display:block; overflow:visible }
.vy-top svg path{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square }
.vy-top .cap{ transition:transform .24s cubic-bezier(.2,.8,.2,1) }
.vy-top:hover .cap{ transform:translateY(-2px) }
.vy-top .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
@media(prefers-reduced-motion:reduce){ .vy-top,.vy-top .cap{ transition:none !important } }
@media print{ .vy-top{ display:none } }

/* ---------- 15. LAUNCH RHYTHM ----------
   The page drafts carried roomy review spacing. Tighten the repeated vertical
   gaps for launch while leaving cards, controls and local component rhythm alone. */
main > section:not(.hero):not(.open):not(.dochead):not(.strip):not(.ledger){
  padding-top:clamp(36px,5vh,60px) !important;
  padding-bottom:clamp(36px,5vh,60px) !important;
}
main > section.hero,
main > section.open{
  padding-top:clamp(30px,4.5vh,52px) !important;
  padding-bottom:clamp(32px,5vh,56px) !important;
}
main > section.end,
main > section.close,
main > section.start{
  padding-top:clamp(40px,6vh,72px) !important;
  padding-bottom:clamp(40px,6vh,72px) !important;
}
.slots,.vids,.exs,.feat,.proofgrid,.experience,.regions,.rules,.apply,
.wgrid,.rgrid,.risks,.dgrid,.prgrid,.threes,.layers,.ogrid,.evid,.shown,
.meas,.brief,.founder,.principle,.todo{
  margin-top:clamp(22px,3.2vw,30px) !important;
}
@media(max-width:620px){
  main > section:not(.hero):not(.open):not(.dochead):not(.strip):not(.ledger){
    padding-top:34px !important; padding-bottom:34px !important;
  }
  main > section.hero,
  main > section.open{
    padding-top:30px !important; padding-bottom:32px !important;
  }
  main > section.end,
  main > section.close,
  main > section.start{
    padding-top:40px !important; padding-bottom:40px !important;
  }
}

/* ---------- 16. THE PREVIOUS NAME ----------
   Where the old company is named, it is set in iConnect's own blue (#018EC4)
   rather than ours. Two reasons: it marks the word as a proper noun belonging
   to something else, and it stops "iConnect" reading as a Vyrsa sub-brand.
   The value is tuned per ground so it always clears AA. */
/* iConnect's blue, tuned per BAND rather than per page.

   The bug this replaces: `body[data-ground="ink"] .vy-ic` is (0,2,1) and
   `.vy-g-paper .vy-ic` is (0,2,0), so the page-level rule won everywhere and
   every band on an Ink page rendered the Ink blue — including the light ones,
   where #018EC4 measures 3.4:1 and fails AA. Adding `body ` to the front made
   them equal, which just handed it to source order. Both page AND band, the
   same shape as §13, is what actually settles it.

   Values are the least-lifted that still clear 4.5:1, so the brand stays as
   close to #018EC4 as each background allows:
     #018EC4 on Ink 4.63:1 · #0177A5 on Paper 4.61:1 · #57B4D8 on Steel 4.56:1 */
.vy-ic{ color:#018EC4; font-style:normal }

body[data-ground="ink"]   .vy-g-paper .vy-ic,
body[data-ground="steel"] .vy-g-paper .vy-ic,
body[data-ground="paper"] .vy-g-paper .vy-ic,
body[data-ground="paper"] .vy-ic{ color:#0177A5 }

body[data-ground="paper"] .vy-g-ink .vy-ic,
body[data-ground="ink"]   .vy-g-ink .vy-ic,
body[data-ground="ink"]   .vy-ic{ color:#018EC4 }

body[data-ground="steel"] .vy-g-steel .vy-ic,
body[data-ground="steel"] .vy-ic{ color:#57B4D8 }

/* Video posters carry a fixed dark gradient no matter which band they land on,
   so the badge on them is pinned rather than following the band. */
body .vid .frame .vy-ic, body .slot .vy-ic{ color:#3FA9D8 }

/* the mark itself, used once where the videos are explained */
.vy-icmark{ display:block; height:26px; width:auto; margin-bottom:18px }
.vy-icrow{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px }
.vy-icrow img{ height:26px; width:auto; display:block }
.vy-icrow span{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; opacity:.62;
}