/* Card Juggler — the site's one stylesheet.
   Three looks, the app's own (ui/theme/Color.kt), each in light and dark:
   - Classic: the app's Classic. Cobalt is the only saturated colour, spent where money is (the saving figure, the best
     card, the confetti). The icon's mint shows only where the icon itself is drawn: the icon, and its glints by the headline.
   - Rupee note: currency paper and banknote green, with the guilloché of a note's line work.
   - Monochrome: the same page with the one colour taken out of it.
   <html data-look> picks the look (none = Classic) and <html data-theme> the mode (none = follow the device).
   The band (header, hero, footer) is the ground the launcher icon sits on: white in light, ink in dark. It was ink
   in every mode while the icon was drawn on ink; since 27 Sep 2026 the icon is a white tile (logo/make.py).
   --money fills a coin and --money-ink writes a saving as text: each look's own colour (cobalt in Classic, as the app). */

:root {
  --bg: #FBFBFD;
  --fg: #1A1C1F;
  --muted: #43474E;
  --line: #C3C6CE;
  --card: #FFFFFF;
  --accent: #2350D9;
  --accent-fg: #FFFFFF;
  --accent-bg: #DCE3FF;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .05);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, .05), 0 24px 48px -12px rgba(16, 24, 40, .18);

  /* The band: the ground the icon is drawn on, and what sits on it. Light here; the dark blocks below make it ink. */
  --ink-start: #FFFFFF;
  --ink-end: #EDF1FA;
  --on-ink: #1A1C1F;
  --on-ink-muted: #4A505C;
  --ink-line: rgba(30, 52, 120, .14);
  --ink-card: #FFFFFF;
  --ink-field: #F2F5FC;       /* the link box in the demo */
  --ink-wash: #F7F9FD;        /* a row in the demo */
  --ink-hover: rgba(35, 80, 217, .07);
  --ink-glare: rgba(35, 80, 217, .07);   /* the light that follows the pointer */
  --ink-lift: 0 1px 2px rgba(20, 32, 70, .05), 0 22px 44px -22px rgba(20, 42, 120, .3);
  --ink-tilt: 0 30px 60px -24px rgba(20, 42, 120, .38);
  --band-edge: rgba(30, 52, 120, .1);
  --bar-glass: rgba(255, 255, 255, .82);
  --bar-shadow: 0 1px 0 rgba(30, 52, 120, .1), 0 10px 30px -16px rgba(20, 42, 120, .25);
  /* The icon's white tile on a white bar: an edge so it is still a tile */
  --mark-edge: drop-shadow(0 1px 1.5px rgba(20, 32, 70, .22)) drop-shadow(0 0 .4px rgba(20, 32, 70, .4));
  --cobalt: #2350D9;          /* the look's colour on the band: the hero's words, buttons, the demo's best card */
  --on-cobalt: #FFFFFF;
  --hero-link: #2350D9;
  --said: #4F78F0;            /* where the headline's shine turns: a lighter cobalt, still 3:1 on the band */
  /* Money: --money is a fill (with --on-money on it); --money-ink is a saving written as text */
  --money: #2350D9;
  --on-money: #FFFFFF;
  --money-ink: #2350D9;
  --glint: #2FD08C;           /* the icon's own sparkles beside the headline: the icon's mint, in Classic only */
  /* Ink in every mode: the app's own dark bar (the Shop tab's best-card bar) */
  --deep-start: #2C333F; --deep-end: #0C0E13; --on-deep: #EEF1F6; --on-deep-muted: #A8B2C4; --deep-money: #AEC3FF;
  /* The demo's confetti: the look's one hue in six values (the app's InkParty, GreyParty) */
  --confetti: #1B3FAF, #2350D9, #3D6BEF, #6F92F7, #AEC3FF, #DCE3FF;
  --warn: #B3261E;            /* the app's error red, in every look: a warning, not decoration */
  --bar-h: 3.75rem;
}

:root[data-look="note"] {
  --bg: #F7F2E5; --fg: #1B1A12; --muted: #4C4839; --line: #CBC5B1; --card: #FFFDF6;
  --accent: #006D40; --accent-fg: #FFFFFF; --accent-bg: #CFEBD8;
  --shadow: 0 1px 2px rgba(40, 34, 12, .07), 0 8px 24px rgba(40, 34, 12, .07);
  --shadow-lg: 0 2px 4px rgba(40, 34, 12, .06), 0 24px 48px -12px rgba(40, 34, 12, .22);
  /* Currency paper, banknote green on it */
  --ink-start: #FFFDF6; --ink-end: #F0E9D6; --on-ink: #1B1A12; --on-ink-muted: #4C4839;
  --ink-line: rgba(70, 58, 20, .16); --ink-card: #FFFDF6; --ink-field: #F6F0E0; --ink-wash: #FAF6EA;
  --ink-hover: rgba(0, 109, 64, .07); --ink-glare: rgba(0, 109, 64, .07);
  --ink-lift: 0 1px 2px rgba(40, 34, 12, .06), 0 22px 44px -22px rgba(40, 34, 12, .32);
  --ink-tilt: 0 30px 60px -24px rgba(40, 34, 12, .4);
  --band-edge: rgba(70, 58, 20, .12); --bar-glass: rgba(255, 253, 246, .84);
  --bar-shadow: 0 1px 0 rgba(70, 58, 20, .12), 0 10px 30px -16px rgba(40, 34, 12, .28);
  --mark-edge: drop-shadow(0 1px 1.5px rgba(40, 34, 12, .24)) drop-shadow(0 0 .4px rgba(40, 34, 12, .4));
  --cobalt: #006D40; --on-cobalt: #FFFFFF; --hero-link: #006D40; --said: #1F8A52;
  --money: #3FB47A; --on-money: #04210F; --money-ink: #006D40; --glint: var(--money);
  --deep-start: #1C2A21; --deep-end: #080A07; --on-deep: #F2ECDD; --on-deep-muted: #B9B29C; --deep-money: #9BE3B8;
  --confetti: #00522F, #006D40, #2E9E62, #7ADA9E, #A4EDC1, #E8A33D;
}

:root[data-look="mono"] {
  --bg: #FAFAFA; --fg: #1A1A1C; --muted: #46474A; --line: #C6C7C9; --card: #FFFFFF;
  --accent: #1F2022; --accent-fg: #FFFFFF; --accent-bg: #E6E6E8;
  --ink-start: #FFFFFF; --ink-end: #F0F0F1; --on-ink: #1A1A1C; --on-ink-muted: #46474A;
  --ink-line: rgba(0, 0, 0, .13); --ink-card: #FFFFFF; --ink-field: #F3F3F4; --ink-wash: #F8F8F9;
  --ink-hover: rgba(0, 0, 0, .05); --ink-glare: rgba(0, 0, 0, .04);
  --ink-lift: 0 1px 2px rgba(0, 0, 0, .05), 0 22px 44px -22px rgba(0, 0, 0, .28);
  --ink-tilt: 0 30px 60px -24px rgba(0, 0, 0, .36);
  --band-edge: rgba(0, 0, 0, .1); --bar-glass: rgba(255, 255, 255, .82);
  --bar-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 10px 30px -16px rgba(0, 0, 0, .22);
  --mark-edge: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .2)) drop-shadow(0 0 .4px rgba(0, 0, 0, .4));
  --cobalt: #1F2022; --on-cobalt: #FFFFFF; --hero-link: #1F2022; --said: #76777A;
  --money: #1F2022; --on-money: #FFFFFF; --money-ink: #1A1A1C; --glint: var(--money);
  --deep-start: #2B2B2E; --deep-end: #0B0B0C; --on-deep: #EDEDEF; --on-deep-muted: #A9AAAD; --deep-money: #FFFFFF;
  --confetti: #46474A, #76777A, #A9AAAD, #C6C7C9, #E6E6E8, #FFFFFF;
}

/* Dark, when the device is and nobody chose light; and when dark was chosen. The band turns ink, and the white
   tile of the icon stands out on it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0F12; --fg: #E3E2E6; --muted: #C3C6CE; --line: #43474E; --card: #17181C;
    --accent: #AEC3FF; --accent-fg: #10275F; --accent-bg: #1E3E9E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 48px -12px rgba(0, 0, 0, .6);
    --ink-start: #2C333F; --ink-end: #0C0E13; --on-ink: #EEF1F6; --on-ink-muted: #A8B2C4;
    --ink-line: rgba(255, 255, 255, .14); --ink-card: rgba(255, 255, 255, .06);
    --ink-field: rgba(255, 255, 255, .06); --ink-wash: rgba(255, 255, 255, .03);
    --ink-hover: rgba(255, 255, 255, .12); --ink-glare: rgba(255, 255, 255, .08);
    --ink-lift: none; --ink-tilt: 0 30px 60px -20px rgba(0, 0, 0, .55);
    --band-edge: transparent; --bar-glass: rgba(12, 14, 19, .8);
    --bar-shadow: 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px -10px rgba(0, 0, 0, .45);
    --mark-edge: none;
    --cobalt: #3D6BEF; --on-cobalt: #FFFFFF; --hero-link: #AEC3FF; --said: #AEC3FF;
    --money: #AEC3FF; --on-money: #10275F; --money-ink: #AEC3FF;
    --warn: #FFB4AB;
  }
  :root[data-look="note"]:not([data-theme="light"]) {
    --bg: #0C0D0A; --fg: #E9E3D2; --muted: #CBC5B1; --line: #474639; --card: #141511;
    --accent: #7ADA9E; --accent-fg: #00391F; --accent-bg: #00522F;
    /* Intaglio: a green-black plate, paper-coloured type, banknote green */
    --ink-start: #1C2A21; --ink-end: #080A07; --on-ink: #F2ECDD; --on-ink-muted: #B9B29C;
    --ink-line: rgba(242, 236, 221, .15); --ink-card: rgba(242, 236, 221, .06);
    --ink-field: rgba(242, 236, 221, .06); --ink-wash: rgba(242, 236, 221, .03);
    --ink-hover: rgba(242, 236, 221, .12); --ink-glare: rgba(242, 236, 221, .08);
    --bar-glass: rgba(8, 10, 7, .8);
    --cobalt: #3FB47A; --on-cobalt: #04210F; --hero-link: #9BE3B8; --said: #9BE3B8;
    --money: #3FB47A; --on-money: #04210F; --money-ink: #7ADA9E;
  }
  :root[data-look="mono"]:not([data-theme="light"]) {
    --bg: #0F0F10; --fg: #E4E4E6; --muted: #C6C7C9; --line: #46474A; --card: #171718;
    --accent: #E6E6E8; --accent-fg: #1C1D1F; --accent-bg: #3A3B3E;
    --ink-start: #2B2B2E; --ink-end: #0B0B0C; --on-ink: #EDEDEF; --on-ink-muted: #A9AAAD;
    --bar-glass: rgba(11, 11, 12, .8);
    --cobalt: #E6E6E8; --on-cobalt: #111113; --hero-link: #FFFFFF; --said: #FFFFFF;
    --money: #E6E6E8; --on-money: #111113; --money-ink: #FFFFFF;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0F12; --fg: #E3E2E6; --muted: #C3C6CE; --line: #43474E; --card: #17181C;
  --accent: #AEC3FF; --accent-fg: #10275F; --accent-bg: #1E3E9E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 48px -12px rgba(0, 0, 0, .6);
  --ink-start: #2C333F; --ink-end: #0C0E13; --on-ink: #EEF1F6; --on-ink-muted: #A8B2C4;
  --ink-line: rgba(255, 255, 255, .14); --ink-card: rgba(255, 255, 255, .06);
  --ink-field: rgba(255, 255, 255, .06); --ink-wash: rgba(255, 255, 255, .03);
  --ink-hover: rgba(255, 255, 255, .12); --ink-glare: rgba(255, 255, 255, .08);
  --ink-lift: none; --ink-tilt: 0 30px 60px -20px rgba(0, 0, 0, .55);
  --band-edge: transparent; --bar-glass: rgba(12, 14, 19, .8);
  --bar-shadow: 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px -10px rgba(0, 0, 0, .45);
  --mark-edge: none;
  --cobalt: #3D6BEF; --on-cobalt: #FFFFFF; --hero-link: #AEC3FF; --said: #AEC3FF;
  --money: #AEC3FF; --on-money: #10275F; --money-ink: #AEC3FF;
  --warn: #FFB4AB;
}
:root[data-look="note"][data-theme="dark"] {
  --bg: #0C0D0A; --fg: #E9E3D2; --muted: #CBC5B1; --line: #474639; --card: #141511;
  --accent: #7ADA9E; --accent-fg: #00391F; --accent-bg: #00522F;
  --ink-start: #1C2A21; --ink-end: #080A07; --on-ink: #F2ECDD; --on-ink-muted: #B9B29C;
  --ink-line: rgba(242, 236, 221, .15); --ink-card: rgba(242, 236, 221, .06);
  --ink-field: rgba(242, 236, 221, .06); --ink-wash: rgba(242, 236, 221, .03);
  --ink-hover: rgba(242, 236, 221, .12); --ink-glare: rgba(242, 236, 221, .08);
  --bar-glass: rgba(8, 10, 7, .8);
  --cobalt: #3FB47A; --on-cobalt: #04210F; --hero-link: #9BE3B8; --said: #9BE3B8;
  --money: #3FB47A; --on-money: #04210F; --money-ink: #7ADA9E;
}
:root[data-look="mono"][data-theme="dark"] {
  --bg: #0F0F10; --fg: #E4E4E6; --muted: #C6C7C9; --line: #46474A; --card: #171718;
  --accent: #E6E6E8; --accent-fg: #1C1D1F; --accent-bg: #3A3B3E;
  --ink-start: #2B2B2E; --ink-end: #0B0B0C; --on-ink: #EDEDEF; --on-ink-muted: #A9AAAD;
  --bar-glass: rgba(11, 11, 12, .8);
  --cobalt: #E6E6E8; --on-cobalt: #111113; --hero-link: #FFFFFF; --said: #FFFFFF;
  --money: #E6E6E8; --on-money: #111113; --money-ink: #FFFFFF;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}
/* Figures that change (counts, savings) keep their width, so nothing next to them jiggles */
.figures b, .demo-save b, .plan em, .plan b, .caps-amount, .caps-row b, .note small { font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--accent); color: var(--accent-fg); }

a { color: var(--accent); }
a:hover { text-decoration: none; }

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.15; }

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 44rem; }

/* ---- the band: header, hero, footer (white in light, ink in dark; see the top of this file) ---- */

.ink {
  background: linear-gradient(160deg, var(--ink-start), var(--ink-end));
  color: var(--on-ink);
}
/* On white the band would run into the page without a hairline; on ink it needs none (--band-edge is transparent) */
header.ink { box-shadow: inset 0 -1px 0 var(--band-edge); }
footer.ink { box-shadow: inset 0 1px 0 var(--band-edge); }
.ink a { color: var(--hero-link); }

