/*
 * Chase — the marketing site.
 *
 * The V2 sharp language the app uses: zero radius anywhere, neutral charcoal surfaces, lime as
 * the only accent. Dark only, by design — there is no light theme to fall back to, so every
 * surface is stated rather than inherited.
 *
 * Fonts are served from here rather than Google, so the page needs no third-party connection to
 * render its own headline. They are the same two files the app ships, byte for byte.
 */

@font-face { font-family: Anton; src: url('/fonts/anton-400-lat.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Anton; src: url('/fonts/anton-400-latext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Manrope; src: url('/fonts/manrope-lat.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; src: url('/fonts/manrope-latext.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --page: #0A0A0A;
  --panel: #111111;
  --raise: #161616;
  --inset: #0F0F0F;
  --accent-tint: #141C0E;
  --accent-tint-2: #14200F;
  --accent-chip: #16240F;

  --bd-hair: #1C1C1C;
  --bd: #262626;
  --bd-2: #2A2A2A;
  --bd-4: #333333;
  --bd-accent: #2A3A20;

  --lime: #7CE22B;
  --lime-hi: #B4F04A;
  --on-lime: #08150A;

  --tx: #FFFFFF;
  --tx-2: #C8C8C8;
  --tx-3: #9C9C9C;
  --tx-4: #7C7C7C;
  --tx-5: #606060;
  --tx-6: #6E6E6E;

  /* One rail, and the bar's rail is the one that wins.
   *
   * The app runs two: `#topbar` lays out on 1760 with a 13px gutter, and the pages under it on
   * 1660 with 40 — so in the app the wordmark and the copy below it do not line up, and this
   * file used to reproduce that faithfully. On a landing page it reads as a mistake rather than
   * as a convention, because the hero text is the first thing under the mark and the two are
   * the only things on screen.
   *
   * 23px is not an arbitrary gutter: it is the bar's 13 plus the 10px nudge that `.brand` used
   * to carry, so **the wordmark does not move**. What moves is the page copy, out to meet it,
   * and the CTA, in to the same rail on the other side. Everything now starts and ends on one
   * line at every width.
   *
   * The app still has the offset. Fixing it there is a bigger change than this one and has not
   * been made — so the two properties agree on where the *mark* sits, which is what a visitor
   * crossing between them sees, and differ on the body column, which they do not. */
  --col: 1760px;
  --gutter: 23px;
  /* The gap above every section, and the one number that sets the page's vertical pace. It was
     128, which read as generous on a long page and as empty on a short screen — trimmed on
     17 August, section by section, until it was plain that every one of them wanted the same
     thing and the token was the place to say it. */
  --rhythm: 88px;
  /* The app's top bar exactly — `--topbar: 71px` in public/styles.css. Crossing between the
     two properties should not move the wordmark. */
  --nav-h: 71px;

  --f-dis: Anton, 'Helvetica Neue', sans-serif;
  --f-ui: Manrope, 'Helvetica Neue', Helvetica, sans-serif;
}

@keyframes foRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes foPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

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

body {
  margin: 0; background: var(--page); color: var(--tx);
  font: 500 16px/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--lime-hi); }
::selection { background: var(--lime); color: var(--on-lime); }
img { max-width: 100%; display: block; }

/* Everything sits in one column, and nothing is round.
   The padding rather than a `max-width` is what centres it: the box is full width, and the
   gutter grows past the rail once the window is wider than it, so the nav — which has no box
   of its own to centre — lands on exactly the same edges. */
.wrap { width: 100%; max-width: none; margin-inline: auto;
  padding-inline: max(var(--gutter), calc((100% - var(--col)) / 2 + var(--gutter))); }
section { padding-top: var(--rhythm); }

.dis { font-family: var(--f-dis); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; }
.eyebrow { display: flex; align-items: center; gap: 9px;
  font: 800 10.5px/1 var(--f-ui); letter-spacing: 2.2px; text-transform: uppercase; color: var(--tx-5); }
.eyebrow i { width: 6px; height: 6px; flex: none; background: var(--lime); animation: foPulse 2.4s infinite; }
.lime { color: var(--lime); }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

/* ── Nav ──
   Pinned, and translucent over whatever scrolls beneath it. */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(10, 10, 10, .86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bd);
}
/* The bar takes the page's rail now, and there is no override here at all — see `--col` above
   for why the page moved to the bar rather than the other way round. The rule this replaced
   set its own 1760/13 column, which is what put the wordmark 19px left of the hero text. */
