/* ─────────────────────────────────────────────────────────────
   Actual Budget Spendıng Tracker — autumn 2026
   The palette is the autumn store deck's own: the grey-lilac
   ground #E3E3EC and the amber wave #D9711A. Re-coloured every
   season, with the deck (PANEL-DESIGN.md § The season calendar).
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root{
  --ground:#E3E3EC;          /* the deck's ground — the hero band matches it exactly, so the
                                cropped panel merges into the page with no visible edge */
  --bg:#F4F4F8;
  --surface:#FFFFFF;
  --amber:#D9711A;
  --amber-deep:#B4590E;
  --amber-soft:#FBEEE1;
  --ink:#15151B;
  --ink-2:#4C4C59;
  --ink-3:#7C7C8B;
  --line:rgba(21,21,27,.12);
  --line-soft:rgba(21,21,27,.07);
  --radius:20px;
  --shadow:0 1px 2px rgba(21,21,27,.05), 0 12px 32px -12px rgba(21,21,27,.16);
  --shadow-lg:0 2px 4px rgba(21,21,27,.05), 0 32px 64px -24px rgba(21,21,27,.28);
  --max:1180px;
  --font:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
         'Hiragino Sans', 'Yu Gothic', 'Apple SD Gothic Neo', 'PingFang SC',
         'Microsoft YaHei', 'Noto Sans CJK SC', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.i18n-pending body{visibility:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.04}
p{margin:0}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-deep);margin-bottom:18px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:500;
}
.skip:focus{left:0}

/* ── header ─────────────────────────────────────────────── */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(227,227,236,.82);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(21,21,27,.08);
}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:68px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.mark img{width:34px;height:34px;border-radius:9px;box-shadow:0 1px 3px rgba(21,21,27,.22)}
.mark b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.mark span{display:block;font-size:11.5px;font-weight:400;color:var(--ink-3);letter-spacing:.01em}
.hdr nav{display:flex;gap:26px;margin-left:auto}
.hdr nav a{
  text-decoration:none;font-size:14.5px;font-weight:450;color:var(--ink-2);
  transition:color .15s;
}
.hdr nav a:hover{color:var(--ink)}
.hdr-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.hdr nav+.hdr-actions{margin-left:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;cursor:pointer;font-family:inherit;text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:-.01em;
  padding:11px 20px;border-radius:999px;transition:transform .16s, background .16s, box-shadow .16s;
}
.btn-amber{background:var(--amber);color:#fff;box-shadow:0 1px 2px rgba(180,89,14,.3)}
.btn-amber:hover{background:var(--amber-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-2);padding:9px 12px}
.btn-ghost:hover{background:rgba(21,21,27,.06);color:var(--ink)}
.btn-sm{font-size:14px;padding:9px 16px}

/* language switcher */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px}
.lang-btn svg{opacity:.55}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);width:250px;padding:8px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
  box-shadow:var(--shadow-lg);
  display:none;grid-template-columns:1fr 1fr;gap:2px;
}
.lang-menu.open{display:grid}
.lang-menu button{
  display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:450;color:var(--ink-2);
  padding:8px 10px;border-radius:9px;transition:background .12s;
}
.lang-menu button:hover{background:var(--bg)}
.lang-menu button.is-active{background:var(--amber-soft);color:var(--amber-deep);font-weight:500}
/* On a generated page each language is its own URL, so the menu is real links rather than
   buttons. They must look and behave identically. */
.lang-menu a{
  display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:450;color:var(--ink-2);text-decoration:none;
  padding:8px 10px;border-radius:9px;transition:background .12s;
}
.lang-menu a:hover{background:var(--bg)}
.lang-menu a.is-active{background:var(--amber-soft);color:var(--amber-deep);font-weight:500}

/* ── the offer bar ──────────────────────────────────────────
   Shown only when the visitor's own language is one this page is not in. It OFFERS; it never
   moves anybody, and it is labelled with the language's endonym so it needs no translation. */
.lang-hint{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;background:var(--amber-soft);color:var(--amber-deep);
  font-size:14px;font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--line-soft);
}
.lang-hint:hover{filter:brightness(.97)}
.lang-hint svg{opacity:.7;flex:0 0 auto}
.lang-hint[hidden]{display:none}

