/* KaunsaCard - The Thread, restyled as a modern product. 22 Sep 2026.
   Visual system: cool grey ground, white surfaces, soft elevation,
   Inter throughout (25 Sep: Space Grotesk and JetBrains Mono retired - see the
   type section at the end).
   Violet is the accent and the live step. Emerald is money gained and a
   step behind you. Red is money lost. The answer panel is the darkest
   thing on the screen - the one moment the product goes dark.
   Motion rule: things ARRIVE, they never pop. Money never moves faster
   than you can read it. */

:root {
  --ground: #F7F8FA;
  --surface: #FFFFFF;
  --raise: #F2F4F7;
  --line: #E4E7EC;
  /* The border a bordered thing takes on hover. It was the same raw hex in six
     places and had no name, so a new page copying the look also copied a rule
     violation. Named here so there is one to reach for. */
  --line-hover: #C8CDD6;
  --deep: #17181D;
  --body: #101828;
  --dim: #475467;
  --faint: #667085;
  --accent: #635BFF;
  --accent-deep: #5148E5;
  --accent-tint: rgba(99, 91, 255, .09);
  --mint: #059669;
  --mint-tint: rgba(5, 150, 105, .1);
  --air: #F1F2F6;
  --air-line: #DCDEE6;
  --air-ink: #475467;

  --ink: #0F1115;
  --ink-2: #171A21;
  --glow: rgba(99, 91, 255, .12);
  --clay: #D92D20;
  --spine: #D0D5DD;
  --night: #1E1B34;
  --trip-dim: #A9A3E8;   /* the muted label on the dark trip card */

  /* One face: Inter for headlines, text and figures. */
  --display: 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  /* figures use Inter with tabular digits (see the type section at the end);
     the name stays so every rule that set a figure keeps working */
  --mono: 'Inter', system-ui, sans-serif;

  /* warnings and exclusions carry meaning through a left rule, never a fill */
  --excl-bg: #FFFFFF; --excl-line: #F3C4BD;
  --warn-bg: #FFFFFF; --warn-line: #F3C4BD; --warn-ink: #B42318;
  --cash-bg: #FFFFFF; --cash-line: #A6E1C8;
  --hover: #F9FAFB;
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px -4px rgba(16, 24, 40, .12);
  --shadow-lg: 0 12px 28px -10px rgba(16, 24, 40, .18);

  /* inside the ink panel */
  --ans-pos: #4ADE80; --ans-eyebrow: #A5A0F5; --ans-neg: #F87171;
  --ans-dim: #98A1B2; --ans-strong: #F2F4F7; --ans-faint: #858FA3;
  --ans-rule: rgba(255,255,255,.08); --ans-btn: rgba(255,255,255,.16);
  --ans-solid: #fff; --ans-solid-ink: #0F1115;
  --cap-ink: #F2C473; --cap-bg: rgba(242,196,115,.1); --cap-line: rgba(242,196,115,.32);
  --trip-from: #2B2560; --trip-to: #141226;

  /* Corners: modern, still architectural. Circles are reserved for step nodes
     and status dots, where roundness carries meaning. */
  --r-lg: 6px;   /* panels, the answer (was 12px - squared off 26 Sep 2026) */
  /* ---- TYPE SCALE ----------------------------------------------------
     Eight rungs, each with a job. Before this the product rendered text at
     eighteen different sizes, including half-steps a pixel apart - `note` at
     12.5 and `gate-free` at 12 doing the same job, `sub` at 13.5 in one place
     and 14.5 in another. Invisible individually, and collectively why the
     pages read as slightly uneven. Pick a rung by ROLE, never by eye. */
  --t-micro: 11.5px;   /* mono eyebrows, unit labels, hints */
  --t-xs:    12px;   /* sub-values under a number, captions */
  --t-sm:    13px;   /* notes, row meta, chips, source lines */
  --t-base:    14.5px;   /* body copy, row names, value cells */
  --t-lead:    15.5px;   /* emphasised body, gate headline */
  --t-h3:      18px;   /* section heading inside a page */
  --t-h2:      22px;   /* block heading */
  --t-display: clamp(24px, 2.2vw, 28px);  /* a tool's page headline */
  --t-stat:    26px;   /* one large figure alone: a balance, a trip's worth */
  --r-md: 4px;   /* inputs, buttons */
  --r-sm: 3px;   /* chips, small marks */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
  --t: 560ms;

  --railh: 58px;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--ground); color: var(--body); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums }
button { font-family: inherit; cursor: pointer }
::selection { background: var(--accent-tint) }
.rise {
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), filter var(--t) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.rise.pre { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: none }
@media (prefers-reduced-motion: reduce) {
  :root { --t: 1ms }
  .rise { filter: none; transform: none }
  html { scroll-behavior: auto }
}
/* ================= RAIL ================= */
.rail {
  position: sticky; top: 0; z-index: 40; height: var(--railh);
  display: flex; align-items: center; gap: 16px; padding: 0 28px;
  background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 300ms linear;
}
.rail.stuck { border-bottom-color: var(--line) }
.logo { font-family: var(--display); font-size: var(--t-h3); font-weight: 700; letter-spacing: -.02em; color: var(--body); text-decoration: none }
.logo i { color: var(--accent); font-style: normal; display: inline-block }
.logo.ask i { animation: tilt 2.4s var(--ease-soft) }
@keyframes tilt {
  0%,100% { transform: rotate(0) } 12% { transform: rotate(-16deg) translateY(-1px) }
  26% { transform: rotate(10deg) } 38% { transform: rotate(0) }
}
.rail .grow { flex: 1 }
.railcards { display: flex }
.railcards .m {
  width: 18px; height: 18px; border-radius: 4px; margin-left: -7px;
  border: 2px solid var(--ground); box-shadow: var(--shadow-soft);
  animation: dealIn 520ms var(--ease-out) backwards;
}
.railcards .m:first-child { margin-left: 0 }
@keyframes dealIn { from { opacity: 0; transform: translateY(-7px) rotate(-8deg) scale(.8) } }
.railpts { font-family: var(--mono); font-size: var(--t-sm); color: var(--dim); text-decoration: none }
.railpts:hover { color: var(--body) }
.railpts span { color: var(--faint); font-size: var(--t-xs) }
.railbtn {
  border: 1px solid var(--line); background: var(--surface); color: var(--dim);
  border-radius: var(--r-md); padding: 7px 14px; font-size: var(--t-sm); font-weight: 600;
  box-shadow: var(--shadow-soft); transition: all 200ms var(--ease-out);
}
.railbtn:hover { border-color: var(--line-hover); color: var(--body) }
.railbtn.go { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(99,91,255,.35) }
/* ================= SHELL: stepper + stage ================= */
.shell {
  max-width: 1040px; margin: 0 auto; padding: 30px 28px 120px;
}
/* A page registered with `wide: true` (a console of tables, not prose) gets
   more measure. Everything inside still follows the same primitives. */
body.page-wide .shell, body.page-wide .foot { max-width: 1320px }
/* --- the thread, a top stepper --- */
.spine {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 0 6px; margin-bottom: 32px;
}
.spine::before {
  content: ''; position: absolute; left: 15px; right: 15px; top: 15px; height: 2px;
  background: var(--spine); border-radius: 2px;
  transform-origin: left; animation: drawSpine 1000ms var(--ease-soft) 200ms backwards;
}
@keyframes drawSpine { from { transform: scaleX(0) } }
.spine .done-run {
  position: absolute; left: 15px; top: 15px; height: 2px; border-radius: 2px;
  width: var(--done, 0px);
  background: linear-gradient(90deg, var(--accent), var(--mint));
  transition: width 900ms var(--ease-soft);
}
.sstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; cursor: default; min-width: 0 }
.sstep.can { cursor: pointer }
.snode {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: var(--t-sm);
  background: var(--ground); border: 2px solid var(--spine); color: var(--faint);
  transition: all 460ms var(--ease-out);
}
.sstep.live .snode {
  background: var(--surface); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 4px var(--glow);
}
.sstep.live .snode::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; animation: pulse 3.4s var(--ease-out) infinite;
}
@keyframes pulse { 0% { opacity: .5; transform: scale(1) } 40%,100% { opacity: 0; transform: scale(1.75) } }
.sstep.done .snode { background: var(--accent); border-color: var(--accent); color: #fff }
.sstep.done .snode .n, .sstep.live .snode svg, .sstep .snode svg { display: none }
.sstep.done .snode svg { display: block; width: 15px; height: 15px }
.snode svg path {
  fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; animation: tick 460ms var(--ease-out) 120ms forwards;
}
@keyframes tick { to { stroke-dashoffset: 0 } }
.sstep h4 .sm { display: none }
.stxt { margin-top: 9px }
.sstep h4 {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; letter-spacing: -.005em;
  color: var(--faint); transition: color 400ms var(--ease-out); white-space: nowrap;
}
.sstep.live h4, .sstep.done h4 { color: var(--body) }
.sstep p { font-size: var(--t-xs); color: var(--faint); margin-top: 3px; line-height: 1.45; max-width: 210px }
.sstep .tag {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--mint); margin-top: 4px; display: block;
}
.sstep.can:hover h4 { color: var(--accent) }
/* ================= STAGE: one view at a time ================= */
.stage { position: relative; min-height: 420px }
.view { transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-out), filter 340ms var(--ease-out) }
.view.out { opacity: 0; transform: translateX(-18px); filter: blur(5px); pointer-events: none }
.view.pre { opacity: 0; transform: translateX(22px); filter: blur(5px) }
.vhead { margin-bottom: 22px }
/* A TOOL's header. The four-step thread earns a display headline; a calculator
   does not, and a 44px title over three lines of preamble pushed the control
   the reader came for most of the way down the first screen. */
