/* heARTapps — shared brand styles */
:root{
  /* Neutrals are blended from a pure-grey base toward a mauve hue by --tint (the pink dial):
     --tint:0 = neutral grey (pink dialed out); raise toward ~28 for the old mauve warmth.
     Tunable live via the tuner "Background tint" slider. */
  --tint:0; --tint-hue:#6a4a60;
  --paper:color-mix(in srgb, #f7f7f6, var(--tint-hue) calc(var(--tint) * 1%));
  --surface:#FFFFFF;
  --sunk:color-mix(in srgb, #eeedec, var(--tint-hue) calc(var(--tint) * 1%));
  --chrome:color-mix(in srgb, #e7e6e4, var(--tint-hue) calc(var(--tint) * 1%));
  --ink:#241E28; --muted:#8A7E92; --faint:#B8AEBE;
  --hair:rgba(36,30,40,.11); --hair-2:rgba(36,30,40,.20);
  --accent:#D22E73; --accent-soft:#fffafd; --accent-ink:#e1377e;
  --mauve:#635468; --ok:#2E7D5B; --ok-soft:#E4F2EC;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --mask:url("img/heart_mask.png");
  --shadow:0 22px 54px -26px rgba(40,20,34,.34);
  --shadow-sm:0 10px 30px -18px rgba(40,20,34,.4);
  --maxw:1120px;
}
:root[data-theme="dark"]{
  --paper:#100C0D; --surface:#1B1620; --sunk:#221A29; --chrome:#241D2A;
  --ink:#F1EAF0; --muted:#A99DB0; --faint:#6E6274;
  --hair:rgba(241,234,240,.13); --hair-2:rgba(241,234,240,.22);
  --accent:#E8548C; --accent-soft:#33192A; --accent-ink:#F07FAE; --mauve:#9384A0; --tier-lead-color:#9a9a9a;
  --ok:#6FD3A6; --ok-soft:#17281F; --shadow:0 22px 54px -22px rgba(0,0,0,.75);
  --shadow-sm:0 10px 30px -16px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#100C0D; --surface:#1B1620; --sunk:#221A29; --chrome:#241D2A;
    --ink:#F1EAF0; --muted:#A99DB0; --faint:#6E6274;
    --hair:rgba(241,234,240,.13); --hair-2:rgba(241,234,240,.22);
    --accent:#E8548C; --accent-soft:#33192A; --accent-ink:#F07FAE; --mauve:#9384A0; --tier-lead-color:#9a9a9a;
    --ok:#6FD3A6; --ok-soft:#17281F; --shadow:0 22px 54px -22px rgba(0,0,0,.75);
    --shadow-sm:0 10px 30px -16px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Respect a reader who has asked the OS for less motion — applies to the anchor
   scrolling above and to the guide viewer's paging. */
@media (prefers-reduced-motion: reduce){
  html,.gv-track{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--ui); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-ink);}
img{max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.1rem,4vw,2rem);}

/* keyboard focus (accessibility) — one consistent raspberry ring.
   The 2px offset draws the ring on the page background, so it stays visible even
   on accent-filled controls (primary buttons, the contact card). Mouse clicks get
   no ring (:focus-visible fires on keyboard/AT focus only). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* brush heart mark */
.brush{-webkit-mask:var(--mask) center/contain no-repeat; mask:var(--mask) center/contain no-repeat;
  background:currentColor; display:inline-block; aspect-ratio:430/381; color:var(--accent);}

/* wordmark lockup */
.lk{display:inline-grid; grid-template-columns:auto auto; column-gap:.16em; row-gap:.16em;
  align-items:center; line-height:1;}
.lk .lkh{grid-area:1/1; height:1.28em; aspect-ratio:430/381; color:var(--accent);}
.lk .lkcaps{grid-area:1/2; font-family:var(--sans); font-weight:200; letter-spacing:.05em; color:var(--ink); white-space:nowrap;}
.lk .lkbyline{grid-area:2/2; font-family:var(--mono); font-size:.28em; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent); font-weight:700; white-space:nowrap;}

/* ===== site nav ===== */
.site-nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--hair);}
.site-nav .wrap{display:flex; align-items:center; gap:1.2rem; height:66px;}
.site-nav .lk{font-size:1.5rem;}
.nav-links{display:flex; gap:1.6rem; margin-left:auto; font-size:.92rem; align-items:center;}
.nav-links a{color:var(--muted); font-weight:500;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--accent);}
.theme-toggle{display:inline-flex; border:1px solid var(--hair-2); border-radius:999px; overflow:hidden; margin-left:.4rem;}
.theme-toggle button{font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.34rem .62rem; border:0; background:transparent; color:var(--muted); cursor:pointer;}
.theme-toggle button[aria-pressed="true"]{background:var(--accent); color:#fff;}
/* toggle sits in an overflow:hidden pill, so an outline would be clipped — use an
   inset ring instead; white on the active (accent-filled) button so it stays visible */
.theme-toggle button:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--accent);}
.theme-toggle button[aria-pressed="true"]:focus-visible{box-shadow:inset 0 0 0 2px #fff;}

/* mobile menu button (hamburger) — hidden on desktop, shown below 720px */
.nav-toggle{display:none; flex:none; margin-left:auto; width:42px; height:42px; padding:0;
  align-items:center; justify-content:center; background:transparent; color:var(--ink);
  border:1px solid var(--hair-2); border-radius:11px; cursor:pointer;}
.nav-toggle:hover{border-color:var(--ink);}
.nav-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{content:""; display:block;
  width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease;}
.nav-toggle-bars{position:relative;}
.nav-toggle-bars::before{position:absolute; left:0; top:-6px;}
.nav-toggle-bars::after{position:absolute; left:0; top:6px;}
.site-nav.nav-open .nav-toggle-bars{background:transparent;}
.site-nav.nav-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg);}
.site-nav.nav-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg);}

