/* Self-hosted fonts (Fraunces + Inter, SIL Open Font License) — served
   first-party so no visitor request ever goes to Google. Subsets: latin +
   latin-ext; unicode-range makes browsers fetch only what a page uses. */
/* Fraunces 400 latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-400-latin-ext.woff2') format('woff2');
  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;
}
/* Fraunces 400 latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fraunces-400-latin.woff2') format('woff2');
  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;
}
/* Fraunces 500 latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500-latin-ext.woff2') format('woff2');
  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;
}
/* Fraunces 500 latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-500-latin.woff2') format('woff2');
  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;
}
/* Fraunces 600 latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600-latin-ext.woff2') format('woff2');
  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;
}
/* Fraunces 600 latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600-latin.woff2') format('woff2');
  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;
}
/* Inter 400 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin-ext.woff2') format('woff2');
  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;
}
/* Inter 400 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin.woff2') format('woff2');
  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;
}
/* Inter 500 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin-ext.woff2') format('woff2');
  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;
}
/* Inter 500 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin.woff2') format('woff2');
  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;
}
/* Inter 600 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600-latin-ext.woff2') format('woff2');
  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;
}
/* Inter 600 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600-latin.woff2') format('woff2');
  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;
}

/* Tether — brand kit from Documentation/Product Spec.md */
:root{
  --sand:#F4EFE6; --linen:#FBF8F2; --pine:#2E4B43; --sage:#7C9A8E;
  --clay:#B0564A; --lilac:#9A8FB0; --ink:#23302B; --stone:#6E756F;
  --line:#e7e0d2;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--sand);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--pine);line-height:1.12;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--clay)}
p{margin:0 0 16px}
img{max-width:100%;height:auto;display:block}
.center{text-align:center}

/* buttons */
.btn{display:inline-block;background:var(--clay);color:#fff;text-decoration:none;font-weight:600;font-family:var(--sans);
  border:0;border-radius:14px;padding:15px 26px;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease;
  box-shadow:0 6px 20px rgba(200,116,79,.28)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(200,116,79,.34)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:11px;box-shadow:none}
.btn-lg{font-size:18px;padding:17px 30px}
.center-btn{display:block;width:max-content;margin:24px auto 0}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(244,239,230,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:var(--serif);font-size:21px;color:var(--pine);font-weight:600;letter-spacing:.01em}
/* brand mark: two overlapping rings (sage behind, pine in front), same as the app */
.mark{vertical-align:-2px;margin-right:1px}
.mark circle{fill:none;stroke-width:2}
.mark .c1{stroke:var(--sage)}
.mark .c2{stroke:var(--pine)}

/* hero */
.hero{padding:54px 0 40px}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.hero h1{font-size:44px;margin:0 0 18px}
.lede{font-size:18px;color:#3c4a44;margin-bottom:26px;max-width:34ch}
.trust-line{margin-top:16px;font-size:13px;color:var(--stone)}

/* official Apple "Download on the App Store" badge */
.appstore-badge{display:inline-block;margin-top:18px;line-height:0}
.appstore-badge img{display:block;height:50px;width:auto}

.hero-art{display:flex;justify-content:center}
.hero-art img{width:300px;border-radius:34px;box-shadow:0 30px 70px rgba(46,75,67,.22)}

/* bands */
.band{padding:62px 0;border-top:1px solid var(--line)}
.band h2{font-size:32px;margin:0 0 14px}
.punch{font-size:20px;max-width:40ch;margin:26px auto 0;color:#3c4a44}

/* self-id thoughts */
.thoughts{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:28px auto 0}
.thought{background:var(--linen);border:1px solid var(--line);border-radius:16px;padding:18px 20px;font-family:var(--serif);
  font-size:18px;color:var(--pine)}
.thought em{font-style:italic;color:var(--clay)}

/* features */
.feature{padding:60px 0;border-top:1px solid var(--line)}
.feature-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center}
.feature.alt .feature-img{order:2}
.feature-img{display:flex;justify-content:center}
.feature-img img{width:270px;border-radius:30px;box-shadow:0 24px 56px rgba(46,75,67,.18)}
/* image-less variants (screenshots removed until real app captures exist) */
.hero-in.noimg{grid-template-columns:1fr;max-width:720px}
.feature-in.noimg{grid-template-columns:1fr;max-width:640px;margin:0 auto}
.feature-copy .tag{display:inline-block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--sage);margin-bottom:12px}
.feature-copy h2{font-size:30px;margin:0 0 14px}
.feature-copy p{font-size:17px;color:#3c4a44;max-width:46ch}
.quote{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--clay);border-left:3px solid var(--clay);padding-left:16px;margin-top:18px}

/* Spiral scripted demo (driven by app.js — no AI call, no network) */
.spiral-demo{max-width:400px;margin:46px auto 0}
.sd-screen{background:#26403A;border-radius:24px;padding:18px 16px 20px;box-shadow:0 24px 56px rgba(46,75,67,.25)}
.sd-head{font-family:var(--serif);font-size:15px;color:#F1EBDD;text-align:center;opacity:.92;margin-bottom:14px}
.sd-msgs{display:flex;flex-direction:column;gap:12px;min-height:268px;transition:opacity .6s ease}
.sd-bubble{padding:11px 14px;font-size:15px;line-height:1.5}
.sd-user{align-self:flex-end;max-width:86%;background:rgba(124,154,142,.85);color:#fff;font-family:var(--sans);border-radius:16px 6px 16px 16px}
.sd-ai{align-self:flex-start;max-width:90%;background:var(--linen);color:var(--pine);font-family:var(--serif);font-size:16px;border-radius:6px 16px 16px 16px}
.sd-caret{display:inline-block;width:1.5px;height:1em;background:#fff;margin-left:2px;vertical-align:-2px;animation:sdBlink 1s steps(1) infinite}
.sd-caret[hidden]{display:none}
@keyframes sdBlink{50%{opacity:0}}
.sd-dots span{display:inline-block;width:6px;height:6px;border-radius:3px;background:var(--sage);margin-right:5px;animation:sdPulse 1.2s ease-in-out infinite}
.sd-dots span:nth-child(2){animation-delay:.2s}
.sd-dots span:nth-child(3){animation-delay:.4s}
@keyframes sdPulse{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.sd-caption{text-align:center;font-size:12.5px;color:var(--stone);margin-top:12px}

/* how it works */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:860px;margin:34px auto 0}
.s3{background:var(--linen);border:1px solid var(--line);border-radius:18px;padding:26px 22px;text-align:center}
.s3n{width:40px;height:40px;border-radius:50%;background:var(--pine);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:var(--serif)}
.s3 h3{font-size:19px;margin:0 0 8px}
.s3 p{font-size:15px;color:var(--stone);margin:0}

/* the check / signup */
.check{padding:66px 0;border-top:1px solid var(--line)}
.check-card{background:var(--linen);border:1px solid var(--line);border-radius:26px;max-width:560px;margin:0 auto;
  padding:36px 34px 40px;box-shadow:0 24px 60px rgba(46,75,67,.12)}
.check-head h2{font-size:28px;margin:0 0 8px;text-align:center}
.check-sub{font-size:15px;color:var(--stone);text-align:center;max-width:42ch;margin:0 auto 22px}
.progress{display:flex;gap:7px;justify-content:center;margin:0 0 26px}
.dot{width:9px;height:9px;border-radius:50%;background:#e0d8c8;transition:all .25s ease}
.dot.on{background:var(--sage);transform:scale(1.15)}
.dot.done{background:var(--pine)}

.step{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.q{font-family:var(--serif);font-size:24px;color:var(--pine);text-align:center;margin:4px 0 22px;line-height:1.2}
.opts{display:grid;gap:11px}
.opt{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:16px 18px;font-size:16px;font-family:var(--sans);color:var(--ink);cursor:pointer;transition:all .14s ease}
.opt:hover{border-color:var(--sage);background:#fff}
.opt.sel{border-color:var(--pine);background:#f2f5f1}
.opt .em{font-family:var(--serif);color:var(--pine)}

.field{margin-top:6px}
.field input{width:100%;padding:16px 16px;font-size:16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font-family:var(--sans)}
.field input:focus{outline:none;border-color:var(--sage)}
.nav-row{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:12px}
.back{background:none;border:0;color:var(--stone);font-size:15px;cursor:pointer;font-family:var(--sans)}
.back:hover{color:var(--pine)}
.submit{flex:1}
.fineprint{font-size:12px;color:var(--stone);text-align:center;margin-top:14px}
.err-msg{color:#b4452e;font-size:13px;text-align:center;margin-top:10px;min-height:16px}

/* success */
.done-card{text-align:center;padding:8px 4px}
.done-knot{font-size:40px;margin-bottom:10px}
.done-card h2{font-size:30px;margin:0 0 10px}
.done-card p{font-size:17px;color:#3c4a44;max-width:40ch;margin:0 auto 8px}
.done-theme{display:inline-block;margin-top:14px;background:#f2f5f1;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:14px;color:var(--pine)}

/* trust */
.trust .trust-body{font-size:16px;color:#3c4a44;max-width:64ch;margin:14px auto 0}

/* footer */
.foot{padding:34px 0;border-top:1px solid var(--line);background:var(--linen)}
/* Calm, centered three-line stack: wordmark, credit, legal links. */
.foot-in{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.foot-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--pine)}
.foot-brand .mark{margin:0;vertical-align:0}
.foot-meta{font-family:var(--sans);font-size:13px;color:var(--stone)}
.foot-links{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:13px}
.foot-links a{color:var(--stone);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line);white-space:nowrap}
.foot-links a:hover{color:var(--pine)}
.foot-sep{color:var(--line)}

/* sticky mobile cta */
.sticky-cta{display:none}

/* responsive */
@media(max-width:860px){
  .hero-in{grid-template-columns:1fr;text-align:center}
  .hero h1{font-size:36px}
  .lede{margin-left:auto;margin-right:auto}
  .hero-art{order:-1}
  .hero-art img{width:230px}
  .feature-in{grid-template-columns:1fr;gap:24px;text-align:center}
  .feature.alt .feature-img{order:0}
  .feature-copy p,.feature-copy .quote{margin-left:auto;margin-right:auto}
  .quote{text-align:left}
  .thoughts{grid-template-columns:1fr}
  .steps3{grid-template-columns:1fr}
  .trust-line{margin-left:auto;margin-right:auto}
}
@media(max-width:680px){
  .nav .btn-sm{display:none}
  .sticky-cta{display:block;position:fixed;left:14px;right:14px;bottom:14px;z-index:50;text-align:center;
    background:var(--clay);color:#fff;text-decoration:none;font-weight:600;padding:16px;border-radius:16px;
    box-shadow:0 10px 30px rgba(46,75,67,.28)}
  /* Clear the fixed CTA (~66px tall at bottom:14px) so the footer + legal links
     stay fully visible and tappable, plus the iPhone home-indicator safe area. */
  .foot{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .check-card{padding:28px 20px 32px}
  .hero{padding:34px 0 24px}
  .band,.feature,.check{padding:48px 0}
  .q{font-size:21px}
}