.nav {
  display: flex; align-items: center; gap: 1.25rem;
  height: var(--bar-h); font-size: .95rem;
}
.nav .brand {
  display: flex; align-items: center; gap: .6rem;
  margin-right: auto; font-weight: 650; letter-spacing: -.01em; white-space: nowrap;
  color: var(--on-ink); text-decoration: none; font-size: 1.05rem;
}
.nav .brand svg, footer .brand svg { display: block; filter: var(--mark-edge); }
/* the bar's own links only: on the home page they sit in .nav-links, and the Menu's panel (also in .nav) has its own */
.nav > a:not(.brand), .nav-links a { color: var(--on-ink-muted); text-decoration: none; }
.nav > a:not(.brand):hover, .nav-links a:hover { color: var(--on-ink); }
@media (max-width: 36rem) { .nav .hide-narrow { display: none; } }
@media (max-width: 24rem) { .nav { gap: .9rem; } .theme-label { display: none; } }

/* top and bottom only: the shorthand's 0 used to wipe out .wrap's side padding, and the hero ran to the screen's edges on a phone */
.hero { padding-top: 2.5rem; padding-bottom: 4rem; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52rem) {
  .hero { padding-top: 3.5rem; padding-bottom: 5.5rem; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
}

.hero h1 {
  font-size: clamp(2rem, 6.2vw, 3.1rem);
  margin: 0 0 1rem;
}
.hero h1 .said { color: var(--cobalt); }
.hero p.lede {
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: var(--on-ink-muted);
  margin: 0 0 1.8rem; max-width: 34rem;
}

.cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.3rem; border-radius: 10px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
}
/* .ink a would paint its words the hero's link colour, which in light is the button's own cobalt */
.btn-primary, .ink .btn-primary { background: var(--cobalt); color: var(--on-cobalt); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { border-color: var(--ink-line); color: var(--on-ink) !important; }
.btn-ghost:hover { background: var(--ink-card); }
.btn-soon {
  background: var(--ink-card); border-color: var(--ink-line);
  color: var(--on-ink); cursor: default;
  flex-direction: column; align-items: flex-start; gap: .12rem;
  padding-top: .65rem; padding-bottom: .65rem;
}
.btn-soon small { font-weight: 400; font-size: .78rem; color: var(--on-ink-muted); }

.promise {
  margin: 1.8rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  font-size: .92rem; color: var(--on-ink-muted);
}
.promise li { display: flex; align-items: center; gap: .4rem; }
.promise svg { flex: none; }

/* the phone-ish illustration next to the hero text */
.shot {
  background: var(--ink-card); border: 1px solid var(--ink-line);
  border-radius: 18px; padding: 1.1rem; max-width: 22rem;
  margin: 0 auto; width: 100%;
}
.shot .row {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .8rem; border-radius: 11px; margin-bottom: .5rem;
  border: 1px solid var(--ink-line); background: rgba(255, 255, 255, .03);
}
.shot .row.best { border-color: rgba(61, 107, 239, .75); background: rgba(61, 107, 239, .16); }
.shot .chip {
  flex: none; width: 2.6rem; height: 1.7rem; border-radius: 5px;
  background: #5A6880;
}
.shot .row.best .chip { background: var(--cobalt); }
.shot .name { font-size: .88rem; line-height: 1.3; }
.shot .name b { display: block; font-weight: 600; }
.shot .name span { color: var(--on-ink-muted); font-size: .8rem; }
.shot .amt { margin-left: auto; font-weight: 700; font-size: .98rem; white-space: nowrap; }
.shot .row.best .amt { color: #AEC3FF; }
.shot .cap {
  font-size: .74rem; color: var(--on-ink-muted); text-align: center;
  margin: .7rem 0 0; line-height: 1.45;
}
.shot .head {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--on-ink-muted); margin: 0 0 .7rem; padding-left: .2rem;
}

/* ---- ordinary page sections ---- */

section { padding: 4rem 0; }
/* .wrap's side padding outranks the line above, which left a section.wrap with no room above or below it */
section.wrap { padding-top: 4rem; padding-bottom: 4rem; }
section h2 {
  font-size: clamp(1.45rem, 3.6vw, 1.9rem);
  margin: 0 0 .6rem;
}
section .sub { color: var(--muted); margin: 0 0 2.2rem; max-width: 40rem; }

.steps { display: grid; gap: 1.1rem; padding: 0; margin: 0; list-style: none; counter-reset: s; }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: s; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.4rem 1.3rem 1.3rem;
}
.steps li::before {
  content: counter(s);
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  font-weight: 700; font-size: .92rem; margin-bottom: .85rem;
}
.steps b { display: block; margin-bottom: .3rem; }
.steps p { margin: 0; color: var(--muted); font-size: .95rem; }

.grid { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .grid { grid-template-columns: repeat(3, 1fr); } }
.tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.4rem 1.3rem;
}
.tile h3 { font-size: 1.02rem; margin: 0 0 .4rem; }
.tile p { margin: 0; color: var(--muted); font-size: .95rem; }
.tile .ico {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 8px; background: var(--accent-bg); color: var(--accent);
  margin-bottom: .9rem;
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.chips li {
  border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: .35rem .85rem; font-size: .9rem;
}

.band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.figures { display: grid; gap: 1.5rem; text-align: center; }
@media (min-width: 34rem) { .figures { grid-template-columns: repeat(3, 1fr); } }
.figures b { display: block; font-size: 2rem; letter-spacing: -.03em; color: var(--accent); }
.figures span { color: var(--muted); font-size: .95rem; }

.priv { display: grid; gap: 1.6rem; }
@media (min-width: 48rem) { .priv { grid-template-columns: 1fr 1fr; } }
.priv ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.priv li { margin: .4rem 0; }
.priv h3 { margin: 0 0 .6rem; font-size: 1.05rem; }

footer.ink { padding: 3rem 0 2.5rem; margin-top: 0; }
footer .cols { display: grid; gap: 1.6rem; }
@media (min-width: 40rem) { footer .cols { grid-template-columns: 2fr 1fr 1fr; } }
footer h4 { margin: 0 0 .7rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--on-ink-muted); font-weight: 600; }
footer ul { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
footer li { margin: .35rem 0; }
footer a { color: var(--on-ink) !important; text-decoration: none; }
footer .brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 650; }
footer a:hover { text-decoration: underline; }
footer .fine {
  margin: 2.2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--ink-line);
  color: var(--on-ink-muted); font-size: .85rem;
}
footer .fine p { margin: .3rem 0; }

/* ---- text pages (privacy, terms, support) ---- */

.doc { padding: 3rem 0 4.5rem; }
.doc h1 { font-size: clamp(1.7rem, 5vw, 2.1rem); margin: 0 0 .4rem; }
.doc .date { color: var(--muted); font-size: .92rem; margin: 0 0 2rem; }
.doc h2 { font-size: 1.2rem; margin: 2.6rem 0 .7rem; scroll-margin-top: calc(var(--bar-h) + 1rem); }
.doc ul { padding-left: 1.2rem; }
.doc li { margin: .35rem 0; }
.doc .short {
  background: var(--accent-bg); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 1rem 1.15rem; margin: 0 0 1.4rem;
}
.doc .short p { margin: 0; }
.doc .short strong { color: var(--accent); }
.doc ol.things { padding-left: 0; list-style: none; counter-reset: n; }
.doc ol.things > li {
  counter-increment: n; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: .85rem 1rem .85rem 2.9rem; margin: .6rem 0; position: relative;
}
.doc ol.things > li::before {
  content: counter(n); position: absolute; left: .95rem; top: .95rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  font-size: .8rem; font-weight: 700; display: grid; place-items: center;
}
.doc ol.things b { display: block; }
.doc .never {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.15rem; background: var(--card);
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: .1em .35em;
}
.doc .band-note {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .92rem;
}

/* =====================================================================
   The moving parts (assets/site.js). Everything here has a still state
   that reads on its own: with scripts off, or with reduced motion, the
   page shows each picture's ending.
   ===================================================================== */

:root {
  --leather: #754824; --leather-hi: #9A6636; --leather-deep: #5A3518; --leather-thread: #E8C79A;
  --berry: #93264D; --berry-hi: #BF3F6B; --berry-deep: #741B3B; --berry-thread: #F3C7D6;
  --inkw: #232B3B; --inkw-hi: #39445A; --inkw-deep: #1A202D; --inkw-thread: #8C9AB5;
  --gold: #E7C15A; --gold-deep: #9E7A22;
}

/* A card as the app draws it, colours only */
.card-art {
  --a: #2350D9; --b: #1B3FAF;
  position: relative; flex: none; display: block;
  width: 2.8rem; aspect-ratio: 1.586; border-radius: .32rem;
  background: linear-gradient(135deg, var(--a), var(--b));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.card-art::before { /* the chip */
  content: ""; position: absolute; left: 12%; top: 34%; width: 16%; height: 22%;
  border-radius: 2px; background: linear-gradient(135deg, #E9D08B, #B9954A); opacity: .9;
}
.card-art::after { /* a sheen across the face */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .16) 52%, transparent 64%);
}

/* ---- the brand mark: the coin comes up out of the cards, and the glints pop ----
   The coin sits behind the front card, so starting lower it rises out from behind it. */
.mark .m-coin { transform-box: view-box; }
.mark .m-spark { transform-box: fill-box; transform-origin: center; }
.juggle .m-coin { animation: m-coin .9s cubic-bezier(.3, .7, .3, 1) both; }
.juggle .m-spark { animation: m-spark .45s cubic-bezier(.3, 1.7, .5, 1) .5s both; }
.juggle .m-end { animation-delay: .65s; }
@keyframes m-coin {
  0% { transform: translateY(14px); opacity: 0; }
  30% { opacity: 1; }
  62% { transform: translateY(-2.5px); }
  100% { transform: none; }
}
@keyframes m-spark {
  0% { transform: scale(0) rotate(-60deg); }
  100% { transform: none; }
}

