/* Hero */
.hero { display: flex; align-items: center; min-height: 760px; padding: 150px 0 90px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.hero h1 { max-width: 760px; font-size: clamp(58px, 7.4vw, 104px); }
.hero h1 .scribble { position: relative; color: var(--blue); white-space: nowrap; }
.hero h1 .scribble::after { content: ""; position: absolute; right: 0; bottom: -7px; left: 2%; height: 10px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 15C120 2 290 21 497 6' fill='none' stroke='%23ff654d' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.hero-copy > p { max-width: 650px; margin: 30px 0; color: #4d4a44; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.mini-proof { display: flex; align-items: center; gap: 12px; margin-top: 35px; font-size: 13px; font-weight: 700; }
.faces { display: flex; }
.face { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--pink); font-size: 16px; }
.face:first-child { margin-left: 0; }.face:nth-child(2) { background: var(--yellow); }.face:nth-child(3) { background: var(--mint); }
.hero-visual { position: relative; height: 540px; }
.visual-board { position: absolute; inset: 35px 15px 25px 25px; overflow: hidden; border: var(--line); border-radius: 38px; background: var(--blue); box-shadow: 12px 12px 0 var(--ink); transform: rotate(2deg); }
.visual-board::before { content: ""; position: absolute; top: -90px; right: -70px; width: 320px; height: 320px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.visual-title { position: absolute; top: 38px; left: 35px; color: white; font: 700 34px "Space Grotesk"; line-height: 1.05; transform: rotate(-2deg); }
.visual-title span { color: var(--yellow); }
.poll-card { position: absolute; right: 42px; bottom: 45px; left: 45px; padding: 22px; border: var(--line); border-radius: 24px; background: var(--paper); transform: rotate(-3deg); }
.poll-top, .poll-note { display: flex; justify-content: space-between; }.poll-top { font: 500 11px "DM Mono"; text-transform: uppercase; }.poll-note { margin-top: 10px; font-size: 12px; font-weight: 700; }
.poll-score { margin: 8px 0; color: var(--blue); font: 700 72px "Space Grotesk"; line-height: 1; letter-spacing: -.07em; }
.poll-track { overflow: hidden; height: 14px; border: 2px solid; border-radius: 99px; background: #ddd; }.poll-fill { width: 84%; height: 100%; background: var(--coral); animation: grow 1.5s ease both; }
.float-card, .sticker { position: absolute; z-index: 3; border: var(--line); box-shadow: 5px 5px 0 var(--ink); font-weight: 800; }.float-card { padding: 14px 17px; border-radius: 17px; background: white; animation: float 4s ease-in-out infinite; }.float-card b { display: block; font: 700 24px "Space Grotesk"; }.fc1 { top: 50px; right: -18px; transform: rotate(7deg); }.fc2 { top: 240px; left: -30px; transform: rotate(-8deg); animation-delay: -1.2s; }
.sticker { padding: 9px 14px; border-radius: 999px; font: 500 11px "DM Mono"; text-transform: uppercase; }.s1 { top: 20px; left: -10px; background: var(--pink); transform: rotate(-9deg); }.s2 { right: -25px; bottom: 35px; background: var(--yellow); transform: rotate(7deg); }
.spark { position: absolute; z-index: 4; font-size: 50px; font-weight: 900; animation: spin 9s linear infinite; }.spark.one { top: 185px; right: 20px; color: var(--coral); }.spark.two { bottom: 50px; left: 8px; color: var(--yellow); font-size: 30px; }
.marquee { width: 102%; margin-left: -1%; padding: 13px 0; overflow: hidden; border-block: var(--line); background: var(--yellow); transform: rotate(-1deg); }.marquee-track { display: flex; gap: 26px; width: max-content; font: 700 16px "Space Grotesk"; text-transform: uppercase; animation: marquee 28s linear infinite; }.marquee-track span::after { content: "✦"; margin-left: 26px; color: var(--blue); }

/* Simulator */
.sim-section { position: relative; background: var(--pink); }.sim-section::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px); background-size: 25px 25px; }.sim-wrap { position: relative; }.sim-card { overflow: hidden; border: var(--line); border-radius: 34px; background: var(--paper); box-shadow: 12px 12px 0 var(--ink); }
.sim-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: var(--line); background: var(--yellow); font: 500 12px "DM Mono"; text-transform: uppercase; }.window-dots { display: flex; gap: 7px; }.window-dots i { width: 12px; height: 12px; border: 2px solid; border-radius: 50%; background: var(--coral); }.window-dots i:nth-child(2) { background: var(--mint); }.window-dots i:nth-child(3) { background: white; }
.sim-inner { padding: 34px; }.sim-intro { display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: start; margin-bottom: 30px; }.sim-intro h2 { font-size: clamp(36px, 5vw, 62px); }.sim-intro p { max-width: 650px; margin: 8px 0 0; color: var(--muted); }.live-pill { padding: 9px 13px; border: var(--line); border-radius: 999px; background: var(--mint); font: 500 11px "DM Mono"; white-space: nowrap; }.live-pill::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--blue); animation: pulse 1.5s infinite; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }.field { display: flex; flex-direction: column; gap: 8px; }.field.full { grid-column: 1 / -1; }.field label { font: 500 12px "DM Mono"; text-transform: uppercase; letter-spacing: .04em; }.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 14px 15px; border: var(--line); border-radius: 14px; outline: none; background: white; transition: .2s; }.field textarea { min-height: 120px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 4px 4px 0 var(--blue); transform: translate(-1px, -1px); }.sim-submit { width: 100%; margin-top: 24px; padding: 17px; font-size: 16px; }.sim-submit .arrow { transition: .2s; }.sim-submit:hover .arrow { transform: translateX(5px); }
.results { display: none; margin-top: 38px; padding-top: 38px; border-top: 2px dashed var(--ink); }.results.show { display: block; animation: reveal .5s ease both; }.result-summary { display: grid; grid-template-columns: 300px 1fr; gap: 30px; }.score-wheel { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: var(--line); border-radius: 50%; background: conic-gradient(var(--blue) var(--score), #e9e4d9 0); box-shadow: 7px 7px 0 var(--ink); }.score-wheel::after { content: ""; position: absolute; inset: 22px; border: var(--line); border-radius: 50%; background: var(--paper); }.score-text { position: relative; z-index: 2; text-align: center; }.score-text strong { display: block; font: 700 76px "Space Grotesk"; line-height: .85; letter-spacing: -.07em; }.score-text span { font: 500 11px "DM Mono"; text-transform: uppercase; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }.metric { padding: 16px; border: var(--line); border-radius: 16px; background: white; }.metric:nth-child(2) { background: var(--mint); }.metric:nth-child(3) { background: var(--yellow); }.metric:nth-child(4) { background: var(--pink); }.metric:nth-child(5) { grid-column: 1 / -1; background: #eee9ff; }.metric small { font: 500 10px "DM Mono"; text-transform: uppercase; }.metric strong { display: block; margin-top: 5px; font: 700 24px "Space Grotesk"; }
.audience-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }.aud-card { padding: 21px; border: var(--line); border-radius: 20px; background: white; transition: .2s; }.aud-card:hover { box-shadow: 5px 5px 0 var(--ink); transform: translateY(-4px); }.aud-head { display: flex; align-items: start; justify-content: space-between; margin-bottom: 12px; }.aud-head h4 { margin: 0; font: 700 21px "Space Grotesk"; }.aud-percent { color: var(--blue); font: 700 27px "Space Grotesk"; }.aud-card p { margin: 9px 0; color: #555; font-size: 14px; }.aud-card p b { color: var(--ink); }.result-track { overflow: hidden; height: 12px; border: 2px solid; border-radius: 20px; background: #e4e0d6; }.result-fill { width: 0; height: 100%; background: var(--bar); transition: width 1s cubic-bezier(.2, .8, .2, 1); }.recommendations { margin-top: 22px; padding: 22px; border: var(--line); border-radius: 20px; background: var(--yellow); }.recommendations h4 { margin: 0 0 10px; font: 700 22px "Space Grotesk"; }.recommendations ul { margin: 0; padding-left: 20px; line-height: 1.8; }.disclaimer { margin: 22px 0 0; color: var(--muted); font: 500 11px "DM Mono"; text-align: center; }

/* Process, features, comparison, and reviews */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }.step { display: flex; flex-direction: column; min-height: 300px; padding: 25px; border: var(--line); border-radius: 24px; background: white; box-shadow: 6px 6px 0 var(--ink); transition: .25s; }.step:hover { transform: rotate(-2deg) translateY(-6px); }.step:nth-child(2) { background: var(--yellow); transform: translateY(25px); }.step:nth-child(3) { color: white; background: var(--blue); }.step:nth-child(4) { background: var(--mint); transform: translateY(25px); }.step-no { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid; border-radius: 50%; font: 500 13px "DM Mono"; }.step-icon { margin: auto 0; font-size: 55px; text-align: center; }.step h3 { font-size: 25px; }.step p { margin-bottom: 0; opacity: .75; font-size: 14px; }
.features { color: white; background: var(--blue); }.features .eyebrow { color: var(--ink); }.features .section-head p { color: #d9deff; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid white; border-left: 2px solid white; }.feature { position: relative; min-height: 270px; padding: 32px; border-right: 2px solid white; border-bottom: 2px solid white; transition: .25s; }.feature:hover { color: var(--ink); background: var(--yellow); }.feature-icon { margin-bottom: 35px; font-size: 35px; }.feature h3 { font-size: 27px; }.feature p { opacity: .8; font-size: 14px; }.feature-no { position: absolute; top: 14px; right: 17px; opacity: .7; font: 500 11px "DM Mono"; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.compare-card { padding: 34px; border: var(--line); border-radius: 28px; background: white; box-shadow: 7px 7px 0 var(--ink); }.compare-card.before { background: var(--coral); transform: rotate(-1deg); }.compare-card.after { background: var(--mint); transform: rotate(1deg); }.compare-label { font: 500 12px "DM Mono"; text-transform: uppercase; }.compare-card h3 { margin: 10px 0 25px; font-size: 44px; }.compare-card ul { margin: 0; padding: 0; list-style: none; }.compare-card li { display: flex; gap: 12px; padding: 15px 0; border-top: 2px solid; font-weight: 700; }.compare-card li::before { content: "×"; font: 700 22px "Space Grotesk"; }.compare-card.after li::before { content: "✓"; }
.proof { border-block: var(--line); background: var(--yellow); }.logo-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 45px; }.fake-logo { padding: 10px 15px; border: 2px solid; border-radius: 999px; background: rgba(255, 255, 255, .5); font: 500 11px "DM Mono"; }.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.quote { display: flex; flex-direction: column; padding: 27px; border: var(--line); border-radius: 24px; background: white; box-shadow: 6px 6px 0 var(--ink); }.quote:nth-child(2) { background: var(--pink); transform: translateY(18px); }.quote-mark { height: 45px; color: var(--blue); font: 700 55px "Space Grotesk"; }.quote blockquote { margin: 10px 0 24px; font: 600 17px/1.6 Manrope; }.person { display: flex; align-items: center; gap: 12px; margin-top: auto; }.avatar { display: grid; place-items: center; width: 45px; height: 45px; border: 2px solid; border-radius: 50%; background: var(--mint); font-size: 22px; }.person b, .person small { display: block; }.person small { margin-top: 3px; font: 500 10px "DM Mono"; }

/* Pricing, business model, and final CTA */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: center; }.price-card { position: relative; padding: 28px; border: var(--line); border-radius: 28px; background: white; box-shadow: 7px 7px 0 var(--ink); }.price-card.popular { padding-block: 42px; color: white; background: var(--blue); transform: rotate(-1deg); }.popular-tag { position: absolute; top: -17px; right: 20px; padding: 8px 14px; border: var(--line); border-radius: 999px; color: var(--ink); background: var(--yellow); font: 500 11px "DM Mono"; transform: rotate(4deg); }.plan-label { font: 500 12px "DM Mono"; text-transform: uppercase; }.price-card h3 { margin: 8px 0; font-size: 36px; }.price { margin: 22px 0; font: 700 48px "Space Grotesk"; letter-spacing: -.05em; }.price span { font: 500 12px "DM Mono"; letter-spacing: 0; }.price-card ul { margin: 22px 0 28px; padding: 0; border-top: 2px solid; list-style: none; }.price-card li { padding: 12px 0; border-bottom: 1px solid currentColor; font-size: 14px; }.price-card li::before { content: "✦"; margin-right: 9px; color: var(--coral); }.price-card .btn { width: 100%; }.popular .btn { color: var(--ink); background: var(--yellow); }
.model { color: white; background: var(--ink); }.model-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; margin-bottom: 45px; }.model-top p { color: #c7c7c7; }.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.model-card { position: relative; min-height: 230px; padding: 23px; border: 2px solid white; border-radius: 20px; }.model-card:nth-child(1) { background: var(--blue); }.model-card:nth-child(2) { color: var(--ink); background: var(--coral); }.model-card:nth-child(3) { color: var(--ink); background: var(--yellow); }.model-card:nth-child(4) { color: var(--ink); background: var(--mint); }.model-card h3 { margin-bottom: 15px; font-size: 25px; }.model-card p, .model-card li { font-size: 13px; line-height: 1.55; }.model-card ul { padding-left: 17px; }.metric-callout { display: grid; grid-template-columns: auto 1fr; gap: 25px; align-items: center; margin-top: 18px; padding: 30px; border: 2px solid white; border-radius: 28px; }.metric-callout .asterisk { color: var(--yellow); font-size: 70px; animation: spin 9s linear infinite; }.metric-callout strong { font: 700 clamp(23px, 3vw, 38px)/1.15 "Space Grotesk"; letter-spacing: -.03em; }
.final-cta { padding: 100px 0; }.cta-box { position: relative; overflow: hidden; padding: 70px; border: var(--line); border-radius: 40px; background: var(--coral); box-shadow: 12px 12px 0 var(--ink); }.cta-box::before { content: ""; position: absolute; top: -120px; right: -100px; width: 300px; height: 300px; border: 3px solid; border-radius: 50%; background: var(--yellow); }.cta-box h2 { position: relative; max-width: 900px; font-size: clamp(52px, 8vw, 100px); }.cta-bottom { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 35px; }.cta-bottom p { max-width: 540px; font-size: 17px; }.cta-box .spark { right: 9%; bottom: 17%; color: var(--blue); }