/* BeTaller site. Radius rule: buttons are pills, panels 14px, phones 12% of width.
   One accent (brand purple). Layers: header 10, nothing else stacks. */
@font-face{font-family:Archivo;src:url(fonts/archivo.woff2) format("woff2");font-weight:700 800;font-stretch:100% 118%;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Caveat;src:url(fonts/caveat-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  color-scheme:light dark;
  --bg:#f3f2f8;--bg-2:#e9e7f2;--ink:#17142a;--mute:#57526e;--line:#d3cfe2;
  --accent:#6d2ee0;--accent-ink:#fbfaff;--pencil:#6d2ee0;
  --jamb:#fbfaff;--jamb-tick:#a39dbb;
  --gutter:clamp(20px,5vw,64px);--max:1240px;
  --cover:#17142a;--cover-ink:#f6f4ff;--cover-accent:#a78bfa;
  --phone-edge:#2a2740;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#100e1a;--bg-2:#191626;--ink:#f1eff9;--mute:#aca7c2;--line:#322d47;
  --accent:#a78bfa;--accent-ink:#17142a;--pencil:#b79dfc;
  --jamb:#1d1a2c;--jamb-tick:#6c6688;
  --phone-edge:#3c3757;
}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.hand{font-family:Caveat,cursive;font-weight:600;line-height:1}

h1,h2,h3.big{font-family:Archivo,Inter,sans-serif;font-stretch:112%;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:min(clamp(2.9rem,1.5rem + 4.6vw,5.1rem),14vw);line-height:1}
h2{font-size:min(clamp(2rem,1.3rem + 2.5vw,3.4rem),11vw);line-height:1.06}
.lead{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);color:var(--mute);max-width:34em}
.note{font-size:.9375rem;color:var(--mute)}

/* Header */
.bar{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font:800 1.15rem/1 Archivo,Inter,sans-serif;font-stretch:112%;letter-spacing:-.02em;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:22%}
.bar-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.bar-nav a:not(.btn){font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap}
.bar-nav a:not(.btn):hover{color:var(--accent)}

