/* ============================================================
   Outstrip: restaurant intelligence, marketing site.

   Inherits the console v5 visual world exactly: paper below,
   one dark night slab above, glass only where the product's own
   glass lives, orange spent on "this one is yours" and nothing
   else. The site is the console's front door, so it must be
   made of the same material.

   Light only, by use scene: an owner opens this on a phone in
   daylight, standing up.
   ============================================================ */

:root {
  color-scheme: light;

  --paper:        #f4f1ec;
  --paper-2:      #efebe4;
  --card:         #fffdfa;
  --card-2:       #faf7f2;
  --ink:          #14130f;
  --ink-2:        #3d3a34;
  --ink-3:        #6d685f;
  --ink-4:        #9a9489;
  --line:         rgba(20, 19, 15, .10);
  --line-2:       rgba(20, 19, 15, .05);
  --night:        #16150f;
  --night-2:      #201e17;
  --night-ink:    #f6f3ec;
  --night-ink-2:  #b7b1a3;
  --night-ink-3:  #8d8778;
  --night-line:   rgba(246, 243, 236, .13);

  --accent:       #eb6834;   /* yours, and only yours */
  --accent-soft:  #fdefe7;
  --series-1:     #2a78d6;
  --series-2:     #1baf7a;

  --good:         #0ca30c;
  --warning:      #fab219;
  --serious:      #ec835a;
  --critical:     #d03b3b;

  --radius:       14px;
  --radius-lg:    26px;
  --shadow:       0 1px 2px rgba(20, 19, 15, .05), 0 8px 24px -14px rgba(20, 19, 15, .22);
  --shadow-lift:  0 1px 2px rgba(20, 19, 15, .06), 0 18px 40px -20px rgba(20, 19, 15, .34);
  --shadow-deep:  0 2px 4px rgba(20, 19, 15, .07), 0 40px 80px -36px rgba(20, 19, 15, .45);

  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:  cubic-bezier(.77, 0, .175, 1);
  --press:        transform 140ms var(--ease-out);

  /* Newsreader is a news-desk serif: low contrast, sturdy at display size,
     warm at reading size, with real optical sizing. It says "somebody read
     the paper for you", which is the product. Schibsted Grotesk carries the
     UI: a newsroom grotesque with a tall x-height, open apertures and
     proper tabular figures, because these numbers are read outdoors on a
     phone in daylight. */
  --display: Newsreader, ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --gut: clamp(18px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;          /* Schibsted's x-height runs tall; 16 reads shouty */
  line-height: 1.52;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
/* one place decides how the display face is set, so every heading matches */
.hero h1, .sec-h h2, .rung h3, .close h2, .proofstrip .n, .price .amt b, .art .score b {
  font-family: var(--display); font-optical-sizing: auto; font-synthesis: none;
}

/* the paper has tooth; without it the large flat fields band */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
svg { display: block; }
a { color: inherit; }

/* browser surfaces belong to the design too */
::selection { background: var(--accent); color: #fff; }
:root { caret-color: var(--accent); scrollbar-color: var(--ink-4) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(20,19,15,.22); border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: rgba(20,19,15,.34); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* the nav is sticky, so anything a link jumps to has to stand clear of it.
   Without this a deep link lands with its own heading hidden under the bar.
   The long pages carry a sticky table of contents under the nav as well. */
:where([id]) { scroll-margin-top: 84px; }
body:has(.toc) :where([id]) { scroll-margin-top: 138px; }

.wrap { width: min(1220px, 100%); margin: 0 auto; padding-inline: var(--gut); }
.fig { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   nav
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms ease, background 260ms ease;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 64px; min-width: 0; }
.nav .mark { flex: none; }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 640; letter-spacing: -.025em; font-size: 17px; }
/* the real Outstrip mark, carried in from the product's own asset set.
   It brings its own navy and its own gradient, which is why it is the one
   thing on this site allowed outside the palette: a logo is not a token. */
.mark .g { width: 28px; height: 28px; flex: none; display: block; object-fit: contain; }
.nav .links { display: flex; gap: 4px; margin-left: 12px; }
.nav .links a {
  padding: 7px 12px; border-radius: 9px; text-decoration: none;
  color: var(--ink-3); font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  transition: color 180ms ease, background 180ms ease;
}
@media (hover: hover) and (pointer: fine) { .nav .links a:hover { color: var(--ink); background: var(--line-2); } }
/* the page you are on is named, not merely highlighted */
.nav .links a[aria-current="page"] { color: var(--ink); background: var(--line-2); font-weight: 560; }
.nav .end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* the reading rail: the only thing on the page that reports scroll position */
.nav .rail { position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left center; opacity: 0; transition: opacity 260ms ease; }
.nav.stuck .rail { opacity: 1; }

/* mobile: a real drawer, because the four sections are now four pages */
.nav .burger { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); place-items: center; }
.nav .burger i { display: block; width: 15px; height: 1.5px; background: var(--ink-2); border-radius: 2px; position: relative; transition: transform 240ms var(--ease-out), opacity 160ms ease; }
.nav .burger i::before, .nav .burger i::after { content: ''; position: absolute; left: 0; width: 15px; height: 1.5px; background: inherit; border-radius: 2px; transition: transform 240ms var(--ease-out); }
.nav .burger i::before { top: -5px; }
.nav .burger i::after { top: 5px; }
.nav .burger[aria-expanded="true"] i { background: transparent; }
.nav .burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); background: var(--ink-2); }
.nav .burger[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); background: var(--ink-2); }