@media (max-width:720px){
  .nav-toggle{display:inline-flex;}
  .nav-links{position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:.4rem clamp(1.1rem,4vw,2rem) 1.1rem;
    background:var(--paper); border-bottom:1px solid var(--hair); box-shadow:var(--shadow); display:none;}
  .site-nav.nav-open .nav-links{display:flex;}
  .nav-links a{padding:.9rem .15rem; font-size:1.05rem; color:var(--ink); border-bottom:1px solid var(--hair);}
  .nav-links a[aria-current="page"]{color:var(--accent);}
  .theme-toggle{align-self:flex-start; margin:.95rem 0 0;}
}

/* buttons */
/* ── Tunable design tokens (geometry) — driven live by the dev tuner (assets/tuner.js,
   dev builds only). Defaults equal the previous hard-coded values, so shipped output
   is unchanged; the tuner overrides these on :root at runtime. Colors reuse the brand
   --accent family above. ── */
:root{
  --btn-font:.96rem; --btn-weight:600; --btn-pad-y:.44rem; --btn-pad-x:1.3rem;
  --btn-radius:12px; --btn-border:1px; --btn-gap:.5rem;
  --cta-gap:.7rem; --badge-gap:.4rem;
  --badge-size:.6rem; --badge-pad-y:.28rem; --badge-pad-x:.55rem; --badge-radius:6px;
  --pricehint-size:.86rem; --priceline-size:1.6rem;
  /* tier "mini-card" buttons ($9/$14/$19) */
  --tc-gap:.5rem; --tc-row-gap:.25rem; --tc-pad-y:.9rem; --tc-pad-x:.5rem;
  --tc-name-size:.56rem; --tc-price-size:1.7rem; --tc-title-size:.72rem; --price-tracking:0; --price-cur-gap:2px;
  --tc-border:color-mix(in srgb,var(--accent) 28%,transparent); --tc-feat-bg:var(--accent); --tc-feat-fg:#ffffff;
  /* "Most popular" tag */
  --tag-bg:#a80564; --tag-size:.5rem; --tag-pad-y:3.5px; --tag-pad-x:9px;
  /* the "BUY ONCE · OWN FOREVER …" eyebrow */
  --tier-lead-color:#636363;
}
/* line-height / font-family / box-sizing are pinned so <a> and <button> .btns render at the
   SAME (compact) height — house rule: even button heights in a single row. Don't remove. */