/* ---- the hero's demo ---- */
.demo {
  position: relative;
  background: var(--ink-card); border: 1px solid var(--ink-line); box-shadow: var(--ink-lift);
  border-radius: 20px; padding: 1rem; max-width: 23rem; width: 100%; margin: 0 auto;
}
.demo-top {
  display: flex; gap: .5rem; align-items: center;
  background: var(--ink-field); border: 1px solid var(--ink-line);
  border-radius: 12px; padding: .35rem .35rem .35rem .8rem;
}
.demo-link {
  flex: 1; min-width: 0; font-size: .86rem; color: var(--on-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-link.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--cobalt); animation: caret .7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.demo-go {
  font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer;
  border: 0; border-radius: 9px; padding: .45rem .9rem;
  background: var(--cobalt); color: var(--on-cobalt);
  transition: transform .15s;
}
.demo-go:active, .demo-go.pressed { transform: scale(.93); }
.demo-go:focus-visible, .demo-picks button:focus-visible, .seg button:focus-visible, .empty-btn:focus-visible, .genie:focus-visible, .linkish:focus-visible {
  outline: 2px solid var(--hero-link); outline-offset: 2px;
}
.demo-picks { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 .2rem; }
.demo-picks button {
  font: inherit; font-size: .76rem; cursor: pointer; color: var(--on-ink-muted);
  background: transparent; border: 1px solid var(--ink-line); border-radius: 999px; padding: .25rem .65rem;
}
.demo-picks button[aria-pressed="true"] {
  color: var(--on-ink); border-color: rgba(61, 107, 239, .8); background: rgba(61, 107, 239, .18);
  border-color: color-mix(in srgb, var(--cobalt) 80%, transparent); background: color-mix(in srgb, var(--cobalt) 18%, transparent);
}

.demo-stage, .demo-answer { transition: opacity .35s, transform .35s; }
.demo-stage {
  position: relative; height: 0; opacity: 0; overflow: hidden;
  display: grid; place-items: center;
}
.demo.reading .demo-stage { height: 14.5rem; opacity: 1; }
.demo.reading .demo-answer { display: none; }
.demo-status { position: absolute; bottom: .2rem; margin: 0; font-size: .8rem; color: var(--on-ink-muted); }

/* the wallet that opens while the page is read: flat, leather, the app's WalletLoader in miniature */
.dw { position: relative; width: 13.5rem; height: 9.2rem; margin-top: 1.2rem; }
.dw-back {
  position: absolute; inset: 1.2rem 0 0; border-radius: 12px;
  background: linear-gradient(170deg, var(--leather-hi), var(--leather));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.dw-back::after {
  content: ""; position: absolute; inset: 6px; border-radius: 8px;
  border: 1.5px dashed var(--leather-thread); opacity: .55;
}
.dw-pocket {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  border-radius: 6px 6px 12px 12px;
  background: linear-gradient(180deg, var(--leather-hi), var(--leather-deep));
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .25);
}
.dw-pocket::after {
  content: ""; position: absolute; inset: 6px 6px 6px; border-radius: 4px 4px 8px 8px;
  border: 1.5px dashed var(--leather-thread); opacity: .5;
}
.dw-cards { position: absolute; inset: 0; z-index: 1; }
.dw-pocket { z-index: 2; }
.dw-cards .card-art {
  position: absolute; left: 50%; top: 2.6rem; width: 8.4rem; margin-left: -4.2rem;
  transform-origin: 50% 120%;
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.dw-coins { position: absolute; top: .2rem; display: flex; gap: 1.2rem; }
.dw-coins i {
  font-style: normal; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4DC8E, var(--gold) 55%, var(--gold-deep));
  color: #5A4412; font-size: .72rem; font-weight: 800;
  animation: coin-turn 1.1s linear infinite, coin-bob 1.6s ease-in-out infinite;
}
.dw-coins i:nth-child(2) { animation-delay: -.35s, -.5s; }
.dw-coins i:nth-child(3) { animation-delay: -.7s, -1s; }
@keyframes coin-turn { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
@keyframes coin-bob { 50% { translate: 0 -5px; } }

.demo-answer { margin-top: .7rem; }
.demo-best {
  position: relative; display: flex; align-items: center; gap: .75rem;
  padding: .8rem; border-radius: 14px;
  border: 1px solid rgba(61, 107, 239, .8); background: rgba(61, 107, 239, .18);
  border-color: color-mix(in srgb, var(--cobalt) 80%, transparent); background: color-mix(in srgb, var(--cobalt) 18%, transparent);
}
.demo-best .card-art { width: 3.3rem; }
.demo-best-text { flex: 1; min-width: 0; line-height: 1.3; }
.demo-best-text small, .demo-save small { display: block; font-size: .7rem; color: var(--on-ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.demo-best-text b { display: block; font-size: .95rem; }
.demo-best-text span { display: block; font-size: .76rem; color: var(--on-ink-muted); }
.demo-save { margin-left: auto; text-align: right; }
.demo-save b { font-size: 1.25rem; color: var(--money-ink); letter-spacing: -.02em; white-space: nowrap; }
.demo-best .confetti { position: absolute; inset: -40px -20px -10px; width: calc(100% + 40px); height: calc(100% + 50px); pointer-events: none; }
.demo-best.landing { animation: best-land .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes best-land { 0% { transform: translateY(26px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }

.demo-rank { list-style: none; margin: .5rem 0 0; padding: 0; }
.demo-rank li {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: 11px; margin-top: .4rem;
  border: 1px solid var(--ink-line); background: var(--ink-wash);
  font-size: .85rem; line-height: 1.3;
}
.demo-rank small { display: block; color: var(--on-ink-muted); font-size: .74rem; }
.demo-rank b { margin-left: auto; white-space: nowrap; }
.demo-rank li.enter { animation: row-in .45s cubic-bezier(.2, .9, .3, 1) backwards; }
@keyframes row-in { from { opacity: 0; transform: translateX(18px); } }
.demo .cap { font-size: .72rem; color: var(--on-ink-muted); text-align: center; margin: .7rem 0 0; line-height: 1.45; }

/* ---- steps draw themselves ---- */
.step-art { display: block; width: 2.8rem; height: 2.8rem; margin-bottom: .6rem; color: var(--accent); }
.step-art svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.steps li::before { display: none; }
.js .reveal .draw { stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 1.1s ease; }
.js .reveal.seen .draw { stroke-dashoffset: 0; }
.js .reveal.seen li:nth-child(2) .draw { transition-delay: .25s; }
.js .reveal.seen li:nth-child(3) .draw { transition-delay: .5s; }
.js .reveal > * { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .3, 1); }
.js .reveal.seen > * { opacity: 1; transform: none; }
.js .reveal.seen > :nth-child(2) { transition-delay: .08s; }
.js .reveal.seen > :nth-child(3) { transition-delay: .16s; }
.js .reveal.seen > :nth-child(4) { transition-delay: .24s; }
.js .reveal.seen > :nth-child(5) { transition-delay: .32s; }
.js .reveal.seen > :nth-child(6) { transition-delay: .4s; }
.tile { transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---- Jugaad ---- */
.jugaad-grid { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 52rem) { .jugaad-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.genie-box { display: flex; align-items: center; gap: 1rem; }
.genie {
  flex: none; width: 8.5rem; height: 8.5rem; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent);
}
.genie svg { width: 100%; height: 100%; overflow: visible; }
/* He floats, blinks now and then, and hops when tapped: squash on landing, as in the app */
.genie-body { animation: float 2.4s ease-in-out infinite; transform-box: view-box; transform-origin: 32px 56px; }
@keyframes float { 50% { transform: translateY(-1.5px); } }
.genie.talk .genie-body { animation: genie-hop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes genie-hop { 35% { transform: translateY(-5px); } 70% { transform: scale(1.08, .9); } }
.genie .eyes { animation: blink 4.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 92%, 97%, 100% { transform: none; } 94.5% { transform: scaleY(.12); } }
.orbit .coin circle { fill: var(--gold); stroke: var(--gold-deep); stroke-width: .6; }
.orbit .coin text { fill: #5A4412; font-size: 4.2px; font-weight: 800; font-family: -apple-system, Segoe UI, Roboto, sans-serif; }
.bubble {
  position: relative; margin: 0; padding: .8rem 1rem; border-radius: 14px;
  background: var(--accent-bg); color: var(--fg); font-size: .95rem; line-height: 1.45;
  transition: opacity .2s;
}
.bubble::before {
  content: ""; position: absolute; left: -7px; top: 50%; margin-top: -7px;
  border: 7px solid transparent; border-left: 0; border-right-color: var(--accent-bg);
}
.bubble.swap { opacity: 0; }

.plan {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.2rem 1.2rem .9rem; box-shadow: var(--shadow);
}
.plan-kicker { margin: 0; font-weight: 700; }
.plan-why { margin: .2rem 0 .9rem; color: var(--muted); font-size: .92rem; }
.plan-bar { display: flex; gap: 5px; height: 10px; margin-bottom: .9rem; }
.plan-bar i { display: block; height: 100%; border-radius: 99px; background: var(--line); transition: flex-basis .5s cubic-bezier(.3, .9, .3, 1), background .3s; }
.plan-bar .g { flex: 0 0 49%; background: var(--accent); }
.plan-bar .r { flex: 1; }
.plan-row { display: flex; align-items: center; gap: .75rem; margin: .55rem 0; }
.plan-row .card-art { width: 3.4rem; }
.plan-row span:not(.card-art) { min-width: 0; line-height: 1.3; }
.plan-row b { display: block; font-size: .95rem; }
.plan-row small { color: var(--muted); font-size: .82rem; }
.plan-row em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--money-ink); white-space: nowrap; }
.plan hr { border: 0; border-top: 1px solid var(--line); margin: .8rem 0 .5rem; }
.plan-sum { display: flex; justify-content: space-between; margin: .3rem .1rem; }
.plan-sum.dim { color: var(--muted); }
.plan-extra {
  display: flex; align-items: center; gap: .6rem; margin-top: .6rem;
  padding: .65rem .8rem; border-radius: 12px; background: var(--accent-bg); color: var(--fg);
}
.plan-extra b { margin-left: auto; font-size: 1.15rem; color: var(--money-ink); }
/* a coin: the look's money colour, its ₹, and a rim a little way in */
.plan-extra .coin {
  flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  background: var(--money); color: var(--on-money); font-size: .8rem; font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--money), inset 0 0 0 3px color-mix(in srgb, var(--on-money) 40%, transparent);
}
/* a notification carries the app's own icon */
.note-ico { flex: none; display: block; width: 1.45rem; height: 1.45rem; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.plan sup { font-size: .65em; margin-left: 1px; }
.plan-note { font-size: .8rem; color: var(--muted); margin: .6rem 0 0; }
.plan .cap { font-size: .8rem; color: var(--muted); margin: .35rem 0 0; }
.plan .cap strong { color: var(--fg); font-weight: 700; }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
/* played: each part arrives in turn */
.js .plan.play .plan-bar .g { animation: bar-cut .9s cubic-bezier(.3, .9, .3, 1) backwards; }
.js .plan.play .plan-row { animation: deal .5s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.js .plan.play .plan-row.first { animation-delay: .5s; }
.js .plan.play .plan-row.second { animation-delay: .7s; }
.js .plan.play .plan-sum, .js .plan.play hr { animation: fade .4s backwards 1.2s; }
.js .plan.play .plan-sum.dim { animation-delay: 1.6s; }
.js .plan.play .plan-extra { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) backwards 2s; }
.js .plan.play .plan-extra .coin { animation: coin-drop .5s cubic-bezier(.3, 1.6, .5, 1) backwards 2.2s; }
.js .plan.play .plan-note { animation: fade .4s backwards 2.3s; }
@keyframes bar-cut { from { flex-basis: 100%; background: var(--line); } }
@keyframes deal { from { opacity: 0; transform: translateX(-18px) rotate(-6deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.86); } }
@keyframes coin-drop { from { opacity: 0; transform: translateY(-14px) scale(.6); } }

/* ---- the wallet you pick ---- */
.wallet-play { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 52rem) { .wallet-play { grid-template-columns: 17rem 1fr; } }
.wp-controls { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); }
.seg button {
  font: inherit; font-size: .9rem; border: 0; background: none; color: var(--muted);
  padding: .35rem .85rem; border-radius: 999px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.empty-btn {
  font: inherit; font-size: .9rem; cursor: pointer; color: var(--accent);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .95rem;
}
.wp-stage {
  display: grid; place-items: center; min-height: 23rem; padding: 1rem;
  border-radius: 18px; background: radial-gradient(ellipse at 50% 40%, var(--card), var(--bg) 70%);
  border: 1px solid var(--line);
  /* the flies' layer reaches past the wallet's sides, and on a phone past the screen's edge */
  overflow: hidden; overflow: clip;
}

.wallet {
  --w: min(21rem, 86vw); --body: var(--leather); --hi: var(--leather-hi); --deep: var(--leather-deep); --thread: var(--leather-thread);
  position: relative; width: var(--w); transition: width .4s cubic-bezier(.3, .9, .3, 1);
}
.wallet.clutch { --body: var(--berry); --hi: var(--berry-hi); --deep: var(--berry-deep); --thread: var(--berry-thread); }
.wallet.holder { --body: var(--inkw); --hi: var(--inkw-hi); --deep: var(--inkw-deep); --thread: var(--inkw-thread); }
.wallet.upright { --w: min(10.5rem, 46vw); }
.w-body {
  position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(170deg, var(--hi), var(--body));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}
.wallet.holder .w-body { box-shadow: 0 16px 34px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.w-body::after {
  content: ""; position: absolute; inset: 8px; border-radius: 11px;
  border: 1.6px dashed var(--thread); opacity: .5;
}
.wallet.clutch .w-body { /* quilting */
  background:
    repeating-linear-gradient(45deg, transparent 0 21px, rgba(255, 255, 255, .07) 21px 22px),
    repeating-linear-gradient(-45deg, transparent 0 21px, rgba(0, 0, 0, .08) 21px 22px),
    linear-gradient(170deg, var(--hi), var(--body));
}
.w-cards { position: relative; padding: 1.1rem 1.1rem 0; }
.wallet.upright .w-cards { padding: 1rem .9rem 0; }
.w-cards .card-art {
  position: relative; width: 100%; border-radius: .55rem;
  margin-top: calc(var(--peek, -46%) * 1);
  cursor: pointer; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .4s, margin .4s;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 -2px 8px rgba(0, 0, 0, .25);
}
.w-cards .card-art:first-child { margin-top: 0; }
.w-cards .card-art.out { transform: translateY(-38%) rotate(-3deg); z-index: 5; }
/* a standing card peeks 13% of its length, as in the app, or four of them are a wallet taller than the screen */
.wallet.upright .w-cards .card-art { aspect-ratio: .63; --peek: -138%; }
.wallet.upright .w-cards .card-art::before { left: 34%; top: 12%; width: 32%; height: 11%; }
.w-cards .card-art.gone { opacity: 0; transform: translate(40%, -140%) rotate(24deg); pointer-events: none; }
.w-pocket {
  position: relative; margin-top: -2.3rem; height: 5.2rem; border-radius: 8px 8px 16px 16px;
  background: linear-gradient(180deg, var(--hi), var(--deep));
  box-shadow: 0 -3px 8px rgba(0, 0, 0, .22);
  display: grid; place-items: center; z-index: 6;
}
/* the sleeve's pocket covers about half a standing card, not a lip on its foot */
.wallet.upright .w-pocket { margin-top: -74%; height: auto; aspect-ratio: 1.2; }
.w-pocket::after {
  content: ""; position: absolute; inset: 8px; border-radius: 5px 5px 10px 10px;
  border: 1.6px dashed var(--thread); opacity: .5; pointer-events: none;
}
.w-empty { display: none; color: var(--thread); font-size: .9rem; padding: 0 1rem; text-align: center; }
.wallet.is-empty .w-empty { display: block; }
.wallet.is-empty .w-cards { min-height: 5.5rem; }
.wallet.is-empty.upright { --w: min(21rem, 86vw); } /* empty, it lies flat, so the words fit */
.w-closure { position: absolute; z-index: 7; pointer-events: none; }
.wallet.leather .w-closure { /* a strap with a gold snap */
  right: -6px; bottom: 1.6rem; width: 3.4rem; height: 1.7rem; border-radius: 9px 0 0 9px;
  background: linear-gradient(180deg, var(--hi), var(--deep));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.wallet.leather .w-closure::after {
  content: ""; position: absolute; left: .45rem; top: 50%; width: .85rem; height: .85rem; margin-top: -.425rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F6E2A2, var(--gold) 55%, var(--gold-deep));
}
.wallet.clutch .w-closure { /* a flap's edge and a clasp */
  left: 50%; bottom: 3.4rem; width: 1.6rem; height: 1.1rem; margin-left: -.8rem; border-radius: 4px 4px 8px 8px;
  background: linear-gradient(180deg, #F6E2A2, var(--gold) 50%, var(--gold-deep));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}
.wallet.holder .w-closure { /* a zip pull */
  right: 1.1rem; top: -4px; width: .7rem; height: 1.4rem; border-radius: 3px;
  background: linear-gradient(90deg, #C9CED8, #8D95A3);
}
.wallet.upright.leather .w-closure { bottom: 45%; }
.wallet.pocket-bump .w-pocket { animation: bump .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 40% { transform: scaleY(1.05) translateY(-2px); } }
.w-flies { position: absolute; inset: -3rem -1.5rem 0; width: calc(100% + 3rem); height: calc(100% + 3rem); pointer-events: none; overflow: visible; z-index: 8; }

/* ---- price drop ---- */
.alerts-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .alerts-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.drop {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 4.8rem 1rem .8rem; overflow: hidden;
}
.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .watch { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .7; }
.chart .watch-label { fill: var(--accent); font-size: 11px; font-family: inherit; }
.chart .line { fill: none; stroke: var(--fg); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--accent); }
.note {
  position: absolute; left: .8rem; right: .8rem; top: .8rem;
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .8rem;
  box-shadow: var(--shadow); font-size: .86rem; line-height: 1.35;
}
.note b { display: block; }
.note small { color: var(--muted); }
.js .drop .line { stroke-dasharray: 420; stroke-dashoffset: 420; }
.js .drop .dot, .js .drop .note { opacity: 0; }
.js .drop .note { transform: translateY(-120%); }
.js .drop.play .line { animation: line-draw 2.2s ease forwards; }
.js .drop.play .dot { animation: dot-in .4s cubic-bezier(.3, 1.8, .5, 1) forwards 2.1s; }
.js .drop.play .note { animation: note-in .6s cubic-bezier(.2, 1.3, .4, 1) forwards 2.3s; }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
@keyframes dot-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
.chart .dot { transform-box: fill-box; transform-origin: center; }
@keyframes note-in { to { opacity: 1; transform: none; } }

/* ---- stores on shelves ---- */
.shelves { display: grid; gap: 1.2rem 2rem; margin-bottom: 1.2rem; }
@media (min-width: 46rem) { .shelves { grid-template-columns: 1fr 1fr; } }
.shelves h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 0 .5rem; font-weight: 600; }
.shelves .chips { margin: 0; }
.chips li { transition: transform .15s, border-color .15s; }
.chips li:hover { transform: translateY(-2px); border-color: var(--accent); }

/* Reduced motion: every picture at its ending, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .js .reveal > *, .js .reveal .draw { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .js .drop .line { stroke-dashoffset: 0; }
  .js .drop .dot, .js .drop .note { opacity: 1; transform: none; }
}


/* =====================================================================
   Premium layer: the bar along the top, the theme picker, the looks'
   own touches, and the pieces that answer the pointer. Every one of them
   is decoration on top of a page that reads without it.
   ===================================================================== */

/* ---- the bar along the top: sticky, glass once the page has moved ---- */
.topbar {
  position: sticky; top: 0; z-index: 40; color: var(--on-ink);
  transition: background-color .3s, box-shadow .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s;
}
/* On the home page it lies over the hero, which runs up under it */
.topbar + header.ink { margin-top: calc(-1 * var(--bar-h)); padding-top: var(--bar-h); }
/* On the other pages the bar is the header, ink from the start */
header.topbar { background: linear-gradient(160deg, var(--ink-start), var(--ink-end)); }
.topbar.scrolled {
  background: var(--bar-glass);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: var(--bar-shadow);
}
.topbar .progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--cobalt), var(--said));
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: opacity .3s;
}
.topbar.scrolled .progress { opacity: 1; }

/* ---- the theme picker ---- */
.theme-slot { position: relative; }
.theme-btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--on-ink);
  background: var(--ink-card); border: 1px solid var(--ink-line); border-radius: 999px;
  padding: .32rem .75rem .32rem .4rem; transition: background-color .2s, border-color .2s;
}
.theme-btn:hover, .theme-btn[aria-expanded="true"] { background: var(--ink-hover); border-color: color-mix(in srgb, var(--on-ink) 28%, transparent); }
.theme-btn:focus-visible, .tp-look:focus-visible, .tp-modes button:focus-visible { outline: 2px solid var(--hero-link); outline-offset: 2px; }
.theme-dots { display: inline-flex; }
.theme-dots i {
  width: .95rem; height: .95rem; border-radius: 50%; display: block;
  box-shadow: 0 0 0 1.5px var(--ink-end), inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: background-color .3s;
}
.theme-dots i + i { margin-left: -.32rem; }
.theme-panel {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 60;
  width: min(21.5rem, calc(100vw - 32px));
  padding: 1rem; border-radius: 18px;
  background: var(--card); color: var(--fg); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform-origin: calc(100% - 2rem) 0;
}
.theme-panel.in { animation: panel-in .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.tp-h { margin: 0 0 .55rem; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tp-h small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: .35rem; }
.tp-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.tp-look {
  font: inherit; text-align: left; cursor: pointer; color: var(--fg);
  background: none; border: 1.5px solid var(--line); border-radius: 13px; padding: .4rem .4rem .5rem;
  transition: border-color .2s, transform .2s;
  /* top-aligned: a button centres what is in it, and the three names wrap to different lengths */
  display: flex; flex-direction: column; justify-content: flex-start;
}
.tp-look:hover { transform: translateY(-2px); }
.tp-look[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.tp-look b { display: block; font-size: .8rem; line-height: 1.2; margin-top: .45rem; }
.tp-look small { display: block; font-size: .68rem; line-height: 1.25; color: var(--muted); margin-top: .1rem; }
/* each swatch is a tiny screen in its own look: paper, a card in the look's colour, two lines of type */
.tp-sw {
  position: relative; display: block; height: 3.2rem; border-radius: 9px; overflow: hidden;
  background: var(--sw-paper); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .25);
}
.tp-card {
  position: absolute; left: 12%; top: 18%; width: 46%; aspect-ratio: 1.586; border-radius: 4px;
  background: var(--sw-colour); box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}
.tp-line { position: absolute; left: 12%; bottom: 20%; width: 72%; height: 3px; border-radius: 3px; background: var(--sw-ink); opacity: .55; }
.tp-line.short { bottom: 9%; width: 44%; opacity: .3; }
.tp-modes { display: flex; }
.tp-modes button { flex: 1; }

/* the new look spreads from the button pressed (theme.js), rather than the old one fading */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---- Rupee note: the guilloché of a banknote's line work, in the plate and faintly on the paper ---- */
/* headers only: behind the footer's small print the lines got in the way of reading it */
:root[data-look="note"] header.ink {
  background:
    var(--guilloche-ink, none) right -14rem top -12rem / 46rem no-repeat,
    var(--guilloche-ink, none) left -22rem bottom -26rem / 40rem no-repeat,
    linear-gradient(160deg, var(--ink-start), var(--ink-end));
}
:root[data-look="note"] body::before {
  content: ""; position: fixed; inset: auto -20rem -24rem auto; width: 52rem; height: 52rem;
  background: var(--guilloche-paper, none) center / contain no-repeat; pointer-events: none; z-index: -1;
}
:root[data-look="note"] body { position: relative; z-index: 0; }
:root[data-look="note"] header.topbar { background: linear-gradient(160deg, var(--ink-start), var(--ink-end)); }

/* ---- the hero: a slow light behind it, and a softer one that follows the pointer ---- */
/* the home page's hero only: on the other pages the header is the sticky bar, and must stay sticky and let its menu out */
header.ink:not(.topbar) { position: relative; overflow: hidden; isolation: isolate; }
.aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aurora i {
  position: absolute; width: 44rem; height: 44rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cobalt) 30%, transparent), transparent 62%);
  opacity: .55;
}
.aurora i:nth-child(1) { right: -14rem; top: -18rem; animation: drift-a 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { left: -20rem; bottom: -26rem; opacity: .35; animation: drift-b 27s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(-7rem, 5rem) scale(1.12); } }
@keyframes drift-b { to { transform: translate(8rem, -4rem) scale(.92); } }
header.ink:not(.topbar)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(28rem circle at var(--mx, 70%) var(--my, 30%), var(--ink-glare), transparent 60%);
  opacity: 0; transition: opacity .5s;
}
header.ink.lit:not(.topbar)::after { opacity: 1; }

.hero h1 { letter-spacing: -.035em; }
.hero h1 .said {
  background: linear-gradient(100deg, var(--cobalt), var(--said) 55%, var(--cobalt));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: said-shine 7s ease-in-out infinite;
}
@keyframes said-shine { 50% { background-position: 100% 0; } }

/* The primary button carries a light that passes over it */
.btn { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s, filter .2s; }
.btn-primary { box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--cobalt) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-soon span::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .5rem;
  background: var(--cobalt); vertical-align: .08em;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cobalt) 60%, transparent); animation: soon 2.2s infinite;
}
@keyframes soon { 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* The demo tips towards the pointer, with a glare where the light would catch it (fine pointers only; site.js) */
.demo { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .8, .3, 1), box-shadow .5s; }
.demo.tilting { transition: transform .08s linear, box-shadow .5s; box-shadow: var(--ink-tilt); }
.demo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(18rem circle at var(--gx, 50%) var(--gy, 0%), var(--ink-glare), transparent 55%);
  opacity: 0; transition: opacity .4s;
}
.demo.tilting::after { opacity: 1; }

