/* ============================================================
   Progress Tab — landing styles. Warm "quiet instrument" system
   (cream paper / teal / amber) with Lora + Manrope. Static, no build.
   ============================================================ */
/* ---- self-hosted fonts (Lora + Manrope). Replaces the Google Fonts CDN
     to keep the privacy story (no third-party request) + faster LCP. woff2
     from /fonts, subset per unicode-range so only used ranges download.
     Note: Manrope 500 is not bundled; CSS weight:500 falls back to 400. ---- */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lora-400-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lora-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lora-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}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/lora-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/lora-600-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/lora-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/lora-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}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/lora-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-700-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --bg:#F6F2EA; --ink:#24211C; --head:#221F1A; --head2:#2A261F;
  --body:#524C43; --body2:#3B372F; --slate:#6E675C; --mute:#8C857A; --mute2:#9A9284;
  --teal:#2E6B5A; --teal-dark:#245647;
  --dawn:#D9922F; --dawn-bright:#F1C47E; --dawn-deep:#9B6A1E; --dawn-num:#8A5E17; --dawn-num2:#B67A26;
  --edge:#ECE4D6; --edge2:#E3DACB; --rule:#E8E0D2; --card-rule:#EFE8DC; --axis:#919BA2;
  --card:#FFFFFF; --maxw:1120px;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-family:var(--sans);
  line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(900px 520px at 86% -10%, rgba(217,146,47,.10), transparent 62%),
    radial-gradient(760px 480px at 6% 108%, rgba(46,107,90,.06), transparent 60%),
    var(--bg);
}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.15}
::selection{background:rgba(46,107,90,.18)}

/* ---- animations ---- */
@keyframes ptFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ptHalo{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(2.7);opacity:0}}
@keyframes ptCore{0%,100%{box-shadow:0 0 0 3px rgba(217,146,47,.16),0 0 6px rgba(217,146,47,.35)}50%{box-shadow:0 0 0 3px rgba(217,146,47,.22),0 0 12px rgba(217,146,47,.7)}}

/* ---- brand dot (animated) + static dot ---- */
.led{ position:relative; display:inline-block; width:.62em; height:.62em; margin-right:.6em; flex:none; vertical-align:.02em }
.led::before{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px rgba(217,146,47,.55); animation:ptHalo 2.4s cubic-bezier(.4,0,.2,1) infinite }
.led::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--dawn-bright),var(--dawn) 62%,var(--dawn-deep)); animation:ptCore 2.4s ease-in-out infinite }
.dot{ display:inline-block; width:.55em; height:.55em; border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--dawn-bright),var(--dawn) 62%,var(--dawn-deep)); margin-right:.6em; flex:none; vertical-align:.02em }
@media (prefers-reduced-motion:reduce){ .led::before,.led::after{ animation:none } }

