/* AskTula, shared stylesheet.
   Mobile first. The phone layout is the base; everything above it is an
   enhancement at a breakpoint. No fixed widths, no fixed heights, no
   absolute positioning for layout.

   Two colour rules run through the whole file:
     mint  (--saving) is only ever a rupee amount this visitor will save
     green (--action) is only ever something you can press, or a live state
   Nothing else uses either. Emphasis comes from weight and from the
   off-white to muted ladder. */

:root {
  --ground:        #070D0A;
  --surface:       #101A15;
  --surface-low:   #0C1310;
  --action:        #0E7A4E;
  --action-hover:  #12A265;
  --saving:        #3DDC97;
  --type:          #F6F4EC;
  --type-mid:      #CFDBD4;
  --type-muted:    #ADBDB4;
  --type-dim:      #97A99F;   /* 7:1 on surface. Raised 26 Sep: the old ladder read hazy */
  --line:          #18251F;
  --line-mid:      #20332A;
  --line-high:     #2A4438;

  --gap:      clamp(14px, 3.5vw, 22px);
  --gutter:   clamp(16px, 5vw, 32px);
  --radius:   14px;
  --radius-l: 18px;
  --tap:      44px;          /* the floor for anything a thumb must hit */

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--type);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A bare link is not mint. Mint is money. */
a { color: var(--type-mid); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--type); }

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- layout ---------- */

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: 640px;          /* app screens read as one column */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: 1180px; }

.grow { flex-grow: 1; }

.stack       { display: flex; flex-direction: column; gap: var(--gap); }
.stack--tight{ display: flex; flex-direction: column; gap: 10px; }
.row         { display: flex; align-items: center; gap: 12px; }
.row--between{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row--wrap   { flex-wrap: wrap; }

/* Two columns once there is room for them, so a wide window stops looking
   like a phone screen stretched down the middle. */
.duo { display: grid; gap: clamp(20px, 4vw, 36px); grid-template-columns: minmax(0, 1fr); }
.duo > * { min-width: 0; }
@media (min-width: 960px) {
  .duo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .duo__side { position: sticky; top: 24px; }
}
/* The ask page carries the search bar in its left column, so it waits until
   that column can hold the bar on one line. */
@media (min-width: 960px) and (max-width: 1059px) {
  .duo--late { grid-template-columns: minmax(0, 1fr); }
  .duo--late .duo__side { position: static; }
}

/* ---------- type ---------- */

h1, h2 { text-wrap: balance; }
p, .lede, .fine, .step span { text-wrap: pretty; }

h1 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15;
     font-size: clamp(24px, 6.4vw, 32px); }
h2 { margin: 0; font-weight: 600; letter-spacing: -0.02em; font-size: clamp(17px, 4.4vw, 20px); }
p  { margin: 0; }

.lede      { color: var(--type-muted); font-size: clamp(14px, 3.7vw, 16px); line-height: 1.6; max-width: 62ch; }
.label     { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--type-muted); }
.fine      { font-size: 12.5px; line-height: 1.55; color: var(--type-dim); max-width: 70ch; }
.saving    { color: var(--saving); }
.measure   { max-width: 72ch; }
.duo__side .card p { max-width: 54ch; }

/* ---------- header ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-block: clamp(14px, 3.4vw, 20px);
}

.wordmark {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-decoration: none; padding-block: 6px;
}
.wordmark b {
  font-size: clamp(18px, 4.8vw, 23px); font-weight: 700; letter-spacing: -0.035em;
  color: var(--type); line-height: 1;
}
.wordmark b i { font-style: normal; color: var(--saving); }
.wordmark small {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--type-muted);
}

.navlinks { display: none; gap: clamp(14px, 2.2vw, 26px); align-items: center; }
.navlinks a:not(.btn) {
  color: var(--type-muted); text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding-inline: 6px;
}
.navlinks a:not(.btn):hover { color: var(--type); }
@media (min-width: 720px) { .navlinks { display: flex; } }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13px 24px; border: 0; border-radius: var(--radius);
  background: var(--action); color: var(--type);
  font: inherit; font-weight: 700; font-size: clamp(14px, 3.8vw, 15px);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.btn:hover { background: var(--action); color: var(--type); box-shadow: 0 0 0 2px rgba(18,162,101,0.5); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }

.btn--ghost { background: transparent; border: 1px solid var(--line-mid); font-weight: 500; }
.btn--ghost:hover { background: var(--surface); border-color: var(--action); }

.btn--small { min-height: var(--tap); padding: 10px 16px; font-size: 13px; font-weight: 500; }

.chip {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 10px 16px;
  border: 1px solid var(--line-mid); border-radius: 999px;
  font-size: 13.5px; color: var(--type-mid); text-decoration: none; white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.chip:hover { border-color: var(--action); color: var(--type); background: var(--surface); }
.chip--flag { min-height: 34px; padding: 6px 14px; }   /* a label, not a target */
.chip--flag { white-space: normal; flex-wrap: wrap; justify-content: center; row-gap: 2px;
               max-width: 100%; text-align: center; }