.vhead.vhead-tool { margin-bottom: 14px }
.vhead.vhead-tool h1 { font-size: clamp(23px, 2.2vw, 29px) }
.vhead.vhead-tool .sub { margin-top: 6px; font-size: var(--t-base); max-width: 72ch }
.vhead .eyebrow {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 500;
}
.vhead h1 {
  font-family: var(--display); font-size: clamp(28px, 3.5vw, 40px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; margin-top: 10px;
}
/* the accent word is plain now: the type section at the end clears its colour */
.vhead h1 em { font-style: normal; color: var(--accent) }
.vhead .sub { margin-top: 11px; color: var(--dim); font-size: var(--t-base); line-height: 1.55; max-width: 62ch }
/* ================= CARD SURFACE ================= */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.panel.lit { border-color: var(--accent); border-left: 3px solid var(--accent) }
.panel-b { padding: 22px 24px }
/* The compact surface. A control strip is not a content card, and two pages
   had each invented the same tighter padding privately. One name, so a third
   page does not invent a third value. */
.panel-b.tight { padding: 16px 18px }
/* ================= card chips ================= */
.chips { display: flex; flex-wrap: wrap; gap: 7px }
.chip {
  /* a <button> centres its text; a chip whose label wraps to two lines then
     goes ragged in the middle of a left-aligned list */
  display: inline-flex; align-items: center; gap: 7px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 11px 6px 7px;
  font-size: var(--t-sm); font-weight: 500; background: var(--surface); color: var(--body);
  box-shadow: var(--shadow-soft);
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out),
              border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.chip:hover { transform: translateY(-1px); border-color: var(--line-hover) }
.chip:active { transform: translateY(0) scale(.97) }
.chip.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep) }
.chip .m { width: 15px; height: 15px; border-radius: 3px; flex: none }
.chip .x { color: var(--faint); font-size: var(--t-sm); line-height: 1 }
.chip.on .x { color: var(--accent) }
.m-hdfc { background: linear-gradient(135deg,#1B3A6B,#0E2246) }
.m-axis { background: linear-gradient(135deg,#8C2242,#4A1024) }
.m-sbi  { background: linear-gradient(135deg,#1E5AA8,#123A6D) }
.m-amex { background: linear-gradient(135deg,#8E9AA8,#5C6875) }
.m-hsbc { background: linear-gradient(135deg,#C8102E,#7A0A1C) }
.m-icici{ background: linear-gradient(135deg,#B45309,#6B3208) }
.m-idfc { background: linear-gradient(135deg,#7A1F3D,#3D0F1E) }
.m-kotak{ background: linear-gradient(135deg,#C8102E,#8C0A20) }
.m-rbl  { background: linear-gradient(135deg,#2D2A6E,#14123A) }
.m-sc   { background: linear-gradient(135deg,#0F7B6C,#064239) }
.m-au   { background: linear-gradient(135deg,#5B2D8E,#2E1749) }
.m-yes  { background: linear-gradient(135deg,#1B4EA0,#0D2750) }
.m-indus{ background: linear-gradient(135deg,#8A1538,#4A0B1E) }
.m-fed  { background: linear-gradient(135deg,#1A7A5E,#0C3B2D) }
.m-bob  { background: linear-gradient(135deg,#E8632A,#8C3410) }
.m-one  { background: linear-gradient(135deg,#2B2B2B,#000) }
.m-none { background: var(--line) }
/* Bank logos. One rule for every bank mark on the site (.m + the bank class
   from BANKCLS): where we bundle the bank's own mark it replaces the colour
   swatch - on white, a hairline border, the logo contained with a little air -
   at every size (15px chips, 21-28px rows, the 30x20 wallet card). !important
   because some marks carry the card's art as an inline gradient; the bank's
   logo says more than the card's colour, and the card's name is always beside
   it. Every issuing bank now has a logo (or, for Indian Bank, its initials). */
.m.m-hdfc, .m.m-axis, .m.m-sbi, .m.m-amex, .m.m-hsbc, .m.m-icici, .m.m-kotak, .m.m-au, .m.m-yes, .m.m-indus, .m.m-idfc, .m.m-rbl, .m.m-sc, .m.m-fed, .m.m-bob, .m.m-one, .m.m-uni, .m.m-cub, .m.m-pnb, .m.m-utkarsh, .m.m-csb, .m.m-dhan, .m.m-canara, .m.m-union, .m.m-idbi {
  background-color: #fff !important; background-repeat: no-repeat !important; background-position: center !important;
  background-size: 76% auto !important; box-shadow: inset 0 0 0 1px var(--line) !important;
}
.m.m-hdfc  { background-image: url(logos/hdfc_rp.png) !important }
.m.m-axis  { background-image: url(logos/axis_edge_std.png) !important }
.m.m-sbi   { background-image: url(logos/sbi_travel_credits.png) !important; background-size: 175% auto !important; background-position: 50% 14% !important }
.m.m-amex  { background-image: url(logos/amex_mr.png) !important; background-size: cover !important }
.m.m-hsbc  { background-image: url(logos/hsbc_travelone.png) !important }
.m.m-icici { background-image: url(logos/icici_rewards_std.png) !important }
.m.m-kotak { background-image: url(logos/kotak_air_miles.png) !important }
.m.m-au    { background-image: url(logos/au_rewardz.png) !important }
.m.m-yes   { background-image: url(logos/yes_rewardz.png) !important }
.m.m-indus { background-image: url(logos/indusind_rp_legend.png) !important; background-size: cover !important }
/* 5 Oct 2026: the rest of the issuing banks (engine/scripts/fetch-logos.mjs bank_*) */
.m.m-idfc    { background-image: url(logos/bank_idfc.png) !important }
.m.m-rbl     { background-image: url(logos/bank_rbl.png) !important }
.m.m-sc      { background-image: url(logos/bank_sc.png) !important }
.m.m-fed     { background-image: url(logos/bank_fed.png) !important }
.m.m-bob     { background-image: url(logos/bank_bob.png) !important }
.m.m-one     { background-image: url(logos/bank_one.png) !important }
.m.m-uni     { background-image: url(logos/bank_uni.png) !important }
.m.m-cub     { background-image: url(logos/bank_cub.png) !important }
.m.m-pnb     { background-image: url(logos/bank_pnb.png) !important }
.m.m-utkarsh { background-image: url(logos/bank_utkarsh.png) !important }
.m.m-csb     { background-image: url(logos/bank_csb.png) !important }
.m.m-dhan    { background-image: url(logos/bank_dhan.png) !important }
.m.m-canara  { background-image: url(logos/bank_canara.png) !important }
.m.m-union   { background-image: url(logos/bank_union.png) !important }
.m.m-idbi    { background-image: url(logos/bank_idbi.png) !important }
/* Indian Bank publishes no usable icon: its initials on its own blue, never a bare square */
.m.m-indian { background: #0b4ea2 !important; position: relative }
.m.m-indian::after { content: 'IB'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font: 700 9px/1 var(--sans, system-ui); letter-spacing: .02em }
/* on the dark answer card the white tile needs no inner hairline */
.ans .m.m-hdfc, .ans .m.m-axis, .ans .m.m-sbi, .ans .m.m-amex, .ans .m.m-hsbc, .ans .m.m-icici, .ans .m.m-kotak, .ans .m.m-au, .ans .m.m-yes, .ans .m.m-indus, .ans .m.m-idfc, .ans .m.m-rbl, .ans .m.m-sc, .ans .m.m-fed, .ans .m.m-bob, .ans .m.m-one, .ans .m.m-uni, .ans .m.m-cub, .ans .m.m-pnb, .ans .m.m-utkarsh, .ans .m.m-csb, .ans .m.m-dhan, .ans .m.m-canara, .ans .m.m-union, .ans .m.m-idbi { box-shadow: 0 0 0 1px rgba(255,255,255,.14) !important }

/* ================= BRAND MARKS ================= */
/* A programme or partner's own logo, bundled locally and served from our own
   origin - never a favicon service at render time. Anything with no bundled
   mark falls back to a monogram, tinted by kind so a long list stays
   scannable without reading every name. See KCUI.logo() in ui.js. */
.kcmark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; overflow: hidden; border-radius: var(--r-sm);
  background: var(--surface);
}
.kcmark img { width: 100%; height: 100%; object-fit: contain }
.kcmark-sm { width: 18px; height: 18px }
.kcmark-md { width: 24px; height: 24px }
.kcmark-lg { width: 32px; height: 32px }
.kcmark-xl { width: 48px; height: 48px; border-radius: var(--r-md) }
.kcmono {
  border: 1px solid var(--line); background: var(--raise); color: var(--dim);
  font-family: var(--mono); font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase;
}
.kcmono.air { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-deep) }
.kcmono.hot { background: var(--raise); border-color: var(--line); color: var(--body) }
/* A monogram is the fallback for a brand we have no logo for, so it has to be
   readable or it is worse than nothing. These were 7.5px and 9px - under this
   design's own 10px floor, and flagged by the layout audit the moment marks
   appeared in the transfer picker. Two characters still fit at these sizes. */
.kcmark-sm.kcmono { font-size: var(--t-micro); letter-spacing: -.04em }
.kcmark-md.kcmono { font-size: var(--t-micro) }
.kcmark-lg.kcmono { font-size: var(--t-sm) }
.kcmark-xl.kcmono { font-size: var(--t-lead) }
/* A mark inside a row lines up with the bank swatch it sits beside. */
.crow > .kcmark-md, .brow > .kcmark-md { margin-top: 1px }
/* ================= WALLET: cards as card faces ================= */
.wallet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px }
.wcard {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  padding: 10px 12px; box-shadow: var(--shadow-soft);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.wcard:hover { transform: translateY(-1.5px); border-color: var(--line-hover) }
.wcard.on { border-color: var(--accent); background: var(--accent-tint) }
.wcard .m { width: 28px; height: 28px; border-radius: 6px; grid-row: 1 / 3; box-shadow: 0 1px 3px rgba(16,24,40,.2) }
.wcard .wnm { font-size: var(--t-sm); font-weight: 600; color: var(--body); line-height: 1.3; padding-right: 16px }
.wcard .wbnk { font-size: var(--t-micro); color: var(--faint); font-family: var(--mono) }
.wcard .wx {
  position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--t-xs); line-height: 1;
  color: var(--faint); border: 1px solid var(--line); background: var(--surface);
}
.wcard.on .wx { color: #fff; background: var(--accent); border-color: var(--accent) }
/* ================= MONOGRAMS: programme badges ================= */
.mg {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  font-family: var(--mono); font-weight: 500; font-size: var(--t-micro); letter-spacing: .03em; text-transform: uppercase;
}
.mg.air { background: #EEF1FB; border: 1px solid #C9D3F4; color: #4457C4 }
.mg.hotel { background: #FBF2E4; border: 1px solid #EBD9B4; color: #8A6418 }
/* ================= TRANSFER ROUTES: click to open ================= */
.trow.tog { display: block; padding: 0 }
.trow.tog .tline {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; cursor: pointer;
}
.trow.tog .tline:hover { background: var(--hover) }
.trow.tog .g { font-family: var(--mono); font-size: var(--t-xs); font-weight: 600; color: var(--body);
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; background: var(--surface); white-space: nowrap; flex: none }
.trow.tog .get { font-family: var(--mono); font-weight: 500; font-size: var(--t-base); text-align: right; white-space: nowrap; flex: none }
.trow.tog .worth { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); text-align: right; white-space: nowrap; flex: none }
.trow.tog .caret { color: var(--faint); font-size: var(--t-xs); transition: transform 200ms var(--ease-out); flex: none }
.trow.tog.open .caret { transform: rotate(180deg); color: var(--accent) }
.trow.tog .bonus { color: var(--mint); font-size: var(--t-sm); font-weight: 600 }
.trow.tog .dwrap { display: none; padding: 0 20px 16px }
.trow.tog.open .dwrap { display: block }
.drawer {
  background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px;
  animation: mountIn 420ms var(--ease-out);
}
.dgrid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px }
@media (max-width: 640px) { .dgrid { grid-template-columns: 1fr } }
.dcol .dk { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px }
.mathlines { font-family: var(--mono); font-size: var(--t-sm); color: var(--dim); line-height: 1.9 }
.mathlines .eq { color: var(--body); font-weight: 500 }
.mathlines .via { font-size: var(--t-micro); color: var(--faint) }
.dres { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 9px }
.dres .big { font-family: var(--mono); font-weight: 500; font-size: var(--t-h2); color: var(--accent-deep) }
.dres .w { font-family: var(--mono); font-size: var(--t-xs); color: var(--mint) }
.steps { list-style: none; counter-reset: st }
.steps li { counter-increment: st; position: relative; padding-left: 26px; font-size: var(--t-sm); color: var(--dim); line-height: 1.55; margin-bottom: 8px }
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  color: var(--dim); display: grid; place-items: center;
}
.steps li b { color: var(--body); font-weight: 600 }
.dwarn { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; font-family: var(--mono); font-size: var(--t-micro); color: var(--faint); line-height: 1.7 }
.trow.tog .capnote { font-family: var(--mono); font-size: var(--t-micro); color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px }
@media (max-width: 640px) {
  /* Seven items on one 358px line. Wrapping alone did not help: .grow has
     min-width 0, so it shrank to about 70px and clipped "Singapore Airlines
     KrisFlyer" mid-word rather than letting anything wrap. Give the name most
     of the first line and send the numbers to a second one. */
  .trow.tog .tline { flex-wrap: wrap; row-gap: 9px; column-gap: 9px }
  /* The ratio is already under the name as text; the pill repeats it. One of
     them goes on a narrow screen, and the pill is the redundant one. */
  .trow.tog .g { display: none }
  .trow.tog .worth { flex: 1 1 100%; order: 7; text-align: left; margin-top: 2px; white-space: normal }
  .trow.tog .tline > .kcmark { order: 1 }
  .trow.tog .kindpill { order: 2 }
  .trow.tog .grow { order: 3; flex: 1 1 55%; min-width: 0 }
  .trow.tog .g { order: 4 }
  .trow.tog .get { order: 5; margin-left: auto }
  .trow.tog .caret { order: 6 }
}
/* ================= FORM ================= */
.form { display: grid; gap: 14px }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.fld { display: grid; gap: 7px }
.fld > label {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}
.inp, .sel {
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  padding: 0 15px; height: 48px; font-family: var(--sans); font-size: var(--t-lead); color: var(--body);
  width: 100%; outline: 0; appearance: none; box-shadow: var(--shadow-soft);
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.inp:hover, .sel:hover { border-color: var(--line-hover) }
.inp:focus, .sel:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow) }
.inp.money { font-family: var(--mono); font-size: var(--t-h3); font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.moneywrap {
  display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-soft); height: 48px;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.moneywrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow) }
.moneywrap .r { font-family: var(--mono); font-size: var(--t-h3); color: var(--dim); padding-left: 15px }
.moneywrap .inp { border: 0; box-shadow: none; background: transparent; height: auto; padding: 0 12px 0 5px }
.moneywrap .inp:focus { box-shadow: none }
.selwrap { position: relative }
.selwrap::after {
  content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px;
  border-right: 1.8px solid var(--faint); border-bottom: 1.8px solid var(--faint);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.sel { padding-right: 38px; cursor: pointer }
.segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.seg {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  padding: 0 10px; height: 34px; font-size: var(--t-sm); font-weight: 500; color: var(--body);
  display: flex; align-items: center; justify-content: center; transition: all 200ms var(--ease-out);
  white-space: nowrap;
}
.seg:hover { border-color: var(--line-hover) }
.seg.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-deep) }
/* International is an extra switch on top of the method - selected looks
   exactly like every other selected chip, with a tick so it reads as 'on'. */
.seg.intl.on::before { content: '\2713'; margin-right: 6px; font-weight: 600 }
/* the payment selector sits beside its label on one row */
.fld.rails { display: flex; align-items: center; gap: 14px }
.fld.rails > label { flex: none }
.fld.rails .segs { flex: 1; min-width: 0 }
@media (max-width: 640px) {
  .fld.rails { flex-direction: column; align-items: stretch; gap: 7px }
}
.btn {
  /* .btn is worn by both <button> and <a>. An anchor is inline by default, so
     its vertical padding reserves no layout space and it overlaps whatever sits
     under it (the deals row did exactly that); it also arrives underlined.
     Stating the box here means one button, whichever element carries it. */
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center; cursor: pointer;
  border: 0; border-radius: var(--r-md); background: var(--accent); color: #fff;
  padding: 15px 22px; font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(99, 91, 255, .4);
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), background 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(99,91,255,.5) }
.btn:active { transform: translateY(0) scale(.99) }
.btn[disabled] { opacity: .4; transform: none !important; cursor: default; box-shadow: none }
.btn.dark { background: var(--deep); box-shadow: var(--shadow-soft) }
.btn.dark:hover { background: #23252C }
.btn.quiet { background: var(--surface); color: var(--body); border: 1px solid var(--line); box-shadow: var(--shadow-soft) }
.btn.quiet:hover { border-color: var(--line-hover) }
.btn.wide { width: 100% }
/* ================= THE ANSWER ================= */
.ans {
  background: linear-gradient(160deg, #171A24 0%, #10121A 72%); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg); color: #fff; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ans-top { padding: 24px 28px 20px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start }
.ans-top .grow { min-width: 0 }
.ans .eyebrow {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ans-eyebrow);
}
.ans h3 {
  font-family: var(--display); font-size: clamp(23px, 2.6vw, 30px); font-weight: 700;
  letter-spacing: -.02em; margin-top: 9px; display: flex; align-items: center; gap: 12px; line-height: 1.15;
}
.ans h3 .m { width: 28px; height: 28px; border-radius: 6px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.14) }
.ans .method { font-size: var(--t-sm); color: var(--ans-dim); margin-top: 9px; line-height: 1.7; max-width: 60ch }
.ans .method b { color: var(--ans-strong); font-weight: 600 }
.ans .method .arrow { color: var(--ans-pos); font-family: var(--mono); padding: 0 7px }
.ans .method .rulechip {
  display: inline-block; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .04em;
  color: var(--ans-eyebrow); background: rgba(165,160,245,.12); border: 1px solid rgba(165,160,245,.35);
  border-radius: 5px; padding: 2px 8px; margin-left: 8px; vertical-align: 1px; white-space: nowrap;
}
.ans-fig { text-align: right; flex: none; min-width: 190px }
.ans-fig .figlabel {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ans-faint); margin-bottom: 6px;
}
.ans-fig .big {
  font-family: var(--mono); font-size: clamp(28px, 3.2vw, 36px); font-weight: 500; color: var(--ans-pos);
  letter-spacing: -.025em; display: block; line-height: 1.05;
}
.ans-fig .big.zero { color: var(--ans-dim) }
.ans-fig .big.bad { color: var(--ans-neg) }
.ans-fig .subline { display: flex; align-items: center; gap: 9px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap }
.ans-fig .pts { font-family: var(--mono); font-size: var(--t-sm); color: var(--ans-dim) }
.ans-fig .pct {
  display: inline-block; font-family: var(--mono); font-size: var(--t-xs);
  background: color-mix(in srgb, var(--ans-pos) 14%, transparent); color: var(--ans-pos); border-radius: var(--r-sm); padding: 3px 9px;
}
.ans-fig .pct.zero { background: rgba(152,161,178,.14); color: var(--ans-dim) }
/* --- the math, behind a click --- */
.mathbar {
  border-top: 1px solid var(--ans-rule); background: var(--ink-2);
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 28px; border-radius: 0; background-color: var(--ink-2);
  color: var(--ans-dim); font-size: var(--t-sm); text-align: left; border-left: 0; border-right: 0; border-bottom: 0;
  transition: color 240ms var(--ease-out), background 240ms var(--ease-out);
}
.mathbar:hover { color: var(--ans-strong) }
.mathbar .cv {
  width: 9px; height: 9px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 380ms var(--ease-out); flex: none;
}
.mathbar.open .cv { transform: rotate(-135deg) translateY(-2px) }
.mathbar .grow { flex: 1 }
.mathbar .hint { font-family: var(--mono); font-size: var(--t-micro); color: var(--ans-faint) }
.mathbox {
  background: var(--ink-2); overflow: hidden; height: 0;
  transition: height 460ms var(--ease-soft);
}
.mathbox .pad { padding: 2px 28px 20px }
.ml {
  font-family: var(--mono); font-size: var(--t-sm); color: var(--ans-faint); line-height: 2;
  display: flex; gap: 10px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: calc(min(var(--i), 10) * 70ms);
}
.mathbox.open .ml { opacity: 1; transform: none }
.ml::before { content: '\00B7'; color: var(--ans-faint) }
.ml.neg { color: #F09B8B }
.ml.tot { color: var(--ans-strong) }
.capchip {
  display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: var(--t-xs);
  color: var(--cap-ink); background: var(--cap-bg); border: 1px solid var(--cap-line);
  border-radius: var(--r-sm); padding: 7px 12px; line-height: 1.6;
}
.capchip.bite { animation: bite 900ms var(--ease-out) }
@keyframes bite {
  0% { border-color: rgba(242,196,115,.2); background: rgba(242,196,115,.06) }
  18% { border-color: rgba(242,196,115,.95); background: rgba(242,196,115,.22) }
  100% { border-color: rgba(242,196,115,.2); background: rgba(242,196,115,.06) }
}
.srcline { margin-top: 14px; font-size: var(--t-xs); color: var(--ans-faint); line-height: 1.6 }
.srcline b { color: var(--ans-dim); font-weight: 500 }
.ans-foot { display: flex; gap: 10px; padding: 17px 28px; border-top: 1px solid var(--ans-rule) }
.act {
  flex: 1; text-align: center; border-radius: var(--r-md); padding: 14px; font-size: var(--t-base);
  font-weight: 600; border: 0; transition: all 200ms var(--ease-out);
}
.act.solid { background: var(--ans-solid); color: var(--ans-solid-ink) }
.act.solid:hover { transform: translateY(-1px) }
.act.line { background: transparent; border: 1px solid var(--ans-btn); color: var(--ans-strong); font-weight: 500 }
.act.line:hover { background: rgba(255,255,255,.06); transform: translateY(-1px) }
.act[disabled] { opacity: .45; transform: none !important; cursor: default }
/* ================= THINKING ================= */
.ans-mount { margin-top: 18px }
.ans-mount:empty { display: none }
.ans-mount .ans, .ans-mount .thinking, .ans-mount .panel {
  animation: mountIn 560ms var(--ease-out);
}
@keyframes mountIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px) } }
@media (prefers-reduced-motion: reduce) { .ans-mount .ans, .ans-mount .thinking, .ans-mount .panel { animation: none } }
.thinking {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft); padding: 26px 28px; font-size: var(--t-base); color: var(--dim);
}
.bars { display: flex; gap: 3px; align-items: flex-end; height: 16px }
.bars i { width: 3px; border-radius: 1px; background: var(--accent); height: 5px; animation: scan 900ms var(--ease-soft) infinite }
.bars i:nth-child(2) { animation-delay: 90ms }
.bars i:nth-child(3) { animation-delay: 180ms }
.bars i:nth-child(4) { animation-delay: 270ms }
@keyframes scan { 0%,100% { height: 4px; opacity: .45 } 45% { height: 16px; opacity: 1 } }
/* ================= COMPARE ================= */
.compare { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft) }
.compare-h {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); padding: 15px 20px 11px; display: flex; justify-content: space-between;
  gap: 12px;
}
/* Two mono labels on a 358px line run into each other. The right-hand one is
   always the hint or the unit, so it is the one that gives way. */
@media (max-width: 640px) {
  .compare-h { padding-left: 16px; padding-right: 16px; flex-wrap: wrap; row-gap: 4px }
  .compare-h > span:last-child { flex: 1 1 100%; opacity: .75 }
}
.crow {
  display: flex; align-items: center; gap: 13px; padding: 13px 20px;
  border-top: 1px solid var(--line); font-size: var(--t-base);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out), background 200ms linear;
  transition-delay: calc(min(var(--i), 10) * 60ms);
}
.crow.pre { opacity: 0; transform: translateY(8px); transition: none }
/* Entrance animations are OPT-OUT, not opt-in: a row is visible unless
   reveal() has marked it .pre for one frame. Built the other way round, any
   row painted after the initial mount - every search, filter or repaint - kept
   opacity 0 forever, which is how the MCC detail list became a 10,000px blank
   gap with 77 real rows invisible inside it. An animation must never be the
   thing that decides whether content can be seen.

   The stagger is capped at ten steps everywhere. Uncapped, a 26-row table took
   1.6s to finish appearing and a 60-row one 3.6s - rows near the bottom read as
   missing rather than arriving. Ten steps keeps the cascade and bounds the wait. */
.crow.in { opacity: 1; transform: none }
.crow:hover { background: var(--hover) }
.crow.has-note { align-items: flex-start }
/* Matches .kcmark-md. A row may carry either a gradient swatch or a real
   logo, and at different sizes the name column shifted between rows. */
.crow .m { width: 24px; height: 24px; border-radius: 5px; flex: none }
.crow .grow { flex: 1; min-width: 0 }
.crow .nm { font-weight: 600 }
.mt { font-size: var(--t-sm); color: var(--faint); margin-top: 3px; line-height: 1.45 }
.crow .mt { font-size: var(--t-sm); color: var(--faint); margin-top: 3px; line-height: 1.45 }
/* A value cell's colour is a claim, so it has to mean one thing.
     (default)  money or a rate you GAIN            mint
     .cost      money you PAY - a fee, a markup     ink, not red: a fee is not an error
     .zero      earns nothing here                  faint
     .bad       something actually wrong            clay
     .text      a fact that is not a number         ink, and not in the number face
   Green on an annual fee, which is what this page used to do, tells the reader
   a charge is a benefit. */
.crow > div:last-child:not(.grow) { text-align: right }
.v { font-family: var(--mono); font-size: var(--t-base); color: var(--mint); flex: none; text-align: right }
.v.cost { color: var(--body) }
.v.zero { color: var(--faint) }
.v.bad { color: var(--clay) }
.v.text {
  font-family: inherit; font-size: var(--t-base); font-weight: 500; color: var(--body);
  max-width: 320px; white-space: normal;
  /* .v is flex:none because a figure should never be squeezed. A .text value
     is a name or a sentence, so it must shrink and wrap instead of overflowing
     its column - which is what it did across /compare's rewards-currency row. */
  flex: 0 1 auto; min-width: 0;
}
.vp { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); display: block; margin-top: 3px }
/* "Use this card": picks an option that is not the best to see its math and log it. */
.picklink { display: block; margin: 5px 0 0 auto; padding: 0; border: 0; background: none; font-size: var(--t-xs);
  font-weight: 600; color: var(--accent-deep); text-align: right; cursor: pointer }
.picklink:hover { text-decoration: underline }
.pickgap { margin-top: 8px; font-size: var(--t-sm); color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline }
.pickgap .picklink { display: inline; margin: 0 }
/* Inside the dark answer panel the gap line uses the panel's own tokens. */
.ans .pickgap { color: var(--ans-dim) }
.ans .pickgap b { color: var(--ans-strong); font-weight: 600 }
.ans .pickgap .picklink { color: var(--ans-eyebrow) }
.crow.off { background: var(--raise) }
.crow.off .nm { color: var(--dim) }
.crow.off .m { opacity: .4 }
/* .has-note marks a row whose left column is prose, not a label. Side by side
   with a value column on a 390px screen that prose gets about 180px and every
   sentence wraps four times (sweet spots was unreadable). On a phone the value
   leads and the prose takes the full width. Plain rows are short enough to stay
   side by side, so they are left alone. */
@media (max-width: 640px) {
  /* A value cell holding a .vp sub-line has a wide min-content (the mono fee
     string), and because a flex item will not shrink past that, the card NAME
     was the only thing left to squeeze - three lines for "HDFC Regalia Gold".
     Letting the value cell shrink puts the wrap where it belongs. */
  .crow { padding-left: 16px; padding-right: 16px; gap: 10px }
  .crow > *:last-child { min-width: 0 }
  .crow.has-note { flex-wrap: wrap; align-items: baseline; row-gap: 9px }
  /* wrap, not column: the swatch or pill and the value keep the first line
     between them, and only the prose drops to a full-width second line. A
     column would strand a 21px swatch on a row of its own. */
  .crow.has-note > .grow { flex: 1 1 100%; order: 1 }
  .crow.has-note > *:last-child { margin-left: auto }
  /* A trailing NUMBER leads the row - "12,000 points, and here is what for".
     A trailing NOTE or BUTTON is not a headline, so it follows the prose
     instead of sitting above the name it qualifies. */
  .crow.has-note > .vp,
  .crow.has-note > span:last-child { order: 2; flex: 1 1 100%; margin-left: 0; text-align: left }
}
.excl {
  font-size: var(--t-sm); color: var(--clay); background: var(--excl-bg); border: 1px solid var(--line);
  border-left: 2px solid var(--clay);
  border-radius: var(--r-sm); padding: 9px 12px; margin-top: 8px; line-height: 1.55;
}
.excl b { font-weight: 600 }
/* ================= BEYOND ================= */
.beyond { margin-top: 12px; border: 1px solid var(--air-line); background: var(--air); border-radius: var(--r-lg); padding: 18px 20px }
.beyond-h {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase;
  color: var(--air-ink); display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
}
.beyond-h .note { letter-spacing: 0; text-transform: none; font-family: var(--sans); font-size: var(--t-sm); opacity: .82 }
.brow {
  display: flex; align-items: center; gap: 13px; padding: 13px 0 0; font-size: var(--t-base);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: calc(min(var(--i), 10) * 60ms);
}
.brow.pre { opacity: 0; transform: translateY(8px); transition: none }
.brow .m { width: 24px; height: 24px; border-radius: 5px; flex: none }
.brow .grow { flex: 1; min-width: 0 }
.brow .nm { font-weight: 600 }
.brow .mt { font-size: var(--t-sm); color: var(--air-ink); opacity: .78; margin-top: 3px }
.brow .v { font-family: var(--mono); font-size: var(--t-base); color: var(--air-ink); flex: none; text-align: right }
.brow .v b { display: block; font-weight: 500 }
.brow .v span { font-size: var(--t-xs); opacity: .72 }
/* ================= POINTS / TRANSFER / TRIP ================= */
.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.tab {
  border: 0; background: none; border-radius: 0; padding: 11px 15px 12px; font-size: var(--t-base);
  font-weight: 500; color: var(--dim); transition: color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  position: relative; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--body) }
.tab.on { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 600 }
.tab .c { font-family: var(--mono); font-size: var(--t-xs); opacity: .65; margin-left: 6px }
.balgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px }
/* Add a balance: programme, points, as-of, save - one row, stacking on a phone. */
.hf-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--t-sm); color: var(--dim); margin-bottom: 12px }
.hf-h b { color: var(--body); font-size: var(--t-base) }
.hf-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: start }
/* start, not end: a password manager injects its own element after a field,
   and with bottom alignment that pushed the whole Points column up. The
   button has no label, so it drops by one label row to sit on the inputs. */
.hf-row > .btn { margin-top: calc(var(--t-micro) * 1.5 + 3px) }
.hf-row .fld { gap: 5px }
.hf-row .btn { height: 48px; padding: 0 22px }  /* the inputs are 48px - a shorter button sat off their baseline */
.hf-note { margin-top: 10px; font-size: var(--t-xs); color: var(--faint) }
.hf-err { color: var(--clay); font-weight: 600 }
@media (max-width: 720px) {
  .hf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .hf-row .fld:first-child { grid-column: 1 / -1 }
  .hf-row .btn { grid-column: 1 / -1 }
  .hf-row > .btn { margin-top: 0 }
}
/* A balance card: logo and name, what kind of points, the figure, where it came from. */
.bal-top { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 50px }  /* room for a two-line name, so numbers line up across a row */
.bal-top .kcmark { flex: none }
.bal-id { min-width: 0 }
.bal-id .pn { color: var(--body); font-weight: 600; line-height: 1.3 }
.bal-kind { display: inline-block; margin-top: 3px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint) }
.bal-how { font-size: var(--t-xs); color: var(--faint); margin-top: 4px; line-height: 1.45 }
.bal-acts { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line) }
.bal-act { border: 0; background: none; padding: 0; font-size: var(--t-xs); font-weight: 600; color: var(--accent-deep); cursor: pointer }
.bal-act:hover { text-decoration: underline }
.bal-act.arm { color: var(--surface); background: var(--clay); border-radius: 6px; padding: 4px 9px }
.bal-act.arm:hover { text-decoration: none }
.bal-share { margin-left: auto; font-size: var(--t-xs); color: var(--faint) }
/* Trips: which balances the plan is priced against, and per trip which one pays. */
.tripfund { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-decoration: none; color: inherit }
.tripfund:hover { border-color: var(--line-hover) }
.tripfund-k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); flex-basis: 100% }
.tripfund-b { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--dim) }
.tripfund-b b { color: var(--body); font-weight: 600 }
.tripfrom { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: var(--t-xs); color: var(--faint) }
.bal { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 17px 19px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column }
.bal .bal-acts { margin-top: auto; padding-top: 10px }  /* actions sit on the card's bottom edge whatever the name length */
.bal .bal-how { margin-bottom: 12px }
.hf + .panel { margin-top: 14px }  /* the empty state used to touch the form */
.bal .pn { font-size: var(--t-sm); color: var(--dim) }
.bal .pv { font-family: var(--mono); font-size: var(--t-stat); margin-top: 7px; letter-spacing: -.02em }
.bal .pw { font-family: var(--mono); font-size: var(--t-xs); color: var(--mint); margin-top: 5px }
.trow {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border-top: 1px solid var(--line); font-size: var(--t-base);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: calc(min(var(--i), 10) * 55ms);
}
.trow.pre { opacity: 0; transform: translateY(8px); transition: none }
.trow .grow { flex: 1; min-width: 0 }
.trow .nm { font-weight: 600 }
.trow .mt { font-size: var(--t-sm); color: var(--faint); margin-top: 3px; font-family: var(--mono) }
.trow .v { font-family: var(--mono); font-size: var(--t-base); text-align: right; flex: none }
.trow .v b { display: block; font-weight: 500; color: var(--body) }
.trow .v span { font-size: var(--t-xs); color: var(--faint) }
.kindpill {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase;
  border-radius: 5px; padding: 3px 7px; flex: none;
}
.kindpill.air { background: var(--accent-tint); color: var(--accent-deep) }
.kindpill.hot { background: var(--raise); color: var(--dim) }
.prog { margin-bottom: 14px }
.prog .pl { display: flex; justify-content: space-between; font-size: var(--t-base); margin-bottom: 7px; gap: 14px }
.prog .pl .r { font-family: var(--mono); font-size: var(--t-sm); color: var(--faint) }
.prog .track { height: 7px; border-radius: 2px; background: var(--raise); overflow: hidden }
.prog .fill { height: 100%; border-radius: 2px; background: var(--mint); width: 0; transition: width 950ms var(--ease-soft); transition-delay: calc(min(var(--i), 10) * 110ms) }
.prog .fill.part { background: var(--air-ink) }
.trip {
  background: linear-gradient(118deg, var(--trip-from), var(--trip-to)); border-radius: var(--r-lg); color: #fff;
  padding: 24px 26px; display: flex; gap: 22px; align-items: flex-end;
  position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.trip::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.1) 50%, transparent 62%);
  transform: translateX(-120%);
}
.trip.in::after { animation: sweep 1500ms var(--ease-soft) 300ms }
@keyframes sweep { to { transform: translateX(120%) } }
.trip .grow { flex: 1 }
.trip .eyebrow { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: #A9A3E8 }
.trip h4 { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 11px }
.trip .sub { font-family: var(--mono); font-size: var(--t-sm); color: #A9A3E8; margin-top: 10px }
.trip .worth { font-family: var(--mono); font-size: var(--t-stat); text-align: right; flex: none }
.trip .worth span { display: block; font-size: var(--t-micro); color: var(--trip-dim); letter-spacing: .08em; margin-bottom: 6px }
/* ================= LEDGER ================= */
.lrow {
  display: flex; align-items: center; gap: 14px; padding: 13px 20px;
  border-top: 1px solid var(--line); font-size: var(--t-base);
}
.lrow .grow { flex: 1 }
.lrow .mt { font-size: var(--t-sm); color: var(--faint); margin-top: 3px }
.lrow .g { font-family: var(--mono); font-size: var(--t-sm); color: var(--mint) }
/* a cashback spend earns rupees, not points: its points cell is not a gain */
.lrow .g.zero { color: var(--faint) }
.empty { text-align: center; padding: 46px 24px; color: var(--faint); font-size: var(--t-base); line-height: 1.7 }
.empty b { color: var(--dim); display: block; font-size: var(--t-lead); margin-bottom: 7px; font-weight: 600 }
.note { font-size: var(--t-sm); color: var(--faint); line-height: 1.65; margin-top: 14px }
.note b { color: var(--dim); font-weight: 600 }
/* ================= FOOT ================= */
.foot {
  position: relative; z-index: 1;
  max-width: 1040px; margin: 0 auto; padding: 0 28px 70px;
  font-size: var(--t-sm); color: var(--faint); line-height: 1.75;
}
.foot b { color: var(--dim); font-weight: 600 }
/* ================= PHONE ================= */
@media (max-width: 900px) {
  .shell { padding: 20px 16px 100px }
  .foot { padding: 0 16px 60px }
  .rail { padding: 0 16px; gap: 10px }
  /* the stepper tightens */
  .spine { margin-bottom: 22px; gap: 2px; padding: 0 2px }
  .sstep { padding: 0 4px }
  .sstep p, .sstep .tag, .sstep h4 .lg { display: none }
  .sstep h4 .sm { display: inline }
  .spine.intro .sstep p { display: block; font-size: var(--t-micro); line-height: 1.35; max-width: none }
  .sstep h4 { font-size: var(--t-xs) }
  /* the pulse ring smears across an inline stepper - drop it here */
  .sstep.live .snode::after { display: none }
  .frow { grid-template-columns: 1fr }
  .segs { grid-template-columns: 1fr 1fr }
  .ans-top { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px }
  .ans-fig { text-align: left; min-width: 0 }
  .ans-fig .subline { justify-content: flex-start }
  .mathbar, .mathbox .pad, .ans-foot { padding-left: 22px; padding-right: 22px }
  .ans-foot { flex-wrap: wrap }
  .act { flex: 1 1 100% }
  .trip { flex-direction: column; align-items: flex-start; gap: 14px }
  .trip .worth { text-align: left }
}
/* ================= COMBOBOX: one field for merchant or category ================= */
.combo { position: relative }
.combo .inp { padding-right: 40px }
.combox {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 0; background: var(--raise); color: var(--dim);
  border-radius: 50%; font-size: var(--t-base); line-height: 1; display: grid; place-items: center;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.combox:hover { background: var(--line); color: var(--body) }
.combox[hidden] { display: none }
.combolist {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 7px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); overflow: hidden auto; max-height: 306px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.combolist.open { opacity: 1; transform: none; pointer-events: auto }
.comboitem {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 16px; border: 0; background: none; font-size: var(--t-base); color: var(--body);
  border-bottom: 1px solid var(--line);
}
.comboitem:last-child { border-bottom: 0 }
.comboitem:hover, .comboitem.sel { background: var(--accent-tint) }
.comboitem .grow { flex: 1 }
.comboitem .hint { font-family: var(--mono); font-size: var(--t-micro); color: var(--faint) }
.comboitem.empty { color: var(--faint); font-size: var(--t-sm); cursor: default }
/* display:flex above beats the hidden attribute, so filtering hid nothing -
   every search box built on tfCombo showed its whole list. */
.comboitem[hidden] { display: none }
.warn {
  margin-top: 4px; font-size: var(--t-sm); line-height: 1.6; color: var(--warn-ink);
  background: var(--warn-bg); border: 0; border-left: 2px solid var(--warn-ink);
  border-radius: 0; padding: 10px 14px;
}
.warn b { font-weight: 600 }
/* ================= RETURN SIGNALS: one line until you want more ================= */
.signals {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow-soft);
}
.sigbar {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 12px 16px; border: 0; background: none; font-size: var(--t-base); color: var(--body);
}
.sigbar:hover { background: var(--hover) }
.sigbar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sigbar b { font-weight: 600 }
.sigbar .more {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--faint);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 7px; flex: none;
}
.sigbar .cv, .discbar .cv, .morebar .cv {
  width: 8px; height: 8px; flex: none;
  border-right: 1.7px solid var(--faint); border-bottom: 1.7px solid var(--faint);
  transform: rotate(45deg) translateY(-2px); transition: transform 380ms var(--ease-out);
}
.signals.open .sigbar .cv { transform: rotate(-135deg) translateY(-2px) }
.sigbar .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint) }
.sigbar .dot.hot { background: var(--accent); box-shadow: 0 0 0 3px var(--glow) }
.sigbar .dot.warm { background: #D9A13A }
.sigbar .dot.good { background: var(--mint) }
.siglist { max-height: 0; overflow: hidden; transition: max-height 480ms var(--ease-soft) }
.signals.open .siglist { max-height: 620px }
.sig {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px;
  border-top: 1px solid var(--line);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: calc(min(var(--i), 10) * 60ms);
}
.sig.pre { opacity: 0; transform: translateY(8px); transition: none }
.sig .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--faint) }
.sig.hot .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--glow) }
.sig.warm .dot { background: #D9A13A }
.sig.good .dot { background: var(--mint) }
.sig .grow { flex: 1; min-width: 0 }
.sig .st { font-size: var(--t-base); font-weight: 600; letter-spacing: -.005em }
.sig .sd { font-size: var(--t-sm); color: var(--dim); margin-top: 4px; line-height: 1.55 }
.sigact { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end }
.btn.tiny { padding: 6px 11px; font-size: var(--t-xs); font-weight: 600; border-radius: var(--r-sm) }
/* ================= DISCLOSURE: math, other cards, cards you lack ================= */
.disc {
  margin-top: 10px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft);
}
.disc.air { border-style: solid; border-color: var(--air-line); background: var(--air) }
.discbar {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 14px 18px; border: 0; background: none; font-size: var(--t-base); color: var(--body);
}
.discbar:hover { background: var(--hover) }
.disc.air .discbar { color: var(--body) }
.disc.air .discbar:hover { background: rgba(255,255,255,.4) }
.disc.open > .discbar .cv { transform: rotate(-135deg) translateY(-2px) }
.discbar .grow { flex: 1; font-weight: 600 }
.discbar .hint { font-family: var(--mono); font-size: var(--t-micro); color: var(--faint) }
.disc.air .discbar .hint { color: var(--air-ink) }
.discbox { height: 0; overflow: hidden; transition: height 460ms var(--ease-soft) }
.discbox .pad { padding: 0 0 4px }
.disc.air .discbox .pad { padding: 0 18px 16px }
.compare.bare, .beyond.bare {
  margin: 0; border: 0; border-radius: 0; background: none; padding: 0;
}
.compare.bare .crow:first-child { border-top: 1px solid var(--line) }
/* ================= SEE ALL ================= */
.morebar {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 13px; border: 0; border-top: 1px solid var(--line); background: var(--raise);
  font-size: var(--t-sm); color: var(--dim); font-weight: 600;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.morebar:hover { background: var(--line); color: var(--body) }
.morebar.solo { border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 14px; background: var(--surface) }
.morebar .cv.r { transform: rotate(-45deg) translateX(-1px) }
.bal.cash { border-color: var(--cash-line); background: var(--cash-bg); border-left: 3px solid var(--mint) }
.bal.cash .pv { color: var(--mint) }
@media (max-width: 900px) {
  .sig { flex-wrap: wrap }
  .sigact { width: 100%; justify-content: flex-start; margin-top: 4px }
  .signals.open .siglist { max-height: 1200px }
}
/* ================= TYPE SWITCHER (prototype only) ================= */
.typeswitch { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface) }
.typeswitch button {
  border: 0; background: var(--surface); color: var(--faint);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .05em; padding: 6px 9px;
  border-right: 1px solid var(--line); transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.typeswitch button:last-child { border-right: 0 }
.typeswitch button:hover { color: var(--body) }
.typeswitch button.on { background: var(--accent-tint); color: var(--accent-deep) }
@media (max-width: 900px) { .typeswitch { display: none } }
/* the bar summarises when open, so it stops repeating the first row verbatim */
.sigbar .shown { display: none }
.signals.open .sigbar .shut { display: none }
.signals.open .sigbar .shown { display: inline; color: var(--dim); font-weight: 400 }
/* ================= DIRECT NAV ================= */
.railnav { display: flex; gap: 2px; margin-left: 8px }
.railnav a {
  font-size: var(--t-sm); font-weight: 500; color: var(--dim); text-decoration: none;
  padding: 6px 11px; border-radius: var(--r-md);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.railnav a:hover { background: var(--raise); color: var(--body) }
.railnav a.on { color: var(--body) }
/* The current page is underlined, sitting on the rail's bottom edge like a
   tab - the tinted pill read as a button, not as "you are here". The same
   mark goes on a group (Cards / Travel / Earn) when one of its pages is open. */
.railnav > a, .navgroup-b { position: relative }
.railnav > a.on::after, .navgroup-b.on::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: calc((var(--railh) - 30px) / -2);
  height: 2px; border-radius: 2px 2px 0 0; background: var(--accent);
}
/* Inside a dropdown, and in the phone sheet, the item itself is underlined. */
.navgroup-p a.on, .rail.navopen .railnav a.on {
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.rail.navopen .railnav > a.on::after, .rail.navopen .navgroup-b.on::after { content: none }
.crow .ok {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .05em; text-transform: uppercase;
  color: var(--mint); background: var(--mint-tint); border: 1px solid var(--cash-line);
  border-radius: 5px; padding: 2px 6px; margin-left: 7px; vertical-align: middle;
}
/* Below 900px the rail has no room for the nav, so it becomes a sheet behind
   a Menu button. It used to be display:none with nothing in its place - a
   phone could not reach any surface except by typing its address. */
.navtoggle { display: none }
.navcount { margin-left: 6px; padding: 1px 6px; border-radius: var(--r-sm); font-size: var(--t-micro);
  background: var(--raise); color: var(--dim) }
.railnav a.on .navcount { background: var(--surface); color: var(--accent-deep) }
/* My stack: one button on the right with the other things that are yours
   (points, account). Swatches say "cards", the count says how many. */
.railcards { text-decoration: none; align-items: center; gap: 8px; padding: 5px 11px 5px 8px;
  border-radius: var(--r-md); color: var(--dim); font-size: var(--t-sm); font-weight: 500;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out) }
.railcards:hover { background: var(--raise); color: var(--body) }
.railcards.on { background: var(--accent-tint); color: var(--accent-deep) }
.railsw { display: inline-flex }
.railsw:empty { display: none }
.railstack-t { white-space: nowrap }
.railnav a.navphone { display: none }
.rail.navopen .railnav a.navphone { display: block }
@media (max-width: 900px) {
  .navtoggle { display: inline-block }
  .railnav { display: none }
  .rail.navopen .railnav {
    display: flex; flex-direction: column; gap: 2px; margin: 0;
    position: absolute; top: var(--railh); left: 0; right: 0;
    /* never the whole screen (28 Sep 2026: on short phones the sheet covered
       everything and could not be dismissed) - a strip of the page always
       shows below, dimmed, and tapping it closes the sheet */
    max-height: 75vh; max-height: 75dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 16px 16px; background: var(--surface);
    border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px -18px rgba(11,12,14,.45);
  }
  /* the dimmed page under the open sheet - its own element (the rail's
     backdrop-filter would trap a fixed child inside the rail) */
  .navscrim { position: fixed; inset: 0; background: rgba(11,12,14,.38); z-index: 39 }
  html.navlock, html.navlock body { overflow: hidden }
  .rail.navopen .railnav a { padding: 10px 11px }
  .rail.navopen .navgroup-b { padding: 12px 11px 4px; font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .09em; text-transform: uppercase; color: var(--faint); pointer-events: none }
  .rail.navopen .navgroup-b .navcv { display: none }
  .rail.navopen .navgroup-p a { padding-left: 11px }
}
.navscrim { display: none }
@media (max-width: 900px) { html.navlock .navscrim { display: block } }
.sheetreset { display: none }
/* Phone: logo, Menu, account and Start over did not fit once a balance
   appeared, and the page scrolled sideways. The balance and Start over move
   out of the rail; Start over lives at the foot of the Menu sheet. */
@media (max-width: 640px) {
  .railpts, #resetBtn { display: none !important }
  .rail.navopen .sheetreset { display: block; align-self: flex-start; margin-top: 10px }
}
/* Once a balance appears in the rail, the logo and the buttons have too little
   room left and both break mid-word ("kaunsacard / ?", "Start / over"). Tighten
   the gutter and forbid the wrap rather than let the header fold. */
@media (max-width: 640px) {
  .rail { padding: 0 16px; gap: 10px }
  .logo, .railbtn, .railpts { white-space: nowrap }
  .railpts { font-size: var(--t-sm) }
  /* The stacked card swatches are decoration; the balance beside them is not.
     On a phone the swatches are what gets dropped, so "Start over" still fits. */
  .railcards { display: none }
}
/* ================= TAB BODY =================
   A panel change gets a short opacity fade and nothing else. No translate, no
   blur, no scroll: the heading and the tabs must not move under the cursor. */
.tabbody { transition: opacity 150ms linear }
.tabbody.fading { opacity: 0 }
@media (prefers-reduced-motion: reduce) { .tabbody { transition: none } }

/* Start over, armed: the second click is the destructive one */
/* ================= ARMED: a destructive action's second click =================
   Promoted from .railbtn.arm on 22 Sep once a second surface (the admin panel)
   needed the same thing. One pattern, so "about to do something irreversible"
   looks identical wherever it appears, and a change here moves every surface.
   Native confirm() is deliberately not used anywhere: it blocks the page and
   reads as a browser warning rather than as part of the product. */
.arm, .railbtn.arm, .btn.arm {
  background: var(--clay); border-color: var(--clay); color: var(--surface);
}
.btn.quiet.arm { background: var(--clay); color: var(--surface) }

/* ================= CONFIRMED: something worked =================
   The stylesheet had .warn for bad news and nothing for good. Both the account
   page and the admin panel needed to say "that worked", so it lives here
   rather than twice. Mirrors .warn exactly, in mint. */
.ok {
  margin-top: 4px; font-size: var(--t-sm); line-height: 1.6; color: var(--mint);
  background: var(--mint-tint); border: 0; border-left: 2px solid var(--mint);
  border-radius: 0; padding: 10px 14px;
}
.ok b { font-weight: 600 }

/* ================= PAGE STRUCTURE =================
   Cool ground, white surfaces, hairline separation, soft elevation where it
   earns its keep. */

.rail { border-bottom: 1px solid var(--line) }
.rail.stuck { border-bottom-color: var(--line) }

/* the spine is a top stepper now; the stage is the page */
@media (min-width: 901px) {
  .vhead h1 { font-size: clamp(30px, 3.8vw, 44px) }
  .vhead.vhead-tool h1 { font-size: clamp(23px, 2.2vw, 29px) }
}

/* section heads read as printed heads: label, headline, rule to the margin */
.vhead { border-bottom: 1px solid var(--line); padding-bottom: 20px }

/* the answer panel is the darkest thing on the screen */
.ans { position: relative }

/* the live node keeps the only halo on the page, and it is tight */
.sstep.live .snode { box-shadow: 0 0 0 4px var(--glow) }

@media (max-width: 900px) {
  body { background-size: 26px 26px }
  .vhead { padding-bottom: 16px }
}

/* ================= ACCESS GATE =================
   Never replaces a page. Sits under real, working content so a visitor always
   sees what the thing does before being asked to pay for it. */
.gate {
  margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 20px 22px;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent, #635BFF) 4%, transparent), transparent 70px);
}
.gate-h {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent, #635BFF);
}
.gate-lock {
  width: 11px; height: 11px; border-radius: 2px; flex: none;
  border: 1.6px solid currentColor; border-top-width: 5px; box-sizing: border-box;
}
.gate-count {
  margin-left: auto; color: var(--faint); letter-spacing: .06em; text-transform: none;
}
.gate-what { font-size: var(--t-lead); font-weight: 500; margin-top: 11px; letter-spacing: -.01em }
.gate-act { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px }
.gate-free {
  font-size: var(--t-sm); color: var(--faint); line-height: 1.6; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .gate-act .btn { flex: 1 1 100% } }

/* a paid surface is shown in the rail with a padlock, never hidden - you
   cannot choose to want something you do not know exists */
.railnav a.locked { color: var(--faint) }
.railnav a .navlock {
  display: inline-block; width: 8px; height: 7px; margin-left: 5px;
  border: 1.4px solid currentColor; border-radius: 1px;
  border-top-width: 4px; box-sizing: border-box; opacity: .75;
  vertical-align: middle;
}

/* the account area sits apart from the content surfaces */
.railacct { display: flex; gap: 2px; margin-left: 6px }
.railacct a {
  font-size: var(--t-sm); color: var(--dim); text-decoration: none;
  padding: 6px 11px; border-radius: var(--r-sm); max-width: 190px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.railacct a:hover { background: var(--raise); color: var(--body) }
.railacct a.on { background: var(--deep); color: var(--surface) }
@media (max-width: 900px) { .railacct a { max-width: 110px } }

/* ================= NAV GROUP =================
   Eleven flat entries in the rail was too many. Surfaces that answer the same
   question sit under one word, and the group reads as current when any child
   is - so you can see where you are without opening it. */
.navgroup { position: relative; display: inline-flex }
.navgroup-b {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-family: var(--sans); color: var(--dim);
  background: none; border: 0; padding: 6px 11px; border-radius: var(--r-sm);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.navgroup-b:hover { background: var(--raise); color: var(--body) }
.navgroup-b.on { color: var(--body); font-weight: 500 }
.navcv {
  width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 260ms var(--ease-out); opacity: .7;
}
.navgroup.open .navcv { transform: rotate(-135deg) translate(-1px, -1px) }

.navgroup-p {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  display: flex; flex-direction: column; min-width: 160px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 4px;
  box-shadow: 0 6px 18px -12px rgba(11,12,14,.45);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.navgroup.open .navgroup-p { opacity: 1; transform: none; pointer-events: auto }
.navgroup-p a { display: block; padding: 8px 11px; white-space: nowrap }
/* What each page does, under its name (29 Sep 2026). Desktop dropdowns only:
   the phone sheet stays compact, and every page opens with the same line. */
.navdesc { display: block; margin-top: 2px; font-size: var(--t-micro); font-weight: 400; color: var(--faint); white-space: normal; line-height: 1.35 }
.navgroup-p { min-width: 250px }
.railnav > a .navdesc, .railacct .navdesc { display: none }
@media (max-width: 900px) { .navdesc { display: none } }

@media (max-width: 900px) {
  .navgroup-p { position: static; opacity: 1; transform: none; pointer-events: auto;
    box-shadow: none; border: 0; padding: 0; min-width: 0 }
  .navgroup { flex-direction: column; align-items: flex-start }
}

/* A reference surface has no stepper, so the page starts where the content
   does rather than after 75px of somebody else's progress bar. */
.spine[hidden] { display: none }
body.no-thread .shell { padding-top: 22px }

/* ================= AWARD ROWS =================
   One award as a disclosure row: partner + cabin, title, price on the right,
   and labelled fact blocks inside. Shared by Sweet spots and Plan a trip so
   an award reads the same wherever it appears (moved from sweet-spots.js). */
/* one sweet spot in full (index headline + partner page) */
/* One joined list, not a stack of separate cards: the rows are the same
   kind of thing and read as a table. Two classes to beat .disc. */
.ss-hlist { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-soft); overflow: hidden }
.ss-hlist .ss-h { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none }
.ss-hlist .ss-h:first-child { border-top: 0 }
.ss-hbar { display: flex; align-items: center; gap: 12px; padding: 13px 18px }
.ss-htitle { margin-top: 3px; font-size: var(--t-base); font-weight: 700; color: var(--body); line-height: 1.4 }
.ss-hmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0 }
.ss-hpartner { font-size: var(--t-micro); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint) }
.ss-hmore { display: inline-block; margin-top: 13px; font-size: var(--t-sm); font-weight: 600;
  color: var(--accent-deep); text-decoration: none }
.ss-hmore:hover { text-decoration: underline }
.ss-pill {
  display: inline-block; white-space: nowrap; padding: 2px 8px; font-size: var(--t-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; border-radius: var(--r-sm); background: var(--raise); color: var(--dim); vertical-align: middle;
}
.ss-pill.premium { background: var(--accent-tint); color: var(--accent-deep) }
.ss-hprice { font-family: var(--mono); font-size: var(--t-lead); color: var(--body); text-align: right; flex: none }
.ss-hprice .unit { font-size: var(--t-micro); color: var(--faint); font-weight: 500; font-family: var(--sans) }
.ss-hprice .sub { display: block; margin-top: 4px; font-size: var(--t-micro); color: var(--faint); font-weight: 400 }
/* .discbox .pad in app.css is a two-class selector and beats a bare
   .ss-hbody, so this override silently did nothing and the body ran
   edge to edge while the title stayed indented. Matched specificity. */
.discbox .pad.ss-hbody { padding: 0 18px 16px }
.ss-hbody { font-size: var(--t-sm); color: var(--dim); line-height: 1.6 }
/* Each kind of fact gets a label and its own block, separated by a rule.
   Five kinds of information as one run of paragraphs is what made this
   unreadable - the reader could not tell a condition from the evidence. */
.ss-blk { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line) }
.ss-blk:first-child { margin-top: 4px; padding-top: 0; border-top: 0 }
.ss-k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px }
.ss-kn { color: var(--dim) }
.ss-p { color: var(--body); line-height: 1.6 }
.ss-blk .ss-src { margin-top: 9px }
/* A withheld price, shaped like a price. */
.ss-teaser { display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  border-top: 1px solid var(--line) }
.ss-teaser:first-child { border-top: 0 }
/* .grow only stretches inside .discbar; a teaser is not one, so the
   withheld price sat against the title instead of in the price column. */
.ss-teaser .grow { flex: 1; min-width: 0 }
.ss-hprice.locked { flex: none }
.ss-hprice.locked .lockw { font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 3px 8px }
.ss-reach { margin-top: 9px; font-weight: 600; color: var(--mint) }
.ss-reach.pending, .ss-reach.miss { color: var(--dim); font-weight: 500 }
.ss-routes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px }
.ss-routechip { background: var(--raise); border-radius: 6px; padding: 3px 9px; font-size: var(--t-micro); font-weight: 600; color: var(--body) }
.ss-seen-g { margin-top: 8px }
.ss-seen-g + .ss-seen-g { padding-top: 8px; border-top: 1px dashed var(--line) }
.ss-seen-h { font-size: var(--t-sm); color: var(--body) }
.ss-seen-f { margin-top: 1px; font-size: var(--t-xs); color: var(--faint) }
.ss-seen { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: 2px 18px }
.ss-seen li b { font-weight: 600; margin-right: 4px }
.ss-src { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--faint) }
@media (max-width: 640px) {
  /* Phone: the price column squeezed the spot into a 90px strip. The
     text takes the full width and the price sits under it. Two
     classes to beat .discbar's flex. */
  .discbar.ss-hbar { display: grid; grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 10px; row-gap: 6px; align-items: start; padding: 13px 14px }
  .ss-hbar .cv, .ss-hbar .kcmark { margin-top: 2px }
  .ss-hbar .ss-hprice { grid-column: 3; text-align: left }
}

/* ================= SECTIONS =================
   A labelled section inside a page: heading left, a count or aside right.
   (moved from sweet-spots.js; shared with Plan a trip) */
.vsec { margin-top: 26px }
.vsec-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--display); font-size: var(--t-h3); font-weight: 700; letter-spacing: -.01em;
}
.vsec-aside { font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; color: var(--faint) }
.ss-pill.go { background: var(--mint-tint); color: var(--mint) }