.btn{font-size:var(--btn-font); font-weight:var(--btn-weight); line-height:1.2; font-family:inherit; box-sizing:border-box;
  cursor:pointer; padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--btn-radius);
  display:inline-flex; align-items:center; gap:var(--btn-gap); border:var(--btn-border) solid transparent; transition:transform .15s ease, background .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn.primary{background:var(--accent); color:#fff;}
.btn.primary:hover{color:#fff; background:var(--accent-ink);}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--hair-2);}
.btn.ghost:hover{color:var(--ink); border-color:var(--ink);}
.btn.small{padding:.5rem .95rem; font-size:.86rem; border-radius:10px;}
/* Buy CTA — soft raspberry pill that fills to solid on hover; warm + on-brand, and
   distinct from the solid-raspberry "primary" (free-trial) button. */
.btn.buy{background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 32%,transparent);}
.btn.buy:hover{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn[aria-busy="true"]{opacity:.7; pointer-events:none;}
.btn .brush{width:15px; height:auto; aspect-ratio:430/381;}
/* Shareware "pay what feels fair" tier buttons ($9 / $14 / $19) in a buy-strip. */
.tier-buy{display:flex; flex-direction:column; gap:.5rem;}
.tier-lead{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tier-lead-color); text-align:center;}
/* Connected segmented tier bar (option 3): one rounded container, hairline dividers,
   featured middle segment ("Most popular"). 3-line cells: NAME / $price / title. */
.tier-btns{display:flex; gap:0; margin-top:14px; border:1px solid var(--tc-border); border-radius:16px; background:var(--accent-soft);}
.tier-btns .btn.tier-card{flex:1 1 0; min-width:0; position:relative; flex-direction:column; align-items:center; text-align:center;
  gap:var(--tc-row-gap); padding:var(--tc-pad-y) var(--tc-pad-x); white-space:normal; line-height:1.12;
  background:transparent; border:0; border-right:1px solid var(--tc-border); border-radius:0;}
.tier-btns .btn.tier-card:first-child{border-radius:15px 0 0 15px;}
.tier-btns .btn.tier-card:last-child{border-right:0; border-radius:0 15px 15px 0;}
.tier-btns .btn.tier-card:hover{transform:none; background:color-mix(in srgb,var(--accent) 9%,transparent);}
.tc-name{font-family:var(--mono); font-size:var(--tc-name-size); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); opacity:.72;}
.tc-price{font-family:var(--sans); font-weight:800; font-size:var(--tc-price-size); letter-spacing:var(--price-tracking); line-height:1; color:var(--accent-ink);}
.tc-title{font-size:var(--tc-title-size); font-weight:600; line-height:1.15; color:var(--accent-ink);}
/* HOUSE RULE: never render a price with the $ jammed against the number. Wrap the
   currency symbol in .cur (or .tc-cur in tier cards) so it always gets --price-cur-gap. */
.tc-cur,.cur{margin-right:var(--price-cur-gap);}
.legal .tier .price .cur,.bp-price .cur{margin-right:var(--price-cur-gap);}
/* featured middle segment */
.tier-btns .btn.tier-card.tier-featured{background:var(--tc-feat-bg);}
.tier-card.tier-featured .tc-name,.tier-card.tier-featured .tc-price,.tier-card.tier-featured .tc-title{color:var(--tc-feat-fg);}
.tier-btns .btn.tier-card.tier-featured:hover{background:var(--accent-ink);}
.tc-tag{position:absolute; top:0; left:50%; transform:translate(-50%,-50%); background:var(--tag-bg); color:#fff;
  font-family:var(--mono); font-size:var(--tag-size); letter-spacing:.1em; text-transform:uppercase; line-height:1;
  padding:var(--tag-pad-y) var(--tag-pad-x); border-radius:999px; white-space:nowrap;}
@media (max-width:440px){
  .tier-btns{flex-direction:column;}
  .tier-btns .btn.tier-card{border-right:0; border-bottom:1px solid var(--tc-border); border-radius:0;}
  .tier-btns .btn.tier-card:first-child{border-radius:15px 15px 0 0;}
  .tier-btns .btn.tier-card:last-child{border-bottom:0; border-radius:0 0 15px 15px;}
}
.nav-cta{font-weight:600; color:var(--accent)!important;}