/* ── hero ───────────────────────────────────────────────── */
.hero{background:var(--ground);position:relative;overflow:hidden}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:48px;align-items:center;padding:72px 24px 72px;
}
.hero-copy{padding-bottom:88px;max-width:600px}
.hero h1{
  font-size:clamp(2.7rem,5.6vw,4.35rem);font-weight:600;
  letter-spacing:-.038em;line-height:.99;margin-bottom:24px;
}
.hero .lede{
  font-size:clamp(1.08rem,1.55vw,1.32rem);color:var(--ink-2);
  line-height:1.5;max-width:33ch;margin-bottom:34px;
}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-bottom:4px}
.btn-store{
  background:var(--ink);color:#fff;font-size:16px;padding:15px 26px;
  box-shadow:0 2px 4px rgba(21,21,27,.16), 0 16px 32px -16px rgba(21,21,27,.5);
}
.btn-store:hover{background:#000;transform:translateY(-1px)}
.platforms{font-size:13.5px;color:var(--ink-3)}

.independent{
  display:flex;gap:11px;align-items:flex-start;
  margin-top:30px;padding:14px 16px 14px 15px;max-width:490px;
  background:rgba(255,255,255,.6);border:1px solid rgba(21,21,27,.09);
  border-left:3px solid var(--amber);border-radius:4px 14px 14px 4px;
  font-size:13.5px;line-height:1.5;color:var(--ink-2);
}
.independent svg{flex-shrink:0;margin-top:2px;color:var(--amber-deep)}

/* the wreath claim — the same credential, from the same source, as the store panel's */
.wreath{position:relative;display:grid;place-items:center;width:168px;height:100px;flex-shrink:0}
.wreath img{position:absolute;inset:0;width:168px;height:100px}
.wreath-txt{position:relative;text-align:center;line-height:1}
.wreath-txt b{display:block;font-size:24px;font-weight:600;letter-spacing:-.03em}
.wreath-txt span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:5px}

/* THE HERO PAIR — panels 01 and 02, always together (operator, 2026-08-27). They are one
   drawing split across two store slots: the device spans the join, the amber wave runs
   through it and the mascot stands on it. Butted edge to edge they read as a single image,
   which is why panel 02 alone looked like a fragment. Both carry data-panel, so the pair
   follows the store picker like every other screen on the page. */
/* align-self:start, not end (2026-09-03) — a taller translated headline (German ran to four
   lines against English's three) grew the row, and "end" then pushed the same-sized image
   down to meet the row's new bottom, so the identical image sat at a different y per
   language. "start" pins the image to the top of the row always, so its size AND position
   are now locale-invariant; any headline slack lands as empty space under the copy, which
   already carries its own padding-bottom for exactly that. */
.hero-visual{position:relative;align-self:start;display:flex;justify-content:center;min-width:0}
.hero-pair{
  display:flex;width:100%;max-width:600px;
  aspect-ratio:1440 / 1561;          /* the two panels side by side, exactly */
  border-radius:24px;overflow:hidden;background:var(--ground);
  box-shadow:0 2px 6px rgba(21,21,27,.06), 0 40px 80px -28px rgba(21,21,27,.34);
}
.hero-pair img{display:block;width:50%;height:100%;object-fit:cover}

/* ── proof strip ────────────────────────────────────────── */
.strip{background:var(--amber);color:#fff}
.strip .wrap{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 54px;
  padding-top:26px;padding-bottom:26px;
}
.strip div{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:450}
.strip svg{opacity:.85}
/* the wreath's claim, moved out of the hero: panel 01 draws the wreath a few pixels away */
.strip-claim{gap:8px!important}
.strip-claim b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.strip-claim span{opacity:.9}

/* ── sections ───────────────────────────────────────────── */
section{padding:104px 0}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:16px}
.sec-head p{font-size:1.08rem;color:var(--ink-2);line-height:1.55}