/* ================= PLAN A TRIP =================
   The question (where, one way or back, how many), then award rows. Each row
   says in one line which balances pay for it; inside, one row per balance. */
.tripq { display: grid; grid-template-columns: minmax(0, 1fr) 190px 210px; gap: 14px; align-items: end;
  margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-soft) }
.tq-route { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 8px; align-items: end; min-width: 0 }
.tripq .seg { height: 48px }
.tripq .segs { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.tripq .segs.tq2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
/* Cabin: one row across the whole form, one equal button per cabin present */
.tripq .tq-cab { grid-column: 1 / -1 }
.tripq .segs.tq-cabs { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) }
.seg-n { margin-left: 8px; color: var(--dim); font-size: .9em }
.seg.on .seg-n { color: inherit; opacity: .7 }
.tq-swap { height: 48px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  color: var(--dim); font-size: var(--t-lead); cursor: pointer; transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out) }
.tq-swap:hover { border-color: var(--line-hover); color: var(--body) }
.tq-swap:active { transform: scale(.97) }
.tq-pay { margin-top: 5px; font-size: var(--t-xs); color: var(--dim); line-height: 1.5 }
.tq-pay b { color: var(--body); font-weight: 600 }
.tq-plus { color: var(--faint); padding: 0 2px }
.tq-fund { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden }
.tq-frow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface) }
.tq-frow:first-child { border-top: 0 }
.tq-frow .grow { flex: 1; min-width: 0; color: var(--body); font-weight: 600 }
.tq-fr { display: block; margin-top: 2px; font-size: var(--t-xs); font-weight: 400; color: var(--faint) }
.tq-fv { flex: none; text-align: right; color: var(--body) }
.tq-fu { display: block; font-size: var(--t-micro); color: var(--faint) }
.tq-warn { margin-top: 9px; font-size: var(--t-sm); color: var(--dim) }
.tq-spare { margin-top: 9px; font-size: var(--t-sm); color: var(--mint) }
.ss-p.tq-tip { margin-top: 4px; color: var(--dim) }
@media (max-width: 900px) {
  .tripq { grid-template-columns: 1fr 1fr }
  .tripq .tq-route { grid-column: 1 / -1 }
}
@media (max-width: 520px) {
  .tripq { grid-template-columns: 1fr; padding: 14px }
  .tripq .seg { height: 40px }
  .tq-route { grid-template-columns: minmax(0, 1fr) 36px }
  .tq-route > .fld:last-child { grid-column: 1 / 2 }
  .tq-swap { grid-row: 1 / 3; grid-column: 2; align-self: center; height: 36px }
}

