/* Credit Upside — shared marketing site styles */
:root{
  --bg:#0b0f14; --bg2:#111823; --panel:#141c28; --panel2:#1a2432;
  --line:#233043; --line2:#2e3d52;
  --txt:#e8eef6; --muted:#8b9ab0; --dim:#808fa6;
  --accent:#3ddc97; --accent2:#2bb77c;
  --warn:#f5a524; --bad:#f26d78; --info:#5aa9f7; --violet:#a78bfa;
  --navbg:rgba(11,15,20,.72); --navbg2:rgba(11,15,20,.92);
  --sheet:#0d141d; --glow1:#16233a; --glow2:#12281f;
  --btnhb:#41556f; --btnhbg:#1f2b3c;
  color-scheme: dark;
}
/* Light theme: same structure, inverted ground. Accents darkened so text
   and tints keep contrast on white. Toggled by site.js via data-theme. */
html[data-theme="light"]{
  --bg:#f4f6fa; --bg2:#ffffff; --panel:#ffffff; --panel2:#e9eef5;
  --line:#dde4ee; --line2:#c6d2e0;
  --txt:#17212e; --muted:#4d5e74; --dim:#57687e;
  /* Darkened 2026-09-08. #0b8f5d was 4.12:1 on white and 3.80:1 on --bg as a
     TEXT colour, against WCAG AA's 4.5 -- and accent text is exactly the
     emphasised figure on these pages ("+$105/yr", "$325", the ranking
     numerals). #09794e is 5.45 on white and 5.03 on --bg.
     Nudged again 2026-09-15: #09794e fell to 4.44 at the hero glow's peak
     (--glow1) and on a 10% accent tag over --panel2; --bad (#c93d49) was 4.24
     on --panel2 and 4.03 at the glow; --info (#1d6cc4) was 4.29 at the glow.
     Now accent #08734a >=4.81, bad #b8323e >=4.80, info #1a62b4 >=4.96 on
     every ground and tint. */
  --accent:#08734a; --accent2:#076b42;
  --warn:#8f5d05; --bad:#b8323e; --info:#1a62b4; --violet:#6d4fd2;
  --navbg:rgba(255,255,255,.78); --navbg2:rgba(255,255,255,.92);
  --sheet:#ffffff; --glow1:#dfe9f6; --glow2:#ddefe6;
  --btnhb:#b3c2d4; --btnhbg:#dfe6ef;
  color-scheme: light;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:radial-gradient(1100px 640px at 12% -8%,var(--glow1) 0%,transparent 55%),
             radial-gradient(900px 560px at 100% 2%,var(--glow2) 0%,transparent 50%),var(--bg);
  color:var(--txt);
  font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
p a,li a{color:var(--info);text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}
.narrow{max-width:760px}
.mono{font-variant-numeric:tabular-nums}
main{flex:1}

/* ── nav ─────────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:50;background:var(--navbg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-weight:750;letter-spacing:-.3px;white-space:nowrap}
.brand .mk{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,var(--accent),#1e9c8f);display:grid;place-items:center;color:#06231a;font-size:16px;font-weight:800}
.navlinks{display:flex;gap:4px;align-items:center;margin-left:auto}
.navlinks a{padding:8px 13px;border-radius:9px;font-size:14.5px;color:var(--muted);font-weight:550}
.navlinks a:hover{color:var(--txt);background:var(--panel)}
.navlinks a.on{color:var(--txt)}
.navtoggle{display:none;background:none;border:1px solid var(--line2);color:var(--txt);border-radius:9px;padding:7px 11px;font-size:17px;cursor:pointer}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:11px;font-weight:650;font-size:14.5px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--btnhb);background:var(--btnhbg)}
.btn.pri{background:linear-gradient(180deg,var(--accent),var(--accent2));color:#052a1d;border-color:transparent}
.btn.pri:hover{filter:brightness(1.08)}
/* The primary button's label is #052a1d, which is right on the BRIGHT dark-theme
   accent and wrong on the light theme's dark green: 3.76:1, and darkening the
   accent for the text role above would only push it further down. The two roles
   pull opposite ways, so light theme flips the label to white instead --
   5.45:1 at the light end of the gradient, 6.58:1 at the dark end. */
html[data-theme="light"] .btn.pri{color:#fff}
.btn.lg{padding:15px 30px;font-size:16px;border-radius:13px}
.btn.sm{padding:8px 14px;font-size:13.5px;border-radius:9px}

/* ── type ────────────────────────────────────────────────────────────── */
h1{font-size:clamp(34px,5.2vw,58px);line-height:1.05;letter-spacing:-2px;font-weight:800}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--info));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(25px,3.3vw,35px);letter-spacing:-1px;font-weight:750;line-height:1.15}
h3{font-size:19px;font-weight:700;letter-spacing:-.3px}
/* A heading that is the SECOND level on its page but wants the size of a
   third. /how-it-works and /which-card put h3 section headings directly
   under the h1, so a screen reader walking the outline saw a level skipped
   and no h2 at all. Level and size are different questions; this answers
   them separately instead of picking the tag by how big it looks. */