/* Buttons: colour changes on hover, the button itself stays put */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;white-space:nowrap;text-decoration:none;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);transition:background-color .2s,color .2s,border-color .2s;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn:active{transform:scale(.98)}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.small{min-height:42px;padding:0 18px;font-size:.9375rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Door-frame height chart: the page's one signature */
.jamb{position:relative;width:64px;background-color:var(--jamb);border-inline:1px solid var(--line);
  background-image:repeating-linear-gradient(to top,var(--jamb-tick) 0 1px,transparent 1px 11px);background-size:12px 100%;background-repeat:no-repeat}
.mark{position:absolute;left:-1px;display:flex;align-items:center;white-space:nowrap;color:var(--pencil)}
.mark i{display:block;width:46px;height:2.5px;border-radius:2px;background:currentColor;transform:rotate(-1.2deg);transform-origin:left}
.mark span{position:absolute;right:calc(100% + 8px);font-size:1.45rem;color:var(--ink)}
.mark.next i{background:none;border-top:2.5px dashed currentColor;height:0}
.mark.next span{color:var(--pencil)}

/* Phones: 1320x2868 screens, thin bezel */
.phone{position:relative;aspect-ratio:1356/2904;background:var(--phone-edge);border-radius:13%/6%}
.phone img{position:absolute;inset:.62% 1.33%;width:97.34%;height:98.76%;border-radius:12%/5.6%;background:#0f0d1c}

/* Hero */
.hero{padding-block:clamp(36px,6vh,72px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero-copy>*+*{margin-top:22px}
.hero-copy .cta-row{margin-top:30px}
.hero-stage{display:grid;grid-template-columns:auto auto;justify-content:center;gap:clamp(70px,7vw,112px);--h:min(calc(100dvh - 150px),640px)}
.hero-stage .phone{height:var(--h);min-height:440px}
.hero-stage .jamb{height:var(--h);min-height:440px}
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .8s cubic-bezier(.16,1,.3,1) both}
  .hero-stage{animation:rise .9s .08s cubic-bezier(.16,1,.3,1) both}
  .js .draw i{transform:rotate(-1.2deg) scaleX(0);transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .js .draw.in i{transform:rotate(-1.2deg) scaleX(1)}
  .js .up{transform:translateY(20px);transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .js .up.in{transform:none}
}
@keyframes rise{from{transform:translateY(22px)}to{transform:none}}

.sect{padding-block:clamp(64px,10vw,128px)}
.sect.tint{background:var(--bg-2)}

/* Straight talk */
.big-say{font-size:min(clamp(2.5rem,1.2rem + 5vw,5.6rem),13vw);line-height:1;max-width:15ch}
.say-sub{margin-top:24px;font-size:clamp(1.15rem,1rem + .5vw,1.4rem);max-width:32em}
.can-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);margin-top:clamp(44px,6vw,76px)}
.can-grid h3{font-size:1.25rem;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.can-grid ul{list-style:none;padding:0}
.can-grid li{padding-block:13px}
.say-end{margin-top:clamp(36px,5vw,56px);font-size:1.75rem;color:var(--pencil);transform:rotate(-.6deg);transform-origin:left}

/* Estimate rail */
.rail{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,64px);padding-top:44px}
.rail::before{content:"";position:absolute;inset:0 0 auto;height:26px;background-color:var(--jamb);border-block:1px solid var(--line);background-image:repeating-linear-gradient(to right,var(--jamb-tick) 0 1px,transparent 1px 11px);background-size:100% 11px;background-repeat:no-repeat}
.rail li{list-style:none;position:relative}
.rail li::before{content:"";position:absolute;left:0;top:-44px;width:3px;height:38px;border-radius:2px;background:var(--pencil);transform:rotate(1deg)}
.rail{padding-inline-start:0}
.rail h3{font-size:1.25rem;margin-bottom:6px}
.rail p{color:var(--mute)}
.cta-stack{margin-top:clamp(36px,5vw,52px)}
.cta-stack .note{margin-top:12px;max-width:36em}

/* App gallery */
.strip{--pad:max(var(--gutter),calc((100vw - var(--max))/2 + var(--gutter)));display:flex;gap:clamp(18px,3vw,40px);overflow-x:auto;scroll-snap-type:x proximity;padding:clamp(34px,4vw,56px) var(--pad) 18px;scroll-padding-inline:var(--pad);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.strip figure{flex:0 0 clamp(204px,21vw,272px);scroll-snap-align:start}
.strip figcaption{margin-top:14px;font-weight:600}
.strip figcaption span{display:block;font-weight:400;color:var(--mute);font-size:.9375rem}

/* Book */
.book{container-type:inline-size;position:relative;aspect-ratio:1/1.414;width:min(100%,380px);background:var(--cover);color:var(--cover-ink);border-radius:3px 12px 12px 3px;padding:9% 9% 8% 15%;display:flex;flex-direction:column;box-shadow:0 26px 50px -22px rgb(36 20 90/.55);overflow:hidden}
.book-rule{position:absolute;inset:0 auto 0 0;width:9%;background-color:#262240;background-image:repeating-linear-gradient(to top,#8f88b0 0 1px,transparent 1px 9px);background-size:45% 100%;background-repeat:no-repeat}
.book-brand{display:flex;align-items:center;gap:8px;font:800 .95rem/1 Archivo,Inter,sans-serif;font-stretch:112%}
.book-brand img{width:24px;height:24px;border-radius:22%}
.book h2,.book .book-t{font:800 14cqw/.98 Archivo,Inter,sans-serif;font-stretch:112%;letter-spacing:-.03em;margin-top:auto}
.book .book-t em{font-style:normal;color:var(--cover-accent)}
.book p{margin-top:14px;font-size:.9375rem;line-height:1.4;color:#cfcae3}
.book .hand{position:absolute;right:9%;top:26%;font-size:1.5rem;color:var(--cover-accent);transform:rotate(-4deg)}

.teaser{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,7vw,110px);align-items:center}
.teaser .book{justify-self:center}
.teaser .lead{margin-top:20px}
.teaser .btn{margin-top:30px}

.finale{text-align:center}
.finale h2{margin-inline:auto;max-width:15ch}
.finale .cta-row{justify-content:center;margin-top:30px}
.finale .note{margin:14px auto 0;max-width:34em}

/* Playbook */
.pb-hero{padding-block:clamp(36px,6vh,72px)}
.pb-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,90px);align-items:center}
.pb-hero-in>div>*+*{margin-top:22px}
.pb-hero .cta-row{margin-top:30px}
.pb-hero .book{justify-self:center;width:min(100%,400px,calc((100dvh - 140px)/1.414))}
.pillars{--pl:clamp(84px,12vw,150px);position:relative;margin-top:clamp(44px,6vw,72px);padding:0 0 0 var(--pl);list-style:none}
.pillars .jamb{position:absolute;left:0;top:0;bottom:0;height:auto}
.pillars li{position:relative;padding-block:clamp(20px,3vw,34px)}
.pillars .mark{left:calc(var(--pl) * -1 - 1px);top:clamp(38px,5vw,62px)}
.pillars h3{font-size:min(clamp(1.75rem,1.1rem + 2.4vw,3rem),10vw);line-height:1.05}
.pillars p{margin-top:8px;color:var(--mute);max-width:40em}

.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,60px);margin-top:clamp(40px,5vw,60px)}
.toc h3{font-size:1.125rem;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.toc ol{list-style:none;padding:0;margin-top:6px}
.toc li{display:grid;grid-template-columns:2.1em minmax(0,1fr);padding-block:10px}
.toc li b{color:var(--pencil);font-weight:700}

.wont>*{max-width:52rem}
.wont p+p{margin-top:16px}
.wont .lead{margin-top:20px;color:var(--ink)}

.buy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,90px);align-items:start}
.buy ul{list-style:none;padding:0;margin-top:26px}
.buy li{padding-block:9px}
.buy-panel{background:var(--bg);border:1.5px solid var(--ink);border-radius:14px;padding:clamp(24px,3.4vw,40px)}
.price{font:800 clamp(1.7rem,1.3rem + 1.3vw,2.4rem)/1.1 Archivo,Inter,sans-serif;font-stretch:112%;letter-spacing:-.02em}
.buy-panel .note{margin-top:8px}
.buy-panel .btn{width:100%;margin-top:24px}
.checkout-msg{margin-top:14px;font-size:.9375rem;font-weight:500;color:var(--ink)}
.checkout-msg:empty{display:none}