.pill {
  padding: 5px 9px; border: 1px solid var(--line-high); border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  color: var(--type-muted); white-space: nowrap;
}

/* ---------- the search field ---------- */

.field {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface); border: 1px solid var(--action);
  border-radius: var(--radius-l); padding: 8px;
  flex-direction: column;
}
.field__line {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 0;
}
.field__line + .field__line { border-top: 1px solid var(--line-mid); }
.field__text {
  flex-grow: 1; min-width: 0; font-size: clamp(15px, 4vw, 17px); color: var(--type);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A field that is showing a finished query rather than typing one can wrap,
   so a long question is never cut off on a narrow phone. */
.field__text--wrap { white-space: normal; overflow: visible; text-overflow: clip; }
.field__hint { color: var(--type-dim); white-space: nowrap; }
/* The caret has to sit against the last character, not at the far end of a
   flexible row, so the text stops growing and a spacer takes the slack. */
.field__line--typing .field__text { flex: 0 1 auto; }
@media (max-width: 719px) {
  .field__line--typing .field__text,
  .field__line--typing .field__hint { white-space: normal; overflow: visible; text-overflow: clip; }
  .field__line--reserve { min-height: calc(2 * 1.5 * clamp(15px, 4vw, 17px) + 20px); }
}
.field__slack { flex: 1 1 auto; min-width: 0; }
.field__caret {
  width: 2px; flex: 0 0 2px; align-self: center; height: 19px;
  background: var(--type); animation: atBlink 1.1s step-end infinite;
}
.field .btn { margin-top: 4px; }

@media (min-width: 720px) {
  .field { flex-direction: row; align-items: center; padding: 8px 8px 8px 18px; }
  .field__line { padding: 8px 0; }
  /* The question takes the slack. Without this the row is sized to the text,
     so the bar shifts sideways with every character typed. */
  .field__line:first-child { flex: 1 1 auto; min-width: 0; }
  .field__line + .field__line {
    border-top: 0; border-left: 1px solid var(--line-mid); padding-left: 18px; margin-left: 4px;
    flex: 0 0 auto;
  }
  .field__line--amount .field__text { width: 10ch; flex-grow: 0; }
  .field .btn { margin-top: 0; margin-left: 12px; flex: 0 0 auto; }
}

/* ---------- cards and rows ---------- */

.card {
  background: var(--surface); border: 1px solid var(--line-mid);
  border-radius: var(--radius-l); padding: clamp(16px, 4.4vw, 22px);
}
.card--hero   { border-color: var(--action); }
.card--quiet  { background: var(--surface-low); border-color: var(--line); }
.card--dashed { background: transparent; border-style: dashed; border-color: var(--line-mid); }

.figure {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500; line-height: 1.05;
  font-size: clamp(26px, 8vw, 34px); color: var(--type);
}
.figure--hero {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.04em;
  font-size: clamp(38px, 12vw, 56px); color: var(--saving);
}
.figure--quiet { font-size: clamp(20px, 6vw, 24px); color: var(--type-mid); }

/* an offer row: card name, terms, figure, and the source line */
.offer { display: flex; flex-direction: column; gap: 12px; }
.offer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.offer__name { font-size: clamp(15px, 4.2vw, 18px); font-weight: 600; letter-spacing: -0.01em; }
.offer__terms { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--type-muted); line-height: 1.65; }
.offer__rule { height: 1px; background: var(--line); }
.offer__source {
  display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
  margin-block: 8px 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--type-dim);
}
/* Padded out to a 40px target without pushing the line apart. A link sitting
   inside a sentence cannot reach 44px without breaking the text flow. */
.offer__source a {
  color: var(--type-mid); display: inline-block; line-height: 1.6;
  padding: 13px 5px; margin: -13px -5px;
}

/* ---------- tiles and lists ---------- */

.tiles { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }

.tile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px;
  background: var(--surface-low); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; text-decoration: none;
  color: var(--type); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.tile:hover { border-color: var(--action); background: var(--surface); transform: translateY(-2px); color: var(--type); }
/* Direct child only. As a descendant selector this was reaching into nested
   spans and turning card names monospace, 10px and dim. */
.tile > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tile > span:last-child { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--type-dim); flex: 0 0 auto; }

.steps { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step b { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--type-muted); font-weight: 400; padding-top: 2px; }
.step span { font-size: 14px; line-height: 1.55; color: var(--type-mid); }

/* ---------- the plastic card ---------- */