h2.as-h3{font-size:19px;font-weight:700;letter-spacing:-.3px;line-height:1.3}
.lede{color:var(--muted);font-size:17px;max-width:64ch;margin-top:14px}
.eyebrow{color:var(--accent);font-size:12.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.pagehead{padding:64px 0 30px;border-bottom:1px solid var(--line)}
section{padding:56px 0}
/* tempo: hero-adjacent and closing sections get more air than utility ones */
section.roomy{padding:84px 0}
.prose p{color:var(--muted);margin-top:16px;max-width:70ch}
.prose h2{margin-top:52px;margin-bottom:4px;padding-top:22px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{margin-top:34px}
.prose ul{margin:16px 0 0 20px;color:var(--muted);max-width:70ch}
.prose li{margin-top:9px}
.prose strong{color:var(--txt);font-weight:650}

/* ── components ──────────────────────────────────────────────────────── */
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:16px;padding:26px;transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:var(--line2);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){.card,.card:hover{transform:none}}
/* Deliberately a fixed 2 columns, not auto-fit. auto-fit made the four
   homepage cards reflow to 3-across-plus-1-orphan at desktop widths, which
   read as a layout bug. Full .wrap width so this block lines up with every
   other section on the homepage. */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:720px){ .grid2{grid-template-columns:1fr;max-width:none} }
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;margin-bottom:16px;background:rgba(90,169,247,.12);color:var(--info)}
.ic.g{background:rgba(61,220,151,.12);color:var(--accent)}
.ic.y{background:rgba(245,165,36,.12);color:var(--warn)}
.ic.v{background:rgba(167,139,250,.12);color:var(--violet)}
.card p{color:var(--muted);font-size:14.5px;margin-top:9px}
.eg{margin-top:16px;padding:13px 15px;border-radius:11px;background:var(--bg);border:1px solid var(--line);font-size:13px;color:var(--txt)}
.eg b{color:var(--accent)}

.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;border:1px solid rgba(61,220,151,.3);background:rgba(61,220,151,.08);color:var(--accent);font-size:12.5px;font-weight:650}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
/* The homepage calculator's method note. It used to be a 9pt wall of text
   under the result — the right instinct (say what is and isn't counted)
   delivered in the one form nobody reads. A disclosure keeps every word one
   click away and lets the result breathe. */
.calc-method{margin-top:14px}
.calc-method summary{cursor:pointer;color:var(--muted);font-size:13.5px;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.calc-method summary::-webkit-details-marker{display:none}
.calc-method summary::before{content:"▸";color:var(--accent);font-size:12px;transition:transform .15s}
.calc-method[open] summary::before{transform:rotate(90deg)}
.calc-method summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.calc-method .calc-fine{margin-top:10px}
.fine{color:var(--dim);font-size:13px;margin-top:16px}

.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:640px;margin:0 auto}
.strip div{background:var(--bg2);padding:24px 20px;text-align:center}
.strip b{display:block;font-size:30px;font-weight:800;letter-spacing:-1.2px;background:linear-gradient(100deg,var(--accent),var(--info));-webkit-background-clip:text;background-clip:text;color:transparent}
.strip span{display:block;color:var(--muted);font-size:12.5px;margin-top:5px}

.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.step{position:relative;padding-top:52px}
.step:before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:36px;height:36px;border-radius:11px;background:var(--panel2);border:1px solid var(--line2);display:grid;place-items:center;font-weight:750;color:var(--accent)}
.step p{color:var(--muted);font-size:14.5px;margin-top:7px}

