/* instiv2 kit.css: shared parts for every page of the redesign (loaded after styles.css).
   Image, video and animation first; words kept short. Light default, dark via html[data-theme="dark"]. */

/* ================= chrome (F1): logo, menus, phone sheet, breadcrumbs, footer =================
   Markup: instiv2-tools/chrome.mjs from chrome.json (do not hand edit a page's chrome). Behaviour: site.js.
   Widths: full menus from 1180 px; below that the menu button opens the sheet; phones (860 px and below) carry the
   theme switch in the sheet and one bottom bar (the dock with a menu button). */
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; padding: 12px 18px; border-radius: 12px; background: var(--page-text); color: var(--page); font-weight: 600; transition: top .2s; }
.skip:focus { top: 10px; }

/* logo: the vector brand mark and wordmark; the light file on light ground, the white file on dark ground */
.brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; --logo-h: 30px; }
.brand img { display: block; width: auto; height: var(--logo-h); }
.brand .logo-l { display: none; }
body[data-tone="light"] .hdr .brand .logo-l { display: block; }
body[data-tone="light"] .hdr .brand .logo-d { display: none; }
.menu-sheet .brand .logo-l, .ftr .brand .logo-l { display: block; }
.menu-sheet .brand .logo-d, .ftr .brand .logo-d { display: none; }
html[data-theme="dark"] .menu-sheet .brand .logo-l, html[data-theme="dark"] .ftr .brand .logo-l { display: none; }
html[data-theme="dark"] .menu-sheet .brand .logo-d, html[data-theme="dark"] .ftr .brand .logo-d { display: block; }

/* top level menu */
.hdr-nav { display: flex; align-items: center; min-width: 0; margin-left: clamp(6px, 1.6vw, 28px); }
.nv { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nv-b { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 14.5px/1 Inter, "Inter Fallback", system-ui, sans-serif; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s; }
.nv-b:hover, .nv-i.is-open > .nv-b { color: var(--text); background: rgba(255, 255, 255, .09); }
.nv-i.is-here > .nv-b { color: var(--text); font-weight: 600; }
.nv-i.is-here > .nv-b::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gain); }
body[data-tone="light"] .nv-b { color: var(--page-muted); }
body[data-tone="light"] .nv-b:hover, body[data-tone="light"] .nv-i.is-open > .nv-b { color: var(--page-text); background: rgba(11, 18, 32, .055); }
body[data-tone="light"] .nv-i.is-here > .nv-b { color: var(--page-text); }
.nv-chev { width: 12px; height: 12px; opacity: .7; transition: transform .25s var(--ease); }
.nv-i.is-open .nv-chev { transform: rotate(180deg); }
/* dropdown panels: theme coloured cards under the bar, placed by site.js (--nv-x) so they never leave the screen */
.nv-p { position: absolute; top: calc(100% - 6px); left: var(--nv-x, var(--pad)); z-index: 2; display: none; max-width: calc(100vw - 2 * var(--pad)); padding: 12px; border-radius: 20px; background: var(--page-2); color: var(--page-text); box-shadow: 0 0 0 1px var(--page-line), 0 34px 80px -28px rgba(5, 8, 15, .5); }
.nv-i.is-open > .nv-p { display: block; animation: nvIn .22s var(--ease); }
@keyframes nvIn { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
.nv-cols { display: flex; gap: 6px; }
.nv-col { min-width: 236px; }
.nv-h { margin: 6px 12px 8px; font: 500 11px/1.2 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--page-faint); }
.nv-ls, .nv-legal, .nv-famgrid ul { list-style: none; margin: 0; padding: 0; }
.nv-ls { display: grid; gap: 2px; }
.nv-l { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; transition: background .2s; }
.nv-l:hover, .nv-l:focus-visible, .nv-l[aria-current="page"] { background: var(--page); }
.nv-l b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nv-l span { font-size: 13px; line-height: 1.35; color: var(--page-muted); }
.nv-l[aria-current="page"] b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--gain); vertical-align: 2px; }
.nv-legal { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 6px 0 2px; padding: 8px 0 0; border-top: 1px solid var(--page-line); }
.nv-legal a, .nv-famgrid a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; color: var(--page-muted); }
.nv-legal a:hover, .nv-famgrid a:hover, .nv-legal a[aria-current="page"], .nv-famgrid a[aria-current="page"] { color: var(--page-text); background: var(--page); }
.nv-fam { min-width: 0; padding-left: 10px; border-left: 1px solid var(--page-line); }
.nv-famgrid { display: grid; grid-template-columns: repeat(3, minmax(170px, auto)); gap: 4px 6px; }
.nv-fh { margin: 8px 12px 2px; font-size: 12px; font-weight: 600; color: var(--page-faint); }
.soon { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 99px; font: 500 11px/1.3 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; letter-spacing: .04em; color: var(--page-muted); box-shadow: 0 0 0 1px var(--page-line); vertical-align: 1px; }