/* section label */
.sec-label{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:.9rem; margin:0 0 1.4rem;}
.sec-label::after{content:""; flex:1; height:1px; background:var(--hair);}
.tagline{font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0;}

/* eyebrow badges */
.badges{display:flex; flex-wrap:wrap; gap:var(--badge-gap);}
.b{font-family:var(--mono); font-size:var(--badge-size); letter-spacing:.07em; text-transform:uppercase;
  padding:var(--badge-pad-y) var(--badge-pad-x); border-radius:var(--badge-radius); border:1px solid var(--hair-2); color:var(--muted); white-space:nowrap;}
.b.free{background:var(--ok-soft); color:var(--ok); border-color:transparent; font-weight:700;}
.b.paid{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; font-weight:700;}
.b.soon{background:transparent; color:var(--faint); border-style:dashed;}

/* placeholder screenshot */
.shot{position:relative; overflow:hidden; background:var(--sunk); border:1px solid var(--hair); border-radius:16px;}
.shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:top center;}
.shot.todo{display:flex; align-items:center; justify-content:center; min-height:220px;
  background:repeating-linear-gradient(45deg,var(--sunk),var(--sunk) 11px,transparent 11px,transparent 22px);}
.shot.todo span{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); border:1px dashed var(--hair-2); padding:.45rem .8rem; border-radius:8px; background:var(--surface);}

/* ===== footer ===== */
.site-foot{border-top:1px solid var(--hair); margin-top:clamp(3rem,8vw,6rem); background:var(--surface);}
.site-foot .wrap{padding-top:2.6rem; padding-bottom:2.6rem; display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem;}
.site-foot .lk{font-size:1.35rem; margin-bottom:.9rem;}
.foot-blurb{color:var(--muted); font-size:.9rem; max-width:34ch; margin:0 0 1rem;}
.foot-seal{display:inline-flex; align-items:center; gap:.45rem; font-size:.86rem; color:var(--ink);}
.foot-seal .brush{width:14px; height:auto; aspect-ratio:430/381;}
.foot-col h4{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:.2rem 0 .9rem;}
.foot-col a{display:block; color:var(--muted); font-size:.9rem; padding:.16rem 0;}
.foot-col a:hover{color:var(--ink);}
.foot-base{border-top:1px solid var(--hair);}
.foot-base .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:space-between;
  padding-top:1.1rem; padding-bottom:1.6rem;}
.foot-base .dom{font-family:var(--mono); font-size:.76rem; color:var(--faint);}
.foot-base .note{font-size:.8rem; color:var(--muted);}
@media (max-width:680px){ .site-foot .wrap{grid-template-columns:1fr 1fr;} .foot-brand{grid-column:1/-1;} }

/* ── Email capture — shared form unit ────────────────────── */
.capture{margin:1.1rem 0 0; max-width:440px;}
.capture-lead{font-family:var(--sans); font-weight:600; font-size:.98rem; color:var(--ink); margin:0 0 .55rem;}
.capture-row{display:flex; flex-wrap:wrap; gap:.5rem;}
.capture input[type=email]{flex:1 1 180px; min-width:0; padding:.6rem .8rem; border:1px solid var(--hair); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; font-size:.95rem;}
.capture input[type=email]::placeholder{color:var(--faint);}
.capture input[type=email]:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;}
.capture button{flex:0 0 auto; padding:.6rem 1.1rem; border:1px solid var(--accent); border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); font:inherit; font-weight:600; font-size:.95rem; cursor:pointer; white-space:nowrap;}
.capture button:hover{background:var(--accent); color:#fff; border-color:var(--accent);}
.capture button:disabled{opacity:.6; cursor:default;}
.capture-fine{color:var(--muted); font-size:.78rem; line-height:1.5; margin:.5rem 0 0;}
.capture-fine a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.capture-fine a:hover{color:var(--ink);}
.capture-msg{font-size:.85rem; line-height:1.5; margin:.55rem 0 0; color:var(--accent-ink);}
.capture-msg.err{color:var(--ink);}
.capture-msg[hidden]{display:none;}

/* Home — dedicated "join" band (accent-soft, centered) */
.join-band{background:var(--accent-soft); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); text-align:center;}
.join-band .wrap{padding-top:clamp(2.6rem,5vw,3.6rem); padding-bottom:clamp(2.6rem,5vw,3.6rem);}
.join-band .brush{width:34px; color:var(--accent);}
.join-band h2{font-family:var(--sans); font-weight:800; letter-spacing:-.025em; font-size:clamp(1.6rem,3.4vw,2.1rem); margin:.5rem 0; color:var(--ink); text-wrap:balance;}
.join-band .jb-sub{color:var(--muted); font-size:1.02rem; max-width:46ch; margin:0 auto 1.4rem; line-height:1.55;}
.join-band .capture{margin:0 auto; max-width:470px;}
.join-band .capture-row{justify-content:center;}
.join-band .capture-fine{text-align:center;}

