/* Agrandir: Reimbsr's wordmark face, for the logo and the name in running copy */
@font-face {
  font-family: "Agrandir";
  src: url("fonts/Agrandir-GrandLight.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Agrandir";
  src: url("fonts/Agrandir-GrandHeavy.otf") format("opentype");
  font-weight: 800;
  font-display: swap;
}

/* Tokens follow the app's design hand-off (Reimbsr theme.ts, "Calm Clinic") */
:root {
  --canvas: #f5f2ec;
  --canvas-2: #eae5da;
  --surface: #fbfaf7;
  --ink: #27251e;
  --muted: #6e6a5c;
  --faint: #98937f;
  --navy: #14142a;
  --night: #17173a;
  --sage: #5a7263;
  --sage-tint: #e7ede8;
  --slate: #5f6484;
  --slate-bg: #e7e6ee;
  --amber: #9a5b12;
  --amber-bg: #f6ebd9;
  --green: #3e7a54;
  --green-bg: #e4f0e7;
  --peach: #f8a47f;
  --mint: #aaebba;
  --rose: #d66078;
  --nhs-blue: #005eb8; /* NHS Blue, from the NHS identity colour palette */
  --sky: #6096cd;
  --hair: rgba(39, 37, 30, .1);
  --ink-30: rgba(39, 37, 30, .3);
  --ink-50: rgba(39, 37, 30, .5);
  --ink-70: rgba(39, 37, 30, .72);
  --light-15: rgba(245, 242, 236, .15);
  --light-70: rgba(245, 242, 236, .72);

  --serif: "Newsreader", Georgia, serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand: "Agrandir", "Schibsted Grotesk", Arial, sans-serif;

  --radius-s: 15px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-xl: 64px;
  --ease: cubic-bezier(.2, .85, .25, 1);

  /* film grain, as on the app's splash and icon */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The hero ribbon and marquees run off the right edge on purpose; clip that so phones
   don't lay the page out wider than the screen and zoom out. */
html { overflow-x: clip; }
body {
  background:
    radial-gradient(60% 40% at 0% 8%, rgba(96, 150, 205, .16), transparent 70%),
    radial-gradient(50% 35% at 100% 0%, rgba(248, 164, 127, .28), transparent 70%),
    var(--canvas);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* not hidden: that makes body a scroll container and breaks the sticky nav */
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-wrap: balance;
}
/* headings break into even lines, never a lone last word */
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.display em, .h1-deck { text-wrap: balance; }
.lede, .owed-intro, .scene-close { text-wrap: pretty; }
.h1 { font-size: clamp(52px, 8.2vw, 116px); line-height: 1.04; letter-spacing: -.045em; }
.h2 { font-size: clamp(42px, 5.6vw, 76px); }
.h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; }
.brand-name { font-family: var(--brand); font-weight: 800; }
.center { text-align: center; }
.money { font-family: var(--serif); font-weight: 300; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: var(--canvas);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .01em;
  box-shadow: 0 8px 14px -8px rgba(39, 37, 30, .45);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgba(39, 37, 30, .55); }
.btn:active { transform: none; }
.btn svg { width: 18px; height: 18px; }
.btn-lg { padding: 16px 26px; font-size: 16px; }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: none; }
.btn-light { background: var(--canvas); color: var(--navy); border-color: var(--canvas); }
.stores { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* The official App Store and Google Play badges (img/badges), wherever the app is offered */
.store-badge { display: inline-block; line-height: 0; border-radius: 9px; transition: transform .2s var(--ease); }
.store-badge:hover { transform: translateY(-1px); }
.store-badge img { display: block; width: auto; height: 52px; }
/* The badge pair, with the reimbsr.com/get QR code centred above it on computers only (a phone
   is already where it needs to be). The QR sits as far above the badges as they sit apart. */
.get-app { --gap: 14px; display: inline-flex; flex-direction: column; align-items: center; gap: var(--gap); }
.get-app .stores, .get-app .ask-ctas, .get-app .app-promo-badges { gap: var(--gap); margin: 0; }
.get-app-qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .get-app-qr { display: block; width: 136px; height: 136px; }
  .get-app--promo .get-app-qr { width: 84px; height: 84px; }
}
.get-app--promo { --gap: 6px; }