/* the menu button and the actions */
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-hi); color: inherit; cursor: pointer; flex: none; }
body[data-tone="light"] .menu-btn { border-color: var(--page-line); background: rgba(255,255,255,.6); }
.menu-btn svg { width: 20px; height: 20px; }
.hdr-cta .btn { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
@media (min-width: 1180px) and (max-width: 1359px) { .hdr { gap: 8px; } .hdr-nav { margin-left: 4px; } .nv-b { padding: 0 8px; font-size: 14px; } .hdr-cta { gap: 8px; } .hdr-cta .btn { padding: 0 15px; } }
@media (max-width: 1179px) { .hdr-nav { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 860px) {
  .brand { --logo-h: clamp(24px, 6.9vw, 28px); }
  .hdr-cta { gap: 8px; }
  .hdr-cta .theme-btn, .hdr-cta .hdr-login { display: none; }
  .hdr-cta .hdr-start { min-height: 44px; padding: 0 16px; font-size: 14.5px; transition: opacity .3s var(--ease), visibility 0s; }
  body.has-dock .hdr-cta .hdr-start { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
}

/* the menu sheet: full screen, groups with headings, big tiles, Log in and Start free in the thumb zone */
.menu-sheet { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--page); color: var(--page-text); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 14px, 0); transition: opacity .28s var(--ease), transform .4s var(--ease), visibility 0s linear .4s; }
.menu-sheet.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .28s var(--ease), transform .4s var(--ease), visibility 0s; }
body.menu-open { overflow: hidden; }
.ms-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--hdr); padding: 0 var(--pad); border-bottom: 1px solid var(--page-line); }
.ms-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); cursor: pointer; flex: none; }
.ms-x svg { width: 20px; height: 20px; }
.ms-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px var(--pad) 28px; }
.ms-g { padding-top: 18px; }
.ms-h { margin: 0 0 10px; font: 500 12px/1.2 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--page-faint); }
.ms-ls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ms-ls a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 54px; height: 100%; padding: 8px 14px; border-radius: 14px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.ms-ls a .soon { margin-left: 0; }
.ms-ls a[aria-current="page"], .ms-row[aria-current="page"] { background: var(--page-text); color: var(--page); box-shadow: none; }
.ms-ls a[aria-current="page"] .soon { color: inherit; box-shadow: 0 0 0 1px currentColor; }
.ms-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; margin-top: 18px; min-height: 64px; padding: 10px 16px; border-radius: 16px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.ms-row b { font-size: 17px; font-weight: 650; }
.ms-row span { grid-column: 1; font-size: 14px; color: var(--page-muted); }
.ms-row[aria-current="page"] span { color: inherit; opacity: .75; }
.ms-row svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; }
.ms-legal { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.ms-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--page-muted); text-decoration: underline; text-decoration-color: var(--page-line); text-underline-offset: 4px; }
.ms-legal a[aria-current="page"] { color: var(--page-text); font-weight: 600; }
.ms-foot { flex: none; display: grid; gap: 8px; padding: 10px var(--pad) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--page-line); background: var(--page-2); }
.ms-theme { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0; border: 0; background: none; color: var(--page-text); font-size: 15px; font-weight: 600; cursor: pointer; }
.ms-theme i { position: relative; width: 46px; height: 28px; border-radius: 99px; background: var(--page-line); box-shadow: inset 0 0 0 1px var(--page-line); transition: background .25s; }
.ms-theme i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(5, 8, 15, .3); transition: transform .25s var(--ease); }
.ms-theme[aria-pressed="true"] i { background: var(--accent); }
.ms-theme[aria-pressed="true"] i::after { transform: translateX(18px); }
.ms-cta { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
.ms-cta .btn { min-height: 52px; }
.ms-foot .btn-ghost { color: var(--page-text); border-color: var(--page-line); background: var(--page); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ms-foot .btn-solid { background: var(--page-text); color: var(--page); }
@media (min-width: 861px) {
  /* C1: the sheet scrolls as a whole on desktop (top bar and CTA foot stick), so the multi column nav is never height
     bound: a bound multicol box spills extra columns sideways and clipped the eighth group (Blog) at 1440. */
  .menu-sheet.is-open { overflow-y: auto; overscroll-behavior: contain; }
  .ms-top { position: sticky; top: 0; z-index: 2; background: var(--page); }
  .ms-foot { position: sticky; bottom: 0; z-index: 2; margin-top: auto; }
  .ms-nav { flex: none; overflow: visible; columns: 3; column-gap: 28px; width: 100%; max-width: 1100px; margin: 0 auto; padding-top: 12px; }
  .ms-g, .ms-row { break-inside: avoid; }
  /* every column starts level: the gap sits under a group, not over it (a column's first group no longer starts 12 px higher) */
  .ms-g { padding-top: 0; padding-bottom: 18px; }
  .ms-row { margin-top: 0; margin-bottom: 22px; }
  @media (min-width: 1180px) { .ms-nav { columns: 4; max-width: 1240px; } .ms-foot { padding-left: max(var(--pad), calc((100% - 1240px) / 2)); padding-right: max(var(--pad), calc((100% - 1240px) / 2)); } }
  .ms-foot { grid-template-columns: auto minmax(0, 420px); justify-content: space-between; align-items: center; padding-left: max(var(--pad), calc((100% - 1100px) / 2)); padding-right: max(var(--pad), calc((100% - 1100px) / 2)); }
  .ms-theme { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) { .menu-sheet, .menu-sheet.is-open { transform: none; transition: opacity .01s, visibility 0s; } .nv-i.is-open > .nv-p { animation: none; } .nv-chev, .crumbs { transition: none; } }

/* breadcrumbs: a small glass pill under the header at the top of the page (inner pages only); it scrolls away */
.crumbs { position: absolute; z-index: 40; top: calc(var(--hdr) + 6px); left: var(--pad); max-width: calc(100% - 2 * var(--pad)); transition: opacity .25s var(--ease); }
.crumbs.is-off { opacity: 0; pointer-events: none; }
.crumbs.is-clash { display: none; }
.crumbs ol { display: flex; align-items: center; min-width: 0; max-width: 100%; margin: 0; padding: 5px 13px; list-style: none; border-radius: 999px; font: 500 13px/1.35 Inter, "Inter Fallback", system-ui, sans-serif; white-space: nowrap; color: rgba(242, 245, 251, .84); background: rgba(5, 8, 15, .46); box-shadow: 0 0 0 1px rgba(214, 226, 255, .16); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.crumbs li { display: flex; align-items: center; flex: none; }
.crumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* the second last crumb (a long path name) gives way first, down to about "Path 10...", so the trail never runs past
   the phone edge and the last crumb stays readable; the 13 px padding keeps the 44 px hit area inside the clipped link */
.crumbs li:nth-last-child(2):not(:first-child) { flex: 0 3 auto; min-width: 6em; }
.crumbs li:nth-last-child(2):not(:first-child) > a { display: block; flex: 0 1 auto; min-width: 0; padding: 13px 0; margin: -13px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs li:nth-last-child(2):not(:first-child) > a::after { content: none; }
.crumbs li + li::before { content: "/" / ""; margin: 0 8px; opacity: .55; }
.crumbs a { position: relative; color: inherit; transition: color .2s; }
.crumbs a::after { content: ""; position: absolute; inset: -14px -6px; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; color: #fff; font-weight: 600; }
body[data-tone="light"] .crumbs ol { color: var(--page-muted); background: rgba(255, 255, 255, .74); box-shadow: 0 0 0 1px var(--page-line); }
body[data-tone="light"] .crumbs a:hover, body[data-tone="light"] .crumbs [aria-current] { color: var(--page-text); }
html[data-theme="dark"] body[data-tone="light"] .crumbs ol { background: rgba(10, 17, 32, .74); }
/* room under the pill where a page's first line sits high on phones (legal heroes, the track record chart caption) */
@media (max-width: 860px) {
  .crumbs ~ main .lg-hero-in { padding-top: calc(var(--hdr) + 56px); }
  .crumbs ~ main .tr-hcap { top: calc(var(--hdr) + 64px); }
  .crumbs ~ main .tc-hero { padding-top: calc(var(--hdr) + 54px); }
}

/* footer: logo and grouped links, Listen on, Contact and the disclosures; groups fold on phones (site.js) */
.ft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 1400px; margin: 0 auto 34px; }
.ft-brand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo tag social" "logo op social"; align-items: center; gap: 4px 40px; padding-bottom: 28px; border-bottom: 1px solid var(--page-line); }
.ft-brand .brand { grid-area: logo; --logo-h: 32px; }
.ft-tag { grid-area: tag; align-self: end; margin: 0; max-width: 44em; font-size: 14.5px; line-height: 1.5; color: var(--page-muted); }
.ft-op { grid-area: op; align-self: start; margin: 0; font-size: 13px; color: var(--page-faint); }
.ft-social { grid-area: social; list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--page-text); background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); transition: box-shadow .2s; }
.ft-social a:hover { box-shadow: 0 0 0 1px var(--page-faint); }
.ft-social svg, .ft-listen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-nav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 28px 18px; }
.ft-nav .fg-h { display: flex; align-items: flex-end; min-height: 2.6em; }
.ft-info { grid-column: 1 / -1; display: grid; grid-template-columns: .9fr .9fr .9fr 1.3fr; gap: 28px; padding-top: 30px; border-top: 1px solid var(--page-line); }
.fg { position: relative; min-width: 0; }
.fg-h { position: relative; margin: 0 0 12px; font: 500 12px/1.3 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--page-faint); }
.fg-tg { display: none; }
ul.fg-b { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
ul.fg-b a { display: inline-flex; align-items: center; flex-wrap: wrap; min-height: 32px; font-size: 14px; color: var(--page-muted); transition: color .2s; }
ul.fg-b a:hover { color: var(--page-text); }
ul.fg-b a[aria-current="page"], .ft-chips a[aria-current="page"] { color: var(--page-text); font-weight: 600; }
.ft-listen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ft-listen a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 11px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--page-text); background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.ft-listen a:hover { box-shadow: 0 0 0 1px var(--page-faint); }
.ft-mail { font-size: 16px; font-weight: 600; } .ft-mail:hover { text-decoration: underline; }
.ft-t { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--page-muted); }
.ft-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.ft-chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.ft-ent { display: grid; gap: 4px; margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); }
.ft-ent b { font-size: 14px; } .ft-ent i { font: 500 11px/1.2 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--page-faint); }
.ft-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--page-muted); }
.ft-ul a { text-decoration: underline; }
.ftr > .fine { margin-left: max(0px, calc((100% - 1400px) / 2)); }
.ft-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; max-width: 1400px; margin: 22px auto 0; padding-top: 16px; border-top: 1px solid var(--page-line); font-size: 13px; color: var(--page-faint); }
.ft-end p { margin: 0; }
.ft-end nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.ft-end a { display: inline-flex; align-items: center; min-height: 36px; color: var(--page-muted); }
.ft-end a:hover { color: var(--page-text); text-decoration: underline; }
@media (max-width: 1179px) { .ft-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 999px) {
  .ft-brand { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "tag" "op" "social"; gap: 10px; }
  .ft-tag { margin-top: 6px; }
  .ft-social { margin-top: 8px; }
  .ft-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-info { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ft { display: block; margin-bottom: 26px; }
  .ft-brand { margin-bottom: 26px; padding-bottom: 0; border-bottom: 0; }
  .ft-nav .fg-h { min-height: 50px; align-items: center; }
  .ft-brand .brand { --logo-h: 28px; }
  .ft-nav, .ft-info { display: block; padding-top: 0; border-top: 0; }
  .ft-info { margin-top: -1px; }
  .fg { border-top: 1px solid var(--page-line); }
  .ft-info .fg:last-child { border-bottom: 1px solid var(--page-line); }
  .fg-h { display: flex; align-items: center; min-height: 50px; margin: 0; font-size: 12.5px; color: var(--page-muted); }
  .ft-news .fg-h { min-height: 0; margin: 0 0 4px; } /* the newsletter kicker is a label, not an accordion toggle */
  html.fg-acc .fg .fg-h::after { content: "+"; margin-left: auto; font: 400 20px/1 Inter, "Inter Fallback", sans-serif; color: var(--page-muted); transition: transform .3s var(--ease); }
  html.fg-acc .fg.is-open .fg-h::after { transform: rotate(45deg); }
  html.fg-acc .fg-tg { display: block; position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
  html.fg-acc .fg:not(.is-open) .fg-b { display: none; }
  .fg-b { padding: 0 0 18px; }
  ul.fg-b { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  ul.fg-b a { min-height: 44px; font-size: 15px; }
  .ft-ul, .ft-t { font-size: 13.5px; }
  .ft-end { flex-direction: column; align-items: flex-start; }
}
/* P1: thumb sized footer targets on phones (44 px) */
@media (max-width: 860px) {
  .ft-end nav { gap: 0 6px; margin-left: -6px; }
  .ft-end a { min-height: 44px; min-width: 44px; padding: 0 6px; justify-content: center; }
  .ft-listen a, .ft-chips a { min-height: 44px; }
  /* every button in the page is at least 44 px tall (page styles set some at 38 to 42) */
  main .btn { min-height: 44px !important; }
}

/* chrome (C1): the footer newsletter (chrome.mjs, same Apps Script endpoint as the main site; site.js posts it) */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ft-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 40px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--page-line); }
.ft-news-t { margin: 6px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.ft-news .ft-t { max-width: 36em; }
.nlf { position: relative; min-width: 0; }
.nlf-hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }
.nlf-row { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 16px; border-radius: 999px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); transition: box-shadow .25s; }
.nlf-row:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(127, 178, 255, .16); }
.nlf-row input { flex: 1 1 auto; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: var(--page-text); font: 400 16px Inter, "Inter Fallback", sans-serif; }
.nlf-row input::placeholder { color: var(--page-faint); }
.nlf-row .btn { flex: none; min-height: 44px; background: var(--page-text); color: var(--page); }
.nlf-row .btn:disabled { opacity: .7; cursor: default; }
.nlf-msg { min-height: 20px; margin: 8px 0 0 16px; font-size: 13.5px; color: var(--page-muted); }
.nlf.is-ok .nlf-msg { color: var(--gain); } .nlf.is-err .nlf-msg { color: #D64545; }
html[data-theme="dark"] .nlf.is-err .nlf-msg { color: #FF9B9B; }
.nlf.is-ok .nlf-row { box-shadow: 0 0 0 1px rgba(61, 220, 151, .6); }
.nlf-fine { margin: 6px 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--page-faint); } .nlf-fine a { text-decoration: underline; }
/* C1: eight footer columns (Blog joined); a dense two column list for a long menu sub list (blog topics); a second heading inside a sheet group */
.ft-nav { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.nv-col-dense { min-width: 300px; }
.nv-col-dense .nv-ls { grid-template-columns: 1fr 1fr; gap: 0 4px; }
.nv-col-dense .nv-l { padding: 7px 12px; } .nv-col-dense .nv-l b { font-size: 14px; }
.ms-h2 { margin-top: 16px; }
@media (max-width: 1179px) { .ft-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 999px) { .ft-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ft-news { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0; }
  .ft-news-t { font-size: 20px; }
  .nlf-row { flex-wrap: wrap; padding: 6px; border-radius: 22px; }
  .nlf-row input { flex-basis: 100%; height: 44px; padding: 0 10px; }
  .nlf-row .btn { flex: 1 1 100%; min-height: 48px; }
  .nlf-msg, .nlf-fine { margin-left: 6px; }
}
@media (max-width: 600px) { .ft-news { border-bottom: 0; padding-top: 0; } .ft-nav .fg:first-child { border-top: 1px solid var(--page-line); } }

/* ---------- layers through the page (site.js): each .lay pins, the next slides over it ---------- */
.lay-stack { position: relative; }
.lay { position: sticky; top: 0; transform-origin: 50% 30%; overflow: hidden; overflow: clip; will-change: transform; }
.lay + .lay { box-shadow: 0 -40px 80px -30px rgba(5,8,15,.45); }
.lay-stack > .lay:not(:first-child)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 5; background: linear-gradient(90deg, transparent, rgba(190,215,255,.55), transparent); pointer-events: none; }
.lay-stack > .lay { position: sticky; } /* wins over a section's own position: relative */
@media (prefers-reduced-motion: reduce) { .lay, .lay-stack > .lay { position: relative; } }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="2"] { transition-delay: .08s; } [data-reveal="3"] { transition-delay: .16s; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- page hero: a full bleed photo or a looping clip ---------- */
.pg-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: var(--text); background: var(--ink); }
.pg-hero > img, .pg-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pg-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(5,8,15,.94) 0%, rgba(5,8,15,.55) 40%, rgba(5,8,15,.12) 75%, rgba(5,8,15,.4)), var(--grade); }
@media (max-width: 860px) { .pg-hero::before { background: linear-gradient(to top, rgba(5,8,15,.94) 0%, rgba(5,8,15,.76) 44%, rgba(5,8,15,.48) 72%, rgba(5,8,15,.5)), var(--grade); } }
.pg-hero-in { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto; padding: calc(var(--hdr) + 40px) var(--pad) clamp(40px, 9vh, 100px); }
.pg-hero .sub { max-width: 29.02em; color: var(--muted); font-size: clamp(16px, 1.3vw, 20px); }
.pg-hero-short { min-height: 78svh; }

