/* The public site's one stylesheet (public site plan T1, 2026-10-09).
 *
 * Loaded FIRST on every page (before a family stylesheet and before a page's own
 * <style>), so a page can still say what is only its own. It holds:
 *   1. the token block: every colour on the site, by name. No hex colour may
 *      appear in any other CSS on the site (scripts/build-site-chrome.py --check).
 *      rgba() shadows and washes are still literal; dark mode (T2) adds one more
 *      token block and turns the ones that must flip into tokens;
 *   2. the nav and the footer (markup: scripts/site_chrome.py);
 *   3. what more than one page family shares: the trust strip, the "your own
 *      key" tag, the compare-page frame and price row, the closing call to
 *      action, the tool CTA, the rate digest form, the verified-bank table.
 * The link carries ?v=<content hash> (stamped by build-site-chrome.py), and
 * _headers caches this file for a year, so a change ships by re-stamping.
 */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* surfaces and text */
  --bg:#F7FAFC;--surface:#FFFFFF;--surface-2:#EEF4F4;--surface-hover:#FBFDFD;--badge-light:#F4F7FA;
  --line:#DCE4EA;--line-strong:#C9D6DD;--chrome-dot:#D3DCE2;
  --ink:#0B1F1C;--muted:#44555E;--faint:#5E7079;--on-brand:#FFFFFF;
  /* brand and meaning */
  --brand:#0D9488;--brand-deep:#0B7A70;--brand-deeper:#075E56;--teal:#028090;
  --accent:#B45309;--accent-bright:#D97706;
  --good:#15803D;--good-tint:#EDF7F0;--good-tint-2:#ECFDF5;--good-line:#A7F3D0;
  --bad:#B91C1C;--bad-deep:#991B1B;--bad-tint:#FEF2F2;--bad-line:#FECACA;
  --sky:#2563EB;--sky-glow:#5BAEF0;--indigo:#4F46E5;
  /* amber: the add-on colour (your own key, founding, trial notes, verdicts) */
  --amber-ink:#8A3F07;--amber-ink-hover:#6B3005;--amber-ink-deep:#7C3D06;
  --amber-tint:#FDF3E7;--amber-line:#F3D9B5;
  --warn-tint:#FFF7ED;--warn-line:#FED7AA;--verdict-tint:#FFF8ED;--verdict-line:#F3D9A8;
  --gold-tint-1:#FFFCF5;--gold-tint-2:#FFF8EC;--gold-tint-3:#FFFDFA;
  /* the dark hero (home, pricing) and the dark footer */
  --cosmic-bg:#0A0F1C;--cosmic-bg-2:#0B1424;--cosmic-ink:#EAF1F8;--cosmic-muted:#A8BBCC;
  --cosmic-faint:#5C6E84;--cosmic-faint-2:#8396AB;--cosmic-line:rgba(255,255,255,0.10);--cosmic-panel:#0F1729;
  --core:#2DD4BF;--core-bright:#2DE0C8;--gold:#F4B740;--violet:#8B7CF0;
  /* status */
  --up:#15803D;--up-tint:#DCFCE7;--up-ink:#14532D;
  --degraded:#B45309;--degraded-tint:#FEF3C7;--degraded-ink:#92400E;
  --down:#B23B3B;--down-tint:#FEE2E2;--down-ink:#7F1D1D;
  --maint:#2563EB;--nodata:#CBD5DD;
  /* fills under a white label (buttons, pills, the selected tab): the same in
     both schemes, and never used as text. Text uses the tokens above, which dark
     mode lightens; a fill must not, or its white label would wash out. */
  --brand-fill:#0B7A70;--brand-deep-fill:#075E56;--brand-deeper-fill:#064A44;
  --indigo-fill:#4F46E5;--good-fill:#15803D;--bad-fill:#B91C1C;
  /* chrome */
  --nav-bg:rgba(247,250,252,0.85);
  /* light glass over the page (sticky bars, cards inside a tinted card) */
  --glass:rgba(247,250,252,0.9);--glass-card:rgba(255,255,255,0.72);
  color-scheme:light dark;
  --site-maxw:1180px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:'Space Grotesk','SG Fallback',var(--sans);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* Dark (site plan T2, D-E): follows the system, no toggle. Only tokens that sit
   on a light surface move; the cosmic hero, the fills and the fonts do not.
   Every text/surface pair here is held at 4.5:1 by scripts/site-contrast.py. */