.plastic {
  position: relative; width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--action);
  border-radius: 22px; padding: clamp(18px, 5vw, 26px);
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(20px, 7vw, 40px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.plastic--tight { gap: clamp(16px, 3vw, 22px); }

/* ---------- footer ---------- */

/* The footer is the site map: four columns of links into the hubs and the
   pages people most often want. It sizes by its own width rather than the
   window's, so the narrow signed-in pages get two columns and the wide
   public pages get four. */
.footer {
  margin-top: clamp(28px, 6vw, 48px); padding-block: 24px 24px;
  border-top: 1px solid #15221C;
  display: flex; flex-direction: column; gap: 20px;
  container-type: inline-size;
}
.sitemap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
@container (min-width: 720px) { .sitemap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sitemap h2 {
  margin: 0 0 4px; font-size: 12px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--type-muted);
}
.sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sitemap a {
  display: flex; align-items: center; min-height: var(--tap);
  font-size: 13.5px; line-height: 1.35; color: var(--type-mid); text-decoration: none;
}
.sitemap a:hover { color: var(--type); }
.sitemap a.sitemap__all { color: var(--type); }
.footer__note { max-width: 92ch; }

/* ---------- motion ---------- */

@keyframes atBlink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes atRise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes atFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes atBreathe { 0%, 100% { background-color: var(--surface-low); } 50% { background-color: var(--surface); } }
@keyframes atEdge  { 0%, 100% { border-color: var(--action); } 50% { border-color: var(--action-hover); } }
@keyframes atDash  { 0%, 100% { border-color: var(--line-mid); } 50% { border-color: var(--action); } }
@keyframes atFloat {
  0%, 100% { transform: perspective(1200px) rotateY(-8deg) rotateX(4deg) translateY(0); }
  50%      { transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-6px); }
}

.rise { opacity: 0; animation: atRise 600ms cubic-bezier(.2,.7,.3,1) forwards; }
.fade { opacity: 0; animation: atFade 500ms ease forwards; }

/* An entrance and a loop on the same element have to be declared together.
   Two separate rules both setting `animation` means the later one silently
   cancels the earlier, which is why the card glow never ran. */
.rise.glow  { animation: atRise 600ms cubic-bezier(.2,.7,.3,1) forwards,
                         atEdge 9s ease-in-out 700ms infinite; }
.fade.glow  { animation: atFade 500ms ease forwards,
                         atEdge 9s ease-in-out 700ms infinite; }
.fade.dash  { animation: atFade 500ms ease forwards,
                         atDash 4.5s ease-in-out 700ms infinite; }
.fade.shim  { animation: atFade 500ms ease forwards,
                         atBreathe 3.2s ease-in-out 900ms infinite; }

/* The float owns `transform`, so its entrance is opacity only. A rise would
   hold translateY(0) forever and flatten it. */
.plastic--float { opacity: 0; animation: atFade 600ms ease forwards,
                                         atEdge 9s ease-in-out 700ms infinite; }
@media (min-width: 720px) {
  .plastic--float { animation: atFade 600ms ease forwards,
                               atEdge 9s ease-in-out 700ms infinite,
                               atFloat 8s ease-in-out 700ms infinite; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .fade, .plastic--float { opacity: 1; }
}

/* ---------- utilities ---------- */

.icon { flex: 0 0 auto; }
.skeleton { height: 11px; border-radius: 3px; background: var(--line); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Shown only below the 720px nav breakpoint. Last in the file so it beats .btn. */
.only-narrow { display: inline-flex; align-items: center; gap: 8px; }
@media (min-width: 720px) { .only-narrow { display: none; } }

/* ---------- the landing hero ---------- */

/* Vertical rhythm scales with the window height rather than snapping at a
   threshold. A hard breakpoint squeezed an 847px window exactly as hard as a
   640px one, which left the top cramped and a band of nothing above the
   footer. Every value below is clamped, so it cannot run away in either
   direction, and all of it is in CSS rather than inline so it actually wins. */

.hero            { --hero-gap: clamp(12px, 2.2vh, 24px); padding-top: clamp(2px, 0.8vh, 14px); gap: var(--hero-gap); }
.hero__head      { padding-block: clamp(8px, 1.7vh, 20px); }
.hero__title     { font-size: clamp(24px, min(5.4vw, 4.8vh), 46px); text-wrap: balance; }
.hero .lede      { font-size: clamp(13px, 1.75vh, 16px); line-height: 1.5; }
.hero .plastic   { padding: clamp(11px, 2vh, 22px) clamp(16px, 2.4vh, 24px);
                   gap: clamp(8px, 1.5vh, 22px); }
.hero__figure    { font-size: clamp(27px, 5vh, 46px); }
/* The figure counts up from nothing to its final value. Reserving the final
   width stops the label beside it jumping to a new line mid-count. */
.hero__figure    { display: inline-block; min-width: 3.9em; font-variant-numeric: tabular-nums; }
.hero .steps     { gap: clamp(8px, 1.4vh, 16px); }
.hero .step span { font-size: clamp(13px, 1.7vh, 14px); line-height: 1.5; }
.hero .chip      { padding-block: clamp(6px, 1.2vh, 10px);
                   padding-inline: clamp(10px, 1.35vw, 16px);
                   font-size: clamp(12.5px, 1.1vw, 13.5px); }
.hero .row--wrap { gap: clamp(7px, 0.85vw, 9px); }

/* The card's tilt makes its box taller than the card, so on a short window
   the float costs height twice over and closes the gap to the chips above. */
@media (max-height: 880px) {
  .plastic--float { animation: atFade 600ms ease forwards,
                               atEdge 9s ease-in-out 700ms infinite; }
}

/* The footer lives outside the hero, so its spacing is scaled here. */
.page--hero .footer { margin-top: clamp(14px, 3vh, 40px); }

/* The card only floats in a tall window, where it needs room to rise into.
   Putting that on the card keeps the space above and below it equal. */
@media (min-height: 881px) {
  .hero .plastic   { margin-block: clamp(4px, 0.8vh, 9px); }
}

/* ---------- copy pass, 25 September ---------- */

.btn--icon { padding-inline: 13px; min-width: var(--tap); }

/* A figure the nightly build fills in. Shown as its field name in the mock so
   it can never be mistaken for a real number. */
.token {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 1em;
  letter-spacing: 0; text-transform: none; color: var(--type);
  border-bottom: 1px dashed var(--line-high); padding-inline: 2px; white-space: nowrap;
}

/* The landing page below the steps: two sections that say what the product is
   for, then the way into every hub. */
.more { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 88px);
        padding-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--line); }