/* ---------- bands: a media plate beside a few words, alternating ---------- */
.pg-band { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(60px, 10vh, 130px) var(--pad); color: var(--page-text); }
.pg-band.flip { grid-template-columns: 1fr 1.25fr; }
.pg-band.flip .pg-media { order: 2; }
.pg-band .kicker { color: var(--page-muted); }
.pg-band .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.pg-band p.lede { margin: 18px 0 0; max-width: 26.5em; font-size: clamp(16px, 1.25vw, 19px); color: var(--page-muted); }
.pg-media { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--page-line), 0 50px 100px -50px rgba(5,8,15,.55); }
.pg-media > img, .pg-media > video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 16 / 10); object-fit: cover; object-position: var(--pos, 50% 50%); }
.pg-media[data-pop] { cursor: zoom-in; }
.pg-media figcaption { position: absolute; left: 16px; bottom: 14px; padding: 7px 12px; border-radius: 999px; font: 500 11.5px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .05em; color: #0B1220; background: rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pg-media .tag-live { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; color: #F2F5FB; background: rgba(5,8,15,.6); backdrop-filter: blur(8px); }
.pg-media .tag-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 3px rgba(61,220,151,.2); }
.pg-dark { background: var(--ink); color: var(--text); }
.pg-dark .pg-band, .pg-band.pg-dark { color: var(--text); }
.pg-dark .kicker, .pg-dark .pg-band .kicker { color: var(--muted); }
.pg-dark .pg-band p.lede { color: var(--muted); }
.pg-dark .kicker .num { color: var(--text); border-color: var(--line); }
.pg-wrap { background: var(--page); }
.pg-wrap.alt { background: var(--frame-glow); }

