/* ==========================================================================
   Wolfpack — mock build
   Coded from the Figma masters in the Wolfpack file, page "Website":
     Light · "Homepage — Desktop ⭐ MASTER · Light"
     Dark  · "Homepage — Desktop · DARK"
   Every value below was read from those frames.
   Steps done: desktop light · desktop dark. Tablet and mobile come next.
   ========================================================================== */

/* ---- Palette (fixed values) ------------------------------------------- */
:root {
  --navy: #0b1e38;
  --ink-2: #4a5a70;
  --ink-3: #656f80;
  --ink-4: #8a99ad;
  --blue: #005df5;
  --blue-light: #5b9bff;     /* the blue on dark grounds */
  --blue-tab: #3b72ff;
  --orange: #c0451b;
  --orange-light: #ec6e46;   /* the orange on dark grounds — 6.2:1 on --night (Meesh, 2026-09-30) */
  --bone: #f5f2ea;           /* the mark on dark */
  --card-line: rgba(11, 30, 56, 0.13);
  --hairline: rgba(11, 30, 56, 0.16);

  --footer-bg: #0b1e38;
  --footer-text: #dde3eb;
  --footer-muted: #8a99ad;
  --footer-rule: #2b3d57;

  /* blue block: the angle depends on each block's proportions (see .block--*) */
  --block-stops: #2e7bff 11.1%, #0b57e8 51.9%, #0a3fb0 85.2%;
  --wash-panel: radial-gradient(ellipse 66% 263% at 46% 45%, #ffffff 0%, #f3f7fe 33%, #e6eefc 67%, #dce7fb 100%);
  --wash-beliefs: radial-gradient(ellipse 66% 263% at 46% 45%, #ffffff 0%, #f5f8fe 50%, #eaf0fc 85%, #e2eafb 100%);
  --night: #091123;   /* one flat navy for every dark section — a per-section gradient left faint seams (Meesh, 2026-09-29) */

  /* portfolio framing (Michelle's own tokens, not Wolfpack's) */
  --mm-ink: #15120f;
  --mm-bone: #e8dfd3;
  --mm-muted: rgba(232, 223, 211, 0.68);
  --mm-line: rgba(232, 223, 211, 0.22);
}

/* ---- Theme tokens: the only things that change between light and dark --- */
:root,
:root[data-theme="light"] {
  --page: #ffffff;
  --section-bg: #ffffff;
  --beliefs-bg: var(--wash-beliefs);
  --text: var(--navy);
  --text-2: var(--ink-2);        /* body copy */
  --text-3: var(--ink-3);        /* eyebrows, secondary */
  --accent: var(--blue);         /* links, hero accent, chevrons */
  --chevron-gap: var(--orange);
  --rule-c: #cdd4df;
  --mark: var(--navy);
  --ghost-bg: rgba(255, 255, 255, 0.5);
  --ghost-line: var(--ink-4);
  --ghost-text: var(--navy);
  --section-soft: linear-gradient(180deg, #fafbfd 0%, #e7ecf4 100%);   /* tablet / mobile: Gap + PackScore */
  --nav-glass: rgba(255, 255, 255, 0.78);      /* the pinned nav once you scroll */
  --nav-line: rgba(11, 30, 56, 0.08);
}
:root[data-theme="dark"] {
  --page: #091123;
  --section-bg: var(--night);
  --beliefs-bg: var(--night);
  --text: #ffffff;
  --text-2: var(--ink-4);
  --text-3: var(--ink-4);
  --accent: var(--blue-light);
  --chevron-gap: var(--orange-light);
  --rule-c: #2b3d57;
  --mark: var(--bone);
  --ghost-bg: rgba(255, 255, 255, 0.1);
  --ghost-line: rgba(255, 255, 255, 0.18);
  --ghost-text: #ffffff;
  --section-soft: var(--night);
  --nav-glass: rgba(10, 16, 32, 0.74);
  --nav-line: rgba(255, 255, 255, 0.08);
}

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h, 44px) + var(--nav-h)); background: var(--page); }
:root { --nav-h: 88px; }   /* the pinned nav's height — section links land just below it */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
picture { display: contents; }   /* <picture> only swaps the image per breakpoint; it takes no space itself */
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.site { width: 1440px; margin: 0 auto; overflow: clip; }   /* clip (not hidden) so the nav can stay pinned */
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---- Type styles (Figma text styles "Desktop/…") ---------------------- */
.eyebrow  { font-size: 11px; line-height: 13px; font-weight: 600; color: var(--text-3); }
.eyebrow--tracked { letter-spacing: 1.1px; }
.headline { font-size: 46px; line-height: 53px; }
.statement { font-size: 52px; line-height: 62px; color: #fff; }
.lead     { font-size: 19px; line-height: 30px; }
.sub      { font-size: 17px; line-height: 26px; color: var(--text-2); }
.sub-large { font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.85); }
.body     { font-size: 16px; line-height: 25px; color: var(--text-2); }
.quote    { font-size: 24px; line-height: 32px; font-weight: 500; }
.link     { display: inline-block; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--accent); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Buttons ---------------------------------------------------------- */
.btn-row { display: flex; justify-content: center; gap: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; min-width: 186px; padding: 0 32px; border-radius: 28px;
  font-size: 16px; line-height: 20px; font-weight: 500;
  transition: filter .2s, background-color .2s, box-shadow .2s;   /* light + shadow only — nothing resizes */
}
.btn--blue  { background: var(--blue); color: #fff; }
.btn--ghost { min-width: 196px; background: var(--ghost-bg); color: var(--ghost-text); box-shadow: inset 0 0 0 1px var(--ghost-line); }
.btn--white { background: #fff; color: var(--navy); }
.btn--glass { background: rgba(255, 255, 255, 0.18); color: #fff; }
.btn--blue:hover, .btn--white:hover { filter: brightness(1.07); box-shadow: 0 6px 18px -6px rgba(0, 40, 120, 0.35); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--text); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.26); }
.btn--sm { width: 108px; height: 38px; min-width: 0; padding: 0; border-radius: 19px; font-size: 13px; line-height: 18px; font-weight: 600; }

/* ---- Decorative devices from the mark --------------------------------- */
.rule { margin: 0 auto; }
.rule path { fill: var(--rule-c); }
.block .rule path { fill: rgba(255, 255, 255, 0.45); }
.chevron use { fill: var(--accent); }
.chevron--gap use { fill: var(--chevron-gap); }   /* orange = the gap — in light AND dark (Meesh, 2026-09-29); lifted shade on dark (2026-09-30) */

/* ---- Blue block + grain ----------------------------------------------- */
.block {
  position: relative; overflow: hidden; border-radius: 44px;
  background:
    url("assets/texture-curved-lines.svg") 0 0 / 1392px 510px no-repeat,
    linear-gradient(var(--block-angle, 144deg), var(--block-stops));
}
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: url("assets/texture-grain-512.png") 0 0 / 512px 512px repeat;
}
.grain--soft::before    { mix-blend-mode: soft-light; opacity: 0.45; }
.grain--overlay::before { mix-blend-mode: overlay;    opacity: 0.85; }

/* Sections carry their own ground (white in light; each dark section is its own
   top-to-bottom night gradient, as in the dark master). */
.hero, .nav, .section { background: var(--section-bg); }

/* ==========================================================================
   Hover glow — Wolfpack's rule: "the glow is interaction, not decoration".
   Only clickable cards glow · the bloom is the data blue #3B72FF, never orange ·
   it fades in (opacity only, never grows) · plus a 2px lift · nothing resizes.
   ========================================================================== */
.view, .tab, .faq__item { position: relative; transition: transform .25s ease-out; }
.view::after, .tab::after, .faq__item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(59, 114, 255, 0.35), 0 16px 44px -12px rgba(59, 114, 255, 0.5);
  opacity: 0; transition: opacity .25s ease-out;
}
@media (hover: hover) {
  .view:hover, .tab:not(.is-active):hover, .faq__item:hover { transform: translateY(-2px); }
  .view:hover::after, .tab:not(.is-active):hover::after, .faq__item:hover::after { opacity: 1; }
  .btn:hover { transform: translateY(-2px); }
}
.view:focus-visible::after, .tab:focus-visible::after, .faq__item:has(.faq__q:focus-visible)::after { opacity: 1; }
.btn { transition: filter .2s, background-color .2s, box-shadow .2s, transform .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .view, .tab, .faq__item, .btn { transition: none; }
  .view:hover, .tab:hover, .faq__item:hover, .btn:hover { transform: none; }
}

/* ==========================================================================
   Portfolio framing — the mock-build bar, theme switch and concept note
   ========================================================================== */
.mock-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: 44px; padding: 0 24px;
  background: var(--mm-ink); color: var(--mm-bone);
  font-family: Inter, system-ui, sans-serif; font-size: 13px; line-height: 18px;
}
.mock-bar__back { font-weight: 500; white-space: nowrap; }
.mock-bar__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.mock-bar__label { color: var(--mm-muted); }
.mock-bar__label strong { color: var(--mm-bone); font-weight: 600; }
.mock-bar__short, .what__link, .nav__menu, .views, .eco__break { display: none; }

.theme-switch { display: flex; margin-left: auto; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--mm-line); }
.theme-switch button {
  height: 26px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--mm-muted); font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 500;
  transition: background-color .2s, color .2s;
}
.theme-switch button:hover { color: var(--mm-bone); }
.theme-switch button[aria-pressed="true"] { background: var(--mm-bone); color: var(--mm-ink); }

.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 60;
  transform: translate(-50%, 8px); opacity: 0;
  padding: 12px 18px; border-radius: 999px;
  background: var(--mm-ink); color: var(--mm-bone);
  font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 20px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  transition: opacity .2s, transform .2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Mobile menu — drops down under the pinned nav (phones only)
   ========================================================================== */
.menu { display: none; }
.nav__menu span { transition: transform .2s ease-out; }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }   /* the two lines turn into a × */
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ==========================================================================
   Book a demo — a realistic panel that says plainly it's a concept
   ========================================================================== */
.demo { width: min(460px, calc(100% - 32px)); max-width: none; padding: 0; border: 0; background: none; overflow: visible; }
.demo::backdrop { background: rgba(10, 16, 32, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.demo[open] { animation: demo-in .22s ease-out; }
@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .demo[open] { animation: none; } }
.demo__card {
  position: relative; padding: 28px 32px 32px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.97); color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 24px 64px -12px rgba(11, 30, 56, 0.35);
}
.demo__note {   /* the honesty line — in Michelle's portfolio voice, like the bar and the notes */
  display: inline-block; margin: 0 40px 24px 0; padding: 7px 12px; border-radius: 999px;
  background: var(--mm-ink); color: var(--mm-bone); font-family: Inter, system-ui, sans-serif; font-size: 12px; line-height: 16px;
}
.demo__close {
  position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(11, 30, 56, 0.06); color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer;
}
.demo__close:hover { background: rgba(11, 30, 56, 0.12); }
.demo__mark use { fill: var(--navy); }
.demo__title { margin-top: 16px; font-size: 28px; line-height: 34px; font-weight: 600; }
.demo__sub { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.demo__field { display: block; margin-top: 16px; }
.demo__ask .demo__field:first-of-type { margin-top: 24px; }
.demo__field span { display: block; margin-bottom: 6px; font-size: 13px; line-height: 16px; font-weight: 500; }
.demo__field input, .demo__field select {
  width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 12px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 30, 56, 0.16);
  font: inherit; font-size: 15px; color: var(--navy);
}
.demo__field input::placeholder { color: var(--ink-4); }
.demo__field input:focus-visible, .demo__field select:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.demo__submit { width: 100%; margin-top: 24px; }