/* App pages — full-width accent band (copy left, form right) */
.app-join{background:var(--accent-soft); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.app-join .wrap{padding-top:clamp(2.2rem,4vw,3rem); padding-bottom:clamp(2.2rem,4vw,3rem);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.4rem,4vw,3rem); align-items:center;}
.app-join .aj-copy h3{font-family:var(--sans); font-weight:800; font-size:clamp(1.3rem,2.6vw,1.7rem); letter-spacing:-.02em; margin:0 0 .4rem; color:var(--ink); display:flex; align-items:center; gap:.5rem;}
.app-join .aj-copy h3 .brush{width:22px;}
.app-join .aj-copy p{color:var(--muted); margin:0; max-width:44ch; line-height:1.55; font-size:.98rem;}
.app-join .capture{margin-top:0;}
@media (max-width:720px){ .app-join .wrap{grid-template-columns:1fr;} }

/* Footer — tidy full-width signup strip */
.foot-signup{border-top:1px solid var(--hair);}
.foot-signup .wrap{padding-top:1.7rem; padding-bottom:1.7rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2.4rem;}
.foot-signup .fs-copy{max-width:42ch;}
.foot-signup .fs-copy h4{font-family:var(--sans); font-weight:700; font-size:1.05rem; margin:0 0 .2rem; color:var(--ink); text-transform:none; letter-spacing:normal;}
.foot-signup .fs-copy p{margin:0; color:var(--muted); font-size:.86rem; line-height:1.5;}
.foot-signup .capture{margin:0; flex:1 1 340px; max-width:430px;}

/* ── Pay-what-you-want: one recommended button, quieter alternatives ──
   Stefanie, 2026-08-23. The recommended tier IS the button, so accepting it stays
   one click and only *deviating* costs a step — which is what made the pre-filled
   default work in the evidence. The alternatives stay plainly visible, not hidden:
   burying the cheaper option would be a dark pattern. */
.tier-pick{display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;}
.tier-pick .tier-lead{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tier-lead-color,var(--faint)); margin:0;}
.tier-main{font-size:1.02rem; padding:.62rem 1.4rem;}
.tier-alts{display:flex; align-items:center; gap:.5rem; margin:0; font-size:.88rem; color:var(--muted);}
.tier-alt{background:none; border:0; padding:0; font:inherit; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair-2,var(--hair));}
.tier-alt:hover{color:var(--ink); text-decoration-color:currentColor;}
.tier-alt:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;}
.tier-alts .sep{color:var(--faint);}