/* ---- section headings get a small label above them ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .7rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 1.4rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; }

/* ---- tiles: a spotlight that follows the pointer across them ---- */
.tile, .steps li { position: relative; border-radius: 16px; overflow: hidden; isolation: isolate; }
.tile::before, .steps li::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
}
.tile:hover::before, .steps li:hover::after { opacity: 1; }
.tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tile .ico { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.tile:hover .ico { transform: rotate(-8deg) scale(1.08); }

/* ---- caps change the answer: the slider ---- */
.caps { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 52rem) { .caps { grid-template-columns: .9fr 1.1fr; gap: 3rem; } }
.caps-board {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 1.3rem 1.2rem 1.1rem; box-shadow: var(--shadow-lg);
}
.caps-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.caps-top small { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.caps-amount { font-size: clamp(1.9rem, 5vw, 2.4rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.caps-range { width: 100%; margin: .9rem 0 .6rem; accent-color: var(--accent); }
.caps-range {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), color-mix(in srgb, var(--line) 70%, transparent) var(--fill, 50%));
}
.caps-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--card); border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.caps-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.caps-range::-moz-range-thumb {
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--card); border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.caps-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.caps-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.caps-quick button {
  font: inherit; font-size: .8rem; cursor: pointer; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: .22rem .7rem;
  transition: border-color .2s, color .2s;
}
.caps-quick button:hover { color: var(--fg); border-color: var(--accent); }
.caps-quick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.caps-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.caps-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .8rem; align-items: center;
  padding: .7rem .8rem; border-radius: 14px; border: 1px solid var(--line); background: var(--bg);
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.caps-row .card-art { grid-row: span 2; width: 3.1rem; }
.caps-row .n { font-weight: 650; font-size: .93rem; line-height: 1.25; }
.caps-row .why { grid-column: 2; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.caps-row b { grid-row: span 2; font-size: 1.1rem; letter-spacing: -.02em; text-align: right; }
.caps-bar { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--line) 55%, transparent); overflow: hidden; margin-top: .35rem; }
.caps-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--muted); opacity: .45; transition: width .45s cubic-bezier(.2, .8, .3, 1); }
.caps-row.best { border-color: var(--accent); background: color-mix(in srgb, var(--accent-bg) 55%, var(--card)); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.caps-row.best .caps-bar i { background: var(--accent); opacity: 1; }
.caps-row.best b { color: var(--money-ink); }
.caps-badge {
  position: absolute; top: -.6rem; right: .8rem; font-size: .66rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-fg); border-radius: 999px; padding: .12rem .55rem; opacity: 0; transform: scale(.7);
  transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.caps-row.best .caps-badge { opacity: 1; transform: none; }
.caps-say { margin: .95rem 0 0; font-size: .92rem; min-height: 2.8em; }
.caps-say b { color: var(--accent); }
.caps .cap { font-size: .8rem; color: var(--muted); margin: .6rem 0 0; }

/* ---- questions ---- */
.faq { display: grid; gap: .6rem; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem; font-weight: 650;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; margin-left: auto; flex: none; width: .65rem; height: .65rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-25%) rotate(45deg); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.faq details[open] summary::after { transform: translateY(15%) rotate(-135deg); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
/* padding only at the sides, or the answer can't close below it (site.js animates the height) */
.faq .a { padding: 0 1.15rem; overflow: hidden; color: var(--muted); }
.faq .a > :last-child { margin-bottom: 1.1rem; }
.faq .a p { margin: 0; }
.faq .a p + p { margin-top: .6rem; }

/* Reduced motion: the looks still change, nothing drifts, tilts or shines */
@media (prefers-reduced-motion: reduce) {
  .aurora i, .hero h1 .said, .btn-soon span::before { animation: none !important; }
  .demo { transform: none !important; }
}


/* =====================================================================
   Sep 2026: the sale planner, family wallets, the store's own card and
   the rest of the toolkit, and the type set the way the promo sets it:
   heavy, tight, with the second half of a heading in the accent.
   ===================================================================== */

[hidden] { display: none !important; }

section h2 { font-size: clamp(1.6rem, 4.3vw, 2.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin-bottom: .8rem; }
section h2 em { font-style: normal; color: var(--accent); }
@media (min-width: 52rem) {
  section, section.wrap { padding-top: 5.5rem; padding-bottom: 5.5rem; }
}
@media (max-width: 48rem) { .nav .hide-mid { display: none; } }

/* Headings rise into place as their section comes up (site.js marks them); scripts off, they are simply there */
.js .rise { opacity: 0; transform: translateY(16px); transition: opacity .7s, transform .8s cubic-bezier(.2, .8, .3, 1); }
.js .rise.seen { opacity: 1; transform: none; }

/* ---- what's new, above the headline ---- */
.ink .news {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  margin: 0 0 1.3rem; padding: .3rem .85rem .3rem .3rem; border-radius: 999px;
  background: var(--ink-card); border: 1px solid var(--ink-line);
  color: var(--on-ink); text-decoration: none; font-size: .86rem; line-height: 1.3;
  transition: border-color .25s, background-color .25s;
}
.ink .news:hover { border-color: color-mix(in srgb, var(--cobalt) 70%, transparent); background: color-mix(in srgb, var(--cobalt) 14%, transparent); }
.ink .news:focus-visible { outline: 2px solid var(--hero-link); outline-offset: 2px; }
.news-tag {
  flex: none; background: var(--cobalt); color: var(--on-cobalt); font-weight: 750; font-size: .66rem;
  letter-spacing: .09em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 999px;
}
.news-text { min-width: 0; color: var(--on-ink-muted); }
.news-arrow { flex: none; color: var(--hero-link); transition: transform .25s; }
.news:hover .news-arrow { transform: translateX(3px); }

/* ---- the stores drifting past at the foot of the hero ---- */
.hero { padding-bottom: 3rem; }
@media (min-width: 52rem) { .hero { padding-bottom: 4.2rem; } }
.marquee {
  overflow: hidden; padding: 1.15rem 0 1.25rem; border-top: 1px solid var(--ink-line);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
  font-size: .95rem; font-weight: 650; letter-spacing: -.01em; color: var(--on-ink-muted); white-space: nowrap;
}
/* a margin, not a gap: the doubled list is then exactly twice one list, and -50% lands on the seam */
.marquee-track li { margin-right: 2.6rem; }
.marquee-track li.yours { color: var(--hero-link); }
.marquee.moving .marquee-track { animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- small shared pieces ---- */
.new-tag {
  display: inline-block; margin-left: .15rem; padding: .14rem .5rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg); font-size: .64rem; letter-spacing: .09em;
}
.ticks { list-style: none; margin: -1rem 0 2rem; padding: 0; display: grid; gap: .6rem; max-width: 36rem; }
.ticks li { position: relative; padding-left: 1.75rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .18rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--accent-bg);
}
.ticks li::after {
  content: ""; position: absolute; left: .4rem; top: .38rem; width: .32rem; height: .58rem;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ticks b { color: var(--fg); }

.switch {
  position: relative; flex: none; width: 2.75rem; height: 1.6rem; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--line); transition: background-color .25s;
}
.switch i {
  position: absolute; left: 3px; top: 3px; width: calc(1.6rem - 6px); height: calc(1.6rem - 6px); border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .32s cubic-bezier(.3, 1.5, .5, 1);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] i { transform: translateX(1.15rem); }
:root[data-look="mono"] .switch[aria-checked="true"] i { background: var(--bg); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A card drawn bigger: its name on the face, and a holder's name embossed under the chip (CardArt's holder) */
.big-card {
  --a: #2350D9; --b: #1B3FAF;
  position: relative; display: block; width: 12rem; aspect-ratio: 1.586; border-radius: .75rem; overflow: hidden;
  background: linear-gradient(135deg, var(--a), var(--b)); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 26px -10px rgba(0, 0, 0, .5);
}
.big-card::before {
  content: ""; position: absolute; left: 10%; top: 36%; width: 14%; height: 20%; border-radius: 3px;
  background: linear-gradient(135deg, #E9D08B, #B9954A); opacity: .92;
}
.big-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .15) 50%, transparent 62%);
}
.bc-label { position: absolute; right: 8%; top: 10%; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.bc-holder {
  position: absolute; left: 10%; top: 57%; font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .18em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .18);
}

/* ---- the offer strip (SaleStrip.kt): pinked edges, stitches, a fishtail, a starburst sticker ---- */
.strip {
  --tooth: 8px;
  position: relative; isolation: isolate; display: flex; align-items: center; gap: .8rem;
  width: 100%; min-height: 4rem; padding: .75rem 0 .75rem 1.45rem; margin: 0;
  font: inherit; text-align: left; color: var(--accent-fg); background: none; border: 0;
}
button.strip { cursor: pointer; }
button.strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.strip::before { /* the paper: cut with pinking shears top and bottom, a fishtail at its back */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 78%, var(--fg)));
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .8rem 50%);
}
.strip::after { /* the stitches */
  content: ""; position: absolute; left: 1.15rem; right: .5rem; top: 7px; bottom: 7px; z-index: -1; pointer-events: none;
  border-top: 1.5px dashed color-mix(in srgb, var(--accent-fg) 42%, transparent);
  border-bottom: 1.5px dashed color-mix(in srgb, var(--accent-fg) 42%, transparent);
}
.strip-burst { flex: none; position: relative; width: 2.55rem; height: 2.55rem; display: grid; place-items: center; rotate: -12deg; }
.strip-burst::before {
  content: ""; position: absolute; inset: 0; background: var(--card);
  clip-path: polygon(50% 0%, 58.9% 11%, 71.7% 5%, 74.9% 18.7%, 89.1% 18.8%, 86% 32.6%, 98.7% 38.9%, 90% 50%, 98.7% 61.1%, 86% 67.4%, 89.1% 81.2%, 74.9% 81.3%, 71.7% 95%, 58.9% 89%, 50% 100%, 41.1% 89%, 28.3% 95%, 25.1% 81.3%, 10.9% 81.2%, 14% 67.4%, 1.3% 61.1%, 10% 50%, 1.3% 38.9%, 14% 32.6%, 10.9% 18.8%, 25.1% 18.7%, 28.3% 5%, 41.1% 11%);
}
.strip-burst b { position: relative; color: var(--accent); font-weight: 850; font-size: 1.05rem; }
.strip-burst i {
  position: absolute; right: -.5rem; top: -.4rem; rotate: 12deg; font-style: normal; font-size: .6rem; font-weight: 800;
  background: var(--accent-fg); color: var(--accent); border-radius: 999px; padding: .08rem .32rem; line-height: 1.3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.strip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; line-height: 1.25; }