/* ── screens ────────────────────────────────────────────── */
#screens{background:var(--bg)}
.screens-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-bottom:14px;
}
.seg{display:inline-flex;background:rgba(21,21,27,.06);border-radius:999px;padding:3px}
.seg button{
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:500;color:var(--ink-3);padding:8px 20px;border-radius:999px;
  transition:background .15s,color .15s;
}
.seg button.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(21,21,27,.14)}
.stores{display:flex;align-items:center;gap:10px;flex:1;min-width:240px}
.stores label{font-size:13px;color:var(--ink-3);flex-shrink:0}
.stores select{
  font-family:inherit;font-size:14.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;cursor:pointer;max-width:260px;
}
.fallback-note{
  display:none;align-items:center;gap:9px;margin-bottom:22px;
  font-size:13.5px;color:var(--ink-2);
  background:var(--amber-soft);border-radius:12px;padding:11px 15px;
}
.fallback-note.show{display:flex}
.fallback-note svg{color:var(--amber-deep);flex-shrink:0}

.rail{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 24px 30px;margin:0 -24px;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail[hidden]{display:none}
.rail figure{margin:0;flex:0 0 auto;scroll-snap-align:center}
.rail img{
  border-radius:26px;box-shadow:var(--shadow-lg);background:var(--ground);
}
/* Panels 01 and 02 are one drawing across two store slots, so the rail shows them joined
   rather than as two cards separated by a gap (operator, 2026-08-27). */
.rail .shot-pair{display:flex;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg)}
.rail .shot-pair img{border-radius:0;box-shadow:none}
#rail-iphone img{width:252px;height:auto}
#rail-ipad img{width:470px;height:auto;border-radius:20px}

/* ── features ───────────────────────────────────────────── */
#features{background:var(--surface)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px}
.card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:28px 26px 30px;transition:border-color .18s, transform .18s, box-shadow .18s;
}
.card:hover{border-color:rgba(217,113,26,.35);transform:translateY(-2px);box-shadow:var(--shadow)}
.card .n{
  font-size:12px;font-weight:600;color:var(--amber);letter-spacing:.1em;
  display:block;margin-bottom:14px;
}
.card h3{font-size:1.24rem;font-weight:600;margin-bottom:10px;letter-spacing:-.024em}
.card p{font-size:15px;color:var(--ink-2);line-height:1.58}

/* ── review ─────────────────────────────────────────────── */
#review{background:var(--amber);color:#fff}
#review[hidden]{display:none}
#review .eyebrow{color:rgba(255,255,255,.72)}

/* One slide per real review, scroll-snapped, with dots underneath. Every review here is
   5-star and quoted word for word — the stars beside a quote are that review's own. */
.reviews{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.reviews::-webkit-scrollbar{display:none}
.reviews:focus-visible{outline-offset:14px;border-radius:4px}
.review-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.stars{display:flex;gap:9px;margin-bottom:24px}
.stars svg{width:24px;height:24px}
blockquote{
  margin:0;max-width:880px;font-size:clamp(1.4rem,2.9vw,2.2rem);font-weight:400;
  line-height:1.26;letter-spacing:-.024em;
}
.credit{margin-top:24px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.86)}
.dots{display:flex;gap:10px;margin-top:38px}
.dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.38);transition:background .2s, width .2s;
}
.dots button.is-active{background:#fff;width:26px;border-radius:5px}
.verbatim{margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.6)}

/* ── faq ────────────────────────────────────────────────── */
#faq{background:var(--bg)}
.faq-list{max-width:820px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:1.13rem;font-weight:500;letter-spacing:-.018em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 60px 26px 0;color:var(--ink-2);font-size:16px;line-height:1.62;max-width:70ch}
details p a,.faq-body a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px}
.faq-body{padding:0 60px 12px 0;max-width:70ch}
.faq-body p{padding:0;margin:0 0 15px;color:var(--ink-2);font-size:16px;line-height:1.62}
.faq-body p:last-child{margin-bottom:14px}

/* ── support ────────────────────────────────────────────── */
#support{background:var(--ground)}
#support .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.support-copy{max-width:560px}
.support-copy h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:16px}
.support-copy p{color:var(--ink-2);margin-bottom:28px;font-size:1.05rem}
.mail{
  display:inline-flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:12px 22px;
  font-size:15.5px;font-weight:500;text-decoration:none;box-shadow:var(--shadow);
  transition:transform .16s;
}
.mail:hover{transform:translateY(-1px)}
/* Refunds are Apple's alone. This line exists so nobody spends a week waiting on our inbox
   for an answer we have no power to give (operator, 2026-08-27). */