.more__block { width: 100%; max-width: 760px; margin-inline: auto;
               display: flex; flex-direction: column; gap: 14px; }
.more__block h2 { font-size: clamp(22px, 4.4vw, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; max-width: 26ch; }
.more__block p { font-size: 16px; line-height: 1.7; color: var(--type-mid); max-width: 64ch; }
.more__hubs { display: flex; flex-direction: column; gap: 14px; }
.hubs { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .hubs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hub { display: flex; flex-direction: column; gap: 12px; }
.hub h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.hub p { font-size: 14px; line-height: 1.6; color: var(--type-mid); }
.hub__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hub__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub__list a, .related a {
  display: flex; align-items: center; min-height: var(--tap);
  font-size: 14px; line-height: 1.4; color: var(--type-mid); text-decoration: none;
}
.hub__list a:hover, .related a:hover { color: var(--type); }
.link-more {
  display: inline-flex; align-items: center; min-height: var(--tap); align-self: flex-start;
  font-size: 14px; font-weight: 500; color: var(--type); text-decoration: none;
}
.link-more:hover { color: var(--action-hover); }

/* The answer page. */
.rank-note { font-size: 14px; line-height: 1.55; color: var(--type-mid); max-width: 60ch; }
.sources-note { font-size: 13px; line-height: 1.6; color: var(--type-dim); max-width: 64ch; }
.sources-note a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--type-mid); }
.related { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.signup-nudge { border-color: var(--line-high); }

/* The card picker's not-listed row carries what happens next. */
.notlisted {
  display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
  font: inherit; cursor: pointer; min-height: var(--tap); padding: 12px 16px; width: 100%;
}
.notlisted__head { font-size: 14px; color: var(--type); }
.notlisted__body { font-size: 13px; line-height: 1.5; color: var(--type-muted); }

/* A slot designed now and switched on when cap tracking ships. */
.planned {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--type-mid);
  border: 1px dashed var(--line-high); border-radius: 10px; padding: 8px 12px;
}
.planned__tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--type-muted);
}

.step strong { color: var(--type); font-weight: 600; }
.link-inline { color: var(--type); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.more__close { text-align: center; align-items: center; }

/* ---------- how it works, 26 September ---------- */

/* Three identical panels: the same box, the same picture height, a title and
   one line each. Nothing floats and nothing is a different shape. */
.hero__how { display: flex; flex-direction: column; align-items: center;
             gap: var(--hero-gap); width: 100%; }
.how3 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr);
        width: 100%; max-width: 1000px; }
@media (min-width: 720px) { .how3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); } }

.how { display: flex; flex-direction: column; gap: 6px; text-align: left;
       padding: clamp(12px, 1.8vh, 18px); }
.how__vis {
  height: clamp(106px, 14.5vh, 132px); margin-bottom: clamp(6px, 1.2vh, 10px);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-low); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 12px; overflow: hidden;
}
.how__title { display: flex; align-items: baseline; gap: 10px;
              font-size: clamp(15px, 2vh, 17px); font-weight: 600; letter-spacing: -.01em; color: var(--type); }
.how__title .mono { font-size: 12px; font-weight: 400; color: var(--type-muted); }
.how__body { font-size: clamp(13px, 1.75vh, 14px); line-height: 1.5; color: var(--type-mid); padding-left: 27px; }

/* 01: the cards you hold */
.wallet { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 230px;
          display: grid; gap: 5px; }