/* a long programme name in a picker ends in an ellipsis instead of being cut mid-word */
.combo .tfc-input { text-overflow: ellipsis; white-space: nowrap; overflow: hidden }

/* the opened trip row: one saving line, pay-with, short notes, one action row,
   then a folded "other options and source" */
.tq-sum { font-size: var(--t-base); color: var(--dim); margin: 2px 0 12px; line-height: 1.5 }
.tq-sum b { color: var(--body); font-weight: 700 }
.tq-sum .tq-save { color: var(--mint) }
.tq-notes { margin: 10px 0 0; padding-left: 18px; font-size: var(--t-sm); color: var(--dim); line-height: 1.55 }
.tq-notes li + li { margin-top: 2px }
.tq-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line) }
.tq-savedlink { font-size: var(--t-sm); color: var(--accent-deep) }
.tq-tip2 { flex-basis: 100%; font-size: var(--t-sm); color: var(--faint) }
.ss-hbody .disc.tq-more { margin-top: 12px; box-shadow: none }
.ss-hbody .disc.tq-more .discbar { padding: 10px 14px; font-size: var(--t-sm) }
.ss-hbody .disc.tq-more .discbox .pad { padding: 0 14px 12px }

/* the three values of the points just earned, under the answer figure */
.ans-worth { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 12px 28px 16px;
  border-top: 1px solid var(--ans-rule); font-size: var(--t-sm); color: var(--ans-dim); line-height: 1.5 }
