/* Billing: banner, paywall, subscription sheet, legal pages. Tokens from base.css. */
.bl-ic{width:20px;height:20px;flex:none;display:block}
.bl-ic.sm{width:16px;height:16px}

/* Modals live outside .app, so give billing sheets their own accent. */
.bl-sheet{--acc:var(--acc-dima)}
.bl-sheet[data-sex="f"]{--acc:var(--acc-alisa)}
.bl-sheet{--acc-soft:color-mix(in srgb,var(--acc) 12%,var(--surface));--acc-line:color-mix(in srgb,var(--acc) 40%,var(--line))}
.bl-sheet a{color:var(--acc)}

/* spinner inside buttons */
.bl-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}

/* ---------- banner under the header ---------- */
.bl-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic t x" "ic c x";column-gap:10px;row-gap:8px;align-items:center;margin-top:14px;padding:10px 6px 10px 14px;border-radius:14px;background:var(--acc-soft);border:1px solid var(--acc-line);font-size:14px;line-height:1.4}
.bl-bar>.bl-ic{grid-area:ic;align-self:start;margin-top:1px;color:var(--acc)}
.bl-bar p{grid-area:t;display:flex;flex-wrap:wrap;column-gap:8px;min-width:0}
.bl-bar b{font-weight:650}
.bl-bar p span{color:var(--ink-2)}
.bl-bar-cta{grid-area:c;justify-self:start;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--acc);color:var(--acc-ink);font:650 13.5px/1 var(--sans);padding:9px 14px;min-height:36px;cursor:pointer;white-space:nowrap}
.bl-bar-cta:disabled{opacity:.6;cursor:default}
.bl-bar-x{grid-area:x;align-self:start;border:0;background:transparent;color:var(--ink-3);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.bl-bar-x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.bl-bar.warn{background:color-mix(in srgb,var(--warn) 12%,var(--surface));border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.bl-bar.warn>.bl-ic{color:var(--warn)}
.bl-bar.bad{background:color-mix(in srgb,var(--bad) 10%,var(--surface));border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.bl-bar.bad>.bl-ic{color:var(--bad)}
.bl-bar.bad .bl-bar-cta{background:var(--bad);color:var(--acc-ink)} /* acc-ink: white on light red, near-black on the light dark-mode red */
@media (min-width:640px){
  .bl-bar{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"ic t c x";padding-block:8px}
  .bl-bar>.bl-ic,.bl-bar-x{align-self:center;margin-top:0}
}
.bl-foot{display:flex;flex-wrap:wrap;gap:6px 10px}
.bl-foot a{color:var(--ink-2)}

/* ---------- paywall (full screen gate) ---------- */
.bl-pw{min-height:100vh;background:radial-gradient(1100px 560px at 12% -12%,color-mix(in srgb,var(--acc) 20%,var(--bg)),var(--bg) 72%)}
.bl-pw-top{max-width:1120px;margin:0 auto;padding:14px 16px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.bl-pw-top .logo{font-size:20px}
.bl-pw-top .btn{min-height:36px;padding:7px 14px;font-size:14px;border-radius:999px}
.bl-pw-main{max-width:1120px;margin:0 auto;padding:10px 16px 56px;display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
@media (min-width:720px){.bl-pw-top,.bl-pw-main{padding-inline:24px}}
@media (min-width:920px){
  .bl-pw-main{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;padding-top:36px;align-items:start}
  .bl-pw-buy{position:sticky;top:20px}
}
.bl-kicker{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.3 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 13px 6px 10px;box-shadow:var(--shadow)}
.bl-kicker .bl-ic{color:var(--acc)}
.bl-kicker.bad .bl-ic{color:var(--bad)}
.bl-pw-h{font:700 clamp(34px,9vw,68px)/1 var(--display);letter-spacing:-.025em;margin:18px 0 0}
@media (min-width:920px){.bl-pw-h{font-size:clamp(40px,4.6vw,64px)}}
.bl-pw-lead{font-size:17px;line-height:1.55;color:var(--ink-2);margin-top:16px;max-width:50ch}
.bl-recap{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bl-recap li{display:inline-flex;align-items:center;gap:7px;font:600 13.5px/1.2 var(--sans);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px 7px 10px}
.bl-recap .bl-ic{color:var(--ok)}
.bl-pw-fig{display:none;margin:28px 0 0;border-radius:22px;overflow:hidden;background:var(--tile);box-shadow:var(--shadow);max-width:560px}
.bl-pw-fig .ex-fig{border-radius:0}
@media (min-width:920px){.bl-pw-fig{display:block}}
.bl-pw-buy{padding:22px 18px;border-radius:22px;box-shadow:0 1px 2px rgba(20,24,28,.06),0 18px 50px rgba(20,24,28,.10);display:grid;gap:14px;min-width:0}
@media (min-width:420px){.bl-pw-buy{padding:24px 22px}}
.bl-pro{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

/* plan picker */
.bl-plans{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.bl-legend{font:650 18px/1.3 var(--sans);padding:0;margin:0 0 10px}
.bl-plan{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"r n p" "r s s";column-gap:12px;row-gap:3px;align-items:center;border:1.5px solid var(--line);border-radius:16px;padding:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,background-color .15s}
.bl-plan:hover{border-color:var(--acc-line)}
.bl-plan input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bl-radio{grid-area:r;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink-3);display:grid;place-items:center}
.bl-plan.on{border-color:var(--acc);background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc)}
.bl-plan.on .bl-radio{border-color:var(--acc)}
.bl-plan.on .bl-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc)}
.bl-plan:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
.bl-plan-name{grid-area:n;font:650 16px/1.3 var(--sans);display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.bl-badge{font:700 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;font-style:normal;background:var(--acc);color:var(--acc-ink);border-radius:999px;padding:5px 8px}
.bl-plan-price{grid-area:p;text-align:right;white-space:nowrap}
.bl-plan-price b{font:650 20px/1.1 var(--display);letter-spacing:-.01em}
.bl-plan-price small{font-size:13px;color:var(--ink-2);margin-left:2px}
.bl-plan-sub{grid-area:s;font-size:13px;color:var(--ink-2)}
/* Narrow phones: the price gets its own row instead of overlapping the name/badge. */
@media (max-width:389px){.bl-plan{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"r n" "r p" "r s"}.bl-plan-price{text-align:left}}
.bl-go{min-height:54px;font-size:16px;border-radius:14px;margin-top:2px}
.bl-disc{font-size:13px;line-height:1.5;color:var(--ink-2)}
.bl-secure{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.bl-secure .bl-ic{margin-top:1px}

/* included */
.bl-incl-h{font:650 16px/1.3 var(--sans);margin:6px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.bl-incl{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bl-incl li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start}
.bl-incl .bl-ic{width:36px;height:36px;padding:8px;border-radius:11px;background:var(--acc-soft);color:var(--acc)}
.bl-incl b{display:block;font:650 14.5px/1.3 var(--sans)}
.bl-incl span{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-2);margin-top:1px}
.bl-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--ink-3)}
.bl-links a{color:var(--ink-2)}
.bl-links .linkbtn{font-size:13px}

/* ---------- subscription sheet ---------- */
.bl-status{display:grid;gap:8px;justify-items:start;background:var(--surface-2);border-radius:14px;padding:14px}
.bl-status p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.bl-status p:first-of-type{color:var(--ink)}
.bl-pill{display:inline-flex;align-items:center;gap:7px;font:650 12.5px/1 var(--sans);padding:6px 11px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.bl-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.bl-pill.ok::before{background:var(--ok)}
.bl-pill.warn::before{background:var(--warn)}
.bl-pill.bad::before{background:var(--bad)}
.bl-pill.acc::before{background:var(--acc)}
.bl-buy{display:grid;gap:12px;min-width:0}
.bl-incl.compact{gap:10px}

/* success after checkout */
.bl-yay{display:grid;gap:12px;justify-items:center;text-align:center;padding:4px 0}
.bl-yay h2{font:600 24px/1.2 var(--display)}
.bl-yay>p{color:var(--ink-2);max-width:40ch}
.bl-yay .bl-status{width:100%;text-align:left}
.bl-yay-ic{width:68px;height:68px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;animation:bl-pop .55s cubic-bezier(.2,1.5,.4,1)}
.bl-yay-ic .bl-ic{width:34px;height:34px;stroke-width:2.4}
@keyframes bl-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------- legal pages (terms.html, privacy.html) ---------- */
.legal-page{min-height:100vh}
.legal{max-width:780px;margin:0 auto;padding:0 16px 72px}
@media (min-width:720px){.legal{padding-inline:24px}}
.legal-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.legal-top .logo{font-size:20px;color:var(--ink);text-decoration:none}
.legal-top nav{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.legal-top nav a{color:var(--ink-2);text-decoration:none}
.legal-top nav a:hover,.legal-top nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal h1{font:700 clamp(30px,7.5vw,46px)/1.08 var(--display);letter-spacing:-.02em;margin:30px 0 10px}
.legal .meta{color:var(--ink-3);font-size:14px}
.legal-draft{display:flex;gap:10px;align-items:flex-start;margin:18px 0 8px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--warn) 50%,var(--line));background:color-mix(in srgb,var(--warn) 12%,var(--surface));font-size:14.5px;line-height:1.5}
.legal-draft b{font-weight:700}
.legal-sum{margin:18px 0 0;padding:16px 18px;border-radius:16px;background:var(--acc-soft);border:1px solid var(--acc-line)}
.legal .legal-sum h2{margin:0 0 8px;font:650 17px/1.3 var(--sans)}
.legal .legal-sum ul{margin:0}
.legal-toc{margin:22px 0 0;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.legal .legal-toc h2{margin:0 0 8px;font:650 15px/1.3 var(--sans);color:var(--ink-2)}
.legal-toc ol{margin:0;padding-left:22px;columns:2 220px;column-gap:24px;font-size:14.5px}
.legal-toc li{break-inside:avoid;margin-bottom:4px}
.legal-toc a{color:var(--ink);text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
.legal h2{font:650 clamp(20px,4.4vw,24px)/1.25 var(--sans);letter-spacing:-.005em;margin:40px 0 10px;scroll-margin-top:16px}
.legal h3{font:650 17px/1.35 var(--sans);margin:22px 0 6px}
.legal p,.legal li,.legal dd{font-size:16px;line-height:1.65;overflow-wrap:anywhere}
.legal p+p{margin-top:12px}
.legal ul,.legal ol{padding-left:22px;margin:10px 0}
.legal li+li{margin-top:6px}
.legal .ph{background:color-mix(in srgb,var(--warn) 24%,transparent);border-radius:4px;padding:0 4px;font-weight:650;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.legal .caps{text-transform:uppercase;font-size:14.5px;letter-spacing:.01em}
.legal .callout{margin:14px 0;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.legal .callout p{font-size:15px}
.legal dl{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:12px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.legal dt{font:650 15px/1.4 var(--sans);padding:12px 14px 2px}
.legal dd{margin:0;padding:0 14px 12px;color:var(--ink-2);font-size:15px;border-bottom:1px solid var(--line)}
.legal dd:last-child{border-bottom:0}
@media (min-width:640px){
  .legal dl{grid-template-columns:200px minmax(0,1fr)}
  .legal dt{padding:12px 14px;border-bottom:1px solid var(--line)}
  .legal dd{padding:12px 14px}
  .legal dt:nth-last-of-type(1){border-bottom:0}
}
.legal-foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 14px}
.legal-foot a{color:var(--ink-2)}
@media print{.legal-top nav,.legal-toc{display:none}.legal{max-width:none}}
.bl-peek{grid-column:1/-1;justify-content:center;margin:4px 0 0}