@media (prefers-color-scheme: dark){
:root{
  --bg:#0B1220;--surface:#111B2E;--surface-2:#16233A;--surface-hover:#15213A;--badge-light:#18253C;
  --line:#24334D;--line-strong:#33445F;--chrome-dot:#2C3A52;
  --ink:#E7EEF6;--muted:#A8B6C7;--faint:#8D9CAF;
  --brand:#2DD4BF;--brand-deep:#5EEAD4;--teal:#67E8F9;
  --accent:#FBBF24;--accent-bright:#F59E0B;
  --good:#4ADE80;--good-tint:#0F2A1C;--good-tint-2:#0C2A22;--good-line:#1F5A3A;
  --bad:#F87171;--bad-tint:#2B1517;--bad-line:#6B2A2E;
  --sky:#60A5FA;--sky-glow:#7CC0F5;--indigo:#A5B4FC;
  --amber-ink:#F6C177;--amber-ink-hover:#FCD9A0;--amber-ink-deep:#F2B25C;
  --amber-tint:#2A1E0E;--amber-line:#5C4216;
  --warn-tint:#2A1D0D;--warn-line:#5E3C12;--verdict-tint:#2B210F;--verdict-line:#5E4719;
  --gold-tint-1:#1A1710;--gold-tint-2:#211B0F;--gold-tint-3:#18160F;
  --up-tint:#0F2A1C;--up-ink:#86EFAC;--degraded-tint:#2B2108;--degraded-ink:#FCD34D;
  --down-tint:#2C1416;--down-ink:#FCA5A5;--nodata:#3A4A63;
  --nav-bg:rgba(11,18,32,0.82);--glass:rgba(11,18,32,0.88);--glass-card:rgba(255,255,255,0.04);
}
}

/* Hidden until billing config says otherwise (the edge renderer and
   pricing-hydrate.js remove the class; handbook 08). */
.cfg-hidden{display:none !important}

/* ── 2. Nav ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--sans);line-height:1.5}
.nav a{text-decoration:none}
.nav-inner{max-width:var(--site-maxw);margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
@media(min-width:760px){.nav-inner{padding:.95rem 2.2rem}}
.nav .brand{display:flex;align-items:center;gap:.7rem;color:inherit}
.nav .brand-logo{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;position:relative}
.nav .brand-logo img{position:absolute;width:118%;height:118%;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:cover;display:block}
.nav .brand-name{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:1.8rem;margin-left:auto}
.nav-links a{font-size:.92rem;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s;opacity:.8}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--ink);font-weight:600}
.nav-links a[aria-current]::after{background:var(--brand-fill);opacity:1}
.nav-links a.nav-signin{color:var(--ink);font-weight:600}
.nav-links a.nav-cta{font-size:.88rem;font-weight:700;color:var(--on-brand);background:linear-gradient(120deg,var(--brand-fill),var(--brand-deep-fill));padding:.55rem 1.3rem;border-radius:999px;box-shadow:0 4px 14px rgba(13,148,136,0.3)}
.nav-links a.nav-cta:hover{color:var(--on-brand);transform:translateY(-1px)}
.nav-offer-pill{display:inline-flex;align-items:center;gap:.3rem;margin-left:.4rem;padding:.12rem .42rem;border-radius:999px;background:var(--indigo-fill);color:var(--on-brand);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;vertical-align:middle;transform:translateY(-1px)}
.nav-offer-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--on-brand);animation:offerPulse 1.8s ease-in-out infinite}
@keyframes offerPulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.nav-menu{display:none;position:relative;margin-left:.55rem}
.nav-menu > summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.nav-menu > summary::-webkit-details-marker{display:none}
.nav-menu > summary span,.nav-menu > summary span::before,.nav-menu > summary span::after{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,background .2s ease}
.nav-menu > summary span{position:relative}
.nav-menu > summary span::before,.nav-menu > summary span::after{content:'';position:absolute;left:0}
.nav-menu > summary span::before{top:-5px}
.nav-menu > summary span::after{top:5px}
.nav-menu[open] > summary span{background:transparent}
.nav-menu[open] > summary span::before{transform:translateY(5px) rotate(45deg)}
.nav-menu[open] > summary span::after{transform:translateY(-5px) rotate(-45deg)}
.nav-menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:flex;flex-direction:column;padding:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(11,31,28,0.16);z-index:80}
.nav-menu-panel a{padding:.6rem .8rem;border-radius:9px;font-size:.95rem;color:var(--ink)}
.nav-menu-panel a.nav-more{padding:.45rem .8rem;font-size:.88rem;color:var(--muted)}
.nav-menu-panel a[aria-current]{font-weight:600}
.nav-menu-panel a:hover,.nav-menu-panel a:focus-visible{background:var(--surface-2)}
.nav-menu-panel hr{border:0;border-top:1px solid var(--line);margin:.3rem .4rem}
.nav a:focus-visible,.nav summary:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px}
@media(max-width:900px){
  .nav-links a:not(.nav-cta){display:none}
  .nav-menu{display:block}
}
/* A dark page (the user guide) says so on <body> and the bar re-tints; the
   markup stays the same. */
