:root {
  color-scheme: light;
  --bg: #edf7f5;
  --surface: rgba(255, 255, 255, .76);
  --surface-solid: #ffffff;
  --surface-soft: #e4f1ee;
  --text: #091512;
  --muted: #52645f;
  --subtle: #879994;
  --border: #cfe0dc;
  --border-soft: rgba(4, 57, 46, .09);
  --pink: #078f73;
  --purple: #036b58;
  --orange: #0aa37f;
  --yellow: #ffd625;
  --blue: #075e50;
  --danger: #d93025;
  --ink: #07110e;
  --emerald: #078f73;
  --emerald-bright: #0bb889;
  --accent-yellow: #ffd625;
  --ig-gradient: linear-gradient(135deg, #075e50 0%, #078f73 58%, #0bb889 100%);
  --glass-shadow: 0 24px 70px rgba(5, 48, 40, .11), inset 0 1px 0 rgba(255,255,255,.88);
  --card-shadow: 0 8px 30px rgba(4, 57, 46, .07);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07110e;
  --surface: rgba(12, 30, 25, .82);
  --surface-solid: #0d1c18;
  --surface-soft: #142a24;
  --text: #f3fbf8;
  --muted: #a7bbb5;
  --subtle: #6f8881;
  --border: #274038;
  --border-soft: rgba(255, 255, 255, .09);
  --glass-shadow: 0 28px 75px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
  --card-shadow: 0 10px 34px rgba(0,0,0,.23);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, textarea, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--ink); background: var(--accent-yellow); }

.ambient-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background:
  radial-gradient(circle at 78% 11%, rgba(11,184,137,.15), transparent 27%),
  radial-gradient(circle at 60% 22%, rgba(7,143,115,.10), transparent 30%),
  radial-gradient(circle at 10% 52%, rgba(255,214,37,.065), transparent 26%),
  var(--bg); }
.grain { display: none; }
.liquid-orb { position: absolute; border-radius: 50%; filter: blur(75px); opacity: .16; }
.orb-one { width: 360px; height: 360px; top: 90px; right: -120px; background: var(--ig-gradient); }
.orb-two { width: 280px; height: 280px; top: 850px; left: -160px; background: linear-gradient(145deg, var(--yellow), var(--emerald)); }
.liquid-ring { position: absolute; width: 540px; height: 210px; top: 500px; left: 50%; border: 1px solid rgba(7,143,115,.13); border-radius: 50%; transform: translateX(-50%) rotate(-8deg); filter: blur(.2px); }

main { width: min(1480px, calc(100% - 48px)); margin: 0 auto; }
.research-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: 320px; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); background: var(--surface-solid); box-shadow: 14px 0 42px rgba(0,0,0,.04); }
.sidebar-head { padding: 23px 20px 18px; border-bottom: 1px solid var(--border); }
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.sidebar-brand { min-width: 0; }
.sidebar-brand .brand-logo { width: 39px; box-shadow: none; }
.sidebar-collapse { display: grid; width: 30px; min-width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); background: var(--surface-solid); box-shadow: none; font-size: 20px; text-align: center; }
.sidebar-collapse:hover { color: var(--emerald); border-color: rgba(7,143,115,.35); box-shadow: none; transform: none; }
.sidebar-collapse span { float: none; margin: 0; }
.sidebar-new { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 11px; color: #fff; background: var(--ig-gradient); box-shadow: 0 9px 24px rgba(7,143,115,.17); font-size: 13px; font-weight: 720; text-decoration: none; }
.sidebar-new span { font-size: 17px; font-weight: 400; line-height: 1; }
.sidebar-new strong { font-size: inherit; font-weight: inherit; }
.sidebar-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.sidebar-section-heading .step { margin-bottom: 5px; font-size: 9px; }
.sidebar-section-heading h2 { font-size: 25px; letter-spacing: -.035em; }
.history-count { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 8px; color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 700; }
.history-search { display: flex; align-items: center; gap: 8px; margin-top: 17px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--subtle); background: var(--surface-soft); }
.history-search:focus-within { border-color: rgba(7,143,115,.5); box-shadow: 0 0 0 3px rgba(7,143,115,.07); }
.history-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 12px; }
.history-search input::placeholder { color: var(--subtle); }
.sidebar-foot { padding: 16px 20px 20px; border-top: 1px solid var(--border); }
.sidebar-foot p { margin: 0 0 10px; color: var(--subtle); font-size: 10px; line-height: 1.45; }
.sidebar-foot .secondary-action { width: 100%; padding: 10px; font-size: 11px; }
.sidebar-upgrade { padding: 11px 13px 14px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-solid) 94%, var(--surface-soft)); }
.sidebar-upgrade button { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 11px; border: 1px solid rgba(7,143,115,.18); border-radius: 12px; color: var(--text); background: linear-gradient(135deg, rgba(7,143,115,.09), rgba(255,214,37,.09)); box-shadow: none; text-align: left; }
.sidebar-upgrade button:hover { border-color: rgba(7,143,115,.4); box-shadow: 0 9px 24px rgba(7,143,115,.1); transform: translateY(-1px); }
.sidebar-upgrade button > span { float: none; margin: 0; }
.sidebar-upgrade-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #fff; background: var(--emerald); font-size: 11px; }
.sidebar-upgrade button > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.sidebar-upgrade strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-upgrade small { overflow: hidden; color: var(--muted); font-size: 7px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-upgrade i { color: var(--emerald); font-size: 17px; font-style: normal; }
.sidebar-toggle { display: none; width: 36px; min-width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); color: var(--text); background: var(--surface-solid); box-shadow: none; text-align: center; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 45; width: 100%; min-width: 0; height: 100%; padding: 0; border-radius: 0; background: rgba(0,0,0,.35); box-shadow: none; }
body.workspace-mode .app-main { width: auto; max-width: none; margin: 0 32px 0 356px; }
body.workspace-mode .hero, body.workspace-mode .creator-showcase, body.workspace-mode .scope, body.workspace-mode .capabilities-section, body.workspace-mode .pricing-section, body.workspace-mode .faq-section, body.workspace-mode .enterprise-band, body.workspace-mode .landing-band, body.workspace-mode footer { display: none; }
body:not(.workspace-mode) #product { display: none; }
body.workspace-mode .ambient-stage { display: none; }
body.workspace-mode .site-nav { position: sticky; top: 0; z-index: 30; min-height: 76px; margin-top: 0; padding: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: none; backdrop-filter: blur(16px); }
body.workspace-mode .site-nav > .brand { display: none; }
body.workspace-mode .site-nav .theme-toggle { display: inline-flex; margin-left: auto; }
body.workspace-mode .landing-nav-links, body.workspace-mode .landing-nav-actions { display: none; }
body.workspace-mode .workspace { margin-top: 28px; }
body.workspace-mode.public-home-mode .research-sidebar { display: none; }
body.workspace-mode.public-home-mode .app-main { width: min(1480px, calc(100% - 48px)); max-width: 1480px; margin: 0 auto; }
body.workspace-mode.public-home-mode .site-nav { position: sticky; top: 16px; min-height: 68px; margin-top: 16px; padding: 10px 13px 10px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 16px 45px rgba(34,22,30,.09), inset 0 1px 0 rgba(255,255,255,.94); }
body.workspace-mode.public-home-mode .site-nav > .brand { display: inline-flex; margin-right: 23px; }
body.workspace-mode.public-home-mode .landing-nav-links { display: flex; }
body.workspace-mode.public-home-mode .theme-toggle { display: none; }
body.workspace-mode.public-home-mode .account-trigger { margin-left: auto; }
body.workspace-mode.public-home-mode .hero { display: flex; }
body.workspace-mode.public-home-mode .creator-showcase,
body.workspace-mode.public-home-mode .scope,
body.workspace-mode.public-home-mode .capabilities-section,
body.workspace-mode.public-home-mode .pricing-section,
body.workspace-mode.public-home-mode .faq-section { display: block; }
body.workspace-mode.public-home-mode .enterprise-band,
body.workspace-mode.public-home-mode .landing-band { display: grid; }
body.workspace-mode.public-home-mode footer { display: flex; }
body.workspace-mode.public-home-mode #product,
body.workspace-mode.public-home-mode #progress-section,
body.workspace-mode.public-home-mode #results-section { display: none; }
body.showcase-mode .hero,
body.showcase-mode .creator-showcase,
body.showcase-mode .scope,
body.showcase-mode .capabilities-section,
body.showcase-mode .pricing-section,
body.showcase-mode .faq-section,
body.showcase-mode .enterprise-band,
body.showcase-mode .landing-band,
body.showcase-mode footer { display: none; }
body.workspace-mode.showcase-mode .research-sidebar { display: none; }
body.workspace-mode.showcase-mode .app-main { width: min(1480px, calc(100% - 48px)); max-width: 1480px; margin: 0 auto; }
body.workspace-mode.showcase-mode .site-nav { position: sticky; top: 16px; min-height: 68px; margin-top: 16px; padding: 10px 13px 10px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 16px 45px rgba(34,22,30,.09), inset 0 1px 0 rgba(255,255,255,.94); }
body.workspace-mode.showcase-mode .site-nav > .brand { display: inline-flex; margin-right: 23px; }
body.workspace-mode.showcase-mode .landing-nav-links { display: flex; }
body.workspace-mode.showcase-mode .theme-toggle { display: none; }
body.workspace-mode.showcase-mode .account-trigger { margin-left: auto; }
body.workspace-mode.sidebar-collapsed .research-sidebar { width: 72px; box-shadow: 8px 0 28px rgba(0,0,0,.035); }
body.workspace-mode.sidebar-collapsed .app-main { margin-left: 104px; }
body.workspace-mode.sidebar-collapsed .sidebar-head { padding: 18px 14px; }
body.workspace-mode.sidebar-collapsed .sidebar-brand-row { display: grid; justify-items: center; margin-bottom: 15px; }
body.workspace-mode.sidebar-collapsed .sidebar-brand .brand-wordmark,
body.workspace-mode.sidebar-collapsed .history-panel,
body.workspace-mode.sidebar-collapsed .sidebar-upgrade { display: none; }
body.workspace-mode.sidebar-collapsed .sidebar-brand { margin: 0; }
body.workspace-mode.sidebar-collapsed .sidebar-brand .brand-logo { width: 42px; height: 42px; }
body.workspace-mode.sidebar-collapsed .sidebar-collapse { width: 38px; min-width: 38px; }
body.workspace-mode.sidebar-collapsed .sidebar-new { justify-content: center; width: 42px; height: 42px; padding: 0; margin: 0 auto; }
body.workspace-mode.sidebar-collapsed .sidebar-new span { font-size: 20px; }
body.workspace-mode.sidebar-collapsed .sidebar-new strong { display: none; }

body.workspace-mode.pricing-focus-mode .research-sidebar,
body.workspace-mode.pricing-focus-mode #product,
body.workspace-mode.pricing-focus-mode #progress-section,
body.workspace-mode.pricing-focus-mode #results-section { display: none; }
body.workspace-mode.pricing-focus-mode .app-main { width: min(1480px, calc(100% - 48px)); margin: 0 auto; }
body.workspace-mode.pricing-focus-mode .site-nav { position: sticky; top: 16px; min-height: 68px; margin-top: 16px; padding: 10px 13px 10px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 16px 45px rgba(34,22,30,.09), inset 0 1px 0 rgba(255,255,255,.94); }
body.workspace-mode.pricing-focus-mode .site-nav > .brand { display: inline-flex; margin-right: auto; }
body.workspace-mode.pricing-focus-mode .pricing-section { display: block; margin-top: 22px; }
.pricing-workspace-back { display: none; width: auto; min-width: 0; align-items: center; gap: 8px; margin: 0 0 30px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface-solid); box-shadow: none; font-size: 10px; }
.pricing-workspace-back span { float: none; margin: 0; }
.pricing-workspace-back:hover { color: var(--emerald); border-color: rgba(7,143,115,.38); box-shadow: none; transform: none; }
body.workspace-mode.pricing-focus-mode .pricing-workspace-back { display: inline-flex; }
.site-nav { position: sticky; top: 16px; z-index: 40; display: flex; align-items: center; gap: 12px; min-height: 68px; margin-top: 16px; padding: 10px 13px 10px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 16px 45px rgba(34,22,30,.09), inset 0 1px 0 rgba(255,255,255,.94); backdrop-filter: blur(24px) saturate(145%); }
[data-theme="dark"] .site-nav { border-color: rgba(255,255,255,.11); background: rgba(24,24,24,.78); box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); }
.brand { display: inline-flex; justify-self: start; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--ig-gradient); font-size: 12px; font-weight: 800; box-shadow: 0 6px 18px rgba(7,143,115,.22); }
.brand-logo { display: block; flex: 0 0 auto; width: 39px; height: 39px; border-radius: 11px; background: url("/static/brand/instaspy-mark-v3.png") center / contain no-repeat; box-shadow: 0 7px 18px rgba(7,143,115,.14); }
.brand-wordmark { font-family: var(--display-font); font-size: 22px; font-weight: 820; letter-spacing: -.045em; }
.brand-context { margin-left: 2px; color: var(--muted); font-size: 9px; font-weight: 750; }
.site-nav > .brand { flex: 0 0 auto; margin-right: 23px; }
.landing-nav-links { display: flex; align-items: center; gap: 28px; }
.landing-nav-links a, .nav-connect { position: relative; width: auto; min-width: 0; padding: 10px 1px; color: var(--text); background: transparent; box-shadow: none; font-size: 13px; font-weight: 610; text-decoration: none; }
.landing-nav-links a::after, .nav-connect::after { position: absolute; right: 50%; bottom: 5px; left: 50%; height: 1px; content: ""; background: var(--pink); transition: right .18s ease, left .18s ease; }
.landing-nav-links a:hover::after, .nav-connect:hover::after { right: 0; left: 0; }
.landing-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-connect { margin: 0; color: var(--muted); }
.nav-connect:hover { color: var(--text); background: transparent; box-shadow: none; transform: none; }
.nav-auth { width: auto; min-width: 0; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; box-shadow: none; font-size: 12px; font-weight: 700; text-align: center; }
.nav-auth:hover { transform: none; box-shadow: none; }
.nav-login { color: var(--text); background: var(--surface-solid); }
.nav-login:hover { border-color: var(--pink); }
.nav-signup { border-color: transparent; color: #fff; background: #171717; }
.nav-signup:hover { background: var(--ig-gradient); }
[data-theme="dark"] .nav-signup { color: #111; background: #f5f5f5; }
.theme-toggle { display: none; align-items: center; justify-content: center; gap: 7px; min-width: 72px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface-solid); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); cursor: pointer; font-size: 10px; font-weight: 700; text-align: center; }
.theme-toggle i { width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-toggle span { float: none; margin: 0; }
[data-theme="dark"] .theme-toggle i { background: currentColor; box-shadow: inset 5px 0 0 var(--surface-solid); }
.account-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 78px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface-solid); box-shadow: none; font-size: 10px; font-weight: 700; text-align: center; }
.account-trigger:hover { border-color: var(--pink); box-shadow: none; transform: none; }
.account-trigger.signed-in { border-color: rgba(7,143,115,.28); background: rgba(7,143,115,.065); }
.account-trigger.service-error { border-color: rgba(217,48,37,.32); }
.account-trigger > span { float: none; margin: 0; }
.account-avatar { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; overflow: hidden; border-radius: 50%; color: #fff; background: var(--ig-gradient); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); font-size: 8px; font-weight: 800; }
.account-avatar.large { width: 42px; height: 42px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.78), 0 8px 18px rgba(7,143,115,.18); }
.avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-initial { float: none !important; margin: 0 !important; }

