/* Ask To It — shared system. Mobile first: base rules target a 360–430px phone,
   min-width queries add room. Anybody's width axis (50–150%) carries data. */

@font-face{font-family:Anybody;src:url('/assets/fonts/anybody-latin-standard-normal.woff2') format('woff2');font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Anybody;src:url('/assets/fonts/anybody-latin-ext-standard-normal.woff2') format('woff2');font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';src:url('/assets/fonts/instrument-sans-latin-standard-normal.woff2') format('woff2');font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';src:url('/assets/fonts/instrument-sans-latin-ext-standard-normal.woff2') format('woff2');font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-latin-ext-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --bone:#f1ece3;
  --bone-2:#e8e1d5;
  --bone-3:#dcd3c4;
  --ink:#14120f;
  --ink-2:#2a2622;
  --mute:#676057;
  --line:rgba(20,18,15,.14);
  --line-strong:rgba(20,18,15,.32);
  --night:#0f0e0c;
  --night-2:#1c1a17;
  --night-3:#2a2723;
  --night-line:rgba(241,236,227,.14);
  --bone-dim:#a59d90;
  --signal:#ee4411;
  --signal-hot:#ff5a24;
  --signal-ink:#b5350a;
  --signal-wash:#f9d9c9;
  --doubt:#8c97ff;
  --doubt-ink:#3b45c4;
  --doubt-wash:#dfe2ff;
  --display:Anybody,'Arial Narrow',Impact,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --gutter:clamp(16px,4.2vw,56px);
  --max:1440px;
  --header:64px;
  --radius:10px;
  --radius-s:8px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bone);color:var(--ink);font:400 1rem/1.55 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
::selection{background:var(--signal);color:var(--bone)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--bone);padding:.8rem 1.1rem;border-radius:8px;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,12vw,160px)}
.night{background:var(--night);color:var(--bone);color-scheme:dark}
.night ::selection{background:var(--signal);color:var(--night)}