.drawer {
  position: fixed; inset: 64px 0 auto 0; z-index: 55; display: none;
  background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lift); padding: 14px var(--gut) 20px;
  /* the body is locked while this is open, so the drawer scrolls itself.
     Six rows and a button do not fit a phone held in landscape */
  max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
}
.drawer a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; text-decoration: none; font-size: 17px; font-weight: 520;
  letter-spacing: -.016em; border-bottom: 1px solid var(--line-2); color: var(--ink);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer a span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); }
.drawer a[aria-current="page"] { color: var(--accent); }
.drawer .btn { margin-top: 14px; width: 100%; }
.drawer.open { display: block; animation: drawerin 280ms var(--ease-out); }
@keyframes drawerin { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .drawer.open { animation: none; } }

@media (max-width: 920px) {
  .nav .links { display: none; }
  .nav .burger { display: grid; }
  .nav .end .btn.sm:not(.accent) { display: none; }   /* sign-in lives in the drawer */
}
@media (max-width: 420px) { .mark { font-size: 16px; } .mark b { display: none; } }

/* skip link, the first tab stop on every page */
.skip {
  position: absolute; left: 12px; top: 10px; z-index: 90;
  padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--paper);
  font-size: 13.5px; font-weight: 540; text-decoration: none;
  transform: translateY(-160%); transition: transform 200ms var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ============================================================
   buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); text-decoration: none;
  font-size: 14.5px; font-weight: 540; letter-spacing: -.012em; color: var(--ink-2); white-space: nowrap;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease, var(--press);
}
.btn:active { transform: scale(.975); }
@media (hover: hover) and (pointer: fine) { .btn:hover { border-color: var(--ink-4); color: var(--ink); } }
.btn.accent {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(20,19,15,.12), 0 12px 26px -14px var(--accent);
}
.btn.accent:hover { background: #f07440; border-color: #f07440; color: #fff; box-shadow: 0 2px 4px rgba(20,19,15,.14), 0 18px 34px -14px var(--accent); }
.btn.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.ink:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.btn.night { background: rgba(255,255,255,.09); border-color: var(--night-line); color: var(--night-ink); }
.btn.night:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.28); color: var(--night-ink); }
.btn.lg { padding: 13px 22px; font-size: 15.5px; border-radius: 12px; }
.btn.sm { padding: 7px 13px; font-size: 13px; }
.btn .arr { transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .arr { transform: translateX(3px); } }

/* ============================================================
   the night slab, hero, and the closing band
   ============================================================ */
.slab {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg); color: var(--night-ink);
  background: linear-gradient(176deg, var(--night-2), var(--night) 62%, #121108);
  box-shadow: var(--shadow-deep);
}
/* the blobs exist so the glass has something to refract; without them
   the blur reads as flat grey and the whole material collapses */
.slab::before {
  content: ''; position: absolute; inset: -18%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(760px 340px at 82% -12%, rgba(235, 104, 52, .46), transparent 62%),
    radial-gradient(560px 300px at 6% 96%,  rgba(42, 120, 214, .32), transparent 64%),
    radial-gradient(460px 260px at 56% 112%, rgba(235, 104, 52, .24), transparent 66%),
    radial-gradient(420px 300px at 34% 18%, rgba(27, 175, 122, .13), transparent 68%);
  animation: drift 46s var(--ease-in-out) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2.5%, 0) scale(1.09); }
}
.slab::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* ============================================================
   hero
   ============================================================ */
