:root{
  --teal:#1A6B52;--teal-d:#155742;--teal-bg:#EAF4EF;
  --green:#3DDC97;--green-bg:#EDFBF4;
  --navy:#133D2E;
  --coral:#D4654E;--coral-d:#B8503C;--coral-bg:#FBEDEA;
  --amber:#D4952F;--amber-bg:#FBF3E4;
  --cream:#FAFAF8;--cream-2:#F5F2EC;
  --grey:#6B6B65;--grey-l:#EEECEA;--grey-ll:#F7F5F0;
  --border:#E4E2DC;--charcoal:#1C1C1A;--white:#FFFFFF;
  --display:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --hand:'Caveat',cursive;
  --shadow-s:0 1px 3px rgba(19,61,46,.06);
  --shadow-m:0 8px 24px rgba(19,61,46,.08);
  --shadow-l:0 20px 60px rgba(19,61,46,.12);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--charcoal);line-height:1.6;overflow-x:hidden;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,250,248,.85);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s, background .3s}
.nav.scrolled{border-bottom-color:var(--border);background:rgba(250,250,248,.92)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1200px;margin:0 auto}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:22px;color:var(--navy);letter-spacing:-.02em}
.nav-logo-mark{width:34px;height:34px;flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-countdown{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:13px;color:var(--grey);font-weight:500}
.nav-countdown b{color:var(--navy);font-variant-numeric:tabular-nums;font-weight:700}
.nav-cta{font-family:var(--display);font-weight:600;font-size:14px;background:var(--teal);color:#fff;padding:10px 18px;border-radius:10px;transition:transform .2s, background .2s, box-shadow .2s;box-shadow:0 1px 3px rgba(26,107,82,.3)}
.nav-cta:hover{background:var(--teal-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,107,82,.35)}

.hero{position:relative;padding:130px 0 80px;overflow:hidden;background:radial-gradient(ellipse 80% 50% at 20% 0%,rgba(61,220,151,.12),transparent 60%),radial-gradient(ellipse 60% 40% at 90% 20%,rgba(212,101,78,.08),transparent 60%),var(--cream)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--teal-bg);color:var(--teal);font-family:var(--display);font-weight:600;font-size:13px;padding:7px 14px;border-radius:100px;margin-bottom:24px}
.hero-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(212,101,78,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(212,101,78,.55)}70%{box-shadow:0 0 0 10px rgba(212,101,78,0)}100%{box-shadow:0 0 0 0 rgba(212,101,78,0)}}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(42px,5.8vw,68px);line-height:1.02;letter-spacing:-.03em;color:var(--navy);margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--teal);position:relative;display:inline-block}
.hero h1 em::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:10px;background:var(--green);opacity:.35;border-radius:2px;z-index:-1}
.hero-sub{font-size:19px;color:var(--grey);line-height:1.5;margin-bottom:32px;max-width:520px}
.hero-sub b{color:var(--charcoal);font-weight:500}

.waitlist-form{display:flex;gap:8px;max-width:480px;margin-bottom:14px;background:var(--white);padding:6px;border-radius:14px;border:1.5px solid var(--border);box-shadow:var(--shadow-s);transition:border-color .2s, box-shadow .2s}
.waitlist-form:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(26,107,82,.1)}
.waitlist-form input{flex:1;border:none;outline:none;background:transparent;font-family:var(--body);font-size:16px;padding:10px 14px;color:var(--charcoal)}
.waitlist-form input::placeholder{color:var(--grey)}
.waitlist-form button{font-family:var(--display);font-weight:600;font-size:15px;background:var(--teal);color:#fff;padding:12px 22px;border-radius:10px;transition:background .2s, transform .1s;white-space:nowrap}
.waitlist-form button:hover{background:var(--teal-d)}
.waitlist-form button:active{transform:scale(.98)}

.form-sub{font-size:13.5px;color:var(--grey);margin-bottom:22px}
.form-sub b{color:var(--coral-d);font-weight:600;font-family:var(--display)}

.hero-perk{font-size:14px;color:var(--grey);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-perk-item{display:inline-flex;align-items:center;gap:6px}
.hero-perk-item svg{width:14px;height:14px;color:var(--teal);flex-shrink:0}
.hero-perk-sep{color:var(--border);margin:0 4px}

.hero-proof{margin-top:32px;display:flex;align-items:center;gap:16px;padding:14px 18px;background:var(--white);border-radius:14px;border:1px solid var(--border);max-width:500px;box-shadow:var(--shadow-s)}
.flag-stack{display:flex;flex-direction:row}
.flag{width:32px;height:32px;border-radius:50%;border:2.5px solid var(--white);margin-left:-8px;flex-shrink:0;font-size:18px;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.08);background:var(--cream)}
.flag:first-child{margin-left:0}
.hero-proof-text{font-size:13.5px;color:var(--grey);line-height:1.4}
.hero-proof-text b{color:var(--navy);font-weight:600;font-family:var(--display)}

.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:760px}

/* PHONE — taller now to fit the rich screen */
.phone-mock{position:relative;width:330px;height:720px;background:#0a0a0a;border-radius:48px;padding:10px;box-shadow:0 0 0 2px #1a1a1a,0 40px 80px -20px rgba(19,61,46,.35),0 20px 40px -10px rgba(19,61,46,.2);transform:rotate(-3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.phone-mock:hover{transform:rotate(-1deg) translateY(-4px)}
.phone-mock::before{content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);width:100px;height:26px;background:#0a0a0a;border-radius:20px;z-index:10}
.phone-screen{width:100%;height:100%;background:var(--cream);border-radius:38px;overflow:hidden;position:relative;display:flex;flex-direction:column}

/* Status bar top — time on left, signal/battery on right */
.phone-statusbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 4px;font-size:13px;font-weight:600;color:var(--navy);font-family:var(--display);flex-shrink:0}

/* Scrollable content region */
.phone-content{padding:30px 16px 64px;flex:1;overflow:hidden;position:relative}

/* App header row (Setlyr logo + cog) */
.ap-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ap-brand{display:flex;align-items:center;gap:5px}
.ap-brand-logo{width:18px;height:18px}
.ap-brand-name{font-family:var(--display);font-weight:700;font-size:13px;color:var(--navy);letter-spacing:-.01em}
.ap-cog{width:22px;height:22px;border-radius:50%;background:var(--grey-l);display:grid;place-items:center;color:var(--grey);font-size:12px}

.ap-greet{font-family:var(--display);font-weight:700;font-size:20px;color:var(--navy);margin-bottom:2px;letter-spacing:-.01em}
.ap-greet-emoji{font-size:18px}
.ap-sub{font-size:11.5px;color:var(--grey);margin-bottom:10px}

.ap-search{display:flex;align-items:center;gap:7px;background:var(--white);border:1.5px solid var(--border);border-radius:9px;padding:8px 10px;margin-bottom:10px;font-size:11px;color:var(--grey)}
.ap-search svg{width:12px;height:12px;color:var(--grey);flex-shrink:0}