.sf-dark .nav{background:rgba(10,15,28,0.72);border-bottom-color:rgba(255,255,255,0.08)}
.sf-dark .nav{color:var(--cosmic-ink)}
.sf-dark .nav-links a{color:var(--cosmic-muted)}
.sf-dark .nav-links a:hover,.sf-dark .nav-links a.nav-signin,.sf-dark .nav-links a[aria-current]{color:var(--cosmic-ink)}
.sf-dark .nav-links a.nav-cta{color:var(--on-brand)}
.sf-dark .nav-menu > summary{background:rgba(234,241,248,0.06);border-color:rgba(255,255,255,0.08);color:var(--cosmic-ink)}
.sf-dark .nav-menu-panel{background:var(--cosmic-panel);border-color:rgba(255,255,255,0.08);box-shadow:0 18px 40px rgba(0,0,0,0.5)}
.sf-dark .nav-menu-panel a{color:var(--cosmic-ink)}
.sf-dark .nav-menu-panel a.nav-more{color:var(--cosmic-muted)}
.sf-dark .nav-menu-panel a:hover,.sf-dark .nav-menu-panel a:focus-visible{background:rgba(234,241,248,0.07)}
.sf-dark .nav-menu-panel hr{border-top-color:rgba(255,255,255,0.08)}