.hero { padding-top: 26px; }
.hero .slab { padding: clamp(30px, 5vw, 62px) clamp(24px, 4.4vw, 58px) clamp(58px, 6vw, 82px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(28px, 4vw, 54px); align-items: center;
}
@media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }

.hero h1 {
  /* 380 not 400: a serif on a dark field haloes and gains apparent weight */
  font-weight: 380;
  font-size: clamp(38px, 4.5vw, 61px); line-height: 1.08; letter-spacing: -.024em;
  /* ch resolves against this element's own display size, not the body's */
  text-wrap: balance; max-width: 15ch;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede {
  margin-top: 22px; color: var(--night-ink-2); font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6; max-width: 50ch;
}
.hero .lede b { color: var(--night-ink); font-weight: 540; }

/* the free scan, which is the actual product entry, not a newsletter box */
.scanbox { margin-top: 30px; max-width: 520px; }
.scanform {
  display: flex; gap: 8px; padding: 7px; border-radius: 15px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 16px 34px -24px rgba(0,0,0,.95);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.scanform:focus-within { border-color: rgba(235,104,52,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 4px rgba(235,104,52,.14); }
.scanform input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  padding: 10px 12px; color: var(--night-ink); font-size: 15px; letter-spacing: -.01em;
}
.scanform input::placeholder { color: var(--night-ink-3); }
.scanbox .under { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; color: var(--night-ink-3); font-size: 13px; }
.scanbox .under span { display: inline-flex; align-items: center; gap: 6px; }
.scanbox .under svg { flex: none; color: var(--series-2); }

/* the console preview, the product's own surface, shown as itself */
.preview {
  position: relative; border-radius: 17px; padding: 16px 16px 0; overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.115);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px -34px rgba(0,0,0,1);
}
/* a pointer-tracked sheen: the glass catches light as you move over it */
.preview .sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(360px 240px at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.12), transparent 70%);
  transition: opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) { .preview:hover .sheen { opacity: 1; } }

.pv-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pv-head .ph { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, #c8734a, #8a4a2c); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.pv-head b { font-size: 14px; font-weight: 580; letter-spacing: -.015em; }
.pv-head .pw { font-size: 11.5px; color: var(--night-ink-3); }
.pv-head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--night-ink-2); font-family: var(--mono); }
.pv-head .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--series-2); box-shadow: 0 0 0 0 rgba(27,175,122,.6); animation: pulse 2.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(27,175,122,0); } 100% { box-shadow: 0 0 0 0 rgba(27,175,122,0); } }

.pv-first {
  margin-top: 14px; padding: 13px 14px; border-radius: 12px;
  background: rgba(235,104,52,.11); border: 1px solid rgba(235,104,52,.3);
}
.pv-first .t { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.pv-first h4 { margin-top: 5px; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.pv-first p { margin-top: 3px; font-size: 12.5px; color: var(--night-ink-2); }

.pv-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 15px -16px 0; background: rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.09); }
.pv-kpi { padding: 14px 16px 15px; background: rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); min-width: 0; }
.pv-kpi .k { font-size: 11.5px; color: var(--night-ink-2); display: flex; align-items: center; gap: 6px; }
/* proportional, not tabular: nothing here aligns in a column, and tabular
   figures give the decimal point a full figure slot, "4 . 3" */
.pv-kpi .v { margin-top: 7px; display: flex; align-items: baseline; gap: 5px; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.pv-kpi .v b { font-size: 27px; font-weight: 600; line-height: 1; }
.pv-kpi .v small { font-size: 11.5px; color: var(--night-ink-3); letter-spacing: 0; font-weight: 500; }
/* a unit belongs to its number, not to the phrase after it */
.pv-kpi .v .unit { margin-left: -4px; font-size: 14px; color: var(--night-ink-2); }
.pv-kpi .viz { margin-top: 11px; min-height: 30px; color: var(--night-ink-2); }
.pv-kpi .viz svg { width: 100%; overflow: visible; }
.pv-kpi text { font-family: var(--mono); font-size: 9px; fill: currentColor; }

/* dish share, in HTML so the labels are never scaled by a viewBox */
.dishes { display: grid; gap: 6px; }
.dish { display: grid; grid-template-columns: 78px minmax(0, 1fr) 24px; gap: 8px; align-items: center; font-size: 10.5px; color: var(--night-ink-2); }
.dish span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dish i { height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); transform-origin: left center; animation: grow 700ms var(--ease-out) both; }
.dish:first-child i { background: var(--accent); }
.dish b { font-family: var(--mono); font-weight: 400; font-size: 10px; text-align: right; }
.dish:first-child b, .dish:first-child span { color: var(--night-ink); }