.support-note{
  display:flex;align-items:flex-start;gap:9px;margin-top:22px;
  font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:48ch;
}
.support-note svg{flex-shrink:0;margin-top:3px;color:var(--amber-deep)}
.support-note a{white-space:nowrap}
.support-note a{color:var(--amber-deep);font-weight:500;text-decoration:underline;text-underline-offset:2px}
#support img{width:190px;height:auto}

/* ── footer ─────────────────────────────────────────────── */
footer{background:var(--ink);color:rgba(255,255,255,.62);padding:76px 0 40px;font-size:14.5px}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px;padding-bottom:46px}
footer .mark b{color:#fff}
footer .mark span{color:rgba(255,255,255,.45)}
.f-desc{margin-top:18px;max-width:36ch;line-height:1.6}
footer h4{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
footer a{text-decoration:none;transition:color .15s}
footer a:hover{color:#fff}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  font-size:13px;color:rgba(255,255,255,.45);
}
.f-identity{max-width:74ch;line-height:1.6}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:980px){
  .hdr nav{display:none}
  /* `1fr` is minmax(auto,1fr), so the 900px-wide hero image would force the column — and the
     whole page — wider than the viewport, clipping the copy against overflow-x:hidden. */
  .hero .wrap{grid-template-columns:minmax(0,1fr);padding-top:56px;gap:0}
  .hero-copy{padding-bottom:44px}
  .hero .lede{max-width:46ch}
  .hero-visual{margin:0 auto;width:100%}
  .hero-pair{max-width:460px}
  #support .wrap{grid-template-columns:1fr}
  #support img{width:150px}
  .f-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:640px){
  body{font-size:16px}
  .hdr .wrap{gap:12px}
  .mark{min-width:0}
  .mark b{font-size:14px}
  .btn-ghost{padding:9px 8px}
  section{padding:76px 0}
  .wrap{padding:0 20px}
  .hero .wrap{padding-top:44px}
  .sec-head{margin-bottom:38px}
  .rail{gap:16px;padding:8px 20px 26px;margin:0 -20px}
  .hero-pair{max-width:none;border-radius:16px}
  #rail-iphone img{width:214px}
  #rail-ipad img{width:330px}
  .proof{gap:20px}
  .f-grid{grid-template-columns:1fr}
  .lang-menu{grid-template-columns:1fr;width:186px}
}
@media (max-width:480px){
  .mark span{display:none}
  .lang-btn span{display:none}
  .hero .lede{max-width:none}
  .independent{max-width:none}
}

/* ─────────────────────────────────────────────────────────────
   Legal pages — privacy.html · terms.html · dpa.html
   The page CHROME is translated; the legal text itself is
   published in English only, and is never re-authored here.
   Those three documents were corrected across three commits for
   Guideline 3.2(f) — the seller of record, a missing subscription
   section and two false claims — so this file restyles them and
   touches no word of them.
   ───────────────────────────────────────────────────────────── */
.legal{background:var(--bg);padding:56px 0 96px}
.legal .wrap{max-width:820px}
.back{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:14.5px;font-weight:500;color:var(--ink-2);margin-bottom:38px;
  transition:color .15s;
}
.back:hover{color:var(--amber-deep)}
.legal-banner{
  display:flex;gap:12px;align-items:flex-start;margin:0 0 44px;
  background:var(--amber-soft);border-radius:14px;padding:16px 18px;
  font-size:14px;line-height:1.55;color:var(--ink-2);
}
.legal-banner strong{color:var(--ink)}

.doc{color:var(--ink-2);font-size:16.5px;line-height:1.72}
.doc h1{
  font-size:clamp(2rem,4vw,2.8rem);color:var(--ink);letter-spacing:-.032em;
  margin:0 0 12px;line-height:1.06;
}
.doc h2{
  font-size:1.32rem;color:var(--ink);margin:52px 0 14px;letter-spacing:-.022em;
  padding-top:26px;border-top:1px solid var(--line-soft);
}
.doc h3{font-size:1.08rem;color:var(--ink);margin:32px 0 10px}
.doc h1+p,.doc .effective-date{color:var(--ink-3);font-size:14.5px;margin-bottom:8px}
.doc p{margin:0 0 16px}
.doc ul,.doc ol{margin:0 0 20px;padding-left:22px}
.doc li{margin-bottom:9px}
.doc a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px}
.doc strong{color:var(--ink);font-weight:600}
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:rgba(21,21,27,.06);padding:2px 6px;border-radius:5px;color:var(--ink);
}
.doc table{
  width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px;
  display:block;overflow-x:auto;
}
.doc th,.doc td{border:1px solid var(--line-soft);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--ground);color:var(--ink);font-weight:600}
.doc hr{border:0;border-top:1px solid var(--line-soft);margin:40px 0}
.doc blockquote{
  margin:0 0 20px;padding:2px 0 2px 18px;border-left:3px solid var(--amber);
  font-size:16px;line-height:1.65;color:var(--ink-2);
}

