:root {
  --navy: #123A6B;
  --navy-deep: #0B2647;
  --ocean: #2E7CC0;
  --sky: #7FC6E6;
  --foam: #EAF7FB;

  --ink: #1C1D21;
  --ink-2: #2A2B30;
  --paper: #F6F7F8;
  --muted: #5E6168;
  --line: #E1E3E6;
  --c-local: #1F5FA8;   /* chart + bar: local shop (validated pair) */
  --c-super: #5FB0DA;   /* chart + bar: cheapest supermarket */

  --r-sm: 6px;
  --r-md: 12px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2 { font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }

.label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px var(--gutter);
  color: var(--navy-deep);
}
.wordmark {
  font-weight: 600; font-size: 18px; letter-spacing: -0.03em; text-decoration: none;
}
.lang { position: relative; display: flex; }
.lang button {
  background: none; border: 0; padding: 6px 8px; cursor: pointer;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px;
  color: var(--navy); opacity: .7; border-radius: var(--r-sm);
}
.lang button { transition: opacity .35s var(--ease-out); }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang-ind {
  position: absolute; left: 0; bottom: 2px; width: 50%; height: 1px;
  background: currentColor; pointer-events: none;
  transform: translateX(0) scaleX(.45);
  transition: transform .55s var(--ease-out);
}
.lang[data-active="es"] .lang-ind { transform: translateX(100%) scaleX(.45); }
@media (hover: hover) { .lang button:hover { opacity: 1; } }
.lang button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- Hero: Oceanic Shimmer ---------- */
.oceanic-shimmer{
  position:relative; overflow:hidden;
  background-color:#123A6B;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.215'/></svg>"),
    radial-gradient(150% 48.4% at 41.58% 6%, rgba(234,247,251,.92) 0%, rgba(234,247,251,0) 53%),
    radial-gradient(150% 48.4% at 42.42% 33%, rgba(127,198,230,.92) 0%, rgba(127,198,230,0) 53%),
    radial-gradient(150% 48.4% at 51.19% 67%, rgba(46,124,192,.92) 0%, rgba(46,124,192,0) 53%),
    radial-gradient(150% 48.4% at 53.67% 94%, rgba(18,58,107,.92) 0%, rgba(18,58,107,0) 53%);
  background-size:120px 120px, auto, auto, auto, auto;
  background-blend-mode:overlay, normal, normal, normal, normal;
}
.hero {
  padding: 84px var(--gutter) 72px;
  color: var(--navy-deep);
}
.hero-grid {
  width: 100%; max-width: calc(1120px - 2 * var(--gutter)); margin: 0 auto;
  display: grid; gap: 28px;
}
/* Phone: one column in reading order (intro, compare, chart, waitlist). */
.col { display: contents; }
.hero-intro { order: 1; }
.test { order: 2; }
.trend { order: 3; }
.waitlist { order: 4; }
.hero h1 { font-size: clamp(2.6rem, 10vw, 5.25rem); max-width: 11ch; letter-spacing: -0.045em; line-height: .98; }
.hero-sub { text-wrap: pretty; margin-top: 18px; font-size: clamp(1.02rem, 2.4vw, 1.2rem); max-width: 40ch; color: var(--navy); }
@media (min-width: 960px) {
  .hero { padding-top: 112px; padding-bottom: 104px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 72px; align-items: start; }
  .col { display: flex; flex-direction: column; gap: 40px; }
  .hero-intro { padding-top: 8px; }
  .trend { max-width: 400px; margin-top: 8px; }
}

/* ---------- The price test (the one bold moment) ---------- */
.test, .trend {
  background: #F5F8FA;
  color: var(--ink);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 0 0 1px rgba(18, 58, 107, .06),
    0 1px 2px rgba(11, 38, 71, .08),
    0 30px 60px -36px rgba(11, 38, 71, .55);
}
.test { padding: 20px 20px 18px; }

.test-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.test-title { font-size: 1.5rem; letter-spacing: -0.035em; line-height: 1; }