/* Personalisation prompt banner */
.ap-banner{display:flex;align-items:flex-start;gap:8px;background:var(--amber-bg);border:1px solid #F0D89A;border-radius:10px;padding:9px 11px;margin-bottom:10px;position:relative}
.ap-banner-bell{font-size:14px;flex-shrink:0;line-height:1.2}
.ap-banner-text{flex:1;font-size:10.5px;line-height:1.4;color:var(--charcoal)}
.ap-banner-text b{color:var(--navy);font-family:var(--display);font-weight:600;display:block;margin-bottom:1px}
.ap-banner-link{color:var(--coral-d);font-family:var(--display);font-weight:600;font-size:9.5px;margin-top:3px;display:block}
.ap-banner-x{color:var(--grey);font-size:11px;line-height:1;flex-shrink:0;padding:1px}

/* My Plan card */
.ap-jcard{background:linear-gradient(135deg,#133D2E 0%,#1A6B52 100%);border-radius:11px;padding:11px 12px;color:#fff;margin-bottom:10px;position:relative;overflow:hidden}
.ap-jcard::after{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.05)}
.ap-jcard-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ap-jcard-l{font-family:var(--display);font-size:8px;text-transform:uppercase;letter-spacing:1.2px;opacity:.55;font-weight:500;margin-bottom:3px}
.ap-jcard-title{font-family:var(--display);font-size:13px;font-weight:600;margin-bottom:3px;line-height:1.2}
.ap-jcard-meta{font-size:9.5px;opacity:.7;line-height:1.35}
.ap-jcard-pct{background:rgba(255,255,255,.12);border-radius:8px;padding:5px 8px;text-align:center;flex-shrink:0;min-width:48px}
.ap-jcard-pct-n{font-family:var(--display);font-weight:700;font-size:14px;line-height:1}
.ap-jcard-pct-l{font-size:7.5px;opacity:.7;letter-spacing:.5px;text-transform:uppercase;font-family:var(--display);margin-top:2px}
.ap-jcard-bar{height:3px;background:rgba(255,255,255,.15);border-radius:2px;margin-top:8px;overflow:hidden}
.ap-jcard-bar-f{height:100%;width:35%;background:var(--green);border-radius:2px}
.ap-jcard-meta2{display:flex;justify-content:space-between;font-size:8.5px;opacity:.7;margin-top:5px;font-family:var(--display)}
.ap-jcard-cta{font-family:var(--display);font-weight:600;font-size:11px;color:var(--green);margin-top:6px;display:flex;align-items:center;gap:4px}

/* Live counter strip */
.ap-live{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:7px 10px;font-size:9.5px;color:var(--grey);line-height:1.4;display:flex;align-items:center;gap:6px;margin-bottom:10px}
.ap-live b{color:var(--navy);font-family:var(--display);font-weight:600}

/* Section headings */
.ap-section-h{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 6px}
.ap-section-h h5{font-family:var(--display);font-size:11.5px;font-weight:700;color:var(--navy);letter-spacing:-.005em}
.ap-section-h-link{font-family:var(--display);font-size:9px;color:var(--teal);font-weight:600}

/* Pick up cards */
.ap-pickup{display:flex;gap:6px;margin-bottom:6px}
.ap-pickup-c{flex:1;background:var(--white);border:1px solid var(--border);border-radius:9px;padding:8px 9px;min-width:0}
.ap-pickup-i{width:22px;height:22px;border-radius:6px;background:var(--cream-2);display:grid;place-items:center;font-size:11px;margin-bottom:5px}
.ap-pickup-t{font-family:var(--display);font-size:10px;font-weight:600;color:var(--navy);line-height:1.2;margin-bottom:1px}
.ap-pickup-m{font-size:8px;color:var(--grey)}
.ap-pickup-bar{height:2px;background:var(--grey-l);border-radius:1px;margin-top:5px;overflow:hidden}
.ap-pickup-bar-f{height:100%;background:var(--teal);border-radius:1px}

/* Processes */
.ap-proc{display:flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--border);border-radius:9px;padding:7px 9px;margin-bottom:5px}
.ap-proc-i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:11px;flex-shrink:0}
.ap-proc-i.teal{background:var(--teal-bg)}
.ap-proc-i.coral{background:var(--coral-bg)}
.ap-proc-i.green{background:var(--green-bg)}
.ap-proc-i.amber{background:var(--amber-bg)}
.ap-proc-body{flex:1;min-width:0}
.ap-proc-t{font-family:var(--display);font-size:9.5px;font-weight:600;color:var(--navy);line-height:1.2;margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-proc-m{font-size:8px;color:var(--grey);line-height:1.2}
.ap-proc-pct{font-family:var(--display);font-size:10px;font-weight:700;color:var(--teal);flex-shrink:0;border:1.5px solid var(--teal-bg);border-radius:50%;width:28px;height:28px;display:grid;place-items:center}

/* Recommended cards (image cards with bookmark) */
.ap-rec-row{display:flex;gap:5px;margin-bottom:5px;overflow:hidden}
.ap-rec-c{flex:1;border-radius:8px;padding:6px;color:#fff;position:relative;overflow:hidden;min-height:62px;display:flex;flex-direction:column;justify-content:flex-end}
.ap-rec-c.teal{background:linear-gradient(180deg,#2F8868,#155742)}
.ap-rec-c.coral{background:linear-gradient(180deg,#D4654E,#8E3F2F)}
.ap-rec-c.amber{background:linear-gradient(180deg,#D4952F,#996820)}
.ap-rec-bm{position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;font-size:8px;color:var(--navy)}
.ap-rec-t{font-family:var(--display);font-size:8.5px;font-weight:700;line-height:1.15;margin-bottom:2px}
.ap-rec-m{font-size:7px;opacity:.85}
.ap-rec-cat{font-size:8px;color:var(--grey);font-family:var(--display);font-weight:600;letter-spacing:.02em;margin-bottom:4px}

/* Browse by category */
.ap-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:6px}
.ap-cat{display:flex;flex-direction:column;align-items:center;gap:3px}
.ap-cat-i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--white);border:1.5px solid var(--border)}
.ap-cat.teal .ap-cat-i{background:var(--teal-bg)}
.ap-cat.coral .ap-cat-i{background:var(--coral-bg)}
.ap-cat.amber .ap-cat-i{background:var(--amber-bg)}
.ap-cat.green .ap-cat-i{background:var(--green-bg)}
.ap-cat-l{font-size:7.5px;color:var(--charcoal);font-weight:500;text-align:center;font-family:var(--display)}

/* Cost planner banner */
.ap-cp{background:linear-gradient(135deg,#133D2E,#1A6B52);border-radius:10px;padding:9px 11px;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.ap-cp-i{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:14px;flex-shrink:0}
.ap-cp-body{flex:1;min-width:0}
.ap-cp-t{font-family:var(--display);font-size:10.5px;font-weight:700;line-height:1.2}
.ap-cp-m{font-size:8.5px;opacity:.75;margin-top:1px;line-height:1.3}

/* Bottom tab bar */
.ap-tabbar{position:absolute;left:0;right:0;bottom:0;background:rgba(250,250,248,.96);backdrop-filter:blur(8px);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);padding:6px 0 8px}
.ap-tab{display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--display);font-size:7.5px;color:var(--grey);font-weight:500}
.ap-tab.active{color:var(--teal)}
.ap-tab-i{font-size:13px;line-height:1;margin-bottom:1px}

/* Floating badge — single, only one now to keep it clean */
.float-badge{position:absolute;background:var(--white);border-radius:18px;padding:16px 22px;box-shadow:var(--shadow-l);font-family:var(--display);animation:float 6s ease-in-out infinite;max-width:260px}
.float-badge.b1{top:4%;left:-22%;animation-delay:0s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fb-title{font-size:12px;color:var(--grey);font-weight:600;margin-bottom:6px;font-family:var(--body);text-transform:uppercase;letter-spacing:.08em}
.fb-value{font-size:18px;font-weight:700;color:var(--navy);line-height:1.25;letter-spacing:-.01em}
.fb-value em{font-style:normal;color:var(--teal)}

section{padding:96px 0;position:relative}
.section-eyebrow{font-family:var(--display);font-weight:600;font-size:13px;color:var(--teal);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:16px;display:block}
.section-title{font-family:var(--display);font-weight:700;font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin-bottom:20px}
.section-title em{font-style:normal;color:var(--teal)}
.section-sub{font-size:19px;color:var(--grey);max-width:640px;line-height:1.55}

/* PAIN — STRIKETHROUGH FIX: bold scribble effect with double-stroke + slight rotation */
.pain{background:var(--cream-2);padding:96px 0;overflow:hidden;position:relative}
.pain-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.pain-copy h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4vw,48px);line-height:1.15;letter-spacing:-.02em;color:var(--navy);margin-bottom:20px}
.pain-copy h2 em{font-style:normal;color:var(--teal)}

/* Hand-drawn-style strikethrough using SVG underline pattern */
.scribble{position:relative;display:inline-block;color:var(--grey)}
.scribble::after{
  content:'';position:absolute;left:-3%;right:-3%;top:48%;height:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 4 Q 50 0 100 4 T 198 4' stroke='%23D4654E' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 5 Q 50 1 100 5 T 198 5' stroke='%23D4654E' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% 100%;
  transform:rotate(-1deg);pointer-events:none;
}

.pain-copy > p{font-size:17.5px;color:var(--grey);line-height:1.6;margin-bottom:14px}
.pain-copy > p.lead{font-size:19px;color:var(--charcoal);font-weight:500}

.quote-strip{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.quote-mini{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;background:var(--white);border-radius:14px;border:1px solid var(--border);font-size:15px;line-height:1.45;color:var(--charcoal);box-shadow:var(--shadow-s)}
.quote-mini-flag{font-size:22px;flex-shrink:0;line-height:1}
.quote-mini-text{flex:1}
.quote-mini-text .q-from{font-size:12px;color:var(--grey);font-family:var(--display);font-weight:500;margin-top:4px}

.pain-visual{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center}
.tab-card{position:absolute;background:var(--white);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-m);display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--charcoal);max-width:260px;font-family:var(--body);border:1px solid var(--border)}
.tab-card.crossed::before{
  content:'';position:absolute;top:50%;left:8px;right:8px;height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3 Q 50 0 100 3 T 198 3' stroke='%23D4654E' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .5s .2s cubic-bezier(.2,.8,.2,1);
  transform:rotate(-1deg);
}
.tab-card.crossed.strike::before{background-size:100% 100%}
.tab-card .tc-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:var(--grey-l);font-size:14px}
.tab-card .tc-text{line-height:1.35;font-size:13px}
.tab-card.t1{top:2%;left:6%;transform:rotate(-4deg)}
.tab-card.t2{top:18%;right:0;transform:rotate(3deg)}
.tab-card.t3{top:42%;left:0;transform:rotate(-2deg)}
.tab-card.t4{top:58%;right:8%;transform:rotate(4deg)}
.tab-card.t5{bottom:8%;left:12%;transform:rotate(-3deg)}
.tab-card.t6{bottom:0;right:2%;transform:rotate(2deg)}

.pain-arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;opacity:0;transition:opacity .5s .8s;font-family:var(--display);font-weight:700;font-size:16px;color:var(--coral);background:var(--white);border-radius:100px;padding:10px 22px;box-shadow:var(--shadow-m);white-space:nowrap;border:2px solid var(--coral)}
.pain.in-view .pain-arrow{opacity:1}

/* INSIDE — now has a topic-page screenshot in intro */
.inside{background:var(--cream)}
.inside-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.inside-intro-copy{max-width:540px}

/* Mini topic-page screenshot (used in intro) */
.mini-phone{position:relative;width:280px;height:560px;margin:0 auto;background:#0a0a0a;border-radius:38px;padding:8px;box-shadow:0 0 0 2px #1a1a1a,0 30px 60px -20px rgba(19,61,46,.3);transform:rotate(2deg)}
.mini-phone::before{content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%);width:80px;height:22px;background:#0a0a0a;border-radius:18px;z-index:10}
.mini-phone .phone-screen{border-radius:30px;background:var(--cream)}
.mini-phone .phone-statusbar{padding:12px 20px 4px;font-size:11px}
.mini-phone .phone-content{padding:30px 14px 0;flex:1;overflow:hidden}

.tp-breadcrumb{font-size:9px;color:var(--grey);text-transform:uppercase;letter-spacing:.8px;font-family:var(--display);font-weight:500;margin-bottom:5px}
.tp-breadcrumb b{color:var(--teal)}
.tp-title{font-family:var(--display);font-weight:700;font-size:16px;color:var(--navy);line-height:1.2;letter-spacing:-.01em;margin-bottom:4px}
.tp-meta{font-size:9.5px;color:var(--grey);margin-bottom:11px;display:flex;gap:8px;align-items:center}
.tp-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--grey)}
.tp-intro{font-size:10.5px;line-height:1.55;color:var(--charcoal);margin-bottom:10px}
.tp-intro b{color:var(--teal);cursor:pointer;border-bottom:1.5px dotted var(--teal);font-weight:500}
.tp-sub{font-family:var(--display);font-weight:700;font-size:11.5px;color:var(--navy);margin:4px 0 5px;line-height:1.25}
.tp-para{font-size:10px;line-height:1.55;color:var(--charcoal);margin-bottom:8px}
.tp-card{border-radius:10px;padding:9px 10px;margin:8px 0}
.tp-card.tll{background:var(--amber-bg);border-left:3px solid var(--amber)}
.tp-card.pro{background:var(--coral-bg);border-left:3px solid var(--coral)}
.tp-card-tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.tp-card.tll .tp-card-tag{color:var(--amber)}
.tp-card.pro .tp-card-tag{color:var(--coral-d)}
.tp-card-text{font-size:9.5px;line-height:1.5;color:var(--charcoal)}
.tp-card-text b{color:var(--navy);font-family:var(--display);font-weight:600}

/* Feature rows */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:80px}
.feature-row.reverse{grid-template-columns:1fr 1fr;direction:rtl}
.feature-row.reverse > *{direction:ltr}
.feature-content h3{font-family:var(--display);font-weight:700;font-size:32px;line-height:1.15;letter-spacing:-.02em;color:var(--navy);margin-bottom:14px}
.feature-content h3 em{font-style:normal;color:var(--teal)}
.feature-content p{font-size:17px;color:var(--grey);line-height:1.6;margin-bottom:16px}
.feature-bullets{list-style:none;margin-top:18px}
.feature-bullets li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:15.5px;color:var(--charcoal)}
.feature-bullets li svg{width:20px;height:20px;color:var(--teal);flex-shrink:0;margin-top:2px}
.feature-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:12px;font-weight:600;background:var(--teal-bg);color:var(--teal);padding:6px 12px;border-radius:100px;margin-bottom:16px;letter-spacing:.02em}

/* Seven stages timeline — NEW: visual cards instead of inline text */
.stages-timeline{margin-top:28px;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;position:relative}
.stages-timeline::before{
  content:'';position:absolute;top:14px;left:14px;right:14px;height:2px;
  background:linear-gradient(90deg,var(--green) 0%, var(--teal) 100%);
  border-radius:2px;z-index:0;
}
.stage-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.stage-dot{width:28px;height:28px;border-radius:50%;background:var(--white);border:2.5px solid var(--teal);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:11px;color:var(--teal);margin-bottom:8px;box-shadow:var(--shadow-s)}
.stage-label{font-family:var(--display);font-weight:600;font-size:11px;color:var(--navy);line-height:1.2;letter-spacing:-.005em}
.stage-desc{font-size:10px;color:var(--grey);line-height:1.3;margin-top:3px}

.stages-context{margin-top:20px;padding:18px 22px;background:var(--teal-bg);border-radius:14px;border-left:3px solid var(--teal);font-size:14.5px;color:var(--charcoal);line-height:1.55}
.stages-context b{color:var(--navy);font-family:var(--display);font-weight:600}

.phone-inline{position:relative;width:290px;height:600px;margin:0 auto;background:#0a0a0a;border-radius:42px;padding:9px;box-shadow:0 0 0 2px #1a1a1a,0 30px 60px -20px rgba(19,61,46,.3)}
.phone-inline::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);width:92px;height:24px;background:#0a0a0a;border-radius:20px;z-index:10}
.phone-inline .phone-screen{border-radius:34px;display:flex;flex-direction:column}
.phone-inline .phone-content{padding:30px 14px 0;flex:1;overflow:hidden}

.jp-head{font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy);margin-bottom:3px}
.jp-sub{font-size:10.5px;color:var(--grey);margin-bottom:11px}
.jp-stage-tabs{display:flex;gap:4px;margin-bottom:11px;overflow-x:auto;scrollbar-width:none}
.jp-stage-tabs::-webkit-scrollbar{display:none}
.jp-tab{background:var(--white);border:1.5px solid var(--border);padding:4px 9px;border-radius:100px;font-size:9px;font-weight:500;color:var(--grey);white-space:nowrap;font-family:var(--display);flex-shrink:0}
.jp-tab.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.jp-step{background:var(--white);border:1px solid var(--border);border-radius:11px;padding:10px;margin-bottom:6px;display:flex;gap:9px;align-items:flex-start}
.jp-step-check{width:18px;height:18px;border-radius:50%;border:1.8px solid var(--border);flex-shrink:0;display:grid;place-items:center;font-size:10px}
.jp-step.done .jp-step-check{background:var(--teal);border-color:var(--teal);color:#fff}
.jp-step.active .jp-step-check{border-color:var(--teal);border-width:2px}
.jp-step-body{flex:1;min-width:0}
.jp-step-title{font-family:var(--display);font-size:11px;font-weight:600;color:var(--navy);margin-bottom:1px}
.jp-step-meta{font-size:9px;color:var(--grey)}
.jp-step.done .jp-step-title{text-decoration:line-through;color:var(--grey);text-decoration-thickness:1px}

.pp-head{font-family:var(--display);font-weight:700;font-size:14px;color:var(--navy);margin-bottom:9px}
.pp-card{background:var(--white);border:1px solid var(--border);border-radius:11px;padding:10px;margin-bottom:6px;display:flex;gap:9px;align-items:center}
.pp-card-i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.pp-card-i.teal{background:var(--teal-bg)}
.pp-card-i.coral{background:var(--coral-bg)}
.pp-card-i.green{background:var(--green-bg)}
.pp-card-i.amber{background:var(--amber-bg)}
.pp-card-body{flex:1;min-width:0}
.pp-card-t{font-family:var(--display);font-size:11px;font-weight:600;color:var(--navy);margin-bottom:1px}
.pp-card-meta{font-size:9px;color:var(--grey)}
.pp-card-meta b{color:var(--teal);font-weight:600}
.pp-card-arr{color:var(--grey);font-size:15px}

.ai-msg{background:var(--white);padding:9px 11px;border-radius:13px;max-width:82%;font-size:11px;line-height:1.5;color:var(--charcoal);margin-bottom:6px;border:1px solid var(--border)}
.ai-msg.user{background:var(--teal);color:#fff;margin-left:auto;border-color:var(--teal);border-bottom-right-radius:4px}
.ai-msg.bot{border-bottom-left-radius:4px}
.ai-avatar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ai-avatar-i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#3DDC97,#1A6B52);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:10px;flex-shrink:0}
.ai-avatar-n{font-family:var(--display);font-weight:600;font-size:11px;color:var(--navy)}
.ai-avatar-s{font-size:9px;color:var(--green);font-weight:500}

/* === RICH PROCESS DETAIL VIEW (in-phone) === */
.pd-back{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--grey);font-family:var(--display);font-weight:500;margin-bottom:8px}
.pd-back-arr{font-size:14px}
.pd-bm{margin-left:auto;display:flex;gap:6px}
.pd-bm-btn{width:18px;height:18px;border-radius:5px;border:1.2px solid var(--border);display:grid;place-items:center;font-size:10px;color:var(--grey)}
.pd-title{font-family:var(--display);font-weight:700;font-size:14px;color:var(--navy);line-height:1.15;letter-spacing:-.01em;margin-bottom:1px}
.pd-subtitle{font-size:10px;color:var(--grey);margin-bottom:6px;line-height:1.3}
.pd-stat{font-size:9.5px;color:var(--teal);font-family:var(--display);font-weight:600;margin-bottom:6px}
.pd-meta-row{display:flex;gap:10px;font-size:9px;color:var(--charcoal);margin-bottom:8px;font-family:var(--display)}
.pd-meta-row b{font-weight:700;color:var(--navy)}
.pd-progress{height:3px;background:var(--grey-l);border-radius:2px;margin-bottom:9px;overflow:hidden}
.pd-progress-f{height:100%;width:20%;background:var(--teal);border-radius:2px}
.pd-pin{background:var(--green-bg);border:1.5px dashed var(--teal);border-radius:9px;padding:8px 10px;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.pd-pin-icon{font-size:13px;flex-shrink:0}
.pd-pin-body{flex:1;min-width:0}
.pd-pin-t{font-family:var(--display);font-weight:700;font-size:10.5px;color:var(--teal);line-height:1.2;margin-bottom:1px}
.pd-pin-m{font-size:8.5px;color:var(--grey);line-height:1.3}
.pd-step{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:9px 10px;margin-bottom:5px;display:flex;gap:8px;align-items:flex-start}
.pd-step.done{background:var(--green-bg);border-color:#C5E8D5}
.pd-step-check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);flex-shrink:0;display:grid;place-items:center;font-size:9px;background:var(--white)}
.pd-step.done .pd-step-check{background:var(--teal);border-color:var(--teal);color:#fff}
.pd-step-body{flex:1;min-width:0}
.pd-step-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:2px}
.pd-step-t{font-family:var(--display);font-weight:700;font-size:10.5px;color:var(--navy);line-height:1.2}
.pd-step.done .pd-step-t{text-decoration:line-through;color:var(--grey)}
.pd-step-time{font-size:8.5px;color:var(--grey);font-family:var(--display);font-weight:500;flex-shrink:0;white-space:nowrap}
.pd-step-d{font-size:9px;color:var(--charcoal);line-height:1.4;margin-bottom:3px}
.pd-step-d a{color:var(--teal);text-decoration:underline;font-weight:500}
.pd-step-checks{font-size:8.5px;color:var(--charcoal);line-height:1.4;display:flex;flex-wrap:wrap;gap:5px}
.pd-step-checks span{display:inline-flex;align-items:center;gap:2px}
.pd-step-completed{font-size:9px;color:var(--teal);font-family:var(--display);font-weight:700;margin-top:3px;display:flex;align-items:center;gap:3px}

/* === RICH COST PLANNER VIEW (in-phone) === */
.cp-back{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cp-back-btn{width:22px;height:22px;border-radius:5px;border:1.2px solid var(--border);display:grid;place-items:center;font-size:11px;color:var(--charcoal);background:var(--white)}
.cp-title{font-family:var(--display);font-weight:700;font-size:13px;color:var(--navy);flex:1}
.cp-reset{font-size:9.5px;color:var(--charcoal);font-family:var(--display);font-weight:500;border:1.2px solid var(--border);border-radius:6px;padding:3px 8px;background:var(--white)}
.cp-summary-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.cp-summary-l{font-family:var(--display);font-weight:700;font-size:10.5px;color:var(--navy)}
.cp-summary-pct{font-family:var(--display);font-weight:700;font-size:10px;color:var(--teal)}
.cp-summary-bar{height:3px;background:var(--grey-l);border-radius:2px;margin-bottom:4px;overflow:hidden}
.cp-summary-bar-f{height:100%;width:100%;background:var(--teal);border-radius:2px}
.cp-summary-sub{font-size:9px;color:var(--grey);margin-bottom:8px}
.cp-divider{height:1px;background:var(--border);margin-bottom:8px}
.cp-view{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;color:var(--grey);margin-bottom:9px}
.cp-view-toggle{display:flex;gap:3px}
.cp-view-toggle button{font-family:var(--display);font-weight:600;font-size:9px;padding:4px 9px;border-radius:6px;border:1px solid var(--border);background:var(--white);color:var(--charcoal)}
.cp-view-toggle button.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.cp-pay-card{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:9px;margin-bottom:8px}
.cp-pay-h{font-family:var(--display);font-weight:700;font-size:10.5px;color:var(--navy);margin-bottom:5px}
.cp-pay-row{display:flex;justify-content:space-between;align-items:center;padding:4px 7px;border-radius:5px;font-size:9px;margin-bottom:2px;background:var(--green-bg)}
.cp-pay-row.minus{background:var(--coral-bg)}
.cp-pay-row.takehome{background:var(--green-bg);font-weight:600}
.cp-pay-row b{font-family:var(--display);font-weight:700}
.cp-pay-row .cp-pay-amt{color:var(--teal)}
.cp-pay-row.minus .cp-pay-amt{color:var(--coral-d)}
.cp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:9px}
.cp-tile{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:6px 5px;text-align:left}
.cp-tile-l{font-size:7.5px;color:var(--grey);font-family:var(--display);line-height:1.2;margin-bottom:2px}
.cp-tile-n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--teal);line-height:1;letter-spacing:-.01em}
.cp-tile.outgoings .cp-tile-n{color:var(--coral-d)}
.cp-section-h{font-family:var(--display);font-weight:700;font-size:10.5px;color:var(--navy);margin-bottom:6px}
.cp-switches{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:9px}
.cp-switch{background:var(--white);border:1px solid var(--border);border-radius:7px;padding:5px 7px;text-align:left}
.cp-switch.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cp-switch-t{font-family:var(--display);font-weight:700;font-size:9px;line-height:1.15}
.cp-switch-m{font-size:7.5px;color:var(--grey);line-height:1.2;margin-top:1px}
.cp-switch.on .cp-switch-m{color:rgba(255,255,255,.65)}
.cp-bd-h{font-family:var(--display);font-weight:700;font-size:10.5px;color:var(--navy);margin-bottom:4px}
.cp-bd-row{display:flex;justify-content:space-between;align-items:center;background:var(--white);border:1px solid var(--border);border-radius:8px;padding:7px 9px;margin-bottom:3px;font-size:9.5px}
.cp-bd-row-t{font-family:var(--display);font-weight:600;color:var(--navy)}
.cp-bd-row-amt{font-family:var(--display);font-weight:700;color:var(--coral-d);flex:1;text-align:right;margin-right:8px}
.cp-bd-row-arr{color:var(--grey);font-size:9px}
.cp-up-row{display:flex;justify-content:space-between;align-items:center;background:var(--cream-2);border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:9.5px;margin-top:6px}
.cp-up-t{font-family:var(--display);font-weight:600;color:var(--navy)}
.cp-up-amt{font-family:var(--display);font-weight:700;color:var(--coral-d)}
.cp-step-bar{position:absolute;left:0;right:0;bottom:0;background:var(--white);border-top:1px solid var(--border);padding:7px 11px;display:flex;justify-content:space-between;align-items:center;font-family:var(--display)}
.cp-step-back-btn{font-family:var(--display);font-weight:600;font-size:10px;color:var(--charcoal);border:1px solid var(--border);border-radius:6px;padding:4px 10px;background:var(--white)}
.cp-step-l{font-size:9.5px;color:var(--grey);font-weight:500}
.cp-step-done-btn{font-family:var(--display);font-weight:600;font-size:10px;color:#fff;background:var(--teal);border-radius:6px;padding:4px 12px}

/* === IMPARTIALITY / TRUST CALLOUT === */
.trust-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1.5px solid var(--teal-bg);
  border-radius:100px;padding:7px 14px 7px 10px;
  margin-top:18px;
  font-family:var(--display);font-size:13px;color:var(--navy);font-weight:600;
}
.trust-badge svg{width:16px;height:16px;color:var(--teal);flex-shrink:0}
.trust-badge b{color:var(--teal);font-weight:700}