/* ─────────────────────────────────────────────────────────
   TIER-1 DIFFERENTIATOR PAGES
   /budget-app-without-bank-sync/ and its four siblings. One page per language whose whole
   subject is the query family measured in NOTES/SEO/2026-08-27-google-organic-study.md
   sec.4 — "a budget app that never asks for your bank". Built from templates/tier1.html by
   tools/build-pages.py, in the FIVE languages where the harvest actually found the phrasing
   (en, de, ja, fr, nl) and in no others.

   These reuse the home page's whole design system — .hero, .sec-head, .grid, .card,
   .faq-list, footer — so a season re-colour reaches them through the tokens at the top of
   this file and nothing here needs touching.
   ───────────────────────────────────────────────────────── */

/* Until a locale's own store deck exists, the page carries NO screenshot rather than an
   en-US one (build-pages.py gates it on decks.json status). So the hero has to look
   deliberate with one column and with two. */
.t1-hero.no-shot .wrap{grid-template-columns:minmax(0,1fr)}
.t1-hero.no-shot .hero-copy{max-width:760px;padding-bottom:64px}
.t1-hero.no-shot .hero h1,.t1-hero.no-shot h1{max-width:18ch}
.t1-hero.no-shot .lede{max-width:52ch}
.t1-hero .hero-copy{padding-top:4px}
.t1-hero h1{font-size:clamp(2.3rem,4.4vw,3.5rem);line-height:1.02}
.t1-hero .lede{max-width:42ch}

.crumb{font-size:13px;color:var(--ink-3);margin-bottom:22px}
.crumb a{text-decoration:none;color:var(--ink-3);border-bottom:1px solid transparent}
.crumb a:hover{color:var(--ink-2);border-bottom-color:var(--line)}
.crumb::after{content:" ›";opacity:.55}

#why{background:var(--surface)}
#manual{background:var(--bg)}
#data{background:var(--surface)}
#does{background:var(--ground)}

/* The two prose sections. A measure this narrow is the point: these paragraphs are the
   answer someone searched for, and a 90-character line is not read, it is skimmed. */
.t1-prose{max-width:64ch}
.t1-prose p{font-size:1.06rem;line-height:1.68;color:var(--ink-2)}
.t1-prose p+p{margin-top:20px}
.t1-prose a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px}

.t1-list{list-style:none;margin:0;padding:0;max-width:72ch;
  border-top:1px solid var(--line);}
.t1-list li{
  position:relative;padding:17px 0 17px 34px;border-bottom:1px solid var(--line);
  font-size:16.5px;line-height:1.5;color:var(--ink-2);
}
.t1-list li::before{
  content:"";position:absolute;left:4px;top:26px;width:9px;height:9px;
  border-radius:50%;background:var(--amber);
}
.t1-more{margin-top:26px;font-size:15px;color:var(--ink-3)}
.t1-more a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px}

#end{background:var(--ink);color:#fff;text-align:center}
#end h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:16px}
#end p{color:rgba(255,255,255,.66);margin-bottom:34px;font-size:1.05rem}
#end .btn-store{background:var(--amber);box-shadow:0 2px 4px rgba(180,89,14,.34)}
#end .btn-store:hover{background:var(--amber-deep)}