.faq{max-width:50rem;margin-top:clamp(32px,4vw,48px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding-block:20px;font-weight:600;font-size:1.125rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 1.5rem/1 Inter,sans-serif;color:var(--pencil);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:22px;color:var(--mute);max-width:42em}

/* Legal */
.legal{max-width:44rem;padding-block:clamp(40px,7vw,80px)}
.legal h1{font-size:min(clamp(2.3rem,1.6rem + 2.6vw,3.5rem),12vw);line-height:1.05}
.legal .date{margin-top:10px;font-size:.9375rem;color:var(--mute)}
.legal h2{font:700 1.3rem/1.3 Inter,sans-serif;letter-spacing:-.01em;margin:32px 0 10px}
.legal p,.legal li{color:var(--mute);margin-bottom:10px}
.legal strong{color:var(--ink)}
.legal ul{padding-left:20px}
.legal a{color:var(--accent)}

/* Footer */
.foot{border-top:1px solid var(--line);padding-block:36px}
.foot-in{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot nav a{font-size:.9375rem;color:var(--mute);text-decoration:none;padding-block:4px}
.foot nav a:hover{color:var(--accent)}
.foot-note{flex-basis:100%;font-size:.875rem;color:var(--mute)}

@media (max-width:900px){
  .hero-in,.pb-hero-in,.teaser,.buy{grid-template-columns:minmax(0,1fr)}
  .toc{grid-template-columns:minmax(0,1fr)}
  .hero-stage{--h:560px;justify-content:start;gap:clamp(70px,16vw,110px)}
  .hero-stage .phone,.hero-stage .jamb{height:min(var(--h),118vw);min-height:0}
  .pb-hero .book{justify-self:start;width:min(100%,320px)}
  .teaser .book{justify-self:start;width:min(100%,300px)}
}
@media (max-width:700px){
  .can-grid,.rail{grid-template-columns:minmax(0,1fr)}
  .rail{padding-top:0;padding-left:34px}
  .rail::before{inset:0 auto 0 0;width:22px;height:auto;border-block:0;border-inline:1px solid var(--line);background-image:repeating-linear-gradient(to bottom,var(--jamb-tick) 0 1px,transparent 1px 11px);background-size:10px 100%}
  .rail li::before{left:-34px;top:12px;width:30px;height:3px}
  .bar-nav a.hide-s{display:none}
  .cta-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}