/* device frames outside the reel (same look as the landing reel) */
.dev-pair { position: relative; padding-bottom: 8%; }
.dev-pair .laptop { width: 92%; }
.dev-pair .handset-x { width: 24%; right: 0; bottom: 0; }

/* ---------- gallery: a strip of plates, swipe on phones, every plate pops open ---------- */
.pg-gallery { padding: clamp(50px, 8vh, 100px) 0; color: var(--page-text); }
.pg-gallery-head { max-width: 1400px; margin: 0 auto 28px; padding: 0 var(--pad); display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.pg-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 34vw); gap: 14px; overflow-x: auto; padding: 4px var(--pad) 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pg-strip::-webkit-scrollbar { display: none; }
.pg-strip > * { scroll-snap-align: start; }
.pg-strip .pg-media > img, .pg-strip .pg-media > video { aspect-ratio: 4 / 5; }
.pg-strip-nav { display: flex; gap: 8px; }
.pg-strip-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--page-line); background: var(--page-2); color: var(--page-text); cursor: pointer; }

/* ---------- steps: the clip on the left changes as each step scrolls past ---------- */
.pg-steps { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 90px); max-width: 1400px; margin: 0 auto; padding: clamp(60px, 10vh, 120px) var(--pad); color: var(--page-text); }
.pg-steps-media { position: sticky; top: calc(var(--hdr) + 4vh); align-self: start; }
.pg-steps-media .pg-media > :not(.is-on) { position: absolute; inset: 0; opacity: 0; }
.pg-steps-media .pg-media > * { transition: opacity .5s var(--ease); }
.pg-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .32; transition: opacity .5s var(--ease); }
.pg-step.is-on { opacity: 1; }
.pg-step h3 { margin: 10px 0 0; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -0.03em; }
.pg-step p { margin: 12px 0 0; max-width: 25.24em; color: var(--page-muted); }
.pg-step .num { font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; padding: 4px 8px; border: 1px solid var(--page-line); border-radius: 6px; align-self: flex-start; }

/* ---------- tiles: small image cards in a grid ---------- */
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; padding: 0 var(--pad) clamp(60px, 10vh, 120px); }
.pg-tile { position: relative; display: block; border-radius: 20px; overflow: hidden; min-height: 300px; color: var(--text); background: var(--ink); }
.pg-tile img, .pg-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pg-tile:hover img, .pg-tile:hover video { transform: scale(1.05); }
.pg-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,15,.9), rgba(5,8,15,.1) 60%); }
.pg-tile-in { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; }
.pg-tile-in b { display: block; font-size: 19px; letter-spacing: -0.02em; }
.pg-tile-in span { font-size: 13px; color: var(--muted); }