/* ---------- Type ---------- */
.display{font-family:var(--display);font-weight:860;font-stretch:100%;line-height:.86;letter-spacing:-.025em}
.display-xl{font-size:clamp(3.3rem,17vw,11.5rem)}
.display-l{font-size:clamp(2.7rem,11vw,7rem)}
.display-m{font-size:clamp(2.1rem,7.4vw,4.3rem);line-height:.92}
.display-s{font-size:clamp(1.6rem,5vw,2.4rem);line-height:.98}
.wide{font-stretch:138%}
.narrow{font-stretch:62%}
.lede{font-size:clamp(1.08rem,2.6vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:36ch}
.night .lede{color:var(--bone-dim)}
.label{font:500 .9rem/1.4 var(--body)}
.muted{color:var(--mute)}
.night .muted{color:var(--bone-dim)}
.signal-text{color:var(--signal)}
.dot{color:var(--signal)}
.display .dot,.fit .dot,.footer-word .dot{display:inline-block;width:.19em;height:.19em;margin-left:.045em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb391 0 14%,var(--signal) 52%,#8f2604 100%);color:transparent;overflow:hidden;vertical-align:baseline;font-size:inherit;line-height:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Lines fitted to the column by adjusting the width axis (see fit.js). */
.fit{display:block;min-width:0;max-width:100%}
.fit-line{display:block;white-space:nowrap;width:max-content;max-width:none}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:var(--gutter);max-width:none;background:var(--bone);border-bottom:1px solid transparent;transition:border-color .3s,background .3s;view-transition-name:site-header}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header[data-theme="dark"]{background:var(--night);color:var(--bone);border-bottom-color:var(--night-line)}
.site-header[data-theme="dark"] .site-nav a:not(.button):hover{background:var(--night-3)}
.site-header[data-theme="dark"] .button:not(.button-signal){--bg:var(--bone);--fg:var(--ink)}
.site-header[data-theme="dark"] .pass-chip{background:var(--night-2);border-color:var(--night-line)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:840 1.22rem/1 var(--display);font-stretch:118%;letter-spacing:-.03em;white-space:nowrap;min-height:44px}
.brand img{width:34px;height:34px;border-radius:10px}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a:not(.button){display:none;padding:10px 12px;border-radius:8px;text-decoration:none;font-weight:500;font-size:.95rem;transition:background .2s}
.site-nav a:not(.button):hover{background:var(--bone-2)}
.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--signal)}
.site-nav a.nav-pricing{display:inline-flex}
@media (min-width:720px){.site-nav a:not(.button){display:inline-flex}.site-nav{gap:6px}}
.pass-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px 6px 8px;border-radius:8px;border:1px solid var(--line-strong);background:var(--bone);text-decoration:none;font:500 .82rem/1 var(--mono);white-space:nowrap}
.pass-chip::before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb08f 0 18%,var(--signal) 55%,#a83208 100%)}
.pass-chip[data-kind="free"]::before{background:radial-gradient(circle at 35% 30%,#fff 0 18%,var(--bone-3) 60%,var(--mute) 100%)}

/* ---------- Buttons ---------- */
.button{--bg:var(--ink);--fg:var(--bone);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:0;border-radius:8px;background:var(--bg);color:var(--fg);font:600 1rem/1 var(--body);text-decoration:none;white-space:nowrap;transition:transform .35s var(--ease-spring),background .2s,box-shadow .3s;will-change:transform;-webkit-tap-highlight-color:transparent}
.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(20,18,15,.55)}
.button:active:not(:disabled){transform:translateY(0) scale(.97)}
.button:disabled{opacity:.5}
.button-signal{--bg:var(--signal);--fg:#fff}
.button-signal:hover:not(:disabled){--bg:var(--signal-hot);box-shadow:0 12px 30px -12px rgba(238,68,17,.8)}
.button-ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.button-ghost:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--ink)}
.night .button-ghost{--fg:var(--bone);box-shadow:inset 0 0 0 1.5px var(--night-line)}
.night .button-ghost:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--bone)}
.button-bone{--bg:var(--bone);--fg:var(--ink)}
.button-small{min-height:40px;padding:0 16px;font-size:.92rem}
.button-block{width:100%}
.button .arrow{display:inline-block;transition:transform .35s var(--ease-spring)}
.button:hover .arrow{transform:translateX(4px)}
.text-link{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--signal)}
.text-link:hover{text-decoration-thickness:3px}