/* ── Feedback composer (support pages + contact) ─────────── */
.fbc-intro{color:var(--muted); font-size:1rem; line-height:1.55; max-width:56ch; margin:.2rem 0 1.3rem;}
.fb-composer{max-width:640px;}
.fbc-cats{display:flex; flex-wrap:wrap; gap:.5rem; border:0; padding:0; margin:0 0 1.2rem;}
.fbc-cat input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;}
.fbc-cat span{display:inline-block; padding:.5rem .95rem; border:1px solid var(--hair); border-radius:999px; background:var(--paper); color:var(--muted); font-size:.9rem; font-weight:600; cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease;}
.fbc-cat span:hover{border-color:var(--hair-2);}
.fbc-cat input:checked + span{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.fbc-cat input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.fbc-field{margin:0 0 1rem;}
.fbc-field > label{display:block; font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--ink); margin:0 0 .4rem;}
.fbc-field > label em{font-style:normal; font-weight:400; color:var(--faint);}
.fbc-field input, .fbc-field textarea{width:100%; box-sizing:border-box; padding:.7rem .85rem; border:1px solid var(--hair); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-size:.95rem;}
.fbc-field textarea{resize:vertical; min-height:190px; line-height:1.6;}
.fbc-field input:focus-visible, .fbc-field textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;}
.fbc-select{-webkit-appearance:none; appearance:none; padding:.55rem 2rem .55rem .8rem; border:1px solid var(--hair); border-radius:10px; background-color:var(--surface); color:var(--ink); font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; background-size:.7em;}
.fbc-select:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;}
.fbc-field .fbc-select{width:100%;}
/* subscribe row — grow the list */
.fbc-sub{display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .7rem; margin:.2rem 0 1rem; padding:.9rem 1.05rem; background:var(--accent-soft); border:1px solid var(--tc-border); border-radius:12px;}
.fbc-check{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.93rem; color:var(--ink);}
.fbc-check input{width:1.05rem; height:1.05rem; flex:none; accent-color:var(--accent); cursor:pointer;}
.fbc-sub .fbc-select{width:auto;}
.fbc-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.2rem; align-items:center;}
.fbc-fine{color:var(--muted); font-size:.8rem; line-height:1.5; margin:.75rem 0 0; max-width:54ch;}
.fbc-fine a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.fbc-msg{font-size:.9rem; line-height:1.5; margin:.75rem 0 0; color:var(--accent-ink);}
.fbc-msg.err{color:var(--ink);}
[hidden]{display:none !important;}

/* trust chips */
.trust{display:flex; flex-wrap:wrap; gap:.6rem;}
.chip{display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:.5rem .95rem;}
.chip .brush{width:14px; height:auto; aspect-ratio:430/381;}
.chip svg{width:15px; height:15px; color:var(--accent);}