.ans-worth-k { flex-basis: 100%; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--ans-faint) }
.ans-worth b { color: var(--ans-strong); font-weight: 600 }
.ans-worth i { font-style: normal; color: var(--ans-faint) }
.ans-worth-src { flex-basis: 100%; font-size: var(--t-micro); color: var(--ans-faint) }
.ans-worth-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px }
@media (max-width: 720px) { .ans-worth { padding: 12px 22px 14px } }

/* Statements (statement-import.js): a bar with the import button, the list of
   imported statements, and the per-file cards inside the import dialog. */
.stm-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft) }
.stm-bar-t { font-size: var(--t-h3); font-weight: 650; color: var(--ink); letter-spacing: -.01em }
.stm-bar .mt { margin-top: 2px; max-width: 520px }
.stm-bar .btn { padding: 11px 18px; font-size: var(--t-sm) }
.stm-list { margin-bottom: 14px }
.stm-list-h { display: flex; align-items: center; gap: 12px }
.stm-list-h .grow { flex: 1 }
.stm-ck { display: grid; place-items: center; width: 20px; flex: none; cursor: pointer }
.stm-ck input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer }
.stm-lrow { align-items: center }
.stm-rm, .stm-rm1 { padding: 7px 12px; font-size: var(--t-xs); flex: none }
.stm-rm { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 35%, var(--line)) }
.stm-ok { color: var(--mint) }
.stm-drop { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 26px 16px; border: 1.5px dashed var(--line-hover); border-radius: var(--r-md); cursor: pointer; background: var(--ground); font-size: var(--t-base); transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out) }
.stm-drop:hover { border-color: var(--accent); background: var(--accent-tint) }
.stm-drop.small { padding: 12px 16px; font-size: var(--t-sm) }
.stm-q { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface) }
.stm-q.bad { border-color: color-mix(in srgb, var(--clay) 40%, var(--line)); background: var(--warn-bg) }
.stm-q-h { display: flex; align-items: center; gap: 10px }
.stm-q-n { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.stm-q-x { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--dim); cursor: pointer; line-height: 1; flex: none }
.stm-q-x:hover { color: var(--ink); border-color: var(--line-hover) }
.stm-q-s { font-size: var(--t-sm); color: var(--dim); display: flex; align-items: center; gap: 8px; margin-top: -4px }
.stm-q .sel { height: 40px; font-size: var(--t-sm) }
.stm-q-stats { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--body) }
.stm-q-pwd { display: flex; gap: 8px }
.stm-q-pwd .inp { height: 40px; font-size: var(--t-sm) }
.stm-q-pwd .btn { padding: 0 16px; height: 40px; font-size: var(--t-sm) }
.stm-check { font-size: var(--t-sm); padding: 8px 12px; border-radius: var(--r-sm); background: var(--ground); border-left: 2px solid var(--line) }
.stm-check.ok { border-left-color: var(--mint); background: var(--mint-tint) }
.stm-check.warn { border-left-color: var(--clay); background: var(--warn-bg) }
.stm-opt { display: flex; gap: 8px; align-items: center; font-size: var(--t-sm); cursor: pointer }
.stm-opt input { accent-color: var(--accent) }
.stm-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: stm-spin 700ms linear infinite; flex: none }
@keyframes stm-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .stm-spin { animation-duration: 2s } }