.nav-in { display: flex; align-items: center; gap: 40px; width: 100%; }
.brand:hover { color: var(--tx); }

/*
 * `.tb-mark` from public/styles.css, property for property.
 *
 * Written out in the same order and the same shorthand rather than "close enough", because the
 * two drifted once already and it was not obvious from either file: the diamond was 13px against
 * the app's 9, the gap 10 against 9, the letter-spacing 1px against 1.6. A 13px square turned 45°
 * has an 18.4px bounding box, so that one difference pushed CHASE 5px right of where the app put
 * it — and no gutter value could have reconciled them, because the marks themselves were
 * different objects.
 *
 * The equivalences worth knowing, since the two files name things differently:
 *   `--f-dis` here is `--f-head` there — both Anton, and `.dis` in the app is that family at 400.
 *   `--lime` here is `--lime-grad` there — both flat #7CE22B, the name notwithstanding.
 *
 * `display` is `flex`, matching the app; it was `inline-flex`, which is the same box for one line
 * of content but not the same rule. If the app's mark changes, change this with it.
 *
 * **The casing lives in the markup, not here.** The app writes `CHASE` as a literal rather than
 * uppercasing `Chase` in CSS, so index.html does too — a `text-transform` added to this rule
 * would match at a glance and then disagree the moment anyone reads either file. It was `Chase`
 * on the site and `CHASE` in the app until 17 August, which is the last of the differences this
 * block was written to end.
 */
/* No `margin-left` any more, and its absence is load-bearing: the app's 10px nudge is now the
   difference between the bar's 13px gutter and this page's 23px one, so the mark sits exactly
   where it has since v606 while the copy below it starts on the same line. Putting the margin
   back would push the wordmark 10px out of the column again. */
.brand { display: flex; align-items: center; gap: 12px; color: var(--tx); }
.brand i { width: 9px; height: 9px; flex: none; transform: rotate(45deg);
  background: var(--lime); }
.brand span { font: 400 25px/1 var(--f-dis); letter-spacing: 1.6px; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a { font: 800 10.5px/1 var(--f-ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--tx-3); }
.nav-links a:hover { color: var(--tx); }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px;
  background: var(--lime); color: var(--on-lime);
  font: 800 11px/1 var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase; }
.nav-cta:hover { background: var(--lime-hi); color: var(--on-lime); }

/* ── Hero ── */
/* Block only: the shorthand would reset the side gutter `.wrap` sets, and the hero would run
   into the edge of the screen. */
.hero { padding-block: 60px 72px; }
/* The fan's column, and the cards scale with it — everything inside `.fan3` is a percentage,
   so this one number is the size control. A card ends up 0.314 x this — see `.fan3`, which
   spends the difference on the room the turned cards need. 866 puts a card at 272px, which is
   1.75x the 156 it was before Dan asked for it bigger. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 866px; gap: 48px; align-items: center; }
.hero-copy { animation: foRise .6s ease-out both; }
.hero h1 { margin-top: 22px; font-family: var(--f-dis); font-weight: 400;
  font-size: clamp(56px, 6.6vw, 98px); line-height: .94; letter-spacing: .5px;
  text-transform: uppercase; max-width: 660px; text-wrap: balance; }
.hero-body { margin-top: 26px; font: 500 16.5px/1.7 var(--f-ui); color: var(--tx-3); max-width: 492px; text-wrap: pretty; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

/* ── The store strip ──
   Square, like everything else on the page except the card art — a real App Store badge is
   rounded and this is deliberately not pretending to be one. It becomes a genuine badge and a
   genuine link when there is a listing to point at; see the note in index.html. */
