/* Actual Budget — the face on the halimozturk.com family (family.css v1.0.1).
   family.css is a verbatim copy and is never edited here; everything below either sets this
   site's colours or styles a component the family sheet does not have (language menu, store
   picker, review carousel, landing-page parts, the legal document). */

/* season:start halloween */
:root {
  --g1:#2b1260; --g2:#6a3fd0; --acc:#ffc46b; --sfg:#fff;
  --aura1:#6a3fd0; --aura2:#ffc46b; --aura3:#9b6bff;
  --sheen:linear-gradient(90deg,#6a3fd0,#8a55f0 25%,#ffc46b 50%,#e6a94e 70%,#6a3fd0);
  --ground:#e3e3ec;
}
/* season:end */
:root {
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Apple SD Gothic Neo", "PingFang SC", "PingFang TC", sans-serif;
  --body:"Onest", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Apple SD Gothic Neo", "PingFang SC", "PingFang TC", sans-serif;
  --acc-ink:#6a3fd0;
  --soft:color-mix(in srgb, var(--g2) 9%, var(--surface));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --acc-ink:#b9a0ff } }
:root[data-theme="dark"] { --acc-ink:#b9a0ff }

/* runtime.js hides the page until a translated page has its strings */
html.i18n-pending body { visibility:hidden }
[id] { scroll-margin-top:84px }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip { position:absolute; left:-9999px; top:8px; z-index:100; padding:10px 16px; border-radius:10px; background:var(--ink-btn); color:var(--ink-btn-fg); text-decoration:none; font-weight:600 }
.skip:focus { left:8px }

/* CJK and Cyrillic: the display face has no glyphs there, so tighten less */
:lang(ja) .hero h1, :lang(ko) .hero h1, :lang(zh) .hero h1, :lang(zh-Hans) .hero h1, :lang(zh-Hant) .hero h1 { letter-spacing:-.02em; line-height:1.08; max-width:14ch }
:lang(ja) .headline, :lang(ko) .headline, :lang(zh) .headline, :lang(zh-Hans) .headline, :lang(zh-Hant) .headline,
:lang(ja) .section-head h2, :lang(ko) .section-head h2, :lang(zh) .section-head h2, :lang(zh-Hans) .section-head h2, :lang(zh-Hant) .section-head h2 { letter-spacing:-.01em; line-height:1.15 }
:lang(ru) .hero h1, :lang(uk) .hero h1 { font-family:var(--body); font-weight:600; letter-spacing:-.04em }
.hero h1, .headline, .section-head h2 { overflow-wrap:break-word; hyphens:auto }

/* ── top bar ─────────────────────────────────────────────── */
.brand-name { display:grid; gap:2px; line-height:1 }
.brand-name b { font:700 17px/1 var(--display); letter-spacing:-.02em }
.brand-name > span { font:500 12px/1 var(--body); color:var(--muted); letter-spacing:0 }
.hdr-actions { display:flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto }
.topnav + .hdr-actions { margin-left:18px }
.hdr-actions .btn.sm { margin-left:0 }
.lang { position:relative }
.lang-btn { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:6px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--fg); font:500 14px/1 var(--body); cursor:pointer }
.lang-btn:hover { border-color:var(--fg) }
.lang-btn svg { opacity:.6; flex:0 0 auto }
.lang-menu { position:absolute; right:0; top:calc(100% + 10px); width:260px; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 60px -20px rgb(8 10 20 / .35); display:none; grid-template-columns:1fr 1fr; gap:2px; z-index:60 }
.lang-menu.open { display:grid }
.lang-menu a, .lang-menu button { display:block; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; font:450 14px/1.3 var(--body); color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:9px }
.lang-menu a:hover, .lang-menu button:hover { background:var(--soft); color:var(--fg) }
.lang-menu a.is-active, .lang-menu button.is-active { background:color-mix(in srgb, var(--g2) 16%, var(--surface)); color:var(--fg); font-weight:600 }
.lang-hint { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; background:color-mix(in srgb, var(--acc) 30%, var(--bg)); color:var(--fg); font-size:14px; font-weight:500; text-decoration:none; border-bottom:1px solid var(--line) }
.lang-hint svg { opacity:.7; flex:0 0 auto }
.lang-hint[hidden] { display:none }
@media (max-width:600px) {
  .hero-visual { justify-content:center }
  .brand-name > span, .lang-btn [data-lang-current] { display:none }
  .topbar .wrap { gap:10px }
  .lang-menu { position:fixed; left:var(--gut); right:var(--gut); top:72px; width:auto }
}
@media (max-width:380px) { .brand-name b { font-size:15px } }

/* ── hero ─────────────────────────────────────────────────── */
.hero h1 em { padding-bottom:.06em }
.facts { list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:10px }
.facts li { display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:14px; font-weight:500 }
.facts li svg { width:17px; height:17px; color:var(--g2); flex:0 0 auto }
.facts .fact-big b { font:800 16px/1 var(--display); letter-spacing:-.02em; color:var(--acc-ink) }
.independent { display:flex; gap:9px; align-items:flex-start; margin:18px 0 0; max-width:62ch; font-size:13.5px; line-height:1.5; color:var(--muted) }
.independent svg { flex:0 0 auto; margin-top:2px }
.fan figure, .shots figure { margin:0 }
.fan-item { background:var(--ground) }

/* ── stages ───────────────────────────────────────────────── */
.app h3.headline { color:var(--sfg) }
.tiles li { display:grid; gap:3px; font-weight:400 }
.tiles li b { font-weight:600; font-size:16px }
.tiles li span { opacity:.78; line-height:1.45 }
.shots img { background:var(--ground) }
.app .mascot { width:min(100%,360px); height:auto; justify-self:center; filter:drop-shadow(0 30px 40px rgb(0 0 0 / .35)) }
.closing { padding-block:clamp(56px,8vw,112px) 0 }
.cta .stage { grid-template-columns:minmax(0,7fr) minmax(0,4fr) }
.cta .ctas .btn { background:var(--sfg); color:var(--g1) }
.cta .cat { margin:0 0 16px }
@media (max-width:960px) {
  .cta .stage { grid-template-columns:minmax(0,1fr) }
  .app .mascot { width:min(70%,260px) }
}

/* ── screens showcase (iPhone / iPad, per store) ──────────── */
.showcase { margin-top:clamp(24px,3vw,40px); border-radius:clamp(24px,3.4vw,40px); padding:clamp(20px,3.4vw,44px) clamp(16px,3.4vw,44px) clamp(8px,1.6vw,20px); background:radial-gradient(120% 90% at 85% 0%, var(--g2), var(--g1) 70%); color:var(--sfg); overflow:hidden }
.screens-bar { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-bottom:16px }
.seg { display:inline-flex; background:rgb(255 255 255 / .12); border:1px solid rgb(255 255 255 / .16); border-radius:999px; padding:3px }
.seg button { border:0; background:transparent; cursor:pointer; font:500 14px/1 var(--body); color:rgb(255 255 255 / .8); padding:10px 20px; border-radius:999px; transition:background .15s, color .15s }
.seg button.is-active { background:var(--sfg); color:var(--g1) }
.stores { display:flex; align-items:center; gap:10px; flex:1 1 220px; min-width:0 }
.stores label { font-size:13px; opacity:.75; flex-shrink:0 }
.stores select { font:500 14.5px/1.2 var(--body); color:var(--g1); background:var(--sfg); border:0; border-radius:999px; padding:10px 16px; cursor:pointer; max-width:100%; min-width:0 }
.fallback-note { display:none; align-items:center; gap:9px; margin:0 0 16px; font-size:13.5px; background:rgb(255 255 255 / .12); border-radius:12px; padding:11px 15px }
.fallback-note.show { display:flex }
.fallback-note svg { flex-shrink:0; color:var(--acc) }
.rail { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 0 28px; 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 { display:block; border-radius:22px; background:var(--ground); box-shadow:0 24px 50px -20px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .1) }
.rail .shot-pair { display:flex; border-radius:22px; overflow:hidden; box-shadow:0 24px 50px -20px rgb(0 0 0 / .55) }
.rail .shot-pair img { border-radius:0; box-shadow:none }
#rail-iphone img { width:236px; height:auto }
#rail-ipad img { width:460px; height:auto; border-radius:18px }
@media (max-width:600px) {
  #rail-iphone img { width:190px }
  #rail-ipad img { width:300px }
  .seg button { padding:10px 16px }
}

/* ── reviews ──────────────────────────────────────────────── */
#review[hidden] { display:none }
.review-band, .t1-review .wrap { border-radius:clamp(24px,3.4vw,40px); padding:clamp(28px,5vw,64px); background:radial-gradient(120% 120% at 10% 0%, var(--g2), var(--g1) 70%); color:var(--sfg) }
.review-band .eyebrow, .t1-review .eyebrow { color:rgb(255 255 255 / .7) }
.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:8px; margin-bottom:22px; color:var(--acc) }
.stars svg { width:24px; height:24px }
.review-band blockquote, .t1-review blockquote { margin:0; max-width:30ch; font:700 clamp(24px,3.2vw,40px)/1.18 var(--display); letter-spacing:-.025em; text-wrap:balance }
.credit { margin-top:22px; font-size:14.5px; font-weight:500; opacity:.85 }
.dots { display:flex; gap:10px; margin-top:32px }
.dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgb(255 255 255 / .38); transition:background .2s, width .2s }
.dots button.is-active { background:var(--acc); width:26px; border-radius:5px }
.verbatim { margin:20px 0 0; font-size:12.5px; opacity:.6 }