/* ==========================================================================
   1 · Nav
   ========================================================================== */
.nav {
  display: grid; grid-template-columns: 400px 1fr auto; align-items: center;
  height: 88px; padding: 14px 120px 0;
  position: sticky; top: var(--bar-h, 44px); z-index: 40;   /* pinned under the mock-build bar */
  transition: background-color .25s, box-shadow .25s;
}
/* once the page scrolls, the nav turns to frosted glass over the content */
.nav.is-stuck {
  background: var(--nav-glass); box-shadow: 0 1px 0 var(--nav-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
/* "you are here" — Product / Solutions light up while their section is on screen */
.nav__links a[aria-current="true"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark use { fill: var(--mark); }
.brand__word { font-size: 16px; line-height: 21px; font-weight: 600; }
.nav__links { display: flex; }
.nav__links li { width: 104px; }
.nav__links a, .nav__actions > a:not(.btn) { font-size: 14px; line-height: 20px; font-weight: 500; }
.nav__links a:hover, .nav__actions > a:not(.btn):hover { color: var(--accent); }
.nav__actions { display: flex; align-items: center; gap: 36px; }

/* ==========================================================================
   2 · Hero
   ========================================================================== */
.hero { display: flow-root; }   /* keeps the eyebrow's top margin inside the hero (so its background starts under the nav) */
.hero__eyebrow { margin-top: 40px; text-align: center; }
.hero__title {
  width: 1200px; margin: 24px auto 0;
  font-size: 82px; line-height: 88px; letter-spacing: -2.46px; text-align: center;
  text-shadow: 0 0 100px rgba(255, 255, 255, 0.25);
}
.hero__accent { color: var(--accent); }
.hero__accent b { font-weight: 500; }
.hero__lead { width: 600px; margin: 32px auto 0; text-align: center; }
.hero .btn-row { margin-top: 38px; }

.hero__stage { position: relative; height: 659px; margin-top: 49px; }
.block--hero { position: absolute; top: 45px; left: 24px; width: 1392px; height: 510px; --block-angle: 143.77deg; }
/* one dashboard per size: desktop .dash (1200+), tablet .tdash (768–1199), phone .phone (<768) */
.tdash, .phone { display: none; }

/* ==========================================================================
   The hero dashboard — coded from Figma (1080 × 600). A product
   illustration, so pieces are placed exactly as in the master; each panel
   lays out its own contents. Light in both themes, like every product visual.
   ========================================================================== */
.dash {
  position: absolute; top: 0; left: calc(50% - 540px); width: 1080px; height: 600px; overflow: hidden;
  border-radius: 30.42px; color: #0b1e38; font-size: 9px; line-height: normal;
  background: linear-gradient(150.9deg, #e7ecf4 14%, #fafbfd 85%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 20px 48px -16px rgba(20, 40, 90, 0.26), 0 0 56px rgba(20, 40, 90, 0.18);
  isolation: isolate;
}
.dash p { margin: 0; }
@media (max-width: 1199px) { .dash { display: none; } }

/* the five soft glows behind the glass */
.dash__bloom { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.dash__bloom--blue   { left: 103.5px; top: -166.5px; width: 825px; height: 540px; background: rgba(59, 114, 255, 0.17); filter: blur(82px); }
.dash__bloom--low    { left: 478.5px; top: 313.5px;  width: 705px; height: 435px; background: rgba(44, 63, 143, 0.10); filter: blur(82px); }
.dash__bloom--accent { left: 613.5px; top: -136.5px; width: 525px; height: 375px; background: rgba(91, 155, 255, 0.20); filter: blur(75px); }
.dash__bloom--panels { left: 283.5px; top: 111px;    width: 690px; height: 420px; background: rgba(59, 114, 255, 0.12); filter: blur(75px); }
.dash__bloom--side   { left: -136.5px; top: 223.5px; width: 405px; height: 420px; background: rgba(59, 114, 255, 0.12); filter: blur(75px); }

/* frosted glass: 80% white, blurred, grain */
.dash__side, .dash__card {
  position: absolute; background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.dash__side::before, .dash__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.14; mix-blend-mode: soft-light;
  background: url("assets/texture-grain-512.png") 0 0 / 512px 512px repeat;
}

/* sidebar */
.dash__side { left: -1.5px; top: -1.5px; width: 180px; height: 675px; box-shadow: inset -0.75px 0 0 rgba(11, 30, 56, 0.09), 1.5px 0 10.5px -1.5px rgba(42, 74, 140, 0.05); }
.dash__brand { position: absolute; left: 22.5px; top: 24px; display: flex; align-items: center; gap: 7.5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.21px; }
.dash__brand svg use { fill: #0b1e38; }
.dash__menu { position: absolute; left: 13.5px; top: 74.25px; width: 156px; }
.dash__menu li { position: relative; display: flex; align-items: center; gap: 9px; height: 34.5px; padding-left: 12px; border-radius: 7.5px; color: #656f80; font-size: 10.5px; }
.dash__menu li i { width: 12px; height: 12px; border-radius: 3px; background: rgba(101, 111, 128, 0.5); }
.dash__menu li.is-on { color: #0b1e38; font-weight: 500; }
.dash__menu li.is-on::before { content: ""; position: absolute; inset: 2.25px 0; z-index: -1; border-radius: 7.5px; background: rgba(0, 93, 245, 0.16); }
.dash__menu li.is-on i { background: #005df5; }
.dash__scope { position: absolute; left: 19.5px; top: 301.5px; padding: 17.25px 0 0 3px; width: 144px; border-top: 0.75px solid rgba(11, 30, 56, 0.06); color: #8a99ad; font-size: 7.5px; font-weight: 600; letter-spacing: 0.75px; line-height: 13.5px; }

/* header — a frosted bar across the top */
.dash__head {
  position: absolute; left: 178.5px; top: -1.5px; width: 900px; height: 123px;
  background: rgba(255, 255, 255, 0.56); -webkit-backdrop-filter: blur(27px); backdrop-filter: blur(27px);
  box-shadow: inset 0 -0.75px 0 rgba(11, 30, 56, 0.07), 0 3px 10.5px rgba(42, 74, 140, 0.05);
}
.dash__title { position: absolute; left: 33px; top: 24px; font-size: 19.5px; font-weight: 600; }
.dash__sub { position: absolute; left: 33px; top: 51px; color: #656f80; font-size: 10.5px; }
.dash__chip {
  position: absolute; top: 76.5px; padding: 6.75px 12px; border-radius: 12.75px; white-space: pre;
  background: rgba(255, 255, 255, 0.66); box-shadow: inset 0 0 0 0.75px rgba(11, 30, 56, 0.1); color: rgba(11, 30, 56, 0.95); font-size: 9.75px;
}
.dash__search { position: absolute; left: 630px; top: 23.25px; width: 180px; height: 25.5px; padding: 6px 11.25px; border-radius: 12.75px; white-space: pre; background: rgba(255, 255, 255, 0.44); box-shadow: inset 0 0 0 0.75px rgba(11, 30, 56, 0.07); color: #656f80; font-size: 9.75px; }
.dash__me { position: absolute; left: 828px; top: 21.75px; width: 28.5px; height: 28.5px; display: grid; place-items: center; border-radius: 50%; background: rgba(234, 241, 254, 0.7); box-shadow: inset 0 0 0 0.75px rgba(11, 30, 56, 0.07); font-size: 9px; font-weight: 500; }

/* the two glass cards */
.dash__card { left: 211.5px; width: 823.5px; border-radius: 18px; box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.7), 0 4.5px 15px -1.5px rgba(42, 74, 140, 0.08); }
.dash__cov { top: 142.5px; height: 136.5px; }
.dash__table { top: 300px; height: 283.5px; }
.dash__label { position: absolute; top: 18.75px; color: #656f80; font-size: 7.5px; font-weight: 600; letter-spacing: 0.75px; white-space: nowrap; }
.dash__label--r { width: 60px; text-align: right; }

/* coverage: the ring, three figures, the verdict */
.dash__donut { position: absolute; left: 23.25px; top: 41.25px; transform: rotate(-90deg); }   /* start at 12 o'clock */
.dash__donut circle { fill: none; stroke-width: 6.63; }
.dash__donut-track { stroke: rgba(11, 30, 56, 0.09); }
.dash__donut-arc { stroke: rgba(0, 93, 245, 0.85); stroke-dasharray: 73 100; }
.dash__donut-num { position: absolute; left: 23.25px; top: 59.25px; width: 51px; text-align: center; font-family: Geist, sans-serif; font-size: 11.25px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dash__stat { position: absolute; top: 41.25px; width: 105px; }
.dash__stat i { position: absolute; left: 0; top: 3px; width: 6px; height: 6px; border-radius: 3px; }
.dash__stat-label { display: block; padding-left: 12px; color: #656f80; font-size: 9px; }
.dash__stat-num { display: block; margin-top: 5px; font-family: Geist, sans-serif; font-size: 19.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dash__stat-sub { display: block; margin-top: 2px; color: #656f80; font-family: Geist, sans-serif; font-size: 8.25px; }
.dash__vrule { position: absolute; left: 503.25px; top: 32.25px; width: 0.75px; height: 84px; background: rgba(11, 30, 56, 0.07); }
.dash__verdict { position: absolute; left: 524.25px; top: 32.25px; width: 274.5px; }
.dash__verdict-title { font-size: 15px; font-weight: 500; letter-spacing: -0.15px; }
.dash .dash__verdict-body { margin-top: 3px; color: #656f80; font-size: 9.75px; }
.dash__link { position: absolute; top: 72px; color: #005df5; font-size: 9.75px; font-weight: 500; white-space: pre; }
.dash__link:hover { text-decoration: underline; }

/* the priorities table */
.dash__hrule { position: absolute; left: 23.25px; top: 38.25px; width: 775.5px; height: 0.75px; background: rgba(11, 30, 56, 0.06); }
.dash__row { position: absolute; left: 8.25px; width: 805.5px; height: 49.5px; border-radius: 6px; color: #0b1e38; transition: transform .25s ease-out, box-shadow .25s ease-out, background-color .25s; }
.dash__row > * { position: absolute; }
.dash__row.is-risk { background: rgba(252, 253, 255, 0.8); }
.dash__row.is-risk::before { content: ""; position: absolute; left: 0; top: 0; width: 2.25px; height: 100%; border-radius: 1.5px; background: #c0451b; }
.dash__rank { left: 15px; top: 7.88px; font-family: Geist, sans-serif; font-size: 14.25px; font-weight: 600; }
.dash__rank.is-muted { color: #4a5a70; }
.dash__name { left: 55.5px; top: 10.5px; font-size: 11.25px; font-weight: 500; }
.dash__cells { left: 246px; top: 10.5px; display: flex; gap: 2.25px; }
.dash__cells i { display: block; width: 6.75px; height: 13.5px; border-radius: 1.5px; }
.dash__cells .s { background: linear-gradient(180deg, #638fff, #2f65f5); box-shadow: 0 2px 5px -1px rgba(20, 40, 90, 0.2); }
.dash__cells .g { background: linear-gradient(180deg, rgba(59, 114, 255, 0.3), rgba(59, 114, 255, 0.16)); box-shadow: 0 2px 5px -1px rgba(20, 40, 90, 0.1); }
.dash__cells .m { background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34)); box-shadow: inset 0 0 0 1.125px #c0451b, 0 2px 5px -1px rgba(20, 40, 90, 0.1); }
.dash__ticks { left: 246px; top: 25.5px; width: 69.75px; height: 4.5px; }
.dash__ticks i { position: absolute; }
.dash__ticks i:nth-child(1) { left: 0; top: 1.5px; width: 69.75px; height: 1.5px; border-radius: 0.75px; background: rgba(11, 30, 56, 0.18); }
.dash__ticks i:nth-child(2) { left: 12.75px; top: 0; width: 1.5px; height: 4.5px; border-radius: 0.75px; background: rgba(11, 30, 56, 0.45); }
.dash__ticks i:nth-child(3) { left: 47.25px; top: 0; width: 1.5px; height: 4.5px; border-radius: 0.75px; background: #c0451b; }
.dash__eff { left: 390px; top: 9.75px; width: 60px; text-align: right; color: #005df5; font-family: Geist, sans-serif; font-size: 11.25px; }
.dash__con { left: 471px; top: 11.25px; color: #656f80; font-size: 9.75px; }
.dash__tgt { left: 666px; top: 11.25px; color: #656f80; font-size: 9.75px; }
.dash__eff.is-warn, .dash__con.is-warn, .dash__tgt.is-warn { color: #c0451b; }
.dash__who { left: 55.5px; top: 28.5px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: rgba(234, 241, 254, 0.55); box-shadow: inset 0 0 0 0.75px rgba(11, 30, 56, 0.14); color: #8a99ad; font-size: 6.75px; font-weight: 500; }
.dash__meta { left: 76.5px; top: 30.38px; color: #656f80; white-space: pre; }
.dash__pill { left: 471px; top: 30.38px; width: 43.5px; height: 11.25px; display: grid; place-items: center; border-radius: 3px; background: rgba(192, 69, 27, 0.14); box-shadow: inset 0 0 0 0.75px rgba(192, 69, 27, 0.45); color: #c0451b; font-size: 6px; font-weight: 600; letter-spacing: 0.48px; }
/* rows are clickable, so they get the hover glow (data blue, 2px lift) */
@media (hover: hover) {
  .dash__row:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 0 0 0.75px rgba(59, 114, 255, 0.35), 0 12px 30px -10px rgba(59, 114, 255, 0.45); }
}
.dash__row:focus-visible { outline: 2px solid #005df5; outline-offset: 1px; }

/* ==========================================================================
   Tablet dashboard — coded from Figma (576 × 448, authored at native size)
   ========================================================================== */
.tdash {
  position: absolute; top: 0; left: calc(50% - 288px); width: 576px; height: 448px; overflow: hidden; isolation: isolate;
  border-radius: 20px; color: #0b1e38; font-family: Geist, sans-serif; line-height: normal;
  background: linear-gradient(150.9deg, #e7ecf4, #fafbfd); box-shadow: 0 16px 40px -8px rgba(11, 30, 56, 0.24);
}
.tdash p { margin: 0; }
.tdash::after {   /* fine grain over the whole screen */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.14; mix-blend-mode: soft-light;
  background: url("assets/texture-grain-512.png") 0 0 / 512px 512px repeat;
}
.tdash__bloom { position: absolute; z-index: -1; border-radius: 50%; filter: blur(44px); pointer-events: none; }
.tdash__side { position: absolute; left: 0; top: 0; width: 124px; height: 448px; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6); }
.tdash__brand { position: absolute; left: 14px; top: 18px; display: flex; align-items: center; gap: 5.6px; font-size: 10px; font-weight: 600; }
.tdash__brand svg use { fill: #0b1e38; }
.tdash__menu { position: absolute; left: 11px; top: 52px; width: 102px; }
.tdash__menu li { position: relative; display: flex; align-items: center; gap: 6px; height: 27px; padding-left: 7px; color: #656f80; font-size: 11px; }
.tdash__menu li i { width: 9px; height: 9px; border-radius: 2px; background: #ccd4de; }
.tdash__menu li.is-on { color: #0b1e38; font-weight: 500; }
.tdash__menu li.is-on::before { content: ""; position: absolute; left: 0; top: 2px; width: 102px; height: 24px; z-index: -1; border-radius: 6px; background: rgba(59, 114, 255, 0.1); }
.tdash__menu li.is-on i { background: #3b72ff; }
.tdash__scope { position: absolute; left: 14px; top: 240px; width: 96px; padding-top: 15px; border-top: 1px solid rgba(11, 30, 56, 0.08); color: #8a99ad; font-size: 8px; font-weight: 600; line-height: 12px; }
.tdash__head { position: absolute; left: 124px; top: 0; width: 452px; height: 84px; background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.8); }
.tdash__title { position: absolute; left: 14px; top: 12px; font-size: 18px; font-weight: 600; }
.tdash__sub { position: absolute; left: 14px; top: 37px; color: #656f80; font-size: 9.5px; }
.tdash__chip { position: absolute; top: 54px; height: 22px; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 1px rgba(11, 30, 56, 0.1); font-size: 8.5px; font-weight: 500; }
.tdash__card {
  position: absolute; left: 138px; width: 424px; border-radius: 16px; background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 16px 44px -4px rgba(11, 30, 56, 0.13);
}
.tdash__cov { top: 98px; height: 96px; }
.tdash__table { top: 208px; height: 226px; }
.tdash__label { position: absolute; top: 10px; left: 12px; color: #656f80; font-size: 8px; font-weight: 600; white-space: nowrap; }
.tdash__table .tdash__label { top: 13px; }
.tdash__donut { left: 12px; top: 32px; }
.tdash__donut circle { stroke-width: 5.5; }
.tdash__donut .dash__donut-arc { stroke: #3b72ff; }
.tdash__donut-num { position: absolute; left: 12px; top: 46px; width: 42px; text-align: center; font-size: 9.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tdash__stat { position: absolute; top: 31px; width: 112px; }
.tdash__stat i { position: absolute; left: 0; top: 3px; width: 5px; height: 5px; border-radius: 50%; }
.tdash__stat-label { display: block; padding-left: 9px; color: #656f80; font-size: 8.5px; }
.tdash__stat-num { display: block; margin-top: 3px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tdash__stat-sub { display: block; color: #656f80; font-size: 7.5px; }
.tdash__rule { position: absolute; left: 12px; width: 400px; height: 1px; background: rgba(11, 30, 56, 0.07); }
.tdash__row { position: absolute; left: 7px; width: 410px; height: 56px; border-radius: 8px; color: #0b1e38; transition: transform .25s ease-out, box-shadow .25s ease-out, background-color .25s; }
.tdash__row > * { position: absolute; }
.tdash__row.is-risk { background: rgba(192, 69, 27, 0.05); }
.tdash__row.is-risk::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: #c0451b; }
.tdash__rank { left: 5px; top: 8px; font-size: 12px; font-weight: 600; }
.tdash__name { left: 37px; top: 6px; font-size: 12px; font-weight: 500; }
.tdash__meta { left: 37px; top: 22px; color: #656f80; font-size: 8.5px; }
.tdash__cells { left: 179px; top: 9px; display: flex; gap: 1.8px; }
.tdash__cells i { display: block; width: 3.8px; height: 12px; border-radius: 1.5px; }
.tdash__cells .s { background: #3b72ff; }
.tdash__cells .g { background: rgba(59, 114, 255, 0.3); }
.tdash__cells .m { box-shadow: inset 0 0 0 1.2px #c0451b; }
.tdash__eff { left: 349px; top: 7px; color: #3b72ff; font-size: 11.5px; font-weight: 600; }
.tdash__eff.is-warn { color: #c0451b; }
@media (hover: hover) {
  .tdash__row:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 0 0 1px rgba(59, 114, 255, 0.35), 0 12px 30px -10px rgba(59, 114, 255, 0.45); }
}

/* ==========================================================================
   The phone — coded from Figma (290 × 600): the Pipeline view
   ========================================================================== */
.phone {
  position: absolute; top: 28px; left: calc(50% - 145px); width: 290px; height: 600px; overflow: hidden;
  border-radius: 44px; background: #171c24; box-shadow: 0 20px 48px -10px rgba(11, 30, 56, 0.34);
  color: #0b1e38; font-family: Geist, sans-serif; line-height: normal;
}
.phone p { margin: 0; }
.phone__notch { position: absolute; left: 102px; top: 13px; width: 86px; height: 24px; border-radius: 12px; background: #0f1217; }
.phone__screen { position: absolute; left: 8px; top: 8px; width: 274px; height: 613.13px; overflow: hidden; isolation: isolate; border-radius: 34px; background: linear-gradient(180deg, #e7ecf4, #fafbfd); }
.phone__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.14; background: url("assets/texture-grain-512.png") 0 0 / 512px 512px repeat; }
.phone__bloom { position: absolute; z-index: -1; border-radius: 50%; filter: blur(20px); pointer-events: none; }
.phone__bar { position: absolute; left: 0; top: 0; width: 274px; height: 62.89px; background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px); box-shadow: inset 0 -1.12px 0 rgba(255, 255, 255, 0.8); }
/* Frosted layers that touch a rounded corner: their blur also samples the empty space
   outside the corner and paints a pale rim along the curve (Meesh spotted it on the phone).
   These are still illustrations — what sits behind them is already-soft glow, so the blur
   adds nothing visible. Off for these five; their white tint alone gives the same look. */
.phone__bar, .tdash__side, .tdash__head, .dash__side, .dash__head { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* …and each is still clipped to its corner's curve. */
.phone__bar { clip-path: inset(0 round 34px 34px 0 0); }
.tdash__side { clip-path: inset(0 round 20px 0 0 20px); }
.tdash__head { clip-path: inset(0 round 0 20px 0 0); }
.dash__side { clip-path: inset(1.5px -24px 73.5px 1.5px round 30.42px 0 0 30.42px); }   /* runs past the bottom; clip at the card's edge, keep its right-hand shadow */
.dash__head { clip-path: inset(1.5px 0 -24px 0 round 0 28.92px 0 0); }                  /* keep its soft shadow underneath */
.phone__time { position: absolute; left: 17.97px; top: 11.23px; font-size: 11.23px; font-weight: 600; }
.phone__battery { position: absolute; left: 235.82px; top: 12.35px; width: 17.97px; height: 8.98px; border-radius: 2.25px; box-shadow: inset 0 0 0 1.12px rgba(11, 30, 56, 0.45); }
.phone__battery::after { content: ""; position: absolute; left: 2.81px; top: 2.02px; width: 12.35px; height: 5.05px; border-radius: 1.12px; background: #0b1e38; }
.phone__brand { position: absolute; left: 17.97px; top: 33.69px; display: flex; align-items: center; gap: 9.63px; font-size: 11.23px; font-weight: 600; }
.phone__brand svg use { fill: #0b1e38; }
.phone__dots { position: absolute; left: 247.05px; top: 35.93px; display: flex; flex-direction: column; gap: 3.37px; }
.phone__dots i { display: block; width: 3.37px; height: 3.37px; border-radius: 50%; background: #656f80; }
.phone__eyebrow { position: absolute; left: 17.97px; top: 80.85px; color: #656f80; font-size: 10.11px; font-weight: 600; white-space: pre; }
.phone__headline { position: absolute; left: 17.97px; top: 98.82px; font-size: 22.46px; line-height: 26.95px; font-weight: 600; }
.phone__card {
  position: absolute; left: 17.97px; width: 238.07px; background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(27px); backdrop-filter: blur(27px);
  box-shadow: inset 0 0 0 1.12px rgba(255, 255, 255, 0.6), 0 18px 49.4px -4.5px rgba(11, 30, 56, 0.13);
}
.phone__cov { top: 166.2px; height: 65.13px; border-radius: 20.21px; }
.phone__label { position: absolute; left: 15.72px; top: 15.72px; color: #656f80; font-size: 10.11px; font-weight: 600; }
.phone__figure { position: absolute; right: 31.45px; top: 15.72px; color: #656f80; font-size: 10.11px; font-weight: 500; }
.phone__track { position: absolute; left: 15.72px; top: 38.18px; width: 206.62px; height: 7.86px; border-radius: 3.93px; background: rgba(11, 30, 56, 0.08); }
.phone__fill { position: absolute; left: 0; top: 0; width: 171.81px; height: 100%; border-radius: 3.93px; background: #3b72ff; }
.phone__miss { position: absolute; left: 171.81px; top: 0; width: 34.81px; height: 100%; border-radius: 3.93px; box-shadow: inset 0 0 0 1.35px #c0451b; }
.phone__rows { top: 247.05px; height: 204.38px; border-radius: 26.95px; }
.phone__row { position: absolute; left: 0; width: 100%; height: 50px; border-radius: 12px; color: #0b1e38; transition: transform .25s ease-out, box-shadow .25s ease-out, background-color .25s; }
.phone__row > * { position: absolute; }
.phone__rank { left: 15.72px; top: 2.24px; color: #656f80; font-size: 12.35px; font-weight: 600; }
.phone__name { left: 40.42px; top: 0; font-size: 15.72px; font-weight: 500; }
.phone__cells { left: 40.42px; top: 26.95px; display: flex; gap: 2.36px; }
.phone__cells i { display: block; width: 5.05px; height: 15.72px; border-radius: 1.68px; }
.phone__cells .s { background: #3b72ff; }
.phone__cells .g { background: rgba(59, 114, 255, 0.34); }
.phone__cells .m { box-shadow: inset 0 0 0 1.57px #c0451b; }
.phone__status { right: 15.73px; top: 29.19px; color: #656f80; font-size: 11.79px; font-weight: 500; }
.phone__status.is-warn { color: #c0451b; }
.phone__rule { position: absolute; left: 15.72px; width: 206.62px; height: 1.12px; background: rgba(11, 30, 56, 0.07); }
.phone__cta { position: absolute; left: 17.97px; top: 469.39px; width: 238.07px; height: 49.41px; display: grid; place-items: center; border-radius: 24.7px; background: #005df5; color: #fff; font-size: 15.16px; font-weight: 500; box-shadow: 0 8.98px 20.2px -2.25px rgba(0, 93, 245, 0.3); }

/* ---- Dashboard motion (all three sizes) — plays once ------------------- */
.motion-ready [data-dash] .dash__donut-arc { stroke-dasharray: 0 100; transition: stroke-dasharray .9s cubic-bezier(.2, .7, .2, 1); }
.motion-ready [data-dash].is-played .dash__donut-arc { stroke-dasharray: 73 100; }
.motion-ready [data-dash] .phone__fill { clip-path: inset(0 100% 0 0 round 3.93px); transition: clip-path .9s cubic-bezier(.2, .7, .2, 1); }   /* the bar reveals — it never changes size */
.motion-ready [data-dash].is-played .phone__fill { clip-path: inset(0 0 0 0 round 3.93px); }
.motion-ready [data-dash] [data-cells] i { opacity: 0; transform: translateY(3px); transition: opacity .24s ease-out, transform .24s ease-out; }
.motion-ready [data-dash] [data-cells] i.m,
.motion-ready [data-dash] [data-dash-late],
.motion-ready [data-dash] .is-risk::before { opacity: 0; transform: none; transition: opacity .12s ease-out; }
.motion-ready [data-dash] .dash__row.is-risk, .motion-ready [data-dash] .tdash__row.is-risk { background: transparent; }
.motion-ready [data-dash].is-filling [data-cells] i:not(.m),
.motion-ready [data-dash].is-risked [data-cells] i.m,
.motion-ready [data-dash].is-risked [data-dash-late],
.motion-ready [data-dash].is-risked .is-risk::before { opacity: 1; transform: none; }
.motion-ready [data-dash].is-risked .dash__row.is-risk { background: rgba(252, 253, 255, 0.8); }
.motion-ready [data-dash].is-risked .tdash__row.is-risk { background: rgba(192, 69, 27, 0.05); }

/* ==========================================================================
   3 · What you get (tabbed)
   ========================================================================== */
.what { padding: 146px 0 120px; }
.what__title { width: 1100px; margin-top: 24px; }
.what__sub { width: 1000px; margin-top: 24px; }

.tabs { display: flex; justify-content: center; gap: 12px; margin-top: 42px; }
.tab {
  height: 44px; padding: 0; border: 0; border-radius: 22px; cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-2); font-size: 15px; line-height: 20px; font-weight: 500;
  transition: background-color .2s, box-shadow .2s, color .2s, transform .25s ease-out;   /* fill fades with the label, so it never flashes white-on-white */
}
.tab:nth-child(1) { width: 132px; }
.tab:nth-child(2) { width: 126px; }
.tab:nth-child(3) { width: 122px; }
.tab:nth-child(4) { width: 118px; }
.tab:hover { box-shadow: inset 0 0 0 1px var(--ink-4); color: var(--text); }
.tab.is-active { background: var(--blue-tab); box-shadow: none; color: #fff; cursor: default; }
/* dark: inactive tabs become light frosted-glass pills, so they read as buttons on the navy
   (a navy outline disappeared there). Hover glow unchanged. Meesh's idea, 2026-09-29. */
:root[data-theme="dark"] .tab:not(.is-active) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:root[data-theme="dark"] .tab:not(.is-active):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12); }

/* the panel is a light surface in both themes (as in both masters) */
.panel {
  width: 1200px; height: 372px; margin: 48px auto 0; padding: 56px;
  border-radius: 20px; background: var(--wash-panel); color: var(--navy);
  box-shadow: inset 0 0 0 1px rgba(11, 30, 56, 0.05);
}
.panel .eyebrow { color: var(--ink-3); }
.panel .body { color: var(--ink-2); }
.panel .link { color: var(--blue); }
.panel__copy { width: 420px; }
.panel__title { margin-top: 23px; font-size: 28px; line-height: 35px; letter-spacing: -0.28px; }   /* Figma: 126% */
.panel__body { margin-top: 11px; line-height: 25px; }                                                 /* Figma: 158% */
.panel__copy .link { margin-top: 17px; line-height: 18px; }
/* switching tabs: the new view fades in — opacity only, nothing moves or resizes */
.panel__view.is-entering { animation: view-in .22s ease-out; }
@keyframes view-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .panel__view.is-entering { animation: none; } }

/* ---- The capacity card — coded (Figma, 639 × 282 at 505, 45) -----
   .panel__cap is the slot; .cap is drawn at Figma size and scaled to fit the
   slot (the tan/atan2 pair turns "slot width ÷ 639px" into a plain number),
   so on laptops it shrinks as one piece, exactly like the picture did. */
.panel__cap { position: absolute; left: 505px; top: 45px; width: 639px; aspect-ratio: 639 / 282; min-height: 0; container-type: inline-size; }   /* min-height 0: the slot follows its ratio, not the unscaled card inside */
.cap, .tcard {
  position: relative; isolation: isolate; width: 639px; height: 282px; border-radius: 16px; color: #0b1e38;
  transform-origin: 0 0; transform: scale(tan(atan2(100cqw, 639px)));
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);   /* Figma's background blur 64 — without it the panel's grain shows through the card, sharp */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 20px -2px rgba(42, 74, 140, 0.08);
}
.cap p, .tcard p { position: absolute; margin: 0; white-space: pre; }
.cap__eyebrow { left: 32px; top: 24px; color: #656f80; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 1px; }
.cap__row { position: absolute; left: 0; right: 0; height: 36px; }
.cap__name { left: 32px; top: 1px; font-size: 14px; line-height: 17px; font-weight: 500; }
.cap__sub { left: 32px; top: 21px; color: #656f80; font-family: Geist, sans-serif; font-size: 11px; line-height: 14px; }
.cap__pct { right: 32px; top: 0; color: #3b72ff; font-family: Geist, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cap__pct.is-risk { color: #c0451b; }
.cap__cells { position: absolute; left: 150px; top: 0; display: flex; gap: 3px; }
.cap__cells i { display: block; width: 9px; height: 20px; border-radius: 3px; }
.cap__cells .s { background: linear-gradient(180deg, #638fff, #2f65f5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 4px -1px rgba(20, 40, 90, 0.18); }
.cap__cells .g { background: linear-gradient(180deg, rgba(59, 114, 255, 0.3), rgba(59, 114, 255, 0.16)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 2px 4px -1px rgba(20, 40, 90, 0.09); }
.cap__cells .m { background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34)); box-shadow: inset 0 0 0 1.5px rgba(192, 69, 27, 0.95), 0 2px 4px -1px rgba(20, 40, 90, 0.09); }
.cap__rule { position: absolute; left: 32px; top: 252px; width: 575px; height: 1px; background: rgba(11, 30, 56, 0.08); }
.cap__foot { left: 32px; top: 262px; color: #656f80; font-size: 11px; line-height: 13px; }
.cap__foot--key { left: auto; right: 32px; }

/* Capacity card motion — one-shot when it's on screen. Each function's blue
   blocks fill (fade + 3px rise) while its figure counts up; a pause; then the
   shortfall simply appears — orange outlines, and the at-risk figures turn
   orange. Orange never moves. Reduced motion: the finished card. */
.motion-ready [data-cap] .cap__cells i { opacity: 0; transform: translateY(3px); transition: opacity .24s ease-out, transform .24s ease-out; }
.motion-ready [data-cap] .cap__cells i.m { transform: none; transition: opacity .12s ease-out; }
.motion-ready [data-cap] .cap__pct.is-risk { color: #0b1e38; transition: color .12s ease-out; }
.motion-ready [data-cap].is-filling .cap__cells i:not(.m),
.motion-ready [data-cap].is-risked .cap__cells i.m { opacity: 1; transform: none; }
.motion-ready [data-cap].is-risked .cap__pct.is-risk { color: #c0451b; }

/* ---- The other three tab cards — coded from Figma --
   Same 639 × 282 frosted surface and slot as the capacity card (.cap, .tcard). */
.tc__eyebrow { left: 32px; color: #656f80; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 1px; }
.tc__rule { position: absolute; left: 32px; width: 575px; height: 1px; background: rgba(11, 30, 56, 0.08); }
.tc__foot { left: 32px; top: 256px; color: #656f80; font-size: 11px; line-height: 13px; }

/* Priorities */
.pri__rank { left: 32px; font-family: Geist, sans-serif; font-size: 26px; line-height: 34px; font-weight: 600; }
.pri__name { left: 78px; font-size: 17px; line-height: 21px; font-weight: 500; }
.pri__cells { position: absolute; left: 78px; display: flex; gap: 4px; }
.pri__cells i { display: block; width: 14px; height: 26px; border-radius: 4px; }
.pri__cells .s { background: linear-gradient(180deg, #638fff, #2f65f5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 5px -1px rgba(20, 40, 90, 0.2); }
.pri__cells .g { background: linear-gradient(180deg, rgba(59, 114, 255, 0.3), rgba(59, 114, 255, 0.16)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 2px 5px -1px rgba(20, 40, 90, 0.1); }
.pri__cells .m { background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34)); box-shadow: inset 0 0 0 1.5px rgba(192, 69, 27, 0.95), 0 2px 5px -1px rgba(20, 40, 90, 0.1); }
.pri__note { left: 78px; color: #c0451b; font-size: 12px; line-height: 15px; }
.pri__note--seq { left: 146px; }
.pri__tag {
  position: absolute; left: 78px; top: 258px; width: 58px; height: 15px; border-radius: 4px; display: grid; place-items: center;
  background: rgba(192, 69, 27, 0.13); box-shadow: inset 0 0 0 1px rgba(192, 69, 27, 0.45);
  color: #c0451b; font-size: 8px; line-height: 10px; font-weight: 600; letter-spacing: 0.64px;
}
.pri__pct { right: 32px; color: #3b72ff; font-family: Geist, sans-serif; font-size: 22px; line-height: 29px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pri__pct.is-risk { color: #c0451b; }
.pri__label { right: 32px; color: #656f80; font-size: 9px; line-height: 11px; font-weight: 600; letter-spacing: 0.72px; }

/* The Gap */
.gapc__big { left: 32px; top: 54px; color: #c0451b; font-family: Geist, sans-serif; font-size: 56px; line-height: 73px; font-weight: 500; }
.gapc__missing { left: 32px; top: 126px; color: #c0451b; font-size: 9px; line-height: 11px; font-weight: 600; letter-spacing: 0.72px; }
.gapc__for { left: 32px; top: 156px; color: #656f80; font-size: 11px; line-height: 13px; }
.gapc__prio { left: 32px; top: 174px; font-size: 13px; line-height: 16px; font-weight: 500; }
.gapc__vrule { position: absolute; left: 272px; top: 48px; width: 1px; height: 182px; background: rgba(11, 30, 56, 0.1); }
.gapc__head { top: 54px; color: #656f80; font-size: 9px; line-height: 11px; font-weight: 600; letter-spacing: 0.72px; }
.gapc__hrule { position: absolute; left: 308px; top: 72px; width: 299px; height: 1px; background: rgba(11, 30, 56, 0.08); }
.gapc__hl { position: absolute; left: 296px; top: 82px; width: 311px; height: 34px; border-radius: 6px; background: rgba(192, 69, 27, 0.07); }
.gapc__hl::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; border-radius: 2px; background: #c0451b; }
.gapc__fn { left: 308px; font-size: 13px; line-height: 16px; font-weight: 500; }
.gapc__num { color: #656f80; font-family: Geist, sans-serif; font-size: 14px; line-height: 18px; font-variant-numeric: tabular-nums; }
.gapc__num.is-short { color: #c0451b; }

/* Signals */
.sig__score { right: 32px; top: 20px; font-family: Geist, sans-serif; font-size: 15px; line-height: 20px; font-weight: 500; }
.sig__delta { right: 32px; top: 40px; color: #c0451b; font-size: 9px; line-height: 11px; font-weight: 600; letter-spacing: 0.72px; }
.sig__row { position: absolute; left: 0; right: 0; height: 36px; }
.sig__bar { position: absolute; left: 32px; top: 4px; width: 3px; height: 30px; border-radius: 2px; background: #c0451b; }
.sig__title { left: 50px; top: 0; font-size: 14px; line-height: 17px; font-weight: 500; }
.sig__sub { left: 50px; top: 21px; color: #656f80; font-size: 11px; line-height: 13px; }
.sig__val { right: 32px; top: 2px; color: #c0451b; font-family: Geist, sans-serif; font-size: 16px; line-height: 21px; font-weight: 500; }
.sig__row.is-quiet .sig__bar { background: #a0acbe; }
.sig__row.is-quiet .sig__val { color: #656f80; }
.sig__rule { position: absolute; left: 32px; width: 575px; height: 1px; background: rgba(11, 30, 56, 0.07); }

/* Motion for the three — restrained, one-shot on first view; reduced motion = finished card.
   Nothing orange ever moves: it appears (opacity), or a figure changes colour. */
.motion-ready [data-pri] .pri__cells i:not(.m) { opacity: 0; transform: translateY(3px); transition: opacity .24s ease-out, transform .24s ease-out; }
.motion-ready [data-pri].is-filling .pri__cells i:not(.m) { opacity: 1; transform: none; }
.motion-ready [data-pri] .pri__pct.is-risk { color: #0b1e38; transition: color .12s ease-out; }
.motion-ready [data-pri].is-risked .pri__pct.is-risk { color: #c0451b; }
.motion-ready [data-pri] .pri__cells i.m,
.motion-ready [data-pri] [data-late],
.motion-ready [data-gapc] [data-late],
.motion-ready [data-gapc] [data-hl],
.motion-ready [data-sig] [data-late] { opacity: 0; transition: opacity .12s ease-out; }
.motion-ready [data-pri].is-risked .pri__cells i.m,
.motion-ready [data-pri].is-risked [data-late],
.motion-ready [data-gapc].is-lit [data-hl],
.motion-ready [data-gapc].is-landed [data-late],
.motion-ready [data-sig].is-landed [data-late] { opacity: 1; }
.motion-ready [data-gapc] .gapc__num.is-short { color: #656f80; transition: color .12s ease-out; }
.motion-ready [data-gapc].is-short .gapc__num.is-short { color: #c0451b; }
.motion-ready [data-sig] [data-sig-row] { opacity: 0; transition: opacity .3s ease-out; }
.motion-ready [data-sig] [data-sig-row].is-in { opacity: 1; }

/* ==========================================================================
   3c · North star
   ========================================================================== */
.north { padding: 72px 24px; }
.north__block { height: 496px; padding-top: 63px; --block-angle: 144.5deg; }
.north__eyebrow { margin-top: 22px; color: #fff; }
.north__statement { width: 1000px; margin-top: 15px; }
.north .btn-row { margin-top: 45px; }

/* ==========================================================================
   4 · The Gap
   ========================================================================== */
.gap { padding: 146px 120px 58px; }
.gap__title { width: 868px; margin-top: 27px; }
.gap__row { display: grid; grid-template-columns: 620px 440px; column-gap: 60px; margin-top: 57px; align-items: start; }
.gap__body { margin-top: 34px; }
.gap__aside .rule { margin: 0; }
.gap__aside .quote { margin-top: 22px; }
/* The plate behind the ledger — runs 24px from each page edge */
.gap__visual {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 1392px; height: 460px; margin: 55px 0 0 -96px; border-radius: 24px;
  background:
    url("assets/texture-curved-lines-navy.svg") 0 10px / 1392px 510px no-repeat,
    radial-gradient(ellipse 66% 263% at 46% 45%, #ffffff 0%, #f5f8fe 33%, #eaf0fc 67%, #e2eafb 100%);
}
.gap__visual::before {   /* grain */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background: url("assets/texture-grain-512.png") 0 0 / 512px 512px repeat; mix-blend-mode: soft-light;
}
.gap__visual::after {    /* the blue bloom behind the card */
  content: ""; position: absolute; z-index: -1; left: 476px; top: 25px; width: 760px; height: 420px;
  border-radius: 50%; background: rgba(59, 114, 255, 0.16); filter: blur(70px); pointer-events: none;
}

/* ---- The capacity ledger (coded, so it can move) ----------------------- */
.ledger {
  position: relative; isolation: isolate; width: 1160px; padding: 28px 52px 26px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 20px -2px rgba(42, 74, 140, 0.08);
  color: var(--navy);
}
.ledger::before {   /* the card's own fine grain */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.14;
  background: url("assets/texture-grain-512.png") 0 0 / 512px 512px repeat; mix-blend-mode: soft-light;
}
.ledger__eyebrow { font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1.1px; color: var(--ink-3); white-space: pre; }
.ledger__blocks { display: grid; grid-template-columns: repeat(12, minmax(0, 76px)); gap: 12px; margin-top: 35px; }
/* one cell = one capacity block = two people */
.cell { display: block; height: 112px; border-radius: 6px; }
.cell--solid   { background: linear-gradient(180deg, #638fff, #2f65f5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 3px 8px -1px rgba(20, 40, 90, 0.22); }
.cell--ghost   { background: linear-gradient(180deg, rgba(59, 114, 255, 0.3), rgba(59, 114, 255, 0.16)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 3px 8px -1px rgba(20, 40, 90, 0.12); }
.cell--missing { background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34)); box-shadow: inset 0 0 0 2.5px rgba(192, 69, 27, 0.95), 0 3px 8px -1px rgba(20, 40, 90, 0.1); }
.ledger__figures { display: grid; grid-template-columns: 268px 268px auto; margin-top: 40px; }
.fig { display: flex; flex-direction: column; }
.fig__num {
  font-family: Geist, "Instrument Sans", sans-serif; font-size: 44px; line-height: 54px; letter-spacing: -1.32px;
  font-variant-numeric: tabular-nums;   /* fixed-width digits, so the count doesn't jitter */
}
.fig__label { font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 1px; color: var(--ink-3); }
.fig--allocated .fig__num { color: var(--blue-tab); }
.fig--missing .fig__num, .fig--missing .fig__label, .ledger__risk { color: var(--orange); }
.ledger__foot {
  display: flex; justify-content: space-between; margin-top: 34px; padding-top: 19px;
  border-top: 1px solid rgba(11, 30, 56, 0.08); font-size: 13px; line-height: 16px; color: var(--ink-3);
}
.ledger__risk { font-weight: 500; white-space: pre; }
.ledger__short { display: none; }

/* ---- Ledger motion — one-shot on scroll-into-view ----------------------
   Only when the script has checked the visitor hasn't asked for reduced
   motion (it adds .motion-ready). Blue blocks fade + rise 6px; nothing
   resizes; the orange pieces don't move — they simply appear. */
.motion-ready [data-ledger] .cell { opacity: 0; transform: translateY(6px); transition: opacity .28s ease-out, transform .28s ease-out; }
.motion-ready [data-ledger] .cell--missing,
.motion-ready [data-ledger] .fig--missing,
.motion-ready [data-ledger] .ledger__risk { opacity: 0; transform: none; transition: opacity .12s ease-out; }   /* crisp: the shortfall lands, it doesn't drift in */
.motion-ready [data-ledger].is-played .cell,
.motion-ready [data-ledger].is-played .fig--missing,
.motion-ready [data-ledger].is-played .ledger__risk { opacity: 1; transform: none; }
.gap__link { margin-top: 36px; white-space: pre; }

/* ==========================================================================
   5 · PackScore
   ========================================================================== */
.packscore {
  display: grid; grid-template-columns: 560px 620px; column-gap: 20px; align-items: center;
  padding: 120px 120px 100px;
}
.packscore__title { margin-top: 27px; }
.packscore__body { width: 520px; margin-top: 54px; }
/* card is 620 × 520; the export adds 28 / 14 of shadow around it */
/* ---- The PackScore card — coded (desktop: 620 × 520) --- */
.ps {
  position: relative; isolation: isolate; width: 620px; height: 520px; border-radius: 24px; color: #0b1e38; text-align: left;
  background: radial-gradient(ellipse 66% 263% at 46% 45%, #ffffff 0%, #fef8f5 33%, #fbede7 67%, #f8e0d6 100%);
  box-shadow: inset 0 0 0 1px rgba(11, 30, 56, 0.05), 0 14px 36px -8px rgba(20, 40, 90, 0.16);
}
.ps::before {   /* warm grain on the plate */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.9; mix-blend-mode: soft-light;
  background: url("assets/texture-grain-512.png") 0 0 / 512px 512px repeat;
}
.ps__glass {   /* the frosted card on the plate */
  position: absolute; inset: 16px; z-index: -1; border-radius: 20px; background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 20px -2px rgba(42, 74, 140, 0.08);
}
.ps p { position: absolute; margin: 0; }
.ps__eyebrow, .ps__changed { left: 40px; font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 1.1px; color: #656f80; }
.ps__eyebrow { top: 40px; }
.ps__score { left: 36px; top: 62px; font-family: Geist, sans-serif; font-size: 180px; line-height: 234px; letter-spacing: -7.2px; color: #c0451b; font-variant-numeric: tabular-nums; }
.ps__of { left: 260px; top: 196px; font-family: Geist, sans-serif; font-size: 40px; line-height: 52px; color: #656f80; }
.ps__delta { left: 40px; top: 300px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 1.3px; color: #c0451b; white-space: pre; }
.ps__rule { position: absolute; left: 40px; top: 340px; width: 540px; height: 2px; background: rgba(11, 30, 56, 0.1); }
.ps__changed { top: 360px; }
.ps__row { left: 40px; right: 40px; height: 18px; }
.ps__row:nth-of-type(6) { top: 392px; } .ps__row:nth-of-type(7) { top: 424px; } .ps__row:nth-of-type(8) { top: 456px; }
.ps__row span { position: absolute; top: 0; white-space: nowrap; }
.ps__val { left: 0; font-family: Geist, sans-serif; font-size: 14px; line-height: 18px; color: #c0451b; }
.ps__name { left: 42px; top: 1px !important; font-size: 14px; line-height: 17px; }
.ps__why { left: 290px; top: 2px !important; font-size: 13px; line-height: 16px; color: #656f80; }

/* PackScore motion — the score traces itself back to its reasons. Only with .motion-ready.
   Rows fade in (no movement — their numbers are orange); the score counts in navy and only
   turns orange, with the "↓ 14" line, once it has landed. */
.motion-ready [data-ps] .ps__row { opacity: 0; transition: opacity .2s ease-out; }
.motion-ready [data-ps] .ps__row.is-in { opacity: 1; }
.motion-ready [data-ps] [data-ps-late] { opacity: 0; transition: opacity .12s ease-out; }
.motion-ready [data-ps] .ps__score { color: #0b1e38; transition: color .12s ease-out; }
.motion-ready [data-ps].is-landed [data-ps-late] { opacity: 1; }
.motion-ready [data-ps].is-landed .ps__score { color: #c0451b; }

/* ==========================================================================
   6 · Three beliefs
   ========================================================================== */
.section.beliefs { padding: 146px 120px 122px; background: var(--beliefs-bg); }
.beliefs__title { width: 1000px; margin-top: 21px; }
.beliefs__list { display: grid; grid-template-columns: 440px 440px 340px; margin-top: 31px; }
.belief { max-width: 340px; }
.belief:first-child { max-width: 323px; }
.belief__title { min-height: 68px; margin-top: 28px; margin-bottom: 22px; font-size: 26px; line-height: 34px; }

/* ==========================================================================
   FAQ — "Frequently avoided questions" (white cards in both themes)
   ========================================================================== */
.faq { padding: 120px; }
.faq__title { width: 800px; margin-top: 16px; }
.faq__list { display: flex; flex-direction: column; gap: 20px; width: 789px; margin: 64px auto 0; }
.faq__item { border-radius: 16px; background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--card-line); }
/* the whole question row is the button (padding lives here, so the full card is clickable when closed) */
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 32px; border-radius: inherit; cursor: pointer; list-style: none;
  font-size: 22px; line-height: 29px; font-weight: 600;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.faq__a { margin: -16px 0 0; padding: 0 32px 32px; font-size: 15px; line-height: 24px; color: var(--ink-2); }   /* 16 below the question */

/* plus → minus: the upright bar rotates flat (nothing resizes) */
.faq__icon { position: relative; flex: none; width: 24px; height: 24px; margin-top: 2.5px; color: var(--ink-3); transition: color .2s; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 5px; top: 11px; width: 14px; height: 2px; border-radius: 1px; background: currentColor;
}
.faq__icon::after { transform: rotate(90deg); transition: transform .2s ease-out; }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__q:hover .faq__icon, .faq__item[open] .faq__icon { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .faq__icon, .faq__icon::after { transition: none; } }

/* ==========================================================================
   7 · CTA block
   ========================================================================== */
.cta { padding: 60px 24px; }
.cta__block { height: 454px; padding-top: 116px; --block-angle: 146.9deg; }
.cta__title { width: 1000px; }
.cta__sub { width: 1000px; margin-top: 35px; }
.cta .btn-row { margin-top: 41px; }

/* ==========================================================================
   3b · Ecosystem
   ========================================================================== */
.eco { padding: 59px 120px 55px; }
.eco__eyebrow { margin-top: 20px; }
.eco__title { margin-top: 19px; font-size: 34px; line-height: 42px; font-weight: 500; }
.eco__body { width: 760px; margin-top: 18px; color: var(--text-3); }
.eco__cats { margin-top: 10px; font-size: 12px; line-height: 18px; font-weight: 600; white-space: pre; }
.eco__note { width: 760px; margin-top: 10px; font-size: 12px; line-height: 18px; color: var(--text-3); }

/* ==========================================================================
   8 · Footer (identical in both themes)
   ========================================================================== */
.footer { position: relative; height: 560px; padding: 88px 120px 0; background: var(--footer-bg); color: #fff; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 640px 1fr; }
.brand--footer { display: flex; height: 28px; }
.brand--footer .brand__mark use { fill: var(--bone); }
.footer__tagline { width: 330px; margin-top: 20px; font-size: 15px; line-height: 24px; color: var(--footer-muted); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 180px); column-gap: 10px; padding-top: 2px; }
.footer__col { display: flex; flex-direction: column; gap: 4px; }
.footer__head { margin-bottom: 11px; font-size: 11px; line-height: 13px; font-weight: 600; color: var(--footer-muted); }
.footer__head--tracked { letter-spacing: 1.1px; }
.footer__col a { font-size: 15px; line-height: 24px; color: var(--footer-text); }
.footer__col a:hover { color: #fff; }
.footer__watermark {
  position: absolute; left: 120px; top: 290px; margin: 0;
  font-size: 214px; line-height: 214px; font-weight: 600;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.02));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.02; pointer-events: none; user-select: none;
}
.footer__bottom {
  position: absolute; left: 120px; right: 120px; top: 496px; padding-top: 24px;
  display: flex; justify-content: space-between;
  border-top: 2px solid var(--footer-rule);
  font-size: 14px; line-height: 22px; color: var(--footer-muted);
}


/* ==========================================================================
   WIDE — 1440 and up. Backgrounds (bands, dark grounds, footer) run edge to
   edge; the content stays centred on the 1440 design. At exactly 1440 the
   margin works out to 120, so nothing moves.
   ========================================================================== */
@media (min-width: 1440px) {
  :root { --g: calc((100% - 1200px) / 2); }   /* % of the section's width → 120 at 1440 */
  .site { width: 100%; }
  .nav, .gap, .packscore, .section.beliefs, .faq, .eco, .footer { padding-left: var(--g); padding-right: var(--g); }
  .block--hero { left: calc(50% - 696px); }
  .north__block, .cta__block { max-width: 1392px; margin: 0 auto; }
  .footer__watermark { left: var(--g); }
  .footer__bottom { left: var(--g); right: var(--g); }
}


/* ==========================================================================
   LAPTOP — 1200 to 1439 wide. The desktop design, made to fit.
   Nothing here applies at 1440+, so the desktop stays pixel-exact to Figma.
   The side margin eases from 120 (at 1440) to 80 (at 1200); wide pieces
   scale down, and two-column rows share the narrower width.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root { --g: calc(80px + (100vw - 1200px) / 6); }   /* 120 at 1440 → 80 at 1200 */
  .site { width: 100%; }

  .nav { padding-left: var(--g); padding-right: var(--g); grid-template-columns: minmax(0, 400px) 1fr auto; }

  .hero__title { width: auto; }
  .block--hero { width: auto; right: 24px; }

  .what__title { width: auto; max-width: 1100px; padding: 0 var(--g); }
  .panel { width: calc(100% - 2 * var(--g)); }
  /* the card anchors to the panel's right edge, centred, and shrinks so it never meets the copy */
  .panel__cap { left: auto; right: 56px; top: 50%; transform: translateY(-50%); width: min(639px, calc(100% - 561px)); }

  .gap { padding-left: var(--g); padding-right: var(--g); }
  .gap__row { grid-template-columns: minmax(0, 620px) minmax(0, 440px); }
  .gap__visual { width: calc(100% + 2 * var(--g) - 48px); margin-left: calc(24px - var(--g)); }
  .gap__visual::after { left: calc(50% - 220px); }
  .ledger { width: min(1160px, calc(100% - 64px)); }

  .packscore { padding-left: var(--g); padding-right: var(--g); grid-template-columns: minmax(0, 1fr) 620px; }   /* the card keeps its size; the copy column gives way */
  .packscore__body { width: auto; max-width: 520px; }
  /* the export is 676 wide for a 620 card, with 28 / 14 of shadow — keep those ratios as it shrinks */

  .section.beliefs { padding-left: var(--g); padding-right: var(--g); }
  .beliefs__list { grid-template-columns: minmax(0, 440px) minmax(0, 440px) minmax(0, 340px); }

  .faq { padding-left: var(--g); padding-right: var(--g); }
  .eco { padding-left: var(--g); padding-right: var(--g); }

  .footer { padding-left: var(--g); padding-right: var(--g); }
  .footer__top { grid-template-columns: minmax(0, 1fr) auto; }
  .footer__watermark { left: var(--g); }
  .footer__bottom { left: var(--g); right: var(--g); }
}


/* ==========================================================================
   TABLET — from "Homepage — Tablet · 768" and "Tablet · DARK"
   The frame is 768 wide with 48px gutters. Between 768 and 1199 the same
   layout stretches: text keeps the frame's 672 measure, bands and blocks grow.
   ========================================================================== */
@media (max-width: 1199px) {
  :root { --nav-h: 72px; }
  .site { width: 100%; }

  /* type: tablet headings are SemiBold 34/40 */
  .headline, .what__title, .gap__title, .packscore__title, .beliefs__title, .faq__title {
    width: auto; max-width: 672px; font-size: 34px; line-height: 40px; font-weight: 600;
  }
  .btn { height: 54px; min-width: 200px; padding: 0 24px; border-radius: 27px; }
  .btn--ghost { min-width: 200px; box-shadow: inset 0 0 0 1px var(--ghost-line); }
  :root[data-theme="light"] .btn--ghost, :root:not([data-theme]) .btn--ghost { --ghost-line: rgba(11, 30, 56, 0.1); }
  .rule { width: 60px; height: 3.32px; }

  /* the bar */
  .mock-bar__long { display: none; }
  .mock-bar__short { display: inline; }

  /* 1 · Nav — the links drop away; Log in + the button stay */
  .nav { grid-template-columns: 1fr auto; height: 72px; padding: 0 48px; }
  .nav__links { display: none; }
  .nav__actions { gap: 28px; }
  .btn--sm { width: 122px; min-width: 0; height: 40px; padding: 0; border-radius: 20px; font-weight: 500; }

  /* 2 · Hero */
  .hero__eyebrow { margin-top: 96px; padding: 0 48px; }
  .hero__title { width: auto; margin: 19px 48px 0; font-size: 56px; line-height: 62px; letter-spacing: -1.68px; }
  .hero__lead { width: auto; max-width: 672px; margin: 22px auto 0; padding: 0 48px; box-sizing: content-box; font-size: 18px; line-height: 28px; }
  .hero .btn-row { margin-top: 38px; }
  .hero__stage { height: 508px; margin-top: 44px; }
  .block--hero { top: 34px; left: 24px; right: 24px; width: auto; height: 380px; --block-angle: 133.4deg; }
  .tdash { display: block; }   /* the tablet dashboard */

  /* 3 · What you get — the panel shows only the card; the link moves below it */
  .what { padding: 72px 48px 78px; }
  .what__title { margin-top: 17px; }
  .what__sub { width: auto; max-width: 672px; margin-top: 16px; }
  .tabs { margin-top: 34px; }
  .tab:nth-child(n) { width: 156px; box-shadow: inset 0 0 0 1px rgba(11, 30, 56, 0.1); }
  .tab.is-active { box-shadow: none; }
  .panel {
    width: 671px; max-width: 100%; height: auto; margin-top: 40px; padding: 16px;
    box-shadow: inset 0 0 0 1px rgba(11, 30, 56, 0.05), 0 10px 28px -6px rgba(20, 40, 90, 0.14);
  }
  .panel__copy { display: none; }
  .panel__cap { position: static; transform: none; width: 639px; max-width: 100%; }
  .what__link { display: block; width: max-content; margin: 30px auto 0; }

  /* 3c · North star */
  .north { padding: 56px 48px; }
  .north__block { height: auto; max-width: 672px; margin: 0 auto; padding: 50px 48px 44px; border-radius: 28px; --block-angle: 133deg; }
  .north__eyebrow { margin-top: 17px; }
  .north__statement { width: auto; max-width: 576px; margin-top: 19px; font-size: 34px; line-height: 42px; }
  .north .btn-row { margin-top: 32px; }   /* Figma: the buttons overlap the 4th line — see README */

  /* 4 · The Gap — centred, with a glowing backdrop behind the ledger */
  .gap { padding: 72px 48px 68px; background: var(--section-soft); text-align: center; }
  .gap__title { margin: 17px auto 0; }
  .gap__row { display: block; margin-top: 18px; }
  .gap__body { max-width: 672px; margin: 0 auto; }
  .gap__aside .rule { margin: 34px auto 0; }
  .gap__aside .quote { margin-top: 21px; font-size: 21px; line-height: 28px; font-weight: 600; }
  .gap__visual, .packscore__visual {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; justify-content: center;
    margin: 40px -24px 0; padding: 24px; border-radius: 24px;   /* runs to 24px from the screen edges */
  }
  .gap__visual { width: auto; height: auto; background: radial-gradient(ellipse 66% 263% at 46% 45%, #ffffff 0%, #f5f8fe 33%, #eaf0fc 67%, #e2eafb 100%); }
  .gap__visual::before, .packscore__visual::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("assets/texture-grain-512.png") 0 0 / 512px 512px repeat; mix-blend-mode: soft-light;
  }
  .gap__visual::before { opacity: 0.55; }
  .gap__visual::after {   /* the blue bloom behind the ledger */
    content: ""; position: absolute; z-index: -1; left: calc(50% - 115px); top: 17px; width: 396px; height: 304px;
    border-radius: 50%; background: rgba(59, 114, 255, 0.16); filter: blur(70px); pointer-events: none;
  }
  /* PackScore card — tablet: a plain frosted card on the section's warm backdrop */
  .ps {
    width: 672px; max-width: 100%; height: 462px; background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 16px 44px -4px rgba(11, 30, 56, 0.13);
  }
  .ps::before, .ps__glass { display: none; }
  .ps__eyebrow, .ps__changed { left: 28px; font-family: Geist, sans-serif; font-size: 10px; letter-spacing: 0; }
  .ps__eyebrow { top: 28px; }
  .ps__score { left: 24px; top: 52px; font-size: 132px; line-height: 172px; letter-spacing: 0; font-weight: 600; }
  .ps__of { left: 188px; top: 150px; font-size: 29px; line-height: 38px; font-weight: 600; }
  .ps__delta { left: 28px; top: 236px; font-family: Geist, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; }
  .ps__rule { left: 28px; top: 274px; width: calc(100% - 56px); }
  .ps__changed { top: 294px; }
  .ps__row { left: 28px; right: 28px; }
  .ps__row:nth-of-type(6) { top: 326px; } .ps__row:nth-of-type(7) { top: 368px; } .ps__row:nth-of-type(8) { top: 410px; }
  .ps__val { font-weight: 600; }
  .ps__name { left: 38px; top: 0 !important; font-family: Geist, sans-serif; font-weight: 500; line-height: 18px; }
  .ps__why { left: 302px; top: 0 !important; }
  .gap__link { display: block; width: max-content; margin: 34px auto 0; }

  /* the ledger card — tablet: frosted white, flat blocks */
  .ledger {
    width: 100%; max-width: 672px; padding: 22px 24px 23px; border-radius: 24px; text-align: left;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 16px 44px -4px rgba(11, 30, 56, 0.13);
  }
  .ledger::before { display: none; }
  .ledger__eyebrow { font-family: Geist, sans-serif; font-size: 10px; letter-spacing: 0; }
  .ledger__blocks { grid-template-columns: repeat(12, minmax(0, 44px)); gap: 8px; margin-top: 19px; }
  .cell { height: 88px; border-radius: 8px; }
  .cell--solid   { background: linear-gradient(180deg, #638fff, #2e66f5); box-shadow: none; }
  .cell--ghost   { background: rgba(59, 114, 255, 0.26); box-shadow: none; }
  .cell--missing { background: none; box-shadow: inset 0 0 0 2.5px var(--orange); }
  .ledger__figures { grid-template-columns: 208px 208px auto; margin-top: 18px; }
  .fig__num { font-size: 40px; line-height: 52px; letter-spacing: 0; font-weight: 600; }
  .fig__label { font-family: Geist, sans-serif; font-size: 10px; line-height: 13px; letter-spacing: 0; }
  .ledger__foot { margin-top: 13px; padding-top: 13px; font-size: 12px; line-height: 15px; }

  /* 5 · PackScore — stacked and centred, on a warm backdrop */
  .packscore { display: block; padding: 72px 48px 80px; background: var(--section-soft); text-align: center; }
  .packscore__title { margin: 17px auto 0; }
  .packscore__title br { display: none; }
  .packscore__body { width: auto; max-width: 672px; margin: 16px auto 0; }
  .packscore__visual { margin-top: 36px; background: radial-gradient(ellipse 66% 263% at 46% 45%, #ffffff 0%, #fef8f5 33%, #fbede7 67%, #f8e0d6 100%); }
  .packscore__visual::before { opacity: 0.9; }

  /* 6 · Three beliefs — one column, on the plain ground */
  .section.beliefs { padding: 72px 48px 82px; background: var(--section-bg); }
  .beliefs.grain::before { display: none; }
  .beliefs__title { margin-top: 17px; }
  .beliefs__list { display: block; max-width: 672px; margin: 50px auto 0; }
  .belief, .belief:first-child { max-width: none; }
  .belief + .belief { margin-top: 48px; }
  .chevron { width: 26px; height: 30px; }
  .belief__title { min-height: 0; margin: 16px 0 10px; font-size: 24px; line-height: 30px; font-weight: 600; }

  /* FAQ — the same flat cards as desktop (Meesh, 2026-09-29; Figma tablet frames updated to match) */
  .faq { padding: 72px 48px 80px; }
  .faq__title { margin-top: 17px; }
  .faq__list { width: auto; max-width: 672px; margin-top: 54px; gap: 16px; }
  .faq__q { padding: 26px 28px 28px; font-size: 20px; line-height: 27px; }
  .faq__icon { margin-top: 1.5px; }
  .faq__a { margin-top: -18px; padding: 0 28px 28px; }   /* 10 below the question */

  /* 7 · CTA — the brand gradient, as on desktop (Meesh, 2026-09-29 — it used to be a brighter two-stop blue) */
  .cta { padding: 56px 48px; }
  .cta__block {
    height: auto; max-width: 672px; margin: 0 auto; padding: 64px 56px 56px;
    background:
      url("assets/texture-curved-lines.svg") -330px -40px / 1392px 510px no-repeat,
      linear-gradient(143.3deg, var(--block-stops));
  }
  .cta__title { width: auto; max-width: 560px; font-size: 34px; line-height: 40px; font-weight: 600; }
  .cta__sub { width: auto; max-width: 560px; margin-top: 20px; font-size: 17px; line-height: 26px; color: #fff; }
  .cta .btn-row { margin-top: 34px; }

  /* 3b · Ecosystem */
  .eco { padding: 64px 48px 72px; }
  .eco__eyebrow { margin-top: 21px; }
  .eco__title { margin-top: 17px; font-size: 28px; line-height: 34px; font-weight: 600; }
  .eco__body { width: auto; max-width: 672px; margin-top: 16px; }
  .eco__cats { margin-top: 26px; line-height: 20px; font-weight: 500; white-space: pre-wrap; }   /* keeps the spaced dots, still wraps */
  .eco__note { width: auto; max-width: 672px; margin-top: 16px; }

  /* 8 · Footer */
  .footer { height: 451px; padding: 64px 48px 0; }
  .footer__top { grid-template-columns: 282px 1fr; }
  .footer__tagline { width: 250px; margin-top: 18px; }
  .footer__cols { grid-template-columns: repeat(3, 126px); column-gap: 4px; }
  .footer__head { margin-bottom: 11px; }
  .footer__watermark { left: 48px; top: 250px; font-size: 120px; line-height: 120px; }
  .footer__bottom { left: 48px; right: 48px; top: 365px; padding-top: 25px; border-top-width: 1px; }
}


/* ==========================================================================
   MOBILE — from "Homepage — Mobile · 390" and "Mobile · DARK"
   Builds on the tablet rules above. 24px gutters; full-width stacked buttons.
   ========================================================================== */
@media (max-width: 767px) {
  .eyebrow { font-size: 10px; }
  .headline, .what__title, .gap__title, .packscore__title, .beliefs__title, .faq__title { font-size: 28px; line-height: 32px; }
  .btn-row { flex-direction: column; gap: 12px; }
  .btn { width: 100%; min-width: 0; height: 52px; border-radius: 26px; }
  .rule { width: 48px; height: 2.66px; }

  :root { --nav-h: 64px; }

  /* the menu drops down under the pinned nav */
  .menu {
    display: block; position: fixed; left: 0; right: 0; top: calc(var(--bar-h, 70px) + var(--nav-h)); z-index: 39;
    padding: 4px 24px 24px; background: var(--nav-glass); box-shadow: 0 1px 0 var(--nav-line), 0 24px 40px -24px rgba(11, 30, 56, 0.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    animation: menu-in .2s ease-out;
  }
  .menu[hidden] { display: none; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .menu__links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--nav-line); font-size: 20px; line-height: 28px; font-weight: 600; }
  .menu__cta { margin-top: 20px; }

  /* the bar wraps to two rows so the "fictional" line is never lost */
  .mock-bar { flex-wrap: wrap; height: auto; padding: 8px 16px; row-gap: 4px; column-gap: 12px; font-size: 12px; }
  .mock-bar__label { order: 3; width: 100%; }

  /* 1 · Nav — logo + a two-line menu mark */
  .nav { height: 64px; padding: 0 24px; }
  .nav__actions { display: none; }
  .brand__word { font-size: 15px; line-height: 20px; }
  .nav__menu {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px;
    width: 44px; height: 44px; margin-right: -12px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  }
  .nav__menu span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--text); }

  /* 2 · Hero — the phone rises out of the blue band and is cut by the hero's bottom edge */
  .hero__eyebrow { margin-top: 40px; padding: 0 24px; }
  .hero__title { margin: 15px 24px 0; font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
  .hero__lead { max-width: none; margin-top: 20px; padding: 0 24px; font-size: 17px; line-height: 26px; }
  .hero .btn-row { margin-top: 32px; padding: 0 24px; }
  .hero__stage { height: 571px; margin-top: 46px; overflow: hidden; }
  .block--hero { top: 0; left: 12px; right: 12px; height: 611px; border-radius: 28px; --block-angle: 106.7deg; }
  .tdash { display: none; }
  .phone { display: block; }   /* the phone rises out of the band; the hero's edge crops it */

  /* 3 · What you get — four view cards replace the tabs and the panel */
  .what { padding: 72px 24px 84px; }
  .what__title { margin-top: 15px; }
  .what__sub { margin-top: 18px; font-size: 16px; line-height: 24px; }
  .tabs, .panel, .what__link { display: none; }
  .views { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
  .view {
    display: flex; flex-direction: column; gap: 3px; height: 78px; padding: 18px 20px; border-radius: 20px;
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(24px); color: var(--navy);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 16px 44px -4px rgba(11, 30, 56, 0.13);
  }
  .view strong { font-size: 16px; line-height: 21px; font-weight: 600; }
  .view span { font-size: 13px; line-height: 17px; color: var(--ink-3); }
  .view.is-active { background: var(--blue-tab); color: #fff; box-shadow: 0 10px 24px -4px rgba(59, 114, 255, 0.28); }
  .view.is-active span { color: #fff; }

  /* 3c · North star */
  .north { padding: 48px 24px; }
  .north__block { padding: 44px 24px 36px; --block-angle: 111.9deg; }
  .north__eyebrow { margin-top: 15px; }
  .north__statement { margin-top: 17px; font-size: 25px; line-height: 31px; }
  .north .btn-row { margin-top: 30px; }
  .north .btn, .cta .btn { height: 50px; border-radius: 25px; font-size: 15px; }

  /* 4 · The Gap */
  .gap { padding: 72px 24px 54px; }
  .gap__title { margin-top: 15px; }
  .gap__row { margin-top: 20px; }
  .gap__body, .packscore__body { font-size: 15px; line-height: 23px; }
  .gap__aside .quote { margin-top: 19px; font-size: 19px; line-height: 26px; }
  .gap__visual, .packscore__visual { margin: 40px -12px 0; padding: 12px; }
  .gap__visual::after { left: calc(50% - 59px); top: 12px; width: 201px; height: 214px; }
  /* PackScore card — mobile: each reason sits under its name */
  .ps { width: 342px; height: 404px; }
  .ps__eyebrow, .ps__changed { left: 20px; font-size: 9px; line-height: 12px; }
  .ps__eyebrow { top: 22px; }
  .ps__score { left: 16px; top: 42px; font-size: 96px; line-height: 125px; }
  .ps__of { left: 135px; top: 113px; font-size: 21px; line-height: 27px; }
  .ps__delta { left: 20px; top: 180px; font-size: 11px; line-height: 14px; }
  .ps__rule { left: 20px; top: 212px; width: calc(100% - 40px); }
  .ps__changed { top: 230px; }
  .ps__row { left: 20px; right: 20px; height: 30px; }
  .ps__row:nth-of-type(6) { top: 258px; } .ps__row:nth-of-type(7) { top: 304px; } .ps__row:nth-of-type(8) { top: 350px; }
  .ps__val { font-size: 13px; line-height: 17px; }
  .ps__name { left: 32px; font-size: 13px; line-height: 17px; }
  .ps__why { left: 32px; top: 17px !important; font-size: 11px; line-height: 13px; }

  /* the ledger card — mobile */
  .ledger { max-width: 342px; padding: 18px 18px 20px; }
  .ledger__eyebrow { font-size: 8.5px; line-height: 11px; }
  .ledger__blocks { grid-template-columns: repeat(12, minmax(0, 20px)); gap: 4px; margin-top: 13px; }
  .cell { height: 44px; border-radius: 5px; }
  .cell--missing { box-shadow: inset 0 0 0 2px var(--orange); }
  .ledger__figures { grid-template-columns: repeat(3, minmax(0, 102px)); margin-top: 20px; }
  .fig__num { font-size: 26px; line-height: 34px; }
  .fig__label { font-size: 8.5px; line-height: 11px; }
  .ledger__long { display: none; }
  .ledger__short { display: inline; }
  .ledger__foot { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; margin-top: 19px; padding-top: 11px; font-size: 10px; line-height: 12px; }   /* wraps only on the narrowest phones */

  /* 5 · PackScore */
  .packscore { padding: 72px 24px 84px; }
  .packscore__title { margin-top: 15px; }
  .packscore__body { margin-top: 18px; }
  .packscore__visual { margin-top: 36px; }

  /* 6 · Three beliefs */
  .section.beliefs { padding: 72px 24px 84px; }
  .beliefs__title { margin-top: 15px; }
  .beliefs__list { margin-top: 12px; }
  .belief + .belief { margin-top: 44px; }
  .chevron { width: 21px; height: 25px; }
  .belief__title { margin: 15px 0 10px; font-size: 21px; line-height: 27px; }
  .belief .body { font-size: 15px; line-height: 23px; }

  /* FAQ */
  .faq { padding: 72px 24px 84px; }
  .faq__title { margin-top: 15px; }
  .faq__list { margin-top: 16px; gap: 14px; }
  .faq__q { gap: 16px; padding: 20px 20px 22px; font-size: 17px; line-height: 23px; }
  .faq__icon { width: 20px; height: 20px; margin-top: 1.5px; }
  .faq__icon::before, .faq__icon::after { left: 4px; top: 9px; width: 12px; }
  .faq__a { margin-top: -12px; padding: 0 20px 22px; font-size: 14px; line-height: 22px; }   /* 10 below the question */

  /* 7 · CTA */
  .cta { padding: 48px 24px; }
  .cta__block {
    padding: 52px 24px 34px; border-radius: 28px;
    background:
      url("assets/texture-curved-lines.svg") -420px -40px / 1392px 510px no-repeat,
      linear-gradient(123deg, var(--block-stops));
  }
  .cta__title { font-size: 26px; line-height: 32px; }
  .cta__sub { margin-top: 14px; font-size: 15px; line-height: 23px; }
  .cta .btn-row { margin-top: 28px; }

  /* 3b · Ecosystem */
  .eco { padding: 62px 24px 74px; }
  .eco__eyebrow { margin-top: 19px; }
  .eco__title { margin-top: 15px; font-size: 24px; line-height: 30px; }
  .eco__body { margin-top: 16px; font-size: 15px; line-height: 23px; }
  .eco__sep { display: none; }
  .eco__break { display: inline; }
  .eco__cats { white-space: pre; }
  .eco__note { font-size: 11px; line-height: 16px; }

  /* 8 · Footer — links fold into two columns */
  .footer { height: 630px; padding: 56px 24px 0; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .brand--footer { height: 22px; gap: 16px; }
  .brand--footer .brand__mark { width: 18px; height: 22px; }
  .footer__tagline { width: auto; max-width: 300px; margin-top: 22px; line-height: 23px; }
  .footer__cols { grid-template-columns: minmax(0, 183px) minmax(0, 1fr); column-gap: 0; row-gap: 22px; margin-top: 28px; padding-top: 0; }
  .footer__head { margin-bottom: 9px; font-size: 10px; }
  .footer__col a { font-size: 14px; line-height: 22px; }
  .footer__watermark { left: 24px; top: 470px; font-size: 61px; line-height: 61px; }
  .footer__bottom { left: 24px; right: 24px; top: 528px; flex-direction: column; gap: 7px; font-size: 13px; line-height: 17px; }
}


/* ==========================================================================
   EMBED — ?embed=desktop | tablet | phone (Meesh 11/06)
   The portfolio case study (Wolfpack §05) frames these exact dashboards in its laptop, iPad and iPhone pictures,
   so they move there just as they do here. Only the chosen dashboard shows, pinned to the top-left corner at
   its native size, with no card corners or shadow (the device picture supplies the frame).
   ========================================================================== */
html[data-embed], html[data-embed] body { background: transparent !important; overflow: hidden !important; }
html[data-embed] body * { visibility: hidden; }
html[data-embed=desktop] .dash, html[data-embed=desktop] .dash *,
html[data-embed=tablet] .tdash, html[data-embed=tablet] .tdash *,
html[data-embed=phone] .phone, html[data-embed=phone] .phone * { visibility: visible; }
html[data-embed=desktop] .dash { display: block !important; position: fixed !important; left: 0 !important; top: 0 !important;
  height: 662.4px !important; border-radius: 0 !important; box-shadow: none !important; }
html[data-embed=tablet] .tdash { display: block !important; position: fixed !important; left: 0 !important; top: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; }
html[data-embed=phone] .phone { display: block !important; position: fixed !important; left: -8px !important; top: -8px !important;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
html[data-embed=phone] .phone__screen { border-radius: 0 !important; }
/* in a device the screen itself is the edge: the panels' own rounded clips (sized for the free-floating card) come off */
html[data-embed=desktop] .dash__side { clip-path: inset(1.5px -24px 0 1.5px) !important; }
html[data-embed=desktop] .dash__head { clip-path: inset(1.5px 0 -24px 0) !important; }
html[data-embed=tablet] .tdash__side, html[data-embed=tablet] .tdash__head { clip-path: none !important; }
html[data-embed=phone] .phone__bar { clip-path: none !important; }