.wallet li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
             padding: 4px 10px; border-radius: 8px;
             background: var(--surface); border: 1px solid var(--line-high); }
.wallet b { font-size: 13px; font-weight: 600; color: var(--type); }
.wallet span { font-size: 12px; letter-spacing: .08em; color: var(--type-muted); }

/* 02: the question, as a message */
.chat { width: 100%; max-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.chat__out { align-self: flex-end; display: flex; align-items: flex-end; gap: 10px;
             background: var(--surface); border: 1px solid var(--line-high);
             border-radius: 14px 14px 4px 14px; padding: 8px 12px;
             font-size: 13.5px; color: var(--type); }
.chat__out small { font-size: 12px; color: var(--type-muted); flex: 0 0 auto; }
.chat__in { align-self: flex-start; display: flex; gap: 5px; align-items: center;
            background: var(--surface); border: 1px solid var(--line-mid);
            border-radius: 14px 14px 14px 4px; padding: 11px 14px; }
.chat__in i { width: 6px; height: 6px; border-radius: 50%; background: var(--type-muted); }

/* 03: the answer */
.result { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.result__card { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--type-muted); }
.result__figure { font-size: clamp(30px, 5vh, 42px); line-height: 1.1;
                  display: inline-block; min-width: 3.9em; font-variant-numeric: tabular-nums; }
.result__note { font-size: 12px; color: var(--type-muted); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
           gap: 10px 18px; text-align: center; }
.cta-row__text { font-size: clamp(15px, 2vh, 17px); font-weight: 700; color: var(--type); letter-spacing: -.01em; }
.cta-row .btn { min-height: 48px; }

/* Three narrow panels on a tablet: drop the small print inside the pictures
   and give every title two lines, so the three bodies still start level. */
@media (min-width: 720px) and (max-width: 959px) {
  .wallet span, .chat__out small, .wide-only { display: none; }
  .how__title { font-size: 15px; min-height: 2.7em; align-items: flex-start; }
  .how__body { padding-left: 0; }
}

/* ---------- the first screen, 26 September ---------- */

/* Header and hero fill exactly one window, so the page opens on the hero and
   the next section starts only when the visitor scrolls. --head-h is the
   header's measured height, set by the landing script; 92px is the fallback. */
.fold { min-height: calc(100svh - var(--head-h, 92px)); justify-content: center;
        padding-bottom: var(--hero-gap); }
.hero__flag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--type-mid); }
.hero__search { max-width: 840px; margin-inline: auto; width: 100%; }
.hero__try { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--type-dim); }

/* A large desktop at 100% gets the proportions of the approved 110% view:
   everything that was capped in pixels grows by about a tenth. */
@media (min-width: 1500px) and (min-height: 760px) {
  .wrap--wide { max-width: 1320px; }
  .wordmark b { font-size: 26px; }
  .wordmark small { font-size: 13px; }
  .navlinks a:not(.btn) { font-size: 15.5px; }
  .btn--small { font-size: 14.5px; }
  .hero { --hero-gap: clamp(12px, 2.6vh, 30px); }
  .hero__flag, .hero__try { font-size: 13px; }
  .hero__title { font-size: clamp(24px, min(5.4vw, 5.4vh), 54px); }
  .hero .lede { font-size: clamp(13px, 2vh, 18px); }
  .hero__search { max-width: 940px; }
  .hero__search .field__text { font-size: 19px; }
  .hero__search .btn { font-size: 16.5px; min-height: 52px; padding-inline: 28px; }
  .hero .chip { font-size: 15px; }
  .how3 { max-width: 1120px; }
  .how__vis { height: clamp(106px, 16vh, 150px); }
  .how__title { font-size: 19px; }
  .how__body { font-size: 15.5px; }
  .wallet { max-width: 270px; }
  .wallet b { font-size: 14.5px; }
  .chat { max-width: 280px; }
  .chat__out { font-size: 15px; }
  .result__figure { font-size: clamp(30px, 5.6vh, 50px); }
  .result__note { font-size: 13px; }
  .cta-row__text { font-size: 19px; }
  .cta-row .btn { font-size: 16.5px; min-height: 52px; }
}

/* ---------- the two graphics beside the text sections ---------- */

.more__row { display: grid; gap: 32px; width: 100%; max-width: 1100px; margin-inline: auto;
             grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .more__row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; } }
.more__block--row { max-width: none; margin: 0; }

.viz { margin: 0; background: var(--surface); border: 1px solid var(--line-mid); border-radius: 18px;
       padding: clamp(18px, 3vw, 26px); display: flex; flex-direction: column; gap: 18px; }
.viz__head { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--type-muted); }

