/* Illustrated skin (2026-10-04). Loads after site.css and re-themes it:
   warm near-white paper, ink black, highlighter marks, hand-drawn mascot.
   Layout, breakpoints and copy stay in site.css / index.html. */
:root{--paper:#fbfaf7;--cream:#f3f0e8;--ink:#1b1a17;--muted:#5f5c56;--brass:#c58a3c;--line:#e4dfd5;--sage:#dcebd5;--forest:#1b1a17;--white:#fff;
  --butter:#f5d188;--butter-ink:#a5380b;--peach:#f9b28c;--peach-ink:#8f2f0b;--pink:#f6b5b2;--pink-ink:#8d2626;--lavender:#cdc8f7;--lavender-ink:#3f3a9e;--sky:#c4e2fb;--sky-ink:#0f5b84;--mint:#cbe8c5;--mint-ink:#2f6b26;--sand:#f7e0b2;
  --mark:var(--butter);--mark-ink:var(--butter-ink);--shadow:4px 4px 0 var(--ink)}
body{background:var(--paper);color:var(--ink)}
::selection{background:var(--butter);color:var(--ink)}
p{color:var(--muted)}
h1,h2,h3{font-family:var(--body);font-weight:600;letter-spacing:-.02em}
h1,h2{line-height:1.02}
h3{font-weight:600;letter-spacing:-.015em}
h1 em,h2 em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--mark-ink);background:var(--mark);padding:.02em .14em;border-radius:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.experience{--mark:var(--peach);--mark-ink:var(--peach-ink)}
.draft-section{--mark:var(--lavender);--mark-ink:var(--lavender-ink)}
.how-section{--mark:var(--sky);--mark-ink:var(--sky-ink)}
.calculator-section{--mark:var(--pink);--mark-ink:var(--pink-ink)}
.pricing-section{--mark:var(--mint);--mark-ink:var(--mint-ink)}
.trust-section{--mark:var(--peach);--mark-ink:var(--peach-ink)}
.closing-section{--mark:var(--butter);--mark-ink:var(--butter-ink)}
.eyebrow{color:#6d6a63}
.status-dot{background:#7fbc5d;box-shadow:0 0 0 4px #7fbc5d22}
.button{border-radius:8px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:13px;gap:18px;padding:16px 22px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.button:hover{background:#000;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.button-light{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 #fff}
.button-light:hover{background:var(--butter);box-shadow:5px 5px 0 #fff}
.nav .button,.demo-row .button,.price-card>.button{box-shadow:var(--shadow)}
.text-link{font-weight:600}
.text-link:hover{color:var(--butter-ink)}
.site-header{background:#fbfaf7f2;border-bottom:1.5px solid var(--ink)}
.site-header.is-scrolled{box-shadow:none}
.nav-links>a:not(.button){color:var(--ink);font-weight:500}
.nav-links>a:not(.button):hover{color:var(--butter-ink)}
.menu-toggle{border-color:var(--ink)}
.brand{font-weight:700}
.brand-mark,.brand-dot{color:var(--brass)}
/* Hero */
.hero-stage{background:var(--sand);border:1.5px solid var(--ink);border-radius:22px;box-shadow:var(--shadow)}
.hero-stage:after{content:none}
.hero-mascot{position:absolute;left:-14px;bottom:-10px;height:380px;width:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 6px 0 #d9b97a66)}
.hero-stage .phone{transform:translateX(96px) rotate(-4deg);border-color:var(--ink);box-shadow:8px 8px 0 #1b1a1722,0 0 0 1px var(--ink);z-index:2}
.stage-label{color:var(--peach-ink);font-weight:600}
.scenario-picker{background:#fff;border:1.5px solid var(--ink);border-radius:30px;z-index:3;box-shadow:var(--shadow)}
.scenario-picker button[aria-pressed=true]{background:var(--ink);color:#fff}
.message.assistant{background:#f1efe8;color:#2b2a26}
.message.user{background:var(--ink);color:#fff}
.phone-compose button{border-color:var(--ink);color:var(--ink)}
.phone-compose button span{background:var(--ink)}
.contact-avatar{background:var(--butter)}
.contact-avatar .brand-mark{color:var(--ink)}
.assurance-icon{background:var(--mint);color:var(--mint-ink)}
.hero-assurance strong{font-weight:600}
.integrations{border-bottom:1.5px solid var(--ink)}
.integration{font-weight:600}
/* Cards: sticker style */
.feature{border:1.5px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);background:#fff}
.feature-inbox{background:#fdf1e7}
.feature-calendar{background:#eef5fc}
.feature-briefing{background:#fbf4df}
.feature-index{font-style:normal;font-weight:600;color:var(--ink)}
.pill{border:1.5px solid var(--ink);color:var(--ink);background:#fff;font-weight:600}
.email-visual,.calendar-visual,.briefing-visual{border:1.5px solid var(--ink);border-bottom:0;border-radius:14px 14px 0 0;box-shadow:none;background:#fff}
.briefing-visual{background:#fffdf6}
.mini-avatar{background:var(--peach);font-family:var(--body);font-weight:600}
.draft-mini{background:#f6f4ee;border:1px solid #dcd8ce}
.draft-label{color:var(--lavender-ink)}
.approval-label{color:var(--butter-ink)}
.cal-days .selected{background:var(--sky);color:var(--sky-ink)}
.cal-event>div{background:#f4f2ec;border-left-color:#c9c4b9}
.cal-event.available>div{background:var(--mint);border-color:var(--mint-ink)}
.cal-event.available>span:last-child{color:var(--mint-ink)}
.briefing-sun{color:#e5a93a}
.briefing-visual small{color:var(--butter-ink)}
.briefing-visual p{color:var(--ink);font-weight:500}
.briefing-bottom{color:var(--muted);border-top-color:#e6dfcf}
.section-footnote{color:#7a776f}
/* Live demo: sand block */
.draft-section{background:var(--sand);color:var(--ink);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.draft-copy .eyebrow{color:#7a5a17}
.draft-copy h2{color:var(--ink)}
.draft-copy>p{color:#5a4a26}
.draft-benefits{color:var(--ink);font-weight:500}
.draft-copy p.demo-disclosure{color:#7a6336}
.draft-tool{background:#fff;border:1.5px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink)}
.tool-heading{border-bottom-color:var(--line)}
.tool-heading .small-spark{color:var(--butter-ink)}
.tool-label{background:var(--lavender);color:var(--lavender-ink);border-color:var(--lavender-ink)}
.draft-tool textarea{border:1.5px solid var(--ink);border-radius:10px;background:#fff}
.draft-tool textarea:focus{outline:2px solid var(--butter);outline-offset:2px}
.demo-count.near{color:var(--butter-ink)}
.result-heading{color:var(--lavender-ink)}
/* Steps with spot illustrations */
.step-top{border-top:1.5px solid var(--ink);margin-bottom:18px}
.step-top>span:first-child{color:var(--ink);font-weight:600}
.step-drawing{color:var(--ink)}
.step-visual{margin:0 0 24px;aspect-ratio:1;border:1.5px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--mint);box-shadow:var(--shadow);display:grid;place-items:end center}
.step-visual-2{background:var(--lavender)}
.step-visual-3{background:var(--sky)}
.step-visual img{width:78%;height:86%;object-fit:contain;object-position:bottom}
.how-note{background:var(--cream);border:1px solid var(--line);border-radius:12px}
.how-note>span{color:var(--butter-ink)}
/* Agencies using Kesh: logo strip between Your new normal and the email draft demo */
.customers-section{border-top:1.5px solid var(--ink);background:var(--paper);padding:44px 0 40px}
.customer-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 40px;letter-spacing:-.02em}
.customer-logos-label{flex-basis:100%;text-align:center;margin-bottom:6px;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.customer-logo{height:26px;width:auto;flex-shrink:0;color:#8f8a80}
@media(max-width:760px){.customer-logos{gap:10px 22px}}
/* Calculator */
.calculator-section{background:var(--paper);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.calc-field label{color:var(--ink)}
.calc-field output{background:#fff;border:1.5px solid var(--ink);border-radius:8px;color:var(--ink);font-weight:600}
.calc-field input[type=range]{accent-color:var(--ink)}
.calculator-result{background:var(--ink);border-radius:26px;color:#fff;box-shadow:8px 8px 0 var(--butter)}
.result-orbit{border-color:#ffffff33}
.result-orbit span{color:var(--butter)}
.calculator-result .eyebrow{color:#cfcbc2}
.calculator-result>p{color:#d9d5cc}
.calc-multiple{color:#fff}
.calculator-result .button{background:#fff;color:var(--ink);border-color:#fff;box-shadow:4px 4px 0 var(--butter)}
.calculator-result .button:hover{background:var(--butter);box-shadow:5px 5px 0 var(--butter)}
.calculator-result p.calc-assumptions{color:#aaa69d}
/* Pricing */
.guarantee{border-top:1.5px solid var(--ink)}
.guarantee-seal{background:var(--butter);color:var(--butter-ink);border:1.5px solid var(--ink);border-radius:14px;font-weight:600}
.price-card{background:#fff;border:1.5px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink)}
.price-card-top .pill{background:var(--mint);color:var(--mint-ink);border-color:var(--mint-ink)}
.billing-toggle{background:var(--cream);border:1.5px solid var(--ink);border-radius:10px}
.billing-toggle button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.billing-toggle button span{color:inherit;opacity:.8}
.price strong{font-family:var(--body);font-weight:600}
.price-features li:before{color:#4e9a3a;font-weight:700}
.price-features{border-top-color:var(--line)}
.roadmap summary span{border-color:var(--ink)}
/* Trust */
.trust-section{background:var(--cream);border-top:1.5px solid var(--ink)}
.trust-visual{margin:40px 0 0;max-width:380px;aspect-ratio:4/3;border:1.5px solid var(--ink);border-radius:18px;background:var(--peach);box-shadow:var(--shadow);display:grid;place-items:end center;overflow:hidden}
.trust-visual img{width:70%;height:88%;object-fit:contain;object-position:bottom}
.trust-number{font-style:normal;font-weight:600;color:var(--ink)}
.trust-item{border-bottom-color:#d9d3c7}
/* FAQ */
.faq-item,.faq-item:first-child{border-color:#d9d3c7}
.faq-item summary{font-weight:600}
.faq-item summary span{color:var(--ink)}
/* Closing */
.closing-section{background:var(--lavender);border-top:1.5px solid var(--ink);padding:90px 0 0;overflow:hidden}
.closing-section:before,.closing-section:after{content:none}
.closing-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.closing-inner{text-align:left;padding-bottom:90px}
.closing-inner>.eyebrow{justify-content:flex-start;color:var(--lavender-ink)}
.closing-star{color:var(--lavender-ink)}
.closing-inner>p{color:#3f3b5e}
.closing-note{color:#5a558a}
.closing-visual{margin:0;align-self:end;display:flex;justify-content:center}
.closing-visual img{width:min(100%,520px);height:auto;display:block}
/* Footer */
.site-footer{border-top:1.5px solid var(--ink);background:var(--paper)}
.footer-brand p,.footer-column,.footer-column>strong,.footer-column>span,.footer-bottom{color:var(--muted)}
.footer-column a:hover{color:var(--butter-ink)}
.footer-column .footer-book{color:var(--ink);border-bottom-color:var(--ink)}
.footer-bottom{border-top-color:var(--line)}
@media(max-width:1150px){.hero-mascot{height:330px;left:-10px}.hero-stage .phone{transform:translateX(80px) rotate(-4deg)}}
@media(max-width:950px){.hero-mascot{height:270px;left:-8px}.hero-stage .phone{transform:translateX(62px) rotate(-4deg)}.closing-grid{grid-template-columns:1fr;gap:10px}.closing-inner{padding-bottom:40px}.closing-visual img{width:min(100%,380px)}.trust-visual{max-width:none;aspect-ratio:16/9}.trust-visual img{width:52%;height:92%}.step-visual{max-width:460px;aspect-ratio:4/3}.step-visual img{height:88%}}
@media(max-width:760px){.hero-stage{border-radius:18px}.hero-mascot{height:230px;left:-12px;bottom:-8px}.hero-stage .phone{transform:translateX(58px) rotate(-4deg) scale(.9);transform-origin:100% 100%}.closing-inner{text-align:center}.closing-inner>.eyebrow{justify-content:center}}
@media(max-width:440px){.hero-mascot{height:205px;left:-16px}.hero-stage .phone{transform:translateX(50px) rotate(-3deg) scale(.88);transform-origin:100% 100%}}

/* ---- Polish & motion (2026-10-04) ---- */
h1{font-size:clamp(48px,5.6vw,80px)}
h2{font-size:clamp(38px,4.6vw,64px)}
.hero-description{font-size:17px;max-width:420px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:10px;letter-spacing:.14em}
.section-heading .eyebrow,.hero .eyebrow,.draft-copy .eyebrow,.calculator-copy .eyebrow,.pricing-copy .eyebrow,.trust-copy .eyebrow,.faq-heading .eyebrow,.closing-inner>.eyebrow{margin-bottom:26px}
.draft-copy .eyebrow{background:#fff;color:var(--ink)}
.calculator-result .eyebrow{background:transparent;border-color:#ffffff44;color:#e9e5db;margin-bottom:10px}
.closing-inner>.eyebrow{background:#fff;color:var(--lavender-ink)}
/* Floating pill nav that tucks away while reading */
.site-header{position:sticky;top:12px;z-index:80;width:min(1240px,calc(100% - 40px));margin:12px auto 0;border:1.5px solid var(--ink);border-radius:999px;background:#fbfaf7f0;box-shadow:4px 4px 0 var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.site-header.nav-hidden{transform:translateY(calc(-100% - 20px))}
.site-header .nav{height:66px;width:auto;padding:0 10px 0 22px}
.nav .button{min-height:42px;padding:12px 18px;gap:16px;box-shadow:3px 3px 0 var(--ink)}
.hero{padding-top:48px}
@media(max-width:760px){.site-header{top:10px;width:calc(100% - 20px);margin-top:10px}.site-header .nav{height:60px;padding:0 8px 0 16px}.nav-links{top:68px;left:-1.5px;right:-1.5px;border:1.5px solid var(--ink);border-radius:20px;box-shadow:4px 4px 0 var(--ink);background:#fbfaf7}.menu-toggle{border-radius:999px;border-color:var(--ink)}}
/* Buttons: arrow nudge */
.button span[aria-hidden],.text-link>span[aria-hidden]{transition:transform .2s}
.button:hover span[aria-hidden]{transform:translate(2px,-2px)}
.text-link:hover>span[aria-hidden]{transform:translate(2px,-2px)}
/* Hero entrance */
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .hero-copy>*{animation:fade-up .7s cubic-bezier(.2,.8,.2,1) both}
.js .hero-copy>:nth-child(1){animation-delay:.05s}.js .hero-copy>:nth-child(2){animation-delay:.12s}.js .hero-copy>:nth-child(3){animation-delay:.22s}.js .hero-copy>:nth-child(4){animation-delay:.3s}.js .hero-copy>:nth-child(5){animation-delay:.36s}.js .hero-copy>:nth-child(6){animation-delay:.42s}
.js .hero-stage{animation:fade-up .8s cubic-bezier(.2,.8,.2,1) .2s both}
/* Highlighter marks draw in */
.js h1 em,.js h2 em{background:linear-gradient(var(--mark),var(--mark)) no-repeat left center/0% 100%;color:var(--ink);transition:background-size .8s cubic-bezier(.2,.8,.2,1),color .4s ease .25s}
.js .is-inked em{background-size:100% 100%;color:var(--mark-ink)}
.js h1.is-inked em{transition-delay:.6s,.85s}
/* Mascot idle, floating note, sparkles */
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-7px) rotate(.8deg)}}
@keyframes twinkle{0%,100%{transform:scale(.8) rotate(-8deg);opacity:.55}50%{transform:scale(1.1) rotate(8deg);opacity:1}}
.hero-mascot{animation:bob 4.5s ease-in-out infinite;transform-origin:50% 100%}
.doodle{position:absolute;width:30px;height:30px;z-index:2;pointer-events:none;animation:twinkle 3.2s ease-in-out infinite}
.doodle-1{top:62px;right:46px;width:34px;height:34px}
.doodle-2{top:230px;left:34px;width:22px;height:22px;animation-delay:-1.2s}
.doodle-3{bottom:150px;right:120px;width:18px;height:18px;animation-delay:-2.1s}
/* Chat playback */
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes typing{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
.message.pop{animation:pop .35s cubic-bezier(.2,.8,.2,1)}
.message.typing{display:flex;gap:4px;align-items:center;padding:12px 14px;min-height:34px;animation:pop .25s ease}
.message.typing span{width:6px;height:6px;border-radius:50%;background:#8d8a82;animation:typing 1.1s ease-in-out infinite}
.message.typing span:nth-child(2){animation-delay:.15s}.message.typing span:nth-child(3){animation-delay:.3s}
.scenario-picker button{transition:background .25s,color .25s}
.phone-compose button{transition:opacity .2s}
.phone-compose button:disabled{opacity:.5}
/* Ticker */
.ticker{overflow:hidden;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--butter);padding:13px 0;margin-top:-1.5px}
.ticker-track{display:flex;width:max-content;gap:34px;align-items:center;padding-left:34px;font-family:var(--body);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;animation:ticker 52s linear infinite}
.ticker-track .spark{color:var(--butter-ink);font-family:var(--body);font-size:15px}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
/* Staggered reveals and sticker hover */
.feature-grid>.reveal.reveal-pending:nth-child(2),.steps>.reveal.reveal-pending:nth-child(2){transition-delay:.12s}
.feature-grid>.reveal.reveal-pending:nth-child(3),.steps>.reveal.reveal-pending:nth-child(3){transition-delay:.24s}
.trust-items>.reveal.reveal-pending:nth-child(2){transition-delay:.1s}.trust-items>.reveal.reveal-pending:nth-child(3){transition-delay:.2s}.trust-items>.reveal.reveal-pending:nth-child(4){transition-delay:.3s}
.feature,.price-card,.step-visual,.trust-visual,.draft-tool{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.feature.reveal.reveal-pending.is-visible,.price-card.reveal.reveal-pending.is-visible,.draft-tool.reveal.reveal-pending.is-visible{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .6s;transition-delay:0s}
.feature:hover,.feature.reveal.reveal-pending.is-visible:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:7px 7px 0 var(--ink)}
.step-visual:hover,.trust-visual:hover{transform:translate(-2px,-2px) rotate(.6deg);box-shadow:6px 6px 0 var(--ink)}
.price-card:hover,.price-card.reveal.reveal-pending.is-visible:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.step-visual img,.trust-visual img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.step-visual:hover img,.trust-visual:hover img{transform:translateY(-4px)}
/* Price card: mascot peeking over the corner */
.price-card{position:relative}
.price-mascot{position:absolute;top:-82px;right:-28px;height:136px;width:auto;transform:rotate(7deg);pointer-events:none;filter:drop-shadow(0 2px 0 #1b1a1722)}
@media(max-width:760px){.price-mascot{height:98px;top:-60px;right:-8px}}
/* Hand-drawn wavy edges on the sand demo block */
.draft-section{position:relative;border-top:0;border-bottom:0;padding:120px 0}
.draft-section:before,.draft-section:after{content:'';position:absolute;left:0;right:0;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 11Q30 1 60 11T120 11V0H0Z' fill='%23fbfaf7'/%3E%3Cpath d='M0 11Q30 1 60 11T120 11' fill='none' stroke='%231b1a17' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left top;pointer-events:none}
.draft-section:before{top:-1px}
.draft-section:after{bottom:-1px;transform:scaleY(-1)}
/* FAQ */
@keyframes fade-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-item summary span{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.faq-item[open]>p{animation:fade-down .3s ease both}
.faq-item summary:hover{color:var(--butter-ink)}
.billing-toggle button{transition:background .2s,color .2s}
/* Closing: hammock sway */
@keyframes sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.closing-visual img{animation:sway 6s ease-in-out infinite;transform-origin:50% 20%}

/* ---- Living mascot: body, waving arm and blinking eyes as separate layers ---- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-mascot{display:block;height:380px;width:auto;aspect-ratio:560/954;filter:none;transform-origin:50% 100%;animation:idle 9s ease-in-out infinite}
.hero-mascot img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mascot-arm{transform-origin:21.4% 48.4%;animation:wave 6.5s ease-in-out infinite}
.mascot-lids{opacity:0;animation:blink 5.3s step-end infinite}
@keyframes idle{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-3px) scaleY(1.012)}55%{transform:translateY(0) scaleY(1)}70%{transform:translateY(-16px) scale(1.01,.985)}74%{transform:translateY(0) scale(.985,1.015)}78%{transform:translateY(-5px) scaleY(1)}82%{transform:translateY(0)}}
@keyframes wave{0%,10%{transform:rotate(0)}16%{transform:rotate(-9deg)}22%{transform:rotate(4deg)}28%{transform:rotate(-8deg)}34%{transform:rotate(3deg)}40%{transform:rotate(-6deg)}46%,100%{transform:rotate(0)}}
@keyframes blink{0%,92%{opacity:0}92.5%,95%{opacity:1}95.5%,100%{opacity:0}}

/* Readable type throughout the existing illustrated layout. */
body { font-size: 16px; }
h1, h2, h3, h1 em, h2 em {
  font-family: var(--body);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.12; }
h2, .draft-copy h2, .calculator-copy h2, .trust-copy h2,
.faq-heading h2, .closing-inner h2 {
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.2;
}
h3, .feature h3 { line-height: 1.3; letter-spacing: -.015em; }
.hero-description { font-size: 18px; line-height: 1.65; }
.split-heading>p, .feature>p, .draft-copy>p, .centered p, .step p,
.calculator-copy>p, .pricing-copy>p, .trust-copy>p, .trust-item p,
.faq-heading p, .faq-item p, .closing-inner>p { font-size: 16px; line-height: 1.65; }
.feature>p { min-height: 0; }
.step h3 { font-size: 22px; }
.trust-item h3 { font-size: 20px; }
.faq-item summary { font-size: 16px; }
.eyebrow, .hero .eyebrow, .closing-inner>.eyebrow,
.calculator-result .eyebrow { font-size: 12px; letter-spacing: .07em; }
.button, .button-small, .hero-actions .text-link, .demo-row .button,
.calculator-result .button, .price-card>.button, .closing-inner>.button,
.text-link, .pricing-copy .text-link, .trust-copy>.text-link,
.trust-item .text-link, .draft-tool #demoResult .text-link { font-size: 14px; }
.nav-links>a:not(.button) { font-size: 14px; }
.hero-fine { font-size: 13px; flex-wrap: wrap; }
.hero-assurance, .hero-assurance strong { font-size: 14px; }
.integrations>p, .integration-note { font-size: 13px; }
.pill, .price-card-top .pill { font-size: 11px; letter-spacing: .06em; }
.feature-index { font-family: var(--body); font-style: normal; }
.email-visual, .calendar-visual, .briefing-visual { height: auto; min-height: 340px; }
.email-top b, .cal-title b { font-size: 12px; }
.email-top small, .email-tag, .draft-label, .approval-label,
.cal-title>span, .cal-days>span, .cal-event>span, .cal-event small,
.briefing-visual small { font-size: 11px; letter-spacing: .02em; }
.email-visual>p, .draft-mini p, .cal-event>div { font-size: 13px; }
.cal-days b { font-size: 15px; font-weight: 500; }
.briefing-visual p { font-family: var(--body); font-size: 15px; line-height: 1.65; letter-spacing: 0; }
.briefing-bottom { font-size: 12px; line-height: 1.5; gap: 8px; }
.section-footnote, .draft-copy p.demo-disclosure, .demo-note,
.how-note p, .guarantee p, .plan-billing, .annual-price-note,
.price-call-note, .price-access-note, .roadmap p, .closing-note { font-size: 13px; line-height: 1.65; }
.plan-billing { font-size: 13px !important; }
.draft-benefits, .tool-heading strong, .draft-tool label,
.result-body p, .calc-field label, .calc-field output,
.calculator-result>p, .price-card>p:first-of-type,
.billing-toggle button, .price>span, .price-features li, .roadmap { font-size: 15px; }
.draft-tool textarea { font-size: 16px; line-height: 1.65; }
.tool-label, .demo-count, .result-heading, .billing-toggle button span,
.roadmap summary span, .guarantee-seal span { font-size: 11px; letter-spacing: .04em; }
.calculator-result p.calc-assumptions { font-size: 12px; line-height: 1.65; }
.calc-multiple { font-size: 14px; }
.hours, .price strong { letter-spacing: -.025em; font-weight: 600; }
.stage-label { font-size: 11px; letter-spacing: .06em; }
.phone-contact strong { font-size: 14px; }
.phone-contact small { font-size: 11px; }
.thread-time { font-size: 9px; letter-spacing: 0; }
.message { font-size: 13px; line-height: 1.5; }
.phone-compose button, .scenario-picker button { font-size: 12px; }
.scenario-picker button { padding-inline: 11px; }
.footer-brand p, .footer-column, .footer-column .footer-book { font-size: 14px; }
.footer-column>strong, .footer-column>span, .footer-bottom { font-size: 12px; line-height: 1.6; }
.footer-column>strong { letter-spacing: .06em; }
.ticker-track { font-size: 17px; letter-spacing: 0; }
.tool-heading, .price-card-top { flex-wrap: wrap; }
.hero-copy, .split-heading>div, .feature, .draft-copy, .draft-tool,
.calculator-copy, .calculator-result, .pricing-copy, .price-card,
.trust-copy, .faq-heading, .faq-list, .closing-inner { min-width: 0; }
@media (max-width: 1150px) and (min-width: 761px) {
  .nav { gap: 20px; }
  .nav-links { gap: 16px; }
}
@media (max-width: 760px) {
  .hero .eyebrow { font-size: 11px; }
  .hero-description { font-size: 17px; }
  .feature h3 { font-size: 26px; }
  .footer-bottom>div { flex-wrap: wrap; gap: 12px 20px; }
}

/* Preserve readable sizes over the original narrow-screen rules. */
.feature .pill { font-size: 11px; }
.draft-copy .eyebrow { font-size: 12px; }
.step-top>span:first-child, .trust-number { font-size: 13px; }
.nav .button, .hero-actions .button { font-size: 14px; }

@media (min-width: 761px) and (max-width: 950px) {
  .price-mascot { right: -8px; }
}

/* Readable small print: full sentences at 13px or more, card labels at 12px. */
.email-top small, .email-tag, .draft-label, .approval-label,
.cal-title>span, .cal-days>span, .cal-event>span, .cal-event small,
.briefing-visual small { font-size: 12px; }
.briefing-bottom, .calculator-result p.calc-assumptions { font-size: 13px; }
.faq-heading .text-link, .closing-inner .text-link { font-size: 14px; }
.footer-column>span, .footer-bottom, .footer-bottom a { font-size: 13px; }

/* Draft demo: one-tap example email. */
.demo-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.demo-label-row label { margin: 0; }
.demo-example { min-height: 36px; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--butter); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: transform .15s ease; }
.demo-example:hover { transform: translateY(-1px); }
.demo-example:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Tour video (2026-10-11): right after the hero. Nothing downloads until someone
   presses play; the cover is a lazy image, the video is preload="none". */
.tour-section { --mark: var(--sky); --mark-ink: var(--sky-ink); padding-top: 72px; }
.tour-frame { position: relative; aspect-ratio: 16 / 9; max-width: 1100px; margin: 0 auto; border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; background: var(--sand); }
.tour-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #1b1a17; }
.tour-cover { position: absolute; inset: 0; display: block; cursor: pointer; }
.tour-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(27, 26, 23, .22)); }
.tour-play { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; padding: 12px 24px 12px 12px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow); font-size: 18px; font-weight: 600; line-height: 1.15; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; }
.tour-play i { width: 50px; height: 50px; flex-shrink: 0; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--butter); font-style: normal; font-size: 18px; padding-left: 3px; }
.tour-play small { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--muted); }
.tour-cover:hover .tour-play, .tour-cover:focus-visible .tour-play { transform: translate(-50%, -50%) translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.tour-cover:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.tour-end { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(251, 250, 247, .96); }
.tour-end .eyebrow { margin: 0; justify-content: center; }
.tour-end h3 { max-width: 560px; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.12; }
.tour-end-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; }
.tour-replay { padding: 6px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tour-transcript { max-width: 1100px; margin: 20px auto 0; }
.tour-transcript summary { display: inline-block; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.tour-transcript p { max-width: 760px; margin-top: 12px; font-size: 15px; line-height: 1.75; }
.tour-transcript .tour-note { font-size: 13px; }
@media (max-width: 760px) {
  .tour-section { padding-top: 48px; }
  .tour-frame { border-radius: 16px; }
  .tour-play { gap: 10px; padding: 8px 16px 8px 8px; font-size: 15px; }
  .tour-play i { width: 40px; height: 40px; font-size: 15px; }
  .tour-play small { font-size: 12px; }
  .tour-end { gap: 10px; padding: 14px; }
  .tour-end .eyebrow { display: none; }
  .tour-end h3 { font-size: 20px; }
  .tour-end .button { padding: 12px 18px; min-height: 44px; }
}