/* the seam: proof strip sits half on the slab, half on the paper */
.proofstrip {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lift); overflow: hidden;
  margin: -52px clamp(8px, 3vw, 44px) 0;
}
.proofstrip > div { padding: 18px 20px; border-left: 1px solid var(--line-2); }
.proofstrip > div:first-child { border-left: 0; }
/* 460 because Newsreader's lining figures are lighter than its lowercase */
.proofstrip .n { font-size: 33px; font-weight: 460; line-height: 1; letter-spacing: -.022em; font-variant-numeric: tabular-nums lining-nums; }
.proofstrip .l { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 760px) {
  .proofstrip { grid-template-columns: 1fr 1fr; }
  .proofstrip > div:nth-child(3) { border-left: 0; }
  .proofstrip > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}

/* ============================================================
   section furniture
   ============================================================ */
section.band { padding-block: clamp(76px, 10vw, 132px); }
section.band.tight { padding-block: clamp(54px, 7vw, 92px); }

/* measure is set per-element, because a ch is only meaningful at the size
   the text is actually set in */
.sec-h { max-width: 560px; }
.sec-h h2 {
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 45px); line-height: 1.12; letter-spacing: -.022em;
  text-wrap: balance; max-width: 15ch;
}
.sec-h h2 em { font-style: normal; color: var(--accent); }
.sec-h p { margin-top: 17px; color: var(--ink-3); font-size: 16.5px; line-height: 1.6; max-width: 46ch; }
.sec-h.wide { max-width: 680px; }
.sec-h.wide h2 { max-width: 17ch; }
.sec-h.center { margin-inline: auto; text-align: center; max-width: 660px; }
.sec-h.center h2 { max-width: 20ch; margin-inline: auto; }
.sec-h.center p { margin-inline: auto; max-width: 52ch; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ============================================================
   evidence: the interactive proof demo
   ============================================================ */
.ev { margin-top: 42px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: stretch; }
@media (max-width: 920px) { .ev { grid-template-columns: 1fr; } }

.ev-claims { display: grid; gap: 10px; align-content: start; }
.claim {
  position: relative; width: 100%; text-align: left; display: grid; gap: 7px;
  padding: 17px 19px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--card);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease, var(--press);
}
.claim:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .claim:hover { border-color: var(--ink-4); box-shadow: var(--shadow); } }
.claim[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow); }
.claim .ct { font-size: 15.5px; font-weight: 560; letter-spacing: -.014em; line-height: 1.4; }
.claim .ct b { color: var(--accent); font-weight: 640; font-variant-numeric: tabular-nums; }
.claim .cs { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.claim .cs .src { display: inline-flex; align-items: center; gap: 5px; }
.claim .cs svg { width: 14px; height: 14px; }
.claim .open { margin-left: auto; font-size: 12px; color: var(--ink-4); font-weight: 540; }
.claim[aria-selected="true"] .open { color: var(--accent); }

.ev-panel {
  background: var(--night); color: var(--night-ink); border-radius: 15px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lift);
  position: relative; isolation: isolate;
}
.ev-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(520px 260px at 90% -10%, rgba(235,104,52,.26), transparent 66%);
}
.ev-panel .eh { padding: 17px 20px; border-bottom: 1px solid var(--night-line); display: flex; align-items: center; gap: 12px; }
.ev-panel .eh b { font-size: 14.5px; font-weight: 580; letter-spacing: -.015em; }
.ev-panel .eh .cnt { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--night-ink-3); }
.ev-body { padding: 8px 20px 20px; display: grid; gap: 2px; overflow: auto; max-height: 430px; }
.quote { padding: 15px 0; border-bottom: 1px solid var(--night-line); }
.quote:last-child { border-bottom: 0; }
.quote p { font-size: 14.5px; line-height: 1.55; color: var(--night-ink); }
.quote p mark { background: rgba(235,104,52,.26); color: inherit; border-radius: 3px; padding: 0 2px; }
.quote .qm { margin-top: 8px; display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--night-ink-3); }
.quote .qm svg { width: 13px; height: 13px; }
.quote .stars { color: var(--warning); letter-spacing: .06em; font-size: 11px; }