@media (max-width:980px){
  .t1-hero .hero-copy{padding-bottom:44px}
  .t1-hero.no-shot .hero-copy{padding-bottom:44px}
}
@media (max-width:640px){
  .t1-hero h1{font-size:clamp(2rem,7.4vw,2.6rem)}
  .t1-hero .lede,.t1-hero.no-shot .lede{max-width:none}
  .t1-list li{padding-left:28px;font-size:15.5px}
}

/* The iPad landing page leads with ONE landscape panel rather than the phone pair: the whole
   subject of that page is the wide layout, so showing it in a phone frame would argue against
   the headline. */
.hero-ipad{align-self:center}
.hero-ipad img{
  width:100%;max-width:620px;height:auto;border-radius:18px;background:var(--ground);
  box-shadow:0 2px 6px rgba(21,21,27,.06), 0 40px 80px -28px rgba(21,21,27,.34);
}
@media (max-width:980px){ .hero-ipad img{margin:0 auto 40px} }

/* The landing pages' own screenshot rail and review band. Both reuse the home page's
   components; only the surrounding section differs, because these pages have no store picker
   and no carousel — one static quote, readable by a crawler, with nothing to strand. */
.t1-rail-sec{padding:0 0 96px;background:var(--ground)}
.t1-hero + .t1-rail-sec{padding-top:0}
.t1-rail{padding-top:0}
.rail-iphone img{width:238px;height:auto}
.rail-ipad img{width:470px;height:auto;border-radius:20px}