/* 1: what the banner says against what the cap lets through */
.viz__row { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) 4.4em; align-items: center; gap: 12px; }
.viz__label { font-size: 14px; color: var(--type-mid); }
.viz__amt { font-size: 15px; color: var(--type); text-align: right; }
.viz__track { position: relative; height: 28px; border-radius: 7px; background: var(--surface-low); border: 1px solid var(--line); }
.viz__bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transform-origin: left center; }
.viz__bar--banner { width: 100%; background: var(--line-high); }
.viz--cap { --get: 83.33%; }
.viz__bar--get { width: var(--get); background: var(--type-mid); }
.viz__lost { position: absolute; left: var(--get); right: 0; top: 0; bottom: 0;
             border: 1px dashed var(--type-muted); border-left: 0; border-radius: 0 6px 6px 0; }
.viz__cap { position: absolute; left: calc(var(--get) - 1px); top: -7px; bottom: -7px; width: 2px;
            background: var(--type); border-radius: 1px; }
.viz__caplbl { position: absolute; top: calc(100% + 9px); left: var(--get); transform: translateX(-50%);
               font-size: 12px; line-height: 1; color: var(--type-muted); }
.viz--cap .viz__row + .viz__row { margin-top: 4px; }
.viz__foot { font-size: 14px; line-height: 1.55; color: var(--type-mid); margin-top: 8px; }
.viz__foot .mono { color: var(--type); }

/* 2: an offer record with the day it was read */
.viz__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rec { margin: 0; display: grid; }
.rec__row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 12px; align-items: baseline;
            padding: 11px 0; border-top: 1px solid var(--line); }
.rec__row:first-child { border-top: 0; padding-top: 0; }
.rec dt { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em;
          text-transform: uppercase; color: var(--type-muted); }
.rec dd { margin: 0; font-size: 14.5px; color: var(--type); }
.stamp { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px;
         padding: 6px 12px; border: 2px solid var(--type-mid); border-radius: 8px;
         font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--type-mid);
         transform: rotate(-7deg); }
.stamp b { font-size: 14px; letter-spacing: .04em; color: var(--type); font-weight: 600; }

/* They play when they come into view and again each time they return. With
   no script, or with reduced motion, they simply show their final state. */
@keyframes vizGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The "you get" bar first grows to the banner figure, then the cap cuts it back.
   --over is banner / you-get, so the overshoot always lands on the banner bar. */
@keyframes vizOver { 0% { transform: scaleX(0); } 55%, 70% { transform: scaleX(var(--over, 1.2)); } 100% { transform: scaleX(1); } }
@keyframes vizDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes stampIn { from { opacity: 0; transform: rotate(-16deg) scale(1.7); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }

.will-play:not(.is-in) .viz__bar, .will-play:not(.is-in) .viz__lost,
.will-play:not(.is-in) .viz__cap, .will-play:not(.is-in) .viz__caplbl, .will-play:not(.is-in) .rec__row,
.will-play:not(.is-in) .stamp { opacity: 0; }
.is-in .viz__bar--banner { animation: vizGrow 900ms cubic-bezier(.2,.7,.3,1) 150ms both; }
.is-in .viz__bar--get    { animation: vizOver 1900ms cubic-bezier(.3,.6,.3,1) 800ms both; }
.is-in .viz__cap, .is-in .viz__caplbl { animation: vizDrop 420ms ease 1750ms both; }
.is-in .viz__lost        { animation: atFade 500ms ease 2300ms both; }
.is-in .rec__row         { animation: atRise 500ms cubic-bezier(.2,.7,.3,1) both; }
.is-in .rec__row:nth-child(1) { animation-delay: 150ms; }
.is-in .rec__row:nth-child(2) { animation-delay: 350ms; }
.is-in .rec__row:nth-child(3) { animation-delay: 550ms; }
.is-in .rec__row:nth-child(4) { animation-delay: 750ms; }
.is-in .stamp            { animation: stampIn 460ms cubic-bezier(.3,1.4,.5,1) 1250ms both; }

/* ---------- the footer: WhatsApp community and the ownership line ---------- */

.join { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; padding: clamp(18px, 3vw, 26px);
        background: var(--surface); border: 1px solid var(--line-mid); border-radius: 18px; }
@container (min-width: 720px) {
  .join { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; }
  .join__fine { grid-column: 2; }
}
.join h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--type);
           text-transform: none; }
.join p { font-size: 14px; line-height: 1.55; color: var(--type-mid); }
.join__form { display: flex; flex-wrap: wrap; gap: 10px; }
.join__field { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px;
               padding: 0 14px; background: var(--surface-low); border: 1px solid var(--line-high);
               border-radius: var(--radius); }
.join__field:focus-within { border-color: var(--action); }
.join__cc { font-size: 15px; color: var(--type-muted); }
.join__field input { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 46px; background: transparent; border: 0;
                     outline: 0; color: var(--type); font-size: 15px; letter-spacing: .04em; }
