:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef4fb;
  --text: #101828;
  --muted: #667085;
  --quiet: #98a2b3;
  --line: #dce4ee;
  --line-strong: #c8d5e5;
  --primary: #087ff5;
  --primary-strong: #0866d8;
  --primary-bright: #1198f5;
  --cyan: #24b7f2;
  --primary-soft: #e9f4ff;
  --navy: #07182d;
  --navy-2: #0b203a;
  --good: #159a68;
  --gradient: linear-gradient(135deg, #087ff5 0%, #1198f5 55%, #24b7f2 100%);
  --shadow-sm: 0 4px 18px rgba(16, 40, 74, .06);
  --shadow-md: 0 16px 42px rgba(16, 40, 74, .11);
  --shadow-lg: 0 28px 80px rgba(2, 18, 38, .18);
  --radius-control: 9px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --max-width: 1220px;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); font: 15px/1.55 Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3, p { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 3px; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 15px; border-radius: 8px; color: #fff; background: var(--navy); font-weight: 800; text-decoration: none; transition: top .18s ease; }
.skip-link:focus { top: 12px; }
.content-shell { width: min(calc(100% - 40px), var(--max-width)); margin: 0 auto; }
.section-pad { padding: 108px 0; }

.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(220, 228, 238, .82); background: rgba(244, 247, 251, .88); backdrop-filter: blur(18px); }
.nav-shell { width: min(calc(100% - 40px), 1320px); min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 0 auto; }
.brand-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-link img { width: 164px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a, .nav-sign-in { color: #344054; font-size: 13px; font-weight: 720; text-decoration: none; transition: color .18s ease; }
.desktop-nav a:hover, .nav-sign-in:hover { color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 13px; }
.menu-button { width: 42px; height: 42px; display: none; place-items: center; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.menu-button span { width: 20px; height: 2px; display: block; border-radius: 999px; background: var(--navy); transition: transform .2s ease, opacity .2s ease; }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: absolute; inset: 74px 0 auto; max-height: calc(100vh - 74px); overflow-y: auto; padding: 18px 20px 25px; border-bottom: 1px solid var(--line); background: rgba(244, 247, 251, .98); box-shadow: var(--shadow-md); }
.mobile-menu a { display: block; padding: 13px 8px; border-bottom: 1px solid rgba(220, 228, 238, .7); color: var(--text); font-weight: 750; text-decoration: none; }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: 13px; font-weight: 790; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--gradient); box-shadow: 0 9px 23px rgba(8, 127, 245, .22); }
.button-primary:hover { box-shadow: 0 13px 31px rgba(8, 127, 245, .3); }
.button-secondary { color: var(--navy); border-color: var(--line); background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); }
.button-secondary:hover { border-color: var(--line-strong); background: #fff; }
.button-large { min-height: 52px; padding: 13px 21px; border-radius: 11px; font-size: 14px; }
.nav-cta { min-height: 42px; padding-inline: 16px; }

.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: var(--primary-strong); font-size: 10px; font-weight: 860; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow > span { width: 20px; height: 2px; border-radius: 999px; background: var(--gradient); }
.eyebrow.light { color: #68c8ff; }
.section-heading { margin-bottom: 46px; }
.section-heading h2, .faq-heading h2, .audience-copy h2, .why-copy h2, .final-copy h2 { margin: 0; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.045em; }
.section-heading > p:last-child { max-width: 690px; margin: 18px 0 0; color: var(--muted); font-size: 17px; }
.section-heading.centered { max-width: 830px; margin-right: auto; margin-left: auto; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 70px; align-items: end; }
.split-heading > p { margin: 0 0 6px; color: var(--muted); font-size: 16px; }

.hero { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; padding-top: 78px; background: radial-gradient(circle at 81% 12%, rgba(36, 183, 242, .11), transparent 33%), linear-gradient(180deg, #f7faff 0%, var(--bg) 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(8,127,245,.22), transparent); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.hero-glow-one { width: 370px; height: 370px; right: -170px; top: 100px; border: 1px solid rgba(8,127,245,.09); box-shadow: 0 0 0 44px rgba(8,127,245,.025), 0 0 0 88px rgba(36,183,242,.02); }
.hero-glow-two { width: 230px; height: 230px; left: -140px; bottom: 60px; border: 1px solid rgba(8,127,245,.08); box-shadow: 0 0 0 32px rgba(8,127,245,.02); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .95fr) minmax(540px, 1.05fr); gap: 74px; align-items: center; }
.hero-copy h1 { max-width: 620px; margin: 0; font-size: clamp(50px, 5.2vw, 76px); line-height: .99; letter-spacing: -.06em; }
.hero-copy h1 .gradient-text { display: block; }
.gradient-text { display: inline; color: transparent; background: var(--gradient); -webkit-background-clip: text; background-clip: text; }
.hero-fast-line { display:block; font-size:1.22em; line-height:.9; letter-spacing:-.065em; }
.hero-lede { max-width: 610px; margin: 25px 0 0; color: #475467; font-size: 18px; line-height: 1.68; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.trial-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0 4px; color: #475467; font-size: 12px; font-weight: 720; }
.credit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(36,183,242,.1); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }
.hero-facts li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.hero-facts svg { width: 17px; height: 17px; color: var(--primary); }
.hero-facts strong { color: var(--text); }

.hero-product { position: relative; min-width: 0; }
.workflow-stage { position: relative; overflow: hidden; padding: 17px; border: 1px solid rgba(105, 167, 226, .28); border-radius: 22px; color: #eaf6ff; background: radial-gradient(circle at 77% 0%, rgba(36,183,242,.22), transparent 34%), linear-gradient(145deg, #061426 0%, #0b2542 60%, #081d35 100%); box-shadow: 0 34px 80px rgba(3,20,42,.25); }
.stage-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(127,191,245,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(127,191,245,.12) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.product-topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 15px; border-bottom: 1px solid rgba(130, 187, 236, .18); }
.product-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 850; }
.product-brand img { width: 16px; height: 23px; object-fit: contain; }
.live-pill { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid rgba(121,190,246,.18); border-radius: 999px; color: #aac2d8; background: rgba(5,21,39,.42); font-size: 9px; font-weight: 790; text-transform: uppercase; letter-spacing: .08em; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.1); }
.flow-visual { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); gap: 11px; align-items: center; padding: 20px 6px 17px; }
.phone-card { min-width: 0; }
.phone-label { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #9fb6cb; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.phone-label span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: #75cfff; background: rgba(8,127,245,.2); }
.phone-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 5px solid #122c46; border-radius: 18px; background: #142941; box-shadow: 0 18px 34px rgba(0,0,0,.25); }
.phone-frame::before { content: ""; position: absolute; z-index: 5; top: 7px; left: 50%; width: 31%; height: 8px; border-radius: 999px; background: rgba(4,15,27,.88); transform: translateX(-50%); }
.phone-frame > img { width: 100%; height: 100%; object-fit: cover; }
.creator-caption, .screen-caption { position: absolute; z-index: 4; left: 8%; right: 8%; bottom: 16%; padding: 7px 6px; border-radius: 7px; color: #fff; background: rgba(4,12,23,.62); box-shadow: 0 3px 14px rgba(0,0,0,.2); font-size: clamp(8px, 1vw, 11px); font-weight: 860; line-height: 1.2; text-align: center; text-shadow: 0 1px 2px #000; backdrop-filter: blur(6px); }
.video-progress { position: absolute; z-index: 5; left: 9px; right: 9px; bottom: 9px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.25); }
.video-progress span { display: block; width: 55%; height: 100%; border-radius: inherit; background: #fff; }
.demo-progress span { width: 29%; background: var(--cyan); }
.duration-badge { position: absolute; z-index: 5; right: 9px; top: 18px; padding: 3px 5px; border-radius: 5px; color: #fff; background: rgba(3,12,22,.65); font-size: 7px; font-weight: 850; }
.phone-card > p { margin: 8px 0 0; color: #9cb6cc; font-size: 9px; font-weight: 710; text-align: center; }
.transition-link { display: flex; flex-direction: column; align-items: center; gap: 7px; color: #61c8ff; }
.transition-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(36,183,242,.12); }
.transition-line { width: 2px; height: 40px; position: relative; overflow: hidden; background: rgba(111,194,245,.22); }
.transition-line i { position: absolute; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--cyan), transparent); animation: lineMove 2s linear infinite; }
.transition-tag { width: max-content; padding: 5px 7px; border: 1px solid rgba(85,190,255,.28); border-radius: 999px; color: #a9ddfa; background: rgba(8,127,245,.12); font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.transition-link svg { width: 22px; height: 22px; }
@keyframes lineMove { from { top: -45%; } to { top: 105%; } }
.product-screen { padding-top: 0; background: #f2f6fb; }
.mock-app-header { height: 14%; display: flex; align-items: center; gap: 6px; padding: 13px 8px 5px; color: #344054; background: #fff; border-bottom: 1px solid #dce4ee; }
.mock-app-header b { width: 10px; height: 13px; border-radius: 3px 3px 5px 5px; background: var(--gradient); }
.mock-app-header span { font-size: 6px; font-weight: 850; }
.mock-app-header i { width: 12px; height: 12px; margin-left: auto; border-radius: 50%; background: #e9f4ff; }
.mock-app-body { height: 86%; display: grid; grid-template-columns: 23% 1fr; }
.mock-sidebar { display: flex; flex-direction: column; gap: 8px; padding: 10px 5px; background: #07182d; }
.mock-sidebar span { height: 5px; border-radius: 3px; background: rgba(153,199,239,.24); }
.mock-sidebar span:first-child { background: #168df3; }
.mock-main { position: relative; padding: 12px 8px; }
.mock-title strong { width: 48%; height: 7px; display: block; border-radius: 3px; background: #172b42; }
.mock-title small { width: 70%; height: 4px; display: block; margin-top: 5px; border-radius: 2px; background: #c7d4e3; }
.mock-chart { height: 42%; display: flex; align-items: end; gap: 5px; margin-top: 13px; padding: 7px 6px; border: 1px solid #dfe7f0; border-radius: 7px; background: #fff; }
.mock-chart span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #24b7f2, #087ff5); }
.mock-chart span:nth-child(1) { height: 35%; }.mock-chart span:nth-child(2) { height: 56%; }.mock-chart span:nth-child(3) { height: 45%; }.mock-chart span:nth-child(4) { height: 78%; }.mock-chart span:nth-child(5) { height: 66%; }
.mock-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 7px; }
.mock-stats i { height: 27px; border: 1px solid #e0e7ef; border-radius: 5px; background: #fff; }
.cursor-pointer { position: absolute; right: 25%; top: 44%; width: 0; height: 0; border-top: 10px solid #061426; border-right: 7px solid transparent; transform: rotate(-15deg); filter: drop-shadow(0 2px 1px rgba(0,0,0,.15)); }
.screen-caption { bottom: 14%; background: #087ff5; }
.finish-bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(129,190,240,.2); border-radius: 12px; background: rgba(4,18,34,.58); }
.finish-bar > div:first-child { display: flex; align-items: center; gap: 9px; }
.finish-check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #159a68; box-shadow: 0 0 0 5px rgba(21,154,104,.1); }
.finish-check svg { width: 15px; }
.finish-bar p { margin: 0; }
.finish-bar strong, .finish-bar small { display: block; }
.finish-bar strong { color: #fff; font-size: 10px; }
.finish-bar small { color: #7f9ab4; font-size: 8px; }
.finish-controls { display: flex; align-items: center; gap: 7px; }
.finish-controls span { display: flex; align-items: center; gap: 4px; color: #9ab4ca; font-size: 7px; }
.finish-controls span svg { width: 11px; height: 11px; color: #5fc9ff; }
.finish-controls button { min-height: 29px; display: flex; align-items: center; gap: 5px; padding: 6px 9px; border: 0; border-radius: 7px; color: #fff; background: var(--gradient); font-size: 8px; font-weight: 850; }
.finish-controls button svg { width: 11px; height: 11px; }
.floating-chip { position: absolute; z-index: 5; padding: 9px 11px; border: 1px solid rgba(255,255,255,.8); border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: 0 16px 33px rgba(16,40,74,.14); backdrop-filter: blur(10px); }
.floating-chip span, .floating-chip strong { display: block; }
.floating-chip span { color: var(--muted); font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.floating-chip strong { margin-top: 2px; color: var(--navy); font-size: 9px; }
.floating-chip-one { left: -24px; top: 105px; }
.floating-chip-two { right: -26px; bottom: 85px; display: flex; align-items: center; gap: 6px; }
.floating-chip-two svg { width: 14px; height: 14px; color: var(--good); }

.truth-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.truth-list { min-height: 84px; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); align-items: center; }
.truth-list span { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border-right: 1px solid var(--line); color: #475467; font-size: 9px; font-weight: 760; text-align: center; }
.truth-list span:last-child { border-right: 0; }
.truth-list svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--primary); }

.problem { background: var(--surface); }
.problem-tagline {
  margin: 12px 0 -3px !important;
  color: var(--primary) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  letter-spacing: -.015em;
}

.problem .section-heading h2 span { color: var(--primary); }
.comparison-grid { display: grid; grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr); align-items: center; }
.comparison-card { overflow: hidden; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); box-shadow: var(--shadow-sm); }
.after-card { border-color: rgba(8,127,245,.35); background: linear-gradient(180deg, #f9fcff, #f1f8ff); box-shadow: 0 18px 48px rgba(8,127,245,.1); }
.comparison-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.comparison-header p { margin: 0; color: #475467; font-size: 11px; font-weight: 780; }
.status-pill { padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.status-pill.neutral { color: #667085; background: #e9edf2; }
.status-pill.success { color: #0866d8; background: #e2f2ff; }
.comparison-video { position: relative; min-height: 320px; overflow: hidden; border-radius: 12px; }
.plain-demo { padding: 22px; background: #e9eef4; }
.plain-browser { overflow: hidden; height: 245px; border: 1px solid #ccd6e2; border-radius: 9px; background: #fff; box-shadow: 0 14px 28px rgba(22,38,57,.1); }
.browser-bar { height: 32px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid #e1e7ee; background: #f8fafc; }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d0d8e2; }
.browser-bar span { width: 46%; height: 8px; margin-left: 7px; border-radius: 5px; background: #e7ecf2; }
.plain-content { position: relative; padding: 25px 23px; }
.plain-content b { width: 37%; height: 14px; display: block; border-radius: 4px; background: #263c54; }
.plain-content > span { height: 12px; display: block; margin-top: 16px; border-radius: 4px; background: #e4e9ef; }
.plain-content > span:nth-of-type(1) { width: 92%; }.plain-content > span:nth-of-type(2) { width: 76%; }.plain-content > span:nth-of-type(3) { width: 86%; }
.slow-cursor { position: absolute; left: 51%; top: 82px; width: 0; height: 0; border-top: 18px solid #334c64; border-right: 11px solid transparent; transform: rotate(-20deg); }
.quiet-label { position: absolute; left: 50%; bottom: 37px; padding: 7px 11px; border-radius: 7px; color: #667085; background: rgba(255,255,255,.88); box-shadow: 0 5px 16px rgba(16,40,74,.08); font-size: 9px; font-weight: 800; transform: translateX(-50%); }
.timeline { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(91,110,131,.22); }
.timeline span { display: block; width: 20%; height: 100%; border-radius: inherit; }
.muted-timeline span { background: #8f9cab; }
.finished-demo { min-height: 320px; display: grid; grid-template-columns: 42% 12% 46%; align-items: center; padding: 20px; background: radial-gradient(circle at 70% 15%, rgba(36,183,242,.16), transparent 35%), #07182d; }
.mini-hook-panel, .mini-demo-panel { position: relative; aspect-ratio: 9/16; overflow: hidden; border: 3px solid #173653; border-radius: 12px; background: #fff; box-shadow: 0 14px 25px rgba(0,0,0,.24); }
.mini-hook-panel img { width: 100%; height: 100%; object-fit: cover; }
.mini-hook-panel strong { position: absolute; left: 8%; right: 8%; bottom: 16%; padding: 5px; border-radius: 5px; color: #fff; background: rgba(0,0,0,.56); font-size: 8px; text-align: center; }
.mini-hook-panel small, .mini-demo-panel small { position: absolute; left: 7px; top: 9px; padding: 3px 5px; border-radius: 4px; color: #fff; background: rgba(5,19,33,.62); font-size: 6px; font-weight: 850; text-transform: uppercase; }
.mini-transition { display: grid; place-items: center; color: #56c7ff; }
.mini-demo-panel { background: #f2f6fa; }
.tiny-ui { padding: 28px 9px 9px; }
.tiny-ui > span { height: 5px; display: block; margin-bottom: 5px; border-radius: 3px; background: #d6e0e9; }
.tiny-ui > strong { height: 65px; display: block; margin: 10px 0 7px; border-radius: 6px; background: linear-gradient(160deg, #e9f4ff, #bcdff9); }
.tiny-ui > i { width: 47%; height: 38px; display: inline-block; border-radius: 5px; background: #fff; border: 1px solid #dce4ee; }
.active-timeline { left: 27px; right: 27px; }
.active-timeline span { width: 56%; background: var(--cyan); }
.comparison-card ul { display: grid; gap: 10px; margin: 16px 0 2px; padding: 0; list-style: none; }
.comparison-card li { display: flex; align-items: center; gap: 10px; color: #475467; font-size: 11px; font-weight: 690; }
.comparison-card li > span { color: var(--quiet); font-size: 8px; font-weight: 850; }
.after-card li > span { color: var(--primary); }
.comparison-arrow { display: grid; place-items: center; }
.comparison-arrow span { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid rgba(8,127,245,.22); border-radius: 50%; color: var(--primary); background: var(--primary-soft); box-shadow: 0 8px 22px rgba(8,127,245,.12); }

.workflow { background: linear-gradient(180deg, var(--bg), #eef4fb); }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.step-card { position: relative; padding: 16px 16px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.step-number { position: absolute; z-index: 4; top: 28px; left: 28px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--navy); box-shadow: 0 8px 18px rgba(7,24,45,.22); font-size: 9px; font-weight: 860; }
.step-visual { height: 230px; overflow: hidden; margin-bottom: 23px; border: 1px solid #e0e8f1; border-radius: 13px; background: #f4f7fb; }
.step-kicker { margin: 0 0 8px; color: var(--primary); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .11em; }
.step-card h3 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.step-card > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.hook-options { position: relative; padding: 25px 20px; background: radial-gradient(circle at 85% 10%, rgba(36,183,242,.15), transparent 32%), #f3f8fd; }
.option-stack { position: absolute; width: 52%; min-height: 58px; display: flex; align-items: center; justify-content: center; padding: 10px; border: 1px solid #d7e3ee; border-radius: 10px; color: #526377; background: rgba(255,255,255,.9); box-shadow: 0 7px 18px rgba(16,40,74,.06); font-size: 10px; font-weight: 800; }
.option-stack:nth-child(2) { left: 35%; top: 31%; transform: rotate(3deg); }.option-stack:nth-child(3) { left: 25%; top: 57%; transform: rotate(-3deg); }.option-stack:nth-child(4) { left: 41%; top: 75%; transform: rotate(2deg); }
.option-main { z-index: 3; left: 14%; top: 11%; justify-content: space-between; color: #0866d8; border-color: #88c6fb; background: #eaf5ff; transform: rotate(-2deg); box-shadow: 0 14px 25px rgba(8,127,245,.13); }
.option-main svg { width: 17px; }
.upload-visual { padding: 29px 23px; }
.upload-window { min-height: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #8dc5f7; border-radius: 10px; color: var(--primary); background: #f8fcff; text-align: center; }
.upload-window svg { width: 28px; height: 28px; margin-bottom: 9px; }
.upload-window strong { color: var(--navy); font-size: 10px; }
.upload-window span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.upload-file { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; margin-top: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.upload-file > span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 7px; color: var(--primary); background: var(--primary-soft); }
.upload-file svg { width: 17px; }
.upload-file p { margin: 0; }
.upload-file strong, .upload-file small { display: block; font-size: 8px; }
.upload-file small { color: var(--muted); }
.upload-file i { width: 13px; height: 13px; border: 2px solid #27ae7a; border-top-color: transparent; border-radius: 50%; }
.syncer-visual { display: grid; align-content: center; gap: 9px; padding: 38px 25px 23px; background: linear-gradient(145deg, #07182d, #0c2948); }
.syncer-control { display: flex; align-items: center; justify-content: space-between; padding: 11px; border: 1px solid rgba(124,180,229,.17); border-radius: 9px; color: #c2d6e8; background: rgba(255,255,255,.045); font-size: 9px; font-weight: 790; }
.toggle { width: 27px; height: 15px; position: relative; display: inline-block; border-radius: 999px; background: #36516d; }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.toggle.on { background: #087ff5; }.toggle.on::after { left: 14px; }
.syncer-visual button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 35px; margin-top: 2px; border: 0; border-radius: 8px; color: #fff; background: var(--gradient); font-size: 8px; font-weight: 850; }
.syncer-visual button svg { width: 13px; }
.ad-timeline { display: grid; grid-template-columns: 220px 1fr; gap: 25px; align-items: center; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.timeline-label strong, .timeline-label span { display: block; }
.timeline-label strong { font-size: 12px; }.timeline-label span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.timeline-track { height: 48px; display: grid; grid-template-columns: minmax(135px, .27fr) 26px minmax(0, .73fr); overflow: hidden; border-radius: 9px; color: #fff; background: #dce4ee; }
.track-hook, .track-demo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 15px; }
.track-hook { background: var(--gradient); }.track-demo { background: #0b203a; }
.timeline-track span { font-size: 8px; opacity: .72; }.timeline-track strong { font-size: 10px; }
.track-transition { position: relative; background: #fff; }
.track-transition::before, .track-transition::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0,100% 50%,0 100%); background: var(--primary); }
.track-transition::after { left: 8px; background: #0b203a; }

.shuffle-section { position: relative; background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%); }
.shuffle-panel { position: relative; min-height: 360px; display: grid; grid-template-columns: minmax(0,.72fr) minmax(520px,1.28fr); gap: 54px; align-items: center; overflow: hidden; padding: 54px 58px; border: 1px solid rgba(71,156,240,.28); border-radius: 24px; color: #eaf6ff; background: radial-gradient(circle at 78% -8%, rgba(54,166,255,.25), transparent 38%), linear-gradient(135deg,#061426,#0b2542 58%,#08213c); box-shadow: 0 28px 70px rgba(6,25,47,.17); }
.shuffle-panel::after { content: ""; position: absolute; inset: auto -90px -125px auto; width: 300px; height: 300px; border: 1px solid rgba(71,183,255,.12); border-radius: 50%; box-shadow: 0 0 0 36px rgba(71,183,255,.035), 0 0 0 72px rgba(71,183,255,.025); pointer-events: none; }
.shuffle-orbit { position: absolute; border: 1px solid rgba(78,173,241,.09); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 360px; height: 360px; right: -165px; top: -170px; box-shadow: 0 0 0 46px rgba(54,166,255,.02); }
.orbit-two { width: 210px; height: 210px; left: -130px; bottom: -85px; box-shadow: 0 0 0 34px rgba(54,166,255,.018); }
.shuffle-copy { position: relative; z-index: 2; }
.shuffle-copy h2 { margin: 0; max-width: 510px; font-size: clamp(36px,4.3vw,55px); line-height: 1.04; letter-spacing: -.05em; }
.shuffle-copy > p:not(.eyebrow) { max-width: 500px; margin: 18px 0 0; color: #a9c3dc; font-size: 15px; }
.shuffle-result-copy { max-width: 500px; margin-top: 26px; padding: 14px 16px; border-left: 3px solid var(--cyan); border-radius: 0 8px 8px 0; background: rgba(255,255,255,.045); }
.shuffle-result-copy span, .shuffle-result-copy strong { display: block; }
.shuffle-result-copy span { color: #75a3c9; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.shuffle-result-copy strong { min-height: 35px; display: flex; align-items: center; margin-top: 5px; color: #eaf7ff; font-size: 12px; line-height: 1.45; }

.app-slot-machine { position: relative; z-index: 2; min-width: 0; padding: 12px 72px 28px 0; }
.app-slot-face { padding: 18px; border: 1px solid rgba(126,195,255,.3); border-radius: 18px; background: linear-gradient(180deg,rgba(11,33,59,.88),rgba(5,18,34,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 15px 35px rgba(0,0,0,.25); transition: box-shadow .25s ease, border-color .25s ease; }
.app-slot-reels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.app-slot-reel-card { min-width: 0; }
.app-slot-reel-card > small { display: block; margin: 0 0 7px; color: #65c7ff; font-size: 9px; font-weight: 850; letter-spacing: .11em; text-align: center; }
.app-slot-window { min-height: 88px; display: grid; place-items: center; overflow: hidden; padding: 11px; border: 1px solid rgba(121,180,231,.28); border-radius: 10px; color: #0e2742; background: linear-gradient(180deg,#fafdff,#dcecff); box-shadow: inset 0 4px 16px rgba(18,82,142,.12); text-align: center; transition: border-color .2s ease, box-shadow .2s ease; }
.app-slot-window span { font-size: 12px; font-weight: 820; line-height: 1.3; transition: transform .12s ease, opacity .12s ease; }
.app-slot-window span.reel-pop { animation: appReelPop .13s ease; }
@keyframes appReelPop { from { opacity: .32; transform: translateY(-9px); } to { opacity: 1; transform: translateY(0); } }
.app-slot-shuffle-button { width: min(280px,100%); min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 13px auto 0; border: 0; border-radius: 9px; color: #fff; background: var(--gradient); box-shadow: 0 10px 25px rgba(8,127,245,.26); font-size: 12px; font-weight: 850; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.app-slot-shuffle-button:hover { transform: translateY(-1px); box-shadow: 0 13px 30px rgba(8,127,245,.32); }
.app-slot-shuffle-button:disabled { opacity: .72; cursor: wait; transform: none; }
.app-slot-shuffle-button > span { font-size: 18px; line-height: 1; }
.app-slot-status { min-height: 29px; display: grid; grid-template-columns: auto auto 1fr; gap: 7px; align-items: center; margin-top: 10px; color: #d9eaf8; font-size: 10px; }
.app-slot-status strong { font-size: 10px; }
.app-slot-status small { color: #89a8c3; font-size: 9px; text-align: right; }
.app-slot-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.1); }
.app-slot-status-dot.winner { background: var(--cyan); box-shadow: 0 0 0 4px rgba(82,209,255,.12); }
.app-slot-lever { position: absolute; right: 1px; top: 40px; width: 62px; height: 150px; border: 0; background: transparent; color: #bfe7ff; }
.app-lever-base { position: absolute; left: 12px; bottom: 4px; width: 44px; height: 60px; border: 1px solid #557996; border-radius: 12px; background: linear-gradient(145deg,#183958,#07182d); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.2); }
.app-lever-arm { position: absolute; left: 31px; bottom: 47px; width: 7px; height: 84px; border-radius: 999px; background: linear-gradient(90deg,#769ab7,#e1f3ff 55%,#54758f); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.app-lever-knob { position: absolute; left: 17px; top: 0; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 28%,#89d9ff,#0d8cff 47%,#0754b1 75%); box-shadow: 0 7px 16px rgba(0,117,232,.4); transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.app-slot-lever strong { position: absolute; right: 7px; bottom: -18px; color: #81a3bf; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.app-slot-lever:hover .app-lever-knob { box-shadow: 0 8px 20px rgba(0,151,255,.55); }
.app-slot-lever.pulled .app-lever-arm { transform: rotate(24deg) scaleY(.76); }
.app-slot-lever.pulled .app-lever-knob { transform: translate(18px,32px); }
.app-slot-machine.spinning .app-slot-face { border-color: rgba(56,189,248,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(56,189,248,.28), 0 16px 42px rgba(0,130,255,.22); }
.app-slot-machine.settled .app-slot-window { border-color: rgba(36,183,242,.65); box-shadow: inset 0 4px 16px rgba(18,82,142,.12), 0 0 0 1px rgba(36,183,242,.08); }
.machine-note { position: absolute; left: 0; right: 72px; bottom: 0; margin: 0; color: #6f8ba5; font-size: 9px; text-align: center; }

.examples { background: #fff; }
.examples-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; }
.example-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.example-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.example-video { position: relative; aspect-ratio: 9/13.5; overflow: hidden; background: #0a1f37; }
.example-video > img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }.example-card:hover .example-video > img { transform: scale(1.025); }
.example-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(3,12,22,.88)); }
.example-badge { position: absolute; z-index: 3; left: 11px; top: 11px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #dff4ff; background: rgba(4,19,34,.57); backdrop-filter: blur(7px); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.example-overlay { position: absolute; z-index: 3; left: 13px; right: 13px; bottom: 14px; color: #fff; }
.example-overlay strong, .example-overlay span { display: block; }.example-overlay strong { font-size: 15px; }.example-overlay span { margin-top: 3px; color: #d6e8f6; font-size: 10px; }
.example-play { position: absolute; z-index: 4; right: 12px; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(5,21,39,.42); backdrop-filter: blur(6px); }
.example-play svg { width: 15px; height: 15px; }
.example-info { padding: 13px; }.example-info p { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin: 0; padding: 6px 0; border-bottom: 1px solid #edf1f5; font-size: 9px; }.example-info p:last-child { border-bottom: 0; }.example-info span { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }.example-info strong { color: #344054; text-align: right; }
.phone-prop { position: absolute; z-index: 2; right: -3%; bottom: 14%; width: 43%; aspect-ratio: 9/16; border: 5px solid #17293a; border-radius: 15px; background: #e9f4ff; transform: rotate(-9deg); box-shadow: 0 15px 25px rgba(0,0,0,.3); }.phone-prop span, .phone-prop i, .phone-prop b { display: block; margin: 16px 8px 0; border-radius: 4px; background: #087ff5; }.phone-prop span { height: 9px; }.phone-prop i { height: 47px; background: #fff; }.phone-prop b { height: 25px; background: #bfdff8; }
.generated-example { background: linear-gradient(145deg,#07182d,#10375e); }
.extension-screen { position: absolute; inset: 12% 8% 16%; overflow: hidden; border: 3px solid #24445f; border-radius: 10px; background: #edf2f7; transform: rotate(-2deg); box-shadow: 0 20px 33px rgba(0,0,0,.28); }
.extension-browser { height: 25px; display: flex; gap: 4px; align-items: center; padding: 0 8px; background: #fff; border-bottom: 1px solid #dbe3eb; }.extension-browser span { width: 5px; height: 5px; border-radius: 50%; background: #ccd7e2; }.extension-browser i { width: 50%; height: 6px; margin-left: 6px; border-radius: 5px; background: #e2e8ef; }
.extension-popup { width: 72%; margin: 19px auto; padding: 13px; border-radius: 8px; background: #fff; box-shadow: 0 10px 20px rgba(30,49,69,.12); }.extension-popup img { width: 16px; height: 23px; object-fit: contain; }.extension-popup strong { display: block; margin: 6px 0; color: #172b42; font-size: 9px; }.extension-popup > span { height: 5px; display: block; margin: 5px 0; border-radius: 3px; background: #dce4ee; }.extension-popup button { width: 100%; margin-top: 8px; padding: 6px; border: 0; border-radius: 5px; color: #fff; background: #087ff5; font-size: 7px; font-weight: 800; }
.examples-disclaimer { max-width: 690px; margin: 20px auto 0; color: var(--quiet); font-size: 10px; text-align: center; }

.features { background: linear-gradient(180deg,#f4f7fb,#eef4fb); }
.features-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.feature-card { position: relative; min-height: 240px; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.feature-card::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 110px; height: 110px; border: 1px solid rgba(8,127,245,.09); border-radius: 50%; box-shadow: 0 0 0 20px rgba(8,127,245,.02); }
.feature-icon { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 27px; border-radius: 12px; color: var(--primary); background: var(--primary-soft); }.feature-icon svg { width: 23px; height: 23px; }
.feature-card h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }.feature-card > p { margin: 10px 0 0; color: var(--muted); font-size: 12px; }.feature-meta { position: absolute; left: 24px; bottom: 22px; color: var(--primary); font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.creator-icon { width: auto; display: block; background: transparent; }.creator-stack { display: flex; }.creator-stack img { width: 39px; height: 39px; object-fit: cover; margin-left: -9px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 4px 10px rgba(16,40,74,.12); }.creator-stack img:first-child { margin-left: 0; }

.audiences { background: #fff; }
.audience-shell { display: grid; grid-template-columns: .68fr 1.32fr; gap: 75px; align-items: center; }
.audience-copy h2 { font-size: clamp(36px,4vw,52px); }.audience-copy > p:not(.eyebrow) { margin: 19px 0 0; color: var(--muted); font-size: 15px; }.text-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; color: var(--primary); font-size: 12px; font-weight: 850; text-decoration: none; }
.audience-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.audience-card { position: relative; min-height: 155px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); transition: transform .18s ease, border-color .18s ease, background .18s ease; }.audience-card:hover { transform: translateY(-3px); border-color: #a6cff4; background: #f5faff; }
.audience-card > span { position: absolute; right: 16px; top: 14px; color: #b4c0cc; font-size: 8px; font-weight: 850; }.audience-card svg { width: 25px; height: 25px; color: var(--primary); }.audience-card h3 { margin: 31px 0 0; font-size: 14px; line-height: 1.25; }

.why-section { color: #fff; background: radial-gradient(circle at 13% 12%, rgba(36,183,242,.17), transparent 35%), linear-gradient(145deg,#061426,#09223d 60%,#0a2948); }
.why-grid { display: grid; grid-template-columns: minmax(500px,1.05fr) minmax(0,.95fr); gap: 80px; align-items: center; }
.why-visual { position: relative; min-height: 490px; }
.variation-card { position: absolute; width: 31%; overflow: hidden; padding: 8px; border: 1px solid rgba(148,198,238,.22); border-radius: 14px; background: rgba(9,34,58,.9); box-shadow: 0 20px 35px rgba(0,0,0,.25); }.variation-card span { display: block; margin: 1px 2px 6px; color: #6aaedc; font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }.variation-card img { width: 100%; height: auto; aspect-ratio: 9/12; object-fit: cover; border-radius: 8px; }.variation-card strong { display: block; margin: 7px 2px 2px; color: #e7f5ff; font-size: 8px; }
.variation-card-one { left: 3%; top: 12%; transform: rotate(-7deg); }.variation-card-two { left: 33%; top: 2%; z-index: 2; transform: rotate(1deg); }.variation-card-three { right: 3%; top: 14%; transform: rotate(7deg); }
.shared-demo { position: absolute; z-index: 4; left: 50%; bottom: 2%; min-width: 245px; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid rgba(100,193,250,.31); border-radius: 11px; background: rgba(4,17,32,.88); box-shadow: 0 16px 35px rgba(0,0,0,.3); transform: translateX(-50%); backdrop-filter: blur(10px); }.shared-demo svg { width: 28px; height: 28px; padding: 5px; border-radius: 8px; color: #61caff; background: rgba(8,127,245,.18); }.shared-demo p { margin: 0; }.shared-demo strong,.shared-demo span { display: block; }.shared-demo strong { font-size: 10px; }.shared-demo span { color: #829db5; font-size: 8px; }
.why-copy h2 { font-size: clamp(39px,4.7vw,59px); }.why-copy > p:not(.eyebrow) { margin: 21px 0 0; color: #9eb5ca; font-size: 16px; }
.check-list { display: grid; gap: 14px; margin: 29px 0 0; padding: 0; list-style: none; }.check-list li { display: flex; align-items: center; gap: 10px; color: #d8e8f5; font-size: 12px; }.check-list li > span { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #7bd5ff; background: rgba(36,183,242,.12); }.check-list svg { width: 13px; height: 13px; }

.pricing { background: #f4f7fb; }
.pricing-shell { max-width: 960px; }
.trial-card { display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; border: 1px solid rgba(8,127,245,.3); border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(8,62,114,.13); }
.trial-card-copy { position: relative; overflow: hidden; padding: 44px; background: radial-gradient(circle at 100% 0%, rgba(36,183,242,.13), transparent 38%), #fff; }.trial-card-copy::after { content: ""; position: absolute; right: -80px; bottom: -90px; width: 220px; height: 220px; border: 1px solid rgba(8,127,245,.08); border-radius: 50%; box-shadow: 0 0 0 35px rgba(8,127,245,.02); }
.trial-badge { display: inline-flex; padding: 6px 9px; border-radius: 999px; color: #0866d8; background: #e9f4ff; font-size: 8px; font-weight: 860; text-transform: uppercase; letter-spacing: .09em; }.trial-card h3 { margin: 17px 0 0; font-size: clamp(31px,4vw,48px); line-height: 1.08; letter-spacing: -.045em; }.trial-card h3 span { color: var(--primary); }.trial-card-copy > p { max-width: 480px; margin: 16px 0 25px; color: var(--muted); font-size: 14px; }.trial-card-copy small { position: relative; z-index: 2; display: block; max-width: 410px; margin-top: 13px; color: var(--quiet); font-size: 8px; }
.trial-card-features { display: flex; flex-direction: column; justify-content: center; padding: 42px; color: #fff; background: linear-gradient(145deg,#07182d,#0b2745); }.trial-card-features > p { margin: 0 0 18px; color: #7eb5dc; font-size: 9px; font-weight: 860; text-transform: uppercase; letter-spacing: .1em; }.trial-card-features ul { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }.trial-card-features li { display: flex; align-items: center; gap: 10px; color: #e4f1fb; font-size: 12px; }.trial-card-features li span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #77d5ff; background: rgba(36,183,242,.11); }.trial-card-features svg { width: 13px; height: 13px; }

.faq { background: #fff; }
.faq-shell { display: grid; grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr); gap: 90px; align-items: start; }
.faq-heading { position: sticky; top: 115px; }.faq-heading h2 { font-size: clamp(35px,4vw,51px); }.faq-heading > p:not(.eyebrow) { margin: 20px 0 0; color: var(--muted); font-size: 15px; }
.accordion { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-item > button { width: 100%; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 4px; border: 0; color: var(--text); background: transparent; font-size: 14px; font-weight: 820; text-align: left; }.faq-item > button i { position: relative; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--primary-soft); }.faq-item > button i::before,.faq-item > button i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; border-radius: 999px; background: var(--primary); transform: translate(-50%,-50%); transition: transform .2s ease; }.faq-item > button i::after { transform: translate(-50%,-50%) rotate(90deg); }.faq-item > button[aria-expanded="true"] i::after { transform: translate(-50%,-50%) rotate(0deg); }.faq-answer { overflow: hidden; }.faq-answer p { margin: -3px 44px 23px 4px; color: var(--muted); font-size: 12px; line-height: 1.75; }

.final-cta { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg,#061426,#0a2440 60%,#0c3154); }
.cta-line-art span { position: absolute; border: 1px solid rgba(67,177,246,.1); border-radius: 50%; }.cta-line-art span:nth-child(1) { width: 420px; height: 420px; right: -120px; top: -180px; box-shadow: 0 0 0 55px rgba(36,183,242,.02),0 0 0 110px rgba(36,183,242,.014); }.cta-line-art span:nth-child(2) { width: 220px; height: 220px; left: -130px; bottom: -70px; }.cta-line-art span:nth-child(3) { width: 900px; height: 900px; left: 38%; top: 78%; transform: translate(-50%,-50%); }
.final-cta-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.72fr); gap: 80px; align-items: center; }.final-copy h2 { max-width: 720px; font-size: clamp(42px,5.2vw,67px); }.final-copy > p:not(.eyebrow) { max-width: 570px; margin: 22px 0 28px; color: #a9c0d3; font-size: 17px; }.final-copy > small { display: block; margin-top: 12px; color: #7f9bb3; font-size: 9px; }
.final-visual { min-height: 330px; display: flex; align-items: center; justify-content: center; }.final-icon { width: 112px; height: 150px; display: grid; place-items: center; border: 1px solid rgba(126,195,245,.2); border-radius: 24px; background: rgba(7,32,56,.7); box-shadow: 0 22px 45px rgba(0,0,0,.25); transform: rotate(-5deg); }.final-icon img { width: 67px; height: 98px; object-fit: contain; }.flow-ribbon { position: relative; width: 105px; height: 60px; display: flex; align-items: center; justify-content: space-around; }.flow-ribbon::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg,#087ff5,#24b7f2); }.flow-ribbon span { position: relative; z-index: 2; width: 8px; height: 8px; border: 2px solid #6bd1ff; border-radius: 50%; background: #0a2340; }.flow-ribbon i { position: absolute; right: -1px; top: calc(50% - 5px); width: 10px; height: 10px; border-top: 2px solid #24b7f2; border-right: 2px solid #24b7f2; transform: rotate(45deg); }
.final-phone { width: 138px; aspect-ratio: 9/16; padding: 7px; border: 1px solid #315574; border-radius: 24px; background: #061426; box-shadow: 0 25px 46px rgba(0,0,0,.3); transform: rotate(5deg); }.final-phone-screen { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border-radius: 17px; color: #fff; background: radial-gradient(circle at 70% 10%,rgba(36,183,242,.24),transparent 35%),linear-gradient(160deg,#0d3559,#087ff5); }.final-phone-screen b { font-size: 13px; letter-spacing: .09em; }.final-phone-screen span { color: #92ddff; font-size: 26px; }.final-phone-screen i { padding: 6px 10px; border-radius: 999px; color: #087ff5; background: #fff; font-size: 10px; font-style: normal; font-weight: 900; }

.site-footer { color: #d5e5f2; background: #04101f; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .65fr .65fr 1fr; gap: 65px; padding-top: 64px; padding-bottom: 54px; }.footer-brand img { width: 154px; height: auto; filter: brightness(0) invert(1); opacity: .95; }.footer-brand p { max-width: 280px; margin: 16px 0 0; color: #7993aa; font-size: 11px; }.footer-links { display: flex; flex-direction: column; gap: 11px; }.footer-links strong,.footer-cta strong { margin-bottom: 5px; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }.footer-links a { color: #8ea6ba; font-size: 11px; text-decoration: none; }.footer-links a:hover { color: #fff; }.footer-cta { display: flex; flex-direction: column; align-items: flex-start; }.footer-cta .button { margin-top: 9px; }.footer-bottom { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(119,157,190,.14); color: #5f7991; font-size: 9px; }
.prototype-toast { position: fixed; z-index: 200; right: 18px; bottom: 18px; max-width: 310px; padding: 13px 15px; border: 1px solid rgba(106,190,246,.3); border-radius: 11px; color: #eaf7ff; background: rgba(5,25,45,.94); box-shadow: 0 18px 45px rgba(0,0,0,.25); backdrop-filter: blur(12px); }.prototype-toast strong,.prototype-toast span { display: block; }.prototype-toast strong { font-size: 10px; }.prototype-toast span { margin-top: 3px; color: #91adc3; font-size: 8px; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .desktop-nav { gap: 18px; }.desktop-nav a { font-size: 12px; }
  .hero-grid { grid-template-columns: minmax(0,.88fr) minmax(470px,1.12fr); gap: 40px; }.hero-copy h1 { font-size: clamp(48px,5.8vw,65px); }
  .truth-list { grid-template-columns: repeat(3,1fr); }.truth-list span:nth-child(3) { border-right: 0; }.truth-list span:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .shuffle-panel { grid-template-columns: minmax(0,.72fr) minmax(470px,1.28fr); gap: 38px; padding: 46px; }.app-slot-window { min-height: 82px; }
  .examples-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.example-video { aspect-ratio: 9/12; }
  .why-grid { grid-template-columns: minmax(430px,1fr) 1fr; gap: 50px; }
  .footer-grid { gap: 35px; }
}

@media (max-width: 920px) {
  .section-pad { padding: 86px 0; }
  .desktop-nav, .nav-sign-in { display: none; }.menu-button { display: grid; }.nav-cta { margin-left: auto; }
  .hero { padding-top: 65px; }.hero-grid { grid-template-columns: 1fr; gap: 56px; }.hero-copy { max-width: 720px; text-align: center; margin: 0 auto; }.hero-copy .eyebrow { justify-content: center; }.hero-copy h1,.hero-lede { margin-right: auto; margin-left: auto; }.hero-actions,.trial-note,.hero-facts { justify-content: center; }.hero-product { width: min(100%,650px); margin: 0 auto; }
  .split-heading { grid-template-columns: 1fr; gap: 18px; }.split-heading > p { max-width: 650px; }
  .comparison-grid { grid-template-columns: 1fr; gap: 18px; }.comparison-arrow { height: 35px; transform: rotate(90deg); }.comparison-card { max-width: 680px; width: 100%; margin: 0 auto; }
  .steps-grid { grid-template-columns: 1fr; }.step-card { display: grid; grid-template-columns: 40% 1fr; column-gap: 25px; }.step-visual { grid-row: 1 / 5; margin: 0; }.step-number { left: 27px; }.step-kicker { align-self: end; }.step-card > p:last-child { align-self: start; }
  .shuffle-panel { grid-template-columns: 1fr; gap: 38px; padding: 46px; }.shuffle-copy { max-width: 680px; text-align: center; margin: 0 auto; }.shuffle-copy .eyebrow { justify-content: center; }.shuffle-copy h2,.shuffle-copy > p:not(.eyebrow),.shuffle-result-copy { margin-right: auto; margin-left: auto; }.app-slot-machine { width: min(100%,680px); margin: 0 auto; }
  .features-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .audience-shell { grid-template-columns: 1fr; gap: 42px; }.audience-copy { max-width: 690px; }.audience-grid { grid-template-columns: repeat(3,1fr); }
  .why-grid { grid-template-columns: 1fr; }.why-visual { width: min(100%,620px); margin: 0 auto; }.why-copy { max-width: 720px; }
  .faq-shell { grid-template-columns: 1fr; gap: 42px; }.faq-heading { position: static; max-width: 730px; }
  .final-cta-grid { grid-template-columns: 1fr; }.final-copy { text-align: center; }.final-copy .eyebrow { justify-content: center; }.final-copy h2,.final-copy > p:not(.eyebrow) { margin-right: auto; margin-left: auto; }.final-visual { min-height: 270px; }
  .footer-grid { grid-template-columns: 1.2fr .7fr .7fr; }.footer-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(119,157,190,.14); }.footer-cta .button { margin: 0; }
}

@media (max-width: 680px) {
  .content-shell,.nav-shell { width: min(calc(100% - 28px), var(--max-width)); }
  .section-pad { padding: 72px 0; }.section-heading { margin-bottom: 35px; }.section-heading h2,.faq-heading h2,.audience-copy h2,.why-copy h2,.final-copy h2 { font-size: 36px; }.section-heading > p:last-child { font-size: 14px; }
  .nav-shell { min-height: 68px; }.brand-link img { width: 132px; }.nav-cta { min-height: 38px; padding: 8px 11px; font-size: 10px; }.menu-button { width: 38px; height: 38px; }.mobile-menu { top: 68px; }
  .hero { min-height: 0; padding-top: 54px; }.hero-copy h1 { font-size: 48px; }.hero-lede { font-size: 16px; }.hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.trial-note { justify-content: center; }.hero-facts { display: grid; grid-template-columns: 1fr; justify-items: start; width: max-content; max-width: 100%; margin-right: auto; margin-left: auto; gap: 11px; text-align: left; }
  .workflow-stage { padding: 12px; border-radius: 18px; }.product-topbar { padding-bottom: 11px; }.flow-visual { grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr); gap: 5px; padding: 14px 0 12px; }.phone-frame { border-width: 3px; border-radius: 13px; }.phone-label { font-size: 7px; }.phone-label span { width: 17px; height: 17px; }.transition-tag { display: none; }.transition-line { height: 27px; }.finish-bar { align-items: flex-start; }.finish-controls span { display: none; }.floating-chip { display: none; }
  .truth-list { grid-template-columns: repeat(2,1fr); }.truth-list span { min-height: 58px; border-bottom: 1px solid var(--line); }.truth-list span:nth-child(2n) { border-right: 0; }.truth-list span:nth-last-child(-n+2) { border-bottom: 0; }
  .comparison-video { min-height: 270px; }.plain-browser { height: 205px; }.finished-demo { min-height: 270px; }.comparison-card { padding: 12px; }
  .step-card { display: block; }.step-visual { height: 220px; margin-bottom: 22px; }.step-number { top: 27px; }.ad-timeline { grid-template-columns: 1fr; gap: 12px; }.timeline-track { grid-template-columns: minmax(95px,.32fr) 22px 1fr; }.track-hook,.track-demo { padding: 8px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
  .shuffle-panel { gap: 34px; padding: 34px 24px; border-radius: 19px; }.shuffle-copy h2 { font-size: 40px; }.app-slot-machine { padding-right: 60px; }.app-slot-face { padding: 13px; }.app-slot-reels { gap: 7px; }.app-slot-window { min-height: 72px; padding: 8px 6px; }.app-slot-window span { font-size: 10px; }.app-slot-reel-card > small { font-size: 8px; }.app-slot-status { grid-template-columns: auto auto; }.app-slot-status small { grid-column: 1 / -1; text-align: center; }.app-slot-lever { right: 0; transform: scale(.88); transform-origin: top right; }.machine-note { right: 60px; }
  .examples-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.example-video { aspect-ratio: 9/14; }.example-overlay strong { font-size: 11px; }.example-info { padding: 9px; }.example-info p { display: block; }.example-info strong { display: block; margin-top: 2px; text-align: left; }
  .features-grid { grid-template-columns: 1fr; }.feature-card { min-height: 225px; }
  .audience-grid { grid-template-columns: repeat(2,1fr); }.audience-card { min-height: 140px; padding: 17px; }
  .why-visual { min-height: 370px; overflow: hidden; border-radius: 16px; }.variation-card { width: 35%; }.variation-card-one { left: 0; }.variation-card-two { left: 32.5%; }.variation-card-three { right: 0; }.shared-demo { min-width: 220px; }
  .trial-card { grid-template-columns: 1fr; }.trial-card-copy,.trial-card-features { padding: 30px 25px; }
  .faq-item > button { min-height: 66px; font-size: 12px; }.faq-answer p { margin-right: 35px; }
  .final-visual { transform: scale(.84); margin: -10px -35px; }.final-phone { width: 126px; }.final-icon { width: 100px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }.footer-brand { grid-column: 1/-1; }.footer-cta { grid-column: 1/-1; display: grid; gap: 12px; }.footer-bottom { min-height: 80px; flex-direction: column; justify-content: center; text-align: center; }
}

@media (max-width: 390px) {
  .content-shell,.nav-shell { width: min(calc(100% - 22px), var(--max-width)); }
  .nav-cta { display: none; }.brand-link img { width: 136px; }.menu-button { margin-left: auto; }
  .hero-copy h1 { font-size: 42px; }.hero-lede { font-size: 15px; }.hero-facts { width: 100%; }
  .product-brand span { display: none; }.finish-bar > div:first-child small { display: none; }
  .examples-grid { grid-template-columns: 1fr; }.example-video { aspect-ratio: 9/12.5; }
  .audience-grid { grid-template-columns: 1fr; }.audience-card { min-height: 120px; }.audience-card h3 { margin-top: 24px; }
  .why-visual { min-height: 330px; }.variation-card { padding: 6px; }.variation-card strong { font-size: 7px; }.shared-demo { min-width: 205px; padding: 11px; }
  .final-visual { transform: scale(.72); margin: -35px -75px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 430px) {
  .shuffle-panel { padding: 30px 16px; }
  .shuffle-copy h2 { font-size: 36px; }
  .shuffle-copy > p:not(.eyebrow) { font-size: 14px; }
  .app-slot-machine { padding-right: 48px; }
  .app-slot-face { padding: 10px; }
  .app-slot-reels { gap: 5px; }
  .app-slot-window { min-height: 66px; padding: 6px 4px; }
  .app-slot-window span { font-size: 9px; }
  .app-slot-lever { right: -8px; transform: scale(.72); }
  .app-slot-shuffle-button { min-height: 42px; font-size: 11px; }
  .machine-note { right: 48px; font-size: 8px; }
}

/* V1.15.57 conversion-positioning pass */
.audience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.audience-card { min-height: 184px; }
.audience-card h3 { margin-top: 27px; }
.audience-card p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.pricing-card .trial-card-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.pro-plan { align-items: flex-start; }
.pro-badge { display: inline-flex; padding: 6px 9px; border: 1px solid rgba(111,205,255,.24); border-radius: 999px; color: #8bdcff; background: rgba(36,183,242,.1); font-size: 8px; font-weight: 860; text-transform: uppercase; letter-spacing: .09em; }
.pro-price { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; }
.pro-price strong { color: #fff; font-size: clamp(39px,4.5vw,55px); line-height: 1; letter-spacing: -.045em; }
.pro-price span { color: #7ea0ba; font-size: 11px; font-weight: 700; }
.trial-card-features .pro-description { margin: 12px 0 20px; color: #a8c2d7; font-size: 11px; line-height: 1.55; text-transform: none; letter-spacing: 0; }
.button-plan { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding: 11px 15px; border: 1px solid rgba(124,207,255,.28); border-radius: 10px; color: #07182d; background: #fff; font-size: 10px; font-weight: 860; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.12); transition: transform .18s ease, box-shadow .18s ease; }
.button-plan:hover { transform: translateY(-1px); box-shadow: 0 11px 28px rgba(0,0,0,.17); }
@media (max-width: 920px) { .audience-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 390px) { .audience-grid { grid-template-columns: 1fr; } .audience-card { min-height: 145px; } }

/* Hormozi-style offer positioning pass */
.offer-stack { background: #fff; }
.offer-heading-muted { color: #667085; }
.offer-value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.offer-value-card { position: relative; min-height: 260px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg,#fff,#f8fbfe); box-shadow: var(--shadow-sm); }
.offer-value-number { position: absolute; right: 20px; top: 18px; color: #d8e4ef; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.offer-value-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: var(--primary); background: var(--primary-soft); }
.offer-value-icon svg { width: 22px; height: 22px; }
.offer-value-card h3 { margin: 25px 0 10px; font-size: 22px; line-height: 1.12; letter-spacing: -.03em; }
.offer-value-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.offer-equation { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 14px; align-items: center; margin-top: 24px; padding: 22px; border: 1px solid rgba(8,127,245,.18); border-radius: 18px; background: linear-gradient(135deg,#f5faff,#eef8ff); }
.offer-equation > div { padding: 18px; border: 1px solid rgba(8,127,245,.12); border-radius: 13px; background: rgba(255,255,255,.8); text-align: center; }
.offer-equation small { display: block; margin-bottom: 7px; color: #718096; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.offer-equation strong { color: #102a43; font-size: 17px; letter-spacing: -.02em; }
.equation-symbol { color: var(--primary); font-size: 27px; font-weight: 800; }
.equation-tests { box-shadow: inset 0 0 0 1px rgba(8,127,245,.12), 0 8px 24px rgba(8,127,245,.08); }
.pro-price del { margin-left: 3px; color: #6f8da5; font-size: 16px; font-weight: 750; text-decoration-thickness: 1.5px; }
.trial-card-features .founding-note { display: block; margin-top: 11px; color: #7f9bb3; font-size: 8px; line-height: 1.5; }

@media (max-width: 860px) {
  .offer-value-grid { grid-template-columns: 1fr; }
  .offer-value-card { min-height: 0; }
  .offer-equation { grid-template-columns: 1fr; }
  .equation-symbol { transform: rotate(90deg); text-align: center; }
}

/* Real proof media integration - Aug 2026 */
.real-output-card { overflow: hidden; border: 1px solid rgba(105,167,226,.28); border-radius: 24px; color: #eaf6ff; background: radial-gradient(circle at 80% 0%, rgba(36,183,242,.18), transparent 34%), linear-gradient(145deg,#061426,#0b2542 62%,#081d35); box-shadow: 0 34px 80px rgba(3,20,42,.25); }
.real-output-topbar, .proof-card-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.09); font-size:10px; font-weight:850; letter-spacing:.02em; }
.real-output-topbar > div, .proof-card-header span { display:flex; align-items:center; gap:8px; }.real-output-topbar img{width:14px;height:auto}.real-proof-pill{display:flex;align-items:center;gap:6px;color:#9fd8ff}.real-proof-pill i,.proof-card-header i{width:7px;height:7px;border-radius:50%;background:#31d19a;box-shadow:0 0 0 4px rgba(49,209,154,.1)}
.hero-output-grid { display:grid; grid-template-columns:minmax(235px,.82fr) minmax(0,1.18fr); gap:22px; align-items:center; padding:22px; }
.portrait-video-shell { position:relative; overflow:hidden; border-radius:17px; background:#020b14; box-shadow:0 18px 40px rgba(0,0,0,.24); }
.proof-video { display:block; width:100%; height:100%; object-fit:cover; background:#020b14; }.hero-video-shell{aspect-ratio:9/16;max-height:495px;margin:auto}.video-corner-label{position:absolute;left:10px;bottom:10px;padding:6px 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(5,18,33,.78);backdrop-filter:blur(9px);color:#fff;font-size:8px;font-weight:850}
.hero-proof-notes{display:grid;gap:10px}.proof-note-kicker{margin:0 0 5px;color:#75a3c9;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.proof-note{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.035)}.proof-note>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(36,183,242,.12);color:#55c8ff;font-size:9px;font-weight:900}.proof-note p{margin:0}.proof-note strong,.proof-note small{display:block}.proof-note strong{font-size:11px;color:#f5fbff}.proof-note small{margin-top:3px;color:#86a9c7;font-size:9px;line-height:1.4}.proof-output-tag{display:flex;gap:9px;align-items:center;margin-top:4px;padding:11px 12px;border-radius:10px;background:linear-gradient(90deg,rgba(8,127,245,.16),rgba(36,183,242,.08));border:1px solid rgba(74,179,255,.2)}.proof-output-tag svg{width:18px;height:18px;color:#32d39e}.proof-output-tag strong,.proof-output-tag small{display:block}.proof-output-tag strong{font-size:10px}.proof-output-tag small{margin-top:2px;color:#7fa4c2;font-size:8px}.real-chip{right:-12px!important;bottom:18px!important}

.workflow-proof-grid{display:grid;grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr);gap:42px;align-items:center;margin-top:46px}.workflow-video-card{max-width:410px;margin:0 auto;padding:12px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 24px 60px rgba(14,51,91,.12)}.proof-card-header{padding:5px 4px 12px;border-bottom:0;color:#516679}.proof-card-header span{font-size:9px}.proof-card-header strong{font-size:9px;color:#8293a5}.proof-card-header.dark{color:#b7d6ef}.proof-card-header.dark strong{color:#7195b5}.workflow-video-shell{aspect-ratio:9/16;max-height:585px;border-radius:14px}.workflow-video-card>p{margin:10px 4px 2px;color:#8a99a8;font-size:9px;text-align:center}.workflow-real-steps{display:grid;gap:14px}.workflow-real-step{display:grid;grid-template-columns:52px 1fr;gap:17px;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(9,41,76,.055)}.workflow-step-num{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#087ff5;background:#eaf5ff;font-size:11px;font-weight:900}.workflow-real-step h3{margin:4px 0 7px;font-size:19px;letter-spacing:-.025em}.workflow-real-step p:not(.step-kicker){margin:0;color:#697b8d;font-size:13px;line-height:1.65}.workflow-real-step .step-kicker{margin:0;color:#0a87f4;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}

.shuffle-proof-panel{grid-template-columns:minmax(0,.68fr) minmax(210px,.42fr) minmax(360px,.9fr);gap:28px;padding:44px 44px}.shuffle-real-card{position:relative;z-index:2;min-width:0;padding:10px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(4,17,31,.56);box-shadow:0 20px 40px rgba(0,0,0,.18)}.shuffle-video-shell{aspect-ratio:9/16;max-height:400px;border-radius:13px}.compact-shuffle-machine{min-width:0}.compact-shuffle-machine .app-slot-window{min-height:70px}.compact-shuffle-machine .app-slot-window span{font-size:10px}

.real-variations{background:linear-gradient(180deg,#fff,#f4f8fc)}.real-variations .section-heading{max-width:760px}.variation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:980px;margin:44px auto 0}.variation-card{padding:12px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 18px 44px rgba(11,48,87,.08)}.variation-card.featured-variation{transform:translateY(-10px);border-color:rgba(8,127,245,.24);box-shadow:0 24px 58px rgba(8,127,245,.13)}.variation-label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 3px 10px}.variation-label span{color:#087ff5;font-size:8px;font-weight:950;letter-spacing:.1em}.variation-label strong{color:#6f8091;font-size:8px}.variation-video-shell{aspect-ratio:9/16;border-radius:14px}.variation-card>p{display:flex;flex-direction:column;gap:3px;margin:10px 3px 3px}.variation-card>p strong{font-size:10px;color:#172a3c}.variation-card>p span{font-size:9px;color:#8292a1}.variation-proof-line{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 0;color:#688093;font-size:10px;font-weight:700}.variation-proof-line span{width:7px;height:7px;border-radius:50%;background:#31d19a;box-shadow:0 0 0 4px rgba(49,209,154,.1)}

@media (max-width: 1120px){.shuffle-proof-panel{grid-template-columns:minmax(0,.75fr) minmax(190px,.45fr);}.compact-shuffle-machine{grid-column:1/-1;width:min(100%,620px);margin:0 auto}.hero-output-grid{grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr)}}
@media (max-width: 920px){.hero-output-grid{grid-template-columns:minmax(210px,300px) 1fr}.workflow-proof-grid{grid-template-columns:minmax(250px,.62fr) 1fr;gap:28px}.shuffle-proof-panel{grid-template-columns:1fr;}.shuffle-real-card{width:min(100%,320px);margin:0 auto}.compact-shuffle-machine{grid-column:auto}.variation-grid{gap:12px}.variation-card.featured-variation{transform:none}}
@media (max-width: 700px){.hero-output-grid{grid-template-columns:1fr;padding:16px}.hero-video-shell{width:min(100%,290px)}.hero-proof-notes{grid-template-columns:1fr}.workflow-proof-grid{grid-template-columns:1fr}.workflow-video-card{width:min(100%,340px)}.workflow-real-step{grid-template-columns:44px 1fr;padding:17px}.variation-grid{grid-template-columns:1fr;max-width:340px}.variation-card{padding:10px}.shuffle-proof-panel{padding:30px 18px}.real-chip{display:none}}

/* V1.15.56 landing visual pass - larger real proof, cleaner hierarchy, no clipped cards */
.hero-grid { grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); gap: 72px; }
.hero-product { display:flex; justify-content:center; }
.hero-media-stage { width:min(100%,430px); padding:14px 14px 18px; border:1px solid rgba(105,167,226,.28); border-radius:26px; color:#eaf6ff; background:radial-gradient(circle at 80% 0%,rgba(36,183,242,.18),transparent 36%),linear-gradient(145deg,#061426,#0b2542 62%,#081d35); box-shadow:0 34px 80px rgba(3,20,42,.25); }
.hero-media-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 3px 12px; color:#a9c3dc; font-size:11px; }
.hero-media-heading strong { color:#7899b6; font-size:10px; font-weight:800; }
.hero-video-shell { width:min(100%,350px); max-height:none; margin:0 auto; aspect-ratio:9/16; border-radius:20px; box-shadow:0 22px 50px rgba(0,0,0,.32); }
.hero-media-caption { display:flex; align-items:center; justify-content:center; gap:11px; padding:15px 8px 2px; color:#a9c3dc; font-size:12px; }
.hero-media-caption b { color:#fff; }
.hero-caption-arrow { color:#55c8ff; font-size:20px; }

/* Readability upgrades */
.hero-facts li { font-size:12px; }
.truth-list span { font-size:11px; }
.comparison-card ul li { font-size:12px; }
.feature-card > p { font-size:14px; line-height:1.65; }
.feature-card h3 { font-size:19px; }
.feature-meta { font-size:9px; }

/* Real variations - intentionally isolated from old decorative variation-card styles */
.proof-variation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; width:min(100%,1040px); margin:46px auto 0; }
.proof-variation-card { position:relative; width:auto; min-width:0; overflow:visible; padding:13px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 20px 50px rgba(11,48,87,.09); }
.proof-variation-label { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 4px 11px; }
.proof-variation-label span { color:#087ff5; font-size:10px; font-weight:950; letter-spacing:.1em; }
.proof-variation-label strong { color:#718293; font-size:10px; }
.proof-variation-video { width:100%; aspect-ratio:9/16; border-radius:16px; }
.proof-variation-card > p { display:flex; flex-direction:column; gap:4px; margin:13px 4px 4px; }
.proof-variation-card > p strong { color:#172a3c; font-size:13px; }
.proof-variation-card > p span { color:#7b8c9d; font-size:11px; }
.proof-variation-footer { width:fit-content; max-width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:28px auto 0; padding:10px 15px; border:1px solid #d7e8f8; border-radius:999px; color:#64788c; background:#f7fbff; font-size:12px; }
.proof-variation-footer strong { color:#172a3c; }

/* Workflow proof is a primary visual, not a thumbnail */
.workflow-proof-grid { grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr); gap:56px; align-items:center; }
.workflow-video-card { width:min(100%,430px); max-width:none; padding:14px; }
.workflow-video-shell { width:min(100%,370px); max-height:none; margin:0 auto; }
.workflow-video-card>p { font-size:11px; }
.workflow-real-step { padding:24px; }
.workflow-real-step h3 { font-size:20px; }
.workflow-real-step p:not(.step-kicker) { font-size:14px; }

/* Hook Shuffle: two clear columns instead of three cramped columns */
.shuffle-heading { margin-bottom:42px; }
.shuffle-section { background:linear-gradient(180deg,#fff 0%,#f4f7fb 100%); }
.shuffle-proof-stage { display:grid; grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr); gap:42px; align-items:center; padding:42px; border:1px solid rgba(71,156,240,.28); border-radius:26px; color:#eaf6ff; background:radial-gradient(circle at 82% -8%,rgba(54,166,255,.24),transparent 38%),linear-gradient(135deg,#061426,#0b2542 58%,#08213c); box-shadow:0 28px 70px rgba(6,25,47,.17); }
.shuffle-real-card { width:min(100%,330px); margin:0 auto; padding:12px; }
.shuffle-video-shell { width:100%; max-height:none; aspect-ratio:9/16; }
.shuffle-real-card > p { margin:10px 3px 2px; color:#86a6c0; font-size:10px; text-align:center; }
.shuffle-interactive-wrap { min-width:0; }
.shuffle-interactive-title { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 70px 14px 0; }
.shuffle-interactive-title span { color:#58c7ff; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.shuffle-interactive-title strong { max-width:390px; color:#dceeff; font-size:12px; text-align:right; }
.compact-shuffle-machine { width:100%; padding-top:0; }
.compact-shuffle-machine .app-slot-face { padding:22px; }
.compact-shuffle-machine .app-slot-window { min-height:108px; padding:14px 10px; }
.compact-shuffle-machine .app-slot-window span { font-size:14px; }
.compact-shuffle-machine .app-slot-reel-card > small { font-size:10px; }
.compact-shuffle-machine .app-slot-shuffle-button { min-height:48px; font-size:13px; }

/* Compact audience section removes a redundant wall of cards */
.audience-compact { background:#fff; }
.audience-compact .section-heading { margin-bottom:32px; }
.audience-pill-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.audience-pill-grid span { padding:13px 18px; border:1px solid #d9e5f0; border-radius:999px; color:#34495d; background:#f8fbfe; box-shadow:0 6px 18px rgba(15,48,82,.04); font-size:13px; font-weight:780; }

/* Stronger mobile/tablet layouts */
@media (max-width:1120px) {
  .hero-grid { grid-template-columns:minmax(0,1fr) minmax(350px,.82fr); gap:45px; }
  .proof-variation-grid { gap:16px; }
  .shuffle-proof-stage { grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr); gap:30px; padding:34px; }
}
@media (max-width:920px) {
  .hero { padding-top:60px; }
  .hero-grid { grid-template-columns:1fr; gap:48px; text-align:center; }
  .hero-copy h1,.hero-lede { margin-left:auto; margin-right:auto; }
  .hero-copy .eyebrow,.hero-actions,.trial-note,.hero-facts { justify-content:center; }
  .hero-media-stage { width:min(100%,420px); }
  .workflow-proof-grid { grid-template-columns:1fr; gap:34px; }
  .workflow-video-card { width:min(100%,390px); }
  .proof-variation-grid { width:min(100%,760px); grid-template-columns:repeat(3,minmax(220px,1fr)); overflow-x:auto; padding:0 4px 16px; scroll-snap-type:x proximity; }
  .proof-variation-card { scroll-snap-align:center; }
  .shuffle-proof-stage { grid-template-columns:1fr; gap:30px; }
  .shuffle-real-card { width:min(100%,340px); }
  .shuffle-interactive-wrap { width:min(100%,680px); margin:0 auto; }
}
@media (max-width:700px) {
  .section-pad { padding:76px 0; }
  .content-shell { width:min(calc(100% - 28px),var(--max-width)); }
  .hero-grid { text-align:left; }
  .hero-copy .eyebrow,.hero-actions,.trial-note,.hero-facts { justify-content:flex-start; }
  .hero-copy h1 { font-size:clamp(44px,13vw,60px); }
  .hero-fast-line { font-size:1.16em; }
  .hero-lede { font-size:16px; line-height:1.6; }
  .hero-media-stage { width:100%; padding:12px 12px 16px; }
  .hero-video-shell { width:min(100%,340px); }
  .hero-media-caption { font-size:11px; }
  .section-heading h2,.faq-heading h2,.final-copy h2 { font-size:clamp(34px,10vw,46px); }
  .section-heading > p:last-child { font-size:15px; }
  .proof-variation-grid { display:flex; width:calc(100% + 14px); max-width:none; gap:14px; margin-right:-14px; overflow-x:auto; padding:0 20px 18px 0; scroll-snap-type:x mandatory; }
  .proof-variation-card { flex:0 0 min(82vw,320px); scroll-snap-align:start; }
  .workflow-video-card { width:100%; }
  .workflow-video-shell { width:min(100%,330px); }
  .workflow-real-step { grid-template-columns:40px 1fr; padding:17px; }
  .workflow-real-step h3 { font-size:18px; }
  .workflow-real-step p:not(.step-kicker) { font-size:13px; }
  .shuffle-proof-stage { padding:24px 14px; border-radius:20px; }
  .shuffle-real-card { width:min(100%,320px); }
  .shuffle-interactive-title { display:block; margin:0 58px 12px 0; }
  .shuffle-interactive-title strong { display:block; margin-top:5px; text-align:left; font-size:11px; }
  .compact-shuffle-machine { padding-right:58px; }
  .compact-shuffle-machine .app-slot-face { padding:12px; }
  .compact-shuffle-machine .app-slot-reels { gap:6px; }
  .compact-shuffle-machine .app-slot-window { min-height:76px; padding:8px 5px; }
  .compact-shuffle-machine .app-slot-window span { font-size:10px; }
  .compact-shuffle-machine .app-slot-reel-card > small { font-size:8px; }
  .app-slot-lever { transform:scale(.84); transform-origin:top right; }
  .machine-note { right:58px; }
  .audience-pill-grid { gap:8px; }
  .audience-pill-grid span { padding:10px 13px; font-size:11px; }
  .features-grid { grid-template-columns:1fr; }
  .feature-card { min-height:auto; padding:22px; }
  .feature-meta { position:static; display:block; margin-top:16px; }
}


/* Landing comparison section v2 - clearer reuse story */
.reuse-comparison {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:24px;
  width:min(100%,1120px);
  margin:46px auto 0;
}
.reuse-side {
  min-width:0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 48px rgba(14,51,91,.075);
}
.old-way-card { background:linear-gradient(180deg,#fbfcfd,#f6f8fa); }
.hookline-way-card {
  border-color:rgba(8,127,245,.32);
  background:linear-gradient(180deg,#fbfdff,#eef7ff);
  box-shadow:0 22px 56px rgba(8,127,245,.105);
}
.reuse-side-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
}
.reuse-side-header strong { color:#52677a; font-size:12px; font-weight:800; text-align:right; }

.old-way-visual {
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px;
  border:1px solid #e1e7ed;
  border-radius:17px;
  background:#edf1f5;
}
.old-ad-build { display:grid; grid-template-columns:minmax(100px,.7fr) 28px minmax(150px,1.3fr); align-items:center; gap:10px; }
.old-build-piece {
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:5px;
  padding:16px;
  border:1px solid #d1d9e2;
  border-radius:13px;
  background:#fff;
  box-shadow:0 10px 24px rgba(25,50,78,.07);
}
.old-build-piece span { color:#8b9aaa; font-size:8px; font-weight:900; letter-spacing:.1em; }
.old-build-piece strong { color:#32485d; font-size:15px; }
.opener-piece { position:relative; overflow:hidden; background:linear-gradient(145deg,#f7f9fb,#e3e9ef); }
.opener-piece::before { content:""; position:absolute; inset:14px 14px auto; height:38px; border-radius:9px; background:linear-gradient(135deg,#c9d2dc,#e8edf2); }
.demo-piece { position:relative; overflow:hidden; }
.demo-piece::before { content:""; position:absolute; left:14px; right:14px; top:14px; height:47px; border-radius:8px; background:linear-gradient(135deg,#dfe9f2,#cbdbea); }
.flow-plus { color:#96a5b4; font-size:22px; font-weight:500; text-align:center; }
.new-angle-prompt { position:relative; display:flex; align-items:center; gap:12px; margin:24px 0 17px; color:#8b99a8; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.new-angle-prompt::before,.new-angle-prompt::after { content:""; height:1px; flex:1; background:#d2dbe4; }
.rebuild-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.rebuild-row div { min-height:70px; display:flex; flex-direction:column; gap:8px; padding:11px; border:1px dashed #ccd5de; border-radius:11px; background:rgba(255,255,255,.65); }
.rebuild-row i { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#7e8d9d; background:#e4e9ee; font-size:8px; font-style:normal; font-weight:900; }
.rebuild-row span { color:#66798a; font-size:10px; font-weight:750; line-height:1.35; }

.hookline-reuse-visual {
  min-height:330px;
  display:grid;
  grid-template-columns:minmax(220px,.92fr) 58px minmax(180px,.76fr);
  align-items:center;
  gap:15px;
  padding:24px;
  overflow:hidden;
  border:1px solid rgba(33,139,238,.18);
  border-radius:17px;
  background:radial-gradient(circle at 74% 14%,rgba(34,183,244,.16),transparent 32%),linear-gradient(145deg,#06172a,#0a2744 62%,#071b31);
}
.real-hook-stack { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:center; }
.real-hook-thumb { position:relative; min-width:0; margin:0; overflow:hidden; aspect-ratio:9/16; border:2px solid rgba(94,183,244,.3); border-radius:12px; background:#0b1f35; box-shadow:0 13px 28px rgba(0,0,0,.28); }
.real-hook-thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.real-hook-thumb::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,rgba(2,10,18,.88)); pointer-events:none; }
.real-hook-thumb figcaption { position:absolute; z-index:2; left:7px; right:7px; bottom:8px; display:flex; flex-direction:column; gap:2px; color:#fff; font-size:8px; font-weight:850; line-height:1.15; }
.real-hook-thumb figcaption span { color:#5fd0ff; font-size:6px; text-transform:uppercase; letter-spacing:.09em; }
.thumb-one { transform:translateY(7px) rotate(-2deg); }
.thumb-two { transform:translateY(-5px); }
.thumb-three { transform:translateY(7px) rotate(2deg); }
.reuse-flow-arrow { position:relative; height:190px; display:flex; align-items:center; justify-content:center; }
.reuse-flow-arrow > span { position:absolute; left:0; width:68%; height:1px; background:linear-gradient(90deg,rgba(74,196,255,.22),rgba(74,196,255,.7)); transform-origin:right center; }
.reuse-flow-arrow > span:nth-child(1) { top:30%; transform:rotate(18deg); }
.reuse-flow-arrow > span:nth-child(2) { top:50%; }
.reuse-flow-arrow > span:nth-child(3) { top:70%; transform:rotate(-18deg); }
.reuse-flow-arrow svg { position:relative; z-index:2; width:28px; height:28px; margin-left:auto; color:#53caff; filter:drop-shadow(0 0 10px rgba(59,196,255,.3)); }
.reuse-flow-arrow svg path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.same-demo-card { padding:10px; border:1px solid rgba(122,193,242,.34); border-radius:15px; background:#eef6fc; box-shadow:0 16px 34px rgba(0,0,0,.22); }
.same-demo-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.same-demo-top span { color:#567089; font-size:7px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.same-demo-top b { padding:3px 5px; border-radius:5px; color:#0974df; background:#d9eeff; font-size:6px; letter-spacing:.08em; }
.same-demo-screen { overflow:hidden; aspect-ratio:4/3; border:1px solid #c7d6e3; border-radius:9px; background:#fff; }
.demo-browser-bar { height:20px; display:flex; align-items:center; gap:4px; padding:0 7px; border-bottom:1px solid #dbe4eb; background:#f7fafc; }
.demo-browser-bar i { width:4px; height:4px; border-radius:50%; background:#c5d0da; }
.demo-browser-bar span { width:42%; height:5px; margin-left:5px; border-radius:3px; background:#e1e8ee; }
.demo-ui-body { padding:10px; }
.demo-ui-body > strong { width:46%; height:7px; display:block; border-radius:4px; background:#294158; }
.demo-ui-body > span { height:5px; display:block; margin-top:7px; border-radius:3px; background:#dbe4ec; }
.demo-ui-body > span:nth-of-type(2) { width:72%; }
.demo-ui-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:5px; margin-top:10px; }
.demo-ui-grid i { height:36px; border-radius:5px; background:linear-gradient(150deg,#dff1ff,#b8dcf7); }
.demo-ui-grid i:last-child { background:#eff3f6; }
.same-demo-label { display:block; margin:9px 2px 2px; color:#17334c; font-size:11px; }
.same-demo-card small { display:block; margin:0 2px 2px; color:#668096; font-size:8px; }
.reuse-bottom-note { margin:16px 2px 0; font-size:12px; line-height:1.5; }
.reuse-bottom-note b { font-weight:900; }
.muted-note { color:#788998; }
.good-note { color:#49687f; }
.good-note b { color:#087ff5; }

@media (max-width:920px) {
  .reuse-comparison { grid-template-columns:1fr; width:min(100%,720px); }
  .old-way-visual,.hookline-reuse-visual { min-height:300px; }
}
@media (max-width:620px) {
  .reuse-side { padding:14px; border-radius:18px; }
  .reuse-side-header { align-items:flex-start; margin-bottom:14px; }
  .reuse-side-header strong { max-width:54%; font-size:10px; }
  .old-way-visual { min-height:0; padding:18px 14px; }
  .old-ad-build { grid-template-columns:1fr 22px 1.35fr; gap:6px; }
  .old-build-piece { min-height:92px; padding:11px; }
  .old-build-piece strong { font-size:12px; }
  .rebuild-row { grid-template-columns:1fr; }
  .rebuild-row div { min-height:0; flex-direction:row; align-items:center; }
  .hookline-reuse-visual { min-height:0; grid-template-columns:1fr; gap:14px; padding:18px 14px; }
  .real-hook-stack { width:min(100%,310px); margin:0 auto; }
  .reuse-flow-arrow { width:100%; height:35px; transform:rotate(90deg); }
  .reuse-flow-arrow > span { display:none; }
  .reuse-flow-arrow svg { margin:auto; }
  .same-demo-card { width:min(100%,280px); margin:0 auto; }
}

/* =========================================================
   Landing page v3 - Hookline Cut System
   Ownable visual language: timecode, splice marks, contact sheets.
   ========================================================= */

:root {
  --cut-ink:#061426;
  --cut-navy:#07182d;
  --cut-blue:#087ff5;
  --cut-cyan:#44d2ff;
  --cut-paper:#f4f8fc;
  --cut-grid:rgba(57,116,166,.10);
}

body {
  background-color:var(--cut-paper);
  background-image:linear-gradient(90deg,rgba(8,127,245,.025) 1px,transparent 1px);
  background-size:48px 48px;
}

/* Header feels like a product tool, not a generic marketing nav. */
.site-header {
  border-bottom:1px solid rgba(91,154,211,.26);
  background:rgba(247,251,255,.91);
}
.site-header::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent 0 8%,var(--cut-blue) 8% 13%,transparent 13% 100%);
  opacity:.65;
}
.desktop-nav a { position:relative; font-size:12px; letter-spacing:.01em; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--cut-blue); transition:right .2s ease; }
.desktop-nav a:hover::after { right:0; }
.button { border-radius:4px; }
.button-large { border-radius:5px; }
.button-primary { background:linear-gradient(90deg,#087ff5,#23bdf5); box-shadow:5px 5px 0 rgba(4,36,66,.14); }
.button-primary:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(4,36,66,.14); }
.button-secondary { border-radius:4px; box-shadow:none; }

/* Editorial microtype / numbered sections */
.eyebrow,
.proof-card-header,
.proof-variation-label,
.timeline-label,
.feature-meta,
.status-pill,
.trial-badge,
.pro-badge,
.hero-media-heading,
.hero-signal,
.hero-timecode-ruler,
.hero-cutline {
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",ui-monospace,monospace;
}
.eyebrow { color:#087ff5; letter-spacing:.16em; }
.eyebrow > span { width:7px; height:7px; border-radius:0; transform:rotate(45deg); background:#087ff5; }
.section-heading h2,.faq-heading h2,.final-copy h2 { letter-spacing:-.055em; }

/* Hero: dark creative workstation with 3-second timer language. */
.hero {
  min-height:760px;
  padding-top:72px;
  color:#fff;
  background:
    linear-gradient(rgba(68,210,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(68,210,255,.055) 1px,transparent 1px),
    radial-gradient(circle at 78% 28%,rgba(8,127,245,.30),transparent 31%),
    linear-gradient(135deg,#04111f 0%,#07182d 52%,#0a2440 100%);
  background-size:34px 34px,34px 34px,auto,auto;
}
.hero::before {
  content:"03";
  position:absolute;
  right:-.035em;
  bottom:-.22em;
  color:rgba(94,210,255,.055);
  font:900 clamp(300px,45vw,660px)/.78 Inter,system-ui,sans-serif;
  letter-spacing:-.09em;
  pointer-events:none;
}
.hero::after { height:6px; background:repeating-linear-gradient(90deg,#087ff5 0 32px,#44d2ff 32px 36px,transparent 36px 72px); opacity:.8; }
.hero-glow { display:none; }
.hero-grid { grid-template-columns:minmax(0,1.06fr) minmax(370px,.78fr); gap:86px; }
.hero-copy { position:relative; }
.hero-copy::before {
  content:"CUT / 001";
  position:absolute;
  left:-54px;
  top:8px;
  color:#58cdfd;
  font:800 9px/1 ui-monospace,monospace;
  letter-spacing:.14em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.hero .eyebrow { color:#55cfff; }
.hero .eyebrow > span { background:#55cfff; }
.hero-copy h1 { max-width:710px; font-size:clamp(55px,5.7vw,82px); }
.hero .gradient-text { background:linear-gradient(90deg,#fff 0%,#85e7ff 50%,#32c7ff 100%); -webkit-background-clip:text; background-clip:text; }
.hero-lede { max-width:650px; color:#b8cadd; }
.hero .button-secondary { color:#dbeafa; border-color:rgba(133,192,238,.3); background:rgba(4,17,31,.52); }
.hero .trial-note,.hero-facts li { color:#9cb4ca; }
.hero-facts { border-top:1px solid rgba(116,177,226,.19); gap:14px; }
.hero-facts li { padding-right:16px; border-right:1px solid rgba(116,177,226,.18); }
.hero-facts li:last-child { border-right:0; }
.hero-facts strong { color:#fff; }

.hero-cutline { max-width:650px; display:grid; grid-template-columns:auto minmax(70px,.32fr) auto minmax(120px,1fr); gap:0; align-items:center; margin-top:25px; color:#8fa8be; font-size:8px; letter-spacing:.06em; }
.cutline-time { display:flex; flex-direction:column; gap:2px; padding-right:10px; }
.cutline-time span { color:#55cfff; font-weight:900; }
.cutline-time strong { color:#d6e7f6; font-size:7px; }
.cutline-segment { position:relative; height:26px; display:flex; align-items:flex-end; padding:0 7px 3px; border-top:1px solid rgba(83,200,255,.5); border-bottom:1px solid rgba(83,200,255,.18); }
.cutline-segment::before,.cutline-segment::after { content:""; position:absolute; top:-3px; width:1px; height:31px; background:rgba(83,200,255,.45); }
.cutline-segment::before { left:0; }.cutline-segment::after { right:0; }
.cutline-segment i { position:absolute; top:5px; left:6px; right:6px; height:7px; background:repeating-linear-gradient(90deg,rgba(68,210,255,.6) 0 7px,transparent 7px 11px); }
.cutline-segment b { color:#a9c4da; font-size:7px; font-weight:700; }
.hook-segment { background:rgba(8,127,245,.10); }
.demo-segment { background:rgba(255,255,255,.035); }
.cutline-splice { padding-left:12px; }

.hero-product { justify-content:flex-end; }
.hero-media-stage {
  position:relative;
  width:min(100%,410px);
  padding:13px 13px 12px;
  border:1px solid rgba(93,202,255,.52);
  border-radius:0;
  background:#04101d;
  box-shadow:22px 22px 0 rgba(23,125,195,.12),0 30px 80px rgba(0,0,0,.36);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.hero-media-stage::before,.hero-media-stage::after { content:""; position:absolute; width:38px; height:2px; background:#54cfff; }
.hero-media-stage::before { left:-11px; top:48px; }.hero-media-stage::after { right:-11px; bottom:52px; }
.hero-media-heading { padding:4px 3px 9px; }
.real-proof-pill { border-radius:2px; }
.hero-timecode-ruler { display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:7px; align-items:center; padding:7px 2px 10px; color:#708da6; font-size:7px; text-transform:uppercase; letter-spacing:.06em; }
.hero-timecode-ruler span { white-space:nowrap; }
.hero-timecode-ruler b { color:#bfeaff; }
.hero-timecode-ruler i { height:1px; background:repeating-linear-gradient(90deg,rgba(91,201,255,.5) 0 4px,transparent 4px 7px); }
.hero-timecode-ruler .ruler-cut b { color:#44d2ff; }
.hero-video-shell { width:min(100%,325px); border-radius:3px; border:1px solid rgba(107,205,255,.42); }
.hero-media-caption { justify-content:space-between; padding:11px 3px 4px; color:#8daac2; font-family:ui-monospace,monospace; font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
.hero-caption-arrow { color:#55d7ff; }
.hero-signal { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; margin-top:7px; color:#5e819e; font-size:7px; letter-spacing:.1em; }
.hero-signal i { height:1px; background:repeating-linear-gradient(90deg,#1a6e9e 0 3px,transparent 3px 6px); }
.hero-signal b { color:#55cfff; }

/* Capability strip becomes a moving tape / edit bay rail. */
.truth-strip { overflow:hidden; border:0; background:#087ff5; }
.truth-list { width:max-content; min-width:100%; min-height:54px; display:flex; align-items:center; justify-content:center; background:transparent; }
.truth-list span { min-width:max-content; min-height:54px; padding:0 24px; border-right:1px solid rgba(255,255,255,.22); color:#fff; font:800 9px/1 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.truth-list span::before { content:"+"; margin-right:8px; color:#9fe8ff; }
.truth-list svg { display:none; }

/* Section rhythm: alternating editorial panels instead of stacks of white cards. */
.section-pad { padding:118px 0; }
.problem { position:relative; background:#f9fcff; }
.problem::before { content:"FIRST 3 SECONDS"; position:absolute; left:20px; top:50%; color:rgba(8,127,245,.055); font:900 78px/1 Inter,sans-serif; letter-spacing:-.06em; transform:rotate(-90deg) translateX(-50%); transform-origin:left top; pointer-events:none; }
.reuse-comparison { gap:14px; }
.reuse-side { border-radius:0; box-shadow:none; }
.old-way-card { border-style:dashed; }
.hookline-way-card { position:relative; border-width:2px; box-shadow:12px 12px 0 rgba(8,127,245,.08); }
.hookline-way-card::after { content:"03"; position:absolute; right:14px; top:10px; color:rgba(8,127,245,.10); font:900 76px/.8 Inter,sans-serif; letter-spacing:-.08em; pointer-events:none; }
.old-way-visual,.hookline-reuse-visual { border-radius:2px; }

.workflow { position:relative; overflow:hidden; background:#eaf2f9; }
.workflow::before { content:"FLOW"; position:absolute; right:-.04em; top:50px; color:rgba(4,48,85,.035); font:950 clamp(170px,25vw,360px)/.8 Inter,sans-serif; letter-spacing:-.08em; pointer-events:none; }
.workflow-proof-grid { position:relative; }
.workflow-video-card { border-radius:0; border:1px solid #a8c5dc; box-shadow:10px 10px 0 rgba(15,79,129,.08); background:#f7fbff; }
.workflow-video-shell { border-radius:2px; }
.workflow-real-steps { border-top:1px solid #9ebbd2; }
.workflow-real-step { position:relative; border-radius:0; border:0; border-bottom:1px solid #9ebbd2; background:transparent; box-shadow:none; }
.workflow-step-num { color:#087ff5; font:900 30px/1 ui-monospace,monospace; }
.workflow-real-step::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#087ff5; transform:scaleY(0); transform-origin:top; transition:transform .22s ease; }
.workflow-real-step:hover::before { transform:scaleY(1); }
.ad-timeline { border-radius:0; border:1px solid #9ebbd2; background:#f7fbff; box-shadow:none; }
.track-hook,.track-demo { border-radius:0; }

/* Signature Shuffle section: the page's visual centerpiece. */
.shuffle-section { position:relative; overflow:hidden; background:#061426; }
.shuffle-section::before { content:"PULL"; position:absolute; left:-.03em; bottom:-.15em; color:rgba(71,200,255,.055); font:950 clamp(190px,34vw,500px)/.8 Inter,sans-serif; letter-spacing:-.08em; pointer-events:none; }
.shuffle-section .section-heading h2 { color:#fff; }
.shuffle-section .section-heading > p:last-child { color:#91aac0; }
.shuffle-section .eyebrow { color:#55cfff; }.shuffle-section .eyebrow > span { background:#55cfff; }
.shuffle-proof-stage { position:relative; border-radius:0; border:1px solid rgba(76,202,255,.42); background:rgba(4,17,31,.58); box-shadow:18px 18px 0 rgba(8,127,245,.10); }
.shuffle-real-card { border-radius:0; }
.shuffle-video-shell { border-radius:2px; }
.shuffle-interactive-title strong { color:#dceeff; }
.app-slot-face { border-radius:3px!important; }
.app-slot-window { border-radius:2px!important; }
.app-slot-shuffle-button { border-radius:2px!important; }

/* The examples are a contact sheet, not another card grid. */
.real-variations { position:relative; overflow:hidden; color:#fff; background:#07182d; }
.real-variations::before { content:"CONTACT / 003"; position:absolute; top:34px; right:4vw; color:rgba(77,203,255,.18); font:800 10px/1 ui-monospace,monospace; letter-spacing:.18em; }
.real-variations .section-heading h2 { color:#fff; }
.real-variations .section-heading > p:last-child { color:#91a9bf; }
.real-variations .eyebrow { color:#55cfff; }.real-variations .eyebrow > span { background:#55cfff; }
.proof-variation-grid { gap:10px; width:min(100%,1100px); }
.proof-variation-card { position:relative; padding:11px; border:1px solid rgba(89,183,236,.28); border-radius:0; background:#0a2036; box-shadow:none; }
.proof-variation-card::before { position:absolute; z-index:3; left:10px; top:44px; color:rgba(94,219,255,.82); font:900 52px/.8 ui-monospace,monospace; letter-spacing:-.08em; pointer-events:none; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.proof-variation-card:nth-child(1)::before { content:"01"; }
.proof-variation-card:nth-child(2)::before { content:"02"; }
.proof-variation-card:nth-child(3)::before { content:"03"; }
.proof-variation-label { border-bottom:1px solid rgba(89,183,236,.2); }
.proof-variation-label strong { color:#6f91ad; }
.proof-variation-video { border-radius:2px; }
.proof-variation-card > p strong { color:#fff; }
.proof-variation-card > p span { color:#7794ad; }
.proof-variation-footer { border-radius:2px; border-color:rgba(98,194,242,.28); color:#83a0b7; background:#0a2036; }
.proof-variation-footer strong { color:#fff; }

/* Toolkit becomes a compact control-spec board. */
.features { background:#f7fbff; }
.features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border-top:1px solid #bdd0df; border-left:1px solid #bdd0df; }
.feature-card { min-height:190px; display:grid; grid-template-columns:58px 1fr auto; grid-template-rows:auto 1fr auto; column-gap:16px; padding:27px; border:0; border-right:1px solid #bdd0df; border-bottom:1px solid #bdd0df; border-radius:0; background:transparent; box-shadow:none; }
.feature-card:hover { transform:none; background:#edf6fd; }
.feature-card .feature-icon { grid-row:1/4; align-self:start; border-radius:0; background:#07182d; color:#62d1ff; }
.feature-card h3 { grid-column:2/4; margin:1px 0 7px; }
.feature-card p { grid-column:2/4; margin:0; }
.feature-meta { grid-column:2/4; width:max-content; margin-top:17px; padding:4px 7px; border:1px solid #b7cbdb; border-radius:2px; color:#497087; background:transparent; font-size:8px; text-transform:uppercase; letter-spacing:.07em; }

/* Audience reads like targeting labels instead of generic pills. */
.audience-compact { background:#fff; }
.audience-pill-grid { border-top:1px solid #b9cedf; border-bottom:1px solid #b9cedf; gap:0; }
.audience-pill-grid span { flex:1 1 220px; position:relative; padding:20px 18px 20px 34px; border:0; border-right:1px solid #b9cedf; border-radius:0; background:transparent; box-shadow:none; font-size:12px; text-align:left; }
.audience-pill-grid span::before { content:"+"; position:absolute; left:15px; color:#087ff5; font-family:ui-monospace,monospace; }
.audience-pill-grid span:last-child { border-right:0; }

/* Pricing as a launch pass / production ticket. */
.pricing { position:relative; background:#eaf2f9; }
.pricing-card { position:relative; border:2px solid #07182d; border-radius:0; background:#fff; box-shadow:15px 15px 0 rgba(7,24,45,.10); clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); }
.pricing-card::before { content:"FOUNDING PASS / 050"; position:absolute; top:13px; right:20px; color:#7790a6; font:800 8px/1 ui-monospace,monospace; letter-spacing:.13em; }
.trial-card-copy { background:#f9fcff; }
.trial-badge,.pro-badge { border-radius:2px; letter-spacing:.08em; text-transform:uppercase; }
.pro-price strong { letter-spacing:-.07em; }
.button-plan { border-radius:3px; }

/* FAQ stays quiet; CTA returns to the 03 motif. */
.faq { background:#fff; }
.faq-item { border-radius:0; box-shadow:none; }
.final-cta { position:relative; overflow:hidden; background:#04111f; }
.final-cta::before { content:"03"; position:absolute; right:-.06em; top:-.04em; color:rgba(72,202,255,.065); font:950 clamp(260px,42vw,620px)/.8 Inter,sans-serif; letter-spacing:-.09em; pointer-events:none; }
.final-cta-grid { position:relative; }
.final-copy h2 { max-width:800px; }
.final-visual { filter:drop-shadow(18px 18px 0 rgba(8,127,245,.08)); }

@media (max-width:920px) {
  .hero { min-height:0; }
  .hero-grid { grid-template-columns:1fr; gap:54px; }
  .hero-copy::before { display:none; }
  .hero-product { justify-content:center; }
  .hero-media-stage { width:min(100%,420px); }
  .features-grid { grid-template-columns:1fr; }
  .audience-pill-grid span:nth-child(2) { border-right:0; }
}

@media (max-width:620px) {
  body { background-size:32px 32px; }
  .site-header::after { display:none; }
  .hero { padding-top:56px; background-size:28px 28px,28px 28px,auto,auto; }
  .hero::before { font-size:300px; bottom:-.06em; right:-.22em; }
  .hero-copy h1 { font-size:clamp(45px,13vw,61px); line-height:.94; }
  .hero-cutline { grid-template-columns:auto 1fr; row-gap:10px; }
  .hero-cutline .cutline-time:nth-of-type(2) { grid-row:2; }
  .hero-media-stage { box-shadow:10px 10px 0 rgba(23,125,195,.12),0 24px 60px rgba(0,0,0,.32); }
  .truth-list { justify-content:flex-start; overflow:hidden; }
  .truth-list span { padding:0 16px; }
  .section-pad { padding:88px 0; }
  .problem::before,.workflow::before,.shuffle-section::before { display:none; }
  .feature-card { grid-template-columns:48px 1fr; padding:20px 16px; }
  .feature-card h3,.feature-card p,.feature-meta { grid-column:2; }
  .audience-pill-grid { display:block; }
  .audience-pill-grid span { display:block; border-right:0; border-bottom:1px solid #b9cedf; }
  .audience-pill-grid span:last-child { border-bottom:0; }
  .pricing-card { box-shadow:8px 8px 0 rgba(7,24,45,.10); }
}

/* =========================================================
   V5 READABILITY + CREATIVE SIMPLIFICATION PASS
   Less technical, larger type, clearer hierarchy, scrolling banner.
   ========================================================= */

/* Softer, more creative overall feel */
:root {
  --radius-card: 20px;
  --radius-panel: 26px;
}
body { background:#f7faff; }
.section-pad { padding:96px 0; }

/* Remove tiny section labels / technical micro-copy. */
.section-heading .eyebrow,
.faq-heading .eyebrow,
.final-copy .eyebrow { display:none; }
.section-heading { margin-bottom:42px; }
.section-heading h2,
.faq-heading h2,
.final-copy h2 { font-size:clamp(38px,4.4vw,58px); line-height:1.08; letter-spacing:-.04em; }
.section-heading > p:last-child,
.split-heading > p,
.faq-heading > p { max-width:720px; margin-top:18px; color:#516174; font-size:18px; line-height:1.6; }

/* HERO - light, bold, non-technical. Fix clipped descenders/line boxes. */
.hero {
  min-height:720px;
  padding-top:76px;
  color:var(--text);
  background:
    radial-gradient(circle at 87% 18%,rgba(68,210,255,.20),transparent 30%),
    radial-gradient(circle at 12% 10%,rgba(8,127,245,.08),transparent 28%),
    linear-gradient(180deg,#fbfdff 0%,#f2f8ff 100%);
  background-size:auto;
}
.hero::before { display:none; }
.hero::after { height:1px; background:linear-gradient(90deg,transparent,#8edcff,transparent); opacity:1; }
.hero-copy::before { display:none; }
.hero-grid { grid-template-columns:minmax(0,1.04fr) minmax(350px,.76fr); gap:76px; }
.hero-copy h1 {
  max-width:720px;
  padding:.05em 0 .12em;
  overflow:visible;
  font-size:clamp(54px,5.7vw,82px);
  line-height:1.045;
  letter-spacing:-.045em;
}
.hero .gradient-text {
  color:transparent;
  background:linear-gradient(100deg,#087ff5 0%,#1599f1 52%,#20b9e9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding-bottom:.06em;
}
.hero-lede { max-width:650px; color:#44556a; font-size:20px; line-height:1.58; }
.hero .trial-note { color:#526377; font-size:14px; }
.hero-facts { gap:10px; padding-top:20px; border-top:0; }
.hero-facts li {
  padding:10px 13px;
  border:1px solid #d9e8f5!important;
  border-radius:999px;
  color:#43566b;
  background:rgba(255,255,255,.78);
  font-size:13px;
  box-shadow:0 6px 18px rgba(16,61,100,.04);
}
.hero-facts strong { color:#17283a; }
.hero-cutline { display:none!important; }
.hero-product { justify-content:center; }
.hero-media-stage {
  width:min(100%,400px);
  padding:14px;
  border:1px solid #d6e7f5;
  border-radius:28px;
  color:var(--text);
  background:rgba(255,255,255,.92);
  box-shadow:0 30px 70px rgba(24,88,139,.15);
  clip-path:none;
}
.hero-media-stage::before,.hero-media-stage::after { display:none; }
.hero-proof-label {
  display:flex;
  align-items:center;
  gap:9px;
  margin:2px 2px 12px;
  color:#24506f;
  font-size:14px;
  font-weight:800;
}
.hero-proof-label span { width:9px; height:9px; border-radius:50%; background:#1bbf85; box-shadow:0 0 0 5px rgba(27,191,133,.10); }
.hero-timecode-ruler,.hero-signal { display:none!important; }
.hero-video-shell { width:min(100%,330px); border:0; border-radius:20px; box-shadow:0 15px 35px rgba(12,48,79,.13); }
.hero-media-caption { padding:14px 4px 2px; color:#475d70; font-family:inherit; font-size:13px; text-transform:none; letter-spacing:0; }
.hero-caption-arrow { color:#168fee; font-size:18px; }

/* Real scrolling banner */
.scrolling-banner { overflow:hidden; border:0; background:linear-gradient(90deg,#087ff5,#18a8ed,#087ff5); }
.marquee-track {
  width:max-content;
  min-width:100%;
  display:flex;
  align-items:center;
  animation:hookline-marquee 30s linear infinite;
  will-change:transform;
}
.marquee-group { display:flex; flex-shrink:0; align-items:center; }
.marquee-group span {
  position:relative;
  min-width:max-content;
  padding:19px 34px 19px 48px;
  color:#fff;
  font-size:15px;
  font-weight:850;
  letter-spacing:.02em;
}
.marquee-group span::before { content:"✦"; position:absolute; left:20px; color:#b8f2ff; }
@keyframes hookline-marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* Clean up the comparison and workflow; remove tech/editor dressing. */
.problem { background:#fff; }
.problem::before,.workflow::before { display:none; }
.reuse-side { border-radius:22px; box-shadow:0 16px 42px rgba(20,61,95,.06); }
.old-way-card { border-style:solid; }
.hookline-way-card { border-width:1px; box-shadow:0 18px 48px rgba(8,127,245,.11); }
.hookline-way-card::after { display:none; }
.old-way-visual,.hookline-reuse-visual { border-radius:16px; }

.workflow { background:#f1f8ff; }
.split-heading { display:block; max-width:840px; margin:0 auto 44px; text-align:center; }
.split-heading > p { margin-left:auto; margin-right:auto; }
.workflow-video-card { border:1px solid #d5e6f3; border-radius:24px; background:#fff; box-shadow:0 18px 50px rgba(16,65,105,.08); }
.workflow-video-shell { border-radius:18px; }
.proof-card-header { font-size:13px; }
.workflow-real-steps { border-top:0; display:grid; gap:12px; }
.workflow-real-step { border:1px solid #d8e7f3; border-radius:18px; background:#fff; }
.workflow-real-step::before { display:none; }
.workflow-step-num { color:#168eef; font:900 23px/1 Inter,system-ui,sans-serif; }
.step-kicker { display:none; }
.workflow-real-step h3 { font-size:20px; line-height:1.25; }
.workflow-real-step p { color:#52657a; font-size:15px; line-height:1.55; }
.ad-timeline { border:0; border-radius:20px; background:#fff; box-shadow:0 14px 38px rgba(18,66,105,.06); }

/* Shuffle stays distinctive without looking like a developer console. */
.shuffle-section {
  color:var(--text);
  background:linear-gradient(145deg,#e8f7ff 0%,#f9fdff 58%,#edf8ff 100%);
}
.shuffle-section::before { display:none; }
.shuffle-section .section-heading h2 { color:var(--text); }
.shuffle-section .section-heading > p:last-child { color:#52657a; }
.shuffle-proof-stage { border:1px solid #cfe4f3; border-radius:28px; background:rgba(255,255,255,.86); box-shadow:0 24px 60px rgba(17,80,128,.10); }
.shuffle-real-card { border-radius:22px; background:#fff; }
.shuffle-video-shell { border-radius:18px; }
.shuffle-interactive-title { font-size:14px; }
.shuffle-interactive-title strong { color:#17324a; }
.machine-note { display:none; }

/* Examples: bright gallery, not dark contact sheet. */
.real-variations { color:var(--text); background:#fff; }
.real-variations::before { display:none; }
.real-variations .section-heading h2 { color:var(--text); }
.real-variations .section-heading > p:last-child { color:#52657a; }
.proof-variation-grid { gap:18px; }
.proof-variation-card { padding:12px; border:1px solid #d8e8f4; border-radius:22px; background:#f7fbff; box-shadow:0 16px 38px rgba(16,66,105,.06); }
.proof-variation-card::before { display:none; }
.proof-variation-label { padding:8px 4px 12px; border-bottom:0; }
.proof-variation-label span { color:#148bed; font-size:12px; font-weight:850; }
.proof-variation-label strong { display:none; }
.proof-variation-video { border-radius:16px; }
.proof-variation-card > p { margin:12px 4px 3px; }
.proof-variation-card > p strong { color:#193047; font-size:15px; }
.proof-variation-card > p span { display:none; }
.proof-variation-footer { max-width:620px; margin-top:24px; border:0; border-radius:999px; color:#415a70; background:#eef7ff; font-size:16px; }
.proof-variation-footer strong { color:#172d42; }

/* Section 05 - replace tiny creator stack / spec board with a readable creator showcase. */
.features { background:#f3f9ff; }
.toolkit-simple { display:grid; gap:18px; }
.creator-showcase {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(480px,1.2fr);
  gap:40px;
  align-items:center;
  padding:38px 42px;
  border:1px solid #d6e8f5;
  border-radius:26px;
  background:#fff;
  box-shadow:0 20px 50px rgba(18,70,111,.07);
}
.creator-showcase-copy h3 { margin:0; font-size:clamp(29px,3vw,42px); line-height:1.08; letter-spacing:-.035em; }
.creator-showcase-copy p { margin:14px 0 0; color:#52667b; font-size:17px; }
.creator-portrait-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.creator-portrait-row figure { margin:0; overflow:hidden; border:1px solid #dbe9f4; border-radius:20px; background:#f6faff; }
.creator-portrait-row img { width:100%; aspect-ratio:1/1.08; object-fit:cover; }
.creator-portrait-row figcaption { padding:11px 8px 13px; color:#263e54; font-size:14px; font-weight:800; text-align:center; }
.toolkit-benefit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.toolkit-benefit {
  min-height:155px;
  display:flex;
  align-items:center;
  gap:22px;
  padding:26px 28px;
  border:1px solid #d8e7f3;
  border-radius:22px;
  background:#fff;
}
.toolkit-big-icon {
  width:60px;
  height:60px;
  flex:0 0 60px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,#087ff5,#25b9eb);
  font-size:21px;
  font-weight:900;
}
.toolkit-benefit h3 { margin:0; font-size:20px; line-height:1.2; }
.toolkit-benefit p { margin:8px 0 0; color:#52667b; font-size:15px; line-height:1.45; }

/* Audience: larger and easier to scan. */
.audience-compact { background:#fff; }
.audience-pill-grid { gap:12px; border:0; }
.audience-pill-grid span {
  flex:1 1 250px;
  padding:19px 22px;
  border:1px solid #d9e8f3!important;
  border-radius:16px;
  color:#274158;
  background:#f7fbff;
  font-size:16px;
  font-weight:800;
  text-align:center;
}
.audience-pill-grid span::before { display:none; }

/* Pricing: friendly card instead of a technical ticket. */
.pricing { background:#eef7ff; }
.pricing-card { border:1px solid #cfdfec; border-radius:28px; background:#fff; box-shadow:0 24px 60px rgba(21,68,104,.10); clip-path:none; }
.pricing-card::before { display:none; }
.trial-badge,.pro-badge { border-radius:999px; letter-spacing:0; text-transform:none; font-size:12px; }
.button-plan { border-radius:12px; }

/* FAQ and CTA */
.faq-item { border-radius:14px; }
.final-cta { background:linear-gradient(135deg,#087ff5 0%,#129be9 60%,#24b7f2 100%); }
.final-cta::before { display:none; }
.final-copy h2,.final-copy p { color:#fff; }

@media (max-width:920px) {
  .hero-grid { grid-template-columns:1fr; gap:50px; }
  .hero-copy { text-align:center; }
  .hero-lede { margin-left:auto; margin-right:auto; }
  .hero-actions,.hero-facts { justify-content:center; }
  .trial-note { justify-content:center; }
  .creator-showcase { grid-template-columns:1fr; gap:26px; }
}
@media (max-width:620px) {
  .section-pad { padding:72px 0; }
  .hero { padding-top:48px; }
  .hero-copy h1 { font-size:clamp(43px,12vw,58px); line-height:1.06; letter-spacing:-.04em; padding-bottom:.14em; }
  .hero-lede { font-size:18px; line-height:1.55; }
  .hero-facts { display:grid; grid-template-columns:1fr; width:100%; max-width:390px; margin-left:auto; margin-right:auto; }
  .hero-facts li { justify-content:center; }
  .marquee-group span { padding:16px 29px 16px 42px; font-size:13px; }
  .marquee-group span::before { left:17px; }
  .section-heading h2,.faq-heading h2,.final-copy h2 { font-size:36px; line-height:1.1; }
  .section-heading > p:last-child,.split-heading > p { font-size:17px; }
  .creator-showcase { padding:24px 18px; }
  .creator-showcase-copy { text-align:center; }
  .creator-portrait-row { gap:7px; }
  .creator-portrait-row figcaption { font-size:11px; padding:8px 3px 10px; }
  .toolkit-benefit-grid { grid-template-columns:1fr; }
  .toolkit-benefit { min-height:0; padding:20px; }
  .toolkit-big-icon { width:52px; height:52px; flex-basis:52px; border-radius:15px; font-size:18px; }
  .audience-pill-grid { display:grid; grid-template-columns:1fr; gap:9px; }
  .audience-pill-grid span { display:block; border-bottom:1px solid #d9e8f3!important; font-size:15px; }
}

/* Final v5 cleanup: remove remaining tool-console typography and sharp controls. */
.site-header::after { display:none; }
.button,.button-large,.button-secondary { border-radius:12px; }
.button-primary { border-radius:12px; box-shadow:0 10px 26px rgba(8,127,245,.22); }
.button-primary:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(8,127,245,.28); }
.marquee-group span,
.proof-card-header,
.proof-variation-label,
.timeline-label,
.status-pill,
.trial-badge,
.pro-badge { font-family:inherit; }
.proof-card-header { display:none; }
.proof-variation-label span { font-size:14px; letter-spacing:0; }
.status-pill { font-size:12px; letter-spacing:0; text-transform:none; }
.reuse-bottom-note { font-size:15px; line-height:1.5; }

/* --------------------------------------------------------------------------
   Landing page clarity pass v6
   - clearer comparison story
   - Hook-first language
   - Hook Shuffle video removed
   - larger minimum supporting text
   - Section 05 aligned to choose -> create -> download/test
   - final graphic aligned to real app workflow
   -------------------------------------------------------------------------- */

/* Keep small supporting copy readable. */
.hero-media-caption,
.reuse-side-header strong,
.reuse-bottom-note,
.workflow-real-step p,
.timeline-label,
.proof-variation-card > p,
.proof-variation-footer,
.shuffle-interactive-title,
.app-slot-status small,
.app-capability-card p,
.audience-compact .section-heading > p:last-child,
.pricing .section-heading > p:last-child,
.trial-card-copy p,
.pro-description,
.faq-answer p,
.final-copy > p:not(.eyebrow),
.footer-brand p,
.footer-links a,
.footer-cta strong { font-size:16px; line-height:1.55; }

.trial-card small,
.founding-note,
.final-copy > small,
.same-demo-card small,
.app-capability-card small,
.footer-bottom { font-size:14px; line-height:1.45; }

.status-pill,
.proof-variation-label span,
.capability-step,
.same-demo-top,
.app-slot-reel-card small { font-size:13px; }

/* 01 comparison - make the left side instantly understandable. */
.reuse-comparison { gap:24px; align-items:stretch; }
.reuse-side { padding:24px; }
.reuse-side-header { gap:16px; margin-bottom:20px; }
.reuse-side-header strong { font-weight:850; color:#243b50; }
.old-way-card { background:#fbfcfe; }
.old-way-simple {
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:28px;
  border:1px solid #dbe5ed;
  border-radius:18px;
  background:#f2f6f9;
}
.old-way-question {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 20px;
  border:1px solid #d4e0e9;
  border-radius:16px;
  background:#fff;
  color:#1c3348;
  text-align:center;
}
.old-way-question strong { font-size:21px; line-height:1.2; }
.old-way-hook-badge {
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:10px;
  color:#53687b;
  background:#e9eff4;
  font-size:13px;
  font-weight:900;
}
.old-way-down-arrow { color:#8295a6; font-size:26px; font-weight:800; line-height:1; text-align:center; }
.old-way-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.old-way-step {
  min-height:135px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 10px;
  border:1px solid #d6e1e9;
  border-radius:15px;
  background:#fff;
  color:#284157;
  text-align:center;
}
.old-way-step-icon {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#52697d;
  background:#e9eff4;
  font-size:14px;
  font-weight:900;
}
.old-way-step strong { font-size:17px; line-height:1.15; }
.old-way-step small { color:#5a6f81; font-size:14px; line-height:1.3; }
.hookline-reuse-visual { min-height:330px; }
.same-demo-card small { color:#5b7185; }

/* Workflow wording can be simple without tiny helper copy. */
.workflow-real-step h3 { font-size:22px; }
.timeline-label strong { font-size:16px; }
.timeline-label span { font-size:15px; }
.track-hook strong,.track-demo strong { font-size:16px; }

/* 03 Hook Shuffle - interactive lever only. */
.shuffle-proof-stage.shuffle-only-stage {
  width:min(100%,920px);
  display:block;
  margin:0 auto;
  padding:42px 46px;
}
.shuffle-only-stage .shuffle-interactive-wrap { width:100%; max-width:820px; margin:0 auto; }
.shuffle-only-stage .compact-shuffle-machine { width:min(100%,760px); margin:0 auto; }
.shuffle-interactive-title { margin-bottom:18px; }
.shuffle-interactive-title span { font-size:17px; font-weight:850; }
.shuffle-interactive-title strong { font-size:16px; }
.app-slot-window span { font-size:16px; }
.app-slot-shuffle-button { font-size:15px; }
.app-slot-status strong { font-size:15px; }

/* 04 examples - Hook terminology. */
.proof-variation-label span { letter-spacing:.04em; }
.proof-variation-card > p strong { font-size:16px; }

/* 05 - actual app flow, instead of a feature/creator grab bag. */
.features { background:#f3f9ff; }
.features .section-heading { max-width:880px; margin-left:auto; margin-right:auto; }
.features .section-heading h2 span { color:#168eef; }
.features .section-heading > p:last-child { max-width:760px; font-size:18px; line-height:1.55; }
.app-capability-flow {
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.app-capability-card {
  min-height:320px;
  display:flex;
  flex-direction:column;
  padding:30px;
  border:1px solid #d4e6f4;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 44px rgba(18,70,111,.07);
}
.capability-step {
  align-self:flex-start;
  padding:8px 11px;
  border-radius:9px;
  color:#087ff5;
  background:#e9f5ff;
  font-weight:900;
  letter-spacing:.04em;
}
.app-capability-card h3 { margin:22px 0 0; color:#14283d; font-size:27px; line-height:1.1; letter-spacing:-.025em; }
.app-capability-card p { margin:12px 0 22px; color:#52687c; }
.capability-arrow { display:grid; place-items:center; color:#168eef; font-size:30px; font-weight:800; }
.mini-creator-row { display:flex; align-items:flex-end; gap:10px; margin-top:auto; }
.mini-creator-row img { width:70px; height:82px; object-fit:cover; border:3px solid #fff; border-radius:15px; box-shadow:0 7px 20px rgba(21,67,101,.12); }
.mini-creator-row img:nth-child(2) { transform:translateY(-7px); }
.mini-syncer-flow {
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  padding:18px;
  border:1px solid #d8e9f5;
  border-radius:17px;
  background:#f6fbff;
  text-align:center;
}
.mini-syncer-flow b { padding:16px 8px; border-radius:12px; background:#fff; color:#1e415e; font-size:15px; }
.mini-syncer-flow span { color:#168eef; font-size:22px; font-weight:900; }
.mini-export-chip {
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(135deg,#087ff5,#20acec);
}
.mini-export-chip strong { font-size:22px; }
.mini-export-chip span { padding:7px 9px; border-radius:8px; background:rgba(255,255,255,.18); font-size:14px; font-weight:900; }

/* Audience and pricing: bump any remaining helper copy. */
.audience-pill-grid span { font-size:17px; }
.pro-plan li { font-size:15px; line-height:1.45; }
.faq-item button span { font-size:17px; }

/* Final CTA graphic mirrors the app: Create -> Syncer -> Finished Ad. */
.final-visual { min-height:390px; }
.footer-app-flow {
  width:100%;
  display:grid;
  grid-template-columns:minmax(150px,1fr) 34px minmax(170px,1.05fr) 34px 132px;
  gap:12px;
  align-items:center;
}
.footer-app-stage {
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:22px;
  color:#fff;
  background:rgba(8,76,139,.33);
  box-shadow:0 15px 35px rgba(0,57,105,.16);
}
.footer-app-stage > span {
  align-self:flex-start;
  margin-bottom:20px;
  padding:6px 8px;
  border-radius:8px;
  color:#0b75ce;
  background:#fff;
  font-size:12px;
  font-weight:900;
}
.footer-app-stage > strong { font-size:28px; line-height:1; }
.footer-app-stage > small { margin-top:12px; color:#eaf8ff; font-size:14px; line-height:1.4; }
.footer-create-hook-stage > div { display:flex; flex-direction:column; gap:7px; }
.footer-create-hook-stage b { padding:10px; border-radius:10px; color:#165079; background:rgba(255,255,255,.95); font-size:14px; text-align:center; }
.footer-create-hook-stage i { color:#fff; font-size:20px; font-style:normal; font-weight:900; text-align:center; }
.footer-app-arrow { color:#fff; font-size:28px; font-weight:900; text-align:center; }
.footer-finished-ad { position:relative; overflow:hidden; aspect-ratio:9/16; border:4px solid rgba(255,255,255,.86); border-radius:20px; background:#071b2d; box-shadow:0 18px 38px rgba(0,49,91,.24); }
.footer-finished-ad img { width:100%; height:100%; object-fit:cover; }
.footer-finished-ad span { position:absolute; left:8px; right:8px; bottom:8px; padding:7px 5px; border-radius:8px; color:#173954; background:rgba(255,255,255,.94); font-size:12px; font-weight:900; text-align:center; }

@media (max-width:980px) {
  .app-capability-flow { grid-template-columns:1fr; gap:14px; max-width:720px; margin:0 auto; }
  .capability-arrow { transform:rotate(90deg); height:30px; }
  .app-capability-card { min-height:0; }
  .footer-app-flow { max-width:620px; margin:0 auto; grid-template-columns:1fr 28px 1fr; }
  .footer-app-flow .footer-app-arrow:nth-of-type(2) { display:none; }
  .footer-finished-ad { grid-column:1 / -1; width:130px; justify-self:center; margin-top:12px; }
}

@media (max-width:700px) {
  .reuse-side { padding:18px; }
  .reuse-side-header { flex-direction:column; align-items:flex-start; }
  .old-way-simple { min-height:0; padding:20px 14px; }
  .old-way-question { flex-direction:column; }
  .old-way-steps { grid-template-columns:1fr; }
  .old-way-step { min-height:0; flex-direction:row; justify-content:flex-start; text-align:left; padding:15px; }
  .old-way-step small { margin-left:auto; text-align:right; max-width:120px; }
  .hookline-reuse-visual { min-height:300px; }
  .shuffle-proof-stage.shuffle-only-stage { padding:26px 14px; }
  .features .section-heading > p:last-child { font-size:17px; }
  .app-capability-card { padding:24px 20px; }
  .app-capability-card h3 { font-size:25px; }
  .footer-app-flow { grid-template-columns:1fr; gap:12px; }
  .footer-app-arrow { transform:rotate(90deg); height:24px; }
  .footer-app-flow .footer-app-arrow:nth-of-type(2) { display:grid; }
  .footer-finished-ad { grid-column:auto; width:126px; margin-top:0; }
  .final-visual { min-height:0; }
}

/* v6 readability follow-up for media labels and CTA responsive behavior. */
.real-hook-thumb figcaption { font-size:11px; }
.real-hook-thumb figcaption span { font-size:9px; }
.same-demo-top span { font-size:10px; }
.same-demo-top b { font-size:9px; }
.same-demo-label { font-size:14px; }
.same-demo-card small { font-size:12px; }
.final-visual { transform:none!important; margin:0!important; filter:none!important; }
@media (max-width:980px) {
  .footer-app-flow .footer-app-arrow:nth-child(4) { display:none; }
}
@media (max-width:700px) {
  .footer-app-flow .footer-app-arrow:nth-child(4) { display:grid; }
}

/* --------------------------------------------------------------------------
   Landing page mobile formatting pass v7
   - one consistent mobile alignment system
   - removes conflicting legacy narrow-screen rules
   - centers section headers and key conversion content
   - stabilizes comparison, workflow, shuffle, examples, pricing and footer
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .content-shell,
  .nav-shell { width:min(calc(100% - 32px), var(--max-width)); }
  .section-pad { padding:66px 0; }

  /* Consistent centered section hierarchy on phones. */
  .hero-copy,
  .section-heading,
  .split-heading,
  .faq-heading,
  .features .section-heading,
  .audience-compact .section-heading,
  .pricing .section-heading,
  .final-copy { text-align:center; }
  .section-heading,
  .split-heading,
  .faq-heading { width:100%; max-width:620px; margin-right:auto; margin-left:auto; }
  .section-heading h2,
  .split-heading h2,
  .faq-heading h2,
  .final-copy h2 { max-width:560px; margin-right:auto; margin-left:auto; font-size:clamp(32px,9.4vw,42px); line-height:1.11; letter-spacing:-.035em; }
  .section-heading > p:last-child,
  .split-heading > p,
  .faq-heading > p,
  .features .section-heading > p:last-child,
  .final-copy > p:not(.eyebrow) { max-width:540px; margin-right:auto; margin-left:auto; font-size:16px; line-height:1.58; text-align:center; }

  /* Hero - keep all conversion copy visually centered on mobile. */
  .hero { padding-top:48px; }
  .hero-grid { grid-template-columns:1fr; gap:38px; text-align:center; }
  .hero-copy { max-width:560px; margin:0 auto; text-align:center; }
  .hero-copy h1 { max-width:540px; margin-right:auto; margin-left:auto; font-size:clamp(40px,11.8vw,54px); line-height:1.06; letter-spacing:-.038em; }
  .hero-lede { max-width:520px; margin-right:auto; margin-left:auto; font-size:17px; line-height:1.55; text-align:center; }
  .hero-actions { width:100%; max-width:380px; flex-direction:column; align-items:stretch; justify-content:center; margin-right:auto; margin-left:auto; }
  .hero-actions .button { width:100%; justify-content:center; }
  .trial-note { justify-content:center!important; max-width:360px; margin-right:auto; margin-left:auto; text-align:center; }
  .hero-facts { width:100%; max-width:370px; display:grid; grid-template-columns:1fr; justify-items:stretch; gap:9px; margin-right:auto; margin-left:auto; text-align:center; }
  .hero-facts li { width:100%; justify-content:center; padding:11px 13px; text-align:center; }
  .hero-product { width:100%; justify-content:center; }
  .hero-media-stage { width:min(100%,390px); margin:0 auto; }
  .hero-media-caption { justify-content:center; flex-wrap:wrap; gap:7px 10px; text-align:center; }

  /* Comparison - headers and story no longer jump left/right. */
  .reuse-comparison { width:100%; gap:18px; margin-top:34px; }
  .reuse-side { width:100%; padding:18px; }
  .reuse-side-header { flex-direction:column; align-items:center!important; justify-content:center; gap:9px; margin-bottom:16px; text-align:center; }
  .reuse-side-header strong { max-width:none!important; width:100%; font-size:15px!important; line-height:1.35; text-align:center; }
  .status-pill { align-self:center; font-size:13px; }
  .old-way-simple { min-height:0; padding:20px 14px; }
  .old-way-question { flex-direction:column; gap:10px; padding:16px; text-align:center; }
  .old-way-question strong { font-size:19px; }
  .old-way-down-arrow { margin:1px 0; }
  .old-way-steps { grid-template-columns:1fr; gap:9px; }
  .old-way-step {
    min-height:0;
    display:grid;
    grid-template-columns:38px 1fr;
    grid-template-rows:auto auto;
    column-gap:12px;
    row-gap:3px;
    justify-items:start;
    align-items:center;
    padding:14px 15px;
    text-align:left;
  }
  .old-way-step-icon { grid-row:1 / 3; margin:0; }
  .old-way-step strong { font-size:16px; }
  .old-way-step small { max-width:none; margin:0; font-size:14px; text-align:left; }
  .reuse-bottom-note { max-width:340px; margin:15px auto 0; font-size:15px; text-align:center; }
  .hookline-reuse-visual { min-height:0; grid-template-columns:1fr; gap:12px; padding:18px 12px; }
  .real-hook-stack { width:min(100%,310px); margin:0 auto; }
  .real-hook-thumb { transform:none!important; }
  .reuse-flow-arrow { width:100%; height:38px; transform:none!important; }
  .reuse-flow-arrow > span { display:none; }
  .reuse-flow-arrow svg { margin:auto; transform:rotate(90deg); }
  .same-demo-card { width:min(100%,285px); margin:0 auto; text-align:center; }
  .same-demo-top { justify-content:center; flex-wrap:wrap; }
  .same-demo-label { text-align:center; }

  /* Workflow - make each step a centered, readable unit. */
  .workflow-proof-grid { grid-template-columns:1fr; gap:28px; }
  .workflow-video-card { width:min(100%,360px); margin:0 auto; }
  .workflow-real-steps { width:100%; max-width:560px; margin:0 auto; gap:11px; }
  .workflow-real-step { grid-template-columns:1fr!important; justify-items:center; gap:10px; padding:20px 18px; text-align:center; }
  .workflow-real-step > div { text-align:center; }
  .workflow-step-num { margin:0 auto; }
  .workflow-real-step h3 { margin:0; font-size:20px; line-height:1.25; }
  .workflow-real-step p:not(.step-kicker) { margin:8px auto 0; max-width:460px; font-size:15px; line-height:1.55; text-align:center; }
  .ad-timeline { grid-template-columns:1fr; gap:12px; padding:18px 15px; text-align:center; }
  .timeline-label { text-align:center; }
  .timeline-track { width:100%; max-width:430px; margin:0 auto; grid-template-columns:minmax(100px,.34fr) 22px minmax(0,.66fr); }
  .track-hook,
  .track-demo { align-items:center; text-align:center; }

  /* Shuffle - center labels and prevent the lever from pushing copy around. */
  .shuffle-heading { margin-bottom:30px; }
  .shuffle-proof-stage.shuffle-only-stage { width:100%; padding:24px 12px; }
  .shuffle-only-stage .shuffle-interactive-wrap { width:100%; }
  .shuffle-interactive-title { display:block!important; margin:0 0 16px!important; text-align:center; }
  .shuffle-interactive-title span,
  .shuffle-interactive-title strong { display:block; width:100%; text-align:center!important; }
  .shuffle-interactive-title span { font-size:16px; }
  .shuffle-interactive-title strong { margin-top:5px!important; font-size:15px!important; }
  .compact-shuffle-machine { width:100%; padding-right:48px!important; }
  .compact-shuffle-machine .app-slot-face { padding:13px; }
  .compact-shuffle-machine .app-slot-reels { gap:6px; }
  .compact-shuffle-machine .app-slot-reel-card > small { font-size:10px; }
  .compact-shuffle-machine .app-slot-window { min-height:82px; padding:8px 5px; }
  .compact-shuffle-machine .app-slot-window span { font-size:12px; line-height:1.25; }
  .app-slot-shuffle-button { width:100%; min-height:48px; font-size:14px; }
  .app-slot-status { grid-template-columns:1fr; justify-items:center; gap:5px; text-align:center; }
  .app-slot-status-dot { display:none; }
  .app-slot-status strong,
  .app-slot-status small { grid-column:auto; width:100%; text-align:center!important; }
  .app-slot-lever { right:-5px; transform:scale(.79); transform-origin:top right; }

  /* Examples - no half-visible horizontal cards on mobile. */
  .proof-variation-grid {
    width:100%!important;
    max-width:330px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    margin:32px auto 0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .proof-variation-card { width:100%; max-width:330px; margin:0 auto; }
  .proof-variation-label { justify-content:center; text-align:center; }
  .proof-variation-card > p { align-items:center; text-align:center; }
  .proof-variation-footer { max-width:330px; flex-direction:column; gap:2px; padding:12px 16px; border-radius:16px; text-align:center; }

  /* Section 05 - centered choose -> create -> download/test path. */
  .app-capability-flow { grid-template-columns:1fr; width:100%; max-width:560px; gap:8px; margin:0 auto; }
  .app-capability-card { min-height:0; align-items:center; padding:24px 20px; text-align:center; }
  .capability-step { align-self:center; }
  .app-capability-card h3 { margin-top:16px; font-size:25px; text-align:center; }
  .app-capability-card p { max-width:400px; margin:10px auto 20px; text-align:center; }
  .capability-arrow { height:30px; transform:rotate(90deg); }
  .mini-creator-row { justify-content:center; margin-top:2px; }
  .mini-creator-row img { width:66px; height:78px; transform:none!important; }
  .mini-syncer-flow { width:100%; max-width:360px; margin:2px auto 0; }
  .mini-export-chip { width:100%; max-width:340px; margin:2px auto 0; }

  /* Audience + pricing. */
  .audience-pill-grid { width:100%; max-width:430px; margin:0 auto; }
  .audience-pill-grid span { width:100%; padding:15px 16px; font-size:16px; text-align:center; }
  .trial-card { grid-template-columns:1fr; }
  .trial-card-copy,
  .trial-card-features { padding:30px 22px; text-align:center; }
  .trial-badge,
  .pro-badge { align-self:center; }
  .trial-card h3,
  .trial-card-copy > p,
  .trial-card-copy small,
  .pro-description,
  .founding-note { margin-right:auto; margin-left:auto; text-align:center; }
  .trial-card-copy .button { width:100%; max-width:360px; justify-content:center; }
  .pro-price { justify-content:center; flex-wrap:wrap; }
  .trial-card-features ul { width:100%; max-width:360px; margin-right:auto; margin-left:auto; text-align:left; }
  .button-plan { width:100%; max-width:360px; margin-right:auto; margin-left:auto; }

  /* FAQ header centered; questions stay left-aligned for scanability. */
  .faq-shell { grid-template-columns:1fr; gap:30px; }
  .faq-heading { position:static; text-align:center; }
  .faq-item > button { min-height:68px; padding:17px 2px; font-size:16px; line-height:1.35; }
  .faq-answer p { margin:0 34px 22px 2px; font-size:15px; line-height:1.6; }

  /* Final CTA and footer flow. */
  .final-cta-grid { grid-template-columns:1fr; gap:34px; }
  .final-copy { text-align:center; }
  .final-copy .button { width:100%; max-width:360px; justify-content:center; }
  .final-copy > small { text-align:center; }
  .final-visual { min-height:0; width:100%; margin:0!important; transform:none!important; }
  .footer-app-flow { width:100%; max-width:330px; grid-template-columns:1fr!important; gap:10px; margin:0 auto; }
  .footer-app-stage { min-height:0; align-items:center; padding:20px; text-align:center; }
  .footer-app-stage > span { align-self:center; margin-bottom:12px; }
  .footer-app-stage > small { text-align:center; }
  .footer-app-arrow { display:grid!important; height:24px; place-items:center; transform:rotate(90deg); }
  .footer-finished-ad { grid-column:auto!important; width:124px; margin:0 auto!important; }

  .footer-grid { grid-template-columns:1fr 1fr; gap:30px 16px; text-align:center; }
  .footer-brand { grid-column:1 / -1; text-align:center; }
  .footer-brand img { margin:0 auto; }
  .footer-brand p { max-width:330px; margin:14px auto 0; }
  .footer-links { align-items:center; text-align:center; }
  .footer-cta { grid-column:1 / -1; align-items:center; justify-content:center; text-align:center; }
  .footer-cta .button { width:100%; max-width:330px; justify-content:center; }
  .footer-bottom { flex-direction:column; justify-content:center; gap:6px; padding:18px 0; text-align:center; }
}

@media (max-width: 420px) {
  .content-shell,
  .nav-shell { width:min(calc(100% - 24px), var(--max-width)); }
  .section-pad { padding:60px 0; }
  .hero-copy h1 { font-size:clamp(38px,11.5vw,48px); }
  .section-heading h2,
  .split-heading h2,
  .faq-heading h2,
  .final-copy h2 { font-size:clamp(30px,9vw,37px); }
  .hero-lede,
  .section-heading > p:last-child,
  .split-heading > p,
  .features .section-heading > p:last-child,
  .final-copy > p:not(.eyebrow) { font-size:15px; }
  .reuse-side { padding:15px; }
  .old-way-simple { padding:17px 11px; }
  .real-hook-stack { gap:6px; }
  .compact-shuffle-machine { padding-right:44px!important; }
  .compact-shuffle-machine .app-slot-face { padding:10px; }
  .compact-shuffle-machine .app-slot-window { min-height:78px; }
  .compact-shuffle-machine .app-slot-window span { font-size:11px; }
  .app-slot-lever { right:-8px; transform:scale(.72); }
  .mini-creator-row { gap:7px; }
  .mini-creator-row img { width:60px; height:72px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-links { grid-column:1; }
}

/* Hookline V2 LandingPageMVP - mobile timeline readability fix */
@media (max-width: 620px) {
  .ad-timeline {
    padding: 20px 16px 18px;
    gap: 14px;
    overflow: visible;
  }

  .timeline-label strong {
    font-size: 17px;
    line-height: 1.25;
  }

  .timeline-label span {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.4;
  }

  .timeline-track {
    height: 76px;
    min-height: 76px;
    grid-template-columns: minmax(108px, .34fr) 18px minmax(0, .66fr);
    overflow: hidden;
    border-radius: 12px;
  }

  .track-hook,
  .track-demo {
    min-width: 0;
    height: 76px;
    padding: 9px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    overflow: hidden;
  }

  .timeline-track span {
    display: block;
    flex: 0 0 auto;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .timeline-track strong {
    display: block;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .track-transition {
    min-width: 18px;
  }
}

@media (max-width: 420px) {
  .ad-timeline {
    padding: 18px 12px 16px;
  }

  .timeline-track {
    height: 80px;
    min-height: 80px;
    grid-template-columns: minmax(105px, .35fr) 16px minmax(0, .65fr);
  }

  .track-hook,
  .track-demo {
    height: 80px;
    padding: 8px 6px;
  }

  .timeline-track strong {
    font-size: 14px;
  }
}

/* Hook-focused public MVP landing update - 2026-09-11 */
.hook-test-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
.hook-preview-visual {
  position:relative;
  display:grid;
  place-items:center;
  padding:16px;
  background:linear-gradient(145deg,#07182d,#10375e);
}
.hook-preview-visual img {
  width:auto;
  max-width:100%;
  height:100%;
  max-height:198px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.hook-preview-chip {
  position:absolute;
  left:50%;
  bottom:13px;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 24px);
  padding:7px 10px;
  border-radius:999px;
  color:#0c6ed8;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  font-size:9px;
  font-weight:850;
}
.download-hook-visual {
  display:grid;
  place-items:center;
  padding:20px;
  background:linear-gradient(180deg,#f7fbff,#edf6ff);
}
.download-hook-card {
  width:min(100%,250px);
  display:grid;
  grid-template-columns:78px 1fr;
  gap:13px;
  align-items:center;
  padding:12px;
  border:1px solid #d7e6f2;
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 28px rgba(16,66,105,.09);
}
.download-hook-card img { width:78px; height:128px; object-fit:cover; border-radius:9px; }
.download-hook-card div { display:grid; gap:7px; }
.download-hook-card strong { color:#172d42; font-size:13px; }
.download-hook-card span { color:#708397; font-size:9px; }
.download-hook-card b { width:fit-content; padding:8px 10px; border-radius:8px; color:#fff; background:#087ff5; font-size:9px; }

@media (max-width:920px) {
  .hook-test-steps { grid-template-columns:1fr; }
}


/* Hook-focused copy + comparison graphics v6 */
.comparison-image-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.comparison-graphic {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}
.comparison-image-card .reuse-bottom-note {
  margin-top: 0;
}
.button-plan {
  min-height: 52px;
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.15;
}
@media (max-width: 720px) {
  .comparison-image-card { padding: 12px; }
  .comparison-graphic { border-radius: 14px; }
  .button-plan { font-size: 15px; min-height: 54px; }
}


/* Readability, CTA and hero visual refinement v8 - 2026-09-12 */
body { font-size: 16px; line-height: 1.58; }
.desktop-nav a, .nav-sign-in { font-size: 14px; }
.nav-cta { min-height: 46px; padding: 12px 19px; font-size: 15px; }

/* Primary CTAs: larger, cleaner, no secondary edge/accent strip. */
.button,
.button-large,
.button-plan,
.app-slot-shuffle-button {
  font-weight: 800;
}
.button { min-height: 50px; padding: 13px 21px; font-size: 16px; }
.button-large { min-height: 58px; padding: 15px 27px; font-size: 17px; border-radius: 12px; }
.button-primary,
.button-plan,
.app-slot-shuffle-button {
  border: 0 !important;
  outline: 0;
  color: #fff !important;
  background: linear-gradient(100deg, #087ff5 0%, #0b91f8 58%, #19a9f4 100%) !important;
  background-clip: padding-box;
  box-shadow: 0 11px 26px rgba(8,127,245,.23) !important;
}
.button-primary::before,.button-primary::after,
.button-plan::before,.button-plan::after,
.app-slot-shuffle-button::before,.app-slot-shuffle-button::after { content: none !important; display: none !important; }
.button-primary:hover,.button-plan:hover,.app-slot-shuffle-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 32px rgba(8,127,245,.29) !important;
}
.button-secondary { min-height: 58px; padding: 15px 25px; border: 1.5px solid #b9d8f7; font-size: 16px; font-weight: 790; background: #fff; box-shadow: 0 8px 20px rgba(16,66,105,.07); }

/* More readable type throughout the page. */
.eyebrow { font-size: 11px; }
.section-heading h2, .faq-heading h2, .audience-copy h2, .why-copy h2, .final-copy h2 { font-size: clamp(38px, 4.45vw, 58px); line-height: 1.04; }
.section-heading > p:last-child, .split-heading > p { font-size: 18px; line-height: 1.6; }
.problem-tagline { font-size: 18px !important; }
.reuse-bottom-note { font-size: 15px !important; }
.step-card h3 { font-size: 25px !important; line-height: 1.15; }
.step-card > p:not(.step-kicker) { font-size: 16px !important; line-height: 1.58; }
.step-kicker { font-size: 12px !important; }
.timeline-label strong { font-size: 18px; }
.timeline-label span { font-size: 14px; }
.shuffle-heading > p:last-child { font-size: 18px; }
.shuffle-interactive-title span { font-size: 13px !important; }
.shuffle-interactive-title strong { font-size: 17px !important; }
.app-slot-reel-card > small { font-size: 11px !important; }
.app-slot-window span { font-size: 14px !important; }
.app-slot-shuffle-button { min-height: 52px; font-size: 16px !important; }
.proof-variation-label { font-size: 12px; }
.proof-variation-card > p strong { font-size: 17px; }
.proof-variation-card > p span { font-size: 14px; }
.proof-variation-footer { font-size: 16px; }
.creator-showcase-copy h3, .toolkit-benefit h3 { font-size: 22px !important; }
.creator-showcase-copy p, .toolkit-benefit p { font-size: 16px !important; line-height: 1.55; }
.audience-pill-grid span { font-size: 15px; }
.trial-card-copy p, .pro-description, .trial-card-features li { font-size: 16px; }
.faq-item > button { font-size: 17px; }
.faq-answer p { font-size: 15px; }
.footer-brand p, .footer-links a, .footer-cta p { font-size: 14px; }

/* Hero: two phones, one hook and one app demo, matching the cleaner mockup direction. */
.hero { min-height: 690px; padding-top: 62px; background: radial-gradient(circle at 74% 25%, rgba(36,183,242,.12), transparent 34%), linear-gradient(180deg,#f9fcff 0%,#f2f8ff 100%); }
.hero-grid { grid-template-columns: minmax(0, .94fr) minmax(500px, 1.06fr); gap: 58px; }
.hero-copy h1 { max-width: 650px; font-size: clamp(58px,5.7vw,82px); line-height: .97; letter-spacing: -.055em; }
.hero-lede { max-width: 610px; margin-top: 22px; font-size: 20px; line-height: 1.55; }
.hero-actions { gap: 14px; margin-top: 27px; }
.trial-note { margin-top: 13px; font-size: 14px; }
.hero-facts { gap: 13px 18px; margin-top: 24px; padding-top: 0; border-top: 0; }
.hero-facts li { min-height: 54px; padding: 10px 15px; border: 1px solid #d7e8f8; border-radius: 999px; color: #405267; background: rgba(255,255,255,.82); box-shadow: 0 7px 18px rgba(15,68,110,.06); font-size: 14px; line-height: 1.3; }
.hero-facts svg { width: 22px; height: 22px; }

.hero-duo-wrap { display: flex; justify-content: center; }
.hero-duo-visual { position: relative; width: min(100%, 570px); min-height: 500px; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 48px 30px 34px; }
.hero-phone-card { position: relative; z-index: 2; width: 228px; }
.hero-hook-card { transform: rotate(-3.2deg) translateY(8px); }
.hero-demo-card { transform: rotate(2.8deg) translateY(-3px); }
.hero-phone-label { position: absolute; z-index: 8; top: -17px; left: 50%; transform: translateX(-50%); width: max-content; padding: 7px 13px; border-radius: 999px; color: #fff; background: #087ff5; box-shadow: 0 7px 18px rgba(8,127,245,.2); font-size: 12px; font-weight: 850; }
.hero-phone-label.demo-label { color: #4a6177; background: #e7edf3; box-shadow: none; }
.hero-phone { position: relative; width: 100%; aspect-ratio: 9 / 17.2; overflow: hidden; border: 7px solid #111820; border-radius: 34px; background: #fff; box-shadow: 0 22px 44px rgba(8,34,57,.19); }
.hero-phone::before { content:""; position:absolute; z-index:9; top:8px; left:50%; width:35%; height:13px; border-radius:999px; background:#0b1118; transform:translateX(-50%); }
.hero-phone-video video { width: 100%; height: 100%; object-fit: cover; }
.hero-play-icon { position:absolute; z-index:10; left:50%; top:50%; width:58px; height:58px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.88); border-radius:50%; color:#fff; background:rgba(8,19,31,.34); transform:translate(-50%,-50%); font-size:21px; text-indent:3px; backdrop-filter:blur(3px); }
.hero-phone-app { padding: 36px 17px 22px; color:#0d2034; background: linear-gradient(180deg,#fff 0%,#f7fbff 100%); }
.demo-phone-status { display:flex; justify-content:space-between; margin-bottom:22px; color:#101820; font-size:8px; font-weight:800; }
.demo-app-brand { display:flex; align-items:center; gap:8px; margin-bottom:32px; font-size:14px; }
.demo-app-brand b { width:28px; height:28px; display:grid; place-items:center; border-radius:7px; color:#fff; background:#087ff5; font-size:16px; }
.demo-app-brand strong { font-size:17px; }
.demo-app-headline { margin-bottom:24px; font-size:21px; font-weight:850; line-height:1.08; letter-spacing:-.035em; }
.demo-app-headline em { color:#087ff5; font-style:normal; }
.demo-app-list { display:grid; gap:4px; }
.demo-app-list > span { min-height:39px; display:grid; grid-template-columns:17px 1fr auto; align-items:center; gap:8px; padding:0 7px; border-bottom:1px solid #e7eef5; color:#26384a; font-size:11px; }
.demo-app-list i { width:13px; height:13px; display:grid; place-items:center; border:1.5px solid #8ca2b8; border-radius:4px; color:#fff; font-style:normal; font-size:8px; }
.demo-app-list span:first-child i { border-color:#16b8d6; background:#16b8d6; }
.demo-app-list b { color:#9ab1c5; font-size:17px; }
.hero-handwritten { position:absolute; z-index:4; color:#0c58c7; font-family:"Comic Sans MS","Bradley Hand",cursive; font-size:20px; font-weight:700; line-height:1.08; transform:rotate(-7deg); }
.hero-hook-note { left:76px; top:6px; }
.hero-demo-note { right:-5px; top:180px; transform:rotate(5deg); }
.hero-duo-arrow { position:absolute; z-index:1; left:50%; top:48%; color:#087ff5; font-size:50px; font-weight:500; transform:translate(-50%,-50%); }

/* Extra CTA moments after visitors understand the product and after proof. */
.section-cta { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; margin:36px auto 0; text-align:center; }
.section-cta .button { min-width:260px; }
.section-cta small { color:#667085; font-size:14px; font-weight:650; }

/* Corrected comparison graphic. */
.hookline-way-card .comparison-graphic { background:#eef8ff; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns:1fr; gap:32px; }
  .hero-copy { max-width:760px; margin:0 auto; text-align:center; }
  .hero-copy h1,.hero-lede { margin-left:auto; margin-right:auto; }
  .hero-actions,.trial-note,.hero-facts,.hero-copy .eyebrow { justify-content:center; }
  .hero-duo-visual { margin:0 auto; }
}

@media (max-width: 720px) {
  body { font-size:16px; }
  .section-pad { padding:72px 0; }
  .nav-cta { min-height:44px; padding:10px 14px; font-size:14px; }
  .hero { padding-top:44px; }
  .hero-copy h1 { font-size:clamp(44px,12.5vw,60px); line-height:1.01; }
  .hero-lede { font-size:18px; line-height:1.5; }
  .hero-actions { width:100%; max-width:390px; margin-left:auto; margin-right:auto; }
  .hero-actions .button { width:100%; }
  .hero-facts { width:100%; max-width:390px; display:grid; grid-template-columns:1fr; margin-left:auto; margin-right:auto; }
  .hero-facts li { justify-content:center; border-radius:14px; font-size:15px; }
  .hero-duo-visual { width:100%; min-height:425px; gap:12px; padding:42px 8px 18px; }
  .hero-phone-card { width:min(43vw,190px); }
  .hero-phone { border-width:5px; border-radius:27px; }
  .hero-hook-note { left:10px; top:5px; font-size:16px; }
  .hero-demo-note { right:2px; top:155px; font-size:16px; }
  .hero-duo-arrow { font-size:37px; }
  .demo-app-brand { margin-bottom:18px; }
  .demo-app-headline { margin-bottom:15px; font-size:17px; }
  .demo-app-list > span { min-height:31px; font-size:9px; }
  .section-heading h2,.faq-heading h2,.final-copy h2 { font-size:clamp(34px,9.7vw,44px); }
  .section-heading > p:last-child,.split-heading > p { font-size:17px; }
  .step-card h3 { font-size:24px!important; }
  .step-card > p:not(.step-kicker) { font-size:16px!important; }
  .section-cta { margin-top:28px; }
  .section-cta .button { width:100%; max-width:360px; }
  .section-cta small { font-size:13px; }
}

@media (max-width: 430px) {
  .hero-duo-visual { min-height:385px; }
  .hero-phone-card { width:min(43vw,165px); }
  .hero-phone-label { padding:6px 9px; font-size:10px; }
  .hero-play-icon { width:48px; height:48px; font-size:17px; }
  .demo-phone-status { margin-bottom:14px; }
  .demo-app-brand { margin-bottom:13px; }
  .demo-app-brand b { width:22px; height:22px; font-size:13px; }
  .demo-app-brand strong { font-size:13px; }
  .demo-app-headline { font-size:14px; }
  .demo-app-list > span { min-height:27px; padding:0 3px; font-size:8px; }
  .hero-handwritten { font-size:14px; }
  .hero-hook-note { left:4px; }
  .hero-demo-note { right:-2px; top:138px; }
  .button-large { min-height:56px; font-size:17px; }
}


/* v8.1 hero line + secondary CTA polish */
.hero-main-line { display:block; white-space:nowrap; }
.hero .button-secondary { color:#0b67d3 !important; border:1.5px solid #b7d9fb !important; background:#fff !important; box-shadow:0 8px 20px rgba(16,66,105,.07) !important; }
.hero .button-secondary:hover { color:#075cbf !important; border-color:#86bff5 !important; background:#fafdff !important; }
@media (min-width:1101px) {
  .hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(500px,.95fr); }
  .hero-copy h1 { font-size:clamp(56px,5.1vw,74px); max-width:700px; }
  .hero-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:650px; }
  .hero-facts li { justify-content:flex-start; min-width:0; padding:10px 12px; }
}
@media (max-width:720px) {
  .hero-main-line { white-space:normal; }
}


/* Hero annotations, Hookline demo screenshots, comparison fit v9 - 2026-09-12 */
.hero-phone-screenshot { padding:0; background:#f4f7fb; }
.hero-phone-screenshot img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; }
.hero-note-arrow { position:absolute; z-index:5; overflow:visible; fill:none; stroke:#087ff5; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 3px 5px rgba(8,127,245,.12)); }
.hero-note-arrow-hook { width:105px; height:75px; left:130px; top:24px; transform:rotate(2deg); }
.hero-note-arrow-demo { width:125px; height:86px; right:-8px; top:205px; }
.hero-center-arrow { position:absolute; z-index:1; width:74px; left:50%; top:45%; transform:translate(-50%,-50%); fill:none; stroke:#087ff5; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.hero-hook-note { left:76px; top:8px; font-size:21px; transform:rotate(-6deg); }
.hero-demo-note { right:-8px; top:165px; font-size:21px; transform:rotate(5deg); }
.hero-duo-arrow { display:none!important; }

/* Let the comparison graphics fill their cards like the approved render. */
.comparison-image-card { padding:10px; gap:12px; overflow:hidden; }
.comparison-image-card .comparison-graphic { width:100%; aspect-ratio:1200 / 760; object-fit:cover; object-position:center; border-radius:18px; }
.old-way-card .comparison-graphic { object-position:center center; }
.hookline-way-card .comparison-graphic { object-position:center center; }
.comparison-image-card .reuse-bottom-note { padding:0 8px 6px; }

/* Use an actual Hookline app screenshot anywhere the page says the demo stays the same. */
.track-demo { position:relative; overflow:hidden; isolation:isolate; }
.track-demo img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.19; filter:saturate(.8); }
.track-demo::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(239,247,255,.94),rgba(255,255,255,.82)); }
.proof-demo-example { width:min(100%,900px); margin:24px auto 0; padding:18px; display:grid; grid-template-columns:minmax(190px,.45fr) minmax(0,1.55fr); gap:20px; align-items:center; border:1px solid #cfe3f7; border-radius:20px; background:linear-gradient(135deg,#f6fbff,#fff); box-shadow:0 14px 34px rgba(15,72,116,.07); }
.proof-demo-example-copy { display:grid; gap:6px; }
.proof-demo-example-copy > span { width:max-content; padding:6px 10px; border-radius:999px; color:#087ff5; background:#e6f3ff; font-size:12px; font-weight:900; letter-spacing:.06em; }
.proof-demo-example-copy strong { color:#10263d; font-size:18px; line-height:1.25; }
.proof-demo-example-copy p { margin:0; color:#64768a; font-size:15px; }
.proof-demo-example-screen { height:190px; overflow:hidden; border:1px solid #d9e7f4; border-radius:14px; background:#fff; box-shadow:0 10px 24px rgba(18,67,108,.08); }
.proof-demo-example-screen img { width:100%; height:100%; object-fit:cover; object-position:top center; }

@media (max-width:720px) {
  .hero-note-arrow-hook { width:78px; height:58px; left:30px; top:24px; }
  .hero-note-arrow-demo { width:85px; height:64px; right:-2px; top:155px; }
  .hero-hook-note { left:12px; top:10px; font-size:17px; }
  .hero-demo-note { right:0; top:137px; font-size:17px; }
  .hero-center-arrow { width:52px; }
  .comparison-image-card { padding:7px; }
  .proof-demo-example { grid-template-columns:1fr; padding:14px; text-align:center; }
  .proof-demo-example-copy { justify-items:center; }
  .proof-demo-example-screen { height:160px; }
}

/* v9 annotation positioning polish */
.hero-demo-note{right:-58px!important;top:160px!important;}
.hero-note-arrow-demo{right:-34px!important;top:192px!important;}
@media(max-width:720px){.hero-demo-note{right:-4px!important;top:133px!important;}.hero-note-arrow-demo{right:-2px!important;top:154px!important;}}


/* --------------------------------------------------------------------------
   Landing clarity + hero cleanup v11 - 2026-09-14
   -------------------------------------------------------------------------- */

/* Readability: keep normal page copy comfortably above tiny UI-label sizes. */
body { font-size:17px; line-height:1.62; }
.desktop-nav a,.nav-sign-in { font-size:15px; }
.eyebrow { font-size:12px; letter-spacing:.105em; }
.hero-lede { font-size:21px; line-height:1.52; }
.hero .trial-note { font-size:15px; }
.hero-facts li { font-size:15px; line-height:1.35; }
.section-heading > p:last-child,.split-heading > p,.faq-heading > p { font-size:19px; line-height:1.58; }
.problem-tagline { font-size:19px!important; }
.reuse-bottom-note { font-size:16px!important; }
.step-card h3 { font-size:26px!important; }
.step-card > p:not(.step-kicker) { font-size:17px!important; line-height:1.58; }
.section-cta small,.trial-card small,.founding-note,.final-copy > small,.footer-bottom { font-size:14px; }
.shuffle-heading > p:last-child { font-size:19px; line-height:1.58; }
.proof-variation-card > p strong { font-size:18px; }
.creator-showcase-copy p,.toolkit-benefit p,.trial-card-copy p,.pro-description,.trial-card-features li,.faq-answer p { font-size:17px!important; line-height:1.55; }
.creator-portrait-row figcaption { font-size:15px; }
.audience-pill-grid span { font-size:17px; }
.faq-item > button { font-size:18px; }
.footer-brand p,.footer-links a,.footer-cta p { font-size:15px; }

/* Hero: mimic the clean mockup. Two phones + only two handwritten notes. */
.hero-grid { grid-template-columns:minmax(0,1fr) minmax(510px,.95fr); gap:62px; }
.hero-duo-visual { width:min(100%,600px); min-height:510px; gap:24px; padding:52px 38px 26px; overflow:visible; }
.hero-phone-card { width:235px; }
.hero-hook-card { transform:rotate(-3deg) translateY(10px); }
.hero-demo-card { transform:rotate(2.5deg) translateY(-2px); }
.hero-phone-label,.hero-center-arrow { display:none!important; }
.hero-handwritten {
  color:#0d5ac7;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.hero-hook-note { left:86px!important; top:3px!important; transform:rotate(-7deg)!important; }
.hero-demo-note { right:-12px!important; top:171px!important; transform:rotate(6deg)!important; }
.hero-note-arrow { stroke-width:4.2; filter:none; }
.hero-note-arrow-hook { width:96px; height:70px; left:145px; top:24px; transform:rotate(1deg); }
.hero-note-arrow-demo { width:112px; height:80px; right:-10px!important; top:208px!important; }
.hero-demo-ui { padding:34px 18px 22px; background:linear-gradient(180deg,#fff,#f7fbff); }
.hero-demo-ui .demo-phone-status { margin-bottom:19px; }
.hero-demo-ui .demo-app-brand { margin-bottom:26px; }
.hero-demo-ui .demo-app-headline { margin-bottom:20px; }
.hero-demo-ui .demo-app-list > span { min-height:38px; }
.hero-demo-ui .demo-app-list strong { font-size:11px; font-weight:720; }

/* Real Hookline product screenshot belongs in the workflow, not the hero demo. */
.hookline-ui-shot { position:relative; overflow:hidden; padding:0; background:#eef5fb; }
.hookline-ui-shot img { width:100%; height:100%; display:block; object-fit:cover; object-position:22% top; }
.hookline-ui-shot::after { content:""; position:absolute; inset:auto 0 0; height:42%; background:linear-gradient(transparent,rgba(6,22,40,.72)); pointer-events:none; }
.hookline-ui-shot > span { position:absolute; z-index:2; left:16px; right:16px; bottom:14px; padding:9px 12px; border-radius:10px; color:#fff; background:rgba(7,30,53,.76); font-size:14px; font-weight:850; text-align:center; backdrop-filter:blur(5px); }
.demo-track-ui { position:relative; overflow:hidden; background:linear-gradient(135deg,#eaf5ff,#fff); }
.demo-track-ui::before { content:""; position:absolute; right:10px; top:10px; width:58px; height:42px; border-radius:8px; background:linear-gradient(135deg,#087ff5,#63c9f6); opacity:.12; }
.demo-track-ui small { display:block; margin-top:4px; color:#587086; font-size:13px; font-weight:650; }

/* Give the comparison art more room, especially the left image. */
.reuse-comparison { max-width:1120px; margin-right:auto; margin-left:auto; }
.comparison-image-card { padding:8px; }
.comparison-image-card .comparison-graphic { aspect-ratio:1200/760; object-fit:cover; border-radius:17px; }
.old-way-card .comparison-graphic { object-position:center 46%; }
.comparison-image-card .reuse-bottom-note { padding:0 10px 8px; }

@media (max-width:1100px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-duo-visual { margin:0 auto; }
}

@media (max-width:760px) {
  body { font-size:16.5px; }
  .hero-copy h1 { font-size:clamp(44px,12.8vw,60px); }
  .hero-lede { font-size:19px; }
  .hero .trial-note { font-size:14px; }
  .hero-facts li { font-size:16px; }
  .section-heading h2,.split-heading h2,.faq-heading h2,.final-copy h2 { font-size:clamp(35px,9.8vw,44px); }
  .section-heading > p:last-child,.split-heading > p,.faq-heading > p { font-size:17px; }
  .step-card h3 { font-size:25px!important; }
  .step-card > p:not(.step-kicker) { font-size:17px!important; }
  .hero-duo-visual { min-height:430px; gap:12px; padding:48px 10px 15px; }
  .hero-phone-card { width:min(43vw,190px); }
  .hero-handwritten { font-size:18px; }
  .hero-hook-note { left:8px!important; top:7px!important; }
  .hero-note-arrow-hook { width:72px; height:54px; left:48px; top:29px; }
  .hero-demo-note { right:0!important; top:140px!important; }
  .hero-note-arrow-demo { width:76px; height:56px; right:0!important; top:164px!important; }
  .hero-demo-ui { padding:29px 10px 14px; }
  .hero-demo-ui .demo-app-brand { gap:5px; margin-bottom:12px; }
  .hero-demo-ui .demo-app-brand b { width:21px; height:21px; font-size:12px; }
  .hero-demo-ui .demo-app-brand strong { font-size:13px; }
  .hero-demo-ui .demo-app-headline { margin-bottom:10px; font-size:15px; }
  .hero-demo-ui .demo-app-list > span { min-height:27px; grid-template-columns:13px 1fr auto; gap:4px; font-size:8px; }
  .hero-demo-ui .demo-app-list strong { font-size:8.5px; }
  .hookline-ui-shot > span { left:10px; right:10px; bottom:10px; font-size:13px; }
  .comparison-image-card { padding:5px; }
  .faq-item > button { font-size:17px; }
  .faq-answer p { font-size:16px!important; }
}

@media (max-width:430px) {
  .hero-duo-visual { min-height:390px; }
  .hero-phone-card { width:min(42vw,164px); }
  .hero-handwritten { font-size:16px; }
  .hero-hook-note { left:3px!important; top:8px!important; }
  .hero-note-arrow-hook { left:30px; width:62px; }
  .hero-demo-note { right:-1px!important; top:128px!important; }
  .hero-note-arrow-demo { top:150px!important; width:66px; }
  .hero-demo-ui .demo-phone-status { margin-bottom:9px; font-size:6px; }
  .hero-demo-ui .demo-app-list > span { min-height:24px; }
  .section-heading > p:last-child,.split-heading > p,.faq-heading > p { font-size:16.5px; }
}

/* v11 annotation final polish */
@media (min-width:761px) {
  .hero-demo-note { right:-78px!important; top:166px!important; }
  .hero-note-arrow-demo { right:-42px!important; top:201px!important; }
}
@media (max-width:760px) {
  .hero-demo-note { right:3px!important; top:9px!important; transform:rotate(5deg)!important; }
  .hero-note-arrow-demo { right:8px!important; top:35px!important; width:72px; height:54px; }
}


/* ==========================================================================
   V12 focused visual refinements
   ========================================================================== */

/* Keep the three hero benefits balanced and readable instead of letting one
   pill collapse or wrap differently from the others. */
@media (min-width: 721px) {
  .hero-facts {
    width: min(100%, 650px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .hero-facts li {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    justify-content: flex-start !important;
    padding: 11px 14px !important;
  }
  .hero-facts li span {
    min-width: 0;
    line-height: 1.28;
  }
}

/* Cleaner hero annotation. Keep the handwritten treatment from the approved
   render, but give "Same demo" its own whitespace and a shorter pointer. */
.hero-demo-note {
  right: -38px !important;
  top: 162px !important;
  width: 118px;
  white-space: nowrap;
  text-align: center;
  font-size: 20px !important;
  transform: rotate(4deg) !important;
}
.hero-note-arrow-demo {
  right: -6px !important;
  top: 194px !important;
  width: 96px !important;
  height: 68px !important;
}

/* V8 comparison treatment. The V8 With Hookline art is taller than the newer
   1200x760 art, so do not force it into the newer crop ratio. */
.hookline-way-card .comparison-graphic {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #eef8ff !important;
}

/* Return the creator explanation to the larger treatment from the earlier
   landing versions. */
.creator-showcase-copy h3 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}
.creator-showcase-copy p {
  margin-top: 14px !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

@media (max-width: 720px) {
  .hero-demo-note {
    right: 2px !important;
    top: 9px !important;
    width: auto;
    font-size: 16px !important;
    transform: rotate(4deg) !important;
  }
  .hero-note-arrow-demo {
    right: 8px !important;
    top: 35px !important;
    width: 72px !important;
    height: 54px !important;
  }
  .hero-facts {
    width: min(100%, 390px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .hero-facts li {
    width: 100% !important;
    min-height: 58px !important;
    justify-content: center !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
    text-align: center;
  }
  .creator-showcase-copy h3 {
    font-size: 30px !important;
  }
  .creator-showcase-copy p {
    font-size: 17px !important;
  }
}

/* ==========================================================================
   V14 hero, creator and comparison refinements - 2026-09-19
   ========================================================================== */

/* Hero proof points should read like supporting facts, not three CTA buttons. */
.hero-facts {
  width:min(100%,650px)!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  margin-top:26px!important;
  padding:4px 0!important;
  border:0!important;
}
.hero-facts li {
  min-height:52px!important;
  width:100%!important;
  padding:5px 18px!important;
  border:0!important;
  border-right:1px solid #d8e5f0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#405267!important;
  font-size:15px!important;
  line-height:1.3!important;
}
.hero-facts li:first-child { padding-left:0!important; }
.hero-facts li:last-child { border-right:0!important; padding-right:0!important; }
.hero-facts svg { width:23px!important; height:23px!important; flex:0 0 auto; }
.hero-facts strong { color:#17283a!important; }

/* Real Hookline demo video in the right hero phone. */
.hero-demo-video { padding:0!important; background:#fff!important; }
.hero-demo-video video {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
  background:#fff;
}
/* The creator hook should autoplay cleanly without a fake play-button overlay. */
.hero-play-icon { display:none!important; }

/* Reserve actual whitespace to the right of the second phone for Same demo. */
@media (min-width:761px) {
  .hero-duo-visual {
    width:min(100%,680px)!important;
    min-height:510px!important;
    justify-content:center!important;
    gap:22px!important;
    padding:52px 118px 26px 20px!important;
  }
  .hero-phone-card { width:228px!important; }
  .hero-demo-note {
    right:3px!important;
    top:158px!important;
    width:105px!important;
    font-size:21px!important;
    text-align:center!important;
    white-space:nowrap!important;
    transform:rotate(4deg)!important;
  }
  .hero-note-arrow-demo {
    right:14px!important;
    top:193px!important;
    width:100px!important;
    height:72px!important;
  }
}

/* Rebuild With Hookline using the supplied creators and the real Hookline app. */
.with-hookline-live-card {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
  padding:20px!important;
  overflow:hidden;
}
.with-hookline-card-heading {
  display:flex;
  align-items:center;
  gap:10px;
  color:#0d2135;
  font-size:22px;
  font-weight:900;
}
.with-check {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#18b781;
  font-size:20px;
  line-height:1;
}
.with-hookline-creators {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:4px;
}
.with-hookline-creators figure {
  margin:0;
  overflow:hidden;
  border:1px solid #dceaf6;
  border-radius:14px;
  background:#fff;
  box-shadow:0 7px 18px rgba(18,67,108,.07);
}
.with-hookline-creators img {
  width:100%;
  aspect-ratio:1.08/1;
  display:block;
  object-fit:cover;
  object-position:center 22%;
}
.with-hookline-creators figcaption {
  padding:8px 5px 9px;
  color:#17283a;
  font-size:14px;
  font-weight:900;
  text-align:center;
}
.with-hookline-converge {
  position:relative;
  height:91px;
  margin:-2px 6px 0;
  color:#0788f5;
}
.with-hookline-converge svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.with-hookline-converge path {
  fill:none;
  stroke:currentColor;
  stroke-width:4;
  stroke-linecap:round;
}
.with-hookline-converge > span {
  position:absolute;
  left:50%;
  bottom:-1px;
  transform:translateX(-50%);
  min-width:132px;
  padding:8px 16px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(90deg,#087ff5,#20b8f5);
  box-shadow:0 8px 18px rgba(8,127,245,.18);
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-align:center;
}
.with-hookline-laptop {
  width:min(92%,520px);
  margin:0 auto;
}
.with-hookline-laptop-screen {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  padding:7px;
  border:7px solid #172332;
  border-bottom-width:10px;
  border-radius:13px 13px 7px 7px;
  background:#172332;
  box-shadow:0 12px 25px rgba(20,49,78,.13);
}
.with-hookline-laptop-screen img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:left top;
  border-radius:3px;
}
.with-hookline-laptop-base {
  width:112%;
  height:10px;
  margin:-1px 0 0 -6%;
  border-radius:2px 2px 12px 12px;
  background:linear-gradient(180deg,#dfe7ed,#b7c4cf);
  box-shadow:0 5px 9px rgba(26,56,82,.10);
}
.with-hookline-live-card .reuse-bottom-note { margin-top:2px; }

/* Make supplied creator references the focal point in the creator reuse section. */
.creator-portrait-row img { object-position:center 20%; }

@media (max-width:760px) {
  .hero-facts {
    width:min(100%,390px)!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    padding:0!important;
  }
  .hero-facts li {
    min-height:52px!important;
    justify-content:flex-start!important;
    padding:11px 4px!important;
    border-right:0!important;
    border-bottom:1px solid #d8e5f0!important;
    text-align:left!important;
    font-size:16px!important;
  }
  .hero-facts li:last-child { border-bottom:0!important; }
  .hero-duo-visual { padding-left:7px!important; padding-right:7px!important; }
  .hero-demo-note {
    right:2px!important;
    top:7px!important;
    width:auto!important;
    padding:3px 6px;
    border-radius:7px;
    background:rgba(247,251,255,.9);
    font-size:16px!important;
  }
  .hero-note-arrow-demo { right:8px!important; top:35px!important; width:72px!important; height:54px!important; }
  .with-hookline-live-card { padding:15px!important; }
  .with-hookline-card-heading { font-size:20px; }
  .with-hookline-creators { gap:7px; }
  .with-hookline-creators figure { border-radius:10px; }
  .with-hookline-creators figcaption { padding:6px 2px 7px; font-size:12px; }
  .with-hookline-converge { height:72px; margin-left:0; margin-right:0; }
  .with-hookline-converge > span { min-width:110px; padding:7px 12px; font-size:11px; }
  .with-hookline-laptop { width:96%; }
  .with-hookline-laptop-screen { border-width:5px; border-bottom-width:8px; }
}

/* --------------------------------------------------------------------------
   Audit fixes v15 - 2026-09-18
   Only: final CTA contrast, founding-rate note readability, mobile tap target.
   -------------------------------------------------------------------------- */

/* High: strengthen final CTA contrast on the blue section. */
.final-cta {
  background: linear-gradient(135deg, #075fbd 0%, #0871d1 55%, #0b74d1 100%);
}
.final-copy > p:not(.eyebrow) {
  color: rgba(255,255,255,.94);
}
.final-copy > small {
  color: rgba(255,255,255,.86);
}

/* High: make the founding-rate disclosure readable. */
.trial-card-features .founding-note,
.founding-note {
  font-size: 13px !important;
  line-height: 1.55;
  color: #d8ecff;
}

/* Medium: WCAG-friendly mobile menu tap target. */
@media (max-width: 720px) {
  .menu-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}



/* ==========================================================================
   V16 focused cleanup - 2026-09-18
   ========================================================================== */

/* Center the three hero proof points without making them feel like buttons. */
.hero-facts li {
  justify-content: center !important;
  text-align: center !important;
}
.hero-facts li span {
  text-align: center !important;
}

/* Keep Same Demo fully outside the right phone and point the arrow to the demo. */
@media (min-width: 761px) {
  .hero-duo-visual {
    width: min(100%, 710px) !important;
    padding-right: 145px !important;
  }
  .hero-demo-note {
    right: 7px !important;
    top: 158px !important;
    width: 122px !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .hero-note-arrow-demo {
    right: 21px !important;
    top: 193px !important;
    width: 104px !important;
    height: 73px !important;
  }
}

/* On small screens, keep the label above the phones where it stays readable. */
@media (max-width: 760px) {
  .hero-demo-note {
    right: 3px !important;
    top: 7px !important;
    width: auto !important;
    font-size: 17px !important;
    font-weight: 800 !important;
  }
  .hero-note-arrow-demo {
    right: 6px !important;
    top: 34px !important;
    width: 70px !important;
    height: 52px !important;
  }
}

/* Re-rendered Without Hookline art fills the full comparison card. */
.without-hookline-v16-card {
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.without-hookline-v16-card .comparison-graphic {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 22px !important;
}

/* Hookline brand emphasis in the positive comparison heading. */
.with-hookline-card-heading .hookline-blue {
  color: #087ff5;
}

/* Make all three convergence arrows terminate above the Same Demo label. */
.with-hookline-converge path {
  stroke-width: 4 !important;
}
.with-hookline-converge > span {
  z-index: 2;
}
.with-hookline-converge svg {
  z-index: 1;
}

/* V16 arrow cleanup: use fixed SVG arrow tips instead of scalable markers. */
.with-hookline-converge .arrow-tip {
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* V16 final Without Hookline fit: preserve all copy while matching card height. */
.without-hookline-v16-card .comparison-graphic {
  object-fit:fill!important;
  object-position:center!important;
}


/* ==========================================================================
   V17 repair pass - 2026-09-18
   - restore the clean Without Hookline graphic
   - make both comparison sides visually balanced
   - center the final mobile flow
   ========================================================================== */

/* Use the cleaner earlier artwork, but let it fill the entire left comparison
   side instead of leaving the large dead zone that appeared in older builds. */
.without-hookline-clean-card {
  padding: 0 !important;
  overflow: hidden !important;
  min-height: 100% !important;
  border: 1px solid #d9e4ef !important;
  border-radius: 22px !important;
  background: #f7f9fb !important;
  box-shadow: none !important;
}
.without-hookline-clean-card .comparison-graphic {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 21px !important;
}

/* Make the two comparison cards use the same available height. */
.reuse-comparison {
  align-items: stretch !important;
}
.reuse-comparison > .reuse-side {
  height: 100% !important;
}
.with-hookline-live-card {
  height: 100% !important;
}

/* Remove obsolete V16 generated-image behavior. */
.without-hookline-v16-card {
  display: none !important;
}

/* Final CTA diagram: true centered alignment on phones and tablets. */
.footer-app-flow {
  text-align: center;
}
.footer-app-stage {
  align-items: center !important;
  text-align: center !important;
}
.footer-app-stage > span {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.footer-app-stage > strong,
.footer-app-stage > small,
.footer-create-hook-stage > div {
  width: 100%;
  text-align: center !important;
}
.footer-app-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  width: 100% !important;
  text-align: center !important;
}
.footer-finished-ad {
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 700px) {
  .footer-app-flow {
    width: min(100%, 330px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: center !important;
  }
  .footer-app-stage {
    width: 100% !important;
    max-width: 300px !important;
  }
  .footer-app-arrow {
    height: 30px !important;
    transform: rotate(90deg) !important;
    transform-origin: center !important;
  }
  .footer-finished-ad {
    width: 136px !important;
  }
}

/* Keep the restored comparison readable on phones without awkward cropping. */
@media (max-width: 760px) {
  .without-hookline-clean-card {
    min-height: 0 !important;
  }
  .without-hookline-clean-card .comparison-graphic {
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
}


/* ==========================================================================
   V18 comparison repair
   Native Without Hookline card so text never gets cropped or stretched.
   ========================================================================== */

.without-hookline-native {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  height: 100% !important;
  padding: 20px !important;
  overflow: hidden !important;
  border: 1px solid #d9e4ef !important;
  border-radius: 22px !important;
  background: #fbfcfe !important;
  box-shadow: 0 16px 42px rgba(20,61,95,.06) !important;
}

.without-hookline-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0d2135;
  font-size: 22px;
  font-weight: 900;
}
.without-x {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  border-radius: 50%;
  color: #fff;
  background: #ff4e55;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}

.without-hookline-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.without-hookline-steps span {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 9px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  color: #17283a;
  background: #fff;
  box-shadow: 0 5px 14px rgba(32,58,83,.04);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.without-hookline-steps i {
  color: #ff4e55;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.without-hookline-photo {
  flex: 1 1 auto;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid #e1e7ed;
  border-radius: 16px;
  background: #edf1f5;
}
.without-hookline-photo img {
  width: 100%;
  height: 100%;
  min-height: 310px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.without-hookline-note {
  margin: 0 !important;
  padding: 2px 2px 0;
  color: #788998;
  font-size: 17px !important;
  line-height: 1.45;
  text-align: left;
}
.without-hookline-note strong {
  color: #60768a;
  font-weight: 900;
}

/* Stop old image-card overrides from affecting the native card. */
.without-hookline-clean-card,
.without-hookline-v16-card {
  display: none !important;
}

@media (max-width: 920px) {
  .without-hookline-native {
    height: auto !important;
  }
  .without-hookline-photo {
    min-height: 280px;
  }
  .without-hookline-photo img {
    min-height: 280px;
  }
}

@media (max-width: 620px) {
  .without-hookline-native {
    gap: 13px !important;
    padding: 15px !important;
  }
  .without-hookline-heading {
    font-size: 20px;
  }
  .without-x {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 22px;
  }
  .without-hookline-steps {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .without-hookline-steps span {
    min-height: 52px;
    justify-content: flex-start;
    padding: 10px 12px;
    font-size: 15px;
    text-align: left;
  }
  .without-hookline-photo,
  .without-hookline-photo img {
    min-height: 220px;
  }
  .without-hookline-note {
    font-size: 16px !important;
    text-align: center;
  }
}

/* Reassert fully centered final CTA flow on narrow screens. */
@media (max-width: 700px) {
  .final-visual,
  .footer-app-flow,
  .footer-app-stage,
  .footer-create-hook-stage,
  .footer-finished-ad {
    text-align: center !important;
  }
  .footer-app-flow {
    width: min(100%, 330px) !important;
    margin-inline: auto !important;
    justify-items: center !important;
    align-items: center !important;
  }
  .footer-app-stage {
    width: 100% !important;
    max-width: 300px !important;
    align-items: center !important;
  }
  .footer-app-stage > span {
    align-self: center !important;
    margin-inline: auto !important;
  }
  .footer-app-arrow {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    text-align: center !important;
    transform-origin: center !important;
  }
}


/* ==========================================================================
   V20 balanced comparison + render-safe package
   ========================================================================== */

.without-hookline-v20-card {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #d8e5f1 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 16px 42px rgba(20,61,95,.06) !important;
}

.without-hookline-v20-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Ensure the comparison cards occupy the same visual height. */
.reuse-comparison {
  align-items: stretch !important;
}
.reuse-comparison > .reuse-side {
  min-height: 100% !important;
}
.with-hookline-live-card {
  min-height: 100% !important;
}

/* Hide obsolete Without Hookline variants if old rules remain in cascade. */
.without-hookline-native,
.without-hookline-clean-card,
.without-hookline-v16-card {
  display: none !important;
}

/* Keep hero proof point content centered and visually even. */
.hero-facts {
  align-items: stretch !important;
}
.hero-facts li {
  justify-content: center !important;
  text-align: center !important;
}
.hero-facts li span {
  text-align: center !important;
}

/* Bottom CTA flow: center all text and arrows, including desktop. */
.footer-app-flow {
  text-align: center !important;
}
.footer-app-stage {
  align-items: center !important;
  text-align: center !important;
}
.footer-app-stage > span,
.footer-app-stage > strong,
.footer-app-stage > small,
.footer-create-hook-stage > div {
  text-align: center !important;
}
.footer-app-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .without-hookline-v20-card {
    height: auto !important;
  }
  .without-hookline-v20-image {
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Keep the desktop New Hook arrow aimed at the left creator-hook phone. */
@media (min-width: 761px) {
  .hero-hook-note {
    left: 10px !important;
  }
  .hero-note-arrow-hook {
    left: 58px !important;
    top: 24px !important;
    transform: rotate(-3deg) !important;
  }

  .without-hookline-v20-image {
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
  }

  .reuse-comparison > .without-hookline-v20-card {
    height: max-content !important;
    min-height: 0 !important;
    align-self: start !important;
  }
}


/* ==========================================================================
   V22 media + positioning update - 2026-09-19
   ========================================================================== */

/* The wider "Same Content" annotation needs its own whitespace on desktop. */
@media (min-width: 761px) {
  .hero-demo-note {
    right: -3px !important;
    width: 136px !important;
    font-size: 21px !important;
    white-space: nowrap !important;
  }
  .hero-note-arrow-demo {
    right: 18px !important;
  }
}

/* Actual product recordings inside the three workflow cards. */
.workflow-video-shot {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: #07182d !important;
}
.workflow-video-shot video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #07182d;
}
.workflow-video-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(4, 17, 31, .72));
}
.workflow-video-shot > span {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #fff;
  background: rgba(5, 23, 41, .78);
  backdrop-filter: blur(6px);
  font-size: 14px;
  font-weight: 850;
  text-align: center;
}

/* Use the supplied full Hookline walkthrough in the comparison laptop. */
.with-hookline-laptop-screen video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  background: #07182d;
}

/* Longer label after changing Same Demo -> Same Content. */
.with-hookline-converge > span {
  min-width: 148px !important;
}

/* Hero product facts now describe the benefit rather than a file format. */
.hero-facts li span {
  max-width: 150px;
}

/* Keep example videos framed consistently even when supplied source lengths differ. */
.proof-variation-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .hero-demo-note {
    width: auto !important;
    font-size: 16px !important;
  }
  .with-hookline-converge > span {
    min-width: 126px !important;
  }
  .workflow-video-shot > span {
    left: 10px;
    right: 10px;
    bottom: 9px;
    padding: 8px 9px;
    font-size: 13px;
  }
}

/* ==========================================================================
   V23 focused landing updates
   ========================================================================== */

/* Right hero phone: show the entire supplied walkthrough without cropping. */
.hero-demo-video {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px 4px 8px !important;
  box-sizing: border-box !important;
  background: #fff !important;
}
.hero-demo-video video {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
}

/* The comparison cards represent creator choices, so keep those labels readable. */
.with-hookline-creators figcaption {
  white-space: nowrap;
}


/* ==========================================================================
   V24 focused landing fixes
   ========================================================================== */

/* Keep the three benefit rows on one line, matching the earlier layout. */
.hero-facts li span {
  max-width: none !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  .hero-facts {
    max-width: 420px !important;
  }
  .hero-facts li {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .hero-facts li span {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: 15px !important;
  }
}

/* Right hero phone: match the supplied 9:16 recording exactly.
   This shows the entire video without cropping or the excessive white padding. */
.hero-demo-card .hero-phone {
  aspect-ratio: 9 / 16 !important;
}
.hero-demo-video {
  padding: 0 !important;
  display: block !important;
  background: #fff !important;
}
.hero-demo-video video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
}

/* Use the supplied static Hookline screenshot for Same Content. */
.with-hookline-laptop-screen {
  background: #07182d !important;
}
.with-hookline-laptop-screen .with-hookline-same-content-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 3px;
  background: #07182d;
}


/* ==========================================================================
   V25 hero Same Content phone edge fix
   ========================================================================== */

/* Remove any visible white halo between the 9:16 recording and phone bezel. */
.hero-demo-card .hero-phone,
.hero-demo-video {
  background: #07111d !important;
}

.hero-demo-video {
  padding: 0 !important;
  overflow: hidden !important;
}

/* Tiny overscan covers rounding/subpixel gaps without materially cropping UI. */
.hero-demo-video video {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  bottom: -3px !important;
  left: -3px !important;
  width: calc(100% + 6px) !important;
  height: calc(100% + 6px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #07111d !important;
  transform: translateZ(0);
}

/* Let the black bezel meet the video cleanly at the rounded corners. */
.hero-demo-card .hero-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}


/* ==========================================================================
   V26 hero Same Content phone correction
   - restore original phone frame dimensions
   - zoom only the video, not the frame
   ========================================================================== */

/* Match the left hero phone exactly. */
.hero-demo-card .hero-phone {
  aspect-ratio: 9 / 17.2 !important;
}

/* Keep the viewport unchanged and only enlarge the video inside it. */
.hero-demo-video {
  padding: 0 !important;
  overflow: hidden !important;
  background: #07111d !important;
}

.hero-demo-video video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #07111d !important;
  transform: scale(1.02) translateZ(0) !important;
  transform-origin: center center !important;
}


/* ==========================================================================
   V27 — Restore hero benefit strip to exact V21 layout behavior
   ========================================================================== */

/* Desktop/tablet: 3 equal V21 columns, centered, with vertical dividers. */
.hero-facts {
  width: min(100%, 650px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 26px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  align-items: stretch !important;
}

.hero-facts li {
  min-height: 52px !important;
  width: 100% !important;
  padding: 5px 18px !important;
  border: 0 !important;
  border-right: 1px solid #d8e5f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #405267 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.hero-facts li:first-child {
  padding-left: 0 !important;
}

.hero-facts li:last-child {
  border-right: 0 !important;
  padding-right: 0 !important;
}

.hero-facts li span {
  max-width: none !important;
  white-space: normal !important;
  text-align: center !important;
  font-size: inherit !important;
}

.hero-facts svg {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 auto !important;
}

.hero-facts strong {
  color: #17283a !important;
}

/* Mobile: exact V21 stacked-row treatment. */
@media (max-width: 760px) {
  .hero-facts {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-facts li {
    min-height: 52px !important;
    justify-content: center !important;
    padding: 11px 4px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d8e5f0 !important;
    text-align: center !important;
    font-size: 16px !important;
  }

  .hero-facts li:first-child {
    padding-left: 0 !important;
  }

  .hero-facts li:last-child {
    border-bottom: 0 !important;
    padding-right: 0 !important;
  }

  .hero-facts li span {
    max-width: none !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: 16px !important;
  }
}


/* ==========================================================================
   V28 — Same Content is vertical video, so show it in a phone
   ========================================================================== */

.with-hookline-phone {
  position: relative;
  width: 172px;
  aspect-ratio: 9 / 17.2;
  margin: 0 auto;
  padding: 7px;
  overflow: hidden;
  border: 6px solid #172332;
  border-radius: 28px;
  background: #07111d;
  box-shadow: 0 14px 30px rgba(20,49,78,.17);
}

.with-hookline-phone-screen {
  position: absolute;
  inset: 7px;
  overflow: hidden;
  border-radius: 18px;
  background: #07111d;
}

.with-hookline-phone-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: #07111d;
  transform: scale(1.015);
  transform-origin: center center;
}

.with-hookline-phone-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 4;
  width: 58px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #101820;
  box-shadow: 0 1px 2px rgba(255,255,255,.06) inset;
}

/* Retire the old laptop treatment for this section only. */
.with-hookline-laptop {
  display: none !important;
}

@media (max-width: 760px) {
  .with-hookline-phone {
    width: 146px;
    border-width: 5px;
    border-radius: 24px;
    padding: 6px;
  }

  .with-hookline-phone-screen {
    inset: 6px;
    border-radius: 15px;
  }

  .with-hookline-phone-notch {
    top: 9px;
    width: 49px;
    height: 10px;
  }
}


/* ==========================================================================
   V29 — User-supplied SAME CONTENT / rest-of-ad video
   ========================================================================== */

/* Match this specific clip's tall mobile capture so the whole Hookline UI
   reads naturally inside the phone. */
.with-hookline-phone {
  width: 158px !important;
  aspect-ratio: 540 / 1222 !important;
  padding: 6px !important;
  border-width: 5px !important;
  border-radius: 27px !important;
  background: #07111d !important;
}

.with-hookline-phone-screen {
  inset: 6px !important;
  border-radius: 17px !important;
  background: #07111d !important;
}

.with-hookline-phone-screen video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.004) !important;
  transform-origin: center center !important;
  background: #07111d !important;
}

.with-hookline-phone-notch {
  top: 9px !important;
  width: 48px !important;
  height: 10px !important;
}

@media (max-width: 760px) {
  .with-hookline-phone {
    width: 136px !important;
    aspect-ratio: 540 / 1222 !important;
    padding: 5px !important;
    border-width: 4px !important;
    border-radius: 23px !important;
  }

  .with-hookline-phone-screen {
    inset: 5px !important;
    border-radius: 14px !important;
  }

  .with-hookline-phone-notch {
    top: 8px !important;
    width: 42px !important;
    height: 9px !important;
  }
}


/* ==========================================================================
   V30 — Refine With Hookline comparison hierarchy
   ========================================================================== */

/* Give the right comparison card a slightly clearer visual hierarchy. */
.with-hookline-live-card {
  gap: 9px !important;
  padding: 20px 20px 18px !important;
}

/* Creator cards are supporting choices, not the focal point. */
.with-hookline-creators {
  gap: 11px !important;
  margin-top: 2px !important;
}
.with-hookline-creators figure {
  border-radius: 12px !important;
}
.with-hookline-creators img {
  aspect-ratio: 1.28 / 1 !important;
  object-fit: cover !important;
  object-position: center 22% !important;
}
.with-hookline-creators figcaption {
  padding: 6px 4px 7px !important;
  font-size: 13px !important;
}

/* Short, clean convergence into SAME CONTENT. */
.with-hookline-converge {
  height: 66px !important;
  margin: -1px 10px 0 !important;
}
.with-hookline-converge svg {
  height: 60px !important;
}
.with-hookline-converge path,
.with-hookline-converge .arrow-tip {
  stroke-width: 3.5 !important;
}
.with-hookline-converge > span {
  bottom: -2px !important;
  min-width: 138px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
}

/* Separate SAME CONTENT from the phone with one simple direction cue. */
.same-content-down-arrow {
  display: block;
  width: 100%;
  margin: -3px auto -1px;
  color: #0788f5;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

/* Make the vertical ad body the destination/focal point. */
.with-hookline-phone {
  width: 190px !important;
  aspect-ratio: 540 / 1222 !important;
  margin: 0 auto 3px !important;
  padding: 6px !important;
  border-width: 5px !important;
  border-radius: 30px !important;
  background: #07111d !important;
  box-shadow:
    0 0 0 12px rgba(8,127,245,.055),
    0 18px 38px rgba(20,49,78,.18) !important;
}
.with-hookline-phone-screen {
  inset: 6px !important;
  border-radius: 19px !important;
}
.with-hookline-phone-screen video {
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.004) !important;
}
.with-hookline-phone-notch {
  top: 10px !important;
  width: 52px !important;
  height: 10px !important;
}

/* Tie the explanation directly to the destination visual. */
.with-hookline-live-card .reuse-bottom-note {
  margin: 5px 0 0 !important;
  text-align: center !important;
  font-size: 17px !important;
}
.with-hookline-live-card .reuse-bottom-note b {
  color: #087ff5 !important;
}

/* Keep the mobile version compact while preserving the same hierarchy. */
@media (max-width: 760px) {
  .with-hookline-live-card {
    gap: 8px !important;
    padding: 15px !important;
  }

  .with-hookline-creators {
    gap: 7px !important;
  }

  .with-hookline-creators img {
    aspect-ratio: 1.18 / 1 !important;
  }

  .with-hookline-creators figcaption {
    padding: 5px 2px 6px !important;
    font-size: 11px !important;
  }

  .with-hookline-converge {
    height: 58px !important;
    margin: -1px 0 0 !important;
  }

  .with-hookline-converge svg {
    height: 53px !important;
  }

  .with-hookline-converge > span {
    min-width: 116px !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
  }

  .same-content-down-arrow {
    margin-top: -2px !important;
    font-size: 22px !important;
  }

  .with-hookline-phone {
    width: 154px !important;
    aspect-ratio: 540 / 1222 !important;
    padding: 5px !important;
    border-width: 4px !important;
    border-radius: 25px !important;
    box-shadow:
      0 0 0 9px rgba(8,127,245,.05),
      0 14px 28px rgba(20,49,78,.16) !important;
  }

  .with-hookline-phone-screen {
    inset: 5px !important;
    border-radius: 15px !important;
  }

  .with-hookline-phone-notch {
    top: 8px !important;
    width: 43px !important;
    height: 9px !important;
  }

  .with-hookline-live-card .reuse-bottom-note {
    font-size: 15px !important;
  }
}


/* ==========================================================================
   V31 — SAME CONTENT arrow overlap fix
   ========================================================================== */

/* Give the convergence diagram enough height so the arrowheads stop above
   the pill instead of disappearing underneath it. */
.with-hookline-converge {
  position: relative !important;
  height: 76px !important;
  margin: -1px 10px 0 !important;
  overflow: visible !important;
}

.with-hookline-converge svg {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 58px !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.with-hookline-converge > span {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  z-index: 3 !important;
  transform: translateX(-50%) !important;
}

/* Keep the arrowheads fully visible above the SAME CONTENT pill. */
.with-hookline-converge path,
.with-hookline-converge .arrow-tip {
  vector-effect: non-scaling-stroke;
}

.same-content-down-arrow {
  position: relative !important;
  z-index: 2 !important;
  margin-top: -1px !important;
}

@media (max-width: 760px) {
  .with-hookline-converge {
    height: 67px !important;
    margin: -1px 0 0 !important;
  }

  .with-hookline-converge svg {
    height: 51px !important;
  }

  .with-hookline-converge > span {
    bottom: -4px !important;
  }
}

/* Give the desktop SAME CONTENT label a little more separation from the arrows. */
@media (min-width: 761px) {
  .with-hookline-converge > span {
    bottom: -4px !important;
  }
}

/* Label each creator output as a new hook using the SAME CONTENT pill style. */
.creator-new-hook-pill {
  display: block;
  width: max-content;
  min-width: 98px;
  margin: -2px auto 9px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(90deg, #087ff5, #20b8f5);
  box-shadow: 0 8px 18px rgba(8, 127, 245, .18);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
}

@media (max-width: 760px) {
  .creator-new-hook-pill {
    min-width: 82px;
    margin: -1px auto 7px;
    padding: 6px 8px;
    font-size: 9px;
  }
}