@font-face{font-family:Instrument Sans;src:url('/assets/InstrumentSans.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:Crimson Pro;src:url('/assets/CrimsonPro-ExtraBold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Uncut Sans;src:url('/assets/UncutSans-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Uncut Sans;src:url('/assets/UncutSans-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:Uncut Sans;src:url('/assets/UncutSans-Bold.otf') format('opentype');font-weight:700;font-display:swap}

/* Same tokens as the app (Theme.swift) */
:root{--bg:#0b0a09;--surface:#1b1917;--border:#2c2926;--border-2:#413d3a;--text:#f0eae3;--text-2:#c9c4bc;--muted:#a39d95;--urge:#dc2626;
--title:'Instrument Sans',-apple-system,sans-serif;--serif:'Crimson Pro',Georgia,serif;--body:'Uncut Sans',-apple-system,sans-serif;--wrap:1120px;--r:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
h1,h2,h3,p{margin-top:0}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-60px;background:#fff;color:var(--bg);padding:10px 14px;border-radius:999px;z-index:20;font-weight:700}
.skip:focus{top:12px}
.wrap{width:min(var(--wrap),calc(100% - 56px));margin-inline:auto}

.site-header{height:84px;display:flex;align-items:center;justify-content:space-between}
.wordmark{display:inline-flex;align-items:center;gap:10px;font:700 21px var(--title);letter-spacing:-.04em}
.wordmark img{width:34px;height:34px;border-radius:10px}
.main-nav{display:flex;align-items:center;gap:28px;font-weight:500;font-size:15px;color:var(--text-2)}
.main-nav a:hover{color:#fff}
.nav-cta{background:#fff;color:var(--bg)!important;border-radius:999px;padding:10px 18px;font-weight:700}
.nav-cta span{margin-left:4px}

.eyebrow{font:500 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
h1,h2{font-family:var(--title);font-weight:700;letter-spacing:-.045em;line-height:1.02;margin:0 0 20px}
h1 em,h2 em{font-family:var(--serif);font-style:normal;font-weight:700;letter-spacing:-.02em;color:#fff}
h2{font-size:clamp(38px,5.2vw,64px)}

/* hero */
.store-badge{height:56px;padding:8px 22px 8px 16px;background:#fff;color:var(--bg);border-radius:999px;display:inline-flex;align-items:center;gap:11px;transition:transform .2s}
.store-badge:hover{transform:translateY(-2px)}
.store-badge svg{width:22px;height:26px;fill:currentColor}
.store-badge span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store-badge small{font-size:11px;opacity:.75}.store-badge strong{font:700 20px var(--title);letter-spacing:-.03em}
.hero{min-height:calc(100vh - 84px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 0 60px}
.hero-spark{width:min(420px,80vw);height:150px;object-fit:contain;mix-blend-mode:screen;margin-bottom:18px}
.float{animation:float 2.4s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0) scale(1,1)}to{transform:translateY(-4px) scale(1.1,.95)}}
.hero h1{font-size:clamp(52px,8vw,104px);max-width:900px}
.lede{font-size:20px;line-height:1.6;color:var(--text-2);max-width:560px;margin:0 auto 32px}
.scroll-cue{margin-top:56px;font-size:14px;font-weight:500;color:var(--muted)}
.scroll-cue span{display:inline-block;margin-left:6px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}

/* blocks */
.block{padding:110px 0 0}
.block .lede{margin:0 0 40px;max-width:620px}
.block h2{margin-bottom:22px}

/* chart: same graphic as WeeklyCurveCard in Insights (clear card, dashed baseline, white curve, end dot) */
.chart-card{margin:0;padding:18px;position:relative}
.chart-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.up{width:30px;height:30px;border-radius:50%;background:#ffffff1f;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff}
.chart-label{flex:1;font:500 14px var(--body);color:#fff}
.info{width:32px;height:32px;border-radius:50%;border:1px solid #ffffff26;background:#ffffff14;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-2);font:600 14px var(--body);cursor:pointer}
.info:hover{color:#fff}
.curve{position:relative;height:150px}
.curve svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.curve .base{stroke:var(--border-2);stroke-opacity:.7;stroke-width:1;stroke-dasharray:4 5}
.curve .line{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,0) calc(var(--len,0) + 20);stroke-dashoffset:calc(var(--len,0) + 6)}
.curve .dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;transform:scale(.01);opacity:0}
.dates{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.chart-card.drawn .line{transition:stroke-dashoffset 1.5s ease-out .25s;stroke-dashoffset:0}
.chart-card.drawn .dot{transition:transform .8s cubic-bezier(.3,1.7,.5,1) 1.7s,opacity .25s ease-out 1.7s;transform:scale(1);opacity:1}
@supports (transition-timing-function:linear(0,1)){.chart-card.drawn .dot{transition:transform .8s linear(0.000, 0.044, 0.154, 0.302, 0.464, 0.624, 0.768, 0.889, 0.984, 1.052, 1.096, 1.120, 1.126, 1.121, 1.106, 1.088, 1.067, 1.047, 1.029, 1.014, 1.002, 0.993, 0.988, 0.985, 0.984, 0.985, 0.987, 0.989, 0.992, 0.994, 0.996, 0.998, 1.000, 1.001, 1.002, 1.002, 1.002, 1.002, 1.002, 1.001, 1) 1.7s,opacity .25s ease-out 1.7s}}
.sources{margin:0;inset:auto;max-width:min(420px,calc(100vw - 32px));padding:16px;border:1px solid var(--border-2);border-radius:18px;background:var(--surface);color:var(--text);font-size:15px;line-height:1.55;box-shadow:0 20px 50px #000a}
.sources::backdrop{background:#0006}
.sources a{text-decoration:underline;text-underline-offset:3px}
.sources:popover-open{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}

/* cards, same as the app's reriseCard */
.app-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px}
.app-card h3{font:700 22px/1.2 var(--title);letter-spacing:-.03em;margin:0 0 10px}
.app-card p{font-size:16px;line-height:1.65;color:var(--text-2);margin:0}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--bg);border:1px solid var(--border);margin-bottom:18px;font-size:20px}
.pain-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px;margin-top:18px}
.stat{border-color:#fff}
.stat .num{display:block;font:700 72px/1 var(--serif);background:linear-gradient(#fff,#8a8680);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.stat a{display:inline-block;margin-top:16px;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.urge-pill{display:inline-block;background:var(--urge);color:#fff;border-radius:999px;padding:10px 20px;font:900 16px var(--title);margin-bottom:18px;box-shadow:0 4px 12px #0006}

.closing{padding:130px 0 100px;text-align:center;display:flex;flex-direction:column;align-items:center}
.emblem{width:130px;height:auto;margin-bottom:24px}
.closing h2{font-size:clamp(42px,6vw,76px);margin-bottom:30px}
.note{max-width:520px;font-size:14px;color:var(--muted);margin:28px 0 0}


/* hero title: same as the home greeting (Instrument Sans bold, white to 55% white, rises out of a blur) */
.greet-title{background:linear-gradient(180deg,#fff,#ffffff8c);-webkit-background-clip:text;background-clip:text;color:transparent;animation:greet .9s cubic-bezier(.3,0,.2,1) .15s both}
@keyframes greet{from{filter:blur(12px);opacity:0;transform:translateY(14px)}to{filter:none;opacity:1;transform:none}}

/* pain cards: same as the onboarding "porn info" screens */
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.pain{padding:28px 12px 8px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center}
.pain-img{width:120px;height:120px;object-fit:contain;margin-bottom:20px;animation:painfloat 2s ease-in-out infinite alternate}
@keyframes painfloat{to{transform:translateY(-12px)}}
.pain h3{font:700 30px/1.15 var(--title);letter-spacing:-.03em;margin:0 0 14px}
.pain p{font:500 17px/1.6 var(--body);opacity:.9;margin:0;max-width:420px}
.pain b{font-weight:700}
.pain .em,.pain b{background:linear-gradient(180deg,#fff,#ffffffa6);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-line{margin:26px 0 0;font-size:15px;color:var(--muted)}
.stat-line b{font:700 22px var(--serif);color:#fff;margin-right:4px}
.stat-line a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}

/* module tiles: same as the Learn tab */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 16px}
.mod{position:relative;aspect-ratio:1;border-radius:22px;border:1px solid #2c2926b3;background-size:cover;background-position:center;padding:18px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.mod:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#00000014 0%,#00000029 42%,#00000094 100%)}
.mod-ico{width:44px;height:44px;margin-bottom:auto}
.mod-ico svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mod-ico svg.fill{fill:#fff;stroke:none}
.mod-n{font:500 12px var(--body);text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-bottom:2px}
.mod-row{display:flex;align-items:center;gap:8px}
.mod-row b{flex:1;font:400 20px/1.2 var(--body);color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.check{width:26px;height:26px;flex:none;border:2px solid var(--border-2);border-radius:8px}
.mod-c{font-size:13px;color:var(--muted);margin-top:6px}
.help-grid{grid-template-columns:repeat(3,1fr)}


/* how it helps: open columns, no cards */
.helps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--border)}
.help{padding:40px 32px 8px;text-align:center;display:flex;flex-direction:column;align-items:center}
.help+.help{border-left:1px solid var(--border)}
.help-visual{height:120px;display:grid;place-items:center;margin-bottom:22px;position:relative}
.help-visual:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#ffffff14,transparent 70%);z-index:-1}
.help .urge-pill{margin:0;font-size:18px;padding:13px 26px}
.shield{width:58px;height:68px}.shield path{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round}.shield .half{fill:#fff;stroke:none}
.help-visual img{width:200px;height:90px;object-fit:contain;mix-blend-mode:screen}
.help h3{font:700 26px/1.2 var(--title);letter-spacing:-.03em;margin:0 0 12px}
.help p{font-size:17px;line-height:1.65;color:var(--text-2);margin:0;max-width:300px}

/* scroll reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

.site-footer{border-top:1px solid var(--border);background:var(--bg);padding:72px 0 64px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-brand .wordmark{font-size:22px}
.made{font-size:17px;color:var(--muted);margin:22px 0 14px}
.copy{font-size:15px;color:var(--muted);margin:0}
.footer-col{display:flex;flex-direction:column;gap:16px}
.footer-col h2{font:700 17px var(--title);letter-spacing:-.02em;color:var(--text);margin:0 0 4px}
.footer-col a{font-size:16px;color:var(--muted)}
.footer-col a:hover{color:#fff}

/* legal pages */
.legal{padding:76px 0 120px}
.legal-heading{max-width:760px}
.legal-heading h1,.contact-intro h1{font-size:clamp(50px,7vw,84px)}
.legal-updated{font-size:14px;color:var(--muted);margin:0 0 20px}
.legal-lede{font-size:19px;color:var(--text-2);max-width:640px;margin:0}
.legal-toc{display:flex;flex-wrap:wrap;gap:10px;margin:38px 0 56px;padding-bottom:26px;border-bottom:1px solid var(--border)}
.legal-toc a{border:1px solid var(--border-2);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--text-2);background:var(--surface)}
.legal-toc a:hover{border-color:#fff;color:#fff}
.legal-heading+.legal-content{margin-top:52px}
.legal-content{max-width:760px}
.legal-content section{margin:0 0 42px;scroll-margin-top:28px}
.legal-content h2{font:700 26px/1.25 var(--title);letter-spacing:-.03em;margin:0 0 14px}
.legal-content h3{font:700 17px var(--body);margin:26px 0 8px}
.legal-content p,.legal-content li{font-size:16.5px;line-height:1.8;color:var(--text-2)}
.legal-content p{margin:0 0 14px}.legal-content strong{color:var(--text)}
.legal-content ul{padding-left:22px}.legal-content li{margin-bottom:10px}
.legal-content a{color:#fff;text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:4px}
.provider-list{display:grid;gap:12px;margin:22px 0}
.provider{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px}
.provider h3{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 0 8px;font:700 18px var(--title)}
.provider h3 span{font:500 12px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.provider p{font-size:15.5px;margin:0 0 10px}.provider>a{font-size:14px;font-weight:500}

/* contact */
.contact-page{min-height:calc(100vh - 200px);display:grid;grid-template-columns:.9fr 1.1fr;gap:10%;align-items:start;padding:100px 0 110px}
.contact-intro{max-width:420px}
.contact-intro>p:not(.eyebrow){font-size:18px;color:var(--text-2)}
.contact-direct{margin-top:26px!important;font-size:15px!important}
.contact-direct a{text-decoration:underline;text-underline-offset:4px}
.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:30px}
.contact-form label{display:block;font-weight:500;font-size:14px;margin:0 0 8px}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--border-2);background:var(--bg);color:var(--text);border-radius:18px;padding:14px 16px;font-size:16px;outline:none;margin-bottom:20px}
.contact-form input:focus,.contact-form textarea:focus{border-color:#fff}
.contact-form textarea{resize:vertical;min-height:150px}.contact-form ::placeholder{color:#7d7871}
.form-hint{font-size:14px;color:var(--muted);margin:-6px 0 20px}
.button{display:inline-flex;align-items:center;gap:12px;border:0;background:#fff;color:var(--bg);border-radius:999px;padding:15px 28px;font:700 17px var(--body);cursor:pointer;transition:transform .2s}
.button:hover{transform:translateY(-1px)}
.form-status{min-height:20px;margin:14px 0 0;font-size:14px;color:#6fd08a}.form-status.is-error{color:#ff8f84}
.unconfigured-link{cursor:default;text-decoration:none!important;color:var(--muted)!important}

@media(max-width:900px){.pain-grid{grid-template-columns:1fr}.modules{grid-template-columns:1fr 1fr}.help-grid{grid-template-columns:1fr}.helps{grid-template-columns:1fr}.help+.help{border-left:0;border-top:1px solid var(--border)}.help{padding:36px 8px 32px}}
@media(max-width:800px){
  .wrap{width:min(100% - 40px,var(--wrap))}.site-header{height:74px}
  .main-nav>a:not(.nav-cta){display:none}
  .block{padding-top:80px}.help-grid{grid-template-columns:1fr}.closing{padding:90px 0 70px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 24px}.footer-brand{grid-column:1/-1}
  .contact-page{grid-template-columns:1fr;gap:34px;padding:60px 0 70px}.legal{padding:56px 0 80px}
  .lede{font-size:18px}
}
@media(max-width:480px){
  .wrap{width:calc(100% - 32px)}.chart-card{padding:12px 4px}.mod{padding:12px;border-radius:18px}.mod-ico{width:30px;height:30px}.mod-ico svg{width:20px;height:20px}.mod-n{font-size:10px}.mod-row b{font-size:clamp(13px,4vw,16px)}.check{width:20px;height:20px;border-radius:6px}.mod-c{font-size:11px;margin-top:3px}.pain h3{font-size:26px}.app-card{padding:20px}.contact-form{padding:22px}
  .provider h3{flex-direction:column;align-items:flex-start;gap:4px}.footer-bottom nav{gap:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}.curve .line{stroke-dashoffset:0!important}.curve .dot{transform:none;opacity:1}}