/* ---- nav ---- */
.nav{ max-width:var(--maxw); margin:0 auto; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.brand{ display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); font-weight:700; font-size:1.08rem; letter-spacing:-.01em }
.nav-right{ display:flex; align-items:center; gap:20px }
.nav-link{ color:var(--slate); text-decoration:none; font-size:.95rem; font-weight:500 }
.nav-link:hover{ color:var(--ink) }
.lang{ display:inline-flex; border:1px solid var(--edge2); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.5) }
.lang-btn{ border:0; background:transparent; color:var(--mute); font:inherit; font-size:.8rem; font-weight:600; padding:6px 13px; cursor:pointer; letter-spacing:.03em }
.lang-btn[aria-pressed="true"]{ background:var(--ink); color:#fff }

/* ---- hero ---- */
.hero{ max-width:var(--maxw); margin:0 auto; padding:56px 28px 64px; display:flex; flex-wrap:wrap; gap:60px; align-items:center }
.hero-copy{ flex:1 1 400px; min-width:min(100%,400px); animation:ptFade .6s ease both }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); background:rgba(46,107,90,.08); padding:6px 12px; border-radius:999px; margin-bottom:20px }
.tagline{ font-family:var(--serif); font-weight:600; font-size:clamp(2.3rem,4.6vw,3.35rem); line-height:1.14; letter-spacing:-.012em; color:var(--head) }
.sub{ color:var(--body); font-size:1.16rem; line-height:1.62; max-width:42ch; margin:22px 0 30px }
.cta-row{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
.cta{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; background:var(--teal); color:#fff; font-weight:600; font-size:1.04rem; padding:15px 26px; border-radius:13px; box-shadow:0 12px 26px -14px rgba(46,107,90,.9),0 1px 0 rgba(36,86,71,.4); transition:transform .14s ease, background .14s ease }
.cta:hover{ background:var(--teal-dark); transform:translateY(-1px) }
.cta.is-soon{ background:var(--mute); box-shadow:none; cursor:default; pointer-events:none; transform:none }
.cta svg{ flex:none }
.cta-note{ color:var(--mute); font-size:.9rem }

/* ---- preview card ---- */
.preview{ flex:1 1 360px; min-width:min(100%,340px); display:flex; flex-direction:column; gap:14px; align-items:center; animation:ptFade .7s ease .1s both }
.card{ width:100%; max-width:400px; background:var(--card); border:1px solid var(--edge); border-radius:20px; padding:26px 26px 20px; box-shadow:0 1px 2px rgba(36,33,28,.04),0 34px 64px -36px rgba(36,33,28,.4) }
.card-head{ display:flex; justify-content:space-between; align-items:center; font-size:.75rem }
.kicker{ display:inline-flex; align-items:center; color:var(--teal-dark); font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.stamp{ color:var(--mute2); letter-spacing:.02em }
.card-name{ font-family:var(--serif); font-size:1.24rem; font-weight:600; color:var(--head); margin:16px 0 12px }
.card-reading{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.value{ font-family:var(--serif); font-size:3rem; font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--head) }
.value .pct{ font-size:1.5rem; margin-left:1px; color:var(--mute) }
.card-delta{ color:var(--teal-dark); font-weight:600; font-size:.94rem }
.card-delta .muted{ color:var(--mute2); font-weight:500 }
.chart{ margin-top:20px }
.chart figure{ position:relative; margin:0 }
.chart svg{ display:block; width:100%; height:auto }
.chart .now-label{ position:absolute; left:97.14%; top:77.33%; transform:translate(-100%,-150%); font-family:ui-monospace,'SF Mono','Segoe UI Mono',Menlo,Consolas,monospace; font-size:11px; letter-spacing:.02em; color:var(--dawn-num); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums }
.chart .axis{ display:flex; justify-content:space-between; margin-top:9px; padding:0 2px; font-family:ui-monospace,'SF Mono','Segoe UI Mono',Menlo,Consolas,monospace; font-size:11px; letter-spacing:.04em; color:var(--axis); font-variant-numeric:tabular-nums lining-nums }
.chart .axis .now{ color:var(--dawn-num) }
.card-compare{ font-size:.94rem; line-height:1.55; color:var(--body2); margin:8px 0 0 }
.card-compare .you{ color:var(--mute) }
.card-compare .real{ color:var(--teal-dark) }
.card-compare .tail{ color:var(--mute2); font-weight:500 }
.card-foot{ margin-top:16px; padding-top:13px; border-top:1px solid var(--card-rule); font-size:.82rem; color:var(--mute2) }
.preview-cap{ color:var(--mute2); font-size:.88rem; text-align:center; margin:0; max-width:36ch; line-height:1.5 }

/* ---- bands / cols ---- */
.band{ max-width:var(--maxw); margin:0 auto; padding:64px 28px }
.band-h,.why-h,.final h2{ font-family:var(--serif); font-weight:600; color:var(--head) }
.band-h{ font-size:clamp(1.7rem,3vw,2.1rem); letter-spacing:-.01em; margin-bottom:8px }
.band-lead{ color:var(--body); max-width:62ch; font-size:1.1rem; line-height:1.68 }
.cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:34px; margin-top:34px }
.col-num{ display:block; color:var(--dawn-num2); font-weight:700; font-size:.82rem; letter-spacing:.1em; margin-bottom:12px }
.col h3{ font-size:1.18rem; font-weight:700; color:var(--head2); margin:0 0 9px }
.col p{ color:var(--body); margin:0; font-size:1.02rem; line-height:1.62 }

/* ---- why (tinted band) ---- */
.why{ background:linear-gradient(180deg, rgba(46,107,90,.055), rgba(46,107,90,.02)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.why-inner{ max-width:var(--maxw); margin:0 auto; padding:68px 28px }
.why-h{ font-size:clamp(1.9rem,3.4vw,2.4rem); letter-spacing:-.012em; margin-bottom:16px }
.why-b{ color:var(--body2); font-size:1.2rem; line-height:1.72; max-width:64ch }

/* ---- privacy band link ---- */
.ghost-link{ display:inline-block; margin-top:18px; color:var(--teal-dark); font-weight:600; text-decoration:none; font-size:1.02rem }
.ghost-link:hover{ text-decoration:underline }

/* ---- final ---- */
.final{ max-width:var(--maxw); margin:0 auto; padding:24px 28px 84px; text-align:center }
.final h2{ font-size:clamp(1.8rem,3.2vw,2.3rem); letter-spacing:-.012em; margin:0 auto 26px; max-width:22ch }

/* ---- footer ---- */
.foot{ border-top:1px solid var(--rule); background:rgba(255,255,255,.45) }
.foot-inner{ max-width:var(--maxw); margin:0 auto; padding:30px 28px; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between }
.foot-brand{ display:inline-flex; align-items:center; font-weight:700; color:var(--head2) }
.foot-note{ color:var(--mute2); font-size:.92rem; flex:1; min-width:220px; line-height:1.5 }
.foot .nav-link{ color:var(--slate); font-size:.92rem }

/* ---- privacy page ---- */
.doc{ max-width:740px; margin:0 auto; padding:20px 28px 80px }
.doc h1{ font-family:var(--serif); font-size:2rem; font-weight:600; color:var(--head); margin:18px 0 8px }
.doc .updated{ color:var(--mute2); font-size:.9rem; margin:0 0 28px }
.doc h2{ font-family:var(--serif); font-size:1.25rem; color:var(--head); margin:34px 0 8px }
.doc p,.doc li{ color:var(--body2) }
.doc p{ margin:10px 0; line-height:1.68 }
.doc ul{ margin:10px 0; padding-left:22px }
.doc li{ margin:6px 0 }
.doc a{ color:var(--teal-dark) }
.back{ display:inline-block; margin-top:8px; color:var(--slate); text-decoration:none; font-size:.92rem }

/* ---- responsive ---- */
@media (prefers-reduced-motion:reduce){ .cta{ transition:none } .hero-copy,.preview{ animation:none } }