.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* testers-preview feedback pill — only rendered by PREVIEW=1 builds */
.preview-badge{position:fixed; right:1rem; bottom:1rem; z-index:60; text-decoration:none;
  background:var(--accent); color:#fff; font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:.6rem .95rem; border-radius:999px; box-shadow:var(--shadow-sm);}
.preview-badge:hover{background:var(--accent-ink); color:#fff;}


/* ===== app detail pages ===== */
.app-hero{padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(1.6rem,3vw,2.4rem);}
.app-hero .wrap{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,4vw,2.6rem); align-items:center;}
.app-hero .appicon{width:clamp(88px,14vw,128px); height:auto; border-radius:24%; box-shadow:var(--shadow-sm); flex:none;}
.app-hero .tagline{margin-bottom:.7rem;}
.app-hero h1{font-family:var(--sans); font-weight:800; letter-spacing:-.03em; font-size:clamp(2rem,5.2vw,3.2rem); margin:0; line-height:1.02; text-wrap:balance;}
.app-hero .one-liner{color:var(--muted); font-size:clamp(1.05rem,2.2vw,1.3rem); margin:.9rem 0 0; max-width:48ch; line-height:1.5;}
.app-hero .one-liner b{color:var(--ink); font-weight:600;}
.app-hero .cta-row{display:flex; flex-wrap:wrap; gap:var(--cta-gap); align-items:center; margin-top:1.5rem;}
.app-hero .badges{margin-top:1.1rem;}
.app-hero .pricehint{font-size:var(--pricehint-size); color:var(--faint);}
@media (max-width:620px){ .app-hero .wrap{grid-template-columns:1fr;} }

.app-shot-full{margin-top:.5rem;}
.app-shot-full .shot{border-radius:20px; box-shadow:var(--shadow);}
.app-shot-full .shot.todo{min-height:320px;}

.app-section{padding:clamp(2.2rem,5vw,3.6rem) 0;}
.app-section.tinted{background:var(--surface); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.feature-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 2.4rem;}
@media (max-width:680px){ .feature-grid{grid-template-columns:1fr;} }
.feature{border-top:2px solid var(--accent); padding-top:1rem;}
.feature h3{font-family:var(--sans); font-weight:700; font-size:1.2rem; margin:0 0 .45rem; letter-spacing:-.01em;}
.feature p{margin:0; color:var(--muted); font-size:.96rem; line-height:1.6;}
.feature p b{color:var(--ink); font-weight:600;}

.buy-strip{display:grid; grid-template-columns:1fr auto; gap:1.4rem; align-items:center;
  border:1px solid var(--hair); border-radius:20px; padding:clamp(1.4rem,3vw,2rem); background:var(--paper);}
@media (max-width:640px){ .buy-strip{grid-template-columns:1fr; text-align:left;} }
.buy-strip h2{font-family:var(--sans); font-weight:800; font-size:clamp(1.35rem,2.8vw,1.8rem); letter-spacing:-.02em; margin:0 0 .5rem; text-wrap:balance;}
.buy-strip p{margin:0; color:var(--muted); font-size:.96rem; line-height:1.55; max-width:52ch;}
.buy-strip p b{color:var(--ink); font-weight:600;}
.buy-strip .buy-actions{display:flex; flex-direction:column; gap:.6rem; align-items:stretch; min-width:190px;}
.buy-strip .buy-actions .btn{justify-content:center;}
.buy-strip .priceline{font-family:var(--sans); font-weight:800; font-size:var(--priceline-size); letter-spacing:var(--price-tracking); text-align:center;}
.buy-strip .priceline small{font-weight:500; font-size:.82rem; color:var(--muted); display:block; letter-spacing:0; margin-top:.2rem;}

.credit{margin-top:1.4rem; font-size:.92rem; color:var(--muted); border-left:2px solid var(--hair-2); padding-left:1rem; max-width:56ch; line-height:1.6;}
.credit b{color:var(--ink); font-weight:600;}

.more-apps{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem;}
.more-apps a{display:flex; align-items:center; gap:.7rem; border:1px solid var(--hair); border-radius:14px;
  padding:.7rem .9rem .7rem .7rem; background:var(--paper); transition:transform .15s ease, border-color .15s ease; min-width:0;}
.more-apps a:hover{transform:translateY(-3px); border-color:var(--hair-2);}
.more-apps img{width:40px; height:40px; border-radius:22%; flex:none;}
.more-apps .ma-name{font-family:var(--sans); font-weight:700; font-size:.98rem; color:var(--ink); letter-spacing:-.01em;}
.more-apps .ma-kind{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);}
.back-link{display:inline-flex; align-items:center; gap:.4rem; font-size:.86rem; color:var(--muted); font-weight:500;}
.back-link:hover{color:var(--ink);}
.app-hero .one-liner code{font-family:var(--mono); font-size:.9em; background:var(--sunk); padding:.05em .3em; border-radius:5px; color:var(--ink);}

/* ===== rich product pages (FontFetch, Markless, …) — shared showcase kit =====
   Reused via .pp-* classes so each product page is content only, not CSS.
   (FontFetch still ships its own .ff-* copy in-page; migrate it to .pp-* later.) */