.strip-name { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; font-weight: 800; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; }
.sticker {
  display: inline-block; padding: .14rem .42rem; border-radius: 5px; rotate: -3deg;
  background: var(--accent-fg); color: var(--accent); font-size: .62rem; letter-spacing: .08em; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.strip-line { font-size: .85rem; opacity: .92; }
.strip-stub {
  flex: none; align-self: stretch; position: relative; display: grid; place-items: center; width: 2.9rem; margin: -.75rem 0;
  color: inherit; background: none; border: 0; padding: 0; font: inherit;
}
button.strip-stub { cursor: pointer; }
button.strip-stub:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: -8px; border-radius: 10px; }
.strip-stub::before { /* the perforation */
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  border-left: 2px dotted color-mix(in srgb, var(--accent-fg) 55%, transparent);
}
.strip-stub svg { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.sale.open .strip-stub svg { transform: rotate(180deg); }
/* Stickers are slapped on with a spin, one strip after another; an "On now" one beats a few times */
.js .planner .strip-burst, .js .banner-demo .strip-burst { opacity: 0; }
.js .slapped .strip-burst { animation: slap .55s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.js .slapped .sale + .sale .strip-burst { animation-delay: .25s; }
@keyframes slap { from { opacity: 0; transform: scale(1.9) rotate(-120deg); } to { opacity: 1; transform: none; } }
.slapped .sticker.live { animation: beat .9s ease-in-out 3 .7s; }
@keyframes beat { 30% { transform: scale(1.14); } 60% { transform: scale(.97); } }

/* ---- the sale planner ---- */
.sales-grid { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 52rem) { .sales-grid { grid-template-columns: .92fr 1.08fr; gap: 3.2rem; } }
.banner-demo { margin-top: .4rem; }
.banner-say { margin: 0 0 .7rem; font-size: .9rem; color: var(--muted); }
.banner-room { position: relative; }
.strip.piece { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }

.planner {
  background: var(--bg); border: 1px solid var(--line); border-radius: 22px;
  padding: 1.2rem 1.1rem 1rem; box-shadow: var(--shadow-lg);
}
.planner-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; flex-wrap: wrap; }
.planner-top > b { font-size: 1.05rem; }
.planner-order { color: var(--muted); font-size: .88rem; }
.planner-order output { color: var(--fg); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-left: .2rem; }
.planner .caps-range { margin: .75rem 0 1.15rem; }
.sale + .sale { margin-top: .75rem; }
.ticket { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .9, .3, 1); }
.sale.open .ticket { grid-template-rows: 1fr; }
.ticket-in {
  min-height: 0; overflow: hidden; margin: -8px .55rem 0; border-radius: 0 0 16px 16px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
}
.ticket-note { margin: 0; padding: 1.15rem 1rem 0; font-size: .82rem; color: var(--muted); }
.ticket-rows { list-style: none; margin: 0; padding: .6rem .7rem .8rem; display: grid; gap: .5rem; }
.ticket-rows li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .75rem; align-items: center;
  padding: .65rem .75rem; border-radius: 13px; background: var(--bg); border: 1px solid var(--line);
}
.t-store { grid-column: 1 / -1; font-size: .67rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.ticket-rows .card-art { width: 2.9rem; }
.ticket-rows .card-art.dealt { animation: deal .5s cubic-bezier(.3, 1.4, .5, 1); }
.t-card { min-width: 0; line-height: 1.3; }
.t-card b { display: block; font-size: .92rem; }
.t-card small { display: block; font-size: .78rem; color: var(--muted); }
.ticket-rows em { font-style: normal; font-weight: 800; font-size: 1.15rem; color: var(--money-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-next { grid-column: 2 / -1; font-size: .76rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: .35rem; margin-top: .25rem; }
.planner .cap { font-size: .78rem; color: var(--muted); margin: .9rem 0 0; }

/* ---- family wallets ---- */
.family-grid { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 52rem) { .family-grid { grid-template-columns: .92fr 1.08fr; gap: 3.2rem; } }
.fam {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 1rem 1.1rem 1rem; box-shadow: var(--shadow-lg);
}
.fam-tabs { display: flex; gap: .25rem; padding: 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.fam-tabs button {
  flex: 1; font: inherit; font-size: .9rem; font-weight: 650; padding: .45rem .5rem; border: 0; border-radius: 10px;
  background: none; color: var(--muted); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s;
}
.fam-tabs button[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.fam-tabs button.off { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .65; }
.fam-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fam-panel { padding: 1.1rem 0 .3rem; }
.fam-hand { position: relative; height: 10.6rem; max-width: 21rem; margin: 0 auto; }
.fam-hand .big-card {
  position: absolute; left: 50%; bottom: 2.3rem; margin-left: -6rem;
  transform: translateX(var(--x, 0)) rotate(var(--r, 0deg)); transform-origin: 50% 130%;
}
/* Without scripts the two cards simply sit fanned */
.fam-hand .big-card:first-child { --x: -26%; --r: -7deg; }
.fam-hand .big-card:nth-child(2) { --x: 26%; --r: 7deg; }
.fam-pocket {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4.4rem; z-index: 3; display: grid; place-items: center;
  border-radius: 10px 10px 18px 18px; background: linear-gradient(180deg, var(--leather-hi), var(--leather-deep));
  box-shadow: 0 -3px 8px rgba(0, 0, 0, .22), 0 14px 26px -12px rgba(0, 0, 0, .45);
}
.fam-pocket::after { content: ""; position: absolute; inset: 7px; border-radius: 5px 5px 12px 12px; border: 1.6px dashed var(--leather-thread); opacity: .5; }
/* A shared wallet's name pressed into its pocket in gold foil (WalletStamp) */
.fam-stamp {
  position: relative; z-index: 1; font-weight: 800; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  background: linear-gradient(180deg, #F6E2A2, var(--gold) 50%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4));
}
.fam-use { display: flex; justify-content: center; align-items: center; min-height: 2.4rem; margin-top: .5rem; }
.fam-own { margin: 0; font-size: .9rem; color: var(--muted); }
.fam-switch { display: flex; align-items: center; gap: .65rem; font-size: .92rem; font-weight: 600; }
.fam-check { margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.fam-order { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; font-size: .9rem; color: var(--muted); margin-bottom: .8rem; }
.fam-order .seg button { font-size: .82rem; padding: .28rem .72rem; }
.fam-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.fam-rank li {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 13px;
  border: 1px solid var(--line); background: var(--bg); transition: border-color .3s, background-color .3s;
}
.fam-rank li.best { border-color: var(--accent); background: color-mix(in srgb, var(--accent-bg) 55%, var(--card)); }
.fam-rank .card-art { width: 2.9rem; }
.fr-name { flex: 1; min-width: 0; line-height: 1.3; }
.fr-name b { display: block; font-size: .92rem; }
.fr-name small { display: block; font-size: .76rem; color: var(--muted); }
.fam-rank em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fam-rank li.best em { color: var(--money-ink); }
.fam-rank li.maybe em::after { content: "*"; }
.whose { color: var(--accent); }
.fam-say { margin: .85rem 0 0; font-size: .92rem; min-height: 1.5em; }
.fam-say b { color: var(--accent); }
.fam .cap { font-size: .78rem; color: var(--muted); margin: .7rem 0 0; }

/* ---- the wallet: how the cards lie, and the shuffle ---- */
.wp-controls { gap: .4rem; }
.wp-label { font-size: .7rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-top: .45rem; }
.wp-label:first-child { margin-top: 0; }
.wp-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.empty-btn { display: inline-flex; align-items: center; gap: .45rem; background: var(--card); transition: border-color .2s, transform .2s; }
.empty-btn:hover { border-color: var(--accent); }
.empty-btn:active { transform: scale(.96); }
.w-cards .card-art { rotate: 0deg; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), rotate .45s cubic-bezier(.3, 1.2, .5, 1), opacity .4s, margin .4s; }
/* Fan: each card leans a little further round than the one under it, about its foot, ±5.5° as in the app */
.wallet.fan .w-cards { padding-left: 1.7rem; padding-right: 1.7rem; }
.wallet.fan .w-cards .card-art { rotate: var(--lean, 0deg); transform-origin: 50% 100%; }
/* Tidy: a shallower strip of each, all square, so more of them fit */
.wallet.tidy .w-cards .card-art { --peek: -53%; }
.wallet.upright.tidy .w-cards .card-art { --peek: -147%; }

/* ---- the rest of the toolkit ---- */
.bento { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .span3 { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .bento { grid-template-columns: repeat(6, 1fr); } .bento .span3 { grid-column: span 3; } .bento .span2 { grid-column: span 2; } }
.bento .tile { display: flex; flex-direction: column; background: var(--bg); padding: 1.4rem 1.3rem 1.3rem; }
.bento .tile h3 { font-size: 1.06rem; letter-spacing: -.015em; }
.bento .tile > p { font-size: .93rem; }
.mini { margin-top: auto; padding-top: 1.15rem; font-size: .85rem; }
.badge {
  font-size: .66rem; font-weight: 750; letter-spacing: .03em; padding: .14rem .45rem; border-radius: 6px; white-space: nowrap;
  background: var(--accent-bg); color: var(--fg);
}

/* search by name */
.ms { display: grid; gap: .6rem; }
.ms-box {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .92rem;
}
.ms-words { color: var(--fg); min-height: 1.4em; }
.ms-words.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: caret .7s steps(1) infinite; }
.ms-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer;
  padding: .24rem .32rem .24rem .72rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  transition: background-color .25s, color .25s, border-color .25s, transform .15s;
}
.pill:active { transform: scale(.95); }
.pill[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.pill.site { border-style: dashed; }
.pill.site[aria-pressed="true"] { border-style: solid; }
.pill:focus-visible, .chip-toggle:focus-visible, .tag-btn:focus-visible, .chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* × while it is in, + once it is out: the same two strokes turned */
.pill i { position: relative; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: color-mix(in srgb, currentColor 16%, transparent); }
.pill i::before, .pill i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .5rem; height: 1.6px; margin: -.8px 0 0 -.25rem;
  background: currentColor; border-radius: 2px; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.pill i::before { transform: rotate(45deg); }
.pill i::after { transform: rotate(-45deg); }
.pill[aria-pressed="false"] i::before { transform: rotate(0deg); }
.pill[aria-pressed="false"] i::after { transform: rotate(90deg); }
.ms-results, .mc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ms-results li, .mc-rows li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center;
  padding: .45rem .65rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
}
.ms-results li.enter, .mc-rows li.enter { animation: row-in .4s cubic-bezier(.2, .9, .3, 1) backwards; }
.ms-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ms-results b, .mc-rows b { font-variant-numeric: tabular-nums; }
.ms-results li.cheapest { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ms-results li.cheapest b { color: var(--accent); }
.ms-empty { margin: 0; color: var(--muted); font-size: .84rem; }

/* same size */
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem .8rem; flex-wrap: wrap; font-weight: 650; margin-bottom: .6rem; }
.chip-toggle {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer;
  padding: .26rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  transition: background-color .25s, color .25s, border-color .25s;
}
.chip-toggle::before { content: ""; width: .3rem; height: .55rem; margin: -.15rem .05rem 0 0; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.chip-toggle[aria-pressed="true"] { background: var(--accent-bg); color: var(--fg); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.chip-toggle[aria-pressed="true"]::before { transform: rotate(45deg) scale(1); }
.mc-what { min-width: 0; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.mc-what em { font-style: normal; color: var(--accent); font-weight: 650; }
.mc-rows li.here { background: transparent; }
.mc-rows li.win { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.mc-rows li.win b { color: var(--accent); }
.mc-rows li.other { border-style: dashed; }

/* share a deal */
.sh { display: grid; gap: .45rem; justify-items: start; }
.sh-msg { padding: .5rem .75rem; border-radius: 14px 14px 14px 4px; background: var(--accent-bg); font-size: .82rem; font-weight: 600; }
.sh-link {
  display: flex; gap: .65rem; align-items: center; width: 100%; padding: .6rem .7rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card); font-size: .8rem; line-height: 1.3;
}
.sh-link b { display: block; }
.sh-link small { display: block; color: var(--muted); }
.sh-mark { flex: none; display: block; width: 1.9rem; height: 1.9rem; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.sh-cta { font-size: .78rem; font-weight: 700; color: var(--accent-fg); background: var(--accent); padding: .38rem .85rem; border-radius: 999px; }
.js .bento .sh > * { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.js .bento.seen .sh > * { opacity: 1; transform: none; }
.js .bento.seen .sh > :nth-child(1) { transition-delay: .6s; }
.js .bento.seen .sh > :nth-child(2) { transition-delay: 1s; }
.js .bento.seen .sh > :nth-child(3) { transition-delay: 1.4s; }

/* buy */
.mb { display: grid; gap: .45rem; }
.mb-btn {
  text-align: center; padding: .62rem; border-radius: 12px; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: .9rem;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 85%, transparent);
}
/* the best-card bar that stays in view in the Shop tab, down to checkout */
.mb-bar {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 12px; font-size: .82rem; font-weight: 650; line-height: 1.25;
  background: linear-gradient(160deg, var(--deep-start), var(--deep-end)); color: var(--on-deep);
}
.mb-bar .card-art { width: 2.1rem; }
.mb-bar small { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-deep-muted); }
.mb-bar b { margin-left: auto; color: var(--deep-money); white-space: nowrap; }
.mb-quiet { text-align: center; padding: .5rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--accent); font-weight: 650; font-size: .84rem; }

/* tags, each with its one small act (TagGlyph) */
.tg { display: flex; gap: .45rem; }
.tag-btn {
  flex: 1; max-width: 3.3rem; aspect-ratio: 1; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted);
  transition: color .25s, border-color .25s, background-color .25s;
}
.tag-btn svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tag-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.tag-btn .t-fill { transition: fill-opacity .3s; fill: currentColor; fill-opacity: 0; }
.tag-btn[aria-pressed="true"] .t-fill { fill-opacity: .3; }
.tag-btn .t-day { fill: currentColor; stroke: none; opacity: 0; }
.tag-btn[aria-pressed="true"] .t-day { opacity: 1; }
.t-lid, .t-day { transform-box: fill-box; transform-origin: 50% 100%; }
.tag-btn svg { transform-origin: 50% 60%; }
.tag-btn.act[data-tag="wish"] svg { animation: tg-beat .7s ease-in-out; }
.tag-btn.act[data-tag="day"] .t-day { animation: tg-land .55s cubic-bezier(.3, 1.6, .5, 1); }
.tag-btn.act[data-tag="day"] svg { animation: tg-page .45s ease-out; }
.tag-btn.act[data-tag="impulse"] svg { animation: tg-shudder .5s linear; }
.tag-btn.act[data-tag="gift"] .t-lid { animation: tg-lid .6s cubic-bezier(.3, 1.6, .5, 1); }
.tag-btn.act[data-tag="bought"] svg { animation: tg-drop .5s cubic-bezier(.3, 1.5, .5, 1); }
.tag-btn .t-tick { stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset .35s .25s; }
.tag-btn[aria-pressed="true"] .t-tick { stroke-dashoffset: 0; }
@keyframes tg-beat { 18% { transform: scale(1.28); } 36% { transform: scale(.94); } 54% { transform: scale(1.16); } 72% { transform: none; } }
@keyframes tg-land { from { transform: translateY(-7px); opacity: 0; } }
@keyframes tg-page { 40% { transform: rotateX(35deg); } }
@keyframes tg-shudder { 10%, 50%, 90% { transform: translateX(-1.5px) rotate(-4deg); } 30%, 70% { transform: translateX(1.5px) rotate(4deg); } }
@keyframes tg-lid { 40% { transform: translateY(-5px) rotate(-10deg); } }
@keyframes tg-drop { from { transform: translateY(-9px); opacity: .3; } }
.tg-say { margin: .7rem 0 0; font-size: .84rem; color: var(--muted); min-height: 1.4em; }
.tg-say b { color: var(--fg); }

.pin-line { margin: auto 0 0; padding-top: 1rem; font-size: .88rem; color: var(--muted); }
.pin-line s { text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.pin-line b { color: var(--accent); letter-spacing: .02em; }
.t-pin > p:not(.pin-line) { margin-bottom: 0; }
.t-behind > p:not(.pin-line) { margin-bottom: 0; }
.behind-web { margin-top: 1.3rem; }
.sound-row { margin-top: auto; padding-top: 1rem; display: flex; gap: .65rem; align-items: center; font-size: .9rem; font-weight: 650; }
.t-sound.on .ico .wave { animation: wave 1.1s ease-in-out infinite; }
@keyframes wave { 50% { opacity: .25; } }

/* ---- price alerts: the notification's own Buy button ---- */
.drop { padding-top: 6.3rem; }
.note-act { display: inline-block; margin-top: .45rem; padding: .2rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--accent); background: var(--accent-bg); }
.alerts-grid .ticks { margin: -1rem 0 0; }

/* ---- figures, four across ---- */
@media (min-width: 34rem) { .figures { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }
.figures span { display: block; max-width: 13rem; margin: .2rem auto 0; line-height: 1.4; }

/* ---- the store's own card ---- */
.stores-grid { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 52rem) {
  .stores-grid { grid-template-columns: 1.05fr .95fr; gap: 2.6rem; }
  .stores-grid .shelves { grid-template-columns: 1fr; }
}
.chips li:has(> button) { padding: 0; border: 0; background: none; }
.chips button {
  display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .9rem; color: var(--fg); cursor: pointer;
  padding: .32rem .85rem .32rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  transition: border-color .2s, background-color .2s, transform .15s;
}
.chips button:hover { border-color: var(--accent); }
.chips button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-bg); }
/* the badge on a tile that has a card of its own: a dealt card; they glow one at a time, down the page (BadgeBeacon) */
.chips button::before {
  content: ""; flex: none; width: 1.2rem; height: .78rem; border-radius: 3px; rotate: -10deg;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--fg)));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
}
.js .beacons .chips button::before { animation: beacon var(--round, 14s) ease-out infinite; animation-delay: calc(var(--k, 0) * 1.1s + 1s); }
@keyframes beacon {
  0% { transform: none; }
  3% { transform: scale(1.3) rotate(12deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
  7%, 100% { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 9px transparent; }
}
.shop-sheet {
  background: var(--bg); border: 1px solid var(--line); border-radius: 22px;
  padding: 1.2rem 1.1rem 1.05rem; box-shadow: var(--shadow-lg);
}
@media (min-width: 52rem) { .shop-sheet { position: sticky; top: calc(var(--bar-h) + 1.2rem); } }
.ss-kicker { margin: 0 0 .85rem; color: var(--muted); font-size: .88rem; }
.ss-kicker b { display: block; color: var(--fg); font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.ss-hero {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 1.05rem; overflow: hidden;
  padding: 1.35rem 1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--accent-bg) 50%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
}
.ss-hero::before { /* the halo behind the card */
  content: ""; position: absolute; left: -2.5rem; top: 50%; width: 13rem; height: 13rem; margin-top: -6.5rem; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%);
}
.ss-hero .big-card { flex: none; width: 7rem; border-radius: .5rem; }
.ss-hero .big-card.dealt { animation: deal .6s cubic-bezier(.3, 1.4, .5, 1); }
.ss-hero-text { min-width: 0; line-height: 1.3; }
.ss-hero-text small { display: block; font-size: .66rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ss-hero-text b { display: block; font-size: 1.02rem; margin: .12rem 0 .18rem; }
.ss-hero-text span { display: block; font-size: .82rem; color: var(--muted); }
/* nine stars come up round the card one after another and hold (BestStars), each on its own ray, clear of the card */
.ss-stars i {
  position: absolute; width: .62rem; height: .62rem; margin: -.31rem 0 0 -.31rem; background: var(--accent); opacity: .85;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.ss-stars i:nth-child(1) { left: 1.4rem; top: .6rem; }
.ss-stars i:nth-child(2) { left: 4.5rem; top: .45rem; width: .8rem; height: .8rem; }
.ss-stars i:nth-child(3) { left: 7.6rem; top: .7rem; }
.ss-stars i:nth-child(4) { left: 8.55rem; top: 2.6rem; width: .5rem; height: .5rem; }
.ss-stars i:nth-child(5) { left: 8.5rem; top: 5.3rem; }
.ss-stars i:nth-child(6) { left: 6.2rem; top: calc(100% - .55rem); width: .78rem; height: .78rem; }
.ss-stars i:nth-child(7) { left: 2.9rem; top: calc(100% - .5rem); }
.ss-stars i:nth-child(8) { left: .45rem; top: 4.8rem; width: .5rem; height: .5rem; }
.ss-stars i:nth-child(9) { left: .5rem; top: 2.2rem; }
.js .ss-stars i { opacity: 0; transform: scale(0); }
.js .ss-hero.lit .ss-stars i { animation: star-in .55s cubic-bezier(.3, 1.7, .5, 1) forwards; }
.ss-hero.lit .ss-stars i:nth-child(2) { animation-delay: .09s; } .ss-hero.lit .ss-stars i:nth-child(3) { animation-delay: .18s; }
.ss-hero.lit .ss-stars i:nth-child(4) { animation-delay: .27s; } .ss-hero.lit .ss-stars i:nth-child(5) { animation-delay: .36s; }
.ss-hero.lit .ss-stars i:nth-child(6) { animation-delay: .45s; } .ss-hero.lit .ss-stars i:nth-child(7) { animation-delay: .54s; }
.ss-hero.lit .ss-stars i:nth-child(8) { animation-delay: .63s; } .ss-hero.lit .ss-stars i:nth-child(9) { animation-delay: .72s; }
@keyframes star-in { 0% { opacity: 0; transform: scale(0) rotate(-90deg); } 60% { opacity: 1; transform: scale(1.5) rotate(10deg); } 100% { opacity: .85; transform: none; } }
.ss-rest { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.ss-rest li { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); line-height: 1.3; }
.ss-rest li.enter { animation: row-in .4s cubic-bezier(.2, .9, .3, 1) backwards; }
.ss-rest b { display: block; font-size: .9rem; }
.ss-rest small { display: block; font-size: .78rem; color: var(--muted); }
.ss-rest .own { font-size: .64rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ss-note { margin: .8rem 0 0; font-size: .78rem; color: var(--muted); }

/* ---- privacy: what sharing sends ---- */
.priv-share {
  margin: 1.8rem 0 0; padding: 1rem 1.15rem; border-radius: 14px; font-size: .95rem; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.priv-share b { color: var(--fg); }

.js .bento.reveal.seen > :nth-child(7) { transition-delay: .48s; }
.js .bento.reveal.seen > :nth-child(8) { transition-delay: .56s; }
.js .bento.reveal.seen > :nth-child(9) { transition-delay: .64s; }
.js .bento.reveal.seen > :nth-child(10) { transition-delay: .72s; }
.js .bento.reveal.seen > :nth-child(11) { transition-delay: .8s; }

@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1 !important; transform: none !important; }
  .js .planner .strip-burst, .js .banner-demo .strip-burst, .js .bento .sh > *, .js .ss-stars i { opacity: 1 !important; transform: none !important; }
  .marquee-track { flex-wrap: wrap; width: auto; row-gap: .5rem; }
}

/* ---- two of the icon's glints beside the headline (27 Sep 2026, with the white icon) ----
   They pop in the way the icon's own do, then catch the light now and then. Scripts off or motion reduced, they are simply there.
   They sit outside .said: its text-clipped background hides anything drawn inside it. .tail keeps them on the phrase's line. */
.hero h1 .tail { white-space: nowrap; }
.glints { display: inline-block; width: .5em; height: .65em; margin-left: .04em; vertical-align: .42em; overflow: visible; }
.glints path {
  fill: var(--glint); transform-box: fill-box; transform-origin: center;
  animation: m-spark .45s cubic-bezier(.3, 1.7, .5, 1) .8s both, glint 6s ease-in-out 2.4s infinite;
}
.glints path + path { animation-delay: .95s, 3.9s; }
@keyframes glint { 0%, 90%, 100% { transform: none; } 95% { transform: scale(1.4) rotate(45deg); } }

/* ---- buy now, or wait (BuyOrWait.kt): the product as the Check tab shows it, six days before a sale and on sale day ---- */
.wait-grid { display: grid; gap: 2.2rem; align-items: start; }
@media (min-width: 52rem) { .wait-grid { grid-template-columns: .92fr 1.08fr; gap: 3.2rem; } }
.wait-demo {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 1rem 1.1rem 1rem; box-shadow: var(--shadow-lg);
}
.wait-tabs { display: flex; gap: .25rem; padding: 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.wait-tabs button {
  flex: 1; font: inherit; font-size: .9rem; font-weight: 650; padding: .45rem .5rem; border: 0; border-radius: 10px;
  background: none; color: var(--muted); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s;
}
.wait-tabs button[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.wait-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wait-card { padding: 1.1rem 0 .2rem; }
.wait-card > * + * { margin-top: .8rem; }
.wc-store { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .95rem; }
.wc-price { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: center; }
.wc-price > b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wc-trail { grid-column: 1; min-height: 1.3em; font-size: .86rem; font-weight: 600; color: var(--money-ink); transition: color .3s; }
.wc-trail b { font-variant-numeric: tabular-nums; }
.wc-trail.warn { color: var(--warn); }
/* the sparkline (PriceTrailLine.kt): the trail so far, a point for today, and on sale day the day before the sale marked */
.spark { grid-column: 2; grid-row: 1 / 3; width: 7.75rem; height: 2.25rem; overflow: visible; }
.spark-line { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-more { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .5s ease .15s; }
.during .spark-more { stroke-dashoffset: 0; }
.spark-dot { fill: var(--accent); transition: transform .55s cubic-bezier(.3, 1.2, .5, 1) .15s; }
.during .spark-dot { transform: translate(21px, -12px); }
.spark-mark { fill: none; stroke: var(--warn); stroke-width: 1.8; opacity: 0; transition: opacity .3s .55s; }
.during .spark-mark { opacity: 1; }
.wc-offer { font-size: .82rem; color: var(--muted); }
.wc-best {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 14px;
  background: color-mix(in srgb, var(--accent-bg) 50%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
}
.wc-best .card-art { width: 2.9rem; }
.wc-best .card-art.dealt { animation: deal .5s cubic-bezier(.3, 1.4, .5, 1); }
.wc-best-text { flex: 1; min-width: 0; line-height: 1.3; }
.wc-best-text small { display: block; font-size: .64rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.wc-best-text b { display: block; font-size: .95rem; margin-top: .1rem; }
.wc-best-text span { display: block; font-size: .78rem; color: var(--muted); }
.wc-best em { font-style: normal; font-weight: 800; font-size: 1.2rem; color: var(--money-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the note's room closes on sale day (there is no sale to wait for), so Buy comes up to the card */
.wc-room { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.2, .9, .3, 1), margin-top .45s cubic-bezier(.2, .9, .3, 1); }
.wc-room-in { min-height: 0; overflow: hidden; }
.during .wc-room { grid-template-rows: 0fr; margin-top: 0; }
.wc-note {
  display: flex; gap: .7rem; padding: .85rem .9rem; border-radius: 14px;
  background: var(--accent-bg); color: var(--fg); font-size: .86rem; line-height: 1.4;
}
.wc-note > svg { flex: none; margin-top: .1rem; color: var(--accent); }
.wc-note b { display: block; margin-bottom: .2rem; }
.wc-note p { margin: 0; }
.wc-acts { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .55rem; font-weight: 700; font-size: .84rem; color: var(--accent); }
.wait-card .mb-btn { display: block; }
.wait-demo .cap { font-size: .78rem; color: var(--muted); margin: .9rem 0 0; }

/* ---- the page's coupon, typed into the bag (CouponStrip in ShopScreen.kt, recipes/coupon.js) ---- */
.cp { display: grid; gap: .55rem; }
.cp-strip {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .4rem .55rem .75rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
}
.cp-what { flex: 1; min-width: 0; line-height: 1.3; }
.cp-what b { display: block; font-size: .9rem; letter-spacing: .04em; }
.cp-what small { display: block; font-size: .74rem; color: var(--muted); }
.cp-apply {
  flex: none; font: inherit; font-size: .82rem; font-weight: 700; padding: .4rem .85rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent-bg); color: var(--fg); transition: transform .15s, background-color .2s;
}
.cp-apply:hover { background: color-mix(in srgb, var(--accent) 30%, var(--accent-bg)); }
.cp-apply:active { transform: scale(.95); }
/* the store's own coupon box, drawn as a store draws one */
.cp-box { display: flex; gap: .4rem; align-items: stretch; }
.cp-field {
  flex: 1; min-width: 0; display: flex; align-items: center; padding: .45rem .65rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); font-size: .84rem; letter-spacing: .05em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cp-field i { font-style: normal; color: var(--muted); letter-spacing: 0; font-family: inherit; }
.cp-field.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: caret .7s steps(1) infinite; }
.cp-go { flex: none; display: grid; place-items: center; padding: 0 .8rem; border-radius: 8px; border: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--muted); transition: transform .15s, color .2s, border-color .2s; }
.cp-go.pressed { transform: scale(.94); color: var(--accent); border-color: var(--accent); }
.cp-say { margin: 0; min-height: 1.4em; font-size: .82rem; color: var(--muted); }
.cp-say b { color: var(--fg); }

/* ---- what your cards saved (ProductHistory.saved) ---- */
.sv-line { margin: auto 0 0; padding-top: 1rem; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.sv-line span { color: var(--fg); font-weight: 650; }
.sv-line b { color: var(--money-ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-saved > p:not(.sv-line) { margin-bottom: 0; }

/* ---- the right shops for the product (ProductKinds, StoreSearch.storesFor) ---- */
.rk { display: grid; gap: .6rem; }
.rk-picks { display: flex; flex-wrap: wrap; gap: .35rem; }
.rk-picks button {
  font: inherit; font-size: .8rem; font-weight: 650; padding: .3rem .75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); transition: border-color .2s, background-color .2s, color .2s;
}
.rk-picks button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-bg); color: var(--fg); }
.rk-shops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.rk-shops li { padding: .22rem .6rem; border-radius: 8px; background: var(--accent-bg); color: var(--fg); font-size: .76rem; font-weight: 700; letter-spacing: .02em; }
.rk-shops li.enter { animation: row-in .4s cubic-bezier(.2, .9, .3, 1) backwards; }


/* =====================================================================
   Oct 2026: the bar follows the reading, a Menu on a phone, and the video.
   ===================================================================== */

/* ---- the bar's links: one pill, under the section being read or the link the pointer is on (site.js) ---- */
.nav { position: relative; }   /* the Menu's panel hangs from the bar's right edge */
.nav-links { position: relative; display: flex; align-items: center; gap: .05rem; font-size: .92rem; }
.nav-links a { position: relative; z-index: 1; padding: .42rem .6rem; border-radius: 999px; white-space: nowrap; transition: color .25s; }
.nav-links a[aria-current] { color: var(--on-ink); }
.nav-pill {
  position: absolute; z-index: 0; left: 0; top: 50%; width: 0; height: 2.1rem; margin-top: -1.05rem;
  border-radius: 999px; background: var(--ink-hover); box-shadow: inset 0 0 0 1px var(--ink-line);
  opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.3, 1.35, .5, 1), width .5s cubic-bezier(.3, 1.35, .5, 1), opacity .25s;
}
.nav-pill.on { opacity: 1; }
/* the first time it shows it appears where it is, rather than sliding in from the left */
.nav-pill.cut { transition: opacity .25s; }
/* what is new gets a dot, which rings three times and then rests */
.nav-dot { position: absolute; top: .32rem; right: .22rem; width: .36rem; height: .36rem; border-radius: 50%; background: var(--cobalt); }
.nav-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: nav-dot 2.4s ease-out 1s 3; }
@keyframes nav-dot { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---- the Menu: the same links, each with a line, when the bar is too narrow for them ---- */
.menu-slot { display: none; }
@media (max-width: 62rem) {
  .js .nav-links { display: none; }
  .js .menu-slot { display: block; }
}
.menu-btn { padding-left: .7rem; }
/* one height for both, whether or not their words show */
.menu-btn, .theme-btn { min-height: 2.25rem; }
.burger { position: relative; display: inline-block; width: 1rem; height: .75rem; }
.burger i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), opacity .2s;
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: calc(50% - 1px); }
.burger i:nth-child(3) { bottom: 0; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(calc(.375rem - 1px)) rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(calc(-.375rem + 1px)) rotate(-45deg); }
/* on a phone the three lines say Menu by themselves, and the bar has no room for the word beside Theme */
@media (max-width: 30rem) { .menu-label { display: none; } .menu-btn { padding-right: .7rem; } }
.menu-panel { right: 16px; padding: .45rem; transform-origin: calc(100% - 5rem) 0; }
.mp-item {
  position: relative; display: grid; gap: .08rem; padding: .55rem .8rem .6rem; border-radius: 12px;
  color: var(--fg); text-decoration: none; animation: mp-in .4s cubic-bezier(.2, .9, .3, 1.15) backwards;
  transition: background-color .2s;
}
.mp-item b { font-size: .95rem; font-weight: 650; }
.mp-item small { font-size: .78rem; line-height: 1.35; color: var(--muted); }
.mp-item:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mp-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mp-item[aria-current] { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.mp-item[aria-current]::before {
  content: ""; position: absolute; left: .3rem; top: .7rem; bottom: .7rem; width: 3px; border-radius: 3px; background: var(--accent);
}
.mp-get { display: flex; justify-content: center; margin: .45rem .2rem .2rem; animation: mp-in .4s cubic-bezier(.2, .9, .3, 1.15) .26s backwards; }
@keyframes mp-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---- the video: our own poster until play is pressed, tipped towards the pointer ---- */
.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: #2C55D6;   /* the poster's own blue, so the frame is never a hole while it loads */
  box-shadow: var(--shadow-lg);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), box-shadow .5s;
}
.video.tilting { transition: transform .08s linear, box-shadow .5s; box-shadow: var(--ink-tilt); }
.video-face { position: absolute; inset: 0; display: block; color: #FFFFFF; text-decoration: none; cursor: pointer; }
.video-face:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -6px; border-radius: 20px; }
.video-face img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .3, 1), filter .5s; }
.video-face:hover img { transform: scale(1.025); }
.video-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .2), transparent 45%);
}
.video.tilting .video-glare { opacity: 1; }
.video-play {
  position: absolute; z-index: 3; right: 1.6rem; bottom: 1.6rem;
  display: flex; align-items: center; gap: .75rem; padding: .45rem 1.25rem .45rem .45rem; border-radius: 999px;
  background: rgba(255, 255, 255, .96); color: #121A3A;
  box-shadow: 0 14px 32px -10px rgba(8, 16, 60, .55);
  transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--ps, 1)); transform-origin: 100% 100%;
  transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), opacity .3s;
}
.vp-icon { position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: #2350D9; color: #FFFFFF; }
.vp-icon svg { position: relative; width: 1.35rem; height: 1.35rem; margin-left: .15rem; fill: currentColor; }
/* two rings go out from it, one after the other */
.vp-icon::before, .vp-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(35, 80, 217, .55);
  animation: vp-ring 2.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
.vp-icon::after { animation-delay: 1.4s; }
@keyframes vp-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.vp-say { display: grid; gap: .1rem; font-size: 1.02rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.15; }
.vp-say small { font-size: .76rem; font-weight: 600; letter-spacing: 0; color: #4A5578; }
.video-face:hover .video-play { --ps: 1.05; }
.video-face:active .video-play { --ps: .95; }
/* playing: the poster blurs back while YouTube's player fades in over it */
.video iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .5s .1s; }
.video.loaded iframe { opacity: 1; }
.video.playing .video-face { pointer-events: none; }
.video.playing .video-face img { transform: scale(1.08); filter: blur(5px) brightness(.85); }
.video.playing .video-play { --ps: .5; opacity: 0; }
.video.playing .vp-icon::before, .video.playing .vp-icon::after { animation: none; }
@media (max-width: 36rem) {
  .video, .video-face:focus-visible { border-radius: 14px; }
  .video-play { right: .6rem; bottom: .6rem; gap: .5rem; padding: .3rem .85rem .3rem .3rem; }
  .vp-icon { width: 2.3rem; height: 2.3rem; }
  .vp-icon svg { width: 1rem; height: 1rem; }
  .vp-say { font-size: .86rem; }
  .vp-say small { display: none; }   /* on a phone's narrower poster the second line ran into its words */
}

@media (prefers-reduced-motion: reduce) {
  .nav-dot::after, .vp-icon::before, .vp-icon::after, .mp-item, .mp-get { animation: none; }
  .nav-pill, .burger i, .video, .video-face img, .video-play { transition: none; }
}


/* =====================================================================
   Oct 2026: "Which card?" (which-card.html, assets/which-card.js). The visitor's cards for one shop, by rate or in
   rupees, for an iPhone or a laptop. Ordinary page colours (the band is only the bar and the footer), the look's one
   accent where the answer is, and the cards in their own colours, as the app draws them.
   ===================================================================== */

.wh { padding-bottom: 4.5rem; }
.wh-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.wh-head { padding: 2.4rem 0 1.6rem; max-width: 40rem; }
.wh-kicker { margin: 0 0 .5rem; font-size: .8rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.wh-head h1 { font-size: clamp(1.75rem, 5.4vw, 2.5rem); margin: 0 0 .7rem; }
.wh-lede { margin: 0; color: var(--muted); font-size: clamp(1rem, 2.3vw, 1.1rem); }

/* On a phone: where, then the answer, then the cards. On a laptop the answer stays in view beside both. */
.wh-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ask" "answer" "wallet" "sales" "vasool" "collection" "lounges"; }
.wh-ask { grid-area: ask; }
.wh-answer { grid-area: answer; }
.wh-wallet { grid-area: wallet; }
.wh-sales { grid-area: sales; }
.wh-vasool { grid-area: vasool; }
.wh-collection { grid-area: collection; }
.wh-lounges { grid-area: lounges; }
.wh-panel[hidden] { display: none; }
@media (min-width: 54rem) {
  .wh-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; gap: 1.25rem;
    grid-template-areas: "ask answer" "wallet answer" "sales answer" "vasool answer" "collection answer" "lounges answer";
  }
  .wh-answer {
    position: sticky; top: calc(var(--bar-h) + 1rem); max-height: calc(100vh - var(--bar-h) - 2rem); overflow: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
  }
}

.wh-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.15rem 1.1rem 1.25rem;
  box-shadow: var(--shadow); min-width: 0;
}
@media (min-width: 40rem) { .wh-panel { padding: 1.4rem 1.4rem 1.5rem; } }
.wh-h { display: flex; align-items: center; gap: .6rem; font-size: 1.12rem; margin: 0 0 .9rem; }
.wh-n {
  display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg); font-size: .85rem; font-weight: 700;
}
.wh-label { display: block; margin: 1rem 0 .45rem; font-size: .84rem; font-weight: 650; color: var(--fg); }
.wh-ask > label.wh-label:first-of-type { margin-top: 0; }
.wh-label small { font-weight: 400; color: var(--muted); margin-left: .25rem; }
.wh-quiet, .wh-note, .wh-hint, .wh-left { color: var(--muted); font-size: .9rem; margin: 0; }
.wh-note { margin: -.35rem 0 .9rem; }
.wh-hint { margin-top: .9rem; }
.wh-left { margin-top: .6rem; }