/* q&a */
details{border-bottom:1px solid var(--line);padding:20px 0}
details summary{cursor:pointer;font-weight:650;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+";color:var(--accent);font-size:22px;line-height:1;flex:none}
details[open] summary:after{content:"–"}
details p{color:var(--muted);margin-top:12px;font-size:15px;max-width:72ch}

/* callouts */
.note{border:1px solid var(--line2);border-radius:14px;padding:20px 22px;display:flex;gap:14px;align-items:flex-start;margin-top:24px}
.note .b{flex:none;font-size:17px}
.note p{margin:0;color:var(--muted);font-size:14.5px}
.note.v{border-color:rgba(167,139,250,.35);background:rgba(167,139,250,.06)}
.note.v .b{color:var(--violet)}
.note.g{border-color:rgba(61,220,151,.3);background:rgba(61,220,151,.05)}
.note.g .b{color:var(--accent)}
.note.y{border-color:rgba(245,165,36,.3);background:rgba(245,165,36,.05)}
.note.y .b{color:var(--warn)}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--dim);font-size:13.5px;margin-top:40px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
footer h4,footer h2{color:var(--txt);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
footer a{display:block;padding:4px 0;color:var(--muted)}
footer a:hover{color:var(--txt)}
.disc{max-width:64ch;margin-top:14px;line-height:1.65}
.legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);line-height:1.6;max-width:88ch}
/* footer a is display:block for the link columns; inline links inside the
   legal text must stay inline or they break onto their own line. */
.legal a{display:inline;padding:0;text-decoration:underline;text-underline-offset:2px}
.legal p{margin:0 0 10px}
.legal p:last-child{margin-bottom:0}
.legal .copy{margin-top:14px;color:var(--dim)}

/* Nav collapses to the hamburger sheet at 1040px, not 820px, and on its own
   breakpoint so the footer and section spacing keep theirs. Seven nav links
   (Which card? was added 2026-09-07) plus the brand and the two buttons need
   ~1040px on one row; between 820 and 1040 the row used to overflow rather
   than wrap, because .navlinks is a nowrap flex row. Everything below 820 is
   a subset of this range, so the phone tier is unchanged. */
@media(max-width:1040px){
  /* Mobile menu: solid opaque sheet anchored under the bar, real touch
     targets, heavy shadow so it reads as a layer — not links floating over
     the page. site.js closes it on outside tap / scroll / Esc / link tap. */
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--sheet);border-bottom:1px solid var(--line2);
    flex-direction:column;align-items:stretch;padding:8px 10px 12px;gap:2px;
    box-shadow:0 28px 56px rgba(0,0,0,.6);
    /* The sheet is 457px of links. In landscape on a phone (667x375) that is
       taller than the whole viewport, and because it is absolutely positioned
       inside a STICKY nav, scrolling the page does not move it -- measured:
       scrolling 400px left the FAQ link at exactly the same offset. Three of
       the eight links were permanently unreachable in landscape, which is the
       same failure as the hamburger being off-screen, just rotated.
       dvh second so browsers that support it use the one that accounts for a
       retracting URL bar. */
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
    overflow-y:auto;overscroll-behavior:contain}
  .navlinks.open{display:flex}
  .navlinks a{display:block;padding:14px;font-size:15.5px;font-weight:600;
    border-radius:10px;text-align:left}
  .navlinks a.on{background:var(--panel);color:var(--txt)}
  .navtoggle{display:block;order:3}
}

@media(max-width:820px){
  footer .cols{grid-template-columns:1fr}
  section{padding:44px 0}
}

/* ── inline icon set ──────────────────────────────────────────────────────
   One stroke family everywhere. Replaces the old Unicode glyphs, which mixed
   stroke weights and rendered 👁 as a colour emoji on most platforms. */