/* ── 3. Footer ───────────────────────────────────────────────────────────── */
.sf{
  --sf-bg:var(--bg);--sf-line:var(--line);--sf-ink:var(--ink);--sf-muted:var(--muted);
  --sf-faint:var(--faint);--sf-brand:var(--brand-deep);--sf-chip:var(--surface);
  border-top:1px solid var(--sf-line);background:var(--sf-bg);color:var(--sf-muted);
  font-family:var(--sans);font-weight:400;line-height:1.5;text-align:left;
}
/* A page's own `p` (about.html: 1.25rem, weight 300) must not reach in here. */
.sf p{font-weight:400}
.sf-in{max-width:var(--site-maxw);margin:0 auto;padding:3rem 1.5rem 1.75rem}
.sf-top{display:grid;grid-template-columns:minmax(200px,1fr) repeat(4,minmax(0,1fr));gap:2rem 1.5rem}
.sf-brand{min-width:0}
.sf-logo{display:inline-flex;align-items:center;gap:.55rem;color:var(--sf-ink);text-decoration:none}
.sf-logo img{width:28px;height:28px;border-radius:7px;display:block}
.sf-logo span{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.sf-tag{margin:.75rem 0 0;max-width:17rem;font-size:.9rem;line-height:1.5;color:var(--sf-muted)}
.sf-apps{margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.sf-apps a{display:inline-flex;align-items:center;height:32px;padding:0 .8rem;border:1px solid var(--sf-line);border-radius:8px;background:var(--sf-chip);color:var(--sf-ink);font-size:.82rem;font-weight:600;text-decoration:none}
.sf-apps a:hover{border-color:var(--sf-brand);color:var(--sf-brand)}
.sf-col{min-width:0}
.sf .sf-col h2{margin:0 0 .85rem;padding:0;border:0;font-family:var(--sans);font-size:.72rem;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--sf-ink)}
.sf .sf-col ul{list-style:none;margin:0;padding:0}
.sf .sf-col li{margin:0 0 .55rem;padding:0;line-height:1.35}
.sf .sf-col li::before{content:none}
.sf .sf-col a{color:var(--sf-muted);font-size:.9rem;text-decoration:none}
.sf .sf-col a:hover{color:var(--sf-brand);text-decoration:underline;text-underline-offset:3px}
.sf-base{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--sf-line);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.5rem;font-size:.8rem;line-height:1.5;color:var(--sf-faint)}
.sf-base p{margin:0;font-size:inherit;color:inherit}
.sf-base nav{display:flex;gap:1.25rem}
.sf-base a{color:var(--sf-faint);text-decoration:none}
.sf-base a:hover{color:var(--sf-brand);text-decoration:underline;text-underline-offset:3px}
.sf a:focus-visible{outline:2px solid var(--sf-brand);outline-offset:2px;border-radius:3px}
/* A dark page (the user guide) says so on <body>; the markup stays the same. */
.sf-dark .sf{--sf-bg:var(--cosmic-bg-2);--sf-line:rgba(255,255,255,0.08);--sf-ink:var(--cosmic-ink);--sf-muted:var(--cosmic-muted);--sf-faint:var(--cosmic-faint-2);--sf-brand:var(--core);--sf-chip:rgba(255,255,255,0.04)}
/* Tablet: the brand takes the top row, the four columns sit under it. */
@media(max-width:900px){
  .sf-top{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sf-brand{grid-column:1/-1}
}
/* Phone: two columns, 16px gutter. */
@media(max-width:600px){
  .sf-in{padding:2.25rem 1rem 1.5rem}
  .sf-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}
  .sf-base{flex-direction:column}
}

/* ── 4. Shared pieces ────────────────────────────────────────────────────── */

/* Trust strip (acquisition plan T4): under every sign-up CTA on the site, the
   pricing page and the app's confirm screen, always the same three facts.
   Inherits the colour and alignment of the CTA it sits under (light on the
   dark hero, ink on a card); never wider than that block. */
.trust-strip{margin:.7rem 0 0;font-size:.8rem;line-height:1.5;color:inherit;text-wrap:balance}
.trust-strip a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.trust-strip a:hover{text-decoration-thickness:2px}
.sf-dark .trust-strip,.trust-strip.on-dark{color:rgba(255,255,255,0.72)}
.sf-dark .trust-strip a:hover,.trust-strip.on-dark a:hover{color:var(--on-brand)}

/* "Your own key" tag (public pages PP9). LunchFlow is a separate company the
   reader signs up with and pays; the full statement is said once, at
   /pricing#lunchflow. Amber, the add-on colour, never the brand teal. */
.byo-tag{display:inline-block;margin-left:.3rem;padding:.05rem .5rem;border:1px solid rgba(180,83,9,0.32);border-radius:999px;background:rgba(217,119,6,0.08);color:var(--amber-ink);font-size:.78em;font-weight:600;line-height:1.5;letter-spacing:0;text-decoration:none;white-space:nowrap;vertical-align:.05em}
.byo-tag::after{content:" \2197"}
.byo-tag:hover{background:rgba(217,119,6,0.16);color:var(--amber-ink-hover)}
.byo-tag:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* Compare pages (PP19): one product frame before the feature table; on a phone
   the tall capture is cropped to its top. */
.cmp-shot{margin:0 0 2.2rem}
.cmp-shot-frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 24px 60px rgba(11,31,28,0.12),0 6px 18px rgba(11,31,28,0.05)}
.cmp-shot-frame img{display:block;width:100%;height:auto}
@media(max-width:600px){.cmp-shot-frame img{max-height:min(560px,70vh);object-fit:cover;object-position:top}}
.cmp-shot figcaption{margin-top:.7rem;font-size:.9rem;color:var(--muted);text-align:center}