/* fields: 16px and up, or an iPhone zooms the page in on a tap */
.wh-input {
  display: block; width: 100%; min-width: 0; font: inherit; font-size: 1rem; line-height: 1.4; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .85rem;
  -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s;
}
.wh-input::placeholder { color: var(--muted); opacity: .75; }
.wh-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.wh-linkbox { position: relative; }
.wh-linkbox .wh-input { padding-right: 2.6rem; }
.wh-clear {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%;
  border: 0; background: none; color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.wh-clear:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.wh-found { margin: .45rem 0 0; font-size: .88rem; color: var(--muted); min-height: 1.2em; }
.wh-found:empty { min-height: 0; margin: 0; }
.wh-found b { color: var(--fg); }
.wh-pricebox { display: flex; align-items: center; gap: .5rem; max-width: 16rem; }
.wh-pricebox > span { font-size: 1.15rem; font-weight: 650; color: var(--muted); }

.wh-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wh-chip {
  font: inherit; font-size: .86rem; line-height: 1.2; cursor: pointer; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .42rem .78rem;
  transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.wh-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.wh-chip:active { transform: scale(.96); }
.wh-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.wh-chip:focus-visible, .wh-card:focus-visible, .wh-bank-h:focus-visible, .wh-add:focus-visible, .wh-x:focus-visible, .wh-clear:focus-visible,
.wh-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wh-members .wh-label { margin-top: 1rem; }
.wh-member[aria-pressed="false"]::before { content: "+ "; }
.wh-member[aria-pressed="true"]::before { content: "\2713  "; }

/* ---- a card, from its own colours ---- */
.wh-face {
  position: relative; display: block; flex: none; overflow: hidden;   /* a card is 1.586 wide to 1 high; sizes below say both, for iPhones before aspect-ratio */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .28);
}
.wh-face::after { /* a sheen across the face */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .17) 50%, transparent 62%);
}
.wh-face.metal::after { background: linear-gradient(115deg, rgba(255, 255, 255, .06) 20%, rgba(255, 255, 255, .26) 48%, rgba(255, 255, 255, .04) 70%); }
.wh-face-lg { width: 8.6rem; height: 5.42rem; border-radius: .6rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 22px -8px rgba(0, 0, 0, .45); }
.wh-face-sm { width: 3.1rem; height: 1.95rem; border-radius: .3rem; }
.wh-face-xs { width: 2.5rem; height: 1.58rem; border-radius: .25rem; }
.f-chip {
  position: absolute; left: 10%; top: 38%; width: 15%; height: 21%; border-radius: 12% / 16%;
  background: linear-gradient(135deg, #E9D08B, #B9954A); opacity: .92;
}
.f-bank, .f-name {
  position: absolute; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15;
  font-size: .56rem; font-weight: 800; letter-spacing: .04em;
}
.f-bank { top: 8%; right: 7%; text-align: right; }
[data-bank="TL"] > .f-bank { right: auto; left: 7%; text-align: left; }
[data-bank="BL"] > .f-bank { top: auto; bottom: 8%; right: auto; left: 7%; }
.f-name { left: 7%; bottom: 9%; max-width: 86%; font-size: .6rem; font-weight: 700; }
[data-name="TL"] > .f-name { bottom: auto; top: 8%; }
[data-name="TR"] > .f-name { bottom: auto; left: auto; top: 8%; right: 7%; text-align: right; }
[data-name="CENTER"] > .f-name { bottom: auto; top: 64%; left: 0; right: 0; max-width: none; text-align: center; padding: 0 8%; }
.f-name[data-clash] { top: 23% !important; }
[data-bank="BL"] > .f-name[data-clash] { top: auto !important; bottom: 24%; }
.f-name[data-style="CAPS"] { text-transform: uppercase; }
.f-name[data-style="SPACED"] { text-transform: uppercase; letter-spacing: .22em; }
.f-name[data-style="SERIF"] { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: .01em; }
.f-name[data-style="SCRIPT"] { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600; letter-spacing: 0; }

/* ---- the answer ---- */
.wh-loading { padding: 2rem 0; text-align: center; }
.wh-best {
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 16px; padding: 1rem 1rem 1.05rem;
  background: var(--accent-bg);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 13%, var(--card)), color-mix(in srgb, var(--accent) 4%, var(--card)));
}
.wh-best-k { display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; font-size: .86rem; font-weight: 650; }
.wh-star {
  display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg); font-size: .72rem;
}
.wh-best-row { display: flex; align-items: center; gap: 1rem; }
.wh-best-text { min-width: 0; }
.wh-best-name { margin: 0; font-weight: 650; line-height: 1.3; }
.wh-best-fig { margin: .15rem 0 0; font-size: 1rem; color: var(--muted); }
.wh-fig { display: inline-block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--money-ink); font-variant-numeric: tabular-nums; }
.wh-best-line { margin: .85rem 0 0; font-size: .9rem; }
.wh-maybe { margin: .55rem 0 0; font-size: .82rem; color: var(--muted); }
@media (max-width: 26rem) {
  .wh-face-lg { width: 7rem; height: 4.41rem; }
  .wh-fig { font-size: 1.6rem; }
}
/* a new best card is dealt in */
.wh-pop .wh-face-lg { animation: wh-deal .65s cubic-bezier(.3, 1.5, .5, 1) both; }
.wh-pop .wh-best-text { animation: wh-rise .5s cubic-bezier(.2, .9, .3, 1) .1s both; }
@keyframes wh-deal { from { opacity: 0; transform: translateY(-10px) rotate(-12deg) scale(.7); } }
@keyframes wh-rise { from { opacity: 0; transform: translateY(6px); } }