/* ── trust cards, FAQ ─────────────────────────────────────── */
.card .mail { color:var(--fg); font-weight:500; word-break:break-all }
.card p a { color:var(--acc-ink); font-weight:500 }
.faq details a, .faq-body a, .t1-prose a, .t1-more a { color:var(--acc-ink); text-decoration:underline; text-underline-offset:2px }
.faq .faq-body p + p { margin-top:-6px }
.t1-more { margin:24px 0 0; font-size:15px; color:var(--muted) }

/* ── footer ───────────────────────────────────────────────── */
.foot-cols { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:28px; padding-top:24px; border-top:1px solid var(--line) }
.foot-cols .brand { color:var(--fg) }
.foot-cols .f-desc { margin:12px 0 0; max-width:36ch }
.foot-cols h4 { margin:0 0 12px; font:600 13px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--fg) }
.foot-cols ul { display:grid; gap:8px }
footer .legal { align-items:flex-start }
footer .legal p { margin:0 }
.f-identity { max-width:70ch; font-size:13px; line-height:1.5 }
.f-copy a { color:var(--fg) }
@media (max-width:700px) { .foot-cols { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .foot-cols > div:first-child { grid-column:1 / -1 } }

/* ── landing (tier-1) pages ───────────────────────────────── */
.t1-hero .wrap { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px,5vw,72px); align-items:center }
.t1-hero.no-shot .wrap { grid-template-columns:minmax(0,1fr) }
.t1-hero h1 { font-size:clamp(40px,5.6vw,80px); max-width:16ch }
.t1-hero.no-shot h1 { max-width:18ch }
.crumb { font-size:13px; color:var(--muted); margin-bottom:22px }
.crumb a { text-decoration:none; color:var(--muted) } .crumb a:hover { color:var(--fg) }
.crumb::after { content:" ›"; opacity:.55 }
.t1-hero .ctas .platforms { font-size:14px; color:var(--muted) }
.hero-visual { position:relative; display:flex; justify-content:center; min-width:0 }
.hero-visual .hero-pair { display:flex; width:100%; max-width:520px; aspect-ratio:1440 / 1561; border-radius:28px; overflow:hidden; background:var(--ground); box-shadow:0 40px 80px -28px rgb(8 10 20 / .45) }
.hero-visual .hero-pair img { display:block; width:50%; height:100%; object-fit:cover }
.hero-one { width:100%; max-width:320px; border-radius:28px; overflow:hidden; background:var(--ground); box-shadow:0 40px 80px -28px rgb(8 10 20 / .45) }
.hero-one img { display:block; width:100%; height:auto }
.hero-ipad img { width:100%; max-width:620px; height:auto; border-radius:18px; box-shadow:0 40px 80px -28px rgb(8 10 20 / .45) }
.card .n { font:700 13px/1 var(--display); color:var(--acc-ink); letter-spacing:.08em }
.t1-prose { max-width:64ch; margin-top:clamp(20px,2.4vw,32px) }
.t1-prose p { font-size:17px; line-height:1.7; color:var(--muted); margin:0 }
.t1-prose p + p { margin-top:18px }
.t1-list { list-style:none; margin:clamp(24px,3vw,40px) 0 0; padding:0; max-width:72ch; border-top:1px solid var(--line) }
.t1-list li { position:relative; padding:16px 0 16px 32px; border-bottom:1px solid var(--line); font-size:16.5px; line-height:1.5; color:var(--muted) }
.t1-list li::before { content:""; position:absolute; left:4px; top:24px; width:10px; height:10px; border-radius:3px; background:var(--g2); transform:rotate(45deg) }
.t1-rail-sec { padding-block:clamp(40px,6vw,72px) 0 }
.t1-rail { padding-top:8px }
.rail-iphone img { width:228px; height:auto }
.rail-ipad img { width:460px; height:auto; border-radius:18px }
.t1-review { padding-block:clamp(48px,7vw,96px) 0; text-align:center }
.t1-review .stars { justify-content:center }
.t1-review blockquote { margin:0 auto }
.t1-split { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:64px; align-items:center }
.t1-split:not(:has(.t1-shot)) { grid-template-columns:minmax(0,1fr) }
.t1-split-copy { min-width:0 }
.t1-shot { margin:0 }
.t1-shot img { display:block; border-radius:26px; background:var(--ground); box-shadow:0 40px 80px -28px rgb(8 10 20 / .45) }
.t1-shot-iphone img { width:320px; height:auto }
.t1-shot-ipad img { width:540px; height:auto; border-radius:18px }
.t1-shot figcaption { margin-top:16px; max-width:320px; font-size:13.5px; line-height:1.5; color:var(--muted) }
.t1-shot-ipad figcaption { max-width:540px }
.score-wrap { overflow-x:auto; max-width:860px; margin-top:clamp(24px,3vw,40px) }
.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(--muted) }
.score-head img { width:34px; height:34px; border-radius:9px }
.score-head.is-us { color:var(--fg) }
.score-glyph { width:40px; height:40px; color:var(--muted) }
.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:600; color:var(--fg); margin-bottom:3px }
.score th[scope=row] span { display:block; font-size:14px; line-height:1.5; color:var(--muted) }
.score td { text-align:center; vertical-align:middle }
.tick { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--g2); color:#fff; font-size:14px; line-height:1 }
.win-them .tick { background:color-mix(in srgb, var(--fg) 28%, transparent) }
.score .row-icon { width:19px; height:19px; color:var(--g2); vertical-align:-3px; margin-right:9px }
.score tbody tr.has-icon th[scope=row] span { padding-left:28px }
@media (max-width:1080px) {
  .t1-split { grid-template-columns:minmax(0,1fr); gap:40px }
  .t1-shot { justify-self:center }
}
@media (max-width:960px) {
  .t1-hero .wrap { grid-template-columns:minmax(0,1fr) }
  .hero-visual { justify-content:flex-start }
}
@media (max-width:600px) {
  .rail-iphone img { width:190px }
  .rail-ipad img { width:300px }
  .t1-shot-iphone img { width:min(300px,82vw) }
  .t1-shot-ipad img { width:100% }
  .score-wrap { max-width:100% }
  .score { min-width:0 }
  .score thead th { width:66px }
  .score th[scope=row] { padding-right:12px }
  .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 keeps its maple leaves, scoped so no other page carries them */
[data-topic="canada"] .hero::after { content:""; position:absolute; z-index:-1; pointer-events:none; top:-40px; right:-52px; width:250px; height:282px; background:url('leaf-maple-flag.webp') center/contain no-repeat; transform:rotate(17deg); opacity:.85 }
[data-topic="canada"] #does { position:relative; overflow:hidden }
[data-topic="canada"] #does::after { content:""; position:absolute; z-index:-1; 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:.7 }
[data-topic="canada"] #end .stage::before { content:""; position:absolute; z-index:-1; pointer-events:none; bottom:-56px; left:-40px; width:206px; height:232px; background:url('leaf-maple-flag.webp') center/contain no-repeat; transform:rotate(-22deg); opacity:.3 }
@media (max-width:980px) { [data-topic="canada"] #does::after { display:none } [data-topic="canada"] .hero::after { width:170px; height:192px; top:auto; bottom:-30px } }

/* ── legal pages: the document on the family .legal-page chrome ── */
.legal-page .back { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-size:14.5px; font-weight:500; color:var(--muted); margin-bottom:28px }
.legal-page .back:hover { color:var(--fg) }
.legal-banner { margin:0 0 40px; background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-size:14px; line-height:1.55; color:var(--muted) }
.legal-banner strong { color:var(--fg) }
.doc { font-size:16px; line-height:1.72 }
.doc h1 { font:800 clamp(34px,5vw,52px)/1.02 var(--display); letter-spacing:-.04em; color:var(--fg); margin:0 0 12px }
.doc h2 { padding-top:24px; border-top:1px solid var(--line); color:var(--fg) }
.doc h3 { font:700 17px/1.3 var(--display); color:var(--fg); margin:28px 0 10px }
.doc h1 + p, .doc .effective-date { font-size:14px }
.doc strong { color:var(--fg); font-weight:600 }
.doc a { text-decoration:underline; text-underline-offset:2px }
.doc ol { padding-left:22px; margin:0 0 16px }
.doc code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.86em; background:var(--soft); padding:2px 6px; border-radius:5px; color:var(--fg) }
.doc table { width:100%; border-collapse:collapse; margin:0 0 24px; font-size:14.5px; display:block; overflow-x:auto }
.doc th, .doc td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; color:var(--muted) }
.doc th { background:var(--soft); color:var(--fg); font-weight:600 }
.doc hr { border:0; border-top:1px solid var(--line); margin:40px 0 }
.doc blockquote { margin:0 0 20px; padding:2px 0 2px 18px; border-left:3px solid var(--g2); color:var(--muted) }