/* ---------- Aurora art (the app's splash gradient) ---------- */
.aurora {
  position: absolute; inset: -40px; z-index: -1;
  background:
    radial-gradient(45% 45% at 10% 10%, #1e2a8f 0%, transparent 70%),
    radial-gradient(40% 50% at 0% 60%, #2f7fd6 0%, transparent 70%),
    radial-gradient(45% 45% at 15% 100%, #7fe0b5 0%, transparent 70%),
    radial-gradient(40% 40% at 95% 30%, #e9453a 0%, transparent 70%),
    radial-gradient(45% 45% at 80% 85%, #f39a45 0%, transparent 70%),
    radial-gradient(35% 35% at 100% 0%, #120d2a 0%, transparent 70%),
    linear-gradient(140deg, #2b2f9a, #c9573e 70%, #f0a15c);
  animation: drift 16s ease-in-out infinite alternate;
}
.aurora::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .5; mix-blend-mode: overlay; }
.aurora.night {
  background:
    radial-gradient(45% 40% at 20% 15%, #24307e 0%, transparent 70%),
    radial-gradient(40% 40% at 85% 40%, #b8432f 0%, transparent 70%),
    radial-gradient(50% 40% at 30% 95%, #2f8f84 0%, transparent 70%),
    linear-gradient(170deg, #141433, #2a1d3f 60%, #3a1f22);
}
@keyframes drift { to { transform: scale(1.12) translate(2%, -2%) rotate(2deg); } }

/* ---------- Nav ---------- */

.nav-wrap { position: sticky; top: 12px; z-index: 50; padding: 0 16px; margin-top: 12px; }
.nav {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  background: rgba(251, 250, 247, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 1px var(--hair);
  border-radius: 20px;
  padding: 9px 9px 9px 14px;
  transition: box-shadow .3s var(--ease);
}
.nav.scrolled { box-shadow: 0 0 0 1px var(--hair), 0 10px 30px -14px rgba(39, 37, 30, .4); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--brand); font-size: 26px; letter-spacing: .01em; }
.logo img { width: 38px; height: 38px; border-radius: 10px; }
/* Optical centring: flex centres the x-height, so the caps sat high; centre the cap height on the icon */
.logo span { transform: translateY(.1em); }
.seg { display: flex; background: var(--canvas-2); border-radius: 999px; padding: 3px; }
.seg button { padding: 6px 14px; border-radius: 999px; font-family: var(--sans); font-size: 13px; transition: background .25s; }
.seg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(39, 37, 30, .12); }
.nav-links { margin-left: auto; display: flex; gap: 20px; color: var(--ink-70); font-family: var(--sans); font-size: 16px; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
/* seven links: closer together on narrower computers, so they stay on one line until they hide at 900px;
   below 1180px the logo's icon stands alone to make room, and below 1000px the button is smaller */
@media (max-width: 1240px) { .nav-links { gap: 18px; font-size: 15px; } }
@media (min-width: 901px) and (max-width: 1180px) { .nav { gap: 16px; } .nav-links { gap: 16px; } .nav .logo span { display: none; } }
@media (min-width: 901px) and (max-width: 1000px) { .nav { gap: 12px; } .nav-links { gap: 11px; font-size: 13.5px; } .nav .btn { padding: 10px 16px; font-size: 15px; } }
.nav .btn { padding: 12px 22px; font-size: 16px; white-space: nowrap; }

/* "Free calculators": a <details> dropdown in the header (nav.js closes it on a click elsewhere or Escape) */
.nav-drop { position: relative; }
.nav-drop > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .7; transition: transform .2s var(--ease), margin .2s var(--ease); }
.nav-drop[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-drop > summary:hover, .nav-drop[open] > summary, .nav-drop.on > summary { color: var(--ink); }
.nav-drop > summary:focus-visible { outline: 2px solid var(--nhs-blue); outline-offset: 4px; border-radius: 4px; }
.nav-menu {
  position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%); z-index: 2;
  display: grid; width: 340px; padding: 8px; white-space: normal;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 20px;
  box-shadow: 0 24px 50px -24px rgba(39, 37, 30, .45);
}
.nav-menu a { display: grid; gap: 2px; padding: 10px 14px; border-radius: 13px; transition: background .2s; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--canvas); outline: none; }
.nav-menu a[aria-current] { background: var(--canvas-2); }
.nav-menu b { font-weight: 500; font-size: 15px; color: var(--ink); }
.nav-menu span { font-size: 13px; line-height: 1.4; color: var(--muted); }

/* the phone menu: every header link, the calculators first; shown when the header links hide at 900px */
.nav-mob { display: none; }
.nav-mob > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; cursor: pointer; list-style: none; transition: background .2s; }
.nav-mob > summary::-webkit-details-marker { display: none; }
.nav-mob > summary:hover, .nav-mob[open] > summary { background: var(--canvas-2); }
.nav-mob > summary:focus-visible { outline: 2px solid var(--nhs-blue); outline-offset: 2px; }
.nav-mob-icon, .nav-mob-icon::before, .nav-mob-icon::after { display: block; width: 18px; height: 1.6px; border-radius: 1px; background: var(--ink); transition: transform .25s var(--ease), background .25s; }
.nav-mob-icon { position: relative; }
.nav-mob-icon::before, .nav-mob-icon::after { content: ""; position: absolute; left: 0; }
.nav-mob-icon::before { top: -6px; }
.nav-mob-icon::after { top: 6px; }
.nav-mob[open] .nav-mob-icon { background: transparent; }
.nav-mob[open] .nav-mob-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-mob[open] .nav-mob-icon::after { transform: translateY(-6px) rotate(-45deg); }
.nav-mob-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  display: grid; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 8px 8px 12px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 20px;
  box-shadow: 0 24px 50px -24px rgba(39, 37, 30, .45);
}
.nav-mob-h { padding: 12px 14px 4px; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav-mob-panel a { padding: 12px 14px; border-radius: 12px; font-size: 16px; }
.nav-mob-panel a:hover { background: var(--canvas); }
.nav-mob-panel a[aria-current] { background: var(--canvas-2); font-weight: 500; }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 1; padding: 90px 16px 200px; text-align: center; }   /* room for the phones below the buttons */
.hero .h1 { margin: 26px 0 30px; }
.hero .h1 em { display: block; }
/* The headline's figure: part of the h1, set as a deck line under it */
.h1-deck {
  display: block; max-width: 720px; margin: 22px auto 0;
  font: 400 clamp(20px, 2.1vw, 28px)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink-70);
}
/* "At least £999 a year for a typical IMT1 in England. See how": only the amount and the
   grade change (script.js). While they swap, each slot eases to the new word's width so the
   words around it glide rather than jump; the old word lifts away, the new one rises in. */
.h1-deck .dl-end { display: block; }
.rot { display: inline-block; position: relative; white-space: nowrap; transition: width .5s var(--ease); }
.rot.moving::before { content: "\200b"; } /* holds the line's height and baseline while both words float */
.rot.moving .rot-in { position: absolute; top: 0; left: 50%; translate: -50% 0; }
.rot-in { display: inline-block; transition: opacity .45s var(--ease), transform .5s var(--ease), filter .45s var(--ease); }
.rot.moving .rot-in:not(.on) { opacity: 0; transform: translateY(.4em); filter: blur(3px); }
.rot.moving .rot-in.out { transform: translateY(-.4em); }
.deck-link { color: var(--ink); border-bottom: 1px solid var(--ink-30); transition: border-color .2s; }
/* a taller tap area than the line it sits on, without moving the line or its underline */
.deck-link { position: relative; }
.deck-link::after { content: ""; position: absolute; inset: -12px -6px; }
.deck-link:hover { border-color: var(--ink); }
@media (max-width: 560px) { .h1-deck .dl { display: block; } }
.hero .lede { max-width: 600px; margin: 0 auto 32px; }
.hero-content { position: relative; z-index: 2; }
/* The ribbon canvas: pinned to the hero's right, running off the top and the right
   edge like a bolt of cloth, under the copy. */
.ribbon { position: absolute; z-index: 0; top: -12%; right: -14%; width: 78%; height: 132%; pointer-events: none; }
.ribbon canvas { display: block; width: 100%; height: 100%; }
/* The bolt dissolves at both ends of its canvas instead of stopping on a hard edge. */
.ribbon {
  --fade: linear-gradient(180deg, transparent 0, #000 140px, #000 72%, transparent 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.ribbon--off { display: none; }

/* Hero animation: geometry mirrors the reference wrapper */
.hero-anim {
  position: relative; z-index: 2; /* above the hero's ribbon canvas, so the claim band stays clean */
  display: flex;
  transform: scale(1.5); transform-origin: 50% 100%;
  margin-top: -21vw; margin-bottom: 5rem;
  pointer-events: none;
}
.half { width: 50%; display: flex; font-size: 1.125rem; }
.half.left { margin-top: -9px; }
.half svg { width: 100%; height: auto; overflow: visible; }
.half text { font-family: var(--sans); font-size: inherit; font-weight: 600; }
.half .raw { fill: var(--ink); opacity: .25; baseline-shift: -20%; }
/* the claim band: the ribbon is drawn in ems so it grows with the text at every size,
   and dy (in the markup) drops the text by half its cap height onto the ribbon's centre line */
.half .clean { fill: var(--canvas); }
.half.right path { stroke-width: 1.67em; }

.comp-glow {
  position: absolute; z-index: 10; inset: auto 0 2.5%; margin: 0 auto;
  width: 5%; height: 5rem; border-radius: 100%;
  background: var(--canvas); filter: blur(5px);
}
.comp {
  position: absolute; z-index: 10; inset: auto 0 2.5%; margin: 0 auto;
  width: 11%; aspect-ratio: 269 / 161;
  container-type: inline-size;
}
/* Where the pill was: a bare copy of the Mobile App tile (two phones and the copy
   panel, no card or tag). --fit, set in script.js, scales it with the hero. */
.tile.tile--bare {
  --tile: #f9f9f6; --tile-ink: #1c1c1c; --dur: .41s; --spring: cubic-bezier(.3, 1.25, .5, 1);
  position: absolute; left: 50%; bottom: 0;
  translate: -50% 0; scale: var(--fit, .6); transform-origin: 50% 100%;
  background: transparent; pointer-events: none;
}
/* only the phones and the panel catch the pointer, so the hero buttons stay clickable */
.tile--bare .ph, .tile--bare .tile-copy { pointer-events: auto; }
.tile.tile--bare.on { box-shadow: none; }
.tile--bare .tile-copy { height: 109px; border-radius: 15px; } /* three lines of copy here, not two */
.tile--bare .tile-art { clip-path: inset(-120px -120px 109px -120px); }
.tile--bare .tile-copy::before { display: none; } /* the feature tiles' divider line, not wanted on the hero panel */
/* touch screens: script.js drives --p (0 to 1) from scroll; same end pose as the hover */
.tile--bare.scrub .ph { transition: none; }
.tile.tile--bare.scrub .ph-left { transform: translate(calc(4.5px * var(--p, 0)), calc(-15px * var(--p, 0))) rotate(calc(-17deg - 11deg * var(--p, 0))) scale(calc(1 + .123 * var(--p, 0))); }
.tile.tile--bare.scrub .ph-right { transform: translate(calc(25px * var(--p, 0)), calc(-15px * var(--p, 0))) rotate(calc(17deg + 4deg * var(--p, 0))) scale(calc(1 + .126 * var(--p, 0))); }

/* ---------- Set the scene: seven headaches, each beside what Reimbsr does about it (leads into the tiles) ---------- */
.scene { padding: 10px 16px 70px; text-align: center; }
.scene .h2 { margin: 14px 0 32px; font-size: clamp(34px, 4.2vw, 56px); }
.scene .h2 em, .hero .eyebrow { display: block; }
/* narrow screens: every two-part heading puts its italic half on its own line */
@media (max-width: 900px) { .h2 em { display: block; } }
/* Without / With: the headache, life without Reimbsr, life with it. The With column's green-edged
   panel is drawn once behind the table (::before), at the column's fixed position, so its border
   has no seams. */
.vs-wrap { --label: 26%; --with: 38%; position: relative; max-width: 960px; margin: 0 auto; }
.vs-wrap::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--with);
  background: var(--sage-tint); border: 2px solid var(--green); border-radius: 22px;
}
.vs { position: relative; width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; }
.vs th, .vs td { padding: 14px 22px; font-size: 15.5px; line-height: 1.4; vertical-align: top; }
.vs thead th { padding-top: 24px; padding-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--ink); vertical-align: middle; }
/* column widths come from the header row (fixed layout) */
.vs thead td { width: var(--label); }
.vs tbody th { padding-left: 0; font: 400 19px/1.2 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.vs td { color: var(--ink-70); }
.vs tr > :last-child { width: var(--with); color: var(--green); font-weight: 500; }
.vs thead tr > :last-child { color: var(--ink); font-weight: 600; }
.vs tbody tr:last-child > * { padding-bottom: 26px; }
.vs-cta { margin-top: 36px; }
/* "With [icon] Reimbsr"; on a narrow column the icon and name move to a second line together */
.vs-with, .vs-brand { display: inline-flex; align-items: center; gap: 6px; }
.vs-with { flex-wrap: wrap; row-gap: 2px; }
.vs-brand img { width: 22px; height: 22px; border-radius: 6px; }
.scene-close { margin-top: 28px; font: 300 clamp(24px, 2.6vw, 32px)/1.1 var(--serif); letter-spacing: -.03em; }
@media (max-width: 640px) {
  .scene { padding-bottom: 48px; }
  .scene .h2 { margin-bottom: 24px; }
  /* phones: two columns. Each headache sits in bold above its line in the Without column,
     and the fix fills the With column beside both. */
  .vs-wrap { --with: 50%; }
  .vs-wrap::before { border-radius: 18px; }
  .vs, .vs thead, .vs tbody { display: block; }
  .vs tr { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
  .vs tr > *, .vs tr > :last-child { width: auto; }
  .vs thead td { display: none; }
  .vs th, .vs td { padding: 0 10px 0 0; font-size: 14px; line-height: 1.4; }
  .vs thead th { padding: 18px 10px 8px 0; font-size: 14px; }
  .vs tbody th { grid-column: 1; grid-row: 1; padding-top: 14px; font: 600 14px/1.3 var(--sans); letter-spacing: 0; }
  .vs tbody td:first-of-type { grid-column: 1; grid-row: 2; padding-top: 2px; padding-bottom: 14px; }
  .vs tr > :last-child { grid-column: 2; grid-row: 1 / span 2; padding: 14px 12px; }
  .vs thead tr > :last-child { padding: 18px 12px 8px; }
  .vs tbody tr:last-child > * { padding-bottom: 18px; }
  .vs tbody tr:last-child > th { padding-bottom: 0; }
  .vs-with, .vs-brand { gap: 4px; }
  .vs-brand img { width: 18px; height: 18px; border-radius: 5px; }
  .scene-close { margin-top: 24px; }
}

/* ---------- Feature tiles (hover cards; sizes and motion measured from supabird.io) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tiles {
  --tile: #f9f9f6; --tile-ink: #1c1c1c; --tile-pill: #eaeae0;
  --dur: .41s; --spring: cubic-bezier(.3, 1.25, .5, 1);
  position: relative;
  padding: 10px 16px 130px;
  background: linear-gradient(180deg, rgba(237, 223, 208, 0), rgb(237, 223, 208) 45%, rgba(237, 223, 208, 0) 78%);
}
/* Framer's spring (bounce .2, 0.4s): overshoots 1.5% and settles in ~0.41s */
@supports (transition-timing-function: linear(0, 1)) {
  .tiles, .tile.tile--bare { --spring: linear(0, .071, .227, .405, .572, .712, .82, .898, .95, .983, 1.002, 1.012, 1.015, 1.015, 1.013, 1.01, 1.007, 1.005, 1.003, 1.002, 1.001, 1); }
}
.tile-grid { display: grid; grid-template-columns: repeat(3, 300px); gap: 32px 30px; justify-content: center; }
.tile {
  position: relative; display: block; width: 300px; height: 300px;
  border-radius: 15px; background: var(--tile); color: var(--tile-ink);
  transition: transform var(--dur) var(--spring), box-shadow var(--dur) var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.tile.on { transform: scale(1.02); box-shadow: 0 10px 30px rgba(243, 89, 33, .15); }
.tile:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.tile-tag {
  position: absolute; left: 18px; top: 16px; padding: 4px 12px; border-radius: 20px;
  background: var(--tile-pill); color: rgba(28, 28, 28, .6);
  font: 700 16px/19.2px var(--sans);
  z-index: 2; /* above .tile-art, so the Ask tile's rows slide under it */
}
/* The art runs under the copy panel: anything below its top edge is cut, even outside the card */
.tile-art { position: absolute; inset: 0; clip-path: inset(-120px -120px 91px -120px); }
.tile-copy {
  position: absolute; left: 0; right: 0; bottom: 0; height: 91px; padding: 0 10px;
  background: var(--tile); border-radius: 0 0 15px 15px;
}
.tile-copy::before { content: ""; display: block; height: 1px; background: rgba(28, 28, 28, .25); }
.tile-copy h3 { margin-top: 10px; font: 400 18px/19.8px var(--serif); letter-spacing: -.02em; }
.tile-copy p { margin-top: 10px; font: 500 16px/17.6px var(--sans); letter-spacing: -.03em; }
.tiles .av { display: block; flex: none; border-radius: 50%; }
.av-sky { background: linear-gradient(135deg, #2f7fd6, #7fe0b5); }
.av-amber { background: linear-gradient(135deg, #f39a45, #e9453a); }
.av-mint { background: linear-gradient(135deg, #7fe0b5, #f0a15c); }
.av-navy { background: linear-gradient(135deg, #1e2a8f, #2f7fd6); }
.av-rose { background: linear-gradient(135deg, #d66078, #f8a47f); }

/* Inbox: two receipts fan out */
.rcpt {
  position: absolute; overflow: hidden; padding: 14px;
  background: #fff; border: 1px solid rgba(28, 28, 28, .07); border-radius: 12px;
  font-size: 11.5px; line-height: 1.45;
  transition: transform var(--dur) var(--spring);
}
.rcpt-back { left: 97px; top: 55px; width: 200px; height: 180px; transform: rotate(10deg); }
.rcpt-front { left: 5px; top: 60px; width: 200px; height: 200px; transform: rotate(-14deg); box-shadow: 10px 4px 20px rgba(0, 0, 0, .04); }
.on .rcpt-back { transform: translate(2px, -10px) rotate(12deg); }
.on .rcpt-front { transform: translate(-4px, -9px) rotate(-16deg); }
.rcpt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rcpt-head .av, .rcpt-head img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.rcpt-head b { display: block; font-size: 12.5px; font-weight: 600; }
.rcpt-head small { display: block; font-size: 10px; color: var(--muted); }
/* Issuer crest (img/logos), as on the article receipts */
.rcpt-head .rcpt-logo { border-radius: 7px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgba(28, 28, 28, .12); }
.rcpt .mono { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; }
.rcpt-read {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 3px 8px;
  border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 10.5px; font-weight: 600;
}
.rcpt-read svg { width: 12px; height: 12px; }

/* Sort: four skeleton results twist apart and their labels light up */
.sk-grid { position: absolute; left: 10px; top: 82px; width: 280px; height: 148px; }
.sk { position: absolute; width: 136px; height: 64px; background: #fff; border-radius: 8px; transition: transform var(--dur) var(--spring); }
.sk::before, .sk::after { content: ""; position: absolute; background: rgba(28, 28, 28, .08); }
.sk::before { left: 11px; top: 16px; width: 68px; height: 13px; border-radius: 5px; }
.sk::after { left: 13px; top: 34px; width: 110px; height: 22px; border-radius: 7px; }
.sk:nth-child(2) { left: 144px; }
.sk:nth-child(3) { left: 144px; top: 84px; }
.sk:nth-child(4) { top: 84px; }
.on .sk:nth-child(1) { transform: rotate(-7deg); }
.on .sk:nth-child(2) { transform: rotate(13deg); }
.on .sk:nth-child(3) { transform: rotate(9deg); }
.on .sk:nth-child(4) { transform: rotate(-12deg); }
.sk-chip {
  position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px; height: 20px; padding: 0 5px;
  background: #fff; border-radius: 5px; white-space: nowrap;
  font: 500 13px/15.6px var(--sans); color: rgba(28, 28, 28, .4);
  transition: background-color var(--dur) var(--spring), color var(--dur) var(--spring);
}
.sk-chip svg { width: 12px; height: 12px; }
.on .sk-chip { background: #fff9ed; color: rgba(28, 28, 28, .8); }

/* Ask Reimbsr: the answered questions scroll up and two more arrive */
.tile-ask .asked { position: absolute; left: 30px; top: 64px; width: 240px; transition: transform var(--dur) var(--spring); }
.tile-ask.on .asked { transform: translateY(-74px); }
.ask-search {
  display: flex; align-items: center; gap: 5px; width: 140px; height: 28px; margin-left: auto; padding: 0 10px;
  background: #fff; border-radius: 8px; font: 500 15px/18px var(--sans); color: rgba(28, 28, 28, .8);
}
.ask-search svg { width: 17px; height: 17px; flex: none; }
.ask-rows { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.ask-rows li {
  display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 7px 0 10px;
  background: #fff; border-radius: 8px; white-space: nowrap;
  font: 500 15px/18px var(--sans); color: rgba(28, 28, 28, .8);
  transition: opacity var(--dur) var(--spring);
}
.ask-rows .av { width: 27px; height: 27px; }
.ask-rows span { flex: 1; overflow: hidden; }
.ask-rows svg { width: 24px; height: 24px; flex: none; color: rgb(243, 89, 33); opacity: .8; }
.ask-rows li:nth-child(n+3) { opacity: 0; }
.on .ask-rows li:nth-child(3) { opacity: .8; }
.on .ask-rows li:nth-child(4) { opacity: .6; }

/* Claims: the receipts line and the finished claim slide up, with their labels */
.tile-claim { overflow: hidden; }
.gv { position: absolute; left: 0; top: 60px; width: 300px; opacity: .7; transition: transform var(--dur) var(--spring), opacity var(--dur) var(--spring); }
.on .gv { transform: translateY(-40px); opacity: 1; }
.gv-a { position: absolute; left: 15px; top: 14px; width: 271px; }
.gv-b { position: absolute; left: -26px; top: 69px; width: 312px; transition: transform var(--dur) var(--spring); }
.on .gv-b { transform: translateY(13px); }
.gv-label {
  position: absolute; right: 0; top: 0; white-space: nowrap;
  font: 700 14px/17px var(--sans); color: rgba(28, 28, 28, .8);
  opacity: 0; transform: scale(.3); transform-origin: right top;
  transition: transform var(--dur) var(--spring), opacity var(--dur) var(--spring);
}
.gv-label em { font-style: normal; color: rgb(217, 119, 87); }
.on .gv-label { opacity: 1; transform: none; }
.gv-input, .gv-strip { position: absolute; top: 10px; transition: transform var(--dur) var(--spring); }
.on .gv-input, .on .gv-strip { transform: translateY(12px); }
.gv-input {
  left: 0; width: 271px; height: 36px; display: flex; align-items: center; padding: 0 11px;
  background: var(--tile-pill); border-radius: 10px; font: 400 13px/15.6px var(--sans); color: #000;
}
.gv-input span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gv-strip { left: -164px; display: flex; gap: 10px; }
.gv-card {
  height: 176px; padding: 12px 14px; font-size: 11.5px; line-height: 1.45;
  background: #fff; border: 1px solid rgba(28, 28, 28, .07); border-radius: 8px;
}
.gv-mail { width: 225px; }
.gv-doc { width: 241px; }
.gv-doc .rcpt-head img { border-radius: 7px; }

/* Deadlines: the months step on while the claim items shuffle between weeks */
.tile-due.on { box-shadow: 0 10px 30px rgba(243, 89, 33, .25); }
.cal {
  position: absolute; left: 10px; top: 71px; width: 280px; height: 171px;
  background: #f4f4ee; border-radius: 10px 10px 0 0; opacity: .7;
  transition: opacity var(--dur) var(--spring);
}
.on .cal { opacity: 1; }
.cal-day, .cal-row { position: absolute; font: 600 10px/12px var(--sans); color: rgba(28, 28, 28, .4); }
.cal-day { top: 6px; left: calc(43px + var(--c) * 78px); width: 74px; text-align: center; }
.cal-row { left: 8px; top: calc(26px + var(--r) * 49px); }
.cal-line { position: absolute; left: 43px; right: 5px; top: calc(18px + var(--r) * 49px); border-top: 1px dashed rgba(28, 28, 28, .14); }
.due-chip {
  position: absolute; left: calc(43px + var(--c) * 78px); top: 26px;
  display: flex; align-items: center; gap: 5px; width: 74px; height: 32px; padding: 0 6px;
  background: var(--tile-pill); border-radius: 6px; overflow: hidden; white-space: nowrap;
  font: 600 10px/12px var(--sans); color: rgba(28, 28, 28, .4);
  transform: translateY(calc(var(--r) * 49px));
  transition: transform var(--dur) var(--spring);
}
.due-chip .av { width: 21px; height: 21px; }
.tile-tabs { position: absolute; left: 15px; top: 16px; display: flex; align-items: center; gap: 13px; }
.tile-tabs span {
  padding: 4px 12px; border-radius: 20px;
  font: 700 14px/16.8px var(--sans); color: rgba(28, 28, 28, .3);
  transition: background-color var(--dur) var(--spring), color var(--dur) var(--spring);
}
.tile-tabs span:first-child { background: var(--tile-pill); color: rgba(28, 28, 28, .4); }
.tile-tabs span:last-child { padding: 0; }
.tile-due.on .tile-tabs span:first-child { background: transparent; color: rgba(28, 28, 28, .3); }
.tile-due[data-step="1"] .tile-tabs span:nth-child(2),
.tile-due[data-step="2"] .tile-tabs span:nth-child(3),
.tile-due[data-step="3"] .tile-tabs span:nth-child(1) { background: var(--tile-ink); color: var(--tile); }

/* Mobile app: two phones swing apart */
.tile-app.on { box-shadow: 0 14px 30px rgba(243, 89, 33, .12); }
.ph { position: absolute; transition: transform var(--dur) var(--spring); }
.ph-left { left: -24px; top: 37px; width: 203px; height: 224px; transform: rotate(-17deg); }
.ph-right { left: 125px; top: 65px; width: 143px; height: 207px; transform: rotate(17deg); }
.on .ph-left { transform: translate(4.5px, -15px) rotate(-28deg) scale(1.123); }
.on .ph-right { transform: translate(25px, -15px) rotate(21deg) scale(1.126); }
/* An iPhone in natural titanium, turned so its left edge and buttons show */
.ph-body {
  position: absolute; padding: 4px; border-radius: 24px;
  background: linear-gradient(100deg, #8a847a, #d8d3ca 7%, #efebe4 35%, #dcd6cc 70%, #a49e94);
  box-shadow: inset 0 0 0 .6px rgba(0, 0, 0, .35), 0 22px 30px -18px rgba(20, 20, 42, .5);
  transform-style: preserve-3d;
}
.ph-left .ph-body { left: 29px; top: 6px; width: 143px; height: 299px; transform: perspective(700px) rotateY(14deg); }
.ph-right .ph-body { left: -1px; top: 5px; width: 144px; height: 316px; transform: perspective(700px) rotateY(26deg); }
.ph-body::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 12px;
  transform-origin: left center; transform: rotateY(90deg); border-radius: 6px;
  background:
    linear-gradient(#5f5a52, #5f5a52) 50% 10% / 100% 4% no-repeat,
    linear-gradient(#5f5a52, #5f5a52) 50% 19% / 100% 8% no-repeat,
    linear-gradient(#5f5a52, #5f5a52) 50% 29% / 100% 8% no-repeat,
    linear-gradient(90deg, #9a948a, #c9c3b9 50%, #9a948a);
}
.ph-screen { height: 100%; padding: 3px; border-radius: 20px; background: #0c0c0d; overflow: hidden; }
.ph-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 17px; }

.tile-more {
  position: relative; display: flex; align-items: center; gap: 10px; width: fit-content;
  height: 43px; margin: 38px auto 0; padding: 0 43px;
  border-radius: 100px; background: var(--tile-pill); color: var(--tile-ink);
  font: 400 18px/21.6px var(--sans);
  transition: transform var(--dur) var(--spring);
}
.tile-more > span { font-size: 20px; line-height: 24px; }
.tile-more:hover { transform: scale(1.03); }
.spark { position: absolute; fill: var(--navy); stroke: #f0a15c; stroke-width: 1.2px; transition: transform var(--dur) var(--spring); }
.spark-1 { right: 16px; top: -16px; width: 20px; height: 20px; transform: rotate(-12deg); }
.spark-2 { right: -10px; top: -4px; width: 28px; height: 28px; transform: rotate(14deg); }
.tile-more:hover .spark-1 { transform: rotate(30deg) scale(1.15); }
.tile-more:hover .spark-2 { transform: rotate(-20deg) scale(1.1); }

@media (max-width: 1000px) {
  .tile-grid { grid-template-columns: repeat(2, 300px); }
  .tile-ask { order: 2; } .tile-sort { order: 3; } .tile-claim { order: 4; } .tile-app { order: 5; } .tile-due { order: 6; }
}
@media (max-width: 660px) {
  .tile-grid { grid-template-columns: 300px; }
  .tile-grid > .tile { order: 0; }
  .tiles { padding-bottom: 100px; }
}
@media (max-width: 340px) {
  .tile-grid, .tile-more { zoom: .92; }
}

/* ---------- Trust marquee ---------- */
.logos {
  color: var(--ink);
  padding: 90px 0 20px;
}
.logos .eyebrow { color: var(--ink-70); text-align: center; display: block; margin-bottom: 40px; }
/* the trust names run across a full-width NHS Blue band; the ends fade into the blue */
.marquee { position: relative; overflow: hidden; padding: 26px 0; background: var(--nhs-blue); color: #fff; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 12%; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--nhs-blue), rgba(0, 94, 184, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--nhs-blue), rgba(0, 94, 184, 0)); }
.marquee-track { display: flex; gap: 80px; width: max-content; animation: marquee 40s linear infinite; }
.marquee-track span { font-family: var(--serif); font-size: 28px; line-height: 1.2; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- What you get back (the app's grade estimate) ---------- */
.owed {
  background: var(--canvas); color: var(--ink);
  border-radius: var(--radius-xl);
  padding: 100px 16px 110px;
  text-align: center;
}
.owed .eyebrow { color: var(--ink-70); }
.owed .h2 { margin-top: 18px; }
.owed-intro { max-width: 620px; margin: 20px auto 40px; color: var(--ink-70); }
.grades { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 0 auto; }
.grades button {
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .02em;
  padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--hair); color: var(--ink-70);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.grades button:hover { color: var(--ink); border-color: var(--ink-30); }
.grades button.on { background: var(--navy); color: var(--canvas); border-color: var(--navy); }
.grades button:active { transform: scale(.97); }
.owed-card {
  max-width: 680px; margin: 36px auto 0; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 26px; padding: 34px 40px 30px;
  box-shadow: 0 30px 60px -36px rgba(39, 37, 30, .35);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.owed-card.swap { opacity: 0; transform: translateY(8px); transition: none; }
.owed-card .eyebrow { color: var(--ink-70); }
.owed-total {
  margin-top: 8px;
  font-family: var(--serif); font-weight: 300; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(54px, 7vw, 92px);
}
.owed-total .word { font-family: var(--sans); font-weight: 400; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: 0; color: var(--ink-70); margin: 0 .25em; }
.owed-sub { margin-top: 10px; font-size: 16px; color: var(--ink-70); }
.owed-rows { list-style: none; margin-top: 26px; }
.owed-rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 12px 0; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink-70);
}
.owed-rows li:last-child { border-bottom: 1px solid var(--hair); }
.owed-rows li span:first-child { flex: 1; }
.owed-rows li span:first-child small { display: block; font-size: 12.5px; color: var(--faint); margin-top: 1px; }
.owed-rows .amt { white-space: nowrap; }
.owed-rows .money { font-size: 20px; color: var(--ink); }
.owed-rows li.back { color: var(--ink); font-weight: 600; }
.owed-rows li.back .money { font-size: 24px; }
.owed-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.owed-note:empty { display: none; }
.owed-caveat { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); }
.owed-link { display: inline-block; margin-top: 16px; font-size: 15px; color: var(--nhs-blue); border-bottom: 1px solid rgba(0, 94, 184, .4); padding-bottom: 1px; }
.owed-link:hover { border-color: var(--nhs-blue); }
.owed-link[hidden] { display: none; }
.owed-foot { max-width: 560px; margin: 40px auto 0; font-size: 15px; color: var(--ink-70); }
.owed-foot a { font-family: var(--sans); color: var(--ink); border-bottom: 1px solid var(--ink-50); padding-bottom: 1px; }
.owed-foot a:hover { border-color: var(--ink); }

/* ---------- Pricing ---------- */
.pricing { padding: 140px 16px 0; text-align: center; }
.pricing .h2 { margin: 18px 0 20px; }
.pricing-lede { max-width: 640px; margin: 0 auto 56px; color: var(--ink-70); }
.plans { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; text-align: left; }
/* each card shares the grid's five rows (name, price, note, list, button), so Free and Pro line up */
.plan {
  position: relative; overflow: hidden; isolation: isolate; background: var(--canvas-2); border-radius: var(--radius-l); padding: 34px;
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
}
.plan h3 { font-family: var(--sans); font-weight: 500; font-size: 20px; }
.plan .price { margin: 10px 0 22px; color: var(--ink-70); }
.plan .price b { font-family: var(--serif); font-weight: 300; font-size: 48px; color: inherit; margin-right: 6px; }
.plan .price-note { margin: -14px 0 22px; font-size: 14px; color: var(--ink-70); }
.plan.pro .price-note { color: var(--light-70); }
.plan .price-note b { font-weight: 600; color: var(--ink); }
.plan.pro .price-note b { color: var(--canvas); }
.plan ul { list-style: none; margin-bottom: 28px; }
.plan li { padding: 9px 0 9px 26px; border-top: 1px solid var(--hair); position: relative; font-size: 15px; }
.plan li::before { content: "✓"; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
.plan .btn { justify-self: stretch; align-self: end; justify-content: center; text-align: center; text-wrap: balance; }
.plan.pro { color: var(--canvas); }
.plan.pro .price, .plan.pro .price b { color: var(--canvas); }
.plan.pro li { border-color: var(--light-15); }
.plan.pro li::before { color: var(--mint); }
.plan.pro .aurora { inset: -60px; }
.plan.pro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 20, 42, .2), rgba(20, 20, 42, .55)); }
/* Your year back, against Pro: the cost bar against the money back */
.payback { max-width: 880px; margin: 20px auto 0; padding: 30px 34px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--hair); text-align: left; }
.payback .eyebrow { display: block; margin-bottom: 18px; }
.payback-row { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 18px; padding: 8px 0; font-size: 15px; color: var(--ink-70); }
/* figures in the serif, the words around them small, as on the plans and the grade card */
.payback-fig { white-space: nowrap; text-align: right; min-width: 150px; }
.payback-row .money { font-size: 26px; color: var(--ink); margin: 0 .1em; }
.payback-row.back .money { color: var(--green); }
.payback-bar { height: 14px; border-radius: 7px; background: var(--canvas-2); overflow: hidden; }
.payback-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: 7px; transition: width .6s var(--ease); }
.payback-row.cost .payback-bar i { background: var(--rose); min-width: 6px; }
.payback-row.back .payback-bar i { background: linear-gradient(90deg, var(--sage), var(--green)); }
.payback-line { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink-70); }
.payback-line a { color: var(--ink); border-bottom: 1px solid var(--ink-50); white-space: nowrap; }
@media (max-width: 640px) {
  .payback { padding: 24px 20px; }
  .payback-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .payback-bar { grid-column: 1 / -1; grid-row: 2; }
  .payback-fig { min-width: 0; }
}

/* ---------- FAQ ---------- */
.faq { padding: 140px 16px 120px; text-align: center; }
.faq .h2 { margin: 18px 0 70px; }
.faq-box {
  max-width: 860px; margin: 0 auto; background: var(--canvas-2); border-radius: var(--radius-m);
  padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; min-height: 460px;
}
/* The FAQ's questions and answers as a plain list: what crawlers and no-JavaScript visitors
   read. script.js builds the panel below from it, so with JavaScript it is hidden at once. */
.faq-data { max-width: 760px; margin: 32px auto 0; text-align: left; }
.faq-data dt { margin-top: 18px; font-weight: 600; }
.faq-data dd { margin: 6px 0 0; color: var(--ink-70); line-height: 1.55; }
.js .faq-data { display: none; }
.qs { background: var(--navy); color: var(--canvas); border-radius: 12px; padding: 22px 14px; }
.qs h4, .ans h4 { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .08em; margin: 0 0 14px 8px; }
.qs button { display: block; width: 100%; text-align: left; font-size: 14px; padding: 12px; border-radius: 8px; color: var(--light-70); transition: background .2s, color .2s; }
.qs button:hover { color: var(--canvas); }
.qs button.on { background: var(--light-15); color: var(--canvas); }
.ans { padding: 22px 14px; scroll-margin-top: 96px; }   /* clears the fixed nav when a tap scrolls here */
.ans .asked { font-size: 14px; color: var(--ink-70); text-align: right; margin: 0 8px 18px 40px; }
.ans .reply { background: var(--surface); border-radius: 12px; padding: 14px; font-size: 14px; line-height: 1.55; min-height: 80px; }
.ans .avatar img { width: 28px; height: 28px; border-radius: 8px; margin: 10px 0 0 6px; display: block; }

/* ---------- Ask Reimbsr (dark band, after ifs.com's AI slide) ---------- */
.ask {
  position: relative; margin: 40px 16px 0; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  color: var(--canvas);
  background:
    radial-gradient(40% 55% at 72% 45%, rgba(84, 72, 196, .55), transparent 70%),
    radial-gradient(30% 40% at 88% 85%, rgba(233, 69, 58, .28), transparent 70%),
    radial-gradient(35% 45% at 8% 100%, rgba(47, 127, 214, .3), transparent 70%),
    #0b0b18;
}
.ask::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
.ask-inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center;
  max-width: 1120px; margin: 0 auto; padding: 72px 56px;
}
.ask .eyebrow { color: var(--light-70); }
.ask .h2 { font-size: clamp(36px, 4.2vw, 60px); margin: 14px 0 18px; }
.ask .h2 em { display: block; color: rgba(245, 242, 236, .62); }
.ask-copy > p { max-width: 500px; font-size: 16px; line-height: 1.5; color: var(--light-70); }
.ask-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.ask-copy .get-app { margin-top: 26px; }
.btn-outline-light { background: transparent; color: var(--canvas); border-color: rgba(245, 242, 236, .45); box-shadow: none; }
.btn-outline-light:hover { border-color: var(--canvas); box-shadow: none; }

/* The demo: the app's Ask sheet, on an iPhone. Titanium frame and black bezel as on the
   article phones (.a-phone); ::before and ::after are the side buttons. Laid out at the
   real 390pt screen width, then zoomed down as one piece so the app's layout holds. */
.ask-phone {
  position: relative; justify-self: center; width: 390px; zoom: .64; aspect-ratio: 390 / 845; padding: 6px; border-radius: 60px;
  background: linear-gradient(100deg, #8a847a, #d8d3ca 7%, #efebe4 35%, #dcd6cc 70%, #a49e94);
  box-shadow: inset 0 0 0 .6px rgba(0, 0, 0, .35), 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.ask-phone::before, .ask-phone::after { content: ""; position: absolute; width: 3px; }
/* left: action button, volume up, volume down */
.ask-phone::before {
  left: -3px; top: 118px; height: 198px; border-radius: 2px 0 0 2px;
  background:
    linear-gradient(90deg, #7d776d, #d4cec4) 0 0 / 100% 32px no-repeat,
    linear-gradient(90deg, #7d776d, #d4cec4) 0 66px / 100% 60px no-repeat,
    linear-gradient(90deg, #7d776d, #d4cec4) 0 138px / 100% 60px no-repeat;
}
/* right: side (power) button */
.ask-phone::after { right: -3px; top: 196px; height: 96px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #d4cec4, #7d776d); }
.ask-screen { height: 100%; padding: 4px; border-radius: 54px; background: #0c0c0d; }
.ask-display {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 50px; padding-top: 54px;
  background: linear-gradient(160deg, #a9a6a0, #b8a294 60%, #c49d86);
}
/* home indicator */
.ask-display::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 128px; height: 5px; margin-left: -64px; border-radius: 3px; background: var(--ink); }
.ask-status {
  position: absolute; inset: 0 0 auto; height: 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px 0 40px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.ask-island { position: absolute; left: 50%; top: 11px; width: 116px; height: 34px; margin-left: -58px; border-radius: 20px; background: #000; }
.ask-status-icons { display: flex; align-items: center; gap: 6px; }
.ask-status-icons svg { height: 12px; width: auto; fill: currentColor; }
.ask-status-icons svg:last-child { height: 13px; }
.ask-card {
  display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 10px 22px 30px;
  border-radius: 30px 30px 0 0; background: var(--canvas); color: var(--ink);
}
.ask-grabber { display: block; width: 40px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: rgba(28, 28, 28, .14); }
.ask-card-head { display: flex; align-items: center; gap: 10px; }
.ask-card-head b { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -.02em; }
.ask-spark { color: var(--sage); font-size: 18px; }
.ask-card-sub { margin: 6px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ask-label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 22px; }
.ask-chips button {
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface);
  font-size: 13px; line-height: 1.25; text-align: left; color: var(--ink);
  transition: border-color .2s, background .2s, color .2s;
}
.ask-chips button:hover { border-color: var(--ink-30); }
.ask-chips button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--canvas); }
/* a long answer scrolls inside the screen, fading out above the input */
.ask-answer {
  position: relative; flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto 1fr; align-items: start;
  overflow-y: auto; scrollbar-width: none; mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
}
.ask-answer::-webkit-scrollbar { display: none; }
.ask-reply { flex: none; }
.ask-answer:not(.has-q) { visibility: hidden; }
.ask-q { margin: 4px 0 14px; font-size: 16px; }
/* the waiting line shares the reply's grid cell, so swapping them never moves anything */
.ask-wait, .ask-reply { grid-area: 3 / 1; }
.ask-wait { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--muted); }
.ask-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); animation: ask-pulse 1s ease-in-out infinite; }
.ask-answer:not(.waiting) .ask-wait { display: none; }
.ask-reply {
  padding: 18px; border-radius: var(--radius-m); background: var(--surface);
  box-shadow: 0 1px 0 var(--hair);
  opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.ask-answer.waiting .ask-reply { visibility: hidden; transition: none; }
.ask-answer.answered .ask-reply { opacity: 1; transform: none; }
.ask-verdict { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.ask-verdict[data-tone="green"] { background: var(--green-bg); color: var(--green); }
.ask-verdict[data-tone="amber"] { background: var(--amber-bg); color: var(--amber); }
.ask-verdict[data-tone="slate"] { background: var(--slate-bg); color: var(--slate); }
.ask-headline { margin: 12px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); font-family: var(--serif); font-size: 21px; line-height: 1.22; letter-spacing: -.01em; }
.ask-summary { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-70); }
.ask-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ask-sources span { padding: 3px 9px; border-radius: 999px; background: var(--canvas-2); font-size: 12px; font-weight: 500; color: var(--ink-70); }
.ask-input {
  display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 12px 16px;
  border-radius: var(--radius-s); border: 1px solid var(--hair); background: var(--surface); font-size: 14px; color: var(--faint);
}
.ask-input svg { width: 18px; height: 18px; }
@keyframes ask-pulse { 50% { opacity: .3; transform: scale(.7); } }
/* Words and phone stay side by side for as long as both fit, the phone's column only as wide as
   the phone so the words get the rest. */
@media (max-width: 960px) {
  .ask { border-radius: var(--radius-l); }
  .ask-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 56px 40px; }
}
/* Too narrow for that: one centred stack, so the words, badges and phone share an axis. */
@media (max-width: 759px) {
  .ask-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 56px 24px; }
  .ask-copy { text-align: center; }
  .ask-copy > p { margin-inline: auto; }
  .ask-ctas { justify-content: center; }
}
@media (max-width: 480px) {
  .ask-inner { padding: 44px 16px 32px; }
  .ask-phone { zoom: .66; }
  /* the chips are drawn at phone scale, so give them room to be tapped: 44px tall once zoomed */
  .ask-chips { gap: 16px; }
  .ask-chips button { position: relative; padding: 15px 16px; font-size: 15px; }
  .ask-chips button::after { content: ""; position: absolute; inset: -8px 0; }
}
@media (max-width: 374px) {
  .ask-phone { zoom: .6; }
}
@media (max-width: 340px) {
  .ask-phone { zoom: .55; }
}

/* ---------- Final CTA ---------- */
.final {
  position: relative; margin: 0 16px; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate;
  min-height: 640px; display: grid; place-items: center; text-align: center; color: var(--canvas); padding: 80px 16px;
}
.final .aurora { inset: -80px; }
.final .shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 20, 42, .1), rgba(20, 20, 42, .45)); }
.final-copy { position: relative; }
.final .h2 { font-size: clamp(48px, 6.5vw, 92px); max-width: 900px; margin: 0 auto 28px; }
.final p { max-width: 540px; margin: 0 auto 32px; font-size: 18px; }

/* Founder note: a quiet line under the FAQ */
.founder-note { max-width: 560px; margin: 64px auto 0; padding-top: 28px; border-top: 1px solid var(--hair); }
.founder-note .eyebrow { display: block; margin-bottom: 12px; }
.founder-note p { font-family: var(--serif); font-size: 20px; line-height: 1.4; letter-spacing: -.01em; color: var(--ink-70); }
@media (max-width: 560px) {
  .founder-note { margin-top: 48px; }
  .founder-note p { font-size: 18px; }
}

/* ---------- Footer ---------- */
footer { padding: 90px 40px 30px; max-width: 1340px; margin: 0 auto; }
.cols { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; gap: 30px; }
.cols h6 { font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; color: var(--ink-50); margin-bottom: 16px; }
.cols a { display: block; font-size: 14px; line-height: 1.9; }
.cols a:hover { text-decoration: underline; }
/* Full-bleed: breaks out of the footer's padding and max-width to span the viewport */
.mega { margin: 50px calc(50% - 50vw) 0; overflow: hidden; }
/* ~1.2x the window width, so the word bleeds off both edges; flex centres the overflow */
.mega span { display: flex; justify-content: center; white-space: nowrap; font-family: var(--brand); font-size: calc((100vw - 48px) / 4.1); letter-spacing: -.02em; line-height: .8; }
/* Bar-field wordmark (footer-mark.js); the span stays as layout box and fallback */
.mega {
  position: relative;
  --mark-ramp-1: #17173a; /* --night */
  --mark-ramp-2: #5f6484; /* --slate */
  --mark-ramp-3: #6096cd; /* --sky */
  --mark-ramp-4: #f8a47f; /* --peach */
  --mark-spark: #f8a47f;
}
.mega-live span { visibility: hidden; padding: .06em 0; }
.mega-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.legal { margin-top: 90px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-70); flex-wrap: wrap; gap: 12px; }
.legal div { display: flex; gap: 20px; flex-wrap: wrap; }
/* The company details a UK company's website has to show */
.legal-co { margin-top: 14px; max-width: 760px; font-size: 12px; line-height: 1.5; color: var(--ink-50); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { padding-bottom: 140px; }
  .hero-anim { transform: scale(1.6); margin-top: 2.5rem; margin-bottom: 4rem; }
  .half, .half.left { font-size: 1.9rem; }
  .comp { width: 17%; bottom: 0; }
  .comp-glow { width: 8%; bottom: 0; }
  .nav-links, .seg { display: none; }
  .ribbon { top: -6%; right: -55%; width: 150%; height: 112%; }
  .nav-mob { display: block; margin-left: auto; }
  .nav .btn { margin-left: 0; }
  .owed { padding: 80px 16px 90px; }
  .owed-card { padding: 26px 22px 22px; border-radius: 22px; }
  .owed-rows li { font-size: 14px; }
  .owed-rows .money { font-size: 18px; }
  .faq { padding: 80px 16px 72px; }
  .faq .h2 { margin-bottom: 32px; }
  .faq-box { grid-template-columns: 1fr; min-height: 0; }
  /* the accordion: script.js moves the answer under the open question */
  .qs .ans { margin: 2px 0 8px; padding: 12px; border-radius: 10px; background: var(--canvas); color: var(--ink); }
  .qs .ans h4, .qs .ans .asked { display: none; }
  .qs .ans .reply { padding: 0; background: none; min-height: 0; }
  .qs .ans .avatar { display: none; }
  .qs button { position: relative; padding-right: 36px; }
  .qs button::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 1; opacity: .6; }
  .qs button[aria-expanded="true"]::after { content: "\2212"; }
  .plans { column-gap: 12px; }
  .plan { padding: 26px 22px 22px; border-radius: 24px; }
  .plan .price b { font-size: 40px; }
  .cols { grid-template-columns: 1fr 1fr; }
  footer { padding: 70px 16px 0; } /* the wordmark is the last thing on the page */
}
@media (max-width: 560px) {
  .owed, .final { border-radius: 32px; }
  /* small enough that the pair sits side by side everywhere, not only in the hero */
  .store-badge img { height: 43px; }
  .get-app { --gap: 12px; }

  /* compact nav, so it covers less of a small screen */
  .nav { gap: 12px; padding: 7px 7px 7px 12px; border-radius: 18px; }
  .logo { gap: 8px; font-size: 22px; }
  .logo img { width: 32px; height: 32px; border-radius: 9px; }
  .nav .btn { padding: 10px 16px; font-size: 15px; }

  /* comfortable touch targets without loose lists: wrapped links keep tight lines, 33px between links */
  footer .cols a { padding: 7px 0; line-height: 1.35; }
  /* legal links: taller touch targets without moving the layout (padding is cancelled by the negative margin) */
  footer .legal a { padding: 10px 0; margin: -10px 0; }
  .owed-link, .owed-foot a, .payback-line a { position: relative; display: inline-block; }
  .owed-link::after, .owed-foot a::after, .payback-line a::after { content: ""; position: absolute; inset: -10px 0; }


  /* nothing below 12px on a phone */
  .ask-label, footer .cols h6 { font-size: 12px; }
}
/* Where a footer heading wraps to two lines, its row reserves two, so both columns' links start level */
@media (max-width: 360px) { footer .cols > :nth-child(-n+2) h6 { min-height: 3em; } }
@media (max-width: 400px) { footer .cols > :nth-child(n+3):nth-child(-n+4) h6 { min-height: 3em; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- App promo (bottom-left card, desktop only) ---------- */
.app-promo {
  position: fixed; left: 24px; bottom: 24px; z-index: 50;
  display: none; flex-direction: column; gap: 16px;
  width: 223px; padding: 20px 22px 0; overflow: clip;
  border-radius: var(--radius-s);
  background: linear-gradient(165deg, var(--navy) 0%, #24307e 30%, #4f6fb8 58%, #c48f9e 82%, var(--peach) 100%);
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(20, 20, 42, .28), 0 4px 10px -2px rgba(20, 20, 42, .1);
  animation: app-promo-in .42s cubic-bezier(.22, 1, .36, 1) both;
}
.app-promo::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .35; mix-blend-mode: overlay; pointer-events: none; }
/* from 1280px, where the card clears the hero's centred copy */
@media (min-width: 1280px) { .app-promo:not([hidden]) { display: flex; } }
.app-promo-close {
  position: absolute; top: 7px; right: 7px; z-index: 1;
  display: grid; place-items: center; width: 20px; height: 20px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .85);
  transition: background .15s, color .15s;
}
.app-promo-close:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.app-promo-close svg { width: 10px; height: 10px; }
.app-promo-copy { display: flex; flex-direction: column; gap: 4px; }
.app-promo-title { font-size: 15px; line-height: 19px; font-weight: 600; letter-spacing: -.01em; }
.app-promo-sub { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .8); }
.app-promo-badges { display: flex; gap: 6px; animation: app-promo-in .42s cubic-bezier(.22, 1, .36, 1) .08s both; }
.app-promo-badges .store-badge img { height: 28px; }
.app-promo-stage { display: flex; justify-content: center; height: 220px; flex: none; overflow: clip; }
/* Same natural-titanium iPhone as the hero tile, cropped at the card's edge */
.app-promo-phone {
  width: 168px; height: 360px; flex: none; padding: 4px;
  border-radius: 30px;
  background: linear-gradient(100deg, #8a847a, #d8d3ca 7%, #efebe4 35%, #dcd6cc 70%, #a49e94);
  box-shadow: inset 0 0 0 .6px rgba(0, 0, 0, .35), 0 -6px 24px -10px rgba(20, 20, 42, .5);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  animation: app-promo-phone .64s cubic-bezier(.34, 1.4, .64, 1) .22s both;
}
.app-promo:hover .app-promo-phone { transform: translateY(-6px); }
.app-promo-screen { height: 100%; padding: 3px; border-radius: 26px; background: #0c0c0d; overflow: hidden; }
.app-promo-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 23px; }
@keyframes app-promo-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes app-promo-phone { from { transform: translateY(70px); } to { transform: none; } }

/* phones: Free and Pro stay side by side, trimmed to the essentials */
@media (max-width: 560px) {
  .plans { column-gap: 8px; }
  .plan { padding: 20px 14px 16px; border-radius: 20px; }
  .plan h3 { font-size: 16px; }
  .plan .price { margin: 2px 0 10px; font-size: 13px; line-height: 1.2; }
  .plan .price b { display: block; margin: 0 0 2px; font-size: 38px; line-height: 1.05; }
  .plan .price-note { margin: 0 0 12px; font-size: 12px; line-height: 1.4; }
  .plan ul { margin-bottom: 16px; }
  .plan li { padding: 7px 0 7px 17px; font-size: 13px; line-height: 1.35; }
  .plan li::before { left: 0; font-size: 12px; }
  .plan .btn { padding: 10px 6px; font-size: 13px; line-height: 1.3; }
  .m-hide { display: none; }

  /* the grade picker: one row of grades that scrolls sideways, edge to edge */
  .owed { padding: 72px 16px; }
  .owed-intro { margin: 16px auto 28px; }
  .grades {
    flex-wrap: nowrap; justify-content: flex-start; max-width: none;
    margin: 0 -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; scroll-padding: 0 16px;
  }
  .grades::-webkit-scrollbar { display: none; }
  .grades button { flex: none; scroll-snap-align: start; padding: 11px 16px; }
  /* the big figure at the top already gives the total, so the card drops its last row */
  .owed-card { margin-top: 20px; padding: 22px 20px 20px; }
  .owed-total { font-size: 52px; }
  .owed-sub { margin-top: 6px; font-size: 15px; }
  .owed-rows { margin-top: 18px; }
  .owed-rows li { padding: 10px 0; }
  .owed-rows li.back { display: none; }
  .owed-rows li:nth-last-child(2) { border-bottom: 1px solid var(--hair); }
  .owed-caveat { font-size: 14px; }
  .owed-foot { margin-top: 24px; font-size: 14px; }

  /* one heading size and one gap between sections, all the way down */
  .h2, .scene .h2, .ask .h2 { font-size: 36px; }
  .final .h2 { font-size: 42px; }
  .pricing, .faq { padding-top: 72px; }
}
@media (max-width: 360px) {
  .store-badge img { height: 38px; }
  .get-app { --gap: 10px; }
  .plan { padding: 18px 11px 14px; }
  .plan li { padding-left: 15px; font-size: 12.5px; }
  .plan .btn { padding: 9px 4px; font-size: 12.5px; }
}
.ast { font-style: normal; }