.wh-rows { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .1rem; }
.wh-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .15rem; border-bottom: 1px solid var(--line); }
.wh-row:last-child { border-bottom: 0; }
.wh-row-text { flex: 1; min-width: 0; display: grid; justify-items: start; line-height: 1.3; }
.wh-row-text .wh-add { margin-top: .4rem; }
.wh-tag { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.wh-row-text b { font-weight: 600; font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wh-row-text small { font-size: .8rem; color: var(--muted); }
.wh-row-fig { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wh-none { margin: 0; padding: .9rem 1rem; border-radius: 14px; background: var(--bg); color: var(--muted); }

.wh-src { margin: 0 0 .9rem; font-size: .86rem; color: var(--muted); }
.wh-src p { margin: 0; }
.wh-src ul { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--fg); }
.wh-src li { margin: .15rem 0; }
.wh-src b { color: var(--fg); }
.wh-also { margin-top: .4rem !important; font-size: .8rem; }

.wh-add {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  color: var(--accent); background: none; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 999px; padding: .32rem .75rem;
}
.wh-add:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.wh-worth {
  margin-top: 1rem; padding: .9rem 1rem 1rem; border-radius: 14px;
  background: var(--bg); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
}
.wh-worth-k { margin: 0 0 .6rem; font-size: .8rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.wh-worth-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.wh-empty { text-align: center; padding: .6rem 0 .4rem; }
.wh-empty-h { margin: 0 auto .9rem; max-width: 22rem; font-weight: 600; }
.wh-empty + .wh-src, .wh-empty + .wh-label { margin-top: 1.2rem; }
.wh-go { font-size: .95rem; padding: .65rem 1.15rem; border: 0; cursor: pointer; font-family: inherit; }

.wh-cant { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.wh-cant p { margin: 0; }
.wh-cant b { color: var(--fg); }
.wh-cant-get { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .8rem !important; }
.wh-cant-get .btn { font-size: .9rem; padding: .6rem 1rem; }
.wh-fine { margin-top: .8rem !important; font-size: .76rem; }
.wh-link { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ---- your cards ---- */
.wh-mine { margin-bottom: 1rem; }
.wh-mine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wh-mine-list li {
  display: flex; align-items: center; gap: .5rem; max-width: 100%; padding: .25rem .25rem .25rem .3rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: .85rem; line-height: 1.2;
}
.wh-mine-list li > span:not(.wh-face) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-mine-list .wh-face-xs { width: 2rem; height: 1.26rem; }
.wh-x { flex: none; width: 1.7rem; height: 1.7rem; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.wh-x:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }

.wh-pickbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .7rem; }
.wh-pickbar .wh-input { flex: 1 1 12rem; width: auto; }
.wh-types button { font-size: .85rem; padding: .32rem .75rem; }
.wh-banks { border-top: 1px solid var(--line); }
.wh-bank { border-bottom: 1px solid var(--line); }
.wh-bank-h {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .8rem .2rem; cursor: pointer;
  font: inherit; text-align: left; color: var(--fg); background: none; border: 0;
}
.wh-bank-name { font-weight: 600; min-width: 0; }
.wh-bank-count { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.wh-chev {
  flex: none; width: .55rem; height: .55rem; margin: 0 .3rem 0 .2rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .25s;
}
.wh-bank-h[aria-expanded="true"] .wh-chev { transform: translateY(2px) rotate(225deg); }
.wh-bank-cards { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .15rem; }
.wh-bank-cards:not([hidden]) { animation: wh-rise .3s cubic-bezier(.2, .9, .3, 1); }
.wh-card {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .45rem .5rem; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .93rem; text-align: left; color: var(--fg); background: none; border: 1px solid transparent;
  transition: background-color .2s, border-color .2s;
}
.wh-card:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.wh-card[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.wh-card-name { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.wh-card-name small { font-size: .76rem; color: var(--muted); }
.wh-tick { flex: none; position: relative; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid var(--line); transition: background-color .2s, border-color .2s; }
.wh-card[aria-pressed="true"] .wh-tick { background: var(--accent); border-color: var(--accent); }
.wh-card[aria-pressed="true"] .wh-tick::after {
  content: ""; position: absolute; left: 34%; top: 18%; width: 26%; height: 46%;
  border-right: 2px solid var(--accent-fg); border-bottom: 2px solid var(--accent-fg); transform: rotate(45deg);
  animation: wh-tick .3s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes wh-tick { from { transform: rotate(45deg) scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .wh-pop .wh-face-lg, .wh-pop .wh-best-text, .wh-bank-cards:not([hidden]), .wh-card[aria-pressed="true"] .wh-tick::after { animation: none; }
}
/* the page's own display rules would otherwise outrank the hidden attribute's */
.wh [hidden] { display: none !important; }

/* The home page's bar has eight links since "Which card?" joined it (Oct 2026). Above the Menu's width they sit a
   little closer, or the Theme button ran 72px past the page's column on every laptop. */
@media (min-width: 62.01rem) {
  .nav-full { gap: .9rem; }
  .nav-full .nav-links { gap: 0; font-size: .88rem; }
  .nav-full .nav-links a { padding-left: .38rem; padding-right: .38rem; }
}

/* Lounges on your cards (which-card.js: renderLounges; the app's ui/LoungePanel.kt) */
.wh-lounge-list { display: grid; gap: .6rem; }
.wh-lounge { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.wh-lounge > summary {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; cursor: pointer; list-style: none;
}
.wh-lounge > summary::-webkit-details-marker { display: none; }
.wh-lounge > summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; color: var(--muted); }
.wh-lounge[open] > summary::after { content: "\2212"; }
.wh-lounge-name { display: grid; gap: .1rem; min-width: 0; }
.wh-lounge-name b { overflow-wrap: anywhere; }
.wh-lounge-name small { color: var(--muted); }
.wh-lounge-body { padding: 0 .9rem .9rem; display: grid; gap: .8rem; }
.wh-lounge-row p { margin: .15rem 0 0; }
.wh-lounge-row .wh-lounge-head { margin: 0; font-weight: 650; }
.wh-lounge-row .wh-lounge-more, .wh-lounge-fine { color: var(--muted); font-size: .9rem; }
.wh-lounge-fine { margin: 0; }
.wh-lounge-list-link { justify-self: start; }


/* ---- 14 Oct 2026: the sale planner, Paisa Vasool, the collection and the Lounges screen's lists on the page ---- */
.wh-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.wh-jump a {
  font-size: .84rem; font-weight: 600; color: var(--accent); text-decoration: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .75rem; background: var(--card);
}
.wh-jump a:hover { border-color: var(--accent); }
.wh-jump a[hidden] { display: none; }
textarea.wh-input { resize: vertical; min-height: 4.5rem; }
.wh-tell-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; margin: .9rem 0 0; }
.wh-rows-tight { margin-top: .4rem; }
.wh-rows-tight .wh-row { padding: .4rem .15rem; }

/* sales coming up */
.wh-amounts { margin-bottom: .8rem; flex-wrap: wrap; }
.wh-amounts button { font-size: .85rem; padding: .32rem .7rem; }
.wh-sale-list { display: grid; gap: .6rem; }
.wh-sale, .wh-tip, .wh-tell, .wh-how { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.wh-sale > summary, .wh-tip > summary, .wh-tell > summary, .wh-how > summary {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; cursor: pointer; list-style: none;
}
.wh-sale > summary::-webkit-details-marker, .wh-tip > summary::-webkit-details-marker, .wh-tell > summary::-webkit-details-marker, .wh-how > summary::-webkit-details-marker { display: none; }
.wh-tell > summary, .wh-how > summary { font-weight: 600; }
.wh-tell > summary::after, .wh-how > summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; color: var(--muted); }
.wh-tell[open] > summary::after, .wh-how[open] > summary::after { content: "\2212"; }
.wh-sale-name { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.wh-sale-name small { color: var(--muted); }
.wh-sale-state {
  flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .08em; border-radius: 6px; padding: .22rem .5rem;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.wh-sale-state.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.wh-sale-body, .wh-tip-body, .wh-tell-body { padding: 0 .9rem .9rem; display: grid; gap: .7rem; }
.wh-sale-store { padding-top: .6rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.wh-sale-store-h { margin: 0; font-weight: 650; }
.wh-sale-offers { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--muted); }
.wh-sale-offers li { margin: .1rem 0; }
.wh-sale-best { display: flex; align-items: center; gap: .75rem; }

/* Paisa Vasool */
.wh-kind { margin-bottom: .9rem; display: grid; gap: .5rem; }
.wh-kind-h { margin: 0; font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.wh-tip-badge {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .08em; border-radius: 5px; padding: .2rem .4rem;
  background: var(--accent); color: var(--accent-fg); white-space: nowrap;
}
.wh-tip-perk .wh-tip-badge, .wh-kind-perk .wh-tip-badge { background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.wh-tip-watch .wh-tip-badge, .wh-kind-watch .wh-tip-badge { background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.wh-tip > summary { align-items: flex-start; }
.wh-tip > summary .wh-tip-badge { margin-top: .2rem; }
/* under a kind's heading the badge is said once; a card's own tips (no heading) keep it */
.wh-kind .wh-tip > summary .wh-tip-badge { display: none; }
.wh-lounge-show { justify-self: start; margin-top: .4rem; }
.wh-tip-name { display: grid; gap: .15rem; min-width: 0; flex: 1; line-height: 1.3; }
.wh-tip-name b { font-weight: 600; }
.wh-tip-name small { color: var(--muted); font-size: .8rem; }
.wh-tip-cards { display: flex; flex: none; }
.wh-tip-cards .wh-face-xs { margin-left: -.9rem; }
.wh-tip-cards .wh-face-xs:first-child { margin-left: 0; }
.wh-tip-body p { margin: 0; }
.wh-dip { display: grid; gap: .5rem; padding: .7rem .8rem; border-radius: 12px; background: var(--bg); }
.wh-dip .wh-label { margin: 0; }
.wh-dip .wh-pricebox { max-width: 12rem; }
.wh-dip-sum { font-size: .95rem; }
.wh-steps { margin: 0; padding-left: 1.2rem; }
.wh-steps li { margin: .2rem 0; }
.wh-tip-src { font-size: .82rem; color: var(--muted); }
.wh-tip-src a { color: var(--accent); }
.wh-thumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem; }
.wh-thumbs small { font-size: .8rem; }
.wh-before { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--warn); }
.wh-before li { margin: .15rem 0; }
.wh-worth .wh-worth-row + .wh-worth-row { margin-top: .5rem; }
.wh-worth .wh-worth-k + .wh-before { margin-top: -.2rem; }

/* the collection */
.wh-score { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.wh-ring { flex: none; }
.wh-score-text { display: grid; }
.wh-score-of { font-size: .82rem; color: var(--muted); }
.wh-score-title { margin: .25rem 0 0; font-weight: 650; font-size: 1.05rem; }
.wh-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.wh-part-h { display: flex; justify-content: space-between; font-size: .9rem; }
.wh-part-h span { color: var(--muted); font-variant-numeric: tabular-nums; }
.wh-bar { height: .5rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin: .25rem 0; }
.wh-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.wh-parts small { color: var(--muted); font-size: .8rem; }
.wh-member[disabled] { opacity: .7; cursor: default; }
.wh-member small { font-weight: 400; opacity: .85; }
.wh-how { margin-top: .9rem; }
.wh-how-list { margin: 0; padding: 0 .9rem .9rem 2rem; font-size: .88rem; color: var(--muted); }
.wh-how-list li { margin: .2rem 0; }

/* the lounges list */
.wh-lounge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .6rem; }
.wh-lounge-bar .seg button { font-size: .85rem; padding: .32rem .7rem; }
.wh-lounge-bar .seg[hidden], .wh-sort[hidden] { display: none; }
.wh-sort { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; margin-left: auto; }
.wh-sort select { font: inherit; font-size: .85rem; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .32rem .6rem; }
.wh-lounge-sum { margin: 0 0 .7rem; font-size: .92rem; }
.wh-lounge-group { margin: .6rem 0 .3rem; }
.wh-lounge-group small { font-weight: 400; color: var(--muted); }
.wh-lounge-fig { font-size: .82rem; font-weight: 650; color: var(--accent) !important; margin-top: .1rem; }
.wh-lounge > summary::after { margin-left: .3rem; }
.wh-lounge-name small .wh-tag { font-size: .66rem; }
.wh-lounge-body .wh-add { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .wh-bar i { transition: none; } }
.wh-install {
  position: relative; margin: 1rem 0 0; padding: .7rem 2.5rem .7rem .9rem; font-size: .88rem; line-height: 1.5; color: var(--fg);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 12px; background: var(--card); max-width: 40rem;
}
.wh-install .wh-add { display: inline-block; margin: 0 .4rem .2rem 0; vertical-align: baseline; }
.wh-install-x { position: absolute; right: .35rem; top: .45rem; }


/* ---- the generated pages (site/pages.mjs): a page per card, per shop, the lounge pages, offers, Paisa Vasool ---- */
.seo .wrap { max-width: 50rem; }
.seo .wh-panel { margin-bottom: 1rem; }
.seo .wh-panel h2 { font-size: 1.15rem; margin: 0 0 .7rem; }
.seo .wh-panel h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.seo .wh-panel h4 { font-size: .95rem; margin: .9rem 0 .3rem; }
.seo-crumbs { margin: 1.2rem 0 0; font-size: .82rem; color: var(--muted); }
.seo-crumbs a { color: var(--accent); text-decoration: none; }
.seo-head { padding-top: 1rem; max-width: none; }
.seo-hero { display: flex; align-items: center; gap: 1.2rem; margin-top: .4rem; }
.seo-hero > div { min-width: 0; }
.seo-fee { margin: 0; font-weight: 650; }
.seo-fee small { font-weight: 400; color: var(--muted); }
.seo-list { margin: 0; padding-left: 1.2rem; }
.seo-list li { margin: .3rem 0; }
.seo-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem .9rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.seo-links li { padding: .2rem 0; }
.seo-links small { color: var(--muted); }
.seo-links-big { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); font-size: 1.05rem; }
.seo .wh-chips a.wh-chip { text-decoration: none; }
.seo-sale, .seo-shop-week { padding: .6rem 0 .3rem; border-top: 1px solid var(--line); }
.seo-sale:first-of-type, .seo-shop-week:first-of-type { border-top: 0; }
.seo .wh-sale-state { margin-left: .4rem; vertical-align: middle; }
.seo-tip { padding: .9rem 1rem; margin: .7rem 0; }
.seo-tip h3 { margin: .4rem 0 .5rem; font-size: 1.05rem; }
.seo-tip p { margin: .3rem 0; }
.seo-ranked { display: grid; gap: .5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-bottom: 1rem; }
.seo-ranked h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.seo-ranked ol { margin: 0; padding-left: 1.3rem; }
.seo-ranked li { margin: .2rem 0; }
.seo-lounge-fine { padding: 0; }
.seo .wh-cant { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.2rem; margin-top: 0; }
.seo .wh-jump { margin-top: .9rem; }
.seo .wh-row-fig { font-size: .85rem; max-width: 6.5rem; white-space: normal; text-align: right; }
.seo .wh-jump a[aria-current] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }