/* ============================================================
   Followable - marketing site styles (v2, candy brand)
   Layout and components only. Color, type, and spacing come
   from tokens.css. Hero matches the landing mockup.
   No dashes anywhere in copy. Hyphens only.
   ============================================================ */

@import url("tokens.css");

/* ---- Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-size:var(--text-base);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap,.container{max-width:var(--container);margin:0 auto;padding:0 28px}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;border-radius:var(--radius-pill);white-space:nowrap;
  transition:transform .12s ease, box-shadow .15s ease, background .15s;
}
.btn:active{transform:translateY(1px)}
.btn-sun{background:var(--sunshine);color:var(--ink);padding:11px 20px;box-shadow:0 6px 16px rgba(246,197,19,.30)}
.btn-sun:hover{background:#FFE066;box-shadow:0 10px 22px rgba(246,197,19,.42);color:var(--ink)}
.btn-sun.lg{padding:15px 26px;font-size:16px}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);padding:11px 20px}
.btn-ghost:hover{border-color:#CFCFE0}
.btn-ghost.lg{padding:15px 26px;font-size:16px}
.signin{font-size:15px;font-weight:600;color:#39425c;padding:8px 6px}
.signin:hover{color:var(--ink)}
.link-arrow{font-size:15.5px;font-weight:700;color:var(--sky-deep);display:inline-flex;align-items:center;gap:7px}
.link-arrow .ar{transition:transform .18s}
.link-arrow:hover .ar{transform:translateX(4px)}

/* ============================================================
   HERO (matches mockup)
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 720px at 88% 16%, rgba(216,204,255,.55), transparent 60%),
    radial-gradient(900px 640px at 100% 86%, rgba(199,230,255,.50), transparent 62%),
    radial-gradient(700px 520px at 6% 100%, rgba(167,234,214,.28), transparent 60%),
    linear-gradient(160deg,#FFFDF6 0%, #FBF7FB 46%, #F1ECFB 100%);
}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(1200px 300px at 50% -8%, rgba(255,255,255,.65), transparent 70%)}

/* ---- Nav ---- */
nav{position:relative;z-index:40}
.nav-inner{display:flex;align-items:center;gap:28px;padding:14px 0}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:18px}
.nav-links a{font-size:15px;font-weight:500;color:#26304a;display:inline-flex;align-items:center;gap:5px;padding:6px 2px;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links .caret{width:14px;height:14px;opacity:.65;transition:transform .2s}
.has-menu{position:relative}
.has-menu:hover .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 10px);left:-12px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:8px;min-width:188px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.has-menu:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:#39425c}
.dropdown a:hover{background:var(--cloud);color:var(--ink)}
.dropdown .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.nav-spacer{margin-left:auto}
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;border:1px solid #E6E2F0;background:rgba(255,255,255,.7);align-items:center;justify-content:center}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.mobile-menu{display:none}

/* ---- Hero grid ---- */
.hero-grid{display:grid;grid-template-columns:0.82fr 1.28fr;gap:42px;align-items:start;padding:30px 0 86px;position:relative;z-index:10}
h1{font-size:var(--text-3xl);line-height:var(--leading-tight);font-weight:800;letter-spacing:var(--tracking-tight);margin-bottom:20px}
.hl{border-radius:10px;padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-sun{background:var(--hl-yellow)}
.hl-lav{background:var(--lavender)}
.lede{font-size:clamp(16px,1.25vw,18.5px);color:#3a4760;max-width:430px;margin-bottom:26px;font-weight:400}

/* use-case pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#2c3550;padding:8px 14px;border-radius:var(--radius-pill);white-space:nowrap;transition:transform .12s ease, box-shadow .15s}
.pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.pill svg{width:15px;height:15px;flex:0 0 15px}
.p-sun{background:var(--sunshine)}.p-mint{background:var(--mint)}.p-sky{background:var(--sky)}.p-lav{background:var(--lavender)}.p-blush{background:var(--blush)}.p-peach{background:var(--peach)}

/* feature trio card */
.feature-card{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(6px);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:grid;grid-template-columns:1fr 1fr 1fr;margin-bottom:30px;overflow:hidden}
.feat{padding:20px 18px;position:relative}
.feat + .feat::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:#ECECF2}
.feat-ic{width:26px;height:26px;margin-bottom:11px}
.feat h3{font-size:15px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.feat p{font-size:13.3px;color:var(--slate);line-height:1.45}

/* hero CTA + platform */
.cta-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.platform{display:flex;align-items:center;gap:11px;color:var(--slate);font-size:14px;position:relative}
.platform .win{width:18px;height:18px;flex:0 0 18px}
.platform b{color:#37405a;font-weight:600}
.platform .doodle-ar{position:absolute;right:-6px;top:6px;width:40px;height:32px;opacity:.45}

/* ---- Preview stage ---- */
.stage{position:relative;min-height:560px}
.card{background:var(--white);border:1px solid #EEEAF5;border-radius:22px;box-shadow:var(--shadow-lg)}
.tab{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink);padding:7px 13px;border-radius:11px;position:absolute}
.tab svg{width:15px;height:15px}
.reading{position:relative;width:70%;margin-left:3%;z-index:20}
.reading .tab{background:var(--sunshine);top:-15px;left:18px;box-shadow:0 4px 10px rgba(246,197,19,.30)}
.reading-body{padding:30px 22px 22px;display:grid;grid-template-columns:1fr 30px 1.06fr;gap:6px;align-items:center}
.read-title{grid-column:1 / -1;font-size:14.5px;font-weight:700;margin-bottom:6px}
.scribble{font-size:11.5px;line-height:1.95;color:#C9CBD4;font-weight:500;letter-spacing:.3px;word-spacing:1.5px;user-select:none;text-decoration:line-through;text-decoration-color:#B0B2BE;text-decoration-thickness:1.4px;filter:blur(.4px)}
.arrow-mid{display:flex;align-items:center;justify-content:center;color:#9aa1b2}
.arrow-mid svg{width:22px;height:22px}
.clean{background:var(--cloud);border-radius:14px;padding:14px 15px}
.lbl{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:7px;margin-bottom:7px}
.lbl-sun{background:var(--sunshine)}.lbl-sky{background:var(--sky)}
.clean p.main{font-size:13.6px;font-weight:600;line-height:1.4;margin-bottom:14px}
.keys{list-style:none;display:flex;flex-direction:column;gap:8px}
.keys li{position:relative;padding-left:16px;font-size:12.7px;color:#303a52;line-height:1.35}
.keys li::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:var(--sunshine-deep)}
.writing{position:relative;width:66%;margin-top:30px;z-index:10}
.writing .tab{background:var(--lavender);top:-15px;left:18px;box-shadow:0 4px 10px rgba(124,107,214,.25)}
.writing-body{padding:30px 22px 24px}
.writing-body .nm{font-size:13px;font-weight:700;color:#2c3550;margin-bottom:10px}
.wgrid{display:grid;grid-template-columns:1fr 30px 1.05fr;gap:6px;align-items:center}
.dense{font-size:12.6px;line-height:1.5;color:#414b63;background:#FAFAFC;border:1px solid var(--line-soft);border-radius:13px;padding:12px 13px}
.bubbles{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.bub{font-size:13px;font-weight:600;padding:8px 13px;border-radius:14px;max-width:100%}
.bub.sky{background:var(--sky);border-bottom-right-radius:5px}
.bub.plain{background:#fff;border:1px solid #ECECF2;align-self:flex-start;border-bottom-left-radius:5px;font-weight:500;color:#26304a}

/* sweet spot panel */
.sweet{position:absolute;right:0;top:150px;width:228px;z-index:40;background:var(--white);border:1px solid #EEEAF5;border-radius:18px;box-shadow:var(--shadow-lg);padding:16px 16px 18px}
.sweet h4{font-size:14.5px;font-weight:700;margin-bottom:14px}
.sweet .field{margin-bottom:13px}
.sweet .flbl{font-size:11.5px;font-weight:600;color:var(--slate);margin-bottom:7px;display:block}
.seg{display:flex;gap:6px}
.seg button{flex:1;height:32px;border:1px solid #E8E8F0;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;color:#9097a8;transition:.14s}
.seg button svg{width:16px;height:16px}
.seg button.on{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.seg button:hover:not(.on){border-color:#CFCFE0}
.sweet input[type=range]{-webkit-appearance:none;width:100%;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--lav-deep) 0 35%,#E6E6EF 35%);outline:none}
.sweet input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--lav-deep);box-shadow:var(--shadow-sm);cursor:pointer}
.sweet input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--lav-deep);cursor:pointer}
.emph-dots{display:flex;gap:9px;margin-top:2px}
.emph-dots button{width:20px;height:20px;border-radius:50%;border:2px solid transparent;transition:.14s}
.emph-dots button.on{border-color:rgba(17,24,39,.55);transform:scale(1.08)}
.fmt{display:flex;align-items:center;gap:6px;margin-top:12px}
.fmt button{width:30px;height:30px;border-radius:8px;border:1px solid #EAEAF2;background:#fff;font-size:14px;color:#39425c;display:flex;align-items:center;justify-content:center}
.fmt button:hover{background:var(--cloud)}
.fmt .b{font-weight:800}.fmt .i{font-style:italic;font-weight:600}.fmt .u{text-decoration:underline;font-weight:600}
.fmt .more{font-size:11px;color:#9097a8;margin-left:2px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding-top:13px;border-top:1px solid var(--line-soft)}
.toggle-row span{font-size:12.4px;font-weight:600;color:#37405a}
.switch{width:38px;height:22px;border-radius:999px;background:var(--mint);position:relative;transition:.18s;flex:0 0 38px}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.18s}
.switch.off{background:#DDD}
.switch:not(.off)::after{left:18px}

/* doodles */
.doodle{position:absolute;pointer-events:none;z-index:5}
.d-spark{top:64px;right:-6px;width:50px;height:50px;color:var(--lav-deep);opacity:.55;z-index:30}
.d-path{bottom:18px;right:54px;width:150px;height:110px;color:#8a93ab;opacity:.5}
.d-scrib{bottom:60px;left:-6px;width:60px;height:50px;color:var(--lav-deep);opacity:.45}
.plane{position:absolute;bottom:62px;right:46px;width:34px;height:34px;color:var(--ink);z-index:8;animation:floaty 4.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-4deg)}}

/* entrance */
.rise{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}.d4{animation-delay:.34s}.d5{animation-delay:.44s}
@keyframes rise{to{opacity:1;transform:none}}

/* ============================================================
   LOWER SECTIONS (restyled to candy brand)
   These keep approved copy for now; we refine them section by
   section.
   ============================================================ */
.section{padding:var(--space-8) 0}
.surface-alt{background:#FBF8FF;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:var(--text-xs);color:var(--lav-deep);margin-bottom:var(--space-3);display:flex;align-items:center}
.eyebrow.center{justify-content:center}
.section h2{font-weight:800;font-size:var(--text-2xl);letter-spacing:var(--tracking-tight);max-width:24ch;margin-bottom:var(--space-4)}
.lede-block{font-size:var(--text-lg);color:var(--slate);max-width:var(--measure)}
.prose p{max-width:var(--measure);margin-bottom:var(--space-4)}

/* Problem section (Option D: show the wall + pull-quote) */
.problem .wall-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--space-6);align-items:center;margin-top:var(--space-5)}
.problem .wall{background:var(--white);border:1px solid var(--line-soft);border-radius:14px;padding:18px}
.problem .wall .lbl{font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9097a8;margin-bottom:8px}
.problem .wall .txt{font-size:11.5px;line-height:1.95;color:#C9CBD4;text-decoration:line-through;text-decoration-color:#B0B2BE;filter:blur(.3px);user-select:none}
.problem .friction{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.problem .friction span{font-weight:600;font-size:13.5px;padding:7px 13px;border-radius:var(--radius-pill)}
.problem .friction .f1{background:var(--peach);color:#633806}
.problem .friction .f2{background:var(--sky);color:#0C447C}
.problem .friction .f3{background:var(--lavender);color:#3C3489}
.problem .pquote{border-left:4px solid var(--sunshine);padding:8px 0 8px 20px;margin-top:var(--space-6)}
.problem .pquote .big{font-weight:800;font-size:var(--text-2xl);line-height:1.2;color:var(--ink);max-width:42ch;letter-spacing:-.01em}
.problem mark.sun{background:var(--hl-yellow);color:var(--ink);padding:0 6px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(max-width:760px){.problem .wall-grid{grid-template-columns:1fr}}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-6)}
.feature-block{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.feature-block .kicker{font-weight:800;font-size:16.5px;color:var(--lav-deep);letter-spacing:.04em}
.feature-block h3{font-size:var(--text-xl);font-weight:700;margin:var(--space-2) 0 var(--space-1)}
.feature-block .tagline{font-style:italic;color:var(--slate);margin-bottom:var(--space-3)}

/* How it works (Option 1 demo cards + Option 2 candy tags) */
.hiw-mini{display:grid;grid-template-columns:1fr 22px 1fr;gap:8px;align-items:center;margin:6px 0 16px}
.hiw-mini .dense{background:#FAFAFC;border:1px solid var(--line-soft);border-radius:10px;padding:10px;font-size:11px;line-height:1.7;color:#9aa1b2}
.hiw-mini .arrow{display:flex;justify-content:center;color:#9aa1b2}
.hiw-mini .arrow svg{width:18px;height:18px}
.hiw-mini .clean{background:var(--cloud);border-radius:10px;padding:10px}
.hiw-mini .clean .pt{font-size:12px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.hiw-mini .clean ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin:0;padding:0}
.hiw-mini .clean li{font-size:11px;color:#303a52;position:relative;padding-left:12px;line-height:1.3}
.hiw-mini .clean li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:2px;background:var(--lav-deep)}
.hiw-mini mark{background:var(--hl-yellow);color:var(--ink);padding:0 3px;border-radius:3px}
.hiw-mini .bubbles{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.hiw-mini .bub{font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:12px;max-width:100%}
.hiw-mini .bub.sky{background:var(--sky);border-bottom-right-radius:4px}
.hiw-mini .bub.plain{background:#fff;border:1px solid #ECECF2;align-self:flex-start;color:#26304a;font-weight:500;border-bottom-left-radius:4px}
.verbs{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.verbs span{font-weight:600;font-size:13px;padding:6px 12px;border-radius:var(--radius-pill)}
.verbs .v-sun{background:var(--sunshine);color:#633806}
.verbs .v-mint{background:var(--mint);color:#085041}
.verbs .v-sky{background:var(--sky);color:#0C447C}
.verbs .v-lav{background:var(--lavender);color:#3C3489}
.feature-block .verbs{margin-top:auto;padding-top:18px}
.feature-block.you .kicker,.feature-block.me .kicker{color:var(--slate)}
.feature-block.you h3{display:inline-block;background:var(--sunshine);color:var(--ink);padding:2px 11px;border-radius:9px}
.feature-block.me h3{display:inline-block;background:var(--lavender);color:var(--ink);padding:2px 11px;border-radius:9px}
.feature-block .card-body p{margin:0 0 11px;color:#3a4760;font-size:15px;line-height:1.55;max-width:48ch}
.feature-block .card-body p:last-child{margin-bottom:0}
.hiw-summary{display:flex;flex-direction:column;gap:10px;margin-top:var(--space-6);list-style:none;padding:0}
.hiw-summary li{font-size:var(--text-lg);position:relative;padding-left:24px;color:var(--ink)}
.hiw-summary li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:3px}
.hiw-summary li.you::before{background:var(--sunshine)}
.hiw-summary li.me::before{background:var(--lavender)}
.hiw-summary b{font-weight:800}
@media(max-width:760px){.hiw-mini{grid-template-columns:1fr}.hiw-mini .arrow{transform:rotate(90deg)}}

/* Who it's for (stacked rows, fixed half-width pills) */
.who-rows{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-6)}
.who-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px 24px;box-shadow:var(--shadow-sm)}
.who-tag{display:flex;align-items:center;justify-content:flex-start;text-align:left;width:360px;max-width:100%;font-weight:700;font-size:14.5px;padding:9px 16px;border-radius:var(--radius-pill);margin-bottom:13px}
.who-card p{font-size:15px;color:#3a4760;line-height:1.5;margin:0}
.who-tag.c-sun{background:var(--sunshine);color:#633806}
.who-tag.c-mint{background:var(--mint);color:#085041}
.who-tag.c-sky{background:var(--sky);color:#0C447C}
.who-tag.c-lav{background:var(--lavender);color:#3C3489}
.who-tag.c-blush{background:var(--blush);color:#72243E}
.who-closing{margin-top:var(--space-6);font-size:var(--text-lg);font-weight:700;color:var(--ink)}
.who-closing mark{background:var(--hl-yellow);color:var(--ink);padding:0 6px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Why different (Option 3: highlighted statements + quiet follow-up) */
.why3{display:flex;flex-direction:column;gap:var(--space-6);margin-top:var(--space-6)}
.why3 .stmt{display:inline-block;font-weight:800;font-size:22px;line-height:1.25;color:var(--ink);padding:3px 11px;border-radius:9px;margin-bottom:12px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.why3 .stmt.s-sun{background:var(--sunshine)}
.why3 .stmt.s-mint{background:var(--mint)}
.why3 .stmt.s-lav{background:var(--lavender)}
.why3 .detail p{font-size:16px;color:#4a5468;line-height:1.55;margin:0 0 8px}
.why3 .detail p:last-child{margin:0}
.why3 .detail ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.why3 .detail li{position:relative;padding-left:19px;font-size:16px;color:#4a5468;line-height:1.55}
.why3 .detail li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--lav-deep)}

.about-teaser{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-7);align-items:center}
.about-teaser .photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.about-teaser .photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;object-position:46% 50%}
.about-teaser figcaption{font-style:italic;color:var(--slate);font-size:var(--text-sm);margin-top:var(--space-2)}
.about-teaser h2{margin-bottom:var(--space-3)}
.about-teaser p{max-width:48ch;margin-bottom:var(--space-4)}

.pricing-head{text-align:center;max-width:40ch;margin:0 auto var(--space-6)}
/* Pricing v2 (small cost boxes + side-by-side comparison) */
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:660px;margin:var(--space-6) auto 0}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;text-align:center}
.pcard.feat{border:2px solid var(--ai-blue);background:#F6F5FE}
.pcard .nm{font-weight:800;font-size:18px}
.pcard .pr{font-weight:800;font-size:30px;margin:4px 0 0;line-height:1}
.pcard .pr small{font-size:13px;font-weight:500;color:var(--slate)}
.pcard .ds{font-size:13.5px;color:var(--slate);margin:8px 0 16px;min-height:36px}
.pcard .btn{width:100%;margin-top:auto}
.pcard .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--ai-blue);color:#fff;font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:var(--radius-pill);white-space:nowrap}
.cmp{max-width:820px;margin:var(--space-6) auto 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white);box-shadow:var(--shadow-sm)}
.cmp .r{display:grid;grid-template-columns:1.5fr 1fr 1fr}
.cmp .r > div{padding:13px 18px;font-size:14.5px;display:flex;align-items:center;gap:8px}
.cmp .r .free,.cmp .r .plus{justify-content:center;text-align:center}
.cmp .r .feat{color:var(--ink);font-weight:600}
.cmp .r .free{border-left:1px solid var(--line-soft);color:#3a4760}
.cmp .r .plus{border-left:1px solid var(--line);background:#F6F5FE}
.cmp .r:not(.head){border-top:1px solid var(--line-soft)}
.cmp .head{background:var(--cream);border-bottom:1px solid var(--line)}
.cmp .head > div{font-weight:800;font-size:15px;color:var(--ink)}
.cmp .head .plus{background:#E9E7FB}
.cmp .head .plus .tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--ai-blue);padding:2px 8px;border-radius:var(--radius-pill);margin-left:6px}
.cmp svg{width:19px;height:19px;flex:0 0 19px}
.cmp .dash{color:#c2c6d2;font-weight:700}
.cmp .gold{color:var(--ai-blue);font-weight:800}
.pnote{text-align:center;color:var(--slate);font-size:13px;margin-top:var(--space-4)}
@media(max-width:680px){.pcards{grid-template-columns:1fr}}
@media(max-width:560px){
  .cmp .r{grid-template-columns:1.3fr .85fr .85fr}
  .cmp .r > div{padding:10px 11px;font-size:13px}
  .cmp .head > div{font-size:13px}
  .cmp .head .plus .tag{display:none}
  .cmp svg{width:17px;height:17px;flex:0 0 17px}
}

/* FAQ (open cards with highlighted summary) */
.faq2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:var(--space-6)}
.faq-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-sm)}
.faq-card.wide{grid-column:1 / -1}
.faq-card .q{font-weight:800;font-size:16.5px;margin-bottom:10px;color:var(--ink)}
.faq-card .sum{display:inline-block;background:var(--hl-yellow);color:var(--ink);font-weight:700;font-size:14px;padding:2px 9px;border-radius:7px;margin-bottom:11px}
.faq-card .a p{font-size:14.5px;color:#3a4760;margin:0 0 6px;line-height:1.5}
.faq-card .a p:last-child{margin:0}
@media(max-width:760px){.faq2{grid-template-columns:1fr}}

.final-cta{text-align:center}
.final-cta .card-cta{background:linear-gradient(160deg,#F1ECFB,#FFF7FB);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6)}
.final-cta h2{color:var(--ink);font-size:var(--text-2xl);margin:0 auto var(--space-4);max-width:none;white-space:nowrap}
.final-cta p{color:#3a4760;max-width:44ch;margin:0 auto var(--space-5)}
.final-cta .fineprint{font-size:var(--text-sm);color:var(--slate);max-width:56ch;margin:var(--space-5) auto 0;font-style:italic}
.final-cta mark.sun{background:var(--hl-yellow);color:#111827;padding:0 7px;border-radius:7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media(max-width:720px){.final-cta h2{white-space:normal}}
@media(max-width:560px){.final-cta h2{font-size:var(--text-xl)}}

/* demo (interactive read-side, candy brand) */
.demo{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;margin-top:var(--space-6)}
.demo-head{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;padding:var(--space-5);border-bottom:1px solid var(--line);background:var(--cream)}
.demo-head .label{font-weight:800;font-size:var(--text-lg)}
.demo-head .badge{font-size:var(--text-xs);color:var(--mint-deep);background:rgba(52,169,138,.14);font-weight:700;padding:4px 10px;border-radius:var(--radius-pill)}
.demo-controls{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;padding:var(--space-4) var(--space-5);background:var(--cream);border-bottom:1px solid var(--line)}
.demo-controls .ctl{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--slate)}
.demo-controls .ctl b{font-weight:700;color:var(--ink)}
.demo-controls input[type=range]{accent-color:var(--lav-deep);width:120px}
.demo-controls .toggle{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-weight:700;font-size:var(--text-sm)}
.demo-panels{display:grid;grid-template-columns:1fr 1fr;gap:0}
.demo-panel{padding:var(--space-5)}
.demo-panel.before{border-right:1px solid var(--line);background:var(--white)}
.demo-panel .ptitle{font-weight:700;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--space-3)}
#demo-input{width:100%;min-height:230px;resize:vertical;border:1px dashed var(--line);border-radius:var(--radius-sm);padding:var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);line-height:1.5;color:#3a4760;background:transparent}
#demo-output h4{font-weight:800;font-size:var(--text-lg);margin-bottom:var(--space-3)}
#demo-output ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
#demo-output li{position:relative;padding-left:var(--space-5)}
#demo-output li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:3px;background:var(--lav-deep)}
#demo-output mark{background:var(--hl-yellow);color:var(--ink);padding:0 2px;border-radius:3px}
.demo-foot{padding:var(--space-5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;background:var(--cream)}
.demo-foot .note{font-size:var(--text-sm);color:var(--slate);max-width:46ch}

/* footer */
.site-footer{background:var(--logo-navy);color:#cfcfe6;padding:var(--space-7) 0}
.footer-grid{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start;justify-content:space-between}
.site-footer img{height:28px;margin-bottom:var(--space-3);background:#fff;padding:8px 13px;border-radius:10px;box-shadow:var(--shadow-sm)}
.site-footer .tagline{color:#9a9ab8;font-size:var(--text-sm);max-width:34ch}
.footer-links{display:flex;gap:var(--space-6);flex-wrap:wrap}
.footer-links a{color:#cfcfe6;font-weight:600;font-size:var(--text-sm)}
.footer-links a:hover{color:#fff}
.site-footer .legal{width:100%;margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid #2a2a44;font-size:var(--text-xs);color:#9a9ab8}

/* ============================================================
   ABOUT page
   ============================================================ */
.lite-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.lite-header .nav-inner{padding:14px 0}
.about-page .about-hero{padding-top:var(--space-7)}
.about-banner{width:100%;height:clamp(260px,46vh,480px);border-radius:var(--radius-lg);object-fit:cover;object-position:50% 95%;box-shadow:var(--shadow-md)}
.about-page figcaption{font-style:italic;color:var(--slate);font-size:var(--text-sm);margin-top:var(--space-3)}
.about-page h1{font-weight:800;font-size:clamp(30px,4vw,46px);letter-spacing:var(--tracking-tight);max-width:20ch;margin:var(--space-5) 0 var(--space-6)}
.founder-note{max-width:var(--measure)}
.founder-note p{margin-bottom:var(--space-4)}
.founder-note .sig{font-weight:800;font-size:var(--text-lg);margin-top:var(--space-6);margin-bottom:2px}
.founder-note .role{color:var(--slate);font-style:italic}
.earlybox{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--line)}
.earlybox h2{font-weight:800;font-size:var(--text-2xl);margin-bottom:var(--space-2)}
.earlybox .sub{color:var(--slate);font-style:italic;font-size:var(--text-sm);margin-bottom:var(--space-5)}
.qcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4)}
.qcard{background:var(--white);border:1px dashed var(--line);border-radius:var(--radius);padding:var(--space-5);color:var(--slate);font-style:italic}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:8px;padding-bottom:64px}
  .stage{margin-top:30px;min-height:auto}
  .reading,.writing{width:100%;margin:0 0 18px}
  .writing{margin-top:0}
  .sweet{position:relative;right:auto;top:auto;width:100%;max-width:320px}
  .lede{max-width:560px}
}
@media (max-width:860px){
  .nav-links,.signin{display:none}
  .nav-toggle{display:flex}
  .nav-spacer{margin-left:auto}
  .mobile-menu{display:none;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:10px;margin:6px 0 0}
  .mobile-menu.open{display:flex}
  .mobile-menu a{padding:11px 12px;border-radius:10px;font-weight:600;font-size:15px;color:#39425c}
  .mobile-menu a:hover{background:var(--cloud)}
  .two-col,.audience,.plans,.about-teaser{grid-template-columns:1fr}
  .demo-panels{grid-template-columns:1fr}
  .demo-panel.before{border-right:none;border-bottom:1px solid var(--line)}
  .about-teaser .photo{order:-1}
}
@media (max-width:560px){
  .wrap,.container{padding:0 18px}
  .feature-card{grid-template-columns:1fr}
  .feat + .feat::before{display:none}
  .feat{border-top:1px solid var(--line-soft)}
  .feat:first-child{border-top:none}
  .reading-body{grid-template-columns:1fr;gap:14px}
  .arrow-mid{transform:rotate(90deg)}
  .wgrid{grid-template-columns:1fr;gap:14px}
  .cta-row{gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .plane{animation:none}
  *{scroll-behavior:auto !important}
}

/* ---- Email signup (before the footer) ---- */
.signup{padding-top:0}
.signup-card{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:36px 40px;
}
.signup-card h2{margin:0 0 6px}
.signup-sub{color:var(--color-ink-soft);max-width:44ch}
.signup-row{display:flex;gap:10px;flex-wrap:wrap}
.signup-row input[type="email"]{
  flex:1;min-width:220px;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--ink);background:var(--cream);border:1.5px solid var(--line);
  border-radius:var(--radius-pill);padding:12px 18px;
}
.signup-row input[type="email"]:focus{outline:none;border-color:var(--sunshine-deep)}
.signup-consent{
  display:flex;gap:9px;align-items:flex-start;margin-top:12px;
  font-size:var(--text-sm);color:var(--color-ink-soft);cursor:pointer;
}
.signup-consent input{margin-top:3px;accent-color:var(--sunshine-deep)}
.signup-consent a{text-decoration:underline;text-underline-offset:2px}
.signup-msg{font-size:var(--text-sm);color:var(--color-ink-soft);min-height:20px;margin-top:10px}
.signup-msg.good{color:var(--mint-deep)}
@media (max-width:820px){
  .signup-card{grid-template-columns:1fr;gap:18px;padding:28px 22px}
}