:root { --ink:#17231f; --cream:#f5f2e9; --paper:#fffdf8; --mint:#cce8d8; --green:#174d3b; --lime:#d7ef72; --orange:#f2a461; --purple:#8e76bd; --line:rgba(23,35,31,.15); --radius:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; }
.skip-link { position:absolute; left:-9999px; top:12px; z-index:50; background:var(--ink); color:white; padding:10px 14px; border-radius:8px; }
.skip-link:focus { left:12px; }
.site-header { max-width:1280px; margin:auto; padding:22px 32px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { display:inline-flex; align-items:center; gap:10px; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:20px; font-weight:800; text-decoration:none; letter-spacing:-.04em; }
.wordmark-mark { display:grid; place-items:center; width:34px; height:34px; color:var(--cream); background:var(--green); border-radius:10px 10px 10px 3px; font-size:15px; }
.section { max-width:1280px; margin:0 auto; padding:110px 56px; }
.eyebrow { margin:0 0 16px; color:var(--green); font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow-light { color:var(--lime); }
h1,h2,h3 { font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin-top:0; letter-spacing:-.055em; line-height:1.04; }
h1 { max-width:790px; margin-bottom:28px; font-size:clamp(3.25rem,6.3vw,6rem); }
h1 em { color:var(--green); font-style:normal; position:relative; white-space:nowrap; }
h1 em::after { content:""; position:absolute; left:1%; right:0; bottom:-3px; height:9px; background:var(--lime); border-radius:50%; z-index:-1; transform:rotate(-1deg); }
h2 { margin-bottom:28px; font-size:clamp(2.35rem,4.7vw,4.65rem); }
h3 { font-size:1.25rem; }
p { margin-top:0; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:54px; padding:14px 22px; border:2px solid var(--green); border-radius:999px; background:var(--green); color:white; font-weight:700; text-align:center; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 9px 0 var(--lime); }
.button:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.button-small { min-height:42px; padding:9px 16px; font-size:.86rem; }
.button-ghost { background:transparent; color:var(--green); }
.button-light { background:var(--lime); border-color:var(--lime); color:var(--ink); }
.hero { min-height:740px; display:grid; grid-template-columns:1.18fr .82fr; gap:64px; align-items:center; padding-top:70px; }
.hero-lede { max-width:700px; font-size:1.22rem; color:#40504a; }
.hero-actions { margin-top:36px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.microcopy { font-size:.85rem; font-weight:600; color:#62716b; }
.hero-visual { min-height:560px; position:relative; }
.recording-card { position:absolute; inset:0 45px 40px 0; overflow:hidden; padding:30px; background:var(--green); color:white; border-radius:42% 42% 28px 28px/22% 22% 28px 28px; box-shadow:24px 24px 0 var(--mint); }
.recording-label { display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; letter-spacing:.04em; }
.recording-label i { width:8px; height:8px; border-radius:50%; background:#ff7b69; box-shadow:0 0 0 5px rgba(255,123,105,.15); }
.recording-person { width:180px; height:180px; margin:75px auto 0; position:relative; border:2px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(255,255,255,.08); }
.person-head { position:absolute; width:52px; height:52px; left:64px; top:36px; border-radius:50%; background:var(--cream); }
.person-body { position:absolute; width:100px; height:56px; left:39px; top:99px; border-radius:50px 50px 10px 10px; background:var(--cream); }
.prompt-card { position:absolute; left:28px; right:28px; bottom:28px; padding:18px; background:var(--paper); color:var(--ink); border-radius:16px; }
.prompt-card small { display:block; color:var(--green); font-weight:700; text-transform:uppercase; font-size:.67rem; letter-spacing:.1em; }
.prompt-card strong { display:block; margin-top:5px; line-height:1.3; }
.content-stack { position:absolute; right:0; top:90px; display:grid; gap:10px; }
.mini-piece { width:130px; min-height:105px; padding:15px; border:5px solid var(--cream); border-radius:16px; box-shadow:0 10px 30px rgba(23,35,31,.14); display:flex; flex-direction:column; justify-content:space-between; transform:rotate(4deg); }
.mini-piece span { font-size:.7rem; font-weight:800; }
.mini-piece b { font-size:.82rem; line-height:1.2; }
.piece-video { background:var(--orange); }
.piece-post { background:var(--lime); transform:rotate(-3deg); }
.piece-story { background:var(--purple); color:white; transform:rotate(2deg); }
.section-dark { max-width:none; padding-left:max(56px,calc((100vw - 1168px)/2)); padding-right:max(56px,calc((100vw - 1168px)/2)); background:var(--ink); color:white; display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.section-heading { max-width:820px; }
.problem .section-heading h2 { margin:0; font-size:clamp(2.6rem,5vw,5rem); }
.problem-copy { padding-top:42px; color:#d4dbd7; font-size:1.18rem; }
.problem-copy p + p { margin-top:28px; }
.steps { padding:0; margin:70px 0 0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.steps li { min-height:260px; padding:25px 26px 20px 0; border-right:1px solid var(--line); }
.steps li + li { padding-left:26px; }
.steps li:last-child { border-right:0; }
.steps span { display:block; margin-bottom:52px; color:var(--green); font-size:.76rem; font-weight:800; }
.steps p { color:#5b6964; }
.deliverables { background:var(--paper); border-radius:36px; }
.deliverable-grid { display:grid; grid-template-columns:1.2fr .8fr 1fr 1fr; gap:14px; }
.deliverable-card { min-height:350px; padding:28px; position:relative; overflow:hidden; border-radius:20px; }
.deliverable-card strong { font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; display:block; font-size:3rem; letter-spacing:-.07em; }
.deliverable-card p { max-width:280px; font-size:.92rem; }
.card-video { background:var(--green); color:white; }
.card-posts { background:var(--orange); }
.card-stories { background:var(--purple); color:white; }
.card-copy { background:var(--lime); }
.format-icon { position:absolute; right:25px; bottom:22px; width:90px; height:125px; border:2px solid currentColor; border-radius:16px; opacity:.8; }
.phone-icon i { position:absolute; left:12px; right:12px; bottom:10px; height:4px; background:currentColor; border-radius:4px; }
.tiles-icon { border:0; }
.tiles-icon i { position:absolute; width:68px; height:88px; border:2px solid currentColor; border-radius:12px; }
.tiles-icon i:first-child { left:0; top:20px; transform:rotate(-8deg); }
.tiles-icon i:last-child { right:0; top:0; transform:rotate(8deg); }
.story-icon { height:90px; border-radius:50%; }
.story-icon i { position:absolute; inset:9px; border:2px dashed currentColor; border-radius:50%; }
.copy-icon { border:0; height:100px; }
.copy-icon i { display:block; height:4px; margin:18px 0; background:currentColor; border-radius:4px; }
.copy-icon i:nth-child(2){width:72%;}.copy-icon i:nth-child(3){width:88%;}
.comparison .section-heading > p:last-child { max-width:700px; font-size:1.1rem; color:#586660; }
.comparison-grid { margin-top:56px; display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; }
.example-card { min-width:0; padding:18px; border:1px solid var(--line); background:var(--paper); border-radius:24px; box-shadow:0 20px 60px rgba(23,35,31,.08); }
.example-head { padding:6px 6px 18px; }
.example-head span { display:block; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:800; font-size:1.15rem; }
.example-head small { color:#69756f; }
.generic-art,.reel-art { aspect-ratio:4/3; border-radius:16px; padding:28px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.generic-art { background:#376d92; color:white; text-align:center; }
.generic-art b { font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.05; }
.generic-art ul { list-style:none; margin:25px 0 0; padding:15px; background:white; color:var(--ink); border-radius:12px; font-size:.8rem; }
.house-roof { width:35px; height:35px; margin:0 auto 20px; background:white; clip-path:polygon(50% 0,100% 42%,86% 42%,86% 100%,58% 100%,58% 66%,42% 66%,42% 100%,14% 100%,14% 42%,0 42%); }
.reel-art { background:linear-gradient(145deg,#3e6656,#9bc8ac); color:white; align-items:center; text-align:center; }
.concept-pill { position:absolute; left:16px; top:16px; padding:5px 9px; border-radius:99px; background:rgba(255,255,255,.9); color:var(--ink); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.reel-person { width:90px; height:90px; margin-bottom:20px; border:2px solid rgba(255,255,255,.6); border-radius:50%; display:grid; place-items:center; }
.reel-person span { width:42px; height:42px; border:3px solid white; border-radius:50% 50% 45% 45%; position:relative; }
.reel-person span::after { content:""; position:absolute; width:58px; height:30px; border:3px solid white; border-bottom:0; border-radius:35px 35px 0 0; left:-11px; top:46px; }
.reel-art b { max-width:440px; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:clamp(1.25rem,2.3vw,1.8rem); }
.reel-art small { margin-top:15px; color:#e6f0e9; }
.example-card > p { padding:18px 8px 0; margin-bottom:2px; color:#596760; }
.versus { text-align:center; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:800; color:#718078; }
.disclaimer { margin-top:22px; text-align:center; font-size:.78rem; color:#6c7772; }
.offer { max-width:none; padding-left:max(56px,calc((100vw - 1168px)/2)); padding-right:max(56px,calc((100vw - 1168px)/2)); background:var(--green); color:white; display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.offer h2 { font-size:clamp(4rem,8vw,7.5rem); margin-bottom:25px; color:var(--lime); }
.offer h2 span { color:white; font-size:1.3rem; letter-spacing:-.03em; }
.offer-copy > p:last-child { max-width:570px; color:#d7e3dd; }
.offer-list { background:white; color:var(--ink); padding:36px; border-radius:24px; }
.offer-list ul { list-style:none; padding:0; margin:0 0 28px; }
.offer-list li { padding:12px 0 12px 28px; position:relative; border-bottom:1px solid var(--line); }
.offer-list li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.faq { display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { padding:23px 44px 23px 0; cursor:pointer; list-style:none; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:700; font-size:1.08rem; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:8px; top:16px; font-size:1.7rem; font-weight:400; transition:transform .2s ease; }
details[open] summary::after { transform:rotate(45deg); }
details p { padding:0 42px 24px 0; color:#586660; }
.final-cta { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:80px; padding-top:80px; padding-bottom:80px; border-top:1px solid var(--line); }
.final-cta h2 { margin-bottom:20px; }
.apply-panel { padding:35px; background:var(--mint); border-radius:24px; text-align:center; }
.apply-panel .button { width:100%; }
.apply-panel p { margin:14px 0 0; font-size:.75rem; color:#52625b; }
footer { max-width:1280px; margin:auto; padding:35px 56px 55px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:30px; color:#607069; font-size:.8rem; }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
@media (max-width:900px){.section{padding:80px 28px}.hero{grid-template-columns:1fr;gap:20px}.hero-visual{min-height:520px;max-width:520px;width:100%;margin:auto}.section-dark,.offer{grid-template-columns:1fr;gap:30px;padding-left:28px;padding-right:28px}.problem-copy{padding-top:0}.steps{grid-template-columns:1fr 1fr}.steps li:nth-child(2){border-right:0}.deliverable-grid{grid-template-columns:1fr 1fr}.comparison-grid{grid-template-columns:1fr}.versus{padding:20px}.faq,.final-cta{grid-template-columns:1fr;gap:35px}}
@media (max-width:600px){.site-header{padding:16px 18px}.site-header .button{display:none}.section{padding:64px 20px}.hero{padding-top:45px}.hero-lede{font-size:1.05rem}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions .button{width:100%}.hero-visual{min-height:440px}.recording-card{right:20px;padding:22px}.recording-person{width:140px;height:140px;margin-top:70px}.person-head{left:49px;top:28px}.person-body{left:19px;top:86px}.content-stack{right:-8px;top:65px}.mini-piece{width:100px;min-height:82px;padding:11px}.section-dark,.offer{padding-left:20px;padding-right:20px}.steps{grid-template-columns:1fr;margin-top:40px}.steps li,.steps li+li{min-height:0;padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}.steps span{margin-bottom:18px}.deliverables{border-radius:0}.deliverable-grid{grid-template-columns:1fr}.deliverable-card{min-height:270px}.generic-art,.reel-art{aspect-ratio:1/1}.offer-list{padding:24px 20px}.faq{gap:10px}.final-cta{padding-top:64px;padding-bottom:64px}.apply-panel{padding:24px 18px}footer{padding:30px 20px;align-items:flex-start;flex-direction:column}}