/* ---------- Chips & segmented controls ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:8px;border:1.5px solid var(--line-strong);background:transparent;font:500 .9rem/1 var(--body);white-space:nowrap;scroll-snap-align:start;transition:background .2s,color .2s,border-color .2s}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.night .chip{border-color:var(--night-line)}
.night .chip[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:8px;background:var(--bone-2);border:0;margin:0;min-width:0}
.segmented button{min-height:44px;border:0;border-radius:8px;background:transparent;font-weight:600;font-size:.95rem;color:var(--ink-2);transition:background .25s,color .25s,box-shadow .25s}
.segmented button[aria-pressed="true"]{background:var(--ink);color:var(--bone);box-shadow:0 6px 16px -8px rgba(20,18,15,.6)}

/* ---------- Form fields ---------- */
.field{display:grid;gap:8px}
.field-label{font:600 .95rem/1.2 var(--body)}
.field-hint{font-size:.85rem;color:var(--mute)}
.input,.textarea{width:100%;border:1.5px solid var(--line-strong);border-radius:var(--radius-s);background:rgba(255,255,255,.45);padding:14px 16px;font-size:1.05rem;line-height:1.45;transition:border-color .2s,background .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.textarea{resize:vertical;min-height:112px}
.input::placeholder,.textarea::placeholder{color:#8b8479}
.input:focus,.textarea:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(238,68,17,.18)}
.option-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px}
.option-key{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bone);font:800 1rem/1 var(--display);font-stretch:120%}
.option-row:first-child .option-key{background:var(--signal);color:#fff}

/* ---------- Bottom sheet dialog ---------- */
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:92dvh;padding:0;border:0;border-radius:28px 28px 0 0;background:var(--bone);color:var(--ink);box-shadow:0 -30px 80px -20px rgba(0,0,0,.45);overflow:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(15,14,12,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet[open]{animation:sheet-up .5s var(--ease-out)}
.sheet[open]::backdrop{animation:fade-in .35s ease}
.sheet-body{display:grid;gap:18px;padding:10px 20px calc(24px + env(safe-area-inset-bottom))}
.sheet-grip{justify-self:center;width:44px;height:5px;border-radius:5px;background:var(--bone-3);margin-bottom:4px}
.sheet-head{display:flex;align-items:start;justify-content:space-between;gap:16px}
.sheet-head h2{font:860 clamp(1.9rem,8vw,2.6rem)/.9 var(--display);font-stretch:88%;letter-spacing:-.02em}
.icon-button{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;font-size:1.3rem;line-height:1}
.icon-button:hover{border-color:var(--ink)}
@media (min-width:720px){
  .sheet{inset:0;margin:auto;width:min(560px,calc(100% - 48px));max-height:min(760px,90dvh);border-radius:10px}
  .sheet[open]{animation:sheet-pop .45s var(--ease-out)}
  .sheet-grip{display:none}
  .sheet-body{padding:28px 32px 32px}
}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes sheet-pop{from{transform:translateY(24px) scale(.97);opacity:0}}
@keyframes fade-in{from{opacity:0}}

/* ---------- Pricing cards (landing + pricing page + paywall) ---------- */
.packs{display:grid;gap:12px}
.pack{position:relative;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:14px;padding:22px;border-radius:var(--radius);background:var(--bone);border:1.5px solid var(--line);transition:transform .4s var(--ease-out),box-shadow .4s,border-color .3s}
.pack:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(20,18,15,.5);border-color:var(--line-strong)}
.pack-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pack-name{font:860 1.9rem/.9 var(--display);font-stretch:var(--stretch,100%);letter-spacing:-.02em}
.pack-price{font:860 2.6rem/1 var(--display);font-stretch:80%;letter-spacing:-.02em}
.pack-price small{font:500 .8rem/1 var(--mono);letter-spacing:0;color:var(--mute);margin-left:4px}
.pack-meta{display:flex;justify-content:space-between;gap:12px;font:500 .8rem/1.3 var(--mono);color:var(--mute)}
.pack-free{background:transparent;border-style:dashed}
.pack-free .pack-meter i,.pack-meter[data-tone="ink"] i{background:var(--ink)}
.pack-lead{font:500 1rem/1.2 var(--body);color:var(--ink-2)}
.pack-lead b{font:860 2.2rem/1 var(--display);font-stretch:74%;color:var(--ink);margin-right:4px}
.pack-featured .pack-lead,.pack-featured .pack-lead b{color:var(--bone)}
.pack-featured{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.pack-featured .pack-price small,.pack-featured .pack-meta{color:var(--bone-dim)}
.pack .button{margin-top:4px}
.pack-featured .button-ghost{--fg:var(--bone);box-shadow:inset 0 0 0 1.5px var(--night-line)}
@media (min-width:720px){.packs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.packs{grid-template-columns:repeat(4,1fr)}}
.checkout-note{font-size:.88rem;color:var(--mute);max-width:60ch}
.status{min-height:1.4em;font-size:.95rem}
.status[data-kind="error"]{color:#a1300c}
.status[data-kind="success"]{color:#1f6b3a}

/* ---------- Articles (method, guide, privacy, terms) ---------- */
.article{padding-block:clamp(40px,8vw,96px) clamp(72px,10vw,140px)}
.article-head{display:grid;gap:22px;margin-bottom:clamp(40px,7vw,80px)}
.article-head h1{font:860 clamp(3rem,13vw,8.2rem)/.84 var(--display);letter-spacing:-.03em}
.article-body{max-width:68ch;font-size:1.1rem;line-height:1.7}
.article-body h2{font:840 clamp(1.7rem,5vw,2.4rem)/1 var(--display);font-stretch:112%;letter-spacing:-.02em;margin:2.4em 0 .6em}
.article-body h3{font:700 1.15rem/1.3 var(--body);margin:1.6em 0 .4em}
.article-body p{margin:0 0 1.1em}
.article-body a{text-decoration-color:var(--signal);text-decoration-thickness:1.5px;text-underline-offset:4px}
.article-body ul,.article-body ol{padding-left:1.2em;margin:0 0 1.2em}
.article-body li{margin:.3em 0}
.callout{margin:2em 0;padding:22px 22px 6px;border-radius:var(--radius);background:var(--ink);color:var(--bone)}
.callout h3{margin-top:0;font:840 1.4rem/1 var(--display);font-stretch:110%}
.callout p{color:#d8d1c5}
.pull{margin:2em 0;font:860 clamp(1.8rem,6vw,3rem)/.95 var(--display);font-stretch:80%;letter-spacing:-.02em}
.pull::before{content:"";display:block;width:18px;height:18px;border-radius:50%;background:var(--signal);margin-bottom:16px}
.article-cta{margin-top:3em;display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:1000px){
  .article-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,68ch) minmax(0,1fr);}
  .article-grid>.article-body{grid-column:2}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--night);color:var(--bone);padding-block:56px calc(40px + env(safe-area-inset-bottom));color-scheme:dark}
.footer-grid{display:grid;gap:36px}
.footer-word{font:880 clamp(4rem,22vw,15rem)/.8 var(--display);font-stretch:150%;letter-spacing:-.04em;white-space:nowrap}
.footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.footer-links a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:#d8d1c5;border-bottom:1px solid var(--night-line)}
.footer-links a:hover{color:#fff}
.footer-fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font:500 .74rem/1.5 var(--mono);color:var(--bone-dim);letter-spacing:.02em}
@media (min-width:900px){.footer-links{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* ---------- Page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .45s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  @view-transition{navigation:none}
}

/* ---------- Pricing page ---------- */
.pricing-page .packs{margin-top:8px}
.pricing-page .checkout-note{margin-top:14px}
.compare-wrap,.how-pass{display:grid;gap:22px;margin-top:clamp(56px,9vw,120px)}
.compare{width:100%;border-collapse:collapse;font-size:.98rem}
.compare th,.compare td{padding:14px 10px 14px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare thead th{font:600 .82rem/1 var(--body);font-style:normal;color:var(--mute);border-bottom:1.5px solid var(--ink)}
.compare tbody th{font-weight:600;width:38%}
.compare td:last-child{font-weight:600}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:step}
.how-steps li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:20px;border-radius:10px;background:var(--bone-2)}
.how-steps li::before{content:counter(step,decimal-leading-zero);grid-row:span 2;font:860 2.2rem/.9 var(--display);font-stretch:66%;color:var(--signal)}
.how-steps b{font:780 1.25rem/1.1 var(--display);font-stretch:100%}
.how-steps span{color:var(--ink-2)}
@media (min-width:900px){.how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Pass page extras ---------- */
.pass-card #pass-has{display:grid;gap:18px}
.forget{justify-self:start;background:none;border:0;padding:0;color:var(--bone-dim);font-size:.9rem;text-decoration-color:var(--bone-dim)}
.pass-notes h2{margin-top:0}

/* ---------- Language switcher (footer) ---------- */
.lang-switch{display:flex;flex-wrap:wrap;gap:6px}
.lang-switch a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--night-line);color:#d8d1c5;text-decoration:none;font-size:.88rem}
.lang-switch a:hover{border-color:var(--bone);color:#fff}
.lang-switch a[aria-current]{background:var(--bone);color:var(--ink);border-color:var(--bone)}