/* ================= DIALOG =================
   One dialog for the whole site: a native <dialog> opened with showModal()
   (focus trap, Esc to close, inert page behind). Header / body / footer, a
   blurred backdrop, a short ease-out entrance. On a phone it becomes a bottom
   sheet. Pages put their own content in .dlg-b; nothing else is page-specific. */
dialog.dlg {
  border: 0; padding: 0; margin: auto; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  border-radius: var(--r-lg); background: var(--surface); color: var(--body); overflow: auto;
  box-shadow: 0 28px 56px -16px rgba(16, 24, 40, .28), 0 0 0 1px rgba(16, 24, 40, .06);
}
dialog.dlg::backdrop { background: rgba(16, 24, 40, .42); backdrop-filter: blur(3px) }
dialog.dlg[open] { animation: dlg-in 220ms var(--ease-out) }
dialog.dlg[open]::backdrop { animation: dlg-fade 220ms var(--ease-out) }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.98) } }
@keyframes dlg-fade { from { opacity: 0 } }
.dlg-h { position: relative; padding: 22px 56px 4px 24px }
.dlg-t { font-size: var(--t-h2); font-weight: 650; letter-spacing: -.02em; color: var(--ink) }
.dlg-s { font-size: var(--t-sm); color: var(--dim); margin-top: 4px }
.dlg-x {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--dim); cursor: pointer;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.dlg-x:hover { border-color: var(--line-hover); color: var(--ink) }
.dlg-b { padding: 18px 24px 22px; display: grid; gap: 18px }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--ground) }
.dlg-f .btn { padding: 11px 18px; font-size: var(--t-sm) }
.dlg .fld > label, .dlg-l { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--dim) }
.dlg .inp { height: 44px; font-size: var(--t-base) }
.dlg .segs { grid-template-columns: 1fr 1fr }
.dlg-err { font-size: var(--t-sm); color: var(--clay); margin-top: -8px }
/* A choice drawn as a card: radio dot, title, one line of explanation. */
.opt-cards { display: grid; gap: 8px }
.opt-card {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  cursor: pointer; font: inherit; color: inherit; transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.opt-card:hover { border-color: var(--line-hover) }
.opt-card.on { border-color: var(--accent); background: var(--accent-tint) }
.opt-dot { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--line-hover); display: grid; place-items: center }
.opt-card.on .opt-dot { border-color: var(--accent) }
.opt-card.on .opt-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent) }
.opt-t { font-size: var(--t-base); font-weight: 600; color: var(--ink) }
.opt-d { font-size: var(--t-sm); color: var(--dim); margin-top: 2px }
/* A field with buttons inside its right edge (show / generate / copy). */
.inp-wrap { position: relative }
.inp-wrap .inp { padding-right: 150px; font-family: var(--mono); font-size: var(--t-sm) }
.inp-acts { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px }
.inp-act { height: 32px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--body); font-size: var(--t-xs); font-weight: 600; cursor: pointer }
.inp-act:hover { border-color: var(--line-hover) }
.dlg-note { font-size: var(--t-sm); color: var(--dim); padding: 10px 12px; border-radius: var(--r-sm); background: var(--ground); border-left: 2px solid var(--line) }
.dlg-note.warn { border-left-color: var(--clay); background: var(--warn-bg); color: var(--body) }
/* Done state: a check, one sentence, the one thing to hand over. */
.dlg-done { text-align: center; padding: 8px 0 2px }
.dlg-tick { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: var(--mint-tint); color: var(--mint); font-size: 24px; animation: dlg-pop 300ms var(--ease-out) }
@keyframes dlg-pop { from { transform: scale(.6); opacity: 0 } }
.dlg-secret { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line-hover); border-radius: var(--r-md); background: var(--ground); text-align: left }
.dlg-secret code { flex: 1; font-family: var(--mono); font-size: var(--t-lead); color: var(--ink); user-select: all; word-break: break-all }
@media (prefers-reduced-motion: reduce) { dialog.dlg[open], dialog.dlg[open]::backdrop, .dlg-tick { animation: none } }
@media (max-width: 560px) {
  dialog.dlg { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: calc(100dvh - 24px) }
  @keyframes dlg-in { from { transform: translateY(24px); opacity: 0 } }
  .dlg-f { padding-bottom: calc(14px + env(safe-area-inset-bottom)) }
  .dlg-f .btn { flex: 1 }
}
/* Destructive confirm inside a dialog (and anywhere a red primary is right). */
.btn.danger { background: var(--clay); box-shadow: 0 1px 2px rgba(180, 60, 40, .35) }
.btn.danger:hover { background: color-mix(in srgb, var(--clay) 85%, #000); box-shadow: 0 4px 10px -2px rgba(180, 60, 40, .45) }
.foot a { color: var(--accent-deep); text-decoration: none; font-weight: 500 }
.foot a:hover { text-decoration: underline }
/* Toggles sit beside 44px fields in dialogs: same height, so a row lines up. */
.dlg .segs .seg { min-height: 44px }
/* Imported statements header: the select-all box, the title and the bulk
   button stay on one line on a phone (the shared .compare-h rule otherwise
   sends the last span to its own row). */
.stm-list-h { flex-wrap: nowrap !important }
.stm-list-h > span:last-child, .stm-list-h > .grow { flex: 1 1 auto !important; opacity: 1 !important; min-width: 0 }
/* SBI Card's file is mostly its wordmark, unreadable at mark sizes: show the
   keyhole symbol instead (the extra-large mark keeps the full logo). */
.kcmark { overflow: hidden }
.kcmark:not(.kcmark-xl) img[src*="sbi_travel_credits"] { transform: scale(2.2); transform-origin: 50% 14% }
/* A logo inside running text ("... worth ₹15,092 via [HDFC] HDFC Reward
   Points"): centred on the line instead of sitting on the baseline, and a
   little air either side so it does not touch the next word. Text blocks
   only - marks in flex/grid rows are laid out by their row. */
:is(.sd, .mt, .sub, .note, .dlg-s, p) > .kcmark { vertical-align: middle; position: relative; top: -1px; margin: 0 4px 0 2px }
/* What a Points tab is for: one line under the tabs (the heading above them
   is the same on every tab, so the tab bar never moves). */
.tab-intro { font-size: var(--t-sm); color: var(--dim); margin: -2px 0 14px; max-width: 72ch }

/* ================= TYPE + ANSWER (25 Sep 2026) =================
   Folded in from the design-branch samples the testers reviewed. Labels are
   sentence case in the UI face, figures use tabular digits instead of a code
   font, the size rungs are spaced so each role reads as its own level, and
   the answer is the page's one raised white surface. */

/* Type refresh, shared by all three samples. Layout, colour and components
   are untouched; only how text is set changes.
   1. Labels: no more tiny UPPERCASE MONO with wide tracking. Sentence case,
      the UI face, a readable size.
   2. Figures: set in the UI face with tabular digits, not a code font.
   3. One step up the scale: the old rungs (10.5 / 11.5 / 12.5) were too
      small to read comfortably.
   4. Headlines carry no coloured emphasis word. */
body { line-height: 1.55; text-rendering: optimizeLegibility }
/* Tabular digits only where the code font used to set figures: on running
   text Inter's tabular forms space out hyphens ("France - KLM"). */
.acct-chip,
.acct-row-h,
.adm-af-l,
.adm-badge,
.adm-chart-ax,
.adm-dz-h,
.adm-h,
.adm-set-k,
.adm-stat-l,
.adm-td.r,
.adm-thead,
.ans .eyebrow,
.ans .method .arrow,
.ans .method .rulechip,
.ans-fig .big,
.ans-fig .figlabel,
.ans-fig .pct,
.ans-fig .pts,
.ans-worth-k,
.bal .pv,
.bal .pw,
.bal-kind,
.beyond-h,
.brow .v,
.capchip,
.cd-docs li::before,
.cd-face-num,
.cd-rank-h,
.cd-rrank,
.cd-tag,
.comboitem .hint,
.compare-h,
.crow .ok,
.ct-mail,
.dcol .dk,
.discbar .hint,
.dl-pt,
.dlg-secret code,
.dres .big,
.dres .w,
.dwarn,
.gate-h,
.inp-wrap .inp,
.inp.money,
.ins-kind,
.ins-msrc-inline,
.ins-mval .num,
.ins-mval .sub,
.ins-myear,
.ins-recent-tag,
.kcmono,
.kindpill,
.lrow .g,
.mathbar .hint,
.mathlines,
.mbr-row-h,
.mg,
.ml,
.moneywrap .r,
.num,
.pb-k,
.prog .pl .r,
.rail.navopen .navgroup-b,
.railpts,
.sigbar .more,
.snode,
.ss-dealbadge,
.ss-fk,
.ss-hprice,
.ss-hprice.locked .lockw,
.ss-k,
.ss-prange,
.ss-prow-v,
.ss-pstat-k,
.sstep .tag,
.steps li::before,
.tab .c,
.tf-dk,
.tf-mine-k,
.trip .eyebrow,
.trip .sub,
.trip .worth,
.tripfund-k,
.trow .mt,
.trow .v,
.trow.tog .capnote,
.trow.tog .g,
.trow.tog .get,
.trow.tog .worth,
.typeswitch button,
.v,
.vch-denoms span,
.vch-eyebrow,
.vch-group,
.vch-pill,
.vch-portals-k,
.vhead .eyebrow,
.vp,
.wcard .wbnk,
label,
label, .dlg-l { font-variant-numeric: tabular-nums }
* { text-transform: none !important }
.vhead .eyebrow,
.kcmono,
.mg,
.dcol .dk,
.fld > label,
.ans .eyebrow,
.ans-fig .figlabel,
.compare-h,
.beyond-h,
.bal-kind,
.tripfund-k,
.kindpill,
.trip .eyebrow,
.crow .ok,
.rail.navopen .navgroup-b,
.gate-h,
.ss-hpartner,
.ss-pill,
.ss-k,
.ss-hprice.locked .lockw,
.ans-worth-k,
.dlg .fld > label, .dlg-l {
  font-family: var(--sans) !important; font-size: var(--t-sm) !important;
  letter-spacing: 0 !important; font-weight: 500 !important;
}
.vhead h1 em, h1 em, h2 em, h3 em { color: inherit !important }
.vhead .sub { font-size: var(--t-lead); line-height: 1.6 }
.mathlines { font-size: var(--t-sm) }

/* A - Quiet sans: Inter everywhere, with a clearer size hierarchy.

   Before: most text sat on three rungs a half-pixel apart (12 / 12.5 / 13.5),
   labels were the same size and weight as the values under them, and section
   headings, small bold figures and body text all used 700. Everything
   competed, so nothing led.

   Now each level differs from the next by size, colour or weight:

     Page headline   40 / 28   600       ink     one per page
     Section         18        600       ink     vsec-h, h3s, dialog titles
     Lead            15.5       400       dim     the line under a headline
     Body / value    14.5      400-500   body    row names, values, inputs
     Secondary       13        400       dim     notes, row meta, chips
     Label           12        500       faint   field and figure labels
     Fine print      11.5      400       faint   units, hints, sources
*/

/* ---- page headline: large, but not shouting ---- */
.vhead h1 { font-size: clamp(28px, 3.4vw, 40px) !important; font-weight: 600 !important; letter-spacing: -.028em !important; line-height: 1.08 !important }
.vhead.vhead-tool h1 { font-size: var(--t-display) !important; letter-spacing: -.022em !important; line-height: 1.15 !important }
.vhead .sub { font-size: var(--t-lead) !important; line-height: 1.55 !important; color: var(--dim) }

/* ---- section headings: one step, one weight ---- */
.vsec-h, .vch-h3, h3.ins-h3, .trip h4, .stm-bar-t, .dlg-t, .ct-side h3 {
  font-weight: 600 !important; letter-spacing: -.015em !important; line-height: 1.25 !important;
}
.vsec-h, .vch-h3, h3.ins-h3, .stm-bar-t, .ct-side h3 { font-size: var(--t-h3) !important }
.trip h4, .dlg-t { font-size: var(--t-h2) !important }
.logo { font-size: 17px !important; font-weight: 650 !important; letter-spacing: -.025em !important }

/* ---- big figures: the one number a panel is about ---- */
.ss-pstat-v, .bal .pv, .trip .worth, .dres .big { font-weight: 600 !important; letter-spacing: -.02em !important }

/* ---- labels step back: smaller, lighter, grey - the value below leads ---- */
.vhead .eyebrow, .mg, .dcol .dk, .fld > label, .ans-fig .figlabel, .compare-h, .beyond-h,
.bal-kind, .tripfund-k, .trip .eyebrow, .rail.navopen .navgroup-b, .gate-h, .ss-k,
.ans-worth-k, .dlg .fld > label, .dlg-l,
.acct-row-h, .cd-rank-h, .adm-h, .adm-stat-l, .adm-af-l, .adm-set-k, .adm-dz-h, .ins-kind,
.vch-group, .vch-portals-k, .vch-eyebrow, .mbr-row-h, .ss-fk, .ss-pstat-k, .pb-k, .tf-dk, .tf-mine-k, .mcc-basis, .dl-cab {
  letter-spacing: 0 !important; font-family: var(--sans) !important;
  font-size: var(--t-xs) !important; font-weight: 500 !important; color: var(--faint);
}
.ans .eyebrow, .ans-fig .figlabel, .ans-worth-k { color: var(--ans-dim) !important }
.trip .eyebrow { color: var(--trip-dim) !important }
.gate-h { color: var(--accent) !important }
/* pills and chips are tags, not labels: keep them tight */
.kindpill, .ss-pill, .crow .ok, .kcmono, .cd-rtag, .ss-dealbadge { font-size: var(--t-micro) !important; letter-spacing: 0 !important }

/* ---- small text never shouts: nothing below body size is set in 700 ---- */
b, strong { font-weight: 600 }
.cmp-cardname, .ss-frow-p b, b.live, .ss-htitle, .ss-htitle b, .num { font-weight: 600 !important }
.cmp-col, .tfsort { font-weight: 500 !important }

/* ---- reading rhythm ---- */
body { line-height: 1.55 }
.note, .foot, .tab-intro, .mt { line-height: 1.5 }

/* Results box sample. The answer stops being a black slab with a neon figure:
   it becomes the page's one raised white surface, set in the same ink as
   everything else, with the money in a deep green. Every colour inside it
   was already a token (--ans-*), so this only re-points them.

   Also: the route is one plain sentence (no bold fragments, no raw URL, no
   chip), the rule and cap sit quietly under it, "+" is gone from the figure,
   the programme logo next to the points is gone (the bank mark is already
   by the card name), and "Ask another" is a text button so "Log this spend"
   is the one clear action. */
.ans {
  --ans-pos: #047857; --ans-neg: var(--clay);
  --ans-strong: var(--body); --ans-dim: var(--dim); --ans-faint: var(--faint);
  --ans-eyebrow: var(--faint); --ans-rule: var(--line); --ans-btn: var(--line);
  --ans-solid: var(--accent); --ans-solid-ink: #fff;
  --cap-ink: #8A5A14; --cap-bg: #FFF8EB; --cap-line: #F1DDB5;
  background: var(--surface) !important; color: var(--body) !important;
  border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.14) !important;
}
.ans h3 { color: var(--ink); font-size: clamp(22px, 2.3vw, 26px) !important }
.ans h3 .m, .ans .m.m-hdfc, .ans .m.m-axis, .ans .m.m-sbi, .ans .m.m-amex, .ans .m.m-hsbc,
.ans .m.m-icici, .ans .m.m-kotak, .ans .m.m-au, .ans .m.m-yes, .ans .m.m-indus { box-shadow: 0 0 0 1px var(--line) !important }
.ans-top { padding: 22px 26px 20px !important }

.ans .method { font-size: var(--t-base) !important; color: var(--body) !important; line-height: 1.55 !important; margin-top: 10px !important }
.ans .method-meta { margin-top: 4px; font-size: var(--t-sm); color: var(--faint) }

.ans-fig .figlabel { margin-bottom: 4px !important }
.ans-fig .big { font-weight: 600 !important; font-size: clamp(28px, 3vw, 34px) !important; letter-spacing: -.02em !important }
.ans-fig .pts { color: var(--dim) !important }
.ans-fig .pts-range { font-size: var(--t-sm); color: var(--dim); font-weight: 500 }
.ans-fig .pct { background: none !important; padding: 0 !important; color: var(--dim) !important; font-size: var(--t-sm) !important }
.ans-fig .pct.zero { color: var(--faint) !important }

.ans-worth { padding: 14px 26px !important; background: var(--hover) }
.mathbar, .mathbox { background: var(--surface) !important }
.mathbar { padding: 13px 26px !important }
.mathbar:hover { background: var(--hover) !important }
.mathbox .pad { padding: 0 26px 18px !important }
.ml { color: var(--dim) !important }
.ml.neg { color: var(--clay) !important }
.ml.tot { color: var(--body) !important; font-weight: 500 }

.ans-foot { padding: 14px 26px !important; align-items: center; gap: 6px !important }
.ans .act { flex: none !important; padding: 11px 22px !important; font-size: var(--t-base) !important }
.ans .act.solid { background: var(--accent) !important; color: #fff !important }
.ans .act.solid:hover { background: var(--accent-deep) !important; transform: none }
.ans .act.line { border: 0 !important; background: none !important; color: var(--dim) !important; padding: 11px 14px !important }
.ans .act.line:hover { color: var(--body) !important; background: var(--hover) !important; transform: none }
.ans .pickgap .picklink { color: var(--accent) !important }

@media (max-width: 640px) {
  .ans-top { padding: 18px 18px 16px !important }
  .ans-worth, .mathbar, .ans-foot { padding-left: 18px !important; padding-right: 18px !important }
  .mathbox .pad { padding: 0 18px 16px !important }
  .ans .act.solid { flex: 1 !important }
}
.ans-fig .pts, .ans-fig .pct { font-weight: 400 !important }

/* ---- headline: card face + "Pay with <card>", no label above ---- */
.ans-id { display: flex; align-items: center; gap: 16px }
.ans-face { position: relative; width: 64px; height: 41px; border-radius: 6px; flex: none;
  box-shadow: 0 1px 2px rgba(16,24,40,.12), 0 4px 10px -4px rgba(16,24,40,.25), inset 0 0 0 1px rgba(255,255,255,.12) }
.ans-face .m { position: absolute; left: 6px; top: 6px; width: 16px !important; height: 16px !important; border-radius: 3px !important; box-shadow: none !important }
.ans .ans-id h3 { margin-top: 0 !important; font-size: clamp(20px, 2.1vw, 24px) !important; line-height: 1.2 !important }
.ans-bank { margin-top: 2px; font-size: var(--t-sm); color: var(--faint) }

/* ---- the route: numbered when it takes two steps ---- */
.ans .method { margin-top: 16px !important }
.ans-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 6px }
.ans-steps li { counter-increment: s; display: flex; gap: 10px; align-items: baseline }
.ans-steps li::before { content: counter(s); flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: var(--t-micro); font-weight: 600;
  color: var(--dim); background: var(--raise); transform: translateY(-1px) }
.ans .ans-id .method-meta { margin-top: 3px !important }
.ans-steps + * { }
@media (max-width: 640px) { .ans-face { width: 52px; height: 33px } .ans-id { gap: 12px } }

/* ---- sweet spot rows (index, partner pages, Plan a trip) and fresh news ----
   The logo sits in the same white tile the partner directory uses, the spot
   is the line you read, and programme and cabin are quiet context joined by
   a dot instead of an uppercase kicker and a filled pill. Status words keep
   their colour (premium cabin, ready to book); nothing else is filled. */
.ss-hbar { gap: 14px !important; padding: 14px 20px !important }
.ss-hbar > .kcmark, .ss-frow > .kcmark {
  box-sizing: content-box; padding: 5px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
}
.ss-hmeta { gap: 0 !important }
.ss-hpartner { font-size: var(--t-sm) !important; font-weight: 400 !important; color: var(--faint) }
.ss-hmeta .ss-pill {
  background: none !important; padding: 0 !important; border-radius: 0;
  font-size: var(--t-sm) !important; font-weight: 400 !important; color: var(--faint);
}
/* the dot trails the item before it, so a wrap never starts a line with it */
.ss-hmeta > *:not(:last-child)::after { content: '\00B7'; margin: 0 7px; color: var(--faint) }
.ss-hmeta .ss-pill.premium { color: var(--accent-deep) }
.ss-hmeta .ss-pill.go { color: var(--mint) }
.ss-htitle { font-weight: 500 !important; margin-top: 2px !important }
.ss-hprice { font-size: var(--t-base) !important; font-weight: 500 }
.ss-hprice .sub { font-size: var(--t-xs) !important }
@media (max-width: 640px) {
  .ss-hbar { gap: 6px 12px !important; padding: 13px 14px !important }
}

/* ---- footer policy links (terms, privacy, refunds, delivery, contact) ---- */
.foot .foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: var(--t-sm) }
.foot .foot-links a { color: var(--dim); text-decoration: none }
.foot .foot-links a:hover { color: var(--body); text-decoration: underline }
.foot .foot-links span { color: var(--faint) }
.mbr-agree { margin-top: 10px !important; text-align: center }
.mbr-agree a { color: var(--accent-deep) }