.join__field input::placeholder { color: var(--type-dim); font-family: 'Space Grotesk', sans-serif; letter-spacing: 0; }
.join__form .btn { flex: 0 0 auto; padding-inline: 28px; }
.join p.join__fine { font-size: 12.5px; color: var(--type-dim); }
.footer__legal { color: var(--type-muted); }

/* ---------- the card picker: which UPI apps, 26 September ---------- */
.upi { display: flex; flex-direction: column; gap: 14px; }
.upi__lede { font-size: 14px; line-height: 1.55; color: var(--type-muted); }
.upi__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip--toggle { font: inherit; font-size: 14px; cursor: pointer; background: transparent; gap: 8px; }
.chip--toggle::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 5px;
  border: 1px solid var(--line-high); box-sizing: border-box; }
.chip--toggle[aria-pressed="true"] { border-color: var(--action); color: var(--type); background: var(--surface-low); }
.chip--toggle[aria-pressed="true"]::before { background: var(--action); border-color: var(--action);
  background-image: none; box-shadow: inset 0 0 0 3px var(--action); content: "\2713"; color: var(--type);
  font-size: 12px; line-height: 14px; text-align: center; font-weight: 700; }

.viz__link { color: var(--type-muted); text-decoration: underline; text-underline-offset: 3px;
             display: inline-flex; align-items: center; min-height: 44px; }
.viz__link:hover { color: var(--type); }
.join__act { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@container (min-width: 720px) { .join__act { align-items: flex-end; } }

/* ---------- content pages: one template for merchant, category, network, hub and guide ---------- */

.cpage { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 48px); max-width: 960px;
         padding-top: clamp(8px, 2vw, 20px); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 8px;
             font-size: 13px; color: var(--type-muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--type-dim); }
.crumbs a { color: var(--type-mid); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.crumbs a:hover { color: var(--type); }
.crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; color: var(--type-muted); }

.pagehead { display: flex; flex-direction: column; gap: 12px; }
.pagehead__title { font-size: clamp(28px, 5vw, 42px); line-height: 1.12; letter-spacing: -.03em; }
.pagehead__date { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--type-muted); }
.pagehead__answer { font-size: clamp(16px, 2.2vw, 18px); line-height: 1.65; color: var(--type); max-width: 68ch; }
.pagehead__note { font-size: 14.5px; line-height: 1.6; color: var(--type-mid); max-width: 68ch; }
.pagehead__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.og { display: flex; flex-direction: column; gap: 14px; }
.og__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.og__head h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.og__count { font-size: 12.5px; color: var(--type-muted); }
.og__note { font-size: 14px; line-height: 1.6; color: var(--type-mid); max-width: 68ch; margin-top: -4px; }
.og__list { display: grid; gap: 12px; }