/* Compare pages: price is the last row of the comparison table (D-A), rendered
   by scripts/build-competitor-prices.py. Each price in its own currency, then
   "≈" the other one, muted; a price never breaks inside itself. */
.price-row td{border-top:2px solid var(--line)}
.price-row .pr-line{display:block}
.price-row .pr-line + .pr-line{margin-top:.3rem}
.pr-amt,.price-row [data-plan-price]{white-space:nowrap;font-variant-numeric:tabular-nums}
.pr-approx{color:var(--faint);font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-row .pr-meta{display:block;margin-top:.5rem;font-size:.85em;line-height:1.45;color:var(--faint)}
.price-row .pr-meta.pr-src{margin-top:.1rem}
.price-row .pr-meta a{color:inherit;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.price-row .pr-meta a:hover{color:var(--brand-deep)}
@media(max-width:480px){.price-row td{font-size:.9em;padding-left:.55rem;padding-right:.55rem}}

/* The closing call to action on the switch and comparison pages: one button,
   one line of terms, one secondary link. */
.end-cta{margin:2.6rem 0 1rem;padding:1.6rem 1.5rem;border-radius:14px;text-align:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.end-cta h2{margin:0 0 .35rem;font-size:1.35rem;line-height:1.25}
.end-cta p{margin:0;color:var(--muted)}
.end-cta .end-cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 1.2rem;margin-top:1.1rem}
.end-cta .end-cta-btn{display:inline-flex;align-items:center;height:2.75rem;padding:0 1.4rem;border-radius:999px;background:var(--brand-deep-fill);color:var(--on-brand);font-weight:700;text-decoration:none;border:0}
.end-cta .end-cta-btn:hover{background:var(--brand-deeper-fill)}
.end-cta .end-cta-btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.end-cta .end-cta-link{color:var(--brand-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* "Track every transfer automatically": the end of every free tool (T7). */
.tool-cta{margin:2.2rem 0 2.6rem;padding:1.3rem 1.4rem;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.tool-cta p{margin:0 0 .4rem}
.tool-cta .btnrow{margin:.8rem 0 0}

/* Monthly rate digest form (acquisition plan T7, /site/digest.js). Hidden until
   digest.js renders it, and it renders only while the digest is open. */
.digest{margin:2.2rem 0;padding:1.4rem 1.4rem 1.1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left}
.digest[hidden]{display:none}
.digest h2{font-size:1.25rem;margin:0 0 .35rem}
.digest .digest-lede{margin:0 0 1rem;color:var(--muted);font-size:.95rem;line-height:1.55}
.digest-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.digest-form[hidden]{display:none}
.digest-field{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
.digest-email{flex:1 1 14rem;min-width:0}
.digest-field input,.digest-field select{font:inherit;font-size:.95rem;height:2.5rem;padding:0 .7rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);width:100%}
.digest-field select{width:auto;min-width:5.2rem}
.digest-field input:focus,.digest-field select:focus,.digest-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.digest-btn{height:2.5rem;padding:0 1.1rem;border:0;border-radius:999px;background:var(--brand-fill);color:var(--on-brand);font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;white-space:nowrap}
.digest-btn:hover{background:var(--brand-deep-fill)}
.digest-btn[disabled]{opacity:.6;cursor:progress}
.digest-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.digest-status{margin:.7rem 0 0;font-size:.92rem;min-height:1.2em;color:var(--muted)}
.digest-status.err{color:var(--bad)}
.digest-status.ok{color:var(--good);font-weight:600}
.digest .digest-fine{margin:.5rem 0 0;font-size:.78rem;color:var(--faint)}
@media(max-width:520px){.digest-btn{width:100%}}

/* Verified bank list (T9, scripts/build-verified-banks.py). */
.vb-wrap{overflow-x:auto;margin:0 0 1rem}
.vb-table{width:100%;border-collapse:collapse;font-size:.95rem}
.vb-table th,.vb-table td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--line)}
.vb-table th{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
.vb-table td:last-child,.vb-table th:last-child{text-align:right;white-space:nowrap}

/* ── 5. Motion ───────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .nav-menu > summary span,.nav-menu > summary span::before,.nav-menu > summary span::after,.nav-links a::after{transition:none}
  .nav-offer-pill::before{animation:none}
}