/* ---- account menu in the rail: the nav dropdown, anchored right, and it
   stays a dropdown on a phone (the nav groups turn into a flat sheet there) */
.railacct .acctmenu .navgroup-p { left: auto; right: 0; min-width: 220px }
.railacct .acct-who { display: block; padding: 8px 11px 6px; font-size: var(--t-xs); color: var(--faint);
  border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px }
.railacct .navgroup-p a { max-width: none; background: none; color: var(--dim); border-radius: var(--r-sm) }
.railacct .navgroup-p a:hover { background: var(--raise); color: var(--body) }
.railacct .navgroup-p a.on { background: var(--raise); color: var(--body) }
.railacct .acct-out { display: block; width: 100%; text-align: left; margin-top: 4px; padding: 8px 11px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: none; color: var(--clay); font: inherit; font-size: var(--t-base); cursor: pointer }
.railacct .acct-out:hover { background: color-mix(in srgb, var(--clay) 8%, transparent) }
@media (max-width: 900px) {
  .railacct .acctmenu { flex-direction: row; align-items: center }
  .railacct .acctmenu .navgroup-p { position: absolute; top: calc(100% + 6px); opacity: 0; transform: translateY(-4px);
    pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 4px; box-shadow: 0 6px 18px -12px rgba(11,12,14,.45); min-width: 220px }
  .railacct .acctmenu.open .navgroup-p { opacity: 1; transform: none; pointer-events: auto }
  .railacct .acctmenu .navcv { display: inline-block }
}

/* ---- under an answer: try another spend, and the calm save line ---- */
.trynext { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px }
.trynext-k { flex-basis: 100%; font-size: var(--t-sm); color: var(--dim); margin-bottom: 2px }
.trynext .chip .num { color: var(--faint); margin-left: 4px }
.savenudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); font-size: var(--t-base); color: var(--body) }
.savenudge a { color: var(--accent-deep); font-weight: 500 }

/* ---- Ask: the button waits for a complete question ---- */
#askBtn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none }
.ask-hint { margin-top: 8px; min-height: 1.2em; font-size: var(--t-sm); color: var(--faint); text-align: center }

/* ---- tabs on a phone: one swipeable row, not three wrapped rows ---- */
@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch }
  .tabs::-webkit-scrollbar { display: none }
  .tabs .tab { flex: none; white-space: nowrap }
}

/* ---- Ask: the combo's browse list and the rail note ---- */
.combohead { padding: 10px 16px 6px; font-size: var(--t-xs); font-weight: 500; color: var(--faint); background: var(--hover); border-bottom: 1px solid var(--line) }
/* The answer lands below the sticky top bar, not under it. */
.ans, #ansMount { scroll-margin-top: calc(var(--railh) + 12px) }
/* On a phone a view change fades in place: sliding 20px sideways pushed the
   right edge of every panel off a 390px screen mid-transition. */
@media (max-width: 640px) {
  .view.out, .view.pre { transform: none; filter: none }
}
/* Disclosure bars on a phone: the title stays on one line; the hint yields. */
@media (max-width: 640px) {
  .discbar .grow { white-space: nowrap; flex: 0 0 auto }
  .discbar .hint { flex: 1 1 auto; min-width: 0; text-align: right }
  /* ...except a trip / sweet-spot bar, whose title is a sentence: it wraps
     (29 Sep 2026 - "Singapore, Bangkok, Bali or Phuket in ec" ran off the card) */
  .discbar.ss-hbar .grow { white-space: normal; flex: 1 1 auto; min-width: 0 }
}


/* A row that opens something (Plan: a destination). Same .crow as every list. */
.compare a.crow { color: inherit; text-decoration: none; cursor: pointer }
.crow .mt .rdy { color: var(--mint) }
/* Flag tiles: one country to open (Plan, 26 Sep 2026). One flat grid with
   hairline dividers - no floating boxes, no shadows - so a screen of
   countries reads as one calm table: flag, country, lowest price, ready. */
.flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 12px;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.ftile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px;
  align-items: center; width: 100%; padding: 16px 18px; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--surface); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0;
  transition: background 140ms linear }
.ftile:hover { background: var(--hover) }
.ftile:hover .ftile-n { color: var(--accent-deep) }
.ftile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.ftile .ftile-flag { grid-row: 1 / 3; font-size: 30px; line-height: 1 }
.ftile .ftile-n { font-size: var(--t-base); font-weight: 600; color: var(--body); line-height: 1.3; min-width: 0 }
.ftile .ftile-p { font-size: var(--t-sm); color: var(--dim) }
.ftile .ftile-p b { font-family: var(--mono); font-weight: 600; color: var(--body) }
.ftile .ftile-r { margin-left: 6px; color: var(--mint); font-weight: 600 }
@media (max-width: 560px) {
  .flag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ftile { padding: 12px; column-gap: 10px }
  .ftile .ftile-flag { font-size: 24px }
  .ftile .ftile-n { font-size: var(--t-sm) }
  .ftile .ftile-p { font-size: var(--t-xs) }
}
/* Plan search bar (26 Sep 2026): one slim row - From, swap, To, trip type,
   travellers - then Cabin as the site's tabs with the balances link beside. */
.tqbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft) }
.tqbar .tq-route { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 8px; align-items: end; min-width: 0 }
.tqbar .fld { gap: 5px }
.tqbar .fld > label, .tqbar .tq-cap { font-size: var(--t-xs); color: var(--dim) }
.tqbar .inp { height: 44px }
.tqbar .tq-swap { height: 44px }
.tqbar .tq-opts { display: flex; gap: 8px }
.tqbar .tq-sel { width: auto; min-width: 128px; padding-right: 30px; cursor: pointer }
.tq-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  margin: 14px 0 4px; border-bottom: 1px solid var(--line) }
.tq-sub .tabs.tq-cabs { margin: 0; border-bottom: 0 }
.tq-bal { font-size: var(--t-sm); color: var(--dim); text-decoration: none; padding: 0 0 12px; white-space: nowrap }
.tq-bal span { color: var(--accent-deep) }
.tq-bal:hover span { text-decoration: underline }
@media (max-width: 760px) {
  .tqbar { grid-template-columns: 1fr; padding: 12px }
  .tqbar .tq-opts .fld { flex: 1 }
  .tqbar .tq-sel { width: 100%; min-width: 0 }
}
@media (max-width: 520px) {
  .tqbar .tq-route { grid-template-columns: minmax(0, 1fr) 36px }
  .tqbar .tq-route > .fld:last-child { grid-column: 1 / 2 }
  .tqbar .tq-swap { grid-row: 1 / 3; grid-column: 2; align-self: center; height: 36px }
  .tq-sub { margin-top: 10px }
  .tq-bal { padding: 0 0 10px; white-space: normal }
}
.tqbar .tq-sel { appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f98' stroke-width='1.5'/%3E%3C/svg%3E") }
/* Plan destinations (26 Sep 2026): a card per country - flag on a soft band,
   the country, the lowest price, its cities, the programmes. Countries the
   balances do not reach yet are faded and say "Not yet"; bookable ones carry
   no tag, because on a funded account that is nearly all of them. */
.dz-showgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; margin-top: 12px }
.dz-show { display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 140ms linear, box-shadow 140ms linear }
.dz-show:hover { border-color: var(--accent); box-shadow: var(--shadow-soft) }
.dz-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px }
/* a small round flag badge - colour as a hint, not a block */
.dz-top .dz-flag { width: 24px; height: 24px; flex: none; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); filter: saturate(.8) }
.dz-top .dz-n { flex: 1; min-width: 0 }
.dz-foot .dz-not { color: var(--dim); font-weight: 600 }
.dz-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; flex: 1 }
.dz-show .dz-n { font-size: var(--t-base); font-weight: 600; color: var(--body) }
.dz-price b { font-size: var(--t-base); font-weight: 600; color: var(--body) }
.dz-from, .dz-u { font-size: var(--t-xs); color: var(--dim) }
.dz-sub { font-size: var(--t-xs); color: var(--faint) }
.dz-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line) }
.dz-logos { display: inline-flex; gap: 4px }
.dz-show.short .dz-flag { filter: grayscale(1); opacity: .5 }
.dz-show.short .dz-price b { opacity: .55 }
@media (max-width: 560px) {
  .dz-showgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .dz-body { padding: 12px 12px 10px }
  .dz-top .dz-flag { width: 22px; height: 22px }

}
/* Destination opened: banner + trip cards (26 Sep 2026) */
.tc-head { display: flex; align-items: center; gap: 16px; margin: 14px 0 16px }
.tc-flag { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); filter: saturate(.8) }
.tc-place { margin: 0; font-size: var(--t-h2); font-weight: 600; color: var(--body); letter-spacing: -.01em }
.tc-from { font-size: var(--t-base); font-weight: 400; color: var(--dim) }
.tc-meta { margin-top: 3px; font-size: var(--t-sm); color: var(--dim) }
.tc-meta b { color: var(--body) }
.tc-list { display: grid; gap: 12px }
.tc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px 14px }
.tc-top { display: flex; align-items: flex-start; gap: 12px }
.tc-where { min-width: 0 }
.tc-route { font-size: var(--t-lead); font-weight: 600; color: var(--body); line-height: 1.35 }
.tc-arr { color: var(--faint); font-weight: 400 }
.tc-via { margin-left: 8px; font-size: var(--t-sm); font-weight: 400; color: var(--dim) }
.tc-more { font-size: var(--t-xs); color: var(--faint); margin-top: 2px }
.tc-cab { margin-top: 3px; font-size: var(--t-xs); color: var(--faint); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase }
.tc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md) }
.tc-fact { padding: 12px 14px; border-left: 1px solid var(--line) }
.tc-fact:first-child { border-left: 0 }
.tc-k { font-size: var(--t-micro); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint) }
.tc-v { margin-top: 4px; font-size: var(--t-h3); font-weight: 600; color: var(--body) }
.tc-s { margin-top: 2px; font-size: var(--t-xs); color: var(--dim); line-height: 1.45 }
.tc-warn { margin-top: 10px; font-size: var(--t-xs); color: var(--dim) }
.tc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px }
.tc-acts .tc-more-d { flex: 1 1 100%; border: 0; background: none; box-shadow: none; margin: 2px 0 0 }
.tc-acts .tc-dbar { padding: 6px 0; font-size: var(--t-sm); font-weight: 600; color: var(--accent-deep); background: none; border: 0 }
.tc.short .tc-v { color: var(--dim) }
@media (max-width: 560px) {
  .tc { padding: 14px 14px 10px }
  .tc-facts { grid-template-columns: 1fr 1fr }
  .tc-fact:nth-child(3) { border-left: 0 }
  .tc-fact:nth-child(n+3) { border-top: 1px solid var(--line) }
  .tc-via { display: block; margin: 2px 0 0 }
  .tc-flag { width: 38px; height: 38px }
}
/* Best for your points (26 Sep 2026): three wide rows above the flags */
.bp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px }
.bp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); position: relative; overflow: hidden;
  transition: border-color 140ms linear, box-shadow 140ms linear }