.oc { background: var(--surface); border: 1px solid var(--line-mid); border-radius: 16px;
      padding: clamp(14px, 2.4vw, 20px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.oc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.oc__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc__card { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--type); overflow-wrap: anywhere; }
.oc__card a { color: inherit; }
.oc__at { font-weight: 400; color: var(--type-mid); }
.oc__issuer { font-size: 12px; color: var(--type-muted); }
.oc__reward { flex: 0 1 auto; max-width: 48%; text-align: right; font-size: clamp(16px, 2.4vw, 19px); font-weight: 700;
              line-height: 1.3; color: var(--type); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.oc__tag { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--type-mid);
           border: 1px solid var(--line-high); border-radius: 999px; padding: 3px 9px; }
.oc__facts { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.oc__facts div { display: flex; gap: 6px; align-items: baseline; padding: 6px 10px; border-radius: 8px;
                 background: var(--surface-low); border: 1px solid var(--line); }
.oc__facts dt { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .08em;
                text-transform: uppercase; color: var(--type-muted); }
.oc__facts dd { margin: 0; font-size: 13.5px; color: var(--type); }
.oc__cond { font-size: 14px; line-height: 1.6; color: var(--type-mid); }
.oc__note { font-size: 13.5px; line-height: 1.6; color: var(--type-mid); padding-left: 12px; border-left: 2px solid var(--line-high); }
.oc__quote { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--surface-low); border: 1px solid var(--line);
             font-size: 14px; line-height: 1.6; color: var(--type); display: flex; flex-direction: column; gap: 4px; }
.oc__quote .mono { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--type-muted); }
.oc__src { font-size: 12px; color: var(--type-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.oc__src a { color: var(--type-mid); display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }

.prose { display: flex; flex-direction: column; gap: 12px; max-width: 72ch; }
.prose h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.prose p { font-size: 16px; line-height: 1.75; color: var(--type-mid); }
.tbl { overflow-x: auto; border: 1px solid var(--line-mid); border-radius: 12px; margin-top: 4px; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: .1em;
                text-transform: uppercase; color: var(--type-muted); background: var(--surface); }
.tbl tbody th { font-weight: 500; color: var(--type); }
.tbl td { color: var(--type-mid); font-family: 'IBM Plex Mono', monospace; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }

.xs { display: flex; flex-direction: column; gap: 12px; }
.xs h2 { font-size: clamp(20px, 3vw, 24px); font-weight: 700; letter-spacing: -.02em; }
.xs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xs li { padding: 10px 14px; border-radius: 10px; background: var(--surface-low); border: 1px solid var(--line);
         display: flex; flex-direction: column; gap: 2px; }
.xs li p { font-size: 14px; line-height: 1.6; color: var(--type-mid); }
.xs li .mono { font-size: 12px; color: var(--type-muted); }
.xs li a { color: var(--type-mid); display: inline-flex; align-items: center; min-height: 44px; }

.kids { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .kids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kid { display: flex; flex-direction: column; gap: 6px; text-decoration: none; min-height: 44px;
       transition: border-color 150ms ease, background 150ms ease; }
.kid:hover { border-color: var(--action); }
.kid__title { font-size: 17px; font-weight: 600; color: var(--type); }
.kid__title::first-letter { text-transform: uppercase; }
.kid__blurb { font-size: 14px; line-height: 1.55; color: var(--type-mid); }

.rel { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; border-top: 1px solid var(--line); }
.rel__group h3 { margin: 12px 0 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
                 letter-spacing: .14em; text-transform: uppercase; color: var(--type-muted); }
.rel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rel__chips .chip { white-space: normal; }
.datanote { font-size: 13px; line-height: 1.6; color: var(--type-muted); max-width: 80ch; }

/* ---------- the five site pages ---------- */
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.prose li { font-size: 16px; line-height: 1.7; color: var(--type-mid); padding-left: 4px; }
.prose li::marker { color: var(--type-dim); }
.prose a { color: var(--type); }
.prose--note { padding: 14px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-high); }
.prose--note p { font-size: 14.5px; line-height: 1.6; color: var(--type-mid); }
.tbl td:last-child { font-family: inherit; }
/* An address inside a sentence cannot grow to 44px without breaking the line, so it is padded out invisibly. */
.prose p a, .prose li a { display: inline-block; padding-block: 13px; margin-block: -13px; }
/* On a phone a table becomes a stack of rows, so no column is ever pushed off the screen. */
@media (max-width: 519px) {
  .tbl thead { display: none; }
  .tbl tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl th, .tbl td { display: block; padding: 2px 0; border: 0; }
}

/* signup consent: two real links, each a full tap target */
.consent-links { display: flex; justify-content: center; gap: 20px; margin-top: -6px; }
.consent-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--type-mid); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- form controls: email field and opt-in box, 26 September ---------- */
.input { width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; font: inherit; font-size: 15px;
         color: var(--type); background: var(--surface); border: 1px solid var(--line-high);
         border-radius: var(--radius); outline: 0; }
.input::placeholder { color: var(--type-dim); }
.input:focus { border-color: var(--action); }
/* An opt-in is never pre-ticked. The whole row is the target, so it clears 44px. */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer;
         font-size: 14px; line-height: 1.55; color: var(--type-mid); }
.check input { appearance: none; -webkit-appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0;
               border: 1px solid var(--line-high); border-radius: 6px; background: var(--surface); cursor: pointer; }
.check input:checked { background: var(--action); border-color: var(--action);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23F6F4EC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check input:focus-visible { outline: 2px solid var(--action-hover); outline-offset: 2px; }

/* ---- cookie notice -------------------------------------------------------
   Shown only until a choice is made, and re-openable from the footer, because
   under the DPDP Act consent has to be as easy to withdraw as it was to give.
   Marketing's draft stored the choice and never offered a way back. */
.cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--raise, #0E1613); color: var(--type, #F6F4EC);
  border-top: 1px solid var(--line, #1E2A25); font-size: 14px; line-height: 1.5; }
.cookiebar[data-open="1"] { display: flex; }
.cookiebar p { margin: 0; max-width: 66ch; }
.cookiebar a { color: var(--money, #3DDC97); }
.cookiebar__row { display: flex; gap: 10px; flex-shrink: 0; }
.cookiebar button { font: inherit; font-weight: 600; padding: 10px 18px;
  border-radius: 6px; cursor: pointer; min-height: 44px; }
.cookiebar .is-no { background: transparent; color: var(--type, #F6F4EC);
  border: 1px solid var(--line-strong, #33443D); }
.cookiebar .is-yes { background: var(--action, #0E7A4E); color: #F6F4EC; border: none; }
.cookiebar .is-no:hover { border-color: var(--type, #F6F4EC); }
.cookiebar .is-yes:hover { background: var(--action-hover, #12935E); }
.cookiebar button:focus-visible { outline: 2px solid var(--money, #3DDC97); outline-offset: 2px; }
@media (max-width: 640px) {
  .cookiebar { flex-direction: column; align-items: stretch; }
  .cookiebar__row { justify-content: stretch; }
  .cookiebar__row button { flex: 1; }
}