/* ---------- FAQ on a photo ---------- */
.pg-faq { position: relative; overflow: hidden; color: var(--text); background: var(--ink); }
.pg-faq > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.34) saturate(.8); }
.pg-faq-in { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 90px); max-width: 1400px; margin: 0 auto; padding: clamp(70px, 12vh, 140px) var(--pad); }
.pg-faq details { border-bottom: 1px solid var(--line); }
.pg-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; cursor: pointer; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; font: 400 22px/1 "JetBrains Mono", "JBM Fallback", monospace; color: var(--muted); transition: transform .3s var(--ease); }
.pg-faq details[open] summary::after { transform: rotate(45deg); }
.pg-faq details p { margin: 0 0 20px; max-width: 39.12em; color: var(--muted); }
.pg-faq details a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- closing band ---------- */
.pg-close { position: relative; min-height: 70vh; display: grid; place-items: center; text-align: center; overflow: hidden; color: var(--text); background: var(--ink); }
.pg-close > img, .pg-close > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: brightness(.55); }
.pg-close-in { position: relative; z-index: 1; padding: 80px var(--pad); }

/* ---------- prose pages (legal): a quiet column with a sticky contents list ---------- */
.pg-prose { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: clamp(28px, 5vw, 80px); justify-content: center; padding: clamp(50px, 8vh, 90px) var(--pad); color: var(--page-text); background: var(--page); }
.pg-toc { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; font-size: 14px; }
.pg-toc a { display: block; padding: 7px 0; color: var(--page-muted); }
.pg-toc a:hover { color: var(--page-text); }
.pg-prose article { font-size: 16.5px; line-height: 1.7; }
.pg-prose article h2 { margin: 2.2em 0 .6em; font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; }
.pg-prose article h3 { margin: 1.6em 0 .4em; font-size: 18px; }
.pg-prose article p, .pg-prose article li { color: var(--page-muted); }
.pg-prose article a { text-decoration: underline; color: var(--page-text); }
.pg-prose article table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-prose article th, .pg-prose article td { padding: 10px 12px; border-bottom: 1px solid var(--page-line); text-align: left; vertical-align: top; }

/* ---------- pop viewer (site.js) ---------- */
.pop { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 5vh 4vw; background: rgba(5,8,15,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.pop.is-open { opacity: 1; pointer-events: auto; }
.pop-stage { display: flex; max-width: 100%; max-height: 84vh; transform: scale(.96); transition: transform .45s var(--ease); cursor: crosshair; }
.pop.is-open .pop-stage { transform: none; }
.pop-stage img, .pop-stage video { max-width: 92vw; max-height: 84vh; width: auto; height: auto; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.pop-cap { margin: 0; max-width: 44.16em; text-align: center; font-size: 14px; color: rgba(226,233,246,.75); }
.pop-x { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.pop-x svg { width: 20px; height: 20px; }
.pop-loupe { position: fixed; left: 0; top: 0; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; opacity: 0; background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 30px 70px rgba(0,0,0,.6); transition: opacity .2s; }
.pop-loupe.is-on { opacity: 1; }
body.pop-open { overflow: hidden; }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .pg-band, .pg-band.flip, .pg-steps, .pg-faq-in, .pg-prose { grid-template-columns: 1fr; }
  .pg-band.flip .pg-media { order: 0; }
  .pg-steps-media { top: calc(var(--hdr) + 8px); z-index: 2; }
  .pg-step { min-height: 46vh; }
  .pg-strip { grid-auto-columns: 78vw; }
  .pg-toc { display: none; }
  .pg-strip-nav { display: none; }
  /* P1: text sits over more of the photo on phones; a little less light behind the FAQ and the closing band */
  .pg-faq > img { filter: brightness(.32) saturate(.8); }
  .pg-close > img, .pg-close > video { filter: brightness(.46); }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- the screen panel (panel.js): infographics as layers inside one pinned glass screen ---------- */
.pnl { position: relative; height: calc(var(--n, 4) * 100svh); background: var(--frame-glow); color: var(--page-text); }
.pnl-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(260px, .7fr) 1.6fr; gap: clamp(24px, 4vw, 72px); align-items: center; max-width: 1480px; margin: 0 auto; padding: calc(var(--hdr) + 3vh) var(--pad) 5vh; }
.pnl-head, .pnl-screen { min-width: 0; }
.pnl-head .kicker { color: var(--page-muted); }
.pnl-head .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.pnl-head h2 { margin: 0; font-weight: 700; font-size: clamp(34px, 3.8vw, 60px); line-height: 1; letter-spacing: -0.04em; }
.pnl-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; }
.pnl-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 14px; border-radius: 14px; cursor: pointer; color: var(--page-faint); transition: background .4s var(--ease), color .4s; }
.pnl-steps li b { font: 500 12px/1.6 "JetBrains Mono", "JBM Fallback", monospace; }
.pnl-steps li span { font-size: 15px; font-weight: 600; line-height: 1.35; }
.pnl-steps li small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--page-muted); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s; }
.pnl-steps li.is-on { color: var(--page-text); background: var(--page-glass); box-shadow: 0 0 0 1px var(--page-line); }
.pnl-steps li.is-on small { max-height: 80px; opacity: 1; }
.pnl-bar { height: 2px; margin-top: 18px; border-radius: 2px; background: var(--page-line); overflow: hidden; }
.pnl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gain)); transform-origin: 0 50%; transform: scaleX(0); }

.pnl-screen { position: relative; aspect-ratio: 16 / 10; max-height: calc(100svh - var(--hdr) - 10vh); width: 100%; border-radius: 30px; padding: 1px; perspective: 1600px; perspective-origin: 50% 0%;
  background: conic-gradient(from 210deg at 50% 50%, rgba(127,178,255,.55), rgba(61,220,151,.35), rgba(255,255,255,.12), rgba(127,178,255,.55));
  box-shadow: 0 60px 140px -50px rgba(5,8,15,.75), 0 0 0 1px rgba(5,8,15,.4); }