.search { position: relative; margin-top: 16px; }
.search-icon { position: absolute; left: 16px; top: 50%; margin-top: -8px; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 48px; padding: 0 16px 0 42px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #FCFDFD; color: var(--ink); font-size: 16px;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .4s var(--ease-out);
}
.search input::placeholder { color: #8A8D93; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31, 95, 168, .16); }

.hints { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 12px; }
.hints-label { font-size: 13px; color: var(--muted); }
.nomatch:empty { display: none; }
.nomatch { margin-top: 20px; font-size: 15px; color: var(--ink-2); max-width: 40ch; }
.test.is-empty .rows, .test.is-empty .verdict { display: none; }
@media (min-width: 600px) { .test { padding: 28px 28px 22px; } }
.hero-sub { color: var(--navy-deep); }
.test .label { color: var(--muted); }

.products { display: flex; flex-wrap: wrap; gap: 6px; }
.products button {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; font-size: 13px;
  transition: transform .45s var(--ease-out);
}
.products button::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--ink); opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.products button[aria-pressed="true"] { border-color: var(--ink); color: var(--paper); }
.products button[aria-pressed="true"]::before { opacity: 1; }
@media (hover: hover) {
  .products button:not([aria-pressed="true"]):hover::before { opacity: .06; }
}
.products button:active { transform: scale(.97); transition-duration: .15s; }
.products button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.verdict {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
}
.ratio {
  font-size: clamp(3.75rem, 17vw, 6.5rem);
  font-weight: 500; letter-spacing: -0.06em; line-height: .9;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.ratio-text { text-wrap: pretty; font-size: 1rem; max-width: 24ch; color: var(--ink-2); }

.test { display: flex; flex-direction: column; }
.rows { order: 3; list-style: none; padding: 0; margin: 22px 0 0; }
.verdict { order: 4; }
.note { order: 5; }

/* Bars lead: one row per store, cheapest first, price at the end of each bar */
.row {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: 2px; padding: 7px 0;
  opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.rows.is-entering .row { opacity: 0; transform: translateY(6px); }
.row-name { font-size: 15px; line-height: 1.25; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.row-tag {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ocean);
}
.row-track { position: relative; display: block; height: 26px; }
.row-bar {
  position: absolute; left: 0; top: 50%; margin-top: -7px;
  height: 14px; min-width: 4px; border-radius: var(--r-sm);
  width: calc((100% - 62px) * var(--w));
  background: var(--c-super);
  transform-origin: left center;
  transition: transform .7s var(--ease);
}
.row-price {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc((100% - 62px) * var(--w) + 10px);
  font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.row.is-local { margin-top: 6px; padding-top: 15px; border-top: 1px solid var(--line); }
.row.is-local .row-name { font-weight: 500; }
.row.is-local .row-price { color: var(--navy); font-weight: 600; }
.row.is-local .row-bar { background: var(--c-local); }
@media (min-width: 600px) {
  .row { grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 9px 0; }
  .row-name { flex-direction: column; gap: 0; }
}

.note { margin-top: 14px; font-size: 13px; color: var(--muted); max-width: 60ch; }

/* ---------- Waitlist, right after the result (sits on the navy end of the hero) ---------- */
.waitlist { margin-top: 56px; color: var(--foam); }
.waitlist-title { font-size: clamp(1.6rem, 5.5vw, 2.2rem); letter-spacing: -0.035em; line-height: 1.08; }
.waitlist-sub { margin-top: 10px; color: #C4E3F1; max-width: 42ch; }

.signup {
  margin-top: 22px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.signup input {
  flex: 1 1 220px; min-width: 0;
  height: 50px; padding: 0 20px;
  border: 1px solid rgba(234,247,251,.3);
  border-radius: var(--r-pill);
  background: rgba(234,247,251,.1);
  color: var(--foam);
}
.signup input::placeholder { color: rgba(234,247,251,.6); }
.signup input:focus { outline: 2px solid var(--foam); outline-offset: 1px; }
.signup button {
  position: relative; isolation: isolate; overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px;
  border: 0; border-radius: var(--r-pill);
  background: var(--foam); color: var(--navy-deep);
  font-weight: 500; cursor: pointer;
  transition: transform .5s var(--ease-out);
}
.signup button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #FBFDFE; opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.arrow { display: inline-block; transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); }
.signup .arrow { opacity: .55; transform: translateX(-2px); }
@media (hover: hover) {
  .signup button:hover::before { opacity: 1; }
  .signup button:hover .arrow { opacity: 1; transform: translateX(3px); }
}
.signup button:active { transform: scale(.985); transition-duration: .15s; }
.signup button:focus-visible { outline: 2px solid var(--foam); outline-offset: 3px; }
.signup button[disabled] { opacity: .6; cursor: default; }
@media (max-width: 420px) { .signup button { flex: 1 1 100%; } }

.signup-msg { margin-top: 12px; min-height: 1.5em; font-size: 14px; color: var(--foam); }

/* Signed up: the form steps aside, one calm line takes its place */
.signup, .signup-msg { transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.signup.is-leaving, .signup-msg.is-leaving { opacity: 0; transform: translateY(-4px); }
.signup-done { margin-top: 22px; outline: none; }
.signup-done > * { opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.signup-done > .done-sub { transition-delay: .12s; }
.signup-done.is-in > * { opacity: 1; transform: none; }
.done-title { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.done-sub { margin-top: 6px; color: #C4E3F1; }


/* ---------- "Last weeks" chart card (square) ---------- */
.trend {
  margin: 0; padding: 20px 20px 14px;
  border-radius: 22px;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
}
.trend-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trend-title { font-size: 13px; color: var(--muted); }
.trend-product { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; margin-top: 2px; }
.trend .label { color: var(--muted); font-size: 10px; padding-top: 3px; }
.trend-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-2); }
.trend-legend li { display: flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 14px; height: 2px; border-radius: 2px; flex: none; }
.key-local { background: var(--c-local); }
.key-super { background: var(--c-super); }
.trend-plot { position: relative; flex: 1; min-height: 0; margin-top: 6px; display: flex; align-items: flex-end; }
.trend-plot svg { display: block; width: 100%; height: auto; max-height: 100%; overflow: visible; touch-action: pan-y; }
.trend-plot svg:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 4px; }
.tr-grid { stroke: #E4E7EA; stroke-width: 1; }
.tr-axis { font: 400 10px "Geist", system-ui, sans-serif; fill: #7D8087; font-variant-numeric: tabular-nums; }
.tr-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tr-line.tr-local { stroke: var(--c-local); }
.tr-line.tr-super { stroke: var(--c-super); }
.tr-dot { stroke: #F5F8FA; stroke-width: 2; }
.tr-dot.tr-local, .tr-hl.tr-local { fill: var(--c-local); }
.tr-dot.tr-super, .tr-hl.tr-super { fill: var(--c-super); }
.tr-hl { stroke: #F5F8FA; stroke-width: 2; pointer-events: none; }
.tr-end { font: 500 11px "Geist", system-ui, sans-serif; fill: var(--ink); font-variant-numeric: tabular-nums; }
.tr-cross { stroke: #B9BEC5; stroke-width: 1; pointer-events: none; }
/* Hover marks + tooltip glide between weeks */
.tr-cross, .tr-hl, .trend-tip {
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .3s var(--ease-out);
  will-change: transform;
}
.tr-cross.is-on, .tr-hl.is-on, .trend-tip.is-on { opacity: 1; }
.no-move { transition: opacity .3s var(--ease-out) !important; }
.tr-hit { fill: transparent; cursor: crosshair; }
.tr-series { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.tr-series.is-entering { opacity: 0; transform: translateY(6px); }
.trend-tip {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  background: var(--ink); color: #E9EAEC; border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.45);
}
.tip-week { color: #A2A4AA; margin-bottom: 3px; }
.tip-row { display: flex; align-items: center; gap: 6px; }
.tip-row strong { font-weight: 600; color: #F4F6F8; font-variant-numeric: tabular-nums; }

/* ---------- Dock: the app's bottom bar ---------- */
/* Glass, the Apple way: blur + saturation lift on what's behind, a light rim on the edges,
   and a tint that adapts to the section underneath (dark over gradient/black, light over white). */
.dock {
  position: fixed; z-index: 20; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #F4F6F8;
  background: transparent;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.12),
    0 20px 44px -18px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s;
}
.dock.is-shown {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s;
}
.dock::before, .dock::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
/* tint: dark glass by default, light glass over white sections */
.dock::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    rgba(30, 32, 38, .46);
}
.dock::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18) 60%),
    rgba(246, 248, 250, .52);
  opacity: 0;
}
.dock[data-tone="light"]::before { opacity: 0; }
.dock[data-tone="light"]::after { opacity: 1; }
/* the light rim: a 1px gradient ring, brightest on top like a specular highlight */
.dock .glass-rim {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(170deg, rgba(255,255,255,.65), rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.dock[data-tone="light"] { color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(11,38,71,.08), 0 20px 44px -20px rgba(11,38,71,.35); }
.dock[data-tone="light"] .dock-compare { background: var(--navy); color: var(--foam); }
.dock[data-tone="light"] .dock-compare::before { background: #1B4C86; }
.dock[data-tone="light"] .dock-join { color: var(--ink); }
.dock[data-tone="light"] .dock-join:focus-visible, .dock[data-tone="light"] .dock-compare:focus-visible { outline-color: var(--navy); }

/* No blur support, or the visitor asked for less transparency: solid bar, same tones. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dock::before { background: var(--ink-2); }
  .dock::after { background: #F5F8FA; }
}
@media (prefers-reduced-transparency: reduce) {
  .dock { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dock::before { background: var(--ink-2); }
  .dock::after { background: #F5F8FA; }
}
.dock-compare {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--foam); color: var(--navy-deep); font-weight: 500; font-size: 15px; cursor: pointer;
  transition: transform .5s var(--ease-out);
}
.dock-compare::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #FBFDFE; opacity: 0; transition: opacity .5s var(--ease-out); }
@media (hover: hover) { .dock-compare:hover::before { opacity: 1; } }

/* The dock's main action looks like what it does: a search field (like Safari's bar on iPhone). */
.dock-search {
  flex: 1; min-width: 0; justify-content: flex-start; gap: 9px;
  padding: 0 18px 0 16px;
  background: rgba(255, 255, 255, .14); color: rgba(244, 246, 248, .78);
  font-weight: 400; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.dock-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-search svg { flex: none; color: #F4F6F8; }
.dock-search::before { background: rgba(255, 255, 255, .10); }
.dock[data-tone="light"] .dock-search { background: rgba(18, 58, 107, .07); color: #4E5259; box-shadow: inset 0 0 0 1px rgba(18, 58, 107, .08); }
.dock[data-tone="light"] .dock-search svg { color: var(--navy); }
.dock[data-tone="light"] .dock-search::before { background: rgba(18, 58, 107, .05); }
.dock-compare:active, .dock-join:active { transform: scale(.97); transition-duration: .15s; }

/* Join: quiet. On hover it reads "Join the waitlist" — "Join" slides left while the rest fades in. */
.dock-join {
  display: inline-flex; align-items: center; gap: 5px;
  height: 44px; padding: 0 14px; border: 0; background: transparent;
  color: #E9EAEC; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: transform .5s var(--ease-out);
}
.dock-join .join-a { display: inline-block; transform: translateX(var(--more-w, 0px)); transition: transform .55s var(--ease-out); }
.dock-join .join-more { display: inline-block; opacity: 0; transform: translateX(8px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.dock-join .arrow { opacity: .6; }
@media (hover: hover) {
  .dock-join:hover .join-a { transform: none; }
  .dock-join:hover .join-more { opacity: 1; transform: none; transition-delay: .05s; }
  .dock-join:hover .arrow { opacity: 1; transform: translateX(2px); }
}
/* Touch screens can't hover, so Join stays short and gives its space to the search field. */
@media (hover: none) {
  .dock-join .join-more { display: none; }
  .dock-join .join-a { transform: none; }
}
.dock-join:focus-visible .join-a { transform: none; }
.dock-join:focus-visible .join-more { opacity: 1; transform: none; }
.dock-compare:focus-visible, .dock-join:focus-visible, .sheet-close:focus-visible { outline: 2px solid var(--foam); outline-offset: 2px; border-radius: var(--r-pill); }

@media (max-width: 599px) {
  .dock {
    left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
    padding: 7px 8px 7px 7px; border-radius: var(--r-pill);
  }
  .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 600px) {
  .dock {
    left: 50%; bottom: 24px; width: 400px; margin-left: -200px;
    padding: 6px 6px 6px 6px; border-radius: var(--r-pill);
  }
  .foot { padding-bottom: 96px; }
}

/* ---------- Sheet the dock grows into ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 30; background: rgba(20, 21, 24, .45);
  opacity: 0; transition: opacity .45s var(--ease-out);
}
.sheet-backdrop.is-open { opacity: 1; }
.sheet {
  position: fixed; z-index: 31;
  background: var(--ink-2); color: var(--foam);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -20px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.sheet.is-open { opacity: 1; transform: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet-title { font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1.1; }
.sheet-close {
  display: grid; place-items: center; width: 36px; height: 36px; margin-right: -8px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: #A2A4AA; cursor: pointer;
}
@media (hover: hover) { .sheet-close:hover { color: var(--foam); } }
.sheet-sub { margin-top: 6px; color: #C4E3F1; font-size: 15px; }
.sheet .signup { margin-top: 18px; }
.sheet .signup button { flex: 1 1 100%; }
.sheet .signup-done { margin-top: 16px; }

@media (max-width: 599px) {
  .sheet {
    left: 0; right: 0; bottom: 0;
    padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: var(--r-md) var(--r-md) 0 0;
    transform: translateY(100%);
  }
}
@media (min-width: 600px) {
  .sheet {
    left: 50%; bottom: 24px; width: 400px; margin-left: -200px;
    padding: 24px; border-radius: var(--r-md);
    transform-origin: 50% 100%;
    transform: translateY(12px) scale(.96);
  }
  .sheet-backdrop { background: rgba(20, 21, 24, .25); }
}
body.sheet-open { overflow: hidden; }

/* ---------- At the till + story (soft black) ---------- */
.how { background: var(--ink); color: #E9EAEC; padding: 104px 0 112px; }
.how-grid { display: grid; gap: 72px; }
.how h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); max-width: 14ch; }

.steps { list-style: none; margin: 36px 0 0; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px;
  padding: 18px 0; border-top: 1px solid #34353B;
}
.steps li:last-child { border-bottom: 1px solid #34353B; }
.step-n {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: .06em; color: var(--sky); padding-top: 5px;
}
.steps p { font-size: 1.1rem; line-height: 1.45; max-width: 40ch; text-wrap: pretty; }
.steps li:last-child p { color: #F4F6F8; }
.steps-note { margin-top: 16px; font-size: 14px; color: #8E9097; max-width: 52ch; }

.story { max-width: 62ch; }
.story .label { color: #8E9097; }
.story-text { margin-top: 14px; font-size: 1.15rem; line-height: 1.55; color: #D6D8DB; text-wrap: pretty; }

.back-link {
  position: relative; display: inline-block; margin-top: 32px; padding-bottom: 3px;
  color: var(--sky); text-decoration: none;
}
.back-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: .45;
  transition: opacity .6s var(--ease-out);
}
@media (hover: hover) {
  .back-link:hover::after { opacity: 1; }
  .back-link:hover .arrow { transform: translateY(-3px); }
}
.back-link:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; border-radius: 2px; }
@media (min-width: 900px) {
  .how-grid { grid-template-columns: 1.25fr 1fr; gap: 96px; align-items: start; }
  .story { padding-top: 10px; }
}

.top-right { display: flex; align-items: center; gap: 14px; }

/* ---------- Footer ---------- */
.foot { background: var(--ink-2); color: #A2A4AA; font-size: 14px; padding: 28px 0; }
.foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot .wordmark { color: #E9EAEC; font-size: 16px; }

/* ---------- Language switch fade ---------- */
[data-i18n], .products, .verdict, .rows { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.lang-out [data-i18n], .lang-out .products, .lang-out .verdict, .lang-out .rows {
  opacity: 0; transform: translateY(4px);
  transition-duration: .2s;
}
.lang-out .signup button span[data-i18n] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================= Headline-only page + scroll moment ================= */
.hero {
  min-height: 0; display: flex; flex-direction: column;
  padding-bottom: clamp(40px, 7vh, 64px);
}
.hero-inner { width: 100%; max-width: calc(1120px - 2 * var(--gutter)); margin: 0 auto; }
.hero .hero-sub { max-width: 38ch; }
.hero-cue {
  width: 100%; max-width: calc(1120px - 2 * var(--gutter)); margin: clamp(72px, 13vh, 128px) auto 0;
  display: flex; align-items: center; gap: 10px;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--foam);
}
.cue-line { display: block; width: 40px; height: 1px; background: currentColor; opacity: .6; transform-origin: left; animation: cue 2.4s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: .7; } 70% { transform: scaleX(1); opacity: .7; } 100% { transform: scaleX(1); opacity: 0; } }

.stage { position: relative; height: 280vh; background: var(--ink); color: #E9EAEC; }
.stage-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.stage-inner { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.stage-label { color: #8E9097; }

/* A shelf price tag — the one bold thing on the page */
.tag {
  position: relative; margin-top: 18px;
  width: min(340px, 100%);
  background: #F5F8FA; color: var(--ink);
  border-radius: var(--r-sm);
  padding: 26px 22px 22px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
  will-change: transform;
}
.tag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--c-local); }
.tag-product { font-size: 15px; font-weight: 500; }
.tag-store { display: grid; margin-top: 4px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tag-store > span { grid-area: 1 / 1; }
.tag-store-b { color: var(--ocean); opacity: 0; }
.tag-price { position: relative; display: inline-block; margin-top: 18px; transform-origin: left bottom; will-change: transform; }
.tag-old {
  display: inline-block; font-size: clamp(3.75rem, 18vw, 5rem); font-weight: 500; letter-spacing: -0.05em; line-height: .9;
  font-variant-numeric: tabular-nums; transform-origin: left bottom; will-change: transform, opacity;
}
.tag-strike { position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.tag-new {
  margin-top: 4px; font-size: clamp(3.75rem, 18vw, 5rem); font-weight: 500; letter-spacing: -0.05em; line-height: .95;
  color: var(--c-local); font-variant-numeric: tabular-nums; opacity: 0; will-change: transform, opacity;
}
.stage-line { margin-top: 40px; font-size: clamp(2rem, 7vw, 3.5rem); max-width: 14ch; color: #F4F6F8; opacity: 0; }
.stage-link {
  margin-top: 20px; display: inline-flex; gap: 6px; align-items: center;
  border: 0; background: none; padding: 0 0 3px; cursor: pointer;
  font-size: 16px; color: var(--sky); opacity: 0;
  box-shadow: inset 0 -1px 0 rgba(127,198,230,.45);
}
@media (hover: hover) { .stage-link:hover .arrow { transform: translateX(3px); } }
.stage-link:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; border-radius: 2px; }
@media (min-width: 900px) {
  .stage-inner { display: grid; grid-template-columns: 340px 1fr; column-gap: 96px; align-items: end; }
  .stage-label { grid-column: 1 / -1; }
  .tag { grid-column: 1; grid-row: 2 / span 2; }
  .stage-line { grid-column: 2; grid-row: 2; margin-top: 0; }
  .stage-link { grid-column: 2; grid-row: 3; justify-self: start; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage { height: auto; }
  .stage-sticky { position: relative; height: auto; padding: 96px 0; }
  .cue-line { animation: none; }
}

/* At the till + story: now on white, so the page alternates gradient / black / white */
.how { background: var(--paper); color: var(--ink); }
.steps li { border-top-color: var(--line); }
.steps li:last-child { border-bottom-color: var(--line); }
.step-n { color: var(--ocean); }
.steps li:last-child p { color: var(--ink); }
.steps-note, .story .label { color: var(--muted); }
.story-text { color: var(--ink-2); }
.story-sign { margin-top: 20px; font-size: 15px; color: var(--ink); }
.story-sign::before { content: "— "; color: var(--muted); }
.sig-name { font-weight: 500; }
.sig-role { color: var(--muted); }
.story .back-link { margin-top: 28px; }
.back-link { color: var(--navy); border: 0; background: none; padding: 0 0 3px; font: inherit; cursor: pointer; }
.back-link:focus-visible { outline-color: var(--navy); }

/* ---------- Compare sheet (light, holds the full test + chart) ---------- */
.sheet-compare { background: #F5F8FA; color: var(--ink); padding: 0; }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 22px 16px calc(24px + env(safe-area-inset-bottom)); }
.sheet-compare .test { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.sheet-compare .test-title { padding-right: 44px; outline: none; }
.sheet-compare .test-head .label { margin-right: 40px; }
.sheet-compare .trend { margin-top: 28px; background: #EAF0F5; box-shadow: none; max-width: none; }
.sheet-compare .tr-dot, .sheet-compare .tr-hl { stroke: #EAF0F5; }
.sheet-close-compare { position: absolute; top: 14px; right: 14px; color: var(--muted); margin: 0; }
@media (hover: hover) { .sheet-close-compare:hover { color: var(--ink); } }
.sheet-close-compare:focus-visible { outline: 2px solid var(--navy) !important; }
.sheet-compare .test-title:focus-visible { outline: none; }
@media (max-width: 599px) {
  .sheet-compare { display: flex; flex-direction: column; max-height: 90svh; padding: 0; }
  .sheet-compare .sheet-scroll { flex: 1; min-height: 0; }
}
@media (min-width: 600px) {
  .sheet-compare { width: 560px; margin-left: -280px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; padding: 0; }
  .sheet-compare .sheet-scroll { padding: 28px 28px 28px; flex: 1; min-height: 0; }
}
.sheet-title:focus { outline: none; }

/* ================= "At the till" mini-screen ================= */
.how-grid { grid-template-columns: 1fr !important; gap: 112px; }
.till h2 { max-width: 16ch; }
.till-body { display: grid; gap: 28px; margin-top: 36px; }
.till-body .steps { margin-top: 0; }
.steps li { transition: opacity .5s var(--ease-out); }
.steps li:not(.is-active) { opacity: .4; }
.steps-note { max-width: 60ch; }

.ts-wrap { order: -1; position: sticky; top: 12px; z-index: 2; }
.ts-label { margin-top: 10px; color: var(--muted); }
.ts {
  position: relative; height: 266px; overflow: hidden;
  background: #FCFDFD; border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(18,58,107,.07), 0 1px 2px rgba(11,38,71,.06), 0 30px 60px -36px rgba(11,38,71,.4);
}

/* the shelf tag the magnifier sits on */
.ts-tag {
  position: absolute; left: 18px; top: 38px; width: calc(100% - 46px);
  background: #F2F6F9; border-radius: var(--r-sm); padding: 18px 16px 16px;
  box-shadow: inset 0 6px 0 var(--c-local);
  transform-origin: left top;
  transition: transform .7s var(--ease-out), opacity .5s var(--ease-out);
}
.ts-product { font-size: 13px; font-weight: 500; }
.ts-store { margin-top: 2px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ts-price { margin-top: 12px; font-size: 44px; font-weight: 500; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.ts[data-state="2"] .ts-tag { transform: translateY(70px) scale(.86); opacity: 0; }

/* results */
.ts-rows { position: absolute; left: 18px; right: 18px; top: 82px; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ts-row {
  display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i) * 60ms);
}
.ts-row.is-local { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 500; }
.ts-track { position: relative; height: 18px; }
.ts-bar {
  position: absolute; left: 0; top: 4px; height: 10px; border-radius: 6px; min-width: 4px;
  width: calc((100% - 46px) * var(--w)); background: var(--c-super);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--ease-out); transition-delay: calc(120ms + var(--i) * 70ms);
}
.ts-row.is-local .ts-bar { background: var(--c-local); }
.ts-val { position: absolute; top: 0; left: calc((100% - 46px) * var(--w) + 8px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-row.is-local .ts-val { color: var(--c-local); font-weight: 600; }
.ts[data-state="2"] .ts-row { opacity: 1; transform: none; }
.ts[data-state="2"] .ts-bar { transform: scaleX(1); }

/* The liquid-glass magnifier: one piece of glass that starts as a round lens over the tag's corner
   and morphs into the search bar (on hover, or at step 02). It stays glass the whole way. */
.ts-search {
  position: absolute; z-index: 3; top: 16px; right: 14px;
  width: 48px; height: 48px; border-radius: 999px; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 15px;
  color: var(--navy-deep);
  background:
    radial-gradient(120% 140% at 25% 0%, rgba(255,255,255,.55), rgba(255,255,255,.10) 55%, rgba(255,255,255,.22)),
    rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(9px) saturate(190%) brightness(1.04);
  backdrop-filter: blur(9px) saturate(190%) brightness(1.04);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -2px 5px rgba(18,58,107,.10),
    inset 0 0 0 .5px rgba(18,58,107,.10),
    0 10px 22px -10px rgba(11,38,71,.40);
  transition: width .8s var(--ease-out);
}
.ts-rim {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,1), rgba(255,255,255,.18) 40%, rgba(18,58,107,.12) 70%, rgba(255,255,255,.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* a soft specular streak along the top edge, like light on curved glass */
.ts-shine {
  position: absolute; left: 10%; right: 10%; top: 3px; height: 40%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity: .7;
}
.ts-lupe { flex: none; position: relative; color: var(--navy); }
.ts-text {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center;
  font-size: 15px; white-space: nowrap; overflow: hidden;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.ts-placeholder { color: #5E6168; }
.ts-query:not(:empty) + .ts-caret + .ts-placeholder { display: none; }
.ts-caret { display: none; width: 1.5px; height: 18px; margin-left: 1px; background: var(--navy); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.ts[data-state="1"] .ts-search, .ts[data-state="2"] .ts-search { width: calc(100% - 28px); }
.ts[data-state="1"] .ts-text, .ts[data-state="2"] .ts-text { opacity: 1; transition-delay: .35s; }
.ts[data-state="1"] .ts-caret { display: block; }
/* keep the tag's top just under the glass at step 02, so the bar has something to blur */
.ts[data-state="1"] .ts-tag { transform: translateY(14px) scale(.94); opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .ts-search { cursor: text; }
  .ts[data-state="0"] .ts-search:hover { width: calc(100% - 28px); }
  .ts[data-state="0"] .ts-search:hover .ts-text { opacity: 1; transition-delay: .3s; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ts-search { background: #FFFFFF; } }
@media (prefers-reduced-transparency: reduce) { .ts-search { -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; } }

@media (max-width: 899px) {
  .steps li { min-height: 34vh; align-content: start; }
  .steps li:last-child { min-height: 0; }
}
@media (min-width: 900px) {
  .till-body { grid-template-columns: minmax(0, 1fr) 400px; gap: 96px; align-items: start; }
  .ts-wrap { order: 0; top: 120px; }
  .steps li { min-height: 30vh; align-content: start; }
  .steps li:last-child { min-height: 0; }
  .ts { height: 280px; }
}
.how .ts-wrap { background: var(--paper); box-shadow: 0 -12px 0 var(--paper); }
@media (min-width: 900px) { .how .ts-wrap { background: none; box-shadow: none; } }

/* =====================================================================
   Apple's material rules (HIG › Materials):
   - Liquid Glass only on the functional layer that floats above content:
     dock, magnifier, and the Compare / Join sheets (regular variant).
   - Content (price tag, mini-screen, chart) uses a standard "thin" material
     and vibrancy-style fills — never Liquid Glass.
   ===================================================================== */

/* ---- Sheets: Liquid Glass, regular variant ---- */
.sheet {
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.sheet::after { /* rim light: brightest along the top edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 5;
  background: linear-gradient(175deg, rgba(255,255,255,.75), rgba(255,255,255,.12) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Compare: light glass — high opacity because it carries prices and text */
.sheet-compare {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.20) 18%, rgba(255,255,255,0) 40%),
    rgba(244, 247, 250, .84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(11,38,71,.10), 0 40px 80px -30px rgba(11,38,71,.45);
}
/* Join: dark glass, same family as the dock */
.sheet-join {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 35%),
    rgba(30, 32, 38, .66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 40px 80px -30px rgba(0,0,0,.6);
}
/* Lighter dimming so the page stays visible through the glass */
.sheet-backdrop { background: rgba(16, 18, 22, .28); }

/* Phones: sheets float free of the edges with device-like corners (iOS 26) */
@media (max-width: 599px) {
  .sheet {
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
    border-radius: 32px;
    padding-bottom: 20px;
  }
  .sheet-compare { max-height: calc(90svh - 8px); padding: 0; }
  .sheet-compare .sheet-scroll { padding-bottom: 24px; }
}
@media (min-width: 600px) {
  .sheet { border-radius: 28px; }
}

/* Inside the Compare glass: vibrancy-style fills instead of nested glass */
.sheet-compare .search input {
  background: rgba(118, 118, 128, .12); border-color: transparent;
}
.sheet-compare .search input:focus { background: rgba(118, 118, 128, .16); border-color: transparent; box-shadow: 0 0 0 3px rgba(31,95,168,.22); }
.sheet-compare .products button { border-color: rgba(60, 60, 67, .14); background: rgba(255,255,255,.35); }
.sheet-compare .trend { background: rgba(118, 118, 128, .08); }
.sheet-compare .tr-dot, .sheet-compare .tr-hl { stroke: #EEF1F4; }
.sheet-compare .row.is-local { border-top-color: rgba(60, 60, 67, .14); }

/* ---- Content: standard "thin" material ---- */
.tag, .ts {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.tag { background: rgba(245, 248, 250, .97); }
.ts  { background: rgba(252, 253, 253, .82); }

/* No blur support, or "Reduce transparency" on: solid surfaces, same colours */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet-compare { background: #F4F7FA; }
  .sheet-join { background: var(--ink-2); }
  .tag { background: #F5F8FA; }
  .ts { background: #FCFDFD; }
}
@media (prefers-reduced-transparency: reduce) {
  .sheet, .tag, .ts { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet-compare { background: #F4F7FA; }
  .sheet-join { background: var(--ink-2); }
  .tag { background: #F5F8FA; }
  .ts { background: #FCFDFD; }
}


/* =====================================================================
   Stronger Liquid Glass: clearer body, thick bright edges, moving light.
   Text stays solid ink; legibility checked over the light hero and the black stage.
   ===================================================================== */

/* moving light (shared) */
.glass-light {
  position: absolute; left: 0; top: 0; z-index: 4; width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.14) 55%, rgba(255,255,255,0));
  mix-blend-mode: soft-light; opacity: 0;
  transition: transform .9s var(--ease-out), opacity .6s var(--ease-out);
  will-change: transform;
}
.glass-light.is-on { opacity: 1; }
.dock .glass-light { width: 160px; height: 160px; margin: -80px 0 0 -80px; }

/* ---- Dock: clearer and thicker ---- */
.dock {
  -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.06);
  backdrop-filter: blur(16px) saturate(200%) brightness(1.06);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(255,255,255,.18),
    inset 0 10px 18px -12px rgba(255,255,255,.45),
    inset 0 -10px 16px -12px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.14),
    0 24px 48px -20px rgba(0,0,0,.5);
}
.dock::before { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), rgba(30, 32, 38, .30); }
.dock::after  { background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.2) 60%), rgba(246, 248, 250, .38); }
.dock .glass-rim { background: linear-gradient(170deg, rgba(255,255,255,.95), rgba(255,255,255,.14) 34%, rgba(255,255,255,0) 60%, rgba(255,255,255,.4)); }

/* ---- Compare sheet: very Liquid Glass ---- */
.sheet-compare {
  -webkit-backdrop-filter: blur(26px) saturate(210%) brightness(1.18);
  backdrop-filter: blur(26px) saturate(210%) brightness(1.18);
  background:
    radial-gradient(140% 60% at 50% -10%, rgba(255,255,255,.70), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.08) 40%, rgba(255,255,255,.18)),
    rgba(240, 245, 250, .56);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 0 -1.5px 1px rgba(255,255,255,.45),
    inset 1.5px 0 1px rgba(255,255,255,.35),
    inset -1.5px 0 1px rgba(255,255,255,.35),
    inset 0 28px 40px -30px rgba(255,255,255,.85),
    inset 0 -30px 40px -32px rgba(18,58,107,.28),
    0 2px 4px rgba(11,38,71,.10),
    0 50px 90px -30px rgba(11,38,71,.55);
}
.sheet-compare::after {
  padding: 1.5px;
  background: linear-gradient(165deg, rgba(255,255,255,1), rgba(255,255,255,.25) 22%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 78%, rgba(255,255,255,.8));
}
.sheet-compare .sheet-scroll { position: relative; z-index: 1; }

/* glass pieces inside the sheet */
.sheet-compare .search input {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(18,58,107,.06), inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 16px -10px rgba(11,38,71,.35);
}
.sheet-compare .search input:focus { background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(31,95,168,.22), 0 6px 16px -10px rgba(11,38,71,.35); }
.sheet-compare .products button {
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.25));
  border-color: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px -6px rgba(11,38,71,.35);
}
.sheet-compare .products button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px -6px rgba(0,0,0,.5); }
.sheet-compare .trend {
  background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.20));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.45), 0 10px 24px -16px rgba(11,38,71,.35);
}
.sheet-compare .tr-dot, .sheet-compare .tr-hl { stroke: #F2F6FA; }
.sheet-compare .tr-grid { stroke: rgba(18,58,107,.12); }
.sheet-compare .note, .sheet-compare .hints-label, .sheet-compare .trend-title, .sheet-compare .label { color: #4E5259; }

/* ---- Join sheet: clearer dark glass ---- */
.sheet-join {
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  backdrop-filter: blur(24px) saturate(200%);
  background:
    radial-gradient(140% 60% at 50% -10%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    rgba(28, 30, 36, .52);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.4),
    inset 0 -1px 1px rgba(255,255,255,.12),
    inset 0 24px 36px -28px rgba(255,255,255,.3),
    0 50px 90px -30px rgba(0,0,0,.65);
}

@media (prefers-reduced-transparency: reduce) {
  .glass-light { display: none; }
  .sheet-compare { background: #F4F7FA; }
  .sheet-join { background: var(--ink-2); }
  .dock { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet-compare { background: #F4F7FA; }
  .sheet-join { background: var(--ink-2); }
}


/* ---- Compare sheet: close button sits above the scrolling content ---- */
.sheet-close-compare { z-index: 6; }

/* ---- Compare search: its own Liquid Glass capsule ---- */
.sheet-compare .search {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.22) 55%, rgba(255,255,255,.34));
  -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.08);
  backdrop-filter: blur(12px) saturate(200%) brightness(1.08);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 -1.5px 1px rgba(255,255,255,.5),
    inset 0 12px 16px -12px rgba(255,255,255,.9),
    inset 0 -10px 14px -12px rgba(18,58,107,.22),
    0 8px 20px -12px rgba(11,38,71,.40);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.sheet-compare .search input,
.sheet-compare .search input:focus {
  position: relative; z-index: 2;
  background: transparent; border-color: transparent; box-shadow: none;
}
.search-rim {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,1), rgba(255,255,255,.2) 38%, rgba(18,58,107,.10) 68%, rgba(255,255,255,.85));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* a band of light that sweeps across the glass on hover */
.search-sweep {
  position: absolute; z-index: 1; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75) 50%, rgba(255,255,255,0));
  transform: translateX(-120%) skewX(-18deg); opacity: 0;
}
.sheet-compare .search .search-icon { z-index: 3; color: var(--navy); transition: transform .6s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .sheet-compare .search:hover { transform: translateY(-1px) scale(1.01); box-shadow:
    inset 0 1.5px 1px #fff, inset 0 -1.5px 1px rgba(255,255,255,.6), inset 0 14px 18px -12px rgba(255,255,255,1),
    inset 0 -10px 14px -12px rgba(18,58,107,.22), 0 14px 28px -14px rgba(11,38,71,.45); }
  .sheet-compare .search:hover .search-sweep { animation: glass-sweep 1.1s var(--ease-out) 1 both; }
  .sheet-compare .search:hover .search-icon { transform: rotate(-12deg) scale(1.1); }
}
.sheet-compare .search:focus-within { transform: translateY(-1px) scale(1.01); box-shadow:
  inset 0 1.5px 1px #fff, inset 0 -1.5px 1px rgba(255,255,255,.6), inset 0 14px 18px -12px rgba(255,255,255,1),
  0 0 0 3px rgba(31,95,168,.22), 0 14px 28px -14px rgba(11,38,71,.45); }
@keyframes glass-sweep {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(260%) skewX(-18deg); opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .sheet-compare .search { -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; }
}

/* ---- Compare sheet scrollbar: slim, rounded, translucent, kept inside the glass curve ---- */
.sheet-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 58, 107, .22) transparent;
  scrollbar-gutter: auto;
}
.sheet-scroll::-webkit-scrollbar { width: 12px; }
.sheet-scroll::-webkit-scrollbar-track { background: transparent; margin: 30px 0; }
.sheet-scroll::-webkit-scrollbar-thumb {
  background: rgba(18, 58, 107, .22);
  border: 4px solid transparent; background-clip: padding-box; border-radius: 999px;
}
.sheet-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(18, 58, 107, .38); }
@media (hover: hover) and (pointer: fine) {
  .sheet-scroll { scrollbar-color: rgba(18, 58, 107, .14) transparent; transition: scrollbar-color .3s; }
  .sheet-scroll:hover { scrollbar-color: rgba(18, 58, 107, .30) transparent; }
}


/* =====================================================================
   Apple's Liquid Glass values (as implemented in glisse, MIT):
   clear body (≈3px blur, saturate 1.5), ~60% tint, a 0.5px edge line,
   a small drop shadow — the "glass" comes mostly from edge refraction
   (glass-lens.js), not from heavy blur.
   ===================================================================== */
.dock {
  -webkit-backdrop-filter: blur(3px) saturate(1.6);
  backdrop-filter: blur(3px) saturate(1.6);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.30),
    inset 0 1px 0 rgba(255,255,255,.35),
    0 1px 3px rgba(0,0,0,.14),
    0 18px 40px -22px rgba(0,0,0,.45);
}
.dock::before { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%), rgba(40, 40, 44, .56); }
.dock::after  { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), rgba(255, 255, 255, .60); }
.dock[data-tone="light"] { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8), 0 1px 3px rgba(11,38,71,.10), 0 18px 40px -22px rgba(11,38,71,.30); }
.dock .glass-rim { background: linear-gradient(170deg, rgba(255,255,255,.7), rgba(255,255,255,.1) 34%, rgba(255,255,255,0) 60%, rgba(255,255,255,.25)); }

/* magnifier → search bar */
.ts-search {
  -webkit-backdrop-filter: blur(2px) saturate(1.6);
  backdrop-filter: blur(2px) saturate(1.6);
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.18) 60%, rgba(255,255,255,.28));
  box-shadow: inset 0 0 0 .5px rgba(18,58,107,.14), inset 0 1px 0 rgba(255,255,255,.95), 0 1px 3px rgba(11,38,71,.16), 0 10px 22px -14px rgba(11,38,71,.35);
}

/* Compare search inside the sheet */
.sheet-compare .search {
  -webkit-backdrop-filter: blur(3px) saturate(1.5);
  backdrop-filter: blur(3px) saturate(1.5);
}

/* sheets: Apple tint (~62%), lighter blur, hairline edge */
.sheet-compare {
  -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(1.06);
  backdrop-filter: blur(14px) saturate(1.6) brightness(1.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 30%),
    rgba(246, 248, 251, .66);
  box-shadow:
    inset 0 0 0 .5px rgba(18,58,107,.12),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 3px rgba(11,38,71,.12),
    0 40px 80px -36px rgba(11,38,71,.50);
}
.sheet-join {
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 35%), rgba(40, 40, 44, .66);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.2), 0 40px 80px -36px rgba(0,0,0,.6);
}

/* the moving light: subtler, closer to Apple's press glow */
.glass-light { background: radial-gradient(closest-side, rgba(255,255,255,.38), rgba(255,255,255,.08) 60%, rgba(255,255,255,0)); }


/* ---- Consent line in the Join card + legal links in the footer ---- */
.consent { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: #B9D6E4; }
.consent a { color: var(--foam); text-underline-offset: 3px; }
.sheet .signup-done:not([hidden]) ~ .consent, .sheet:has(.signup-done:not([hidden])) .consent { display: none; }
.foot-inner { align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-right: auto; margin-left: 24px; }
.foot-links a { color: #A2A4AA; text-decoration: none; }
@media (hover: hover) { .foot-links a:hover { color: #E9EAEC; text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 599px) { .foot-links { order: 3; margin-left: 0; width: 100%; } }