.hero { min-height: 535px; display: flex; align-items: center; padding: 46px 3vw 62px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .72fr); align-items: center; gap: clamp(64px, 8vw, 135px); width: 100%; }
.eyebrow, .step { margin: 0 0 14px; color: var(--pink); font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow span { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 8px; border-radius: 50%; color: #fff; background: var(--ig-gradient); font-size: 8px; letter-spacing: 0; }
h1 { max-width: 760px; margin: 0; font-family: var(--display-font); font-size: clamp(58px, 6.4vw, 94px); font-weight: 800; line-height: .98; letter-spacing: -.06em; }
h1 em { display: inline; color: transparent; background: var(--ig-gradient); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.hero-copy { max-width: 650px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.58; letter-spacing: -.01em; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.hero-tags span { padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface); backdrop-filter: blur(12px); font-size: 10px; font-weight: 650; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.hero-primary { width: auto; min-width: 205px; padding: 14px 17px; }
.hero-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--surface); font-size: 12px; font-weight: 700; text-decoration: none; }
.hero-secondary span { color: var(--pink); }
.hero-note { margin: 11px 0 0; color: var(--subtle); font-size: 10px; }

.hero-object { position: relative; height: 465px; }
.reel-preview { position: absolute; top: 0; right: 38px; width: 350px; overflow: hidden; border: 1px solid var(--border); border-radius: 23px; background: var(--surface-solid); box-shadow: 0 28px 80px rgba(58,26,52,.17); transform: rotate(1.5deg); }
.preview-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; }
.avatar-ring { display: grid; place-items: center; width: 34px; height: 34px; padding: 2px; border-radius: 50%; background: var(--ig-gradient); }
.avatar-ring span { display: grid; place-items: center; width: 100%; height: 100%; border: 2px solid var(--surface-solid); border-radius: 50%; color: #fff; background: linear-gradient(145deg, #242424, #676767); font-size: 11px; font-weight: 800; }
.preview-top b { display: block; font-size: 10px; }
.preview-top small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.preview-top > strong { letter-spacing: 2px; font-size: 10px; }
.preview-media { position: relative; height: 326px; overflow: hidden; color: #fff; background:
  radial-gradient(circle at 76% 23%, rgba(252,175,69,.75), transparent 22%),
  radial-gradient(circle at 24% 76%, rgba(64,93,230,.8), transparent 28%),
  linear-gradient(145deg, #38116b, #b91d6a 53%, #f77737); }
.preview-media::before { content: ""; position: absolute; width: 250px; height: 250px; top: 60px; left: 45px; border: 1px solid rgba(255,255,255,.28); border-radius: 46% 54% 62% 38% / 57% 43% 57% 43%; background: rgba(255,255,255,.08); box-shadow: inset 20px 20px 50px rgba(255,255,255,.12); backdrop-filter: blur(12px); transform: rotate(20deg); }
.reels-label { position: absolute; top: 13px; left: 13px; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.preview-hook { position: absolute; inset: auto 18px 38px; padding: 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 15px; background: rgba(0,0,0,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(15px); }
.preview-hook small { display: block; margin-bottom: 7px; color: rgba(255,255,255,.68); font-size: 7px; font-weight: 750; letter-spacing: .1em; }
.preview-hook b { font-size: 17px; line-height: 1.25; letter-spacing: -.025em; }
.preview-timeline { position: absolute; right: 14px; bottom: 15px; left: 14px; height: 2px; border-radius: 99px; background: rgba(255,255,255,.38); }
.preview-timeline i { display: block; width: 42%; height: 100%; border-radius: inherit; background: #fff; }
.preview-actions { display: flex; align-items: center; gap: 14px; padding: 11px 14px 7px; font-size: 23px; line-height: 1; }
.preview-actions .save-icon { margin-left: auto; font-size: 19px; }
.preview-caption { display: grid; gap: 5px; padding: 0 14px 15px; font-size: 9px; line-height: 1.4; }
.preview-caption > b { font-size: 9px; }
.preview-caption span { color: var(--muted); }
.preview-caption strong { margin-right: 4px; color: var(--text); }
.floating-insight { position: absolute; z-index: 3; border: 1px solid rgba(255,255,255,.7); border-radius: 16px; background: rgba(255,255,255,.64); box-shadow: 0 18px 50px rgba(71,40,61,.16), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter: blur(20px) saturate(130%); }
[data-theme="dark"] .floating-insight { border-color: rgba(255,255,255,.14); background: rgba(26,26,26,.72); box-shadow: 0 20px 55px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.09); }
.insight-score { left: -12px; bottom: 92px; padding: 15px 17px; transform: rotate(-4deg); }
.insight-score small, .insight-pattern small { display: block; color: var(--pink); font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.insight-score b { font-size: 30px; letter-spacing: -.05em; }
.insight-score span { color: var(--muted); font-size: 8px; }
.insight-pattern { right: -23px; bottom: 32px; display: flex; align-items: center; gap: 10px; padding: 13px 15px; transform: rotate(3deg); }
.insight-pattern > i { width: 30px; height: 30px; border-radius: 9px; background: var(--ig-gradient); box-shadow: 0 5px 16px rgba(7,143,115,.22); }
.insight-pattern b { display: block; margin-top: 3px; font-size: 11px; }

.workspace, .progress-panel, .results, .scope { position: relative; margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-solid); box-shadow: var(--card-shadow); }
.workspace { padding: clamp(30px, 3.2vw, 48px); }
.workspace-composer { display: grid; min-height: calc(100vh - 112px); place-items: center; padding: clamp(42px, 7vw, 92px); overflow: hidden; border: 0; border-radius: 32px; background:
  radial-gradient(ellipse 76% 58% at 50% -2%, #fff 0, rgba(255,255,255,.98) 38%, rgba(247,252,250,.88) 61%, transparent 78%),
  radial-gradient(ellipse 64% 52% at 8% 96%, rgba(238,225,73,.72) 0, rgba(170,233,146,.42) 42%, transparent 72%),
  radial-gradient(ellipse 68% 60% at 94% 90%, rgba(21,191,149,.8) 0, rgba(7,126,101,.58) 45%, transparent 76%),
  linear-gradient(180deg, #fff 0%, #f8fcfa 38%, #d9f5e9 59%, #68d4aa 82%, #078f73 100%);
  box-shadow: 0 26px 70px rgba(5,83,66,.18); isolation: isolate; }
.workspace-composer::before { position: absolute; z-index: -1; width: 680px; height: 680px; right: -310px; bottom: -430px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; content: ""; box-shadow: 0 0 0 74px rgba(255,255,255,.055), 0 0 0 148px rgba(255,255,255,.035); }
.workspace-composer::after { position: absolute; z-index: -1; width: 680px; height: 460px; top: -250px; left: 50%; border-radius: 50%; content: ""; background: rgba(255,255,255,.82); filter: blur(80px); transform: translateX(-50%); }
.composer-shell { width: min(760px, 100%); text-align: center; }
.composer-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; color: #075e50; background: rgba(255,255,255,.54); box-shadow: inset 0 1px rgba(255,255,255,.75); backdrop-filter: blur(15px); font-size: 9px; font-weight: 790; letter-spacing: .03em; }
.composer-kicker span { color: #078f73; }
.workspace-composer h2 { max-width: 720px; margin: 0 auto; color: #061713; font-size: clamp(38px, 4.2vw, 60px); line-height: .98; text-wrap: balance; }
.workspace-composer h2 span { color: #06735e; }
.reel-composer { margin-top: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.84); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 28px 80px rgba(2,61,48,.23), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(24px); text-align: left; }
.reel-composer textarea { min-height: 128px; padding: 24px 26px 12px; resize: vertical; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-family: var(--font); font-size: 14px; line-height: 1.65; }
.reel-composer textarea:focus { background: transparent; box-shadow: none; }
.reel-composer textarea::placeholder { color: #8a9995; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px 14px 20px; }
.composer-status { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.composer-private, .workspace-composer .counter, .workspace-composer .credit-balance { padding: 7px 9px; border: 1px solid rgba(7,143,115,.14); border-radius: 999px; color: #49635c; background: #eff8f5; font-size: 8px; font-weight: 720; }
.workspace-composer #start { width: auto; min-width: 158px; padding: 13px 16px; border-radius: 999px; color: #fff; background: linear-gradient(115deg, #075e50, #0bb889); box-shadow: 0 12px 28px rgba(7,143,115,.22); }
.workspace-composer #start:hover { box-shadow: 0 16px 34px rgba(7,143,115,.3); }
.workspace-composer .form-error { min-height: 18px; margin: 11px 0 0; color: #6e291f; font-size: 10px; font-weight: 650; text-align: center; }
[data-theme="dark"] .workspace-composer { background: radial-gradient(circle at 50% -8%, rgba(44,97,78,.72), transparent 43%), radial-gradient(circle at 10% 88%, rgba(255,214,37,.3), transparent 42%), radial-gradient(circle at 88% 72%, rgba(11,184,137,.54), transparent 55%), linear-gradient(145deg, #102b22, #075e50 58%, #043e33); }
[data-theme="dark"] .workspace-composer h2 { color: #f4fff9; }
[data-theme="dark"] .workspace-composer h2 span { color: #8ff2d2; }
[data-theme="dark"] .composer-kicker { color: #b9f4df; background: rgba(4,38,30,.46); }
[data-theme="dark"] .reel-composer { border-color: rgba(255,255,255,.12); background: rgba(13,28,24,.93); }
[data-theme="dark"] .composer-private, [data-theme="dark"] .workspace-composer .counter, [data-theme="dark"] .workspace-composer .credit-balance { color: #b8cec7; background: #142a24; }
.history-panel { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 22px 18px 18px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 15px; }
.section-heading.compact { align-items: center; }
h2 { margin: 0; font-family: var(--display-font); font-size: clamp(34px, 3.4vw, 48px); font-weight: 760; line-height: 1.05; letter-spacing: -.045em; }
h3 { margin: 7px 0 12px; font-family: var(--display-font); font-size: clamp(27px, 3vw, 36px); font-weight: 760; letter-spacing: -.04em; }
h4 { margin: 0 0 12px; color: var(--text); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.section-intro { max-width: 720px; margin: 0 0 23px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.counter, .pill { padding: 8px 12px; border: 1px solid rgba(7,143,115,.24); border-radius: 999px; color: var(--pink); background: rgba(7,143,115,.065); font-size: 11px; font-weight: 700; }
textarea { width: 100%; min-height: 205px; resize: vertical; padding: 22px; border: 1px solid var(--border); border-radius: 17px; outline: none; color: var(--text); background: rgba(255,255,255,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); font-family: var(--mono); font-size: 13px; line-height: 1.7; transition: border-color .2s, box-shadow .2s, background .2s; }
[data-theme="dark"] textarea { background: rgba(0,0,0,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
textarea:focus { border-color: var(--pink); background: var(--surface-solid); box-shadow: 0 0 0 3px rgba(7,143,115,.09); }
textarea::placeholder { color: var(--subtle); }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 17px; }
.privacy-note { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.privacy-note b { display: block; margin-bottom: 2px; color: var(--text); font-size: 11px; }
.privacy-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 11px; color: var(--pink); background: var(--surface-solid); font-size: 16px; }
button { min-width: 178px; border: 0; border-radius: 11px; padding: 15px 17px; cursor: pointer; color: #fff; background: var(--ig-gradient); box-shadow: 0 10px 24px rgba(7,143,115,.2); font-size: 12px; font-weight: 700; text-align: left; transition: transform .15s, box-shadow .15s, opacity .15s; }
button:hover { transform: translateY(-1px); box-shadow: 0 13px 30px rgba(7,143,115,.27); }
button:disabled { cursor: wait; opacity: .55; transform: none; }
button span { float: right; margin-left: 24px; }
.theme-toggle:hover { transform: none; border-color: var(--subtle); box-shadow: none; }
.secondary-action { min-width: 0; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface-solid); box-shadow: none; font-size: 10px; text-align: center; }
.secondary-action:hover { border-color: var(--pink); box-shadow: none; }
.form-error { min-height: 1.2em; margin: 11px 0 0; color: var(--danger); font-size: 11px; }
.pipeline-strip { display: flex; align-items: center; gap: 11px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--border); }
.pipeline-strip span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
.pipeline-strip b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: var(--ig-gradient); font-size: 7px; }
.pipeline-strip i { width: 100%; height: 1px; background: var(--border); }

.progress-panel, .results { padding: clamp(24px, 3.5vw, 40px); }
.history-status { min-height: 18px; margin: 11px 2px 9px; color: var(--muted); font-size: 10px; }
.history-list { display: grid; min-height: 0; grid-auto-rows: max-content; align-content: start; gap: 11px; padding: 3px 5px 18px 1px; overflow-y: auto; overscroll-behavior: contain; perspective: 900px; scrollbar-color: var(--border) transparent; scrollbar-width: thin; }
.history-card { position: relative; display: grid; min-height: 78px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 14px 11px 14px 13px; overflow: hidden; border: 1px solid rgba(7,143,115,.13); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,248,244,.9)); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 8px 18px rgba(3,69,55,.07), 0 2px 4px rgba(3,69,55,.06); transform: translateZ(0); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.history-card::before { position: absolute; width: 4px; height: 58%; left: 0; top: 21%; border-radius: 0 5px 5px 0; content: ""; background: linear-gradient(#55d8b4, #078f73); opacity: .32; transition: height .2s ease, opacity .2s ease; }
.history-card:hover { border-color: rgba(7,143,115,.3); box-shadow: 0 1px 0 rgba(255,255,255,.98) inset, 0 15px 28px rgba(3,69,55,.12), 0 4px 7px rgba(3,69,55,.07); transform: translateY(-2px) rotateX(.7deg); }
.history-card.is-active { border-color: rgba(7,143,115,.46); background: linear-gradient(145deg, #f7fffc, #dcf5eb); box-shadow: 0 1px 0 #fff inset, 0 13px 27px rgba(7,143,115,.15), 0 0 0 1px rgba(7,143,115,.05); }
.history-card.is-active::before { height: 76%; top: 12%; opacity: 1; }
[data-theme="dark"] .history-card { border-color: rgba(143,242,210,.13); background: linear-gradient(145deg, #182c26, #10231e); box-shadow: 0 1px 0 rgba(255,255,255,.055) inset, 0 10px 22px rgba(0,0,0,.23); }
[data-theme="dark"] .history-card.is-active { border-color: rgba(143,242,210,.35); background: linear-gradient(145deg, #193a31, #112a23); }
.history-card-main { min-width: 0; }
.history-card-main[role="button"] { cursor: pointer; outline: none; }
.history-card-main[role="button"]:focus-visible { border-radius: 7px; box-shadow: 0 0 0 3px rgba(7,143,115,.16); }
.history-title { display: block; overflow: hidden; cursor: text; font-size: 13px; font-weight: 720; letter-spacing: -.012em; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.history-title-input { width: 100%; padding: 5px 7px; border: 1px solid var(--pink); border-radius: 7px; outline: 0; color: var(--text); background: var(--surface-solid); font: inherit; font-size: 12px; font-weight: 700; }
.history-card-main > span { display: block; margin-top: 5px; color: var(--subtle); font-size: 10px; line-height: 1.45; }
.history-card-main > p { display: none; }
.history-card-side { display: flex; align-items: center; gap: 3px; }
.history-pill { padding: 6px 9px; border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 9px; font-weight: 750; text-transform: capitalize; }
.history-pill.status-completed { color: #168547; background: rgba(32,183,89,.10); }
[data-theme="dark"] .history-pill.status-completed { color: #6bdd9a; }
.history-open, .history-rename { display: grid; width: 30px; min-width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: transparent; box-shadow: none; font-size: 12px; text-align: center; }
.history-rename.is-editing { color: #fff; background: var(--ig-gradient); }
.history-open:hover { border-color: var(--blue); box-shadow: none; }
.history-empty { display: grid; gap: 6px; place-items: center; padding: 28px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); text-align: center; }
.history-empty strong { color: var(--text); font-size: 13px; }
.history-empty span { font-size: 10px; }
.progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }
.progress-bar { height: 100%; width: 0; border-radius: inherit; background: var(--ig-gradient); transition: width .35s ease; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.summary-grid div { padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-solid); }
.summary-grid strong { display: block; font-size: 25px; font-weight: 720; letter-spacing: -.04em; }
.summary-grid span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.secondary-button { display: inline-flex; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface-solid); text-decoration: none; font-size: 10px; font-weight: 700; }
.secondary-button.export-primary { border-color: transparent; color: #fff; background: var(--ig-gradient); box-shadow: 0 8px 20px rgba(7,143,115,.18); }

.result-list { display: grid; gap: 16px; }
.public-showcase { position: relative; margin: 28px 0 70px; padding: clamp(26px, 4vw, 56px); border: 1px solid rgba(7,143,115,.18); border-radius: 34px; background:
  radial-gradient(circle at 8% 0%, rgba(11,184,137,.12), transparent 30%),
  linear-gradient(155deg, rgba(255,255,255,.96), rgba(237,248,244,.92));
  box-shadow: 0 28px 90px rgba(4,57,46,.11), inset 0 1px 0 rgba(255,255,255,.95); }
[data-theme="dark"] .public-showcase { background: radial-gradient(circle at 8% 0%, rgba(11,184,137,.15), transparent 30%), #10231e; }
.public-showcase-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; padding-bottom: 25px; border-bottom: 1px solid var(--border); }
.public-showcase-heading > div { max-width: 780px; }
.public-showcase-heading h2 { margin-top: 8px; font-size: clamp(39px, 4.6vw, 68px); }
.public-showcase-heading p:last-child { max-width: 700px; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.showcase-close { width: auto; min-width: 0; padding: 12px 15px; border: 1px solid var(--border); color: var(--text); background: var(--surface-solid); box-shadow: none; text-align: center; }
.showcase-close:hover { border-color: var(--emerald); box-shadow: none; transform: none; }
.showcase-index { position: sticky; z-index: 16; top: 96px; display: flex; gap: 8px; margin: 22px 0 10px; padding: 10px; overflow-x: auto; border: 1px solid rgba(7,143,115,.16); border-radius: 16px; background: color-mix(in srgb, var(--surface-solid) 90%, transparent); box-shadow: 0 12px 35px rgba(4,57,46,.1); backdrop-filter: blur(18px) saturate(130%); scrollbar-width: thin; }
.showcase-index a { display: grid; grid-template-columns: 36px minmax(120px, 1fr); flex: 0 0 auto; align-items: center; gap: 9px; max-width: 220px; padding: 6px 9px 6px 6px; border-radius: 11px; color: var(--text); text-decoration: none; transition: background .16s ease, transform .16s ease; }
.showcase-index a:hover { background: var(--surface-soft); transform: translateY(-1px); }
.showcase-index img { width: 36px; height: 48px; object-fit: cover; border-radius: 8px; background: #07110e; }
.showcase-index a > span { display: grid; gap: 3px; min-width: 0; }
.showcase-index strong, .showcase-index small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-index strong { font-size: 10px; }
.showcase-index small { color: var(--muted); font-size: 8px; text-transform: capitalize; }
.showcase-status { min-height: 18px; margin: 13px 4px 22px; color: var(--muted); font-size: 10px; font-weight: 650; }
.showcase-list { display: grid; gap: 22px; }
.showcase-report-card { position: relative; scroll-margin-top: 176px; content-visibility: auto; contain-intrinsic-size: 980px; }
.showcase-report-number { position: absolute; z-index: 3; top: 13px; left: 13px; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; color: #fff; background: rgba(0,34,27,.68); box-shadow: 0 7px 18px rgba(0,0,0,.22); backdrop-filter: blur(10px); font-size: 9px; font-weight: 800; }
.showcase-report-card .output-links { display: none; }
.showcase-report-card .metadata { margin-bottom: 3px; }
.showcase-conversion { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 28px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #022c24, #078f73); box-shadow: 0 24px 60px rgba(4,57,46,.22); }
.showcase-conversion > div { display: grid; gap: 6px; }
.showcase-conversion span { color: rgba(255,255,255,.66); font-size: 10px; font-weight: 720; text-transform: uppercase; letter-spacing: .06em; }
.showcase-conversion strong { max-width: 560px; font-size: clamp(23px, 3vw, 39px); line-height: 1.07; letter-spacing: -.035em; }
.showcase-conversion .hero-primary { flex: 0 0 auto; margin: 0; background: #fff; color: #05251f; }
.batch-report { margin-bottom: 20px; padding: clamp(23px, 3.5vw, 38px); border: 1px solid rgba(7,143,115,.21); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(7,143,115,.085), rgba(11,184,137,.06) 48%, rgba(255,214,37,.055)); }
.report-eyebrow { color: var(--pink); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.batch-report > p { max-width: 880px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.formula { display: grid; gap: 6px; margin: 20px 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.formula span { color: var(--pink); font-size: 8px; font-weight: 750; }
.formula strong { font-size: 16px; line-height: 1.4; }
.batch-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.batch-columns > div { padding: 18px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-solid); }
.batch-columns ul, .detail-copy ul { margin: 0; padding-left: 17px; }
.batch-columns li { margin-bottom: 12px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.batch-columns li:last-child { margin-bottom: 0; }
.batch-columns li strong, .batch-columns li span, .batch-columns li a { display: block; }
.batch-columns li strong, .batch-columns li a { margin-bottom: 3px; color: var(--text); font-weight: 700; text-decoration: none; }
.batch-report details { margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--border); }
.batch-report summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.detail-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.detail-copy strong { color: var(--text); }

.result-card { display: grid; grid-template-columns: minmax(330px, 390px) minmax(0, 1fr); align-items: start; min-height: 270px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-solid); box-shadow: var(--card-shadow); }
.result-card { content-visibility: auto; contain-intrinsic-size: 820px; }
.media-column { position: sticky; top: 94px; align-self: start; min-height: 0; background: transparent; }
.video-shell { position: relative; width: 100%; max-height: calc(100vh - 126px); overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; color: #fff; background: #0b0b0e; box-shadow: 0 18px 45px rgba(0,0,0,.19); }
.video-shell.is-landscape { aspect-ratio: 16 / 10; }
.media-column video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b0b0e; cursor: pointer; }
.media-fallback { position: absolute; inset: 0; display: none; place-items: center; color: #aaa; font-size: 12px; }
.video-controls { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 34px auto minmax(70px, 1fr) auto 32px 32px; align-items: center; gap: 8px; padding: 34px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,.84)); opacity: .92; transition: opacity .16s ease; }
.video-shell:hover .video-controls, .video-shell:focus-within .video-controls, .video-shell:not(.is-playing) .video-controls { opacity: 1; }
.video-control { display: grid; width: 32px; min-width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #fff; background: rgba(255,255,255,.10); box-shadow: none; font-size: 12px; text-align: center; }
.video-control:hover { background: rgba(255,255,255,.18); box-shadow: none; transform: none; }
.video-time { float: none !important; margin: 0 !important; color: rgba(255,255,255,.86); font-variant-numeric: tabular-nums; font-size: 10px; }
.video-progress { width: 100%; height: 4px; margin: 0; cursor: pointer; appearance: none; border-radius: 999px; outline: 0; background: linear-gradient(90deg, var(--emerald-bright) var(--video-progress, 0%), rgba(255,255,255,.28) var(--video-progress, 0%)); }
.video-progress::-webkit-slider-thumb { width: 12px; height: 12px; appearance: none; border: 2px solid #fff; border-radius: 50%; background: var(--accent-yellow); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.video-progress::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--accent-yellow); }
.video-shell.moment-selected { animation: moment-focus .8s ease; }
@keyframes moment-focus { 0%,100% { box-shadow: 0 18px 45px rgba(0,0,0,.19); } 38% { box-shadow: 0 0 0 4px rgba(7,143,115,.22), 0 22px 55px rgba(7,143,115,.26); } }
.video-seek-hint { margin: 10px 6px 0; color: var(--subtle); font-size: 10px; line-height: 1.45; }
.result-content { display: flex; flex-direction: column; min-width: 0; padding: 7px 8px 22px 28px; }
.result-topline { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.creator { font-size: 14px; font-weight: 750; }
.verified { display: none; margin-left: 4px; color: var(--blue); }
.source-link { color: var(--blue); font-size: 11px; font-weight: 680; text-decoration: none; }
.caption { display: -webkit-box; overflow: hidden; margin: 22px 0; color: var(--muted); font-size: 15px; line-height: 1.68; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: auto 0 0; }
.metrics div { padding: 12px; border-radius: 10px; background: var(--surface-soft); }
.metrics dt { color: var(--muted); font-size: 10px; font-weight: 650; }
.metrics dd { margin: 6px 0 0; font-size: 19px; font-weight: 740; }
.metadata { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; color: var(--subtle); font-family: var(--mono); font-size: 10px; line-height: 1.5; }
.output-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.output-links a { display: inline-flex; padding: 8px 10px; border-radius: 8px; color: var(--blue); background: rgba(7,143,115,.07); font-size: 10px; font-weight: 700; text-decoration: none; }
.output-links a[hidden] { display: none; }
.processing-state { color: var(--subtle); font-size: 10px; }

.visual-report { margin-top: 22px; padding: 22px; border: 1px solid rgba(7,143,115,.2); border-radius: 14px; background: linear-gradient(145deg, rgba(7,143,115,.055), rgba(255,214,37,.025)); }
.vision-summary { margin: 0 0 17px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.vision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vision-block { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.vision-block > span, .visual-list-grid span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.vision-block strong { display: block; overflow-wrap: anywhere; color: var(--blue); font-size: 13px; line-height: 1.45; }
.visual-hook-block strong { color: var(--pink); }
.vision-block p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.68; }
.visual-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.visual-list-grid > div { padding: 13px; border-radius: 11px; background: var(--surface-soft); }
.visual-list-grid ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.timeline-section, .strategy-section { margin-top: 15px; }
.timeline-section > span, .strategy-section > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.visual-timeline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.visual-timeline article, .strategy-grid article { padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.visual-timeline-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.visual-timeline-heading strong { color: var(--text); font-size: 13px; }
.timestamp-seek { display: inline; min-width: 0; padding: 0; border: 0; border-radius: 4px; color: var(--blue); background: transparent; box-shadow: none; font: inherit; font-weight: 760; text-align: left; text-decoration: underline; text-decoration-color: rgba(7,143,115,.28); text-underline-offset: 3px; }
.timestamp-seek:hover { color: var(--pink); background: transparent; box-shadow: none; transform: none; text-decoration-color: currentColor; }
.visual-timeline p, .strategy-grid p, .strategy-verdict p, .strategy-formula p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.68; }
.visual-timeline small { display: block; margin-top: 7px; color: var(--subtle); font-size: 11px; line-height: 1.55; }
.vision-limit { margin: 12px 0 0; color: var(--subtle); font-size: 11px; line-height: 1.55; }

.content-report { margin-top: 19px; padding-top: 18px; border-top: 1px solid var(--border); }
.analysis-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; color: var(--pink); font-size: 11px; font-weight: 780; letter-spacing: .02em; }
.analysis-engine { padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
.analysis-summary { margin: 0 0 17px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.analysis-block { padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.analysis-block > span, .psychology-section > span, .improvement-section > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.analysis-block blockquote { margin: 0 0 10px; padding-left: 11px; border-left: 3px solid var(--pink); font-size: 14px; font-weight: 650; line-height: 1.4; }
.analysis-block p { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.68; }
.analysis-block .hook-type, .analysis-block .cta-type { color: var(--text); font-weight: 700; }
.strategy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.strategy-grid strong, .strategy-verdict strong, .strategy-formula strong { color: var(--purple); font-size: 13px; }
.strategy-verdict, .strategy-formula { margin-top: 8px; padding: 14px; border-radius: 11px; background: var(--surface-soft); }
.strategy-verdict { border-left: 3px solid var(--pink); }
.psychology-section, .improvement-section { margin-top: 15px; }
.psychology-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.psychology-list article { padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); backdrop-filter: blur(10px); }
.psychology-list strong { display: block; color: var(--purple); font-size: 13px; }
[data-theme="dark"] .psychology-list strong { color: #c88af0; }
.psychology-list p { margin: 7px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.psychology-list small { color: var(--subtle); font-size: 11px; line-height: 1.55; }
.improvement-list { margin: 0; padding: 16px 20px 16px 34px; border-radius: 11px; color: var(--muted); background: rgba(255,214,37,.10); font-size: 13px; line-height: 1.65; }
.transcript-details { position: relative; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.transcript-details summary { padding-right: 72px; cursor: pointer; color: var(--blue); font-size: 13px; font-weight: 720; }
.copy-transcript { position: absolute; top: 8px; right: 9px; width: auto; min-width: 56px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: var(--surface-solid); box-shadow: none; font-size: 9px; text-align: center; }
.copy-transcript:hover { color: var(--text); border-color: var(--pink); box-shadow: none; transform: none; }
.timestamped-transcript { max-height: 380px; overflow: auto; margin: 14px 0 0; white-space: pre-wrap; color: var(--muted); font-family: var(--mono); font-size: 13px; line-height: 1.82; }
.analysis-limit, .analysis-unavailable, .vision-limit { margin: 13px 0 0; color: var(--subtle); font-size: 11px; line-height: 1.55; }
.failure-card { padding: 20px; border: 1px solid rgba(217,48,37,.25); border-radius: 14px; background: rgba(217,48,37,.055); }
.failure-card strong { display: block; margin-bottom: 7px; color: var(--danger); }
.failure-card p { margin: 0; color: var(--muted); font-size: 11px; }
.failure-card code { display: block; margin-top: 10px; overflow-wrap: anywhere; color: var(--subtle); }
.failure-card small { display: block; margin-top: 8px; color: var(--subtle); }
.retry-card { padding: 20px; border: 1px solid rgba(245,158,11,.3); border-radius: 14px; background: rgba(245,158,11,.07); }
.retry-card strong { display: block; margin-bottom: 7px; color: #b45309; }
.retry-card p { margin: 0; color: var(--muted); font-size: 11px; }
.retry-card code { display: block; margin-top: 10px; overflow-wrap: anywhere; color: var(--subtle); }

.scope { display: grid; grid-template-columns: .9fr 1.5fr; gap: 60px; margin-top: 90px; padding: clamp(25px, 4vw, 44px); border: 1px solid var(--border); border-radius: 30px; background: var(--surface-solid); box-shadow: var(--card-shadow); }
.landing-stack-card { scroll-margin-top: 110px; }
.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.scope-grid > div { padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-solid); }
.scope-grid b { display: block; margin-bottom: 28px; color: var(--pink); font-size: 8px; }
.scope-grid span { font-size: 13px; font-weight: 750; }
.scope-grid p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
#product, #method, #pricing, #enterprise { scroll-margin-top: 108px; }
.landing-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 50px; margin-top: 22px; padding: clamp(28px, 4vw, 50px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-solid); box-shadow: var(--card-shadow); }
.landing-band > div { max-width: 780px; }
.landing-band h2 { max-width: 720px; }
.landing-band p:not(.step) { max-width: 760px; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.pricing-band { background: linear-gradient(135deg, color-mix(in srgb, var(--surface-solid) 92%, var(--blue)), color-mix(in srgb, var(--surface-solid) 90%, var(--pink))); }
.enterprise-band { position: relative; color: #fff; background: linear-gradient(125deg, #07110e, #0b241d 57%, #075e50); }
.enterprise-band::after { position: absolute; width: 330px; height: 330px; top: -210px; right: 7%; border-radius: 50%; content: ""; background: var(--ig-gradient); filter: blur(65px); opacity: .5; pointer-events: none; }
.enterprise-band > * { position: relative; z-index: 1; }
.enterprise-band .step { color: var(--accent-yellow); }
.enterprise-band p:not(.step) { color: rgba(255,255,255,.68); }
.band-action { width: auto; min-width: 220px; }
.email-action { display: inline-flex; align-items: center; gap: 14px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; color: #fff; background: rgba(255,255,255,.09); backdrop-filter: blur(16px); font-size: 13px; font-weight: 720; text-decoration: none; }
.email-action:hover { border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.14); }
.email-action span { color: var(--accent-yellow); }
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 26px 3px 36px; border-top: 1px solid var(--border); color: var(--subtle); font-size: 9px; font-weight: 650; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--pink); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }

.legal-main { width: min(980px, calc(100% - 32px)); padding-bottom: 64px; }
.legal-nav { position: relative; top: auto; margin-bottom: 22px; }
.legal-nav .legal-back { margin-left: auto; padding: 10px 15px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--surface-solid); font-size: 11px; font-weight: 720; text-decoration: none; }
.legal-nav .legal-back:hover { border-color: var(--emerald); }
.legal-hero { position: relative; overflow: hidden; padding: clamp(42px, 8vw, 82px); border: 1px solid var(--border); border-radius: 32px; background: color-mix(in srgb, var(--surface-solid) 94%, var(--surface-soft)); box-shadow: var(--card-shadow); }
.legal-hero::after { position: absolute; width: 280px; height: 280px; top: -170px; right: -80px; border-radius: 50%; content: ""; background: var(--emerald-bright); filter: blur(75px); opacity: .16; pointer-events: none; }
.legal-hero h1 { max-width: 760px; margin-top: 12px; font-size: clamp(45px, 7vw, 75px); line-height: .96; }
.legal-hero > p:last-child { max-width: 690px; margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 22px; }
.legal-summary, .legal-content { border: 1px solid var(--border); border-radius: 24px; background: var(--surface-solid); box-shadow: var(--card-shadow); }
.legal-summary { position: sticky; top: 20px; padding: 22px; }
.legal-summary strong { display: block; font-size: 12px; }
.legal-summary p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.legal-summary a { display: block; margin-top: 18px; color: var(--emerald); font-size: 10px; font-weight: 750; text-decoration: none; }
.legal-content { padding: clamp(28px, 5vw, 54px); }
.legal-content section + section { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--border); }
.legal-content h2 { font-size: clamp(25px, 4vw, 35px); line-height: 1.05; }
.legal-content h3 { margin: 24px 0 0; font-size: 15px; }
.legal-content p, .legal-content li { color: var(--muted); font-size: 13px; line-height: 1.75; }
.legal-content p { margin: 13px 0 0; }
.legal-content ul { display: grid; gap: 7px; margin: 14px 0 0; padding-left: 20px; }
.legal-content a { color: var(--emerald); font-weight: 700; }
.legal-callout { padding: 18px; border: 1px solid rgba(7,143,115,.22); border-radius: 16px; background: rgba(7,143,115,.06); }
.legal-contact-card { display: grid; gap: 11px; padding: 22px 24px; border-radius: 18px; color: #fff; background: var(--ink); }
.legal-contact-card strong { font-size: 16px; }
.legal-contact-card span { color: rgba(255,255,255,.64); font-size: 11px; }
.legal-contact-card a { width: fit-content; max-width: 100%; margin-top: 2px; overflow-wrap: anywhere; color: #8eefd2; }
.seo-nav-links { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.seo-nav-links a { position: relative; padding: 8px 0; color: var(--muted); font-size: 10px; font-weight: 700; text-decoration: none; }
.seo-nav-links a:hover, .seo-nav-links a[aria-current="page"] { color: var(--emerald); }
.seo-hero { display: grid; }
.product-seo-hero { grid-template-columns: minmax(0,1.08fr) minmax(310px,.72fr); gap: clamp(32px,5vw,72px); align-items: center; background: radial-gradient(circle at 90% 10%, rgba(16,184,137,.14), transparent 32%), var(--surface-solid); }
.product-proof { display: grid; gap: 13px; padding: 18px; border: 1px solid rgba(7,143,115,.22); border-radius: 22px; background: linear-gradient(145deg,#f8fffc,#e7f6f1); box-shadow: 0 25px 55px rgba(4,57,46,.12); transform: rotate(1.4deg); }
.product-proof-top { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--emerald); font-size:8px; font-weight:800; letter-spacing:.08em; }
.product-proof-top b { padding:6px 8px; border-radius:999px; color:#075e50; background:#d6f6eb; letter-spacing:0; }
.product-proof-hook { display:grid; gap:9px; padding:18px; border-radius:15px; color:#fff; background:linear-gradient(135deg,#06261d,#078f73); }
.product-proof-hook small { color:#8ee8cd; font-size:8px; font-weight:800; }
.product-proof-hook strong { font-size:19px; line-height:1.2; }
.product-proof-hook i { height:5px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.16); }
.product-proof-hook i span { display:block; width:87%; height:100%; background:linear-gradient(90deg,#75e2c0,#f5d832); }
.product-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.product-proof-grid span { display:grid; gap:4px; padding:11px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.product-proof-grid small { color:var(--subtle); font-size:8px; }
.product-proof-grid b { font-size:15px; }
.seo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.seo-actions .hero-primary, .seo-actions .secondary-button { display: inline-flex; width: auto; min-width: 190px; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 14px 18px; border-radius: 13px; text-decoration: none; }
.seo-actions .secondary-button { justify-content: center; }
.seo-content { margin-top: 22px; }
.seo-feature-grid, .seo-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.seo-feature { display: grid; align-content: start; gap: 7px; padding: 21px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--surface-solid) 94%, var(--surface-soft)); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.seo-feature:hover { border-color:rgba(7,143,115,.38); box-shadow:0 18px 38px rgba(4,57,46,.09); transform:translateY(-3px); }
.seo-feature > span { color: var(--emerald); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.seo-feature > strong { font-size: 17px; line-height: 1.2; }
.seo-plan-grid .seo-feature > strong { font-size: 25px; }
.seo-plan-grid .seo-feature > strong small { color: var(--muted); font-size: 10px; font-weight: 600; }
.seo-feature > p { margin: 0; font-size: 11px; line-height: 1.65; }
.seo-feature > a { display:flex; align-items:center; justify-content:space-between; margin-top:10px; color:var(--emerald); font-size:10px; font-weight:750; text-decoration:none; }
.seo-featured { border-color: rgba(7,143,115,.45); background: rgba(7,143,115,.07); box-shadow: inset 0 0 0 1px rgba(7,143,115,.08); }
.seo-plan-card { position:relative; min-height:220px; color:var(--text); text-decoration:none; cursor:pointer; }
.seo-plan-card > i { position:absolute; top:14px; right:14px; padding:6px 9px; border-radius:999px; color:#063e32; background:var(--accent-yellow); font-size:8px; font-style:normal; font-weight:850; }
.seo-plan-card > em { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; border-top:1px solid var(--border); color:var(--emerald); font-size:10px; font-style:normal; font-weight:800; }
.seo-agency-card { color:#fff; border-color:#073d32; background:linear-gradient(145deg,#071a14,#075e50); }
.seo-agency-card > span,.seo-agency-card > em { color:#8ce8cd; }
.seo-agency-card > p,.seo-agency-card small { color:rgba(255,255,255,.68); }
.seo-agency-card > em { border-color:rgba(255,255,255,.14); }

.auth-dialog { width: min(520px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 24px; outline: none; color: var(--text); background: rgba(255,255,255,.82); box-shadow: 0 35px 110px rgba(43,17,36,.28), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(28px) saturate(130%); }
[data-theme="dark"] .auth-dialog { border-color: rgba(255,255,255,.12); background: rgba(20,20,20,.88); box-shadow: 0 38px 120px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08); }
.auth-dialog::backdrop { background: rgba(15,10,14,.42); backdrop-filter: blur(7px); }
.auth-shell { position: relative; padding: 34px; }
.auth-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 32px; min-width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); background: var(--surface-solid); box-shadow: none; font-size: 18px; text-align: center; }
.auth-close:hover { color: var(--text); border-color: var(--subtle); box-shadow: none; transform: none; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 35px; color: var(--muted); font-size: 10px; font-weight: 750; }
.auth-kicker { margin: 0 0 10px; color: var(--pink); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.auth-dialog h2 { max-width: 410px; font-size: 39px; }
.auth-copy { max-width: 420px; margin: 13px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 18px; padding: 4px; border-radius: 12px; background: var(--surface-soft); }
.auth-tab { min-width: 0; padding: 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; box-shadow: none; font-size: 10px; text-align: center; }
.auth-tab:hover { box-shadow: none; transform: none; }
.auth-tab.active { color: var(--text); background: var(--surface-solid); box-shadow: 0 3px 12px rgba(0,0,0,.06); }
#auth-form, #auth-recovery-form { display: grid; }
#auth-form label, #auth-recovery-form label { margin: 11px 0 7px; color: var(--text); font-size: 9px; font-weight: 700; }
#auth-form input, #auth-recovery-form input { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 11px; outline: none; color: var(--text); background: var(--surface-solid); font: inherit; font-size: 12px; transition: border-color .2s, box-shadow .2s; }
#auth-form input:focus, #auth-recovery-form input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(7,143,115,.09); }
.auth-password-hint { margin: 7px 0 0; color: var(--subtle); font-size: 8px; line-height: 1.45; }
.auth-link-button { justify-self: end; width: auto; min-width: 0; margin-top: 9px; padding: 2px 0; border: 0; border-radius: 0; color: var(--pink); background: transparent; box-shadow: none; font-size: 9px; font-weight: 650; text-align: right; }
.auth-link-button:hover { box-shadow: none; transform: none; text-decoration: underline; }
.auth-link-button.centered { justify-self: center; margin-top: 13px; color: var(--muted); text-align: center; }
.auth-turnstile { display: none; justify-content: center; min-height: 0; margin-top: 13px; }
.auth-turnstile.active { display: flex; min-height: 65px; }
.auth-turnstile iframe { max-width: 100%; }
.auth-submit { width: 100%; margin-top: 18px; text-align: left; }
.auth-message { min-height: 18px; margin: 12px 0 0; color: var(--pink); font-size: 10px; line-height: 1.45; }
.auth-fineprint { margin: 8px 0 0; color: var(--subtle); font-size: 8px; line-height: 1.5; }
.profile-editor { display: grid; gap: 8px; margin-top: 22px; }
.profile-avatar-button { display: flex; align-items: center; gap: 13px; width: 100%; min-width: 0; margin-bottom: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface-solid); box-shadow: none; text-align: left; }
.profile-avatar-button:hover { border-color: rgba(7,143,115,.45); box-shadow: none; transform: none; }
.profile-avatar-button > span { float: none; margin: 0; }
.profile-avatar-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.profile-avatar-copy strong { font-size: 12px; }
.profile-avatar-copy small { color: var(--muted); font-size: 9px; font-weight: 500; }
.profile-change-label { color: var(--pink); font-size: 10px; font-weight: 720; }
.profile-editor > label { margin: 4px 0 0; color: var(--muted); font-size: 9px; font-weight: 700; }
.profile-editor > input { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 11px; outline: none; color: var(--text); background: var(--surface-solid); font: inherit; font-size: 13px; }
.profile-editor > input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(7,143,115,.09); }
.profile-save-button { width: 100%; min-width: 0; margin-top: 3px; padding: 12px 14px; text-align: center; }
.signed-in-card { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid); }
.signed-in-card small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; }
.signed-in-card strong { display: block; overflow: hidden; max-width: 330px; font-size: 12px; text-overflow: ellipsis; }
.profile-billing { margin-top: 14px; padding: 16px; border: 1px solid rgba(7,143,115,.22); border-radius: 18px; background: linear-gradient(145deg, rgba(7,143,115,.09), rgba(255,214,37,.08)); box-shadow: 0 14px 30px rgba(4,57,46,.06); }
.profile-billing-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-billing-heading small { display: block; margin-bottom: 3px; color: var(--emerald); font-size: 7px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.profile-billing-heading h3 { margin: 0; font-size: 18px; letter-spacing: -.03em; }
.profile-plan-link { width: auto; min-width: 0; padding: 8px 10px; border: 1px solid rgba(7,143,115,.22); border-radius: 999px; color: var(--emerald); background: var(--surface-solid); box-shadow: none; font-size: 8px; text-align: center; }
.profile-plan-link span { float: none; margin-left: 4px; }
.profile-plan-link:hover { color: #fff; background: var(--emerald); box-shadow: none; transform: none; }
.billing-credit-grid { display: grid; grid-template-columns: .8fr .8fr 1.4fr; gap: 7px; margin-top: 14px; }
.billing-credit-grid > div { min-width: 0; padding: 11px; border: 1px solid rgba(7,143,115,.12); border-radius: 12px; background: color-mix(in srgb, var(--surface-solid) 92%, transparent); }
.billing-credit-grid strong, .billing-credit-grid small { display: block; }
.billing-credit-grid strong { overflow: hidden; font-size: 15px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.billing-credit-grid small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.billing-progress { height: 6px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: rgba(7,143,115,.12); }
.billing-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--emerald), #0bb889, var(--accent-yellow)); transition: width .25s ease; }
.billing-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.billing-profile-actions button { padding: 10px 11px; border: 1px solid rgba(7,143,115,.2); border-radius: 11px; color: var(--text); background: var(--surface-solid); box-shadow: none; font-size: 8px; font-weight: 800; }
.billing-profile-actions button:hover { color: #fff; background: var(--emerald); box-shadow: none; transform: translateY(-1px); }
.billing-profile-actions button:disabled { cursor: wait; opacity: .55; transform: none; }
.billing-message { min-height: 15px; margin: 10px 0 0; color: var(--text); font-size: 8px; font-weight: 700; line-height: 1.45; }
.billing-safe-note { margin: 5px 0 0; color: var(--muted); font-size: 7px; line-height: 1.45; }
.profile-plan-summary { margin-top: 12px; }
.profile-plan-summary .billing-message { min-height: 0; margin-bottom: 0; color: var(--muted); font-weight: 600; }
.profile-documentation { margin-top: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface-solid) 94%, var(--surface-soft)); }
.profile-documentation-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.profile-documentation-heading small { display: block; margin-bottom: 3px; color: var(--emerald); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.profile-documentation-heading h3 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.profile-documentation-heading > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--emerald); background: rgba(7,143,115,.09); font-size: 12px; }
.profile-documentation-links { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.profile-documentation-links a { display: grid; gap: 3px; min-width: 0; padding: 11px; border: 1px solid transparent; border-radius: 11px; color: var(--text); background: var(--surface-solid); text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.profile-documentation-links a:hover { border-color: rgba(7,143,115,.42); transform: translateY(-1px); }
.profile-documentation-links strong { font-size: 9px; line-height: 1.3; }
.profile-documentation-links small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.sign-out-button { width: 100%; min-width: 0; margin-top: 8px; padding: 12px; border: 1px solid var(--border); color: var(--muted); background: transparent; box-shadow: none; font-size: 10px; text-align: center; }
.sign-out-button:hover { color: var(--danger); border-color: rgba(217,48,37,.28); box-shadow: none; }

/* Signed-in account centre: compact menu first, one focused destination at a time. */
.auth-dialog.account-mode { position: fixed; inset: 82px 24px auto auto; width: min(380px, calc(100% - 28px)); min-height: 0; max-height: calc(100vh - 102px); margin: 0; overflow: auto; border-radius: 20px; background: color-mix(in srgb, var(--surface-solid) 97%, transparent); box-shadow: 0 24px 70px rgba(4,35,29,.22), inset 0 1px 0 rgba(255,255,255,.9); }
.auth-dialog.account-mode.account-detail { width: min(560px, calc(100% - 28px)); }
body.public-home-mode .auth-dialog.account-mode { inset: 50% auto auto 50%; width: min(520px, calc(100% - 32px)); max-height: min(760px, calc(100vh - 44px)); transform: translate(-50%, -50%); border-color: rgba(126,255,213,.32); border-radius: 28px; background:
  radial-gradient(circle at 18% 0%, rgba(13,187,139,.20), transparent 42%),
  color-mix(in srgb, var(--surface-solid) 92%, rgba(3,25,20,.08));
  box-shadow: 0 45px 130px rgba(0,0,0,.38), 0 0 90px rgba(7,143,115,.24), inset 0 1px 0 rgba(255,255,255,.88); backdrop-filter: blur(34px) saturate(145%); }
body.public-home-mode .auth-dialog.account-mode.account-detail { width: min(680px, calc(100% - 32px)); }
body.public-home-mode .auth-dialog.account-mode::backdrop { background:
  radial-gradient(circle at 50% 45%, rgba(7,143,115,.24), transparent 38%),
  rgba(0,10,8,.55); backdrop-filter: blur(15px) saturate(115%); }
body.public-home-mode .account-menu-view { padding: 28px; }
body.public-home-mode .account-menu-identity { padding: 8px 42px 20px 8px; }
body.public-home-mode .account-menu-nav { gap: 5px; padding: 13px 0; }
body.public-home-mode .account-menu-nav button,
body.public-home-mode .account-menu-action { padding: 12px 10px; }
.account-mode .auth-shell { display: block; min-height: 0; }
.account-mode .auth-promise, .account-mode .auth-panel > .auth-brand { display: none; }
.account-mode .auth-panel { padding: 0; }
.account-mode .auth-close { top: 13px; right: 13px; width: 29px; min-width: 29px; height: 29px; font-size: 16px; }
.account-menu-view { padding: 14px; }
.account-menu-identity { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 6px 38px 15px 6px; border-bottom: 1px solid var(--border); }
.account-menu-identity > span:last-child { display: grid; flex: 1; gap: 3px; min-width: 0; }
.account-menu-identity strong, .account-menu-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-identity strong { font-size: 11px; }
.account-menu-identity small { color: var(--muted); font-size: 8px; }
.menu-avatar { width: 38px; min-width: 38px; height: 38px; }
.account-menu-nav { display: grid; gap: 3px; padding: 9px 0; }
.account-menu-nav button { display: grid; grid-template-columns: 31px minmax(0, 1fr) 12px; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 9px 8px; border: 0; border-radius: 11px; color: var(--text); background: transparent; box-shadow: none; text-align: left; }
.account-menu-nav button:hover, .account-menu-action:hover { background: var(--surface-soft); box-shadow: none; transform: none; }
.account-menu-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--emerald); background: var(--surface-solid); font-size: 11px; font-weight: 800; }
.account-menu-icon svg, .account-menu-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-menu-nav button > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.account-menu-nav strong { font-size: 10px; }
.account-menu-nav small { overflow: hidden; color: var(--muted); font-size: 7px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-nav i, .account-menu-action i { color: var(--subtle); font-size: 16px; font-style: normal; font-weight: 450; }
.account-menu-divider { height: 1px; margin: 1px 0; background: var(--border); }
.account-menu-action { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; width: 100%; min-width: 0; margin-top: 4px; padding: 10px 8px; border: 0; border-radius: 11px; color: var(--text); background: transparent; box-shadow: none; text-align: left; }
.account-menu-action:is(a) { text-decoration: none; }
.account-menu-action > span { color: var(--emerald); font-size: 14px; text-align: center; }
.account-menu-action strong { font-size: 10px; }
.account-menu-signout { margin-top: 4px; color: var(--muted); }
.account-menu-signout > span { color: var(--muted); }
.account-menu-signout:hover { color: var(--danger); background: rgba(217,48,37,.06); }
.account-menu-message { min-height: 0; margin: 4px 8px 0; color: var(--danger); font-size: 8px; line-height: 1.4; }
.account-section-view { padding: 24px 26px 27px; }
.account-back { display: inline-flex; width: auto; min-width: 0; align-items: center; gap: 5px; margin: -8px 0 21px; padding: 6px 8px 6px 4px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; box-shadow: none; font-size: 17px; }
.account-back span { font-size: 9px; font-weight: 750; }
.account-back:hover { color: var(--emerald); background: var(--surface-soft); box-shadow: none; transform: none; }
.account-section-heading { padding-right: 18px; }
.account-section-heading .auth-kicker { margin-bottom: 7px; color: var(--emerald); }
.account-section-heading h2 { max-width: 470px; font-size: 32px; line-height: 1; }
.account-section-heading > p:last-child { max-width: 450px; margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.account-section-view .profile-editor { margin-top: 21px; }
.account-section-view .signed-in-card { margin-top: 12px; }
.account-section-view .profile-billing { margin-top: 22px; padding: 18px; }
.account-section-view .billing-profile-actions button { display: grid; gap: 3px; padding: 12px; text-align: left; }
.account-section-view .billing-profile-actions button strong { font-size: 10px; }
.account-section-view .billing-profile-actions button span { margin: 0; color: var(--muted); font-size: 7px; font-weight: 600; }
.account-section-view .billing-profile-actions button:hover span { color: rgba(255,255,255,.72); }
.account-secondary-link { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface-solid); font-size: 9px; font-weight: 750; text-decoration: none; }
.account-secondary-link:hover { border-color: rgba(7,143,115,.4); color: var(--emerald); }
.account-section-view .profile-documentation-links { grid-template-columns: 1fr; gap: 6px; margin-top: 22px; }
.account-section-view .profile-documentation-links a { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border-color: var(--border); }
.account-section-view .profile-documentation-links a > span:nth-child(2) { display: grid; gap: 3px; }
.account-section-view .profile-documentation-links a > i { color: var(--subtle); font-size: 11px; font-style: normal; }
.doc-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--emerald); background: rgba(7,143,115,.09); font-size: 13px; font-weight: 800; }
.referral-account-view { padding-bottom: 32px; }
.referral-offer-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(190px, .65fr); align-items: center; gap: 22px; margin-top: 22px; padding: 22px; overflow: hidden; border: 1px solid rgba(132,243,210,.24); border-radius: 19px; color: #fff; background: radial-gradient(circle at 92% 8%, rgba(255,214,37,.22), transparent 32%), linear-gradient(145deg, #05261f, #076a56 66%, #089c7c); box-shadow: 0 18px 42px rgba(5,64,52,.17); }
.referral-offer-copy { display: grid; gap: 8px; }
.referral-offer-copy > span { color: #9ff0d8; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.referral-offer-copy strong { max-width: 310px; font-size: 18px; line-height: 1.16; letter-spacing: -.03em; }
.referral-offer-copy small { color: rgba(255,255,255,.66); font-size: 8px; }
.referral-offer-badges { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 7px; }
.referral-offer-badges > div { display: grid; min-height: 86px; place-items: center; align-content: center; gap: 5px; border: 1px solid rgba(255,255,255,.19); border-radius: 16px; background: rgba(4,35,28,.28); backdrop-filter: blur(10px); }
.referral-offer-badges b { font-size: 27px; line-height: 1; letter-spacing: -.05em; }
.referral-offer-badges span { color: rgba(255,255,255,.68); font-size: 7px; font-weight: 700; }
.referral-offer-badges > i { position: relative; display: block; height: 1px; background: rgba(255,255,255,.45); }
.referral-offer-badges > i::after { position: absolute; top: 50%; right: -1px; width: 5px; height: 5px; content: ""; border-top: 1px solid rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.6); transform: translateY(-50%) rotate(45deg); }
.referral-share-card { margin-top: 13px; padding: 17px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--surface-solid) 96%, var(--surface-soft)); }
.referral-share-card > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.referral-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.referral-link-row input { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid var(--border); border-radius: 11px; outline: 0; color: var(--text); background: var(--surface-solid); font-family: var(--mono); font-size: 9px; }
.referral-link-row input:focus { border-color: rgba(7,143,115,.55); box-shadow: 0 0 0 3px rgba(7,143,115,.09); }
.referral-link-row button, .referral-share-button { min-width: 0; border-radius: 11px; box-shadow: none; font-size: 9px; font-weight: 800; }
.referral-link-row button { padding: 10px 14px; color: #fff; border-color: var(--emerald); background: var(--emerald); }
.referral-link-row button:hover, .referral-share-button:hover { box-shadow: none; transform: translateY(-1px); }
.referral-share-button { width: 100%; margin-top: 8px; padding: 11px 14px; color: var(--emerald); border: 1px solid rgba(7,143,115,.22); background: rgba(7,143,115,.07); }
.referral-share-button span { float: right; margin: 0; }
.referral-status { min-height: 12px; margin: 9px 0 0; color: var(--muted); font-size: 7px; line-height: 1.45; }
.referral-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }
.referral-stats > div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid); }
.referral-stats strong { font-size: 20px; letter-spacing: -.04em; }
.referral-stats span { color: var(--muted); font-size: 7px; line-height: 1.35; }
.referral-activity { margin-top: 13px; padding: 17px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-solid); }
.referral-activity > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.referral-activity h3 { margin: 0; font-size: 13px; letter-spacing: -.02em; }
.referral-activity > div:first-child > span { color: var(--muted); font-size: 7px; }
.referral-limit-track { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }
.referral-limit-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--emerald), var(--accent-yellow)); transition: width .25s ease; }
.referral-activity ul { display: grid; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.referral-activity li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-solid) 92%, var(--surface-soft)); }
.referral-activity li > span { display: grid; gap: 3px; min-width: 0; }
.referral-activity li strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.referral-activity li small { color: var(--muted); font-size: 7px; }
.referral-activity li b { padding: 6px 8px; border-radius: 99px; color: var(--emerald); background: rgba(7,143,115,.09); font-size: 7px; }
.referral-activity li.pending b { color: #886a00; background: rgba(255,214,37,.16); }
.referral-activity li.referral-empty { display: block; padding: 15px; color: var(--muted); font-size: 8px; line-height: 1.5; text-align: center; }
.referral-terms { margin-top: 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid); }
.referral-terms summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; cursor: pointer; font-size: 9px; font-weight: 780; list-style: none; }
.referral-terms summary::-webkit-details-marker { display: none; }
.referral-terms summary span { color: var(--emerald); font-size: 14px; transition: transform .16s ease; }
.referral-terms[open] summary span { transform: rotate(45deg); }
.referral-terms p { margin: 0; padding: 0 14px 15px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.appearance-options { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 24px; }
.appearance-options button { position: relative; display: grid; gap: 10px; width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 15px; color: var(--text); background: var(--surface-solid); box-shadow: none; text-align: left; }
.appearance-options button:hover { border-color: rgba(7,143,115,.36); box-shadow: none; transform: translateY(-1px); }
.appearance-options button.active { border-color: var(--emerald); box-shadow: 0 0 0 2px rgba(7,143,115,.1); }
.appearance-options button > span:nth-child(2) { display: grid; gap: 3px; padding: 0 3px 3px; }
.appearance-options strong { font-size: 11px; }
.appearance-options small { color: var(--muted); font-size: 8px; font-weight: 550; }
.appearance-options b { position: absolute; top: 15px; right: 15px; display: none; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: var(--emerald); font-size: 9px; }
.appearance-options button.active b { display: grid; }
.appearance-preview { display: grid; grid-template-columns: 33% 1fr; grid-template-rows: 1fr 1fr; gap: 7px; height: 105px; padding: 11px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); border-radius: 11px; }
.appearance-preview i { display: block; border-radius: 5px; }
.appearance-preview i:first-child { grid-row: 1 / -1; }
.appearance-light { background: #f4f7f6; }
.appearance-light i { background: #fff; box-shadow: 0 3px 9px rgba(10,45,37,.08); }
.appearance-light i:first-child { background: #dfeeea; }
.appearance-dark { border-color: rgba(255,255,255,.12); background: #111a17; }
.appearance-dark i { background: #26332f; }
.appearance-dark i:first-child { background: #073e33; }

@media (max-width: 600px) {
  .auth-dialog.account-mode, .auth-dialog.account-mode.account-detail { inset: 73px 9px auto 9px; width: auto; max-height: calc(100vh - 82px); }
  body.public-home-mode .auth-dialog.account-mode,
  body.public-home-mode .auth-dialog.account-mode.account-detail { inset: 50% auto auto 50%; width: calc(100% - 24px); max-height: calc(100vh - 24px); transform: translate(-50%, -50%); }
  body.public-home-mode .account-menu-view { padding: 20px; }
  .account-section-view { padding: 22px 18px 24px; }
  .account-section-heading h2 { font-size: 28px; }
  .appearance-options { grid-template-columns: 1fr; }
  .appearance-preview { height: 88px; }
  .billing-credit-grid { grid-template-columns: 1fr 1fr; }
  .billing-credit-grid > div:last-child { grid-column: 1 / -1; }
  .referral-offer-card { grid-template-columns: 1fr; }
  .referral-stats { grid-template-columns: 1fr 1fr; }
  .referral-stats > div:last-child { grid-column: 1 / -1; }
}

/* New-user experience: calm emerald workspace with creator-specific evidence cards. */
.site-nav { border-color: rgba(255,255,255,.82); box-shadow: 0 18px 55px rgba(4,57,46,.11), inset 0 1px 0 rgba(255,255,255,.95); }
.landing-nav-links a::after, .nav-connect::after { background: var(--emerald); }
.nav-signup { color: #fff; background: var(--ink); }
.nav-signup:hover { color: var(--ink); background: var(--accent-yellow); }
.orbit-hero { min-height: 760px; padding: 34px 0 54px; }
.orbit-stage { position: relative; display: grid; width: 100%; min-height: 690px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 38px; background:
  radial-gradient(circle at 50% 43%, rgba(255,255,255,.95) 0 17%, rgba(255,255,255,.58) 35%, transparent 57%),
  radial-gradient(circle at 85% 8%, rgba(11,184,137,.22), transparent 30%),
  linear-gradient(150deg, rgba(255,255,255,.7), rgba(224,244,239,.54));
  box-shadow: 0 32px 100px rgba(4,57,46,.10), inset 0 1px 0 rgba(255,255,255,.9); isolation: isolate; }
.orbit-stage::before { position: absolute; width: 870px; height: 385px; content: ""; border: 1px solid rgba(7,143,115,.13); border-radius: 50%; transform: rotate(-4deg); }
.orbit-stage::after { position: absolute; width: 600px; height: 600px; content: ""; border: 1px dashed rgba(7,143,115,.10); border-radius: 50%; }
[data-theme="dark"] .orbit-stage { border-color: rgba(255,255,255,.08); background: radial-gradient(circle at 50% 43%, rgba(18,49,40,.95), rgba(7,17,14,.78) 58%), linear-gradient(145deg, #0d201a, #06100d); }
.hero-center { position: relative; z-index: 5; display: grid; width: min(680px, 60%); justify-items: center; text-align: center; }
.hero-center .eyebrow { margin-bottom: 18px; color: var(--emerald); font-size: 10px; }
.hero-center h1 { max-width: 660px; font-size: clamp(58px, 6vw, 88px); }
.hero-center h1 em { background: linear-gradient(105deg, var(--emerald), var(--emerald-bright)); background-clip: text; -webkit-background-clip: text; }
.hero-center .hero-copy { max-width: 610px; margin-top: 22px; font-size: 16px; }
.hero-center .hero-primary { min-width: 230px; margin-top: 28px; padding: 16px 20px; border-radius: 999px; color: var(--ink); background: var(--accent-yellow); box-shadow: 0 16px 34px rgba(190,158,0,.20); text-align: left; }
.hero-center .hero-primary:hover { box-shadow: 0 20px 40px rgba(190,158,0,.26); }
.hero-center .hero-note { margin-top: 12px; }
.orbit-card { --rotate: 0deg; --delay: 0s; position: absolute; z-index: 4; display: grid; min-width: 175px; gap: 5px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.82); border-radius: 18px; color: var(--text); background: rgba(255,255,255,.76); box-shadow: 0 22px 55px rgba(4,57,46,.14), inset 0 1px 0 rgba(255,255,255,.98); backdrop-filter: blur(18px) saturate(125%); transform: rotate(var(--rotate)); }
[data-theme="dark"] .orbit-card { border-color: rgba(255,255,255,.11); background: rgba(12,32,26,.80); box-shadow: 0 24px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07); }
.orbit-card small { color: var(--emerald); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.orbit-card strong { font-size: 13px; letter-spacing: -.02em; }
.orbit-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.orbit-icon { display: grid; width: 29px; height: 29px; place-items: center; margin-bottom: 2px; border-radius: 9px; color: var(--ink); background: var(--accent-yellow); font-size: 14px; font-weight: 800; }
.orbit-hook { --rotate: -5deg; --delay: -.6s; top: 65px; left: 7%; }
.orbit-score { --rotate: 4deg; --delay: -1.8s; top: 42px; right: 15%; grid-template-columns: auto 1fr; align-items: center; gap: 11px; }
.orbit-score-number { font-size: 33px; font-weight: 820; letter-spacing: -.07em; }
.orbit-score div { display: grid; gap: 4px; }
.orbit-cta { --rotate: 5deg; --delay: -3.1s; top: 210px; right: 3.5%; }
.orbit-rehook { --rotate: -3deg; --delay: -2.2s; right: 7%; bottom: 70px; width: 210px; }
.mini-timeline { position: relative; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--surface-soft); }
.mini-timeline i { display: block; width: 53%; height: 100%; border-radius: inherit; background: var(--emerald); }
.mini-timeline b { position: absolute; top: -3px; left: 52%; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--accent-yellow); }
.orbit-broll { --rotate: 4deg; --delay: -.9s; bottom: 45px; left: 13%; grid-template-columns: auto 1fr; width: 235px; align-items: center; gap: 12px; }
.orbit-frame { position: relative; display: block; width: 58px; height: 66px; overflow: hidden; border-radius: 12px; background: linear-gradient(150deg, #07110e 30%, #078f73 31% 66%, #ffd625 67%); }
.orbit-frame::before, .orbit-frame::after, .orbit-frame i { position: absolute; content: ""; border-radius: 999px; background: rgba(255,255,255,.74); }
.orbit-frame::before { width: 22px; height: 22px; top: 10px; left: 18px; }
.orbit-frame::after { width: 42px; height: 18px; right: -6px; bottom: 8px; transform: rotate(-18deg); }
.orbit-broll > div { display: grid; gap: 4px; }
.orbit-transcript { --rotate: -4deg; --delay: -2.8s; bottom: 157px; left: 2.5%; width: 230px; }
.orbit-transcript p b { margin-right: 5px; color: var(--text); font-family: var(--mono); }
.orbit-psychology { --rotate: 3deg; --delay: -1.3s; top: 250px; left: 2%; }
.orbit-pattern { --rotate: -3deg; --delay: -3.5s; top: 72px; right: 37%; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }

/* Full-bleed editorial Reel gallery: real public covers with unobstructed captions. */
.arc-hero { width: 100vw; min-height: 820px; margin-left: calc(50% - 50vw); padding: 22px 0 48px; }
.arc-stage { position: relative; width: 100%; min-height: clamp(860px, calc(100vh - 88px), 920px); overflow: hidden; color: var(--text); background:
  radial-gradient(circle at 12% 30%, rgba(16,184,138,.16), transparent 26%),
  radial-gradient(circle at 88% 63%, rgba(255,214,37,.17), transparent 25%),
  linear-gradient(180deg, rgba(241,251,247,.72), rgba(232,247,241,.94));
  isolation: isolate; }
.arc-stage::before { position: absolute; z-index: 1; width: min(66vw, 920px); height: min(66vw, 920px); top: 50%; left: 50%; border: 1px solid rgba(7,143,115,.09); border-radius: 50%; content: ""; box-shadow: 0 0 0 90px rgba(255,255,255,.13), 0 0 0 180px rgba(7,143,115,.025); transform: translate(-50%, -50%); pointer-events: none; }
.arc-stage::after { position: absolute; z-index: 2; inset: 0; content: ""; background: linear-gradient(90deg, rgba(235,248,243,.92), transparent 7%, transparent 93%, rgba(235,248,243,.92)); pointer-events: none; }
[data-theme="dark"] .arc-stage { background: radial-gradient(circle at 12% 30%, rgba(16,184,138,.16), transparent 26%), radial-gradient(circle at 88% 63%, rgba(255,214,37,.08), transparent 25%), linear-gradient(180deg, #0b1814, #0b1f19); }
.arc-stage .hero-center { position: absolute; z-index: 7; top: 50%; left: 50%; width: min(780px, calc(100% - 48px)); transform: translate(-50%, -50%); text-align: center; }
.arc-stage .hero-center .eyebrow { justify-content: center; color: var(--emerald); }
.arc-stage .hero-center h1 { max-width: 770px; margin-inline: auto; color: var(--text); font-size: clamp(58px, 5.6vw, 88px); line-height: .93; letter-spacing: -.065em; text-wrap: balance; }
.arc-stage .hero-center h1 em { color: var(--emerald); background: linear-gradient(90deg, #078f73, #0bb889 56%, #b99600); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.arc-stage .hero-center .hero-copy { max-width: 560px; margin-inline: auto; color: var(--muted); font-size: 15px; }
.arc-stage .hero-center .hero-primary { margin-inline: auto; color: #fff; background: linear-gradient(115deg, #076f5c, #0bb889); box-shadow: 0 18px 42px rgba(7,143,115,.2); }
.arc-stage .hero-center .hero-note { color: var(--muted-soft); }
.creator-reel-gallery { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }
.hero-reel-lane { position: absolute; left: 0; display: flex; width: max-content; gap: 18px; padding: 0 9px; backface-visibility: hidden; contain: layout style paint; transform: translate3d(0,0,0); will-change: transform; }
.hero-reel-lane-one { top: 12px; }
.hero-reel-lane-two { bottom: 12px; transform: translate3d(calc(-50% - 9px),0,0); }
.hero-reel-card { --card-tilt: 0deg; display: grid; grid-template-rows: auto 56px; width: 136px; flex: 0 0 136px; overflow: hidden; border: 1px solid rgba(7,81,66,.12); border-radius: 20px; color: var(--text); background: #fff; box-shadow: 0 13px 30px rgba(6,67,54,.1); text-decoration: none; transform: translateZ(0) rotate(var(--card-tilt)); backface-visibility: hidden; pointer-events: auto; transition: box-shadow .2s ease, transform .2s ease; }
.hero-reel-card:hover, .hero-reel-card:focus-visible { z-index: 2; box-shadow: 0 28px 70px rgba(6,67,54,.2); outline: none; transform: translateY(-6px) rotate(0); }
.hero-reel-artwork { position: relative; display: block; aspect-ratio: 9 / 12.5; overflow: hidden; background: #dceae5; }
.hero-reel-artwork img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hero-reel-card:hover .hero-reel-artwork img { transform: scale(1.035); }
.hero-reel-artwork small { position: absolute; top: 10px; left: 10px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.68); border-radius: 999px; color: #fff; background: rgba(4,26,20,.72); box-shadow: inset 0 1px rgba(255,255,255,.18); font-size: 6px; font-weight: 820; letter-spacing: .1em; }
.hero-reel-artwork i { position: absolute; right: 10px; bottom: 10px; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; color: #fff; background: rgba(4,26,20,.7); box-shadow: 0 6px 16px rgba(0,0,0,.12); font-size: 8px; font-style: normal; }
.hero-reel-copy { display: grid; align-content: center; gap: 4px; padding: 8px 10px 9px; min-width: 0; }
.hero-reel-copy strong { overflow: hidden; color: var(--emerald); font-size: 7px; font-weight: 790; text-overflow: ellipsis; white-space: nowrap; }
.hero-reel-copy small { color: var(--text); font-size: 7px; font-weight: 690; line-height: 1.25; }

/* A clearer enterprise invitation for creators, teams and long-term partners. */
.enterprise-band { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: clamp(34px, 6vw, 92px); align-items: end; margin-top: 22px; padding: clamp(42px, 6vw, 76px); overflow: hidden; border: 1px solid var(--border); border-radius: 34px; color: var(--text); background: radial-gradient(circle at 87% 14%, rgba(18,204,151,.17), transparent 28%), radial-gradient(circle at 18% 100%, rgba(255,214,37,.1), transparent 32%), linear-gradient(130deg, #fff, #f0faf6 58%, #dff4ec); box-shadow: var(--card-shadow); }
.enterprise-band::before { position: absolute; width: 520px; height: 520px; top: -395px; right: 10%; border: 1px solid rgba(7,143,115,.15); border-radius: 50%; content: ""; box-shadow: 0 0 0 65px rgba(7,143,115,.035), 0 0 0 130px rgba(7,143,115,.02); }
.enterprise-band::after { position: absolute; width: 420px; height: 420px; right: -190px; bottom: -290px; border-radius: 50%; content: ""; background: var(--accent-yellow); filter: blur(115px); opacity: .14; pointer-events: none; }
.enterprise-copy, .enterprise-action { position: relative; z-index: 1; }
.enterprise-band .step { color: var(--emerald); }
.enterprise-copy h2 { max-width: 790px; margin-top: 12px; color: var(--text); font-size: clamp(43px, 5.4vw, 73px); line-height: .97; }
.enterprise-copy > p:not(.step) { max-width: 700px; margin: 21px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.enterprise-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.enterprise-tags span { padding: 8px 11px; border: 1px solid rgba(7,143,115,.2); border-radius: 999px; color: #075e50; background: rgba(255,255,255,.76); font-size: 9px; font-weight: 680; }
.enterprise-action { padding: 25px; border: 1px solid rgba(7,143,115,.2); border-radius: 22px; color:#fff; background: linear-gradient(145deg,#073a2f,#078f73); box-shadow: 0 22px 50px rgba(4,57,46,.18); }
.enterprise-signal { display: inline-flex; align-items: center; gap: 8px; color: #9af1d7; font-size: 9px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.enterprise-signal::before { width: 7px; height: 7px; border-radius: 50%; content: ""; background: #35e2ad; box-shadow: 0 0 0 5px rgba(53,226,173,.12); }
.enterprise-action p { margin: 16px 0 22px; color: rgba(255,255,255,.69); font-size: 12px; line-height: 1.6; }
.enterprise-action .email-action { width: 100%; justify-content: space-between; color: #07110e; border-color: var(--accent-yellow); background: var(--accent-yellow); box-shadow: 0 14px 30px rgba(255,214,37,.14); }
.enterprise-action .email-action:hover { color: #07110e; background: #ffe15a; box-shadow: 0 17px 36px rgba(255,214,37,.2); transform: translateY(-1px); }
.enterprise-action .email-action span { color: inherit; }
.enterprise-action > small { display: block; margin-top: 13px; color: rgba(255,255,255,.43); font-size: 8px; text-align: center; }

.creator-showcase { position: relative; margin-top: 22px; overflow: hidden; border: 1px solid var(--border); border-radius: 32px; background: var(--surface-solid); box-shadow: var(--card-shadow); }
.creator-showcase::before { position: absolute; width: 500px; height: 500px; top: -390px; left: 50%; content: ""; border-radius: 50%; background: var(--emerald-bright); filter: blur(90px); opacity: .15; transform: translateX(-50%); pointer-events: none; }
.creator-showcase-copy { position: relative; z-index: 2; width: min(780px, calc(100% - 42px)); margin: 0 auto; padding: 68px 0 44px; text-align: center; }
.creator-showcase-copy h2 { font-size: clamp(43px, 5vw, 69px); }
.creator-showcase-copy > p:last-child { max-width: 670px; margin: 18px auto 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.creator-marquee { position: relative; width: 100%; overflow: hidden; padding: 8px 0; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.creator-track { display: flex; width: max-content; gap: 10px; padding-right: 10px; animation: creator-scroll 70s linear infinite; }
.creator-marquee-reverse .creator-track { animation-direction: reverse; animation-duration: 76s; }
.creator-pill { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; min-width: 218px; padding: 8px 11px 8px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: color-mix(in srgb, var(--surface-solid) 92%, var(--surface-soft)); text-decoration: none; box-shadow: 0 7px 22px rgba(4,57,46,.06); }
.creator-pill:hover { border-color: rgba(7,143,115,.42); }
.creator-pill img { width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; background: var(--surface-soft); object-fit: cover; box-shadow: 0 3px 12px rgba(4,57,46,.16); }
.creator-pill-copy { display: grid; gap: 3px; min-width: 0; }
.creator-pill-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.creator-pill-copy small { color: var(--muted); font-size: 8px; }
.creator-pill > span:last-child { color: var(--emerald); font-size: 12px; }
.creator-disclaimer { width: min(760px, calc(100% - 38px)); margin: 30px auto 0; padding: 26px 0 38px; border-top: 1px solid var(--border); color: var(--subtle); font-size: 8px; line-height: 1.5; text-align: center; }

.pricing-section { margin-top: 22px; padding: clamp(34px, 5vw, 68px); border: 1px solid var(--border); border-radius: 32px; background: color-mix(in srgb, var(--surface-solid) 94%, var(--surface-soft)); box-shadow: var(--card-shadow); }
.pricing-heading { max-width: 790px; margin: 0 auto 42px; text-align: center; }
.pricing-heading h2 { font-size: clamp(43px, 5vw, 67px); }
.pricing-heading > p:last-child { max-width: 700px; margin: 18px auto 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.collector-meta { display: flex; align-items: center; gap: 8px; }
.credit-balance { padding: 7px 10px; border: 1px solid rgba(7,143,115,.2); border-radius: 999px; color: var(--emerald); background: rgba(7,143,115,.07); font-size: 8px; font-weight: 800; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.plan-card { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 9px 9px 22px; border: 1px solid var(--border); border-radius: 25px; background: var(--surface-solid); box-shadow: 0 18px 38px rgba(4,57,46,.07); }
.plan-top { min-height: 280px; padding: 22px 18px 18px; border-radius: 18px; background: var(--surface-soft); }
.plan-top > span { display: block; margin-bottom: 37px; font-size: 10px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.plan-top > strong { display: block; font-family: var(--display-font); font-size: clamp(30px, 3vw, 43px); letter-spacing: -.055em; }
.plan-top > strong small { margin-left: 2px; font-size: 11px; font-weight: 650; letter-spacing: 0; }
.plan-top > p { min-height: 43px; margin: 13px 0 18px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.plan-top button, .plan-top a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-width: 0; padding: 13px 14px; border-radius: 999px; color: #fff; background: var(--ink); box-shadow: none; font-size: 10px; font-weight: 750; text-decoration: none; }
.plan-top button:hover, .plan-top a:hover { color: var(--ink); background: var(--accent-yellow); box-shadow: none; transform: none; }
.plan-top button span, .plan-top a span { float: none; margin: 0; }
.plan-card ul { display: grid; gap: 12px; margin: 20px 12px 0; padding: 0; list-style: none; }
.plan-card li { position: relative; padding-left: 17px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.plan-card li::before { position: absolute; top: 0; left: 0; color: var(--emerald); content: "✓"; font-weight: 900; }
.plan-featured { border-color: rgba(7,143,115,.5); box-shadow: 0 22px 48px rgba(7,143,115,.14); transform: translateY(-9px); }
.plan-featured .plan-top { background: linear-gradient(145deg, rgba(11,184,137,.22), rgba(255,214,37,.13)); }
.plan-badge { position: absolute; top: -13px; right: 18px; padding: 7px 10px; border-radius: 999px; color: var(--ink); background: var(--accent-yellow); font-size: 8px; font-weight: 800; }
.plan-dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.plan-dark .plan-top { background: linear-gradient(145deg, #102d25, #075e50); }
.plan-dark .plan-top > p, .plan-dark li { color: rgba(255,255,255,.68); }
.plan-dark .plan-top a { color: var(--ink); background: var(--accent-yellow); }
.plan-dark li::before { color: var(--accent-yellow); }
.pricing-note { max-width: 720px; margin: 28px auto 0; color: var(--subtle); font-size: 9px; line-height: 1.65; text-align: center; }
.pricing-note strong { color: var(--emerald); }

/* A focused product story with equal-size cards and tactile horizontal browsing. */
.capabilities-section { position: relative; min-height: 690px; margin-top: 22px; padding: clamp(38px, 5vw, 68px) 0 48px; overflow: hidden; border: 1px solid var(--border); border-radius: 32px; color: var(--text); background: radial-gradient(circle at 90% 10%, rgba(14,184,137,.12), transparent 30%), linear-gradient(145deg,#ffffff,#eef9f5); box-shadow: var(--card-shadow); }
.capabilities-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 0 clamp(28px, 5vw, 68px) 34px; }
.capabilities-heading > div:first-child { max-width: 850px; }
.capabilities-heading .step { color: var(--emerald); }
.capabilities-heading h2 { max-width: 840px; margin-top: 10px; color: var(--text); font-size: clamp(42px, 5.1vw, 68px); line-height: .98; }
.capability-controls { display: flex; flex: 0 0 auto; gap: 9px; }
.capability-controls button { display: grid; width: 48px; min-width: 48px; height: 48px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--emerald); background: #fff; box-shadow: 0 10px 24px rgba(4,57,46,.09); font-size: 18px; }
.capability-controls button:hover { border-color: rgba(7,143,115,.35); background: #e8f8f2; box-shadow: 0 13px 27px rgba(4,57,46,.12); transform: translateY(-1px); }
.capability-track { display: grid; grid-auto-columns: clamp(310px, 30vw, 410px); grid-auto-flow: column; gap: 15px; overflow-x: auto; padding: 0 clamp(28px, 5vw, 68px) 17px; scroll-behavior: smooth; scroll-padding-inline: clamp(28px, 5vw, 68px); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }
.capability-track::-webkit-scrollbar { display: none; }
.capability-card { display: grid; height: 425px; min-width: 0; grid-template-rows: 245px 1fr; overflow: hidden; border: 1px solid var(--border); border-radius: 23px; background: rgba(255,255,255,.92); box-shadow: 0 20px 45px rgba(4,57,46,.09); scroll-snap-align: start; }
.capability-visual { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: center; margin: 12px; padding: 22px; overflow: hidden; border: 1px solid rgba(141,241,211,.18); border-radius: 16px; color: #e9fff8; background: linear-gradient(145deg, #293d37 0%, #3c5f53 100%); }
.capability-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(118deg, rgba(255,255,255,.08), transparent 38%, rgba(104,231,195,.08)); opacity: .65; pointer-events: none; }
.capability-visual > * { position: relative; z-index: 1; }
.mock-label { position: absolute; top: 15px; left: 16px; color: #82e8c9; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.capability-copy { min-height: 0; padding: 3px 23px 24px; overflow: hidden; }
.capability-copy > span { color: #69dab8; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.capability-copy h3 { margin-top: 8px; color: var(--text); font-size: 20px; line-height: 1.13; overflow-wrap: anywhere; }
.capability-copy p { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.capability-hook-visual strong { max-width: 285px; font-family: var(--display-font); font-size: 25px; line-height: 1.08; }
.hook-meter { height: 7px; margin: 23px 0 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.09); }
.hook-meter i { display: block; width: 87%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #10b98b, #f5d832); }
.capability-visual small { color: rgba(255,255,255,.56); font-size: 9px; }
.capability-transcript-visual { justify-content: flex-start; padding-top: 57px; }
.capability-transcript-visual p { margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.74); font-size: 10px; line-height: 1.35; }
.capability-transcript-visual b { margin-right: 8px; color: #6be1be; }
.timeline-frames { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.timeline-frames i { display: grid; height: 76px; place-items: end start; padding: 8px; border-radius: 9px; color: #fff; background: linear-gradient(145deg, rgba(15,179,134,.32), rgba(255,255,255,.06)); font-size: 8px; font-style: normal; }
.timeline-line { display: flex; justify-content: space-between; margin: 15px 8px 10px; border-top: 2px solid rgba(102,226,190,.36); }
.timeline-line b { width: 8px; height: 8px; margin-top: -5px; border: 2px solid #052a20; border-radius: 50%; background: #67e0bd; }
.capability-compare-visual > div { display: grid; gap: 14px; width: 100%; }
.capability-compare-visual i { position: relative; display: block; height: 34px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.06); font-style: normal; }
.capability-compare-visual i::before { display: block; width: var(--score); height: 100%; content: ""; background: linear-gradient(90deg, rgba(12,178,132,.75), rgba(106,225,190,.24)); }
.capability-compare-visual b { position: absolute; top: 10px; left: 11px; color: #fff; font-size: 9px; }
.capability-export-visual > div { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; }
.capability-export-visual b { display: grid; height: 54px; place-items: center; border: 1px solid rgba(111,226,193,.2); border-radius: 11px; color: #9bf0d7; background: rgba(255,255,255,.055); font-size: 12px; }
.capability-progress { height: 3px; margin: 13px clamp(28px, 5vw, 68px) 0; overflow: hidden; border-radius: 99px; background: rgba(7,143,115,.12); }
.capability-progress i { display: block; width: 22%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c99b, #ffe13c); transition: transform .25s ease-out, width .25s ease-out; }

/* FAQ is deliberately calm and spacious after the denser pricing comparison. */
.faq-section { display: grid; min-height: 690px; grid-template-columns: minmax(280px,.72fr) minmax(540px,1.28fr); gap: clamp(45px, 7vw, 110px); align-items: center; margin-top: 22px; padding: clamp(48px, 6vw, 82px); overflow: hidden; border: 1px solid var(--border); border-radius: 32px; color: var(--text); background: radial-gradient(circle at 8% 14%, rgba(16,184,137,.11), transparent 30%), linear-gradient(145deg,#fff,#eff9f5); box-shadow: var(--card-shadow); }
.faq-intro { position: relative; top: auto; align-self:center; }
.faq-intro .step { color: var(--emerald); }
.faq-intro h2 { max-width: 430px; margin-top: 12px; color: var(--text); font-size: clamp(48px, 5.3vw, 72px); line-height: .96; }
.faq-intro > p:not(.step) { max-width: 420px; margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.faq-contact { display: inline-flex; width: auto; min-width: 165px; align-items: center; justify-content: space-between; gap: 28px; margin-top: 27px; padding: 13px 16px; border: 1px solid rgba(115,226,193,.25); border-radius: 999px; color: #072119; background: #79e7c6; box-shadow: 0 15px 34px rgba(14,184,136,.16); font-size: 11px; }
.faq-contact:hover { color: #072119; background: #a0f1d9; box-shadow: 0 18px 38px rgba(14,184,136,.22); transform: translateY(-1px); }
.faq-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: #e6f3ef; }
.faq-tabs button { min-width: 0; padding: 11px; border-radius: 999px; color: var(--muted); background: transparent; box-shadow: none; font-size: 11px; }
.faq-tabs button:hover, .faq-tabs button.active { color: #fff; background: linear-gradient(135deg,#078f73,#075e50); box-shadow: 0 7px 18px rgba(7,94,80,.18); transform: none; }
.faq-panel { margin-top: 22px; border-top: 1px solid var(--border); }
.faq-panel details { border-bottom: 1px solid var(--border); }
.faq-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 650; list-style: none; }
.faq-panel summary::-webkit-details-marker { display: none; }
.faq-panel summary span { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.faq-panel summary span::before, .faq-panel summary span::after { position: absolute; top: 8px; left: 2px; width: 14px; height: 1px; content: ""; background: var(--emerald); transition: transform .2s ease; }
.faq-panel summary span::after { transform: rotate(90deg); }
.faq-panel details[open] summary span::after { transform: rotate(0); }
.faq-panel details > p { margin: -4px 0 19px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 13px; color: var(--muted); background: #f2faf7; font-size: 12px; line-height: 1.65; }

@keyframes creator-scroll { to { transform: translateX(-50%); } }

.oauth-options { display: grid; gap: 9px; margin: 18px 0; }
.oauth-provider { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid #747775; border-radius: 999px; color: #1f1f1f; background: #fff; box-shadow: none; text-align: left; }
.oauth-provider:hover { border-color: #3c4043; box-shadow: 0 3px 10px rgba(60,64,67,.16); transform: none; }
.oauth-provider > span, .oauth-provider > small { float: none; margin: 0; }
.oauth-provider b { font-size: 12px; font-weight: 650; text-align: center; }
.oauth-provider small { display: none; }
.oauth-provider[data-provider-ready="false"] { cursor: help; opacity: .72; }
.provider-logo { display: block; width: 18px; height: 18px; }
.microsoft-provider { border-color: #8c8c8c; }
.microsoft-provider:hover { border-color: #5e5e5e; }
.github-provider { border-color: #24292f; color: #fff; background: #24292f; }
.github-provider:hover { border-color: #24292f; background: #32383f; box-shadow: 0 3px 10px rgba(36,41,47,.18); }
.github-provider small { color: rgba(255,255,255,.6); }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--subtle); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; content: ""; background: var(--border); }
.auth-dialog { width: min(980px, calc(100% - 28px)); background: color-mix(in srgb, var(--surface-solid) 94%, transparent); box-shadow: 0 38px 120px rgba(4,35,29,.32), inset 0 1px 0 rgba(255,255,255,.9); }
.auth-shell { display: grid; grid-template-columns: minmax(330px, .88fr) minmax(410px, 1.12fr); min-height: 680px; padding: 0; }
.auth-panel { align-self: center; min-width: 0; padding: 44px clamp(32px, 4vw, 54px); }
.auth-panel > .auth-brand { margin-bottom: 30px; }
.auth-promise { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: space-between; margin: 10px; padding: 30px; overflow: hidden; border-radius: 19px; color: #fff; background: radial-gradient(circle at 82% 8%, rgba(255,214,37,.2), transparent 28%), radial-gradient(circle at 18% 72%, rgba(18,204,151,.22), transparent 34%), linear-gradient(145deg, #03130f, #075e4d 62%, #098f72); isolation: isolate; }
.auth-promise > * { position: relative; z-index: 2; }
.auth-promise::before { position: absolute; z-index: 0; top: 82px; left: 50%; width: 190px; height: 190px; content: ""; background: url("/static/brand/instaspy-mark-v3.png") center / contain no-repeat; filter: drop-shadow(0 28px 50px rgba(0,0,0,.26)); opacity: .17; transform: translateX(-50%) rotate(-6deg); }
.auth-promise::after { position: absolute; width: 300px; height: 300px; right: -185px; bottom: -170px; z-index: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; content: ""; box-shadow: 0 0 0 55px rgba(255,255,255,.04), 0 0 0 110px rgba(255,255,255,.025); }
.auth-promise-brand { display: flex; align-items: center; gap: 10px; }
.auth-promise-brand .brand-wordmark { color: #fff; }
.auth-promise-copy { margin-top: auto; padding-top: 100px; }
.auth-promise-pill { display: inline-flex; padding: 7px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #b6f5e2; background: rgba(3,27,21,.38); backdrop-filter: blur(12px); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-promise h2 { max-width: 360px; margin-top: 17px; color: #fff; font-size: clamp(36px, 3.4vw, 48px); line-height: .99; text-shadow: 0 5px 22px rgba(0,0,0,.34); }
.auth-promise p { max-width: 350px; margin: 17px 0 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.55; }
.auth-promise ul { display: grid; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }
.auth-promise li { position: relative; padding-left: 22px; color: rgba(255,255,255,.88); font-size: 10px; font-weight: 640; }
.auth-promise li::before { position: absolute; top: -1px; left: 0; display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; content: "✓"; color: #072219; background: #93f0d4; font-size: 8px; font-weight: 900; }
.auth-promise-proof { display: grid; gap: 3px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.auth-promise-proof strong { font-size: 11px; }
.auth-promise-proof span { color: rgba(255,255,255,.56); font-size: 9px; }
.referral-invite-note { display: grid; gap: 4px; margin: 14px 0; padding: 12px 13px; border: 1px solid rgba(7,143,115,.22); border-radius: 12px; color: var(--text); background: linear-gradient(135deg, rgba(7,143,115,.1), rgba(255,214,37,.08)); }
.referral-invite-note strong { color: var(--emerald); font-size: 10px; }
.referral-invite-note span { color: var(--muted); font-size: 8px; line-height: 1.5; }
.auth-dialog .auth-close { z-index: 10; }
.password-field { position: relative; width: 100%; }
.password-field input { width: 100%; padding-right: 50px; }
.password-toggle { position: absolute; top: 50%; right: 8px; display: grid; width: 34px; min-width: 34px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; box-shadow: none; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--emerald); background: rgba(7,143,115,.09); box-shadow: none; transform: translateY(-50%); }
.password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle[data-visible="true"] svg { color: var(--emerald); }

.connect-dialog { width: min(760px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.68); border-radius: 28px; outline: none; color: var(--text); background: color-mix(in srgb, var(--surface-solid) 94%, transparent); box-shadow: 0 42px 130px rgba(4,35,29,.32); backdrop-filter: blur(30px) saturate(135%); }
.connect-dialog::backdrop { background: rgba(4,15,12,.48); backdrop-filter: blur(9px); }
.connect-shell { position: relative; padding: clamp(29px, 5vw, 48px); }
.connect-heading { max-width: 600px; padding-right: 38px; }
.connect-heading h2 { max-width: 590px; font-size: clamp(39px, 6vw, 59px); line-height: .98; }
.connect-heading > p:last-child { max-width: 560px; margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 12px; margin-top: 30px; }
.connect-grid label { display: grid; gap: 8px; color: var(--text); font-size: 9px; font-weight: 720; }
.connect-grid label > span { margin-left: 5px; color: var(--subtle); font-size: 8px; font-weight: 560; }
.connect-grid input, .connect-grid select, .connect-grid textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; outline: none; color: var(--text); background: var(--surface-solid); font: inherit; font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease; }
.connect-grid textarea { min-height: 118px; resize: vertical; line-height: 1.5; }
.connect-grid input:focus, .connect-grid select:focus, .connect-grid textarea:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(7,143,115,.1); }
.connect-wide { grid-column: 1 / -1; }
.connect-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin-top: 19px; padding-top: 18px; border-top: 1px solid var(--border); }
.connect-footer p { color: var(--subtle); font-size: 9px; line-height: 1.45; }
.connect-footer .auth-submit { width: auto; min-width: 205px; margin: 0; }
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.onboarding-dialog { width: min(760px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.68); border-radius: 30px; outline: none; color: var(--text); background: color-mix(in srgb, var(--surface-solid) 92%, transparent); box-shadow: 0 42px 130px rgba(4,35,29,.30); backdrop-filter: blur(30px) saturate(135%); }
.onboarding-dialog::backdrop { background: rgba(4,15,12,.48); backdrop-filter: blur(9px); }
.onboarding-shell { position: relative; padding: 34px 38px 38px; }
.onboarding-brand { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 750; }
.onboarding-skip { position: absolute; top: 35px; right: 38px; width: auto; min-width: 0; padding: 7px 0; color: var(--muted); background: transparent; box-shadow: none; font-size: 10px; }
.onboarding-skip:hover { color: var(--text); box-shadow: none; transform: none; }
.onboarding-heading { max-width: 620px; margin-top: 34px; }
.onboarding-heading h2 { max-width: 610px; font-size: clamp(34px, 5vw, 51px); line-height: 1.02; }
.onboarding-heading > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.onboarding-progress { height: 4px; margin-top: 24px; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }
.onboarding-progress i { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--emerald); transition: width .25s ease; }
.onboarding-step-label { margin: 11px 0 18px; color: var(--subtle); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-step { display: none; margin: 0; padding: 0; border: 0; }
.onboarding-step.active { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onboarding-step legend { grid-column: 1 / -1; margin-bottom: 7px; padding: 0; font-size: 19px; font-weight: 760; letter-spacing: -.025em; }
.choice-card { position: relative; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; min-height: 84px; padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-solid); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.choice-card:hover { border-color: rgba(7,143,115,.48); transform: translateY(-1px); }
.choice-card:has(input:checked) { border-color: var(--emerald); background: rgba(7,143,115,.07); box-shadow: 0 0 0 3px rgba(7,143,115,.08); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--emerald); background: var(--surface-soft); font-size: 18px; font-weight: 800; }
.choice-card:has(input:checked) .choice-symbol { color: var(--ink); background: var(--accent-yellow); }
.choice-card > span:last-child { display: grid; gap: 4px; min-width: 0; }
.choice-card strong { font-size: 12px; }
.choice-card small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.onboarding-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.onboarding-back, .onboarding-next { width: auto; min-width: 110px; text-align: center; }
.onboarding-back { border: 1px solid var(--border); color: var(--muted); background: var(--surface-solid); box-shadow: none; }
.onboarding-back:hover { border-color: var(--emerald); box-shadow: none; }
.onboarding-next { color: var(--ink); background: var(--accent-yellow); box-shadow: 0 10px 24px rgba(190,158,0,.17); }
.onboarding-next span { float: none; margin-left: 18px; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: no-preference) {
  .orbit-card { animation: orbit-float 6s ease-in-out var(--delay) infinite; }
  .hero-reel-lane-one { animation: reel-gallery-left 132s linear infinite; }
  .hero-reel-lane-two { animation: reel-gallery-right 138s linear infinite; }
  .creator-reel-gallery:hover .hero-reel-lane, .creator-reel-gallery:focus-within .hero-reel-lane { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .creator-track { animation: none; }
  .hero-reel-lane { animation: none; }
  .capability-track { scroll-behavior: auto; }
  .faq-panel summary span::after, .capability-progress i { transition: none; }
}

@media (min-width: 921px) and (prefers-reduced-motion: no-preference) {
  body:not(.workspace-mode) .landing-stack-card,
  body.workspace-mode.public-home-mode .landing-stack-card { position: sticky; top: 96px; height: min(760px, calc(100vh - 112px)); min-height: 650px; transform: translateZ(0); transform-origin: center top; backface-visibility: hidden; will-change: transform; }
  body:not(.workspace-mode) .creator-showcase, body.workspace-mode.public-home-mode .creator-showcase { z-index: 10; }
  body:not(.workspace-mode) .capabilities-section, body.workspace-mode.public-home-mode .capabilities-section { z-index: 11; }
  body:not(.workspace-mode) .pricing-section, body.workspace-mode.public-home-mode .pricing-section { z-index: 12; }
  body:not(.workspace-mode) .faq-section, body.workspace-mode.public-home-mode .faq-section { z-index: 13; }
  body:not(.workspace-mode) .enterprise-band, body.workspace-mode.public-home-mode .enterprise-band { z-index: 14; }
}

@keyframes orbit-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rotate)); }
  50% { transform: translate3d(0, -9px, 0) rotate(var(--rotate)); }
}

@keyframes reel-gallery-left {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(calc(-50% - 9px),0,0); }
}

@keyframes reel-gallery-right {
  from { transform: translate3d(calc(-50% - 9px),0,0); }
  to { transform: translate3d(0,0,0); }
}

@media (max-width: 1080px) {
  body.workspace-mode .app-main { margin: 0 22px 0 342px; }
  body.workspace-mode.sidebar-collapsed .app-main { margin-left: 94px; }
  .landing-nav-links { gap: 18px; }
  .nav-connect { display: none; }
  .result-card { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
  .vision-grid { grid-template-columns: repeat(2, 1fr); }
  .orbit-hook { left: 3%; }
  .orbit-cta { right: 1%; }
  .orbit-psychology { left: 1%; }
  .orbit-transcript { left: 1%; }
  .orbit-rehook { right: 3%; }
  .arc-stage .hero-center { width: min(690px, calc(100% - 44px)); }
  .hero-reel-card { width: 128px; flex-basis: 128px; }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .plan-featured { transform: none; }
  .faq-section { grid-template-columns: .8fr 1.2fr; gap: 46px; padding: 54px 44px; }
  .capability-track { grid-auto-columns: clamp(310px, 40vw, 390px); }
}

@media (min-width: 1800px) {
  body.workspace-mode .app-main { margin-right: 28px; }
  .result-list { gap: 22px; }
  .result-card { grid-template-columns: minmax(380px, 430px) minmax(0, 1fr); padding: 20px; }
  .result-content { padding-left: 34px; }
  .batch-report { padding: 40px; }
}

@media (max-width: 920px) {
  .product-seo-hero { grid-template-columns: 1fr; }
  .product-proof { transform: none; }
  body.workspace-mode .app-main { width: min(100% - 26px, 860px); margin: 0 auto; }
  .research-sidebar { transform: translateX(-102%); transition: transform .18s ease-out; }
  body.sidebar-open .research-sidebar { transform: translateX(0); }
  body.workspace-mode .sidebar-toggle { display: grid; }
  .sidebar-collapse { display: none; }
  body.workspace-mode.pricing-focus-mode .app-main { width: min(100% - 26px, 860px); }
  body.workspace-mode.pricing-focus-mode .site-nav { top: 10px; margin-top: 10px; }
  .sidebar-backdrop:not(.hidden) { display: block; }
}

@media (max-width: 920px) {
  main { width: min(100% - 26px, 760px); }
  .site-nav { top: 10px; margin-top: 10px; }
  .site-nav > .brand { margin-right: auto; }
  .landing-nav-links { display: none; }
  .hero { min-height: auto; padding: 46px 0; }
  .arc-stage { min-height: 750px; }
  .arc-stage .hero-center { width: min(620px, calc(100% - 40px)); }
  .arc-stage .hero-center h1 { font-size: clamp(48px, 8vw, 68px); }
  .hero-reel-card { width: 122px; flex-basis: 122px; border-radius: 18px; }
  .hero-reel-lane { gap: 18px; }
  .orbit-stage { min-height: 660px; }
  .hero-center { width: min(620px, 72%); }
  .hero-center h1 { font-size: clamp(52px, 9vw, 76px); }
  .orbit-score { right: 8%; }
  .orbit-pattern { right: 30%; }
  .orbit-hook { left: 2%; }
  .orbit-cta { top: 225px; right: -3%; }
  .orbit-psychology { top: 235px; left: -3%; }
  .orbit-transcript { bottom: 92px; }
  .orbit-broll { bottom: 36px; }
  .orbit-rehook { right: 1%; bottom: 45px; }
  .hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .hero-copy-column { max-width: 680px; }
  .hero-object { width: 410px; max-width: 100%; margin: 0 auto; }
  .scope { grid-template-columns: 1fr; gap: 30px; }
  .landing-band { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .band-action, .email-action { justify-self: start; }
  .enterprise-band { grid-template-columns: 1fr; align-items: start; }
  .enterprise-action { width: min(520px, 100%); }
  .faq-section { min-height: 0; grid-template-columns: 1fr; }
  .faq-intro { position: relative; top: auto; }
  .faq-intro h2 { max-width: 620px; }
  .capabilities-heading { align-items: start; }
  .batch-columns, .detail-copy { grid-template-columns: 1fr; }
  .public-showcase-heading { align-items: stretch; flex-direction: column; }
  .showcase-close { align-self: flex-start; }
}

@media (max-width: 700px) {
  .product-proof-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(48px, 13vw, 72px); }
  .hero-copy { font-size: 14px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-primary, .hero-secondary { justify-content: space-between; width: 100%; }
  .section-heading, .actions { align-items: stretch; flex-direction: column; }
  button { width: 100%; }
  .site-nav .nav-auth { width: auto; }
  .pipeline-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .pipeline-strip i { display: none; }
  .summary-grid, .metrics { grid-template-columns: repeat(2, 1fr); }
  .result-card { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-summary { position: relative; top: auto; }
  .seo-nav-links { display: none; }
  .seo-feature-grid, .seo-plan-grid { grid-template-columns: 1fr; }
  .seo-actions { align-items: stretch; flex-direction: column; }
  .seo-actions .hero-primary, .seo-actions .secondary-button { width: 100%; }
  .media-column { position: relative; top: auto; width: min(430px, 100%); margin: 0 auto 16px; }
  .video-shell { max-height: 680px; }
  .result-content { padding: 12px 4px 12px; }
  .analysis-grid, .psychology-list, .vision-grid, .visual-list-grid, .visual-timeline, .strategy-grid { grid-template-columns: 1fr; }
  .scope-grid { grid-template-columns: 1fr; }
  .arc-hero { padding: 25px 0 34px; }
  .arc-stage { min-height: 760px; }
  .arc-stage .hero-center { top: 47%; width: calc(100% - 34px); }
  .arc-stage .hero-center h1 { font-size: clamp(43px, 12vw, 58px); }
  .arc-stage .hero-center .hero-copy { max-width: 450px; font-size: 13px; }
  .arc-stage .hero-center .hero-primary { width: min(100%, 360px); min-width: 0; }
  .arc-stage .hero-center .hero-note { margin-top: 10px; }
  .hero-reel-lane { gap: 15px; padding-inline: 8px; }
  .hero-reel-lane-one { top: 10px; }
  .hero-reel-lane-two { bottom: 10px; }
  .hero-reel-card { grid-template-rows: auto 50px; width: 112px; flex-basis: 112px; border-radius: 16px; }
  .hero-reel-copy { padding: 8px 10px 9px; }
  .hero-reel-copy strong, .hero-reel-copy small { font-size: 7px; }
  .creator-showcase-copy { padding-top: 50px; }
  .creator-showcase-copy h2 { font-size: clamp(38px, 10vw, 54px); }
  .pricing-section { padding: 42px 20px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .plan-top { min-height: 0; }
  .capabilities-section { min-height: 0; padding: 42px 0 34px; border-radius: 24px; }
  .capabilities-heading { align-items: stretch; flex-direction: column; padding: 0 20px 28px; }
  .capabilities-heading h2 { font-size: clamp(38px, 10vw, 52px); }
  .capability-controls { align-self: flex-end; }
  .capability-track { grid-auto-columns: min(82vw, 350px); padding: 0 20px 14px; scroll-padding-inline: 20px; }
  .capability-card { height: 410px; grid-template-rows: 230px 1fr; }
  .capability-progress { margin-inline: 20px; }
  .faq-section { min-height: 0; padding: 43px 22px; border-radius: 24px; }
  .faq-intro h2 { font-size: 48px; }
  .faq-tabs button { width: auto; padding-inline: 7px; }
  .faq-panel summary { font-size: 12px; }
  .auth-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 24px); }
  .auth-shell { display: block; min-height: 0; }
  .auth-promise { display: none; }
  .auth-panel { padding: 34px 30px; }
  .connect-grid { grid-template-columns: 1fr; }
  .connect-wide { grid-column: auto; }
  .connect-footer { grid-template-columns: 1fr; }
  .connect-footer .auth-submit { width: 100%; }
  .orbit-stage { min-height: 665px; border-radius: 28px; }
  .hero-center { width: calc(100% - 42px); }
  .hero-center h1 { font-size: clamp(47px, 13vw, 66px); }
  .hero-center .hero-copy { font-size: 14px; }
  .orbit-card { padding: 12px 13px; }
  .orbit-hook { top: 28px; left: 18px; }
  .orbit-score { top: 25px; right: 16px; }
  .orbit-pattern, .orbit-psychology, .orbit-cta, .orbit-transcript { display: none; }
  .orbit-broll { bottom: 22px; left: 18px; width: 210px; }
  .orbit-rehook { right: 16px; bottom: 42px; width: 190px; }
  .onboarding-step.active { grid-template-columns: 1fr; }
  .onboarding-actions { position: sticky; bottom: 0; padding-top: 12px; background: color-mix(in srgb, var(--surface-solid) 91%, transparent); }
  .public-showcase { padding: 24px 14px; border-radius: 25px; }
  .public-showcase-heading { padding: 10px 8px 22px; }
  .showcase-index { top: 78px; margin-right: -4px; margin-left: -4px; }
  .showcase-conversion { align-items: stretch; flex-direction: column; padding: 23px; }
  .showcase-conversion .hero-primary { width: 100%; }
}

@media (max-width: 480px) {
  main { width: min(100% - 18px, 440px); }
  .site-nav { min-height: 62px; gap: 5px; padding: 8px 9px 8px 12px; }
  .brand-logo { width: 36px; height: 36px; }
  .site-nav .brand-wordmark { display: none; }
  .auth-brand .brand-logo { width: 36px; }
  .landing-nav-actions { gap: 5px; }
  .nav-auth { padding: 9px 12px; font-size: 11px; }
  .theme-toggle { width: 36px; min-width: 36px; padding: 7px; }
  .theme-toggle span { display: none; }
  .account-trigger { width: 36px; min-width: 36px; padding: 7px; }
  .account-trigger #account-label { display: none; }
  .legal-main { width: min(100% - 18px, 440px); }
  .legal-nav .brand-wordmark { display: inline; }
  .legal-hero { padding: 36px 25px; border-radius: 24px; }
  .legal-content { padding: 28px 22px; }
  .profile-documentation-links { grid-template-columns: 1fr; }
  .hero { padding: 28px 0; }
  .arc-stage { min-height: 730px; }
  .arc-stage .hero-center { top: 46%; width: calc(100% - 26px); }
  .arc-stage .hero-center h1 { font-size: clamp(39px, 11.5vw, 49px); }
  .arc-stage .hero-center .eyebrow { max-width: 290px; line-height: 1.45; }
  .arc-stage .hero-center .hero-copy { max-width: 330px; }
  .arc-stage .hero-center .hero-primary { width: min(100%, 340px); min-width: 0; }
  .hero-reel-lane-one { top: 8px; }
  .hero-reel-lane-two { bottom: 8px; }
  .hero-reel-card { grid-template-rows: auto 46px; width: 98px; flex-basis: 98px; border-radius: 14px; }
  .hero-reel-artwork small { top: 7px; left: 7px; padding: 5px 6px; font-size: 4.5px; }
  .hero-reel-artwork i { right: 7px; bottom: 7px; width: 24px; height: 24px; font-size: 6px; }
  .hero-reel-copy { gap: 3px; padding: 7px 8px; }
  .hero-reel-copy strong, .hero-reel-copy small { font-size: 6px; }
  .orbit-stage { min-height: 680px; }
  .hero-center { width: calc(100% - 28px); }
  .hero-center .eyebrow { max-width: 250px; line-height: 1.5; }
  .hero-center .hero-copy { max-width: 340px; }
  .orbit-hook, .orbit-score, .orbit-rehook { display: none; }
  .orbit-pattern { display: grid; top: 25px; right: 14px; min-width: 172px; }
  .orbit-broll { bottom: 19px; left: 9px; width: 190px; }
  .hero-grid, .hero-copy-column { width: 100%; min-width: 0; }
  .hero-object { width: 100%; height: 445px; transform: scale(.86); transform-origin: top center; margin-bottom: -55px; }
  .reel-preview { right: auto; left: 50%; animation: none; transform: translateX(-50%) rotate(1deg); }
  .insight-score { left: -10px; }
  .insight-pattern { right: -6px; }
  .workspace, .progress-panel, .results, .scope { padding: 20px; border-radius: 20px; }
  .workspace-composer { min-height: calc(100vh - 98px); padding: 46px 18px; border-radius: 24px; }
  .workspace-composer h2 { font-size: clamp(34px, 10vw, 48px); }
  .composer-kicker { margin-bottom: 15px; }
  .reel-composer { margin-top: 24px; border-radius: 20px; }
  .reel-composer textarea { min-height: 150px; padding: 20px 18px 8px; font-size: 13px; }
  .composer-footer { align-items: stretch; flex-direction: column; padding: 10px 12px 12px; }
  .composer-status { justify-content: center; }
  .workspace-composer #start { width: 100%; }
  .landing-band { padding: 24px 20px; border-radius: 20px; }
  .email-action { max-width: 100%; font-size: 11px; overflow-wrap: anywhere; }
  .research-sidebar .history-panel { padding: 14px; }
  textarea { min-height: 185px; padding: 16px; font-size: 10px; }
  .export-actions { width: 100%; }
  .secondary-button { flex: 1; justify-content: center; }
  footer { flex-direction: column; gap: 7px; }
  .auth-dialog { width: calc(100% - 18px); max-height: calc(100vh - 18px); }
  .auth-panel { padding: 24px 18px 22px; }
  .auth-panel > .auth-brand { margin-bottom: 24px; }
  .auth-dialog h2 { font-size: 32px; }
  .enterprise-band { padding: 34px 23px; border-radius: 24px; }
  .enterprise-copy h2 { font-size: 42px; }
  .enterprise-action { padding: 20px; }
  .connect-shell { padding: 30px 21px 24px; }
  .onboarding-shell { padding: 27px 20px 28px; }
  .onboarding-brand .brand-logo { width: 36px; }
  .onboarding-skip { top: 28px; right: 20px; }
  .onboarding-heading { margin-top: 30px; }
  .onboarding-heading h2 { font-size: 34px; }
  .choice-card { min-height: 78px; }
  .onboarding-back, .onboarding-next { width: auto; min-width: 92px; }
  .result-card { padding: 10px; }
  .showcase-report-card { scroll-margin-top: 150px; }
  .showcase-report-number { top: 8px; left: 8px; }
  .video-controls { grid-template-columns: 32px auto minmax(52px, 1fr) auto 30px; gap: 6px; padding-right: 8px; padding-left: 8px; }
  .video-fullscreen { display: none; }
}