/* ============================================================
   the street, competitive dot plot
   ============================================================ */
.street { margin-top: 42px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); }
.street h3 { font-size: 17px; font-weight: 600; letter-spacing: -.017em; }
.street .sub { margin-top: 5px; color: var(--ink-3); font-size: 13.5px; }
.plot { margin-top: 26px; display: grid; gap: 3px; }
.prow { display: grid; grid-template-columns: 172px minmax(0, 1fr) 62px; gap: 14px; align-items: center; padding: 9px 0; border-radius: 9px; transition: background 180ms ease; }
@media (hover: hover) and (pointer: fine) { .prow:hover { background: var(--card-2); } }
.prow .who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.prow .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow.you .who { font-weight: 640; color: var(--ink); }
.ymark { font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 2px 6px; border-radius: 5px; flex: none; }
.prow .track { position: relative; height: 10px; border-radius: 99px; background: var(--line-2); box-shadow: inset 0 0 0 1px var(--line-2); }
/* width is the datum; the growth is transform, so it stays on the compositor */
.prow .fillbar {
  position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--ink-4);
  transform-origin: left center; animation: grow 820ms var(--ease-out) both;
}
.prow.you .fillbar { background: var(--accent); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.prow .val { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.prow.you .val { color: var(--accent); font-weight: 500; }
.axis { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
@media (max-width: 620px) { .prow { grid-template-columns: 116px minmax(0,1fr) 52px; gap: 10px; } }

/* ============================================================
   the ladder, free scan / brief / console
   ============================================================ */
.ladder { margin-top: 46px; display: grid; gap: 14px; }
.rung {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 300px); gap: clamp(18px, 3vw, 38px);
  padding: clamp(22px, 3vw, 32px); border-radius: 17px; align-items: start;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .rung:hover { border-color: var(--ink-4); box-shadow: var(--shadow-lift); } }
.rung .when { font-family: var(--mono); font-size: 12px; color: var(--ink-4); line-height: 1.5; padding-top: 4px; }
.rung .when b { display: block; color: var(--accent); font-size: 12px; font-weight: 500; }
.rung h3 { font-size: clamp(22px, 2.3vw, 29px); font-weight: 420; letter-spacing: -.02em; line-height: 1.15; }
.rung.dark h3 { font-weight: 390; }
.rung p { margin-top: 11px; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 56ch; }
.rung ul { margin: 15px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rung li { display: grid; grid-template-columns: 17px 1fr; gap: 9px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.rung li svg { margin-top: 4px; color: var(--series-2); }
.rung .art { border-radius: 13px; overflow: hidden; border: 1px solid var(--line); background: var(--card-2); padding: 15px; }
.rung.dark { background: linear-gradient(174deg, var(--night-2), var(--night)); border-color: transparent; color: var(--night-ink); position: relative; isolation: isolate; overflow: hidden; }
.rung.dark::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 300px at 88% -8%, rgba(235,104,52,.3), transparent 64%), radial-gradient(420px 240px at 4% 106%, rgba(42,120,214,.24), transparent 66%); }
.rung.dark p { color: var(--night-ink-2); }
.rung.dark li { color: var(--night-ink-2); }
.rung.dark .when { color: var(--night-ink-3); }
.rung.dark .art { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); backdrop-filter: blur(24px) saturate(155%); -webkit-backdrop-filter: blur(24px) saturate(155%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
@media (max-width: 980px) { .rung { grid-template-columns: 78px minmax(0,1fr); } .rung .art { grid-column: 1 / -1; } }
@media (max-width: 600px) { .rung { grid-template-columns: 1fr; } .rung .when { padding-top: 0; } }

/* miniature artwork inside the rungs */
.art .aline { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 12.5px; }
.rung.dark .art .aline { border-bottom-color: rgba(255,255,255,.09); }
.art .aline:last-child { border-bottom: 0; }
.art .aline .g { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.rung.dark .art .aline .g { color: var(--night-ink-2); }
.art .score { display: flex; align-items: baseline; gap: 8px; }
.art .score b { font-size: 40px; font-weight: 460; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.art .score span { font-size: 12.5px; color: var(--ink-3); }
.art .meter { margin-top: 12px; height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.art .meter i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transform-origin: left center; animation: grow 900ms var(--ease-out) 260ms both; }

/* the preview's own charts scale uniformly, so their labels stay legible */
.pv-kpi .viz svg, .street svg { max-width: 100%; }

/* ============================================================
   absence: what we could not read
   ============================================================ */
.absence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .absence { grid-template-columns: 1fr; } }
.gaps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.gap { display: flex; align-items: center; gap: 13px; padding: 15px 18px; background: var(--card); font-size: 14.5px; }
.gap .x { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--card-2); color: var(--ink-4); flex: none; }
.gap b { font-weight: 560; }
.gap .why { margin-left: auto; font-size: 12.5px; color: var(--ink-4); text-align: right; }
@media (max-width: 480px) { .gap { flex-wrap: wrap; } .gap .why { margin-left: 35px; text-align: left; width: 100%; } }

/* ============================================================
   sources
   ============================================================ */
.sources { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.source {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 17px 11px 13px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  font-size: 14px; font-weight: 520; box-shadow: var(--shadow);
  transition: border-color 200ms ease, transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .source:hover { border-color: var(--ink-4); transform: translateY(-2px); } }
.source small { color: var(--ink-4); font-weight: 400; font-size: 12.5px; }

/* ============================================================
   pricing
   ============================================================ */
.prices { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; max-width: 820px; margin-inline: auto; }
@media (max-width: 760px) { .prices { grid-template-columns: 1fr; } }
.price { display: flex; flex-direction: column; padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); box-shadow: var(--shadow); }
.price.lead { background: linear-gradient(174deg, var(--night-2), var(--night)); color: var(--night-ink); border-color: transparent; position: relative; isolation: isolate; overflow: hidden; box-shadow: var(--shadow-lift); }
.price.lead::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 280px at 88% -12%, rgba(235,104,52,.34), transparent 64%); }
.price h3 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.price .amt { margin-top: 15px; display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.price .amt b { font-size: 42px; font-weight: 460; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.price.lead .amt b { font-weight: 420; }
.price .amt span { font-size: 13.5px; color: var(--ink-3); letter-spacing: 0; }
.price.lead .amt span { color: var(--night-ink-3); }
.price .desc { margin-top: 12px; font-size: 14px; color: var(--ink-3); line-height: 1.55; min-height: 44px; }
.price.lead .desc { color: var(--night-ink-2); }
.price ul { margin: 20px 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.price li { display: grid; grid-template-columns: 17px 1fr; gap: 9px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.price.lead li { color: var(--night-ink-2); }
.price li svg { margin-top: 4px; color: var(--series-2); }
.price .btn { margin-top: auto; width: 100%; }
.price .tag { position: absolute; top: 20px; right: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* ============================================================
   closing band + footer
   ============================================================ */
.close .slab { padding: clamp(40px, 6vw, 76px) clamp(24px, 4.4vw, 62px); text-align: center; }
.close h2 { font-weight: 380; font-size: clamp(31px, 4.2vw, 53px); line-height: 1.1; letter-spacing: -.024em; max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.close p { margin: 18px auto 0; color: var(--night-ink-2); font-size: 17px; max-width: 52ch; }
.close .scanbox { margin: 30px auto 0; }
.close .scanbox .under { justify-content: center; }

footer { padding: 46px 0 56px; border-top: 1px solid var(--line); margin-top: clamp(60px, 8vw, 100px); }
footer .row { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
footer .col { display: grid; gap: 9px; align-content: start; }
footer .col b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
footer .col a { font-size: 13.5px; color: var(--ink-3); text-decoration: none; transition: color 160ms ease; }
footer .col a:hover { color: var(--ink); }
footer .lead { max-width: 30ch; margin-right: auto; }
footer .lead p { margin-top: 12px; font-size: 13px; color: var(--ink-3); line-height: 1.55; }
footer .base { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-4); }
footer .base span:last-child { margin-left: auto; }

/* ============================================================
   motion this file owns
   Reveals, splits, draws, parallax and marquees all live in anim.css.
   What is left here is motion that belongs to a specific component:
   the slab's colour field, the live dot, and the measured bars.
   ============================================================ */
.still .fillbar, .still .meter i, .still .dish i { animation: none !important; transform: none !important; }
.still .slab::before, .still .pv-head .live i { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .slab::before { animation: none; }
  .prow .fillbar, .art .meter i, .dish i { animation: none; transform: none; }
  .btn:active, .claim:active { transform: none; }
  .pv-head .live i { animation: none; }
}