.pnl-glass { position: absolute; inset: 1px; border-radius: 29px; overflow: hidden; background:
  radial-gradient(80% 60% at 20% 0%, rgba(127,178,255,.16), rgba(127,178,255,0) 60%),
  radial-gradient(60% 50% at 100% 100%, rgba(61,220,151,.10), rgba(61,220,151,0) 60%), #060A14; }
.pnl-glass::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(214,226,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(214,226,255,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent); -webkit-mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent); }
.pnl-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.07), rgba(255,255,255,0) 30%); }
.pl { position: absolute; inset: 7% 2.6% 2.6%; border-radius: 22px; background: radial-gradient(90% 70% at 15% 0%, rgba(127,178,255,.10), rgba(127,178,255,0) 60%), #070C18; box-shadow: 0 0 0 1px rgba(214,226,255,.10), 0 -10px 40px rgba(0,0,0,.45); overflow: hidden; padding: clamp(16px, 3%, 36px); color: #EAF0FA; transform-origin: 50% 0%; will-change: transform, opacity, filter; display: flex; flex-direction: column; }
.pl { pointer-events: none; }
/* P1: while the layer above changes, this layer's content waits under a cover of its own background (panel.js --plk) */
.pl::after { content: ""; position: absolute; inset: 0; z-index: 20; border-radius: inherit; background: inherit; opacity: var(--plk, 0); pointer-events: none; }
.pl[inert] * { cursor: default; }
.pl.is-on { pointer-events: auto; }
.pnl-dark { background: radial-gradient(90% 70% at 70% 40%, #0E1C36 0%, #05080F 70%); color: var(--text); }
.pnl-dark .pnl-head .kicker { color: var(--muted); }
.pnl-dark .pnl-head .kicker .num { color: var(--text); border-color: var(--line); }
.pnl-dark .pnl-steps li { color: var(--faint); }
.pnl-dark .pnl-steps li small { color: var(--muted); }
.pnl-dark .pnl-steps li.is-on { color: var(--text); background: rgba(255,255,255,.05); box-shadow: 0 0 0 1px var(--line); }
.pnl-dark .pnl-bar { background: var(--line); }
.pl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,233,246,.5); }
.pl-title { margin: 12px 0 0; font-size: clamp(20px, 2.1vw, 34px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.08; max-width: 17.53em; }
.pl-body { position: relative; flex: 1; min-height: 0; margin-top: 14px; }
.pl-body > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-note { font: 400 11px/1.5 "JetBrains Mono", "JBM Fallback", monospace; color: rgba(226,233,246,.62); }

/* motion components inside the screen always take the dark tokens */
.pnl-screen .iv2 { --iv2-surface: #070C18; --iv2-surface-2: #0D1628; --iv2-fg: #F2F5FB; --iv2-muted: rgba(226,233,246,.66); --iv2-faint: rgba(226,233,246,.42); --iv2-line: rgba(214,226,255,.14); --iv2-grid: rgba(214,226,255,.06); --iv2-strat: #7FB2FF; --iv2-gain: #3DDC97; --iv2-gain-soft: rgba(61,220,151,.10); --iv2-loss: #FF7B7B; --iv2-loss-soft: rgba(255,123,123,.08); --iv2-shadow: none; }
.pnl-screen .iv2 .iv2-head { padding-left: 0; padding-right: 0; }
.pnl-screen .iv2 .iv2-cap { padding-left: 0; }

/* infographic primitives, animated while their layer is on top */
.ig-node rect { fill: rgba(13,22,40,.92); stroke: rgba(214,226,255,.22); }
.ig-node.hi rect { stroke: rgba(127,178,255,.8); fill: rgba(20,38,72,.95); }
.ig-node.ok rect { stroke: rgba(61,220,151,.75); }
.ig-node text { fill: #EAF0FA; font: 600 15px Inter, "Inter Fallback", sans-serif; }
.ig-node text.s { fill: rgba(226,233,246,.6); font: 500 12.5px "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .02em; }
.ig-flow { fill: none; stroke: rgba(127,178,255,.85); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.ig-flow.g { stroke: rgba(61,220,151,.9); }
.ig-flow.x { stroke: rgba(255,123,123,.7); stroke-dasharray: 2 7; }
.ig-draw { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.ig-pulse { fill: #7FB2FF; filter: drop-shadow(0 0 6px rgba(127,178,255,.9)); }
.ig-pulse.g { fill: #3DDC97; filter: drop-shadow(0 0 6px rgba(61,220,151,.9)); }
.ig-fade { opacity: 0; }
.pl.is-on .ig-flow { animation: igDash 1.2s linear infinite; }
.pl.is-on .ig-draw { animation: igDraw 1.8s cubic-bezier(.2,.7,.1,1) forwards; animation-delay: var(--d, 0s); }
.pl.is-on .ig-fade { animation: igFade .7s ease forwards; animation-delay: var(--d, .2s); }
@keyframes igDash { to { stroke-dashoffset: -24; } }
@keyframes igDraw { to { stroke-dashoffset: 0; } }
@keyframes igFade { to { opacity: 1; } }
.ig-bars { display: grid; gap: 14px; align-content: center; height: 100%; }
.ig-bar { display: grid; grid-template-columns: minmax(110px, 26%) 1fr auto; gap: 14px; align-items: center; font-size: 14px; }
.ig-bar .lbl { color: rgba(226,233,246,.75); }
.ig-bar .trk { position: relative; height: 12px; border-radius: 99px; background: rgba(214,226,255,.07); overflow: hidden; }
.ig-bar .trk i { position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); border-radius: inherit; background: linear-gradient(90deg, rgba(127,178,255,.55), #7FB2FF); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0s); }
.ig-bar.us .trk i { background: linear-gradient(90deg, rgba(61,220,151,.55), #3DDC97); }
.ig-bar .val { font: 600 14px "JetBrains Mono", "JBM Fallback", monospace; min-width: 9ch; text-align: right; }
.pl.is-on .ig-bar .trk i { transform: scaleX(1); }
.ig-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.ig-kpi { padding: 12px 14px; border-radius: 14px; background: rgba(214,226,255,.05); border: 1px solid rgba(214,226,255,.1); }
.ig-kpi b { display: block; font: 600 clamp(18px, 1.8vw, 26px)/1.1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.02em; }
.ig-kpi span { font-size: 12px; color: rgba(226,233,246,.55); }
/* P1: on phones a wide diagram (800 units across) shrinks to 4 to 7 px text; a vertical list with the diagram's own
   words stands in for it (same pattern as .b5-v on the generated pages). Markup: <ol class="ig-v"> right after the svg;
   .ig-v.all replaces the diagram at every width (a small card). */
.ig-v { display: none; list-style: none; margin: 0; padding: 0; gap: 4px; align-content: safe center; height: 100%; }
.ig-v li { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 1px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: rgba(214,226,255,.04); border: 1px solid rgba(214,226,255,.12); color: #EAF0FA; }
.ig-v li.hi { border-color: rgba(127,178,255,.55); }
.ig-v li.ok { border-color: rgba(61,220,151,.45); }
.ig-v i { flex: 0 0 22px; font: 500 11px/1.4 "JetBrains Mono", "JBM Fallback", monospace; font-style: normal; color: #7FB2FF; }
.ig-v b { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.ig-v span { margin-left: auto; font-size: 12px; line-height: 1.3; color: rgba(226,233,246,.72); text-align: right; }
.ig-v li.e { display: block; margin: -1px 0; padding: 0 0 0 40px; border: 0; background: none; font: 500 11px/1.15 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .06em; text-transform: uppercase; color: rgba(226,233,246,.66); }
.ig-v li.e.g { color: #3DDC97; } .ig-v li.e.x { color: #FF9B9B; } .ig-v li.e.b { color: #7FB2FF; }
.ig-v.all { display: grid; }
.pl-body > svg:has(+ .ig-v.all), .bx-body > svg:has(+ .ig-v.all) { display: none !important; }
@media (max-width: 860px) {
  .pl-body > svg:has(+ .ig-v), .bx-body > svg:has(+ .ig-v) { display: none !important; }
  .ig-v { display: grid; }
}
.ig-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ig-chips span { padding: 6px 10px; border-radius: 99px; font: 500 12px "JetBrains Mono", "JBM Fallback", monospace; border: 1px solid rgba(214,226,255,.14); color: rgba(226,233,246,.8); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--k, 0) * 40ms); }
.ig-chips span.in { border-color: rgba(61,220,151,.5); color: #3DDC97; }
.ig-chips span.out { border-color: rgba(255,123,123,.45); color: #FF9B9B; text-decoration: line-through; }
.pl.is-on .ig-chips span { opacity: 1; transform: none; }
.pl video, .pl .pl-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 12px; }

@media (max-width: 860px) {
  .pnl-sticky { grid-template-columns: 1fr; align-content: start; gap: 16px; padding-top: calc(var(--hdr) + 14px); }
  .pnl-head h2 { font-size: 30px; }
  .pnl-steps { grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; margin-top: 14px; scrollbar-width: none; max-width: 100%; }
  .pl { inset: 6% 3% 3%; }
  .pnl-steps li small { display: none; }
  .pnl-screen { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--hdr) - 170px); border-radius: 24px; }
  .pnl-glass { border-radius: 23px; }
  .ig-bar { grid-template-columns: 1fr auto; } .ig-bar .trk { grid-column: 1 / -1; grid-row: 2; }
  .ig-bars { align-content: start; gap: 12px; }
  .pl-title { font-size: 19px; }
  .pl-note { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pnl { height: auto; } .pnl-sticky { position: relative; height: auto; }
  .pnl-screen { aspect-ratio: auto; max-height: none; } .pnl-glass { position: relative; }
  .pl { position: relative; transform: none !important; opacity: 1 !important; filter: none !important; min-height: 420px; border-bottom: 1px solid rgba(214,226,255,.1); }
  .ig-draw { stroke-dashoffset: 0; } .ig-fade { opacity: 1; }
}

/* ---------- CTA dock (site.js) ---------- */
.cta-dock { position: fixed; left: auto; right: 22px; bottom: 22px; z-index: 70; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; transform: translateY(140%); opacity: 0; pointer-events: none;
  background: rgba(10, 18, 34, .72); color: #F2F5FB; border: 1px solid rgba(214, 226, 255, .16); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: transform .55s var(--ease), opacity .4s var(--ease); }
.cta-dock.is-on { transform: none; opacity: 1; pointer-events: auto; }
/* P1: one Start free on screen at a time: desktop keeps the header button (site.js marks the dock copy .is-dup);
   phones keep the dock button and fade the header one */
@media (min-width: 861px) { .cta-dock .is-dup { display: none; } }
@media (min-width: 861px) { .cta-dock { padding: 6px 6px 6px 14px; } .cta-dock .btn { min-height: 38px; padding: 0 15px; font-size: 13.5px; } .cta-dock-k { font-size: 11px; } }
@media (min-width: 861px) and (max-width: 1180px) { .cta-dock-k { display: none; } }
.cta-dock-k { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .02em; color: rgba(226, 233, 246, .78); white-space: nowrap; }
.cta-dock-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 4px rgba(61, 220, 151, .16); }
.cta-dock .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
.cta-dock .btn-ghost { color: #F2F5FB; border-color: rgba(214, 226, 255, .18); background: rgba(255, 255, 255, .06); }
.cta-dock .btn-solid { background: #F2F5FB; color: #05080F; }
.cta-dock .btn-solid:hover { background: #fff; }
html[data-theme="light"] .cta-dock { background: rgba(255, 255, 255, .82); color: #0B1220; border-color: rgba(11, 18, 32, .1); box-shadow: 0 24px 60px -24px rgba(11, 18, 32, .35); }
html[data-theme="light"] .cta-dock-k { color: rgba(11, 18, 32, .66); }
html[data-theme="light"] .cta-dock .btn-ghost { color: #0B1220; border-color: rgba(11, 18, 32, .12); background: rgba(11, 18, 32, .03); }
html[data-theme="light"] .cta-dock .btn-solid { background: #0B1220; color: #fff; }
/* a light sheen across primary buttons on hover */
.btn-solid { position: relative; overflow: hidden; }
.btn-solid::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); transition: left .7s var(--ease); pointer-events: none; }
.btn-solid:hover::after { left: 130%; }
/* chrome (F1): on phones the dock is the one bottom bar: a menu button in the thumb zone, the page's second step
   and the primary action; labels shorten on narrow phones */
.dock-menu { display: none; }
.cta-dock .lab-s { display: none; }
@media (max-width: 860px) {
  .cta-dock { left: 0; right: 0; bottom: 0; gap: 8px; transform: translateY(110%); border-radius: 20px 20px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); justify-content: stretch; }
  .cta-dock.is-on { transform: none; }
  /* P1: the bar is denser on phones so page text does not ghost through behind the buttons */
  .cta-dock { background: rgba(10, 18, 34, .94); }
  html[data-theme="light"] .cta-dock { background: rgba(255, 255, 255, .96); }
  .cta-dock-k { display: none; }
  .cta-dock .btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 14px; }
  .cta-dock .btn-solid { flex-grow: 1.35; }
  .dock-menu { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 14px; border: 1px solid rgba(214, 226, 255, .18); background: rgba(255, 255, 255, .06); color: inherit; cursor: pointer; }
  html[data-theme="light"] .dock-menu { border-color: rgba(11, 18, 32, .12); background: rgba(11, 18, 32, .03); }
  .dock-menu svg { width: 20px; height: 20px; }
  body.has-dock .peel-progress { bottom: auto; top: 0; }
}
@media (max-width: 400px) { .cta-dock .lab-l { display: none; } .cta-dock .lab-s { display: inline; } }
@media (max-width: 860px) { .cta-dock .btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media (max-width: 360px) { .cta-dock { gap: 6px; padding-left: 10px; padding-right: 10px; } .cta-dock .btn { padding: 0 10px; font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .cta-dock { transition: none; } .btn-solid::after { display: none; } }

/* ================= community band (TK, 12 Oct 2026): Join the WhatsApp group =================
   Markup: instiv2-tools/community.mjs (podcast, learn and tools generators). Sign up for RupeeCase stays the solid,
   more prominent button; the WhatsApp link is the ghost button. WhatsApp green on the small icon only. The QR (for a
   desktop reader to scan with a phone) is hidden on phones, where the buttons are the way in. */
.wa-band { position: relative; z-index: 1; padding: clamp(28px, 5vw, 64px) var(--pad); background: var(--page); color: var(--page-text); }
.wa-in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 4vw, 56px); padding: clamp(22px, 3.4vw, 40px); border-radius: 24px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line), 0 30px 70px -40px rgba(5, 8, 15, .35); }
.wa-band .kicker { color: var(--page-faint); margin: 0 0 10px; }
.wa-h { margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: var(--page-text); }
.wa-t { margin: 0 0 20px; max-width: 58ch; font-size: 16px; line-height: 1.55; color: var(--page-muted); }
.wa-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.wa-band .btn { min-height: 48px; }
.wa-band .btn-solid { background: var(--page-text); color: var(--page-2); }
.wa-band .btn-solid:hover { background: var(--page-text); filter: brightness(1.15); }
.wa-band .btn-ghost { background: transparent; border-color: var(--page-line); box-shadow: inset 0 0 0 1px var(--page-line); color: var(--page-text); backdrop-filter: none; -webkit-backdrop-filter: none; }
.wa-band .btn-ghost:hover { background: var(--page); }
.wa-ic { width: 20px; height: 20px; flex: none; }
.wa-tap { display: none; }
.wa-qr { margin: 0; display: grid; justify-items: center; gap: 10px; width: 176px; }
.wa-qr-svg { display: block; width: 156px; height: 156px; border-radius: 14px; box-shadow: 0 0 0 1px var(--page-line); }
.wa-qr figcaption { display: grid; justify-items: center; gap: 6px; text-align: center; }
.wa-qr figcaption span { font-size: 12.5px; color: var(--page-faint); }
.wa-one { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--page-text); box-shadow: inset 0 0 0 1px var(--page-line); }
.wa-one:hover { background: var(--page); }
@media (max-width: 720px) {
  .wa-in { grid-template-columns: 1fr; padding: 22px 18px; border-radius: 20px; }
  .wa-qr { display: none; }
  .wa-scan { display: none; }
  .wa-tap { display: inline; }
  .wa-t { font-size: 15.5px; }
  .wa-ctas { flex-direction: column; }
  .wa-ctas .btn { width: 100%; }
}
/* the dock's WhatsApp action (learn and podcast pages) */
.cta-dock .wa-ic { width: 18px; height: 18px; }

/* ================= consent banner (site.js, TK 12 Oct 2026) =================
   Corner card bottom left on desktop (the dock sits bottom right); bottom sheet on phones, where site.js hides the dock
   while it is open. Under the menu sheet (z 90), hidden while the menu is open. */
.consent { position: fixed; left: 22px; bottom: 22px; z-index: 80; width: min(380px, calc(100vw - 44px)); padding: 18px; border-radius: 20px; background: var(--page-2); color: var(--page-text); box-shadow: 0 0 0 1px var(--page-line), 0 30px 70px -24px rgba(5, 8, 15, .45); animation: csIn .3s var(--ease); }
.consent[hidden] { display: none; }
body.menu-open .consent { display: none; }
@keyframes csIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.consent-t { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--page-text); }
.consent-t a { color: var(--page-text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent-b { display: flex; gap: 10px; }
.consent .btn { flex: 1 1 0; min-height: 44px; padding: 0 16px; font-size: 15px; }
.consent .consent-ok { background: var(--page-text); color: var(--page-2); }
.consent .consent-no { background: transparent; color: var(--page-text); box-shadow: inset 0 0 0 1px var(--page-line); border-color: transparent; }
@media (max-width: 860px) {
  .consent { left: 0; right: 0; bottom: 0; width: auto; border-radius: 20px 20px 0 0; padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
.ft-end .ft-cookie { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0; font: inherit; color: var(--page-muted); cursor: pointer; }
@media (max-width: 860px) { .ft-end .ft-cookie { min-height: 44px; padding: 0 6px; } }
.ft-end .ft-cookie:hover { color: var(--page-text); text-decoration: underline; }

/* ---------- P2 (12 Oct 2026): phone memory. iOS kills a tab that holds too many composited layers and decoded
   bitmaps, then reloads it at the top ("refreshes to the hero") and after two or three tries shows "A problem
   repeatedly occurred". On touch screens: no backdrop blur anywhere (each blurred box is its own layer plus a copy
   of what lies behind it; the glass colours stay, a few are made more opaque so text keeps its contrast), and the
   sheets of the lay stack only become layers while site.js moves them. ---------- */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .lay { will-change: auto; }
  .cta-dock { background: rgba(10, 18, 34, .94); }
  .hdr.is-solid { background: rgba(5, 8, 15, .96); }
}

/* ================= Explore next (Package L1, 12 Oct 2026): the related links block =================
   Markup: instiv2-tools/related.mjs (applyExplore, run by chrome.mjs on every page). 3 to 6 link cards, no buttons, so
   the page keeps at most two calls to action per screen. Theme tokens only. */
.rel { position: relative; z-index: 1; padding: clamp(36px, 6vw, 80px) var(--pad); background: var(--page); color: var(--page-text); }
.rel-in { max-width: 1180px; margin: 0 auto; }
.rel-head { margin: 0 0 clamp(18px, 2.4vw, 28px); }
.rel-head .kicker { margin: 0 0 10px; color: var(--page-faint); }
.rel-head .h-m { font-size: clamp(24px, 2.6vw, 34px); color: var(--page-text); }
.rel-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rel-a { display: grid; align-content: start; gap: 6px; height: 100%; min-height: 104px; padding: 16px 18px; border-radius: 18px; background: var(--page-2); box-shadow: 0 0 0 1px var(--page-line); color: var(--page-text); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.rel-a:hover, .rel-a:focus-visible { box-shadow: 0 0 0 1px var(--page-text); transform: translateY(-1px); }
.rel-k { font: 500 11px/1.2 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--page-faint); }
.rel-a b { font-size: 16.5px; line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rel-a small { font-size: 13.5px; line-height: 1.45; color: var(--page-muted); }
@media (max-width: 900px) { .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rel-grid { grid-template-columns: 1fr; gap: 8px; } .rel-a { min-height: 0; padding: 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .rel-a { transition: none; } }