.ic svg,.sec-card .ic svg{width:20px;height:20px;display:block}
.ic svg *,.sec-card .ic svg *{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hiw-node .big svg{width:26px;height:26px;display:block;margin:0 auto 8px;color:var(--accent)}
.hiw-node .big svg *{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── hero decor: two abstract card shapes so the hero has a focal object ── */
.hero-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-decor i{position:absolute;width:210px;height:132px;border-radius:18px;
  background:linear-gradient(135deg,rgba(61,220,151,.12),rgba(90,169,247,.05));
  border:1px solid rgba(61,220,151,.22)}
.hero-decor i:after{content:"";position:absolute;left:18px;top:18px;width:34px;height:24px;
  border-radius:6px;background:rgba(232,238,246,.10)}
.hero-decor i:first-child{left:max(2%,calc(50% - 640px));top:120px;transform:rotate(-9deg)}
.hero-decor i:last-child{right:max(2%,calc(50% - 640px));top:210px;transform:rotate(7deg);
  background:linear-gradient(135deg,rgba(90,169,247,.10),rgba(167,139,250,.06));
  border-color:rgba(90,169,247,.22)}
@media (max-width:1150px){.hero-decor{display:none}}

/* ── scroll + brand details ─────────────────────────────────────────────── */
nav{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
nav.scrolled{background:var(--navbg2);border-bottom-color:var(--line2);
  box-shadow:0 10px 30px rgba(0,0,0,.35)}

::selection{background:rgba(61,220,151,.28);color:var(--txt)}

/* visible keyboard focus without polluting mouse clicks */
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* CTA arrows nudge on hover (span.ar wraps the arrow glyph) */
.btn .ar{display:inline-block;transition:transform .18s ease}
.btn:hover .ar{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
/* Reduced motion: the card lift above already honours it; the button arrow
   nudge, press shift, disclosure caret and nav fade did not. */
@media (prefers-reduced-motion: reduce){
  .btn,.btn .ar,nav,.calc-method summary::before{transition:none}
  .btn:hover .ar,.btn:active{transform:none}
  html{scroll-behavior:auto}
}

/* ── phone tier (~390px): tighten what the 820px tier leaves cramped ────── */
@media (max-width:480px){
  /* html AND body: body alone does not hold. When html's overflow is visible
     the UA propagates body's value to the viewport and body itself computes
     back to visible, so the page still panned 38px sideways at 320px. */
  html,body{overflow-x:clip}
  /* .btn is white-space:nowrap so short pills never break mid-label. A long
     CTA ("Run your own spending through all three - free") measured 373px and
     was cut off by 69px on a 320px screen. Let a label that cannot fit wrap
     instead; short buttons are unaffected because they never reach the edge. */
  .btn{white-space:normal;max-width:100%}
  .wrap{padding:0 16px}
  /* nav: brand + Sign in + demo + hamburger exceeded 390px and pushed the
     toggle off-canvas (verified in 390px emulation) — compact everything */
  nav .wrap{gap:6px}
  .brand{font-size:14px;gap:8px}
  .brand .mk{width:26px;height:26px}
  nav .btn.sm{padding:7px 9px;font-size:12px}
  /* Sign in moves into the menu sheet at this width (site.js injects the
     link); with the theme toggle added, all four didn't fit 390px. */
  nav .btn.sm:not(.pri){display:none}
  /* Hamburger + theme toggle are the only nav controls on a phone — give them
     a 40px min tap target (were ~29px). */
  .navtoggle{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:8px;font-size:16px}
  /* The homepage's dual "two ways free" CTAs use .wl-f, not .cta, so stack them
     full-width on phones instead of wrapping into two uneven rows. */
  .wl-f{flex-direction:column}
  .wl-f .btn{width:100%;justify-content:center}
  /* /cards/ issuer directory: two columns are too narrow at 375px. */
  .wrap ul[style*="columns:2"]{columns:1 !important}
  h1{font-size:30px}                          /* 34px wrapped the hero to 4 lines */
  section{padding:36px 0}
  section.roomy{padding:52px 0}
  .pagehead{padding:44px 0 22px}
  h1{letter-spacing:-1px}
  /* hero CTAs stack full-width instead of two squeezed pills */
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{width:100%;justify-content:center}
  .strip div{padding:16px 10px}
  .strip b{font-size:23px}
  .prob-line{font-size:17px}
  .shot{margin-top:34px;transform:none}      /* 3D tilt reads as skew this small */
  .shot-body{padding:16px 13px}
  .shot-top{padding-bottom:14px}
  .shot-row{flex-wrap:wrap;row-gap:2px}
  .shot-row em{margin-left:auto}
  .wl{padding:20px 16px}
  .card{padding:20px 18px}
  footer{padding:32px 0 44px}
}

/* The Sign-in link injected for the phone menu sheet must never show on
   desktop next to the Sign-in button (it read as a duplicate). The sheet link
   only appears at <=480px — the width where the BAR button is hidden — so the
   two can never be visible at once (481-820px used to show both when the
   sheet was open). */
.nav-signin-mobile{display:none}
@media (max-width:480px){.navlinks.open .nav-signin-mobile{display:block}}

/* -- 320-360px: iPhone SE, Galaxy Fold cover screen ---------------------------
   The nav row needs ~327px here (brand 119 + theme 34 + demo 114 + burger 40 +
   gaps) but a 320px screen gives it 273px after padding. The overflow pushed
   the hamburger fully off the right edge -- verified by screenshot: at 320px
   the menu button was not reachable at all, so the site had no navigation on
   the narrowest phones still in use.

   The wordmark is the one part that is genuinely redundant (the mark beside it
   carries the brand, and the text stays in the DOM for screen readers), so it
   is what gives way. Measured after the change: the row fits with room spare. */
@media (max-width:360px){
  .brand{font-size:0;gap:0}
  .brand .mk{font-size:16px}
}

/* Responsive tables (see site.js): below 640px each row is a stacked card.
   .rt-vh is the real-text column label site.js adds for screen readers (the
   visible label is CSS ::before); it stays hidden at every width, so a window
   widened after the transform never shows a stray "Card:" prefix. */
.rt-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media (max-width:640px){
  table.rt{min-width:0!important;width:100%;display:block;border-collapse:collapse}
  /* the implicit <tbody> stays a table-row-group and shrinks rows to ~150px unless it's a block too */
  table.rt tbody,table.rt thead{display:block;width:100%}
  table.rt tr{display:block;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin:10px 0;background:var(--bg2)}
  table.rt tr.rt-head{display:none}
  table.rt td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0!important;border:0!important;text-align:left!important;font-size:14px}
  /* flex:0 0 auto took the label's max-content width. On a three-way compare
     page the label IS the card name -- "Blue Cash Preferred Card from American
     Express" measured 256px inside a 247px cell, shoving the value off the
     right edge of a 320px screen. Let it shrink and wrap; the value keeps its
     own line via flex-wrap when the name is very long. */
  table.rt td{flex-wrap:wrap}
  table.rt td::before{content:attr(data-l);color:var(--muted);font-size:12px;
    flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
  table.rt td.rt-first{display:block;padding:0 0 6px!important;font-size:15px}
  table.rt td.rt-first::before{display:none}
  table.rt td.rt-rank{display:none}
  table.rt .rt-rank-in{color:var(--accent);font-weight:800;margin-right:8px}
  /* nested <div>s: in the name cell the issuer stays on its own line under the
     name; in value cells (e.g. 'first $50,000/year') they sit inline. */
  table.rt td.rt-first > div{display:block;font-size:12px;color:var(--dim);margin-top:2px}
  table.rt td:not(.rt-first) > div{display:inline;margin-left:6px}
}

/* Skip to content — WCAG 2.4.1 (Bypass Blocks, Level A). Every page puts the
   brand, seven nav links, a menu toggle and two buttons ahead of the content,
   so without this a keyboard or screen-reader user tabs through ten controls
   on every single page before reaching anything they came for. Off-screen
   until focused, then it lands in the top-left; :focus rather than
   :focus-visible because it must appear for keyboard focus of any origin. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:1000}
.skiplink:focus{left:8px;top:8px;width:auto;height:auto;padding:10px 14px;
  background:var(--accent,#4ea1ff);color:#06121f;font-weight:700;font-size:14px;
  border-radius:8px;text-decoration:none;outline:2px solid #fff;outline-offset:2px}
/* Same split as .btn.pri: #06121f is right on the BRIGHT dark-theme accent
   (10.67:1) and wrong on the light theme's dark green (3.46:1), and darkening
   that accent for its text role is what pushed it under. The skip link is a
   WCAG 2.4.1 affordance — its own label being hard to read is a poor joke —
   so light theme paints it white, 5.45:1. */
html[data-theme="light"] .skiplink:focus{color:#fff}
/* The target is a landmark, not a control: never paint a focus ring on it. */
main:focus{outline:none}

/* ── report a wrong number (site.js injects the markup) ────────────────────
   Sits under the footer disclaimer, which is exactly where a reader who has
   just been told "card terms change often" decides ours is wrong. Quiet by
   default: a link-weight button that opens a real form, not a modal. */
.rep{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.rep-open{background:none;border:0;padding:0;cursor:pointer;color:var(--info);
  font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.rep-open:hover{color:var(--txt)}
#repForm{margin-top:12px;max-width:520px;display:flex;flex-direction:column;gap:6px}
#repForm label{font-size:12px;color:var(--muted);font-weight:600}
#repForm textarea,#repForm input{width:100%;background:var(--bg2);color:var(--txt);
  border:1px solid var(--line2);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px}
#repForm textarea{resize:vertical;min-height:72px}
.rep-send{align-self:flex-start;margin-top:4px;padding:9px 16px;border-radius:10px;
  border:1px solid transparent;background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#052a1d;font-weight:650;font-size:14px;cursor:pointer}
html[data-theme="light"] .rep-send{color:#fff}   /* same split as .btn.pri */
.rep-send:disabled{opacity:.6;cursor:default}
#repOut{font-size:13px;color:var(--muted);margin-top:2px;min-height:1em}