.t1-review{background:var(--amber);color:#fff;text-align:center}
.t1-review .eyebrow{color:rgba(255,255,255,.72)}
.t1-review .stars{justify-content:center;margin:0 auto 24px}
.t1-review blockquote{margin:0 auto;max-width:24ch}
.t1-review .credit,.t1-review .verbatim{margin-left:auto;margin-right:auto}
@media (max-width:640px){
  .t1-rail-sec{padding-bottom:64px}
  .rail-iphone img{width:206px}
  .rail-ipad img{width:330px}
}

/* The comparison scorecard. Only the /budget-app-vs-spreadsheet/ page has one — it is that
   page's argument made visible, and its competitor column is deliberately not empty. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.score-wrap{overflow-x:auto;max-width:860px}
.score{width:100%;border-collapse:collapse;text-align:left;min-width:520px}
.score thead th{padding:0 0 18px;text-align:center;width:116px;font-weight:400}
.score-head{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em}
.score-head img{width:34px;height:34px;border-radius:9px;
  box-shadow:0 1px 3px rgba(21,21,27,.22)}
.score-glyph{width:40px;height:40px;color:var(--ink-3)}
.score-head.is-us{color:var(--ink)}
.score tbody tr{border-top:1px solid var(--line)}
.score tbody tr:last-child{border-bottom:1px solid var(--line)}
.score th[scope=row]{padding:16px 22px 16px 0;font-weight:400}
.score th[scope=row] b{display:block;font-size:16px;font-weight:500;color:var(--ink);
  letter-spacing:-.015em;margin-bottom:3px}
.score th[scope=row] span{display:block;font-size:14px;line-height:1.5;color:var(--ink-3)}
.score td{text-align:center;vertical-align:middle}
.tick{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--amber);color:#fff;font-size:14px;line-height:1}
.win-them .tick{background:rgba(21,21,27,.24)}
/* On a phone the table stops insisting on 520px and simply fits: two 66px tick columns and
   the rest for the row's label. A nested horizontal scroll inside a vertically scrolling page
   is a worse answer than a narrower table, and it was also pushing the whole document 17px
   wide at 500 - caught by verify-pages.py, which measures the document rather than the box. */
@media (max-width:640px){
  .score-wrap{max-width:100%}
  .score{min-width:0}
  .score thead th{width:66px}
  .score th[scope=row]{padding-right:12px}
  .score th[scope=row] b{font-size:15px}
  .score th[scope=row] span{font-size:13.5px}
  .score-glyph{width:34px;height:34px}
  .score-head img{width:30px;height:30px}
}

/* The header is sticky at 68px, so an anchor link lands its target UNDER it — the section's
   own heading is the part that disappears, which is the one part the visitor clicked for.
   Found 2026-08-28 while checking the landing pages' nav; it was on the home page too, and
   has been since the header became sticky. `scroll-margin-top` is the whole fix and it also
   covers the deep links into a FAQ answer. */
[id]{scroll-margin-top:84px}

/* One screen beside the paragraph that argues for it. The rail near the top of the page shows
   everything; this shows the RIGHT one at the moment the case is made — on the comparison page
   that is the expense list, because that list is literally what replaces the sheet. */
/* CENTRED, not top-aligned. The prose is two paragraphs and the phone is tall, so aligning
   their tops left the text stranded in the upper-left with the screen hanging far below it —
   two things on one row that looked like they belonged to different sections. Centring makes
   it one row, and the screen is then large enough to actually read. */
.t1-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.t1-shot{margin:0;flex-shrink:0}
.t1-shot img{border-radius:26px;box-shadow:var(--shadow-lg);background:var(--ground)}
.t1-shot-iphone img{width:330px;height:auto}
.t1-shot-ipad img{width:540px;height:auto;border-radius:18px}
.t1-shot figcaption{margin-top:18px;max-width:330px;font-size:13.5px;line-height:1.5;
  color:var(--ink-3)}
.t1-shot-ipad figcaption{max-width:540px}
/* The heading lives INSIDE the left column, so heading + prose + screen are one row rather
   than a heading floating above two things that then drift apart. */
.t1-split-copy{min-width:0}
.t1-split-copy .sec-head{margin-bottom:28px;max-width:none}
.t1-split .t1-prose{max-width:56ch}
/* Where a section has no screen beside it, the split is a single column and must not inherit
   the narrower measure meant for the two-column case. */
.t1-split:not(:has(.t1-shot)){grid-template-columns:minmax(0,1fr)}
@media (max-width:1080px){
  .t1-split{grid-template-columns:minmax(0,1fr);gap:44px}
  .t1-shot{justify-self:center}
  .t1-shot figcaption{text-align:center;margin-left:auto;margin-right:auto}
  .t1-split .t1-prose{max-width:64ch}
}
@media (max-width:640px){
  .t1-shot-iphone img{width:min(300px,86vw)}
  .t1-shot-ipad img{width:100%}
  .t1-shot figcaption,.t1-shot-ipad figcaption{max-width:none}
}

/* The row that leads the scorecard carries a small waveform beside its label — attention on
   the ROW, not on the tick. The tick column has to mean one thing in every row or the table
   stops being readable at a glance, so it is never the place to make an exception. */
.score .row-icon{width:19px;height:19px;color:var(--amber);vertical-align:-3px;margin-right:9px}
.score tbody tr.has-icon th[scope=row] span{padding-left:28px}
@media (max-width:640px){
  .score .row-icon{width:17px;height:17px;margin-right:7px}
  .score tbody tr.has-icon th[scope=row] span{padding-left:24px}
}

/* ── the Canada page's decoration ────────────────────────────────────────────
   The flag's maple leaf, three of them, angled and cropped by the band edges.
   Two other leaves were tried here first and both were the wrong word:

   - the autumn deck's own ORANGE leaf, which would have tied this page to the
     panels a visitor meets on the App Store. It reads as AUTUMN, not Canada.
   - a botanical dark-red leaf. Better, but still a leaf that happens to be red
     rather than the symbol anybody recognises in a glance.

   Drawing the 11-point leaf by hand was attempted and abandoned: every attempt
   read as a spiky star, and a badly approximated national symbol is worse than
   no symbol at all.

   ANGLED AND CROPPED, NOT UPRIGHT AND WHOLE. One upright leaf sitting clear of
   every edge was tried and withdrawn (operator, 2026-08-29): a symbol presented
   whole and level in the middle of a band reads as a BADGE - an emblem the page
   is claiming - while the same symbol entering from a corner at an angle reads
   as what it is, decoration. It is also the gesture the store deck already uses
   for its own leaves. So the rule that survives is not "upright"; it is:

     never a circular seal, a ribbon, or anything shaped like a mark of approval.
     A national symbol arranged as a badge on a commercial page implies an
     endorsement nobody gave us.

   It is CSS rather than markup because it is decoration and nothing else -
   there is no alt text to write, and no screen reader should meet it.

   Scoped to [data-topic="canada"] so the other six landing pages are untouched,
   and positioned to survive BOTH hero states: today the right-hand column is
   empty (no en-CA deck yet), and from September it holds the phone pair, with
   the leaf cropped by the band edge behind it.
   ────────────────────────────────────────────────────────────────────────── */
[data-topic="canada"] .hero .wrap{position:relative;z-index:1}
[data-topic="canada"] .hero::before,
[data-topic="canada"] .hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  background:url('leaf-maple-flag.webp') center/contain no-repeat;
}
[data-topic="canada"] .hero::before{
  top:-64px;right:-52px;width:268px;height:302px;
  transform:rotate(17deg);opacity:.92;
}
[data-topic="canada"] .hero::after{
  bottom:-78px;left:-56px;width:186px;height:210px;
  transform:rotate(-29deg);opacity:.5;
}
/* The feature list is capped at 72ch, so on any width above ~1100px the right half of this
   band is empty while the copy stays left. That gap is where the leaf goes - clear of the
   text at every width rather than behind it. */
