:root {
  --ink: #101010;
  --ink-2: #1a171f;
  --paper: #f2eee7;
  --white: #fffefa;
  --purple: #ee9a60;
  --accent-text: #c96d35;
  --purple-dark: #9a633f;
  --lavender: #c8b8a4;
  --lime: #ffc497;
  --pink: #9b8266;
  --line: rgba(16,16,16,.14);
  --shadow: 0 28px 75px rgba(36,25,15,.18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 15% 4%, rgba(238,154,96,.13), transparent 26%), radial-gradient(circle at 90% 18%, rgba(155,130,102,.11), transparent 22%); }
.grain { position: fixed; inset: 0; z-index: 20; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(1120px, calc(100% - 36px)); margin-inline: auto; }
.site-header { width: min(1180px, calc(100% - 32px)); height: 76px; display: flex; justify-content: space-between; align-items: center; margin: auto; }
.brand { display: flex; align-items: center; gap: 4px; font: 800 18px "Manrope", sans-serif; letter-spacing: -.6px; }
.brand-logo { display: block; width: 122px; height: 41px; object-fit: contain; mix-blend-mode: multiply; }
.creator-logo { display: block; width: 46px; height: 46px; object-fit: cover; border: 2px solid var(--lavender); border-radius: 50%; box-shadow: 0 5px 16px rgba(28,20,14,.14); }
.hero { padding: 65px 0 12px; text-align: center; }
.eyebrow, .section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.25px; text-transform: uppercase; }
.eyebrow { padding: 9px 13px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.55); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #fe2c55; box-shadow: 0 0 0 5px rgba(254,44,85,.12); }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2 { font-family: "Manrope", sans-serif; letter-spacing: -.065em; line-height: .97; }
h1 { max-width: 1040px; margin: 0 auto 28px; font-size: clamp(50px, 7.15vw, 90px); }
h1 em, h2 em { color: var(--accent-text); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.07em; }
.keep-together { white-space: nowrap; }
.hero-context { margin: 0 0 18px; color: #6e665f; font-size: 11px; font-weight: 700; letter-spacing: 1.05px; text-transform: uppercase; }
.problem-note { width: fit-content; max-width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 auto 27px; }
.problem-note span { width: 100%; margin-bottom: 5px; color: #4f4852; font-size: 14px; font-weight: 600; }
.problem-note b { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 11px; transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--lavender); }
.problem-note b:nth-child(even) { transform: rotate(2deg); }
.hero-copy { max-width: 650px; margin: 0 auto 20px; color: #5f5864; font-size: 17px; line-height: 1.4; }
.hero-copy strong { color: var(--ink); }
.comparison-copy { color: #504a53; }
.trust-line { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 13px 0 18px; font-size: 11px; }
.trust-rating-stars { position: relative; display: inline-block; color: #c9c2ba; font-size: 10px; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.trust-rating-stars .stars-base { display: block; }
.trust-rating-stars .stars-fill { position: absolute; inset: 0 auto 0 0; width: 90%; overflow: hidden; color: #00b67a; white-space: nowrap; }
.scroll-cue { width: fit-content; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px auto 0; color: #6c645d; font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; transition: opacity .4s ease, transform .4s ease; }
.scroll-cue i { display: block; color: var(--accent-text); font: 700 25px/1 "DM Sans", sans-serif; animation: scroll-nudge 4s ease-in-out infinite; }
.scroll-cue.hidden { opacity: 0; transform: translateY(-5px); pointer-events: none; }
@keyframes scroll-nudge {
  0%, 8%, 16%, 100% { transform: translateY(0); }
  4%, 12% { transform: translateY(9px); }
  20% { transform: translateY(0); }
}
.trust-stars { color: #00b67a; letter-spacing: 1px; }
.trust-line > span:last-child { color: #756f78; }
.primary-cta { width: fit-content; min-width: 292px; display: flex; align-items: center; justify-content: space-between; margin: auto; padding: 18px 22px; border: 0; border-radius: 12px; color: white; background: var(--purple); font-weight: 800; cursor: pointer; box-shadow: 6px 6px 0 var(--ink); transition: .2s ease; }
.primary-cta:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 var(--ink); }
.primary-cta span { font-size: 20px; }
.microcopy { margin: 17px 0 0; color: #777079; font-size: 12px; }
.hero-visual { position: relative; width: min(900px, 95%); margin: 58px auto 0; }
.generator-card { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; color: white; background: #181715; box-shadow: 0 45px 100px rgba(38,27,18,.28); transform: perspective(1000px) rotateX(2deg); text-align: left; }
.generator-top { height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 17px; background: #24211e; font-size: 12px; }
.generator-top i { margin-left: auto; color: #716b77; font-style: normal; }
.mini-logo { display: block; width: 64px; height: 24px; padding: 3px 5px; object-fit: contain; border-radius: 5px; background: white; }
.generator-body { min-height: 440px; display: grid; grid-template-columns: 42% 58%; }
.prompt-side { padding: 50px 38px; }
.tiny-label { color: var(--lavender); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.prompt-side h3 { margin: 10px 0 26px; font: 700 25px/1.18 "Manrope", sans-serif; letter-spacing: -1px; }
.prompt-box { display: flex; gap: 10px; padding: 14px; border: 1px solid #4b423a; border-radius: 10px; background: #28231f; }
.prompt-box span { color: var(--lavender); }
.prompt-box p { margin: 0; color: #a9a2ae; font-size: 11px; line-height: 1.5; }
.prompt-side button { width: 100%; display: flex; justify-content: space-between; margin-top: 12px; padding: 13px 15px; border: 0; border-radius: 9px; color: white; background: var(--purple); font-weight: 700; }
.site-preview { margin: 22px 22px 22px 0; color: #1a211a; background: #e7eadc; border-radius: 13px; overflow: hidden; }
.preview-nav { height: 55px; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; font-size: 9px; }
.preview-nav span { color: #687064; }
.preview-hero { min-height: 245px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 30px; background: linear-gradient(110deg, rgba(231,234,220,.97), rgba(231,234,220,.55)), linear-gradient(45deg,#38513e,#a7a78b); }
.preview-hero small { font-size: 7px; letter-spacing: 2px; }
.preview-hero strong { margin: 12px 0 19px; font: 600 34px/.98 Georgia, serif; }
.preview-hero span { padding: 9px 12px; color: white; background: #1f2e23; font-size: 8px; }
.preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 12px; }
.preview-grid i { height: 78px; border-radius: 5px; background: #8d9888; }
.preview-grid i:nth-child(2) { background: #c4ab8f; }
.preview-grid i:nth-child(3) { background: #596959; }
.floating-comment { position: absolute; z-index: 3; padding: 12px 15px; border-radius: 12px; text-align: left; font-size: 12px; line-height: 1.5; background: var(--white); box-shadow: var(--shadow); transform: rotate(-3deg); }
.comment-a { left: -75px; top: 24%; }
.comment-b { right: -55px; bottom: 18%; transform: rotate(3deg); font-weight: 800; }
.included { padding: 55px 0; color: white; background: var(--ink); text-align: center; }
.included > .shell > p { color: #aaa4ae; }
.included p strong { color: white; }
.included-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 34px; }
.included-grid article { display: flex; flex-direction: column; align-items: center; padding: 22px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #19191a; }
.included-grid article > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 13px; border-radius: 10px; color: var(--ink); background: var(--lime); font-weight: 800; }
.included-grid article:nth-child(2) > span { background: var(--lavender); }
.included-grid article:nth-child(3) > span { background: var(--pink); }
.included-grid b { font-size: 13px; }
.included-grid small { margin-top: 5px; color: #89848c; font-size: 10px; }
.steps-section { padding: 18px 0 46px; }
.section-label { color: var(--purple); }
h2 { margin: 15px 0 65px; font-size: clamp(48px, 6.5vw, 78px); }
.step-row { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 65px; margin: 0 0 125px; }
.step-row:last-of-type { margin-bottom: 45px; }
.step-row.reverse { grid-template-columns: 1.28fr .72fr; }
.step-row.reverse .step-copy { order: 2; }
.step-copy > span { display: inline-block; padding: 7px 9px; color: white; background: var(--purple); border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: 1px; transform: rotate(-2deg); }
.step-copy h3 { margin: 18px 0 14px; font: 700 clamp(30px,4vw,47px)/1.03 "Manrope",sans-serif; letter-spacing: -.045em; }
.step-copy p { color: #68616b; font-size: 16px; line-height: 1.6; }
.real-screen { position: relative; width: 100%; overflow: visible; border: 1px solid #c9c1cf; border-radius: 20px; background: white; box-shadow: var(--shadow); }
.real-screen > img { display: block; width: 100%; height: auto; border-radius: 19px; }
.prompt-crop { overflow: visible; background: white; }
.prompt-crop > img { width: 100%; height: auto; object-fit: contain; }
.build-process-screen { background: #f8f8f8; }
.finished-screen { aspect-ratio: .78 / 1; background: #09090b; }
.finished-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.step-visual-stack { display: grid; gap: 56px; min-width: 0; }
.finished-screen .swipe-note { right: 22px; bottom: -18px; left: auto; padding: 7px 10px; font-size: 10px; transform: rotate(3deg); }
.finished-screen .swipe-note span { font-size: 15px; }
.publish-callout { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 18px; padding: 14px; border: 1px solid #d8cec3; border-radius: 20px; background: var(--white); box-shadow: 0 12px 30px rgba(28,20,14,.08); }
.publish-crop { aspect-ratio: 5.2 / 1; overflow: hidden; border: 1px solid rgba(57,52,255,.2); border-radius: 12px; background: #f2f2f3; box-shadow: 0 0 0 3px rgba(57,52,255,.08), 0 12px 28px rgba(57,52,255,.18); }
.publish-crop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 79.5%; }
.publish-callout p { margin: 0; line-height: 1.35; }
.publish-callout strong, .publish-callout span { display: block; }
.publish-callout strong { font: 700 15px "Manrope", sans-serif; letter-spacing: -.3px; }
.publish-callout span { margin-top: 4px; color: #756d66; font-size: 10px; }
.screen { position: relative; overflow: visible; border: 1px solid #c9c1cf; border-radius: 18px; background: white; box-shadow: var(--shadow); }
.screen-bar { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 13px; border-radius: 18px 18px 0 0; background: #e8e0d6; }
.screen-bar i { width: 7px; height: 7px; border-radius: 50%; background: #b5adba; }
.screen-bar small { margin: auto; color: #817986; font-size: 9px; }
.screen-content { min-height: 355px; padding: 45px; }
.centered { text-align: center; }
.wizard-count { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #6f4226; background: #f8e0cf; font-size: 9px; font-weight: 800; }
.screen-content h4 { margin: 20px 0; font: 700 23px "Manrope",sans-serif; }
.fake-input { max-width: 360px; margin: auto; padding: 15px; border: 2px solid var(--purple); border-radius: 9px; color: #77707b; text-align: left; font-size: 11px; }
.choice-row { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.choice-row b { padding: 9px 12px; border: 1px solid #d8d1de; border-radius: 8px; font-size: 10px; }
.swipe-note { position: absolute; left: -32px; bottom: -27px; padding: 10px 13px; border-radius: 7px; background: var(--lime); font: 700 12px "Manrope",sans-serif; transform: rotate(-4deg); }
.swipe-note span { font-size: 20px; }
.swipe-note.right { right: -25px; left: auto; background: var(--pink); transform: rotate(4deg); }
.proof-badge { position: absolute; z-index: 2; padding: 9px 12px; border-radius: 99px; color: #216b43; background: #dcf6e7; box-shadow: 0 8px 22px rgba(28,20,14,.12); font-size: 10px; font-weight: 800; }
.wordpress-badge, .hosting-badge { top: 54px; right: 18px; }
.build-view { min-height: 355px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 25px; background: #eadfd3; }
.build-card { align-self: center; padding: 25px; border-radius: 13px; background: white; text-align: center; box-shadow: 0 12px 35px rgba(70,45,27,.1); }
.loader { display: grid; place-items: center; width: 45px; height: 45px; margin: auto auto 14px; color: white; background: var(--purple); border-radius: 50%; }
.build-card b,.build-card small { display: block; }
.build-card b { font-size: 13px; }
.build-card small { margin: 7px 0 16px; color: #89828e; font-size: 8px; line-height: 1.5; }
.progress { height: 5px; border-radius: 9px; background: #e7e1eb; overflow: hidden; }
.progress i { display: block; width: 72%; height: 100%; background: var(--purple); }
.build-preview { padding: 30px 20px; color: #302416; background: #d1a66e; border-radius: 11px; }
.build-preview > b { font-size: 8px; letter-spacing: 1px; }
.build-preview h4 { margin: 50px 0 20px; font: 600 26px/.95 Georgia,serif; }
.build-preview button,.canvas button { padding: 9px 12px; border: 0; color: white; background: #352617; font-size: 8px; }
.editor-view { min-height: 355px; display: grid; grid-template-columns: 180px 1fr; background: #e7dfd6; }
.editor-view aside { padding: 22px; background: white; font-size: 9px; }
.editor-view aside > b { display: block; margin-bottom: 22px; }
.editor-view label { display: block; margin: 13px 0 5px; color: #817a85; }
.editor-view aside > div { padding: 8px; border: 1px solid #ddd6e1; border-radius: 5px; }
.editor-view .colors { display: flex; gap: 6px; border: 0; padding: 0; }
.colors i { width: 20px; height: 20px; border-radius: 50%; background: #d1a66e; }
.colors i:nth-child(2){background:#352617}.colors i:nth-child(3){background:var(--purple)}.colors i:nth-child(4){background:#f0e7da}
.editor-view aside button { width: 100%; margin-top: 20px; padding: 9px; border: 0; border-radius: 5px; color: white; background: var(--purple); font-size: 9px; }
.canvas { margin: 22px; padding: 28px; color: #352617; background: #d1a66e; }
.canvas-nav { display: flex; justify-content: space-between; font-size: 8px; font-weight: 800; }
.canvas h4 { margin: 58px 0 12px; font: 600 31px/.95 Georgia,serif; }
.canvas h4 u { text-decoration-color: var(--purple); text-decoration-thickness: 3px; }
.canvas p { font-size: 9px; }
.published-pill { position: absolute; right: 18px; bottom: -17px; padding: 9px 12px; border-radius: 99px; color: #187548; background: #d9ffea; font-size: 10px; font-weight: 800; box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.next-section-cue { width: fit-content; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0 auto; color: var(--accent-text); font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; }
.next-section-cue i { display: block; color: var(--ink); font: 700 26px/1 "DM Sans", sans-serif; animation: scroll-nudge 4s ease-in-out infinite; }
.reviews-wrap { padding: 72px 0 110px; color: white; background: #171614; scroll-margin-top: 12px; }
.reviews h2 { margin-bottom: 25px; }
.reviews h2 em { color: var(--lavender); }
.rating-lockup { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 45px; font-size: 12px; }
.rating-lockup > span:last-child { color: #98919d; }
.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.review-card { min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; padding: 27px; border-radius: 18px; color: var(--ink); background: var(--white); }
.review-card.rotate-left { transform: rotate(-2deg); }
.review-card.rotate-right { transform: rotate(2deg); background: var(--lavender); }
.review-card.dark { color: white; background: var(--purple-dark); transform: translateY(18px); }
.review-card > p { font: 600 22px/1.3 "Manrope",sans-serif; letter-spacing: -.8px; }
.review-card footer { display: flex; gap: 10px; align-items: center; }
.review-card footer > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white; background: var(--ink); font-size: 10px; font-weight: 800; }
.review-card footer b,.review-card footer small { display:block; }
.review-card footer b { font-size: 11px; }.review-card footer small { margin-top: 2px; opacity:.6; font-size:9px; }
.text-link { display: block; width: fit-content; margin: 55px auto 0; padding-bottom: 3px; border-bottom: 1px solid #716d75; color: #bbb5bf; font-size: 12px; }
.final-offer { padding: 115px 0; color: white; background: var(--ink); text-align: center; }
.offer-inner { position: relative; }
.offer-sticker { display: inline-block; padding: 8px 10px; color: var(--ink); background: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: 1px; transform: rotate(-2deg); }
.final-offer h2 { margin: 24px 0; }
.final-offer h2 em { color: white; }
.final-offer p { max-width: 590px; margin: 0 auto 28px; color: #bdb2a7; font-size: 17px; line-height: 1.55; }
.primary-cta.light { color: var(--ink); background: var(--lime); }
.light-copy { color: #a99f95!important; font-size: 11px!important; }
.site-footer { padding: 50px max(18px,calc((100vw - 1120px)/2)); display: grid; grid-template-columns: 1fr auto; align-items: end; border-top: 1px solid var(--line); }
.site-footer p { grid-row: 2; margin: 18px 0 0; color: #6b646e; }
.site-footer > span { grid-row: 2; color: #89828d; font-size: 11px; }
.sticky-cta { position: fixed; z-index: 15; left: 50%; bottom: 16px; width: min(430px,calc(100% - 24px)); display: flex; flex-direction: column; gap: 7px; padding: 18px 10px 10px; color: white; background: rgba(16,16,16,.95); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; box-shadow: 0 16px 55px rgba(0,0,0,.28); backdrop-filter: blur(14px); transform: translate(-50%,130%); transition: .35s; }
.sticky-cta.visible { transform: translate(-50%,0); }
.sticky-cta a { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 17px; border-radius: 10px; color: var(--ink); background: var(--lime); font-size: 13px; font-weight: 800; white-space: nowrap; }
.sticky-cta a span { font-size: 18px; line-height: 1; }
.sticky-cta small { display: block; color: #ddd6d0; font-size: 9px; letter-spacing: .15px; text-align: center; }
.toast { position: fixed; z-index: 30; left: 50%; top: 18px; padding: 13px 18px; color: white; background: var(--ink); border-radius: 12px; font-size: 13px; transform: translate(-50%,-150%); transition:.3s; }
.toast.show { transform: translate(-50%,0); }
@media(max-width:850px){
  .hero{padding-top:42px}.hero-copy{font-size:17px}.generator-body{grid-template-columns:1fr}.prompt-side{padding:35px}.site-preview{margin:0 18px 18px}.included-grid{grid-template-columns:repeat(2,1fr)}
  .step-row,.step-row.reverse{grid-template-columns:1fr;gap:32px;margin-bottom:95px}.step-row.reverse .step-copy{order:0}.review-grid{grid-template-columns:1fr}.review-card.dark{transform:none}.review-card{min-height:225px}
}
@media(max-width:560px){
  .site-header{height:66px}.brand-logo{width:108px;height:36px}.creator-logo{width:40px;height:40px}.hero{padding-bottom:10px}h1{font-size:clamp(44px,11.5vw,56px)}h2{font-size:clamp(45px,13vw,60px)}
  .problem-note{max-width:330px}.trust-line{max-width:300px;margin-inline:auto;margin-bottom:24px}.primary-cta{width:calc(100% - 8px);min-width:0}.hero-visual{width:100%}.floating-comment{font-size:10px}.comment-a{left:-5px;top:-30px}.comment-b{right:-5px;bottom:-38px}
  .generator-body{min-height:auto}.prompt-side{padding:30px 20px}.site-preview{min-height:310px}.preview-hero{min-height:200px;padding:22px}.preview-hero strong{font-size:28px}.included-grid{grid-template-columns:1fr 1fr;gap:8px}.included-grid article{padding:18px 8px}
  .steps-section{padding:18px 0 38px}.steps-section>h2{margin-bottom:55px}.step-row:last-of-type{margin-bottom:38px}.step-copy h3{font-size:36px}.screen-content{min-height:310px;padding:35px 18px}.choice-row{flex-wrap:wrap}.screen{margin-inline:2px}.swipe-note{left:6px}.swipe-note.right{right:6px}.build-view{min-height:340px;grid-template-columns:1fr;padding:15px}.build-card{padding:18px}.build-preview{display:none}
  .editor-view{min-height:340px;grid-template-columns:112px 1fr}.editor-view aside{padding:13px}.canvas{margin:12px;padding:15px}.canvas-nav span{display:none}.canvas h4{margin-top:60px;font-size:25px}.step-visual-stack{gap:50px}.publish-callout{grid-template-columns:1fr;padding:13px;gap:14px}.publish-callout p{padding:0 5px 4px;text-align:center}.publish-callout strong{font-size:15px}.reviews-wrap{padding:62px 0 85px}.final-offer{padding:85px 0}.site-footer{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:110px}.site-footer p{margin:5px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}