.pp-frame{border:1px solid var(--hair); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow);}
.pp-frame img{width:100%; height:auto; vertical-align:top;}
/* light/dark shot swap — follows the theme toggle, like the tokens */
.pp-light{display:block;} .pp-dark{display:none;}
:root[data-theme="dark"] .pp-light{display:none;}
:root[data-theme="dark"] .pp-dark{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pp-light{display:none;}
  :root:not([data-theme="light"]) .pp-dark{display:block;}
}
.pp-heroshot{max-width:980px; margin:0 auto;}
.pp-highlights{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:clamp(1.8rem,4vw,2.6rem);}
@media (max-width:760px){ .pp-highlights{grid-template-columns:repeat(2,1fr);} }
.pp-hl{border:1px solid var(--hair); border-radius:14px; padding:1.1rem 1.2rem; background:var(--paper);}
.pp-hl b{display:block; font-family:var(--sans); font-weight:800; font-size:clamp(1.4rem,2.4vw,1.7rem); letter-spacing:-.02em; color:var(--accent); line-height:1;}
.pp-hl span{display:block; margin-top:.5rem; font-size:.85rem; color:var(--muted); line-height:1.45;}
.pp-show{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center; margin-top:clamp(2.4rem,5.5vw,4rem);}
.pp-show .copy{max-width:46ch;}
.pp-show .eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 .8rem;}
.pp-show h2{font-family:var(--sans); font-weight:800; letter-spacing:-.025em; font-size:clamp(1.5rem,3.2vw,2.15rem); line-height:1.05; margin:0; text-wrap:balance;}
.pp-show p{color:var(--muted); font-size:1.02rem; line-height:1.62; margin:1rem 0 0;}
.pp-show p b{color:var(--ink); font-weight:600;}
.pp-show p code{font-family:var(--mono); font-size:.88em; background:var(--sunk); padding:.06em .32em; border-radius:5px; color:var(--ink);}
@media (min-width:781px){ .pp-show.rev .copy{order:2;} }
@media (max-width:780px){ .pp-show{grid-template-columns:1fr; gap:1.4rem;} }
.pp-kicker{font-size:clamp(1.05rem,2.1vw,1.25rem); color:var(--muted); max-width:60ch; line-height:1.55; margin:0 0 1.6rem;}
.pp-kicker b{color:var(--ink); font-weight:600;}
.pp-credit{display:flex; gap:.75rem; align-items:flex-start; margin:1.4rem 0 0; padding:1rem 1.2rem; border:1px solid var(--hair); border-radius:14px; background:var(--accent-soft); color:var(--ink); font-size:.95rem; line-height:1.6; max-width:720px;}
.pp-credit b{font-weight:600;}
.pp-credit .brush{flex:0 0 auto; width:16px; height:auto; aspect-ratio:430/381; margin-top:.15rem;}

/* ---- Legal / policy prose pages (Pricing, Terms, Privacy, Refunds) ---- */
.legal{padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(2.4rem,5vw,3.6rem);}
.legal .wrap{max-width:760px;}
.legal h1{font-family:var(--sans); font-weight:800; letter-spacing:-.03em; font-size:clamp(2rem,5vw,3rem); line-height:1.03; margin:0;}
.legal .eff{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--faint); margin:.7rem 0 0; text-transform:uppercase;}
.legal .lead{color:var(--ink); font-size:clamp(1.06rem,2.1vw,1.2rem); line-height:1.6; margin:1.4rem 0 0; max-width:64ch;}
.legal h2{font-family:var(--sans); font-weight:700; letter-spacing:-.01em; font-size:clamp(1.2rem,2.6vw,1.45rem); margin:2.2rem 0 0;}
.legal p{color:var(--muted); line-height:1.68; margin:.8rem 0 0; max-width:66ch;}
.legal p strong,.legal li strong{color:var(--ink); font-weight:600;}
.legal a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);}
.legal a:hover{border-bottom-color:var(--accent);}
.legal ul{margin:.9rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.7rem; max-width:66ch;}
.legal li{position:relative; padding-left:1.4rem; color:var(--muted); line-height:1.62;}
.legal li::before{content:"♥"; position:absolute; left:0; top:.05em; color:var(--accent); font-size:.8rem;}
/* Pricing tier cards */
.legal .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin:1.8rem 0 0;}
@media (max-width:820px){ .legal .tiers{grid-template-columns:1fr;} }
.legal .tier{border:1px solid var(--hair); border-radius:18px; padding:1.5rem; background:var(--surface); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.45rem;}
.legal .tier h3{font-family:var(--sans); font-weight:700; font-size:1.1rem; margin:0;}
.legal .tier .price{font-family:var(--sans); font-weight:800; font-size:2.3rem; letter-spacing:var(--price-tracking); line-height:1; color:var(--ink);}
.legal .tier .price small{display:block; margin-top:.45rem; font-weight:500; font-size:.82rem; color:var(--muted); letter-spacing:0;}
.legal .tier p{margin:.3rem 0 0; font-size:.92rem;}