[data-topic="canada"] #does{position:relative;overflow:hidden}
[data-topic="canada"] #does .wrap{position:relative;z-index:1}
[data-topic="canada"] #does::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:50%;right:-58px;width:288px;height:325px;margin-top:-162px;
  background:url('leaf-maple-flag.webp') center/contain no-repeat;
  transform:rotate(-14deg);opacity:.82;
}
/* The FAQ's counterpart, on the LEFT so the two bands do not both lean the same way.
   The list is capped at 820px and starts at the wrap's left edge, so this leaf has far less
   room than the one opposite it: it is smaller, sits mostly off-canvas, and appears only
   above 1360px, where the centred wrap has actually opened a gap beside it. Below that it
   would be behind the questions, so it is not drawn at all. */
[data-topic="canada"] #faq{position:relative;overflow:hidden}
[data-topic="canada"] #faq .wrap{position:relative;z-index:1}
@media (min-width:1360px){
  [data-topic="canada"] #faq::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    top:50%;left:-142px;width:240px;height:271px;margin-top:-135px;
    background:url('leaf-maple-flag.webp') center/contain no-repeat;
    transform:rotate(16deg);opacity:.8;
  }
}
[data-topic="canada"] #end{position:relative;overflow:hidden}
[data-topic="canada"] #end .wrap{position:relative;z-index:1}
[data-topic="canada"] #end::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  bottom:-56px;right:-40px;width:206px;height:232px;
  background:url('leaf-maple-flag.webp') center/contain no-repeat;
  transform:rotate(22deg);opacity:.26;
}
@media (max-width:980px){
  [data-topic="canada"] .hero::before{width:204px;height:230px;top:-48px;right:-58px}
  [data-topic="canada"] .hero::after{display:none}
  [data-topic="canada"] #does::after{width:208px;height:235px;right:-76px;margin-top:-117px;opacity:.7}
}
@media (max-width:640px){
  /* On a phone the hero is one column and the headline reaches the right edge, so the leaf
     moves OUT of the text and down into the band below the copy. A decoration that sits
     over the H1 is not decoration. */
  [data-topic="canada"] .hero::before{
    width:168px;height:190px;top:auto;bottom:-48px;right:-46px;
    transform:rotate(22deg);opacity:.62;
  }
  [data-topic="canada"] #end::after{width:142px;height:160px;bottom:-38px;right:-30px}
  /* On a phone the list fills the width, so there is no clear gap - it would sit behind text. */
  [data-topic="canada"] #does::after{display:none}
}

/* ONE portrait panel as the hero, for a landing page that has a screen of its own.
   The CPP rule: the page opens with the screen its subject is about. `.hero-pair` stays the
   default, because two panels are one drawing there - this is the single-screen case. */
.hero-one{
  width:100%;max-width:326px;border-radius:24px;overflow:hidden;background:var(--ground);
  box-shadow:0 2px 6px rgba(21,21,27,.06), 0 40px 80px -28px rgba(21,21,27,.34);
  display:block;
}
.hero-one img{display:block;width:100%;height:auto}
@media (max-width:980px){ .hero-one{margin:0 auto 40px} }