.bp:hover { border-color: var(--accent); box-shadow: var(--shadow-soft) }
.bp-flag { width: 30px; height: 30px; flex: none; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); filter: saturate(.8) }
.bp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.bp-route { font-size: var(--t-base); font-weight: 600; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bp-cost { font-size: var(--t-xs); color: var(--dim) }
.bp-save { flex: none; text-align: right; display: flex; flex-direction: column }
.bp-k { font-size: var(--t-micro); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint) }
.bp-save b { font-size: var(--t-lead); color: var(--mint) }
.tc-pp { color: var(--mint); font-weight: 600 }
@media (max-width: 900px) { .bp-row { grid-template-columns: 1fr } }
@media (max-width: 560px) { .bp-sec .vsec-aside { display: none } }
/* programme logos on a country tile, in full colour (4 Oct 2026: grey marks
   read as blank squares); a tile you cannot book yet dims them */
.dz-show .dz-logos { display: inline-flex; gap: 4px }
.dz-show .dz-logos > span { display: inline-flex }
.dz-show .dz-logos .kcmark { width: 20px; height: 20px }
.dz-show.short .dz-logos > * { opacity: .6 }

/* Phone Menu sheet, compact (28 Sep 2026): the single long list covered most
   of a phone even when capped. Now a top row of three buttons (Ask, My stack,
   Start over) and the three groups side by side as short columns - about a
   third of the screen, with the page still visible below. */
@media (max-width: 900px) {
  .rail.navopen .railnav {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px;
    align-items: start; padding: 12px 16px 14px;
  }
  .rail.navopen .railnav > a {
    padding: 9px 6px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); font-weight: 600; font-size: var(--t-sm); text-align: center; white-space: nowrap;
  }
  .rail.navopen .railnav > a.on { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint) }
  .rail.navopen .railnav > a.navdesk { display: none }
  .rail.navopen .navgroup { display: flex; flex-direction: column; align-items: stretch; min-width: 0 }
  .rail.navopen .navgroup-b { padding: 2px 0 6px }
  .rail.navopen .navgroup-p { display: flex; flex-direction: column }
  .rail.navopen .navgroup-p a { padding: 7px 0; font-size: var(--t-sm); line-height: 1.25; white-space: normal }
  .rail.navopen .sheetreset {
    grid-column: 3; grid-row: 1; align-self: start; margin: 0 0 10px; padding: 9px 6px;
    font-size: var(--t-sm); text-align: center; white-space: nowrap;
  }
}

/* Phone: the cards step's Done button sat below the card list, off the first
   screen (29 Sep 2026). It now stays pinned to the bottom of the screen while
   the list scrolls. */
@media (max-width: 640px) {
  .stackbar {
    position: sticky; bottom: 0; z-index: 5;
    margin: 18px -20px -20px !important; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -10px 20px -16px rgba(11,12,14,.35);
  }
  .stackbar .btn { flex: 1 1 auto }
  .stackbar .note { flex-basis: 100%; font-size: var(--t-xs) }
}

/* Phone list rows, tighter (29 Sep 2026): the logo (and rank) sat alone on the
   first line with the value, and the card name dropped to a second line - a
   top-10 list ran for pages. Now the name shares the first line with the logo
   and the headline number; only the small sub-line (fees, points, %) wraps
   below. The value cell is flattened so its two parts can sit on the two lines. */
@media (max-width: 640px) {
  .crow.has-note { align-items: flex-start }
  .crow.has-note > .grow { flex: 1 1 0; order: 0; min-width: 0 }
  .crow.has-note > div:last-child:has(> .v) { display: contents }
  .crow.has-note > div:last-child:has(> .v) > .v { order: 0; margin-left: auto; max-width: 40%; text-align: right; line-height: 1.3 }
  .crow.has-note .bc-rank { width: 14px !important }
  .crow.has-note > div:last-child:has(> .v) > .vp { order: 3; flex: 1 1 100%; text-align: left; margin-top: -4px }
}

/* Phone: the transfer summary's three boxes (best / worst / spread) stacked
   into three full-width cards; they are three small numbers - one row. */
@media (max-width: 640px) {
  .balgrid.stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
  .balgrid.stats3 .bal { padding: 12px 10px }
  .balgrid.stats3 .pn { font-size: var(--t-micro) }
  .balgrid.stats3 .pv { font-size: var(--t-h3); margin-top: 4px }
  .balgrid.stats3 .pw { font-size: var(--t-micro); line-height: 1.35; margin-top: 4px }
}

/* Phone transfer rows, two lines (29 Sep 2026): rank, logo, name and caret
   on the first; miles on the left and the rupee value on the right of the
   second. The airline/hotel pill goes - the logo and the filter chips above
   already say which. */
@media (max-width: 640px) {
  .trow.tog .kindpill { display: none }
  .trow.tog .grow { order: 3; flex: 1 1 calc(100% - 110px) }
  .trow.tog .caret { order: 4 }
  .trow.tog .get { order: 5; margin-left: 0; padding-left: 29px }
  .trow.tog .worth { order: 6; flex: 1 1 auto; margin-top: 0; text-align: right }
}

/* First page (29 Sep 2026): what the site does as three short lines, then its
   scope as plain counted facts. */
.leadlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px }
.leadlist li { position: relative; padding-left: 26px; font-size: var(--t-h3); color: var(--body); line-height: 1.4 }
.leadlist li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) }
.factrow { margin-top: 14px; font-size: var(--t-sm); color: var(--dim) }
@media (max-width: 640px) { .leadlist li { font-size: var(--t-lead) } }

/* Answer card (29 Sep 2026): one figure on the face, how its points were
   counted under it, and what logging does. */
.ans-basis { margin: -4px 26px 16px; font-size: var(--t-sm); color: var(--ans-dim, var(--dim)); line-height: 1.45 }
.ans-loghint { margin: -6px 26px 16px; font-size: var(--t-xs); color: var(--ans-faint, var(--faint)); line-height: 1.45 }
.mathbox .ml.rule { color: var(--dim) }
.mathbox .ans-worth { margin: 14px 0 0; padding: 12px 0 0 !important; border-top: 1px solid var(--ans-rule, var(--line)) }
@media (max-width: 640px) { .ans-basis, .ans-loghint { margin-left: 18px; margin-right: 18px } }

/* The answered question as one line with Edit (29 Sep 2026). */
.asksum { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface) }
.asksum-q { font-size: var(--t-base); color: var(--dim); min-width: 0 }
.asksum-q b { color: var(--body); font-weight: 600 }
.asksum .btn { padding: 6px 14px; font-size: var(--t-sm) }

/* Show the math (29 Sep 2026): the formula, then what the points get you as
   label / rupee rows. */
.mathbox .ans-worth { display: block }
.mathbox .ans-worth-k { display: block; margin-bottom: 6px }
.wrow { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: var(--t-sm); color: var(--ans-dim, var(--dim)) }
.wrow b { color: var(--ans-strong, var(--body)); font-weight: 600; white-space: nowrap }
.mathbox .srcline a { color: inherit; text-decoration: underline; text-underline-offset: 2px }

.hf-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: var(--t-sm); color: var(--dim) }

/* After a log: what it did, once, with Undo (29 Sep 2026). */
.logged-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px;
  padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--mint) 35%, var(--line)); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--mint) 8%, var(--surface)); font-size: var(--t-sm); color: var(--body); line-height: 1.5 }
.logged-bar .btn { flex: none; padding: 6px 14px; font-size: var(--t-sm) }



/* chart prices (route view) */
/* one row per programme: logo, what and how, then its cabins side by side */
.ch-list { padding: 0 }
.ch-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: start; padding: 14px 16px }
.ch-row + .ch-row { border-top: 1px solid var(--line) }
.ch-row > .kcmark-md { margin-top: 2px }
.ch-prices { display: flex; gap: 0 }
.ch-price { width: 170px; flex: none; padding-left: 14px; border-left: 1px solid var(--line); text-align: left }
.ch-price + .ch-price { margin-left: 14px }
.ch-price .tc-v { font-size: var(--t-lead) }
.ch-none { color: var(--faint) }
.ch-links { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-top: 6px; font-size: var(--t-xs) }
.ch-links > a { color: var(--accent); text-decoration: none }
.ch-links > a:hover { text-decoration: underline }
.ch-more[open] { flex-basis: 100% }
@media (max-width: 720px) {
  .ch-row { grid-template-columns: auto 1fr }
  .ch-prices { grid-column: 1 / -1; margin-top: 8px }
  .ch-price { min-width: 0; flex: 1 }
}
.ch-more summary { cursor: pointer; font-size: var(--t-xs); color: var(--dim) }

/* Access gate as one dark banner (6 Oct 2026) - after every earlier .gate rule */
.gate.gate-bar {
  display: flex; align-items: center; gap: 16px; margin-top: 16px;
  border: 0; border-radius: 12px; padding: 18px 22px; color: #fff;
  background: linear-gradient(120deg, var(--trip-from), var(--trip-to));
}
.gate-bar .gate-ico { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #F2C473 }
.gate-bar .gate-ico svg { width: 17px; height: 17px }
.gate-bar .gate-txt { flex: 1; min-width: 0 }
.gate-bar .gate-what { margin: 0; font-size: var(--t-base); font-weight: 600; color: #fff; line-height: 1.4 }
.gate-bar .gate-free { margin: 3px 0 0; padding: 0; border: 0; font-size: var(--t-xs); color: rgba(255,255,255,.62) }
.gate-bar .gate-free b { color: rgba(255,255,255,.85); font-weight: 600 }
.gate-bar .gate-count { margin: 0; color: rgba(255,255,255,.62); letter-spacing: 0 }
.gate-bar .gate-act { margin: 0; flex: none; flex-wrap: nowrap }
.gate-bar .gate-act .btn { background: #F2C473; color: #1E1B34; border-color: transparent; white-space: nowrap }
.gate-bar .gate-act .btn:hover { background: #e3b45f }
.gate-bar .gate-act .btn.quiet { background: rgba(255,255,255,.1); color: #fff }
@media (max-width: 720px) {
  .gate.gate-bar { flex-wrap: wrap }
  .gate-bar .gate-act { flex: 1 1 100%; flex-wrap: wrap }
  .gate-bar .gate-act .btn { flex: 1 1 auto }
}

/* Remove on a logged spend: quiet until armed, then the shared red (6 Oct 2026) */
.lrow-rm { flex: none; margin-left: 12px; border: 0; background: none; padding: 4px 9px; border-radius: 6px; font-size: var(--t-xs); font-weight: 600; color: var(--faint); cursor: pointer }
.lrow-rm:hover { color: var(--clay) }
.lrow-rm.arm { color: var(--surface); background: var(--clay) }

/* ================= BACK LINK =================
   One way back to the list a page sits in (6 Oct 2026: "the back button
   should be better" - it was a tiny boxed button). A clear text link with a
   round arrow, a full-size tap target, and the same look on every page. */
.backlink { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 4px -6px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--dim); text-decoration: none; cursor: pointer; transition: background .15s, color .15s }
.backlink-a { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent-deep); font-size: var(--t-sm); transition: transform .15s }
.backlink:hover { background: var(--raise); color: var(--body) }
.backlink:hover .backlink-a { transform: translateX(-2px) }
.backlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* ================= CARD FACE (KCUI.cardFace) =================
   One way to picture a card everywhere: the bank's own artwork when we have
   it (site/cards), else the card's colour face with the bank's mark. */
.kc-face { position: relative; display: block; aspect-ratio: 1.586 / 1; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, var(--a, #475467), var(--b, #1D2939)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) }
.kc-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 42%) }
.kc-face > .m { position: absolute; left: 7%; top: 10%; width: 22% !important; height: auto !important; aspect-ratio: 1; max-width: 26px; border-radius: 3px !important; box-shadow: none !important }
.kc-face.has-art { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line) }
.kc-face.has-art::after { display: none }
.kc-face.portrait { aspect-ratio: 1 / 1.586 }
.ans-face.kc-face.portrait { width: 41px }
.cmp-face.kc-face.portrait { max-width: 95px }
.cd-face.cd-face-art .kc-face { width: 100% }
.cd-face.cd-face-art .kc-face.portrait { width: 240px; max-width: 100%; margin: 0 auto }
.kc-face.has-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5%; box-sizing: border-box; display: block }
.ans-face.kc-face { width: 64px; flex: none; border-radius: 6px }
.cmp-face.kc-face { width: 100%; max-width: 150px; margin-bottom: 8px }
.cd-face.cd-face-art { padding: 0; background: none; box-shadow: none; aspect-ratio: auto }
.cd-face.cd-face-art::after { display: none }
.cd-face.cd-face-art .kc-face { border-radius: var(--r-lg); box-shadow: var(--shadow-lg) }
.cd-face.cd-face-art .kc-face.has-art img { padding: 0 }
@media (max-width: 640px) { .ans-face.kc-face { width: 52px } }

/* a catalogue product that is a plan, not money to spend (vouchers page) */
.crow .warnpill { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--clay); background: color-mix(in srgb, var(--clay) 12%, transparent); vertical-align: middle }
.pickgap.offer { color: var(--accent-deep) }
.ans .pickgap.offer { color: var(--ans-dim) }