.values-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:760px;margin:36px auto 0;
}
.value-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:18px 18px;
  text-align:left;backdrop-filter:blur(8px);
}
.value-card-i{
  width:32px;height:32px;border-radius:8px;
  background:rgba(61,220,151,.12);
  color:var(--green);
  display:grid;place-items:center;margin-bottom:10px;
}
.value-card-i svg{width:18px;height:18px}
.value-card-t{font-family:var(--display);font-weight:700;font-size:14px;color:#fff;margin-bottom:4px;letter-spacing:-.01em}
.value-card-d{font-size:13px;color:rgba(255,255,255,.7);line-height:1.4}

/* ALSO INSIDE */
.also-section{background:var(--cream-2)}
.also-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:48px}
.also-card{background:var(--white);border-radius:20px;padding:32px;border:1px solid var(--border);display:flex;gap:24px;align-items:center;transition:transform .25s, box-shadow .25s}
.also-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.also-card-copy{flex:1;min-width:0}
.also-tag{display:inline-flex;font-family:var(--display);font-size:11px;font-weight:600;padding:5px 10px;border-radius:100px;margin-bottom:10px;letter-spacing:.02em}
.also-tag.amber{background:var(--amber-bg);color:var(--amber)}
.also-tag.green{background:var(--green-bg);color:var(--teal)}
.also-card h4{font-family:var(--display);font-weight:700;font-size:20px;color:var(--navy);margin-bottom:8px;line-height:1.2}
.also-card p{font-size:14.5px;color:var(--grey);line-height:1.5}
.also-preview{flex-shrink:0;width:120px;height:170px;border-radius:16px;overflow:hidden;border:2px solid var(--border);padding:8px;background:#0a0a0a;position:relative;box-shadow:var(--shadow-s)}
.also-preview-inner{width:100%;height:100%;background:var(--cream);border-radius:10px;overflow:hidden;padding:8px 6px}
.mini-tll-card{background:var(--white);border:1px solid var(--border);border-radius:6px;padding:5px 6px;margin-bottom:3px}
.mini-tll-tag{display:inline-block;font-family:var(--display);font-weight:600;font-size:6px;padding:1px 4px;border-radius:100px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}
.mini-tll-tag.local{background:var(--amber-bg);color:var(--amber)}
.mini-tll-tag.pro{background:var(--coral-bg);color:var(--coral-d)}
.mini-tll-tag.word{background:var(--teal-bg);color:var(--teal)}
.mini-tll-txt{font-size:6.5px;line-height:1.3;color:var(--charcoal)}
.mini-tll-txt b{color:var(--navy);font-family:var(--display);font-weight:600}
.mini-cp-total{background:linear-gradient(135deg,#133D2E,#1A6B52);border-radius:6px;padding:7px;color:#fff;margin-bottom:4px}
.mini-cp-total-l{font-size:5.5px;opacity:.7;text-transform:uppercase;letter-spacing:.5px;font-family:var(--display)}
.mini-cp-total-n{font-family:var(--display);font-size:14px;font-weight:700;line-height:1}
.mini-cp-row{display:flex;justify-content:space-between;background:var(--white);border:1px solid var(--border);border-radius:4px;padding:3px 5px;font-size:6.5px;margin-bottom:2px}
.mini-cp-row b{font-family:var(--display);font-weight:600;color:var(--navy)}

/* CATEGORIES */
.cats-section{background:var(--white)}
.cats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:56px}
.cat-card{background:var(--cream-2);padding:24px 20px;border-radius:16px;border:1px solid var(--border);transition:transform .25s, box-shadow .25s, border-color .25s, background .25s}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:transparent;background:var(--white)}
.cat-card-i{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:24px;margin-bottom:14px}
.cat-card-i.teal{background:var(--teal-bg)}
.cat-card-i.coral{background:var(--coral-bg)}
.cat-card-i.amber{background:var(--amber-bg)}
.cat-card-i.green{background:var(--green-bg)}
.cat-card h4{font-family:var(--display);font-size:15px;font-weight:600;color:var(--navy);margin-bottom:4px}
.cat-card p{font-size:12.5px;color:var(--grey);line-height:1.45}
.cat-card .soon{color:var(--coral);font-weight:600}
.cats-stats{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:32px;background:var(--cream-2);border-radius:20px;border:1px solid var(--border)}
.cstat{text-align:center}
.cstat-n{font-family:var(--display);font-weight:700;font-size:44px;color:var(--teal);line-height:1;letter-spacing:-.02em;margin-bottom:8px}
.cstat-l{font-size:13px;color:var(--grey);line-height:1.35}

/* WHY — strengthened with mission/vision */
.why{background:var(--navy);color:#fff;overflow:hidden;position:relative}
.why::before{content:'';position:absolute;top:-20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(61,220,151,.1),transparent 60%);pointer-events:none}
.why::after{content:'';position:absolute;bottom:-30%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(212,101,78,.08),transparent 60%);pointer-events:none}
.why .section-eyebrow{color:var(--green)}
.why .section-title{color:#fff}
.why .section-title em{color:var(--green)}
.why-inner{max-width:880px;margin:0 auto;position:relative;text-align:center}
.why-narrative{max-width:680px;margin:28px auto 0;font-size:18px;line-height:1.75;color:rgba(255,255,255,.88);text-align:left}
.why-narrative p{margin-bottom:18px}
.why-narrative b{color:#fff;font-weight:500}
.founder-pair{display:flex;justify-content:center;gap:24px;margin:44px 0 12px;flex-wrap:wrap}
.founder{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:14px 22px;border-radius:14px;backdrop-filter:blur(8px)}
.founder-avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:20px;color:#fff}
.founder-avatar.s{background:linear-gradient(135deg,#D4654E,#B8503C)}
.founder-avatar.m{background:linear-gradient(135deg,#3DDC97,#1A6B52)}
.founder-meta{text-align:left}
.founder-name{font-family:var(--display);font-weight:700;font-size:16px;color:#fff;margin-bottom:2px}
.founder-desc{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.35}

/* Mission/Vision dual card */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:48px auto 0}
.mv-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px 26px;text-align:left;backdrop-filter:blur(8px)}
.mv-label{font-family:var(--display);font-weight:700;font-size:11px;color:var(--green);letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.mv-text{font-family:var(--display);font-size:18px;font-weight:500;line-height:1.4;color:#fff;letter-spacing:-.01em}
.mv-text em{font-style:normal;color:var(--green)}

.why-pull{margin-top:48px;max-width:680px;margin-left:auto;margin-right:auto;font-family:var(--hand);font-size:32px;line-height:1.3;color:var(--green);text-align:center;letter-spacing:.005em}

/* OFFER */
.offer{background:var(--cream-2);text-align:center}
.offer-card{max-width:560px;margin:48px auto 0;background:var(--white);padding:48px 40px;border-radius:24px;border:2px solid var(--teal);box-shadow:var(--shadow-l);position:relative}
.offer-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--coral);color:#fff;font-family:var(--display);font-weight:600;font-size:12px;padding:6px 16px;border-radius:100px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 12px rgba(212,101,78,.35)}
.offer-title{font-family:var(--display);font-weight:700;font-size:26px;color:var(--navy);margin-bottom:8px;letter-spacing:-.02em}
.offer-price{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:16px 0 8px}
.offer-price-old{font-family:var(--display);font-size:22px;color:var(--grey);text-decoration:line-through;font-weight:500}
.offer-price-new{font-family:var(--display);font-size:56px;font-weight:700;color:var(--teal);letter-spacing:-.03em;line-height:1}
.offer-price-sub{font-size:14px;color:var(--grey)}
.offer-detail{font-size:14.5px;color:var(--grey);margin-top:12px;line-height:1.5}
.offer-detail b{color:var(--navy);font-weight:600}
.offer-perks{display:flex;flex-direction:column;gap:10px;margin:24px 0;text-align:left}
.offer-perk{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--charcoal)}
.offer-perk svg{width:20px;height:20px;color:var(--teal);flex-shrink:0;margin-top:2px}

/* FAQ */
.faq{background:var(--white)}
.faq-list{margin-top:48px}
.faq-item{border-bottom:1px solid var(--border);padding:20px 0}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;width:100%;text-align:left;font-family:var(--display);font-weight:600;font-size:18px;color:var(--navy);padding:0;background:none;border:none}
.faq-q:hover{color:var(--teal)}
.faq-toggle{width:28px;height:28px;border-radius:50%;background:var(--teal-bg);display:grid;place-items:center;flex-shrink:0;margin-left:16px;transition:transform .3s, background .2s;color:var(--teal);font-family:var(--display);font-weight:600}
.faq-item.open .faq-toggle{transform:rotate(45deg);background:var(--teal);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease, padding-top .3s;font-size:16px;color:var(--grey);line-height:1.6}
.faq-item.open .faq-a{max-height:500px;padding-top:14px}

/* FINAL CTA */
.final-cta{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(61,220,151,.15),transparent 60%),linear-gradient(180deg,var(--navy) 0%,#0d2e22 100%);color:#fff;text-align:center;padding:110px 0}
.final-cta h2{font-family:var(--display);font-weight:700;font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-.03em;color:#fff;margin-bottom:20px}
.final-cta h2 em{font-style:normal;color:var(--green)}
.final-cta p{font-size:19px;color:rgba(255,255,255,.75);margin-bottom:32px;max-width:560px;margin-left:auto;margin-right:auto}
.final-countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:480px;margin:0 auto 36px}
.fcd-unit{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 8px;backdrop-filter:blur(10px)}
.fcd-n{font-family:var(--display);font-weight:700;font-size:36px;color:var(--green);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fcd-l{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;margin-top:6px;font-family:var(--display);font-weight:500}
.final-cta .waitlist-form{margin:0 auto 16px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);backdrop-filter:blur(12px)}
.final-cta .waitlist-form input{color:#fff}
.final-cta .waitlist-form input::placeholder{color:rgba(255,255,255,.5)}
.final-cta .form-sub{color:rgba(255,255,255,.75);margin-bottom:18px}
.final-cta .form-sub b{color:var(--coral)}
.final-cta .hero-perk{color:rgba(255,255,255,.7);justify-content:center}
.final-cta .hero-perk-item svg{color:var(--green)}
.final-cta .hero-perk-sep{color:rgba(255,255,255,.25)}

.success-state{display:none;max-width:560px;margin:0 auto;background:var(--white);padding:40px 32px;border-radius:20px;border:2px solid var(--teal);box-shadow:var(--shadow-l);text-align:center}
.success-state.visible{display:block;animation:slideIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.success-icon{width:64px;height:64px;border-radius:50%;background:var(--teal-bg);color:var(--teal);display:grid;place-items:center;margin:0 auto 20px;animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes bounceIn{from{transform:scale(0)}to{transform:scale(1)}}
.success-state h3{font-family:var(--display);font-weight:700;font-size:26px;color:var(--navy);margin-bottom:8px;letter-spacing:-.02em}
.success-state p{font-size:16px;color:var(--grey);margin-bottom:24px;line-height:1.5}
.success-position{background:var(--teal-bg);padding:16px;border-radius:12px;margin-bottom:20px}
.success-position-n{font-family:var(--display);font-weight:700;font-size:40px;color:var(--teal);line-height:1}
.success-position-l{font-size:13px;color:var(--grey);margin-top:2px}
.share-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-family:var(--display);font-weight:600;font-size:13.5px;transition:transform .15s, background .2s, border-color .2s;border:1.5px solid var(--border);color:var(--navy);background:var(--white)}
.share-btn:hover{transform:translateY(-1px);border-color:var(--teal);background:var(--teal-bg)}
.share-btn svg{width:15px;height:15px}

.mobile-sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;padding:12px 16px;background:rgba(250,250,248,.95);backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--border)}
.mobile-sticky-cta a{display:block;background:var(--teal);color:#fff;font-family:var(--display);font-weight:600;font-size:15px;padding:14px;border-radius:12px;text-align:center;box-shadow:0 4px 12px rgba(26,107,82,.3)}

.footer{background:var(--cream);padding:48px 0 32px;border-top:1px solid var(--border);font-size:14px;color:var(--grey)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.footer-logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--navy)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{color:var(--grey);transition:color .2s}
.footer-links a:hover{color:var(--teal)}
.footer-copy{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--grey);text-align:center}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}

@media (max-width:1020px){ .nav-countdown{display:none} }
@media (max-width:960px){
  section{padding:72px 0}
  .hero{padding:120px 0 56px}
  .hero-grid,.pain-grid,.feature-row,.feature-row.reverse,.inside-intro{grid-template-columns:1fr;gap:48px;direction:ltr}
  .hero-visual,.pain-visual{min-height:auto;order:2}
  .phone-mock{transform:rotate(0);margin:0 auto}
  .float-badge{display:none}
  .cats-grid{grid-template-columns:repeat(3,1fr)}
  .hero-sub{font-size:17px}
  .section-sub{font-size:17px}
  .cats-stats{grid-template-columns:repeat(2,1fr);padding:24px}
  .pain-visual{min-height:auto;flex-direction:column;display:flex}
  .tab-card{position:relative;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;transform:none!important;max-width:none;margin-bottom:10px}
  .pain-arrow{position:relative;transform:none;margin:12px auto}
  .also-grid{grid-template-columns:1fr;gap:20px}
  .also-card{padding:24px}
  .stages-timeline{grid-template-columns:repeat(2,1fr);gap:14px}
  .stages-timeline::before{display:none}
  .mv-grid{grid-template-columns:1fr;gap:14px}
  .values-row{grid-template-columns:1fr;gap:10px;max-width:480px}
  .mini-phone{transform:rotate(0)}
}
@media (max-width:560px){
  body{font-size:16px;padding-bottom:80px}
  .wrap,.wrap-narrow{padding:0 20px}
  section{padding:60px 0}
  .hero{padding:110px 0 44px}
  .cats-grid{grid-template-columns:repeat(2,1fr)}
  .waitlist-form{flex-direction:column;padding:10px;gap:10px}
  .waitlist-form input{padding:10px 8px}
  .waitlist-form button{width:100%;padding:14px}
  .hero-perk{flex-wrap:wrap}
  .hero-perk-sep{display:none}
  .phone-mock{width:300px;height:660px}
  .offer-card{padding:36px 24px}
  .nav-inner{padding:12px 20px}
  .nav-logo{font-size:19px}
  .nav-cta{padding:9px 14px;font-size:13px}
  .footer-inner{flex-direction:column;text-align:center}
  .final-countdown{grid-template-columns:repeat(4,1fr);gap:8px}
  .fcd-n{font-size:26px}
  .fcd-l{font-size:9.5px;letter-spacing:.5px}
  .mobile-sticky-cta{display:block}
  .cats-stats{grid-template-columns:1fr 1fr;gap:12px;padding:20px}
  .cstat-n{font-size:34px}
  .why-narrative{font-size:16.5px}
  .why-pull{font-size:24px}
  .also-card{flex-direction:column;gap:16px;text-align:center;padding:28px 24px}
  .also-card-copy{text-align:center}
  .stages-timeline{grid-template-columns:1fr;gap:10px}
  .mv-text{font-size:16px}
}

/* ============================================================================
   MOBILE REDESIGN (≤720px) — phones and small tablets in portrait.
   Desktop (≥721px) is completely unchanged. All rules live inside this block.
   ============================================================================ */

@media (max-width:720px){

  /* ---------- HERO ----------
     The desktop hero shows a 300×660 phone mockup with 11 distinct UI regions
     rendered at 7–11px. On mobile that's both unreadable and dominates the
     fold. We hide it entirely so the hero is just copy + form + perks. */
  .hero-visual{display:none}
  .hero-grid{gap:0}
  .hero{padding:104px 0 40px}
  .hero h1{font-size:clamp(34px,9vw,52px);line-height:1.05;margin-bottom:18px}
  .hero-sub{font-size:17px;margin-bottom:26px}
  .hero-perk{flex-direction:column;align-items:flex-start;gap:10px;margin-top:6px}
  .hero-perk-sep{display:none}
  .hero-perk-item{font-size:14.5px}
  .hero-perk-item svg{width:16px;height:16px}

  /* ---------- FEATURE-ROW HEADINGS ----------
     Desktop .feature-content h3 is 32px - overflows narrow phone viewports.
     Reduce to fit comfortably. */
  .feature-content h3{font-size:26px;line-height:1.2}
  .feature-content p{font-size:16px}

  /* ---------- FEATURE BULLETS ----------
     Desktop uses `display:flex` on each li. Each <b> inside the bullet text
     becomes its own flex item which on narrow widths lays the bullet out as
     multiple stacked columns ("Cheaper" / "Remove" / "House share" instead
     of one inline sentence). Switch to absolute-positioned SVG so all the
     text flows as a single inline run. */
  .feature-bullets li{
    display:block;position:relative;
    padding:8px 0 8px 30px;
    font-size:15px;line-height:1.55;
  }
  .feature-bullets li svg{
    position:absolute;left:0;top:11px;margin-top:0;
  }

  /* ---------- GRID INTRINSIC-SIZING FIX ----------
     CSS Grid `1fr` defaults to `minmax(auto, 1fr)` where `auto` lets the
     column expand to fit its content's min-content size. Long unbreakable
     strings (or strict h3 text) blow the column out wider than the viewport.
     Force the minimum to 0 so columns honour the container width. */
  .hero-grid,
  .pain-grid,
  .feature-row,
  .feature-row.reverse,
  .inside-intro{
    grid-template-columns:minmax(0,1fr);
  }

  /* ---------- PHONE-FRAME STRIPPING ----------
     The 4 feature-row mockups (.phone-inline) and the inside-intro mockup
     (.mini-phone) all drop their black bezel, notch, status bar, rotation
     and fixed dimensions on mobile. The inner content becomes a flat
     full-width card. */
  .mini-phone,
  .phone-inline{
    width:100%;max-width:none;height:auto;
    background:transparent;border-radius:0;padding:0;
    box-shadow:none;transform:none;margin:0;
  }
  .mini-phone::before,
  .phone-inline::before{display:none}
  .mini-phone .phone-screen,
  .phone-inline .phone-screen{
    height:auto;border-radius:18px;
    border:1px solid var(--border);
    background:var(--cream);
    box-shadow:var(--shadow-m);
    overflow:visible;
  }
  .mini-phone .phone-statusbar,
  .phone-inline .phone-statusbar{display:none}
  .mini-phone .phone-content,
  .phone-inline .phone-content{
    padding:22px 18px;
    overflow:visible;
    height:auto;
    flex:none;
  }
  .inside-intro{gap:32px}

  /* ---------- INNER CONTENT TYPOGRAPHY ----------
     Without phone bezels, content needs natural mobile reading sizes
     (not the 7–11px sized for a 290px phone mock). */

  /* Topic page (inside intro) */
  .tp-breadcrumb{font-size:11px;margin-bottom:8px}
  .tp-title{font-size:22px;line-height:1.2;margin-bottom:8px}
  .tp-meta{font-size:12px;gap:10px;margin-bottom:16px}
  .tp-intro{font-size:15px;line-height:1.55;margin-bottom:14px}
  .tp-sub{font-size:16px;margin:16px 0 8px}
  .tp-para{font-size:14.5px;line-height:1.55;margin-bottom:12px}
  .tp-card{padding:14px 16px;border-radius:12px;margin:12px 0}
  .tp-card-tag{font-size:10.5px;margin-bottom:5px}
  .tp-card-text{font-size:14px;line-height:1.5}

  /* Settling-in plan view */
  .jp-head{font-size:20px;margin-bottom:6px}
  .jp-sub{font-size:13px;margin-bottom:16px}
  .jp-stage-tabs{gap:6px;margin-bottom:16px}
  .jp-tab{font-size:12px;padding:6px 12px}
  .jp-step{padding:14px;margin-bottom:8px;border-radius:14px;gap:12px}
  .jp-step-check{width:22px;height:22px;font-size:12px}
  .jp-step-title{font-size:14.5px;margin-bottom:2px}
  .jp-step-meta{font-size:12px}

  /* Process detail */
  .pd-back{font-size:12px;margin-bottom:12px;gap:8px}
  .pd-back-arr{font-size:16px}
  .pd-bm-btn{width:26px;height:26px;font-size:13px;border-radius:6px}
  .pd-title{font-size:20px;margin-bottom:4px}
  .pd-subtitle{font-size:13px;margin-bottom:10px}
  .pd-stat{font-size:12px;margin-bottom:10px}
  .pd-meta-row{font-size:12px;margin-bottom:14px;gap:16px}
  .pd-progress{height:4px;margin-bottom:14px}
  .pd-pin{padding:12px 14px;border-radius:12px;margin-bottom:14px;gap:12px}
  .pd-pin-icon{font-size:18px}
  .pd-pin-t{font-size:14px;margin-bottom:2px}
  .pd-pin-m{font-size:12px;line-height:1.4}
  .pd-step{padding:12px 14px;margin-bottom:8px;border-radius:12px;gap:12px}
  .pd-step-check{width:22px;height:22px;font-size:12px;border-radius:6px}
  .pd-step-head{margin-bottom:4px;gap:10px}
  .pd-step-t{font-size:14.5px;line-height:1.25}
  .pd-step-time{font-size:12px}
  .pd-step-d{font-size:13.5px;line-height:1.5;margin-bottom:6px}
  .pd-step-checks{font-size:12px;gap:8px;flex-wrap:wrap}
  .pd-step-completed{font-size:12px;margin-top:6px}

  /* Cost planner */
  .cp-back{margin-bottom:14px;gap:10px}
  .cp-back-btn{width:30px;height:30px;font-size:14px}
  .cp-title{font-size:18px}
  .cp-reset{font-size:12px;padding:6px 12px}
  .cp-summary-head{margin-bottom:5px}
  .cp-summary-l{font-size:14px}
  .cp-summary-pct{font-size:13px}
  .cp-summary-bar{height:4px;margin-bottom:5px}
  .cp-summary-sub{font-size:12px;margin-bottom:14px}
  .cp-divider{margin-bottom:14px}
  .cp-view{font-size:13px;margin-bottom:14px}
  .cp-view-toggle button{font-size:12px;padding:7px 14px}
  .cp-pay-card{padding:14px;border-radius:12px;margin-bottom:14px}
  .cp-pay-h{font-size:14px;margin-bottom:8px}
  .cp-pay-row{font-size:12.5px;padding:7px 10px;margin-bottom:3px;border-radius:7px}
  .cp-tiles{gap:8px;margin-bottom:14px}
  .cp-tile{padding:10px;border-radius:10px}
  .cp-tile-l{font-size:11px;margin-bottom:4px}
  .cp-tile-n{font-size:18px}
  .cp-section-h{font-size:14px;margin-bottom:10px}
  .cp-switches{gap:8px;margin-bottom:14px}
  .cp-switch{padding:10px 12px;border-radius:10px}
  .cp-switch-t{font-size:12.5px}
  .cp-switch-m{font-size:11px;margin-top:2px}
  .cp-bd-h{font-size:14px;margin-bottom:8px}
  .cp-bd-row{font-size:12.5px;padding:11px 13px;border-radius:10px;margin-bottom:5px}
  .cp-bd-row-arr{font-size:12px}
  .cp-up-row{font-size:12.5px;padding:11px 13px;border-radius:10px;margin-top:10px}
  .cp-step-bar{
    position:relative;padding:12px 14px;
    border-radius:0 0 18px 18px;
    margin-top:14px;
  }
  .cp-step-back-btn{font-size:13px;padding:7px 14px}
  .cp-step-l{font-size:12px}
  .cp-step-done-btn{font-size:13px;padding:7px 16px}

  /* James AI chat */
  .ai-avatar{margin-bottom:14px;gap:10px}
  .ai-avatar-i{width:36px;height:36px;font-size:14px}
  .ai-avatar-n{font-size:14.5px}
  .ai-avatar-s{font-size:12px}
  .ai-msg{font-size:14px;padding:11px 14px;border-radius:16px;line-height:1.5;margin-bottom:8px;max-width:88%}

  /* "Also inside" preview - drop phone-frame styling, show cards at readable size */
  .also-preview{
    width:100%;height:auto;
    background:transparent;border:none;box-shadow:none;padding:0;border-radius:0;
  }
  .also-preview-inner{
    width:100%;
    background:var(--cream);border:1px solid var(--border);
    border-radius:14px;padding:14px;
  }
  .mini-tll-card{border-radius:10px;padding:11px 13px;margin-bottom:8px}
  .mini-tll-card:last-child{margin-bottom:0}
  .mini-tll-tag{font-size:10px;padding:3px 8px;margin-bottom:6px;letter-spacing:.06em}
  .mini-tll-txt{font-size:13.5px;line-height:1.5}

  /* ---------- PAIN: chaotic 2-col grid + emphatic arrow ----------
     The 960px breakpoint already strips position/rotation from .tab-card.
     We restore rotation (with !important to win against existing
     !important) and lay out in a 2-col grid with small rotations for the
     "47 messy browser tabs" feel. */
  .pain-grid{gap:32px}
  .pain-visual{
    display:flex!important;flex-direction:row!important;flex-wrap:wrap;
    gap:14px 8px;padding:18px 8px;
    justify-content:center;align-items:center;
    overflow:visible;
  }
  .tab-card{
    position:relative;width:calc(50% - 8px);
    margin:0!important;max-width:none;
    padding:12px 14px;
    top:auto!important;bottom:auto!important;
    left:auto!important;right:auto!important;
  }
  .tab-card.t1{transform:rotate(-3deg)!important;z-index:3}
  .tab-card.t2{transform:rotate(2.5deg)!important;z-index:2}
  .tab-card.t3{transform:rotate(-1.5deg)!important;z-index:3}
  .tab-card.t4{transform:rotate(2deg)!important;z-index:2}
  .tab-card.t5{transform:rotate(-2deg)!important;z-index:3}
  .tab-card.t6{transform:rotate(1.5deg)!important;z-index:1}
  .tab-card .tc-icon{width:26px;height:26px;font-size:13px}
  .tab-card .tc-text{font-size:12.5px;line-height:1.35}

  .pain-arrow{
    position:relative!important;transform:none!important;
    left:auto!important;top:auto!important;
    width:100%;margin:20px 0 0;
    font-size:17px;padding:16px 24px;
    background:var(--coral);color:#fff;border-color:var(--coral);
    box-shadow:0 8px 24px rgba(212,101,78,.28);
  }

  /* ---------- VERTICAL TIMELINE (stages) ----------
     Desktop renders the 7 stages as a horizontal timeline with a connecting
     gradient line. The 960/560 breakpoints hide the line and stack stages,
     which kills the journey narrative. We rebuild as a true vertical
     timeline: line on the left, dots, labels right of each dot. */
  .stages-timeline{
    grid-template-columns:auto 1fr;gap:0;
    padding-left:6px;
    position:relative;
  }
  .stages-timeline::before{
    display:block;
    content:'';position:absolute;
    top:14px;bottom:14px;left:19px;right:auto;
    width:2px;height:auto;
    background:linear-gradient(180deg,var(--green) 0%, var(--teal) 100%);
    border-radius:2px;z-index:0;
  }
  .stage-node{display:contents}
  .stage-dot{
    position:relative;z-index:1;
    margin:0 16px 18px 0;grid-column:1;
  }
  .stage-label{
    grid-column:2;text-align:left;
    align-self:center;margin-bottom:18px;
    font-size:15px;line-height:1.3;padding-top:2px;
  }

  /* ---------- CATEGORIES STATS: row layout, no orphan ---------- */
  .cats-stats{
    grid-template-columns:1fr;gap:0;padding:24px;
  }
  .cstat{
    display:flex;align-items:center;justify-content:flex-start;gap:20px;
    text-align:left;
    padding:14px 0;border-bottom:1px solid var(--border);
  }
  .cstat:first-child{padding-top:0}
  .cstat:last-child{padding-bottom:0;border-bottom:none}
  .cstat-n{font-size:38px;margin-bottom:0;flex-shrink:0;min-width:90px;text-align:left}
  .cstat-l{font-size:14.5px}

  /* ---------- SECTION PADDING DIET ---------- */
  section{padding:56px 0}
  .pain{padding:56px 0}
  .final-cta{padding:64px 0}

  /* ---------- FORM TAP TARGETS ---------- */
  .waitlist-form{padding:8px}
  .waitlist-form input{padding:14px 14px;font-size:16px}
  .waitlist-form button{padding:16px;font-size:16px;border-radius:12px}

  /* ---------- FAQ TAP TARGETS ---------- */
  .faq-toggle{width:36px;height:36px;font-size:18px;margin-left:14px}
  .faq-q{font-size:17px;gap:12px}
  .faq-item{padding:18px 0}
  .faq-a{font-size:15.5px}

  /* ---------- OFFER CARD COMPACT ---------- */
  .offer-card{padding:36px 22px;border-radius:20px}
  .offer-title{font-size:22px}
  .offer-price-new{font-size:48px}
  .offer-price-old{font-size:19px}
  .offer-perks{gap:12px;margin:22px 0}
  /* Same flex/bold issue as feature-bullets - inline text was breaking
     into "columns". Convert to absolute-positioned SVG. */
  .offer-perk{
    display:block;position:relative;
    padding-left:30px;
    font-size:14.5px;line-height:1.55;
  }
  .offer-perk svg{
    position:absolute;left:0;top:5px;margin-top:0;
  }

  /* ---------- WHY/FOUNDERS TIGHTER ---------- */
  .founder-pair{gap:14px;margin:32px 0 8px}
  .founder{padding:12px 18px;gap:12px;max-width:340px;width:100%}
  .founder-avatar{width:48px;height:48px;font-size:18px}

  /* ---------- NAV ---------- */
  .nav-inner{padding:12px 16px}

  /* ---------- STICKY CTA: extend to 720, safe-area inset, transition hook ---------- */
  .mobile-sticky-cta{
    display:block;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    transition:opacity .25s ease, transform .25s ease;
  }
  .mobile-sticky-cta a{
    padding:15px;font-size:15.5px;border-radius:12px;
  }
  body{padding-bottom:96px}
  body.form-in-view .mobile-sticky-cta{
    opacity:0;pointer-events:none;
    transform:translateY(110%);
  }
}

/* ============================================================================
   EXTRA-SMALL PHONES (≤380px) — iPhone SE 1st gen and similar.
   ============================================================================ */

@media (max-width:380px){
  .wrap,.wrap-narrow{padding:0 16px}
  .hero h1{font-size:32px}
  .pain-copy h2,.section-title{font-size:28px}
  .nav-cta{padding:9px 13px;font-size:12.5px}
  .cstat-n{font-size:32px;min-width:72px}
  .cats-grid{gap:10px}
  .cat-card{padding:18px 14px}
  .cat-card-i{width:42px;height:42px;font-size:21px;margin-bottom:10px}
  .cat-card h4{font-size:14.5px}
  .cat-card p{font-size:12px}
}