.stores { margin-top: 26px; }
.store-badge { display: inline-flex; align-items: center; gap: 11px;
  padding: 12px 18px 12px 15px; border: 1px solid var(--bd-4); background: #000; color: var(--tx); }
/* Nudged up a hair: the mark's optical centre sits below its box, so a logo aligned by the box
   reads as sitting low beside the words. */
.store-badge svg { width: 22px; height: 22px; flex: none; display: block; margin-top: -2px; }
.store-badge b { display: block; font: 400 17px/1 var(--f-dis);
  letter-spacing: .6px; text-transform: uppercase; }
/* Under the badge rather than inside it, so the badge is just the mark and the store's name —
   and so the qualifier reads as a qualifier rather than as part of a logo. */
.store-soon { margin-top: 9px; font: 800 9.5px/1 var(--f-ui); letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--lime); }
.store-meta { margin-top: 11px; font: 600 11px/1.5 var(--f-ui); letter-spacing: .3px;
  color: var(--tx-5); }
.store-meta em { margin: 0 9px; font-style: normal; color: var(--lime); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px;
  background: var(--lime); color: var(--on-lime); border: 0; cursor: pointer;
  font: 800 12px/1 var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; }
.btn:hover { background: var(--lime-hi); color: var(--on-lime); }
.btn.ghost { background: none; color: var(--tx); border: 1px solid var(--bd-4); padding: 0 26px; }
.btn.ghost:hover { border-color: #4D4D4D; color: var(--tx); }

/* ── The hero's three cards ──
 *
 * A fan: the middle card square on and in front, the outer two turned away from it and dropped
 * a little, each tucked behind its neighbour. Real cards, and the only place on the site where
 * something is deliberately not square — a Pokémon card has round corners, and the PNGs carry
 * them in their own transparency rather than in a `border-radius` here.
 *
 * **Everything is a percentage of the column, and that is what makes it responsive.** Widths,
 * the overlap and the vertical offsets all scale with the container, so a phone gets the same
 * arrangement at a smaller size rather than a second layout to keep in step. The only absolute
 * length in here is the shadow.
 *
 * The overlap is negative margin rather than absolute positioning, so the row still measures
 * itself: three cards at 38.5% less two overlaps of 8% comes to 99.5% of the column.
 *
 * **The side padding is what stops the turned cards escaping the page**, and it is not
 * decoration. Rotating an element leaves its layout box where it was and widens the box it
 * actually paints into, and the negative margins then push the outer two further out again —
 * measured, each one paints about **29% of a card's width** beyond the content box. So the
 * padding has to be 0.29 x 0.385 = **11.3% of the content box**, which is 9.3% of the column.
 *
 * That ratio is why the number moved when the cards grew. At 7% it held the fan at its old
 * size with 10px to spare, and the moment the column went to 1.75x the same 7% left the
 * right-hand card sitting exactly on the window edge — the overhang scales with the cards and
 * the padding has to scale with it. Percentages throughout, so this holds at any column width;
 * if the rotation or the overlap changes, re-measure the 29% rather than nudging this.
 */
.fan3 { justify-self: end; width: 100%; padding-inline: 9.3%;
  display: flex; align-items: center; justify-content: center;
  animation: foRise .7s .1s ease-out both; }
.fan3 figure { position: relative; flex: none; width: 38.5%; margin: 0; }
/* On the img, not the figure: a drop-shadow follows the shape's own alpha, so it traces the
   card's round corners and its rotation instead of boxing it.
   The radius is what makes a mixed set of three look like one fan. Scrydex hands over the
   modern cards as PNGs whose corners are already transparent, and the 1998/99 scans as JPEGs
   with hard rectangular edges — so without this the old cards sit in the fan as four bright
   corners against a black page. Clipping the img first means the drop-shadow reads the clipped
   shape, and all three cast the same rounded shadow. Percentages, so it holds at any size, and
   the same pair the app uses for card art. */
.fan3 img { width: 100%; height: auto; display: block;
  border-radius: 4.76% / 3.4%;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.fan3-l { z-index: 1; margin-right: -8%; transform: rotate(-9deg) translateY(3.5%); }
.fan3-c { z-index: 2; transform: translateY(-4%) scale(1.045); }
.fan3-r { z-index: 1; margin-left: -8%; transform: rotate(9deg) translateY(3.5%); }

/*
 * Hover: the card lifts, straightens and comes to the front.
 *
 * Scoped to `hover: hover` and `pointer: fine` so it is a mouse behaviour only — on a
 * touchscreen `:hover` sticks after a tap, and a card that grew and stayed grown would read as
 * broken rather than as an effect.
 *
 * **Straightening is what keeps this safe.** A card scaled up paints wider, which is the thing
 * that ate the gutter when the fan grew; but taking the outer two from 9° to 3° narrows the
 * painted box by more than the 6% scale widens it — 315px against the 327 they already occupy
 * at rest — so the hovered card is *narrower* than the one it replaces and nothing can reach
 * the page edge. Raise the scale much past this and that stops being true; re-measure if so.
 *
 * The z-index transition is the fiddly part and is doing real work. It cannot be interpolated,
 * so it is switched instantly on the way in and held for the length of the animation on the way
 * out — without the delay the card drops behind its neighbour the instant the mouse leaves,
 * while it is still visibly mid-flight.
 *
 * No `will-change`: three cards, one at a time, and promoting all three to their own layers
 * costs more than the animation does. `prefers-reduced-motion` is handled globally at the foot
 * of this file, which kills every transition here with it.
 */
@media (hover: hover) and (pointer: fine) {
  .fan3 figure {
    transition: transform .42s cubic-bezier(.22, .8, .28, 1), z-index 0s linear .42s;
  }
  .fan3 img { transition: filter .42s cubic-bezier(.22, .8, .28, 1); }

  .fan3 figure:hover {
    z-index: 3;
    transition: transform .42s cubic-bezier(.22, .8, .28, 1), z-index 0s;
  }
  .fan3 figure:hover img {
    filter: drop-shadow(0 26px 38px rgba(0, 0, 0, .68));
  }

  .fan3-l:hover { transform: rotate(-3deg) translateY(-1.5%) scale(1.06); }
  .fan3-c:hover { transform: translateY(-6%) scale(1.10); }
  .fan3-r:hover { transform: rotate(3deg) translateY(-1.5%) scale(1.06); }

  /*
   * And the neighbours step aside.
   *
   * Without this the hovered card grows and straightens *into* the one beside it and, being on
   * top, sweeps across its face — which is what reads as the two passing through each other.
   * They overlap at rest and should; what looks wrong is one edge travelling over another.
   * Moving the neighbour the same distance in the opposite direction means the gap between
   * them stays roughly constant through the whole animation, so nothing crosses anything.
   *
   * `:has()` is what makes this possible without script, and the parent is the subject: the
   * rule reads "when the fan contains a hovered left card, the middle one shifts right".
   *
   * Each neighbour restates its resting rotation, because `transform` is one property and a
   * partial value would silently drop the 9° the card is meant to keep.
   *
   * 5% is bounded by the page edge rather than by taste — the right-hand card is the one with
   * somewhere to fall off, and at 5% it lands about 10px inside the gutter. Going further needs
   * the column to come down with it.
   */
  .fan3:has(.fan3-l:hover) .fan3-c { transform: translate(5%, -4%) scale(1.045); }
  .fan3:has(.fan3-r:hover) .fan3-c { transform: translate(-5%, -4%) scale(1.045); }
  .fan3:has(.fan3-c:hover) .fan3-l { transform: rotate(-9deg) translate(-5%, 3.5%); }
  .fan3:has(.fan3-c:hover) .fan3-r { transform: rotate(9deg) translate(5%, 3.5%); }
}

.ph-lab { font: 800 9px/1 var(--f-ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--tx-5); }

/* ── Value strip ── */
/* No rhythm above this one, unlike every other section: it is the only block that follows the
   hero, and the hero already ends in 72px of its own padding. Stacking the 88px rhythm on top
   of that put 160px between the buttons and the strip. */
.strip { background: var(--panel); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-cell { padding: 34px 28px 36px; border-left: 1px solid var(--bd); }
.strip-cell:first-child { border-left: 0; }
.strip-cell i { font-style: normal; font: 800 10px/1 var(--f-ui); letter-spacing: 1.8px; color: var(--lime); }
.strip-cell h3 { margin-top: 18px; font: 400 22px/1.1 var(--f-dis); letter-spacing: .5px; text-transform: uppercase; }
.strip-cell p { margin-top: 11px; font: 500 13px/1.6 var(--f-ui); color: var(--tx-4); }

/* ── Section headers ── */
.sec-head { display: flex; align-items: flex-end; gap: 48px; }
.sec-head h2 { margin-top: 18px; font-family: var(--f-dis); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; letter-spacing: .5px;
  text-transform: uppercase; max-width: 640px; text-wrap: balance; }
.sec-note { width: 340px; flex: none; font: 500 14.5px/1.7 var(--f-ui); color: var(--tx-4); }

/* ── Features ── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 56px; }
.card { padding: 30px 28px 34px; background: var(--panel); border: 1px solid var(--bd); transition: background-color .15s, border-color .15s; }
.card:hover { background: var(--raise); border-color: var(--bd-4); }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-top i { font-style: normal; font: 800 10px/1 var(--f-ui); letter-spacing: 1.8px; color: var(--tx-5); }
.card-top b { width: 7px; height: 7px; background: var(--lime); transform: rotate(45deg); }
.card h3 { margin-top: 32px; font: 400 27px/1.06 var(--f-dis); letter-spacing: .5px; text-transform: uppercase; }
.card p { margin-top: 14px; font: 500 14px/1.68 var(--f-ui); color: var(--tx-4); }

/* ── Pack scan ── */
/* The band's own padding is inside its panel, so it is not the section rhythm and does not
   inherit it — but it is the same ask, and 120 against an 88px rhythm made the pack-scan block
   the one section with visibly more air than its neighbours. */
.band { margin-top: var(--rhythm); padding: 88px 0; background: var(--panel); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 64px; align-items: center; }
.band h2 { margin-top: 18px; font-family: var(--f-dis); font-weight: 400; font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.02; letter-spacing: .5px; text-transform: uppercase; max-width: 560px; }
.band h2 em { font-style: normal; color: var(--tx-4); }
.band-body { margin-top: 22px; font: 500 15.5px/1.7 var(--f-ui); color: var(--tx-3); max-width: 470px; }
.steps-min { display: grid; gap: 8px; margin-top: 30px; max-width: 470px; }
.step-min { display: flex; align-items: center; gap: 18px; padding: 16px 18px; background: var(--raise); border: 1px solid var(--bd-2); }
.step-min i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--accent-chip);
  font-style: normal; font: 800 10.5px/1 var(--f-ui); color: var(--lime); }
.step-min p { font: 500 14px/1.55 var(--f-ui); color: var(--tx-2); }

/* The six-card fan, drawn. */
.fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fcard { margin: 0; }
.fcard img { width: 100%; height: auto; display: block; border: 1px solid var(--bd-4); }
.fcard figcaption { display: grid; grid-template-columns: 1fr auto; gap: 0 8px;
  margin-top: 8px; font: 600 11px/1.35 var(--f-ui); color: var(--tx-4); }
.fcard figcaption b { font-weight: 700; color: var(--tx-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The price is the point of the row, so it takes the accent and the second column outright. */
.fcard figcaption em { grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-style: normal; font-weight: 800; color: var(--lime); }
.fcard figcaption span { grid-column: 1; font-variant-numeric: tabular-nums; }

/* ── How it works ── */
.rows { display: grid; gap: 12px; margin-top: 52px; }
.row { display: grid; grid-template-columns: 56px minmax(120px, 200px) minmax(0, 1fr) minmax(140px, 190px);
  gap: 32px; align-items: center; padding: 30px 28px; background: var(--panel); border: 1px solid var(--bd); }
.row i { width: 40px; height: 40px; display: grid; place-items: center; background: var(--accent-chip);
  font-style: normal; font: 800 12px/1 var(--f-ui); color: var(--lime); }
.row h3 { font: 400 32px/1 var(--f-dis); letter-spacing: .5px; text-transform: uppercase; }
.row p { font: 500 14.5px/1.68 var(--f-ui); color: var(--tx-3); }
.row span { font: 800 9.5px/1.6 var(--f-ui); letter-spacing: 1.2px; text-transform: uppercase; color: var(--tx-5); }

/* ── Plans ── */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 56px; max-width: 840px; }
.plan { padding: 34px 30px 36px; background: var(--panel); border: 1px solid var(--bd); }
.plan.pop { background: var(--accent-tint); border-color: var(--lime); }
.plan-name { font: 800 11px/1 var(--f-ui); letter-spacing: 1.8px; text-transform: uppercase; color: var(--tx); }
.plan.pop .plan-name { color: var(--lime); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge { padding: 5px 9px; background: var(--accent-chip); font: 800 8.5px/1 var(--f-ui); letter-spacing: 1px; color: var(--lime); }
.price { margin-top: 26px; display: flex; align-items: baseline; gap: 10px; }
.price b { font: 400 50px/1 var(--f-dis); letter-spacing: .5px; }
.price span { font: 600 10.5px/1.4 var(--f-ui); color: var(--tx-5); }
.plan-blurb { margin-top: 12px; font: 500 13.5px/1.6 var(--f-ui); color: var(--tx-4); }
.plan hr { margin: 26px 0 22px; border: 0; border-top: 1px solid var(--bd); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.plan li { display: flex; gap: 11px; font: 500 13.5px/1.55 var(--f-ui); color: var(--tx-2); }
.plan li::before { content: ''; width: 5px; height: 5px; flex: none; margin-top: 7px; background: var(--lime); transform: rotate(45deg); }
.plan .btn { width: 100%; margin-top: 30px; min-height: 50px; }
.plan-foot { margin-top: 22px; font: 500 12.5px/1.6 var(--f-ui); color: var(--tx-5); max-width: 840px; }

/* ── FAQ ── */
.faq { display: grid; gap: 10px; margin-top: 44px; }
.q { background: var(--panel); border: 1px solid var(--bd); overflow: hidden; }
.q[open] { border-color: var(--bd-4); }
.q summary { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 16px 24px; cursor: pointer; list-style: none;
  font: 800 16px/1.4 var(--f-ui); color: var(--tx-2); }
.q summary::-webkit-details-marker { display: none; }
.q[open] summary { color: var(--tx); }
/* Two bars making a +, with the upright one dropped when the row opens. */
.q summary::after { content: ''; width: 12px; height: 12px; flex: none;
  background: linear-gradient(var(--tx-4), var(--tx-4)) center/12px 1.5px no-repeat,
              linear-gradient(var(--tx-4), var(--tx-4)) center/1.5px 12px no-repeat; }
.q[open] summary::after { background: linear-gradient(var(--lime), var(--lime)) center/12px 1.5px no-repeat; }
.q p { padding: 0 64px 26px 24px; font: 500 14.5px/1.72 var(--f-ui); color: var(--tx-3); }

/* ── CTA ── */
/* Padding below as well as the rhythm above, because the gap under this panel used to belong
   to `.foot`'s own top margin — and `.foot` is hidden on desktop now that the shared footer
   has taken over, which left the panel butting straight into it. The padding is on this
   section rather than on `.fo-foot`, since that file is shared with the app and the policy
   pages, and both of those already end in padding of their own. */
.cta { margin-top: var(--rhythm); padding-bottom: var(--rhythm); }
.cta-panel { position: relative; overflow: hidden; padding: 76px 60px; background: var(--accent-tint-2); border: 1px solid var(--bd-accent);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 48px; align-items: center; }
.cta-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(60deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px); }
.cta-panel > * { position: relative; }
.cta h2 { font-family: var(--f-dis); font-weight: 400; font-size: clamp(36px, 3.9vw, 54px); line-height: 1;
  letter-spacing: .5px; text-transform: uppercase; max-width: 560px; }
.cta p { margin-top: 20px; font: 500 15px/1.7 var(--f-ui); color: var(--tx-3); max-width: 440px; }
.cta-side .ph-lab { letter-spacing: 2px; color: var(--tx-4); }
.cta .btn { width: 100%; margin-top: 10px; min-height: 54px; }
.cta-fine { margin-top: 12px; font: 500 12px/1.55 var(--f-ui); color: var(--tx-4); }

/* ── Footer ── */
.foot { margin-top: var(--rhythm); border-top: 1px solid var(--bd); background: var(--page); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding: 56px 0 44px; }
.foot-brand p { margin-top: 16px; font: 500 13px/1.68 var(--f-ui); color: var(--tx-5); max-width: 300px; }
.foot-tag { margin-top: 18px; font: 400 18px/1 var(--f-dis); letter-spacing: 1px; text-transform: uppercase; color: var(--tx-4); }
.foot-col h4 { margin: 0; font: 800 9.5px/1 var(--f-ui); letter-spacing: 1.8px; text-transform: uppercase; color: var(--tx-5); }
.foot-col ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.foot-col a { font: 500 13.5px/1.3 var(--f-ui); color: var(--tx-3); }
.foot-col a:hover { color: var(--tx); }
.foot-bot { padding-bottom: 48px; }
.foot-bot hr { margin: 0; border: 0; border-top: 1px solid var(--bd-hair); }
.foot-legal { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-top: 22px; }
.foot-legal p { font: 500 11.5px/1.6 var(--f-ui); color: var(--tx-5); max-width: 720px; }
.cur { display: flex; gap: 7px; flex: none; }
.cur span { padding: 7px 11px; border: 1px solid var(--bd-2); font: 800 9px/1 var(--f-ui); letter-spacing: 1px; color: var(--tx-5); }
.cur span.on { border-color: var(--lime); color: var(--lime); }

/*
 * ── Narrower screens ──
 *
 * The handoff left the breakpoints open. The page is one column of stacked bands, so it needs
 * only three moves: drop the phone beside the hero, collapse the multi-column grids, and give
 * the gutter back at phone width.
 */
@media (max-width: 1080px) {
  :root { --rhythm: 96px; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  /* Stacked now, so the fan is capped rather than filling a full-width column — three cards
     across a 1000px screen would be larger than they are on the desktop layout. */
  .fan3 { justify-self: start; width: min(470px, 100%); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-cell:nth-child(3) { border-left: 0; }
  .band-grid, .cta-panel { grid-template-columns: 1fr; gap: 40px; }
  .row { grid-template-columns: 40px 1fr; gap: 18px; }
  .row p, .row span { grid-column: 2; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sec-note { width: auto; max-width: 560px; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --rhythm: 80px; }
  .nav-links { display: none; }
  .nav-in { gap: 16px; }
  .nav-cta { margin-left: auto; }
  .hero { padding-block: 64px 80px; }
  .cards, .strip-grid, .plans { grid-template-columns: 1fr; }
  .strip-cell { border-left: 0; border-top: 1px solid var(--bd); }
  .strip-cell:first-child { border-top: 0; }
  .cta-panel { padding: 48px 24px; }
  .band { padding: 80px 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-legal { flex-direction: column; gap: 20px; }
  .q p { padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* The shared footer takes over on desktop — see /chase-footer.css, which is one file served
   to this site and to app.foilio.co so the two are identical. This page's own footer stays
   below 1000px, where the shared one is deliberately hidden: it is a four-column grid and the
   app it also appears in has a fixed bottom nav on phones. */
@media (min-width: 1000px) { .foot { display: none; } }

/* Two badges side by side, sharing the one "Coming soon" beneath them rather than carrying a
   qualifier each. Android is listed because Chase is going to Google Play — a stated plan,
   which "coming soon" is the honest form of; it stays a badge rather than a link until there
   is a listing to point at, exactly as the App Store one does. */
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Section headings, moved out of the markup ──
   These were inline `style` attributes, and the site's CSP is `style-src 'self'` with no
   'unsafe-inline' — so the browser blocked all three and both headings rendered as 24px
   Manrope body text on the live site. It had been that way since the site moved to this host:
   the local dev server sends no CSP, so it only ever showed in production, and only to
   somebody who scrolled that far with a console open.
   The fix is the stylesheet, not a looser policy. Blocking inline style is the one thing
   `style-src 'self'` is for, and the app already earned the same discipline for script-src. */
.sec-lead { max-width: 760px; }
.sec-h { margin-top: 18px; font-family: var(--f-dis);
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; text-transform: uppercase; }
#faq .sec-h { font-size: clamp(38px, 4.2vw, 58px); }