/* ============================================================
   Design tokens - Airfleet purple direction
   (subset inlined from design-system/.../colors_and_type.css)
   ============================================================ */
:root{
  --accent:#6E32E0; --accent-deep:#544CC9; --accent-bright:#7B75D6;
  --accent-tint:rgba(96,121,255,.13); --accent-tint-strong:rgba(110,50,224,.10);
  --blue:#6079FF;
  --page:#FFFFFF; --surface:#FFFFFF; --muted:#F2F2F5; --inset:#ECECF0;
  --border:#DADADD; --border-soft:#E7E7EA;
  --ink:#05041F; --fg:#05041F; --fg-muted:#6D6D6F; --fg-subtle:#A3A3A5; --on-accent:#FFFFFF;
  --success:#2E9E5C; --success-bg:#E4F4EA; --success-fg:#1B7A43;
  --warning:#E89D45; --danger:#FD6B6B;

  --font-sans:'Hanken Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Fraunces','Iowan Old Style',Georgia,serif;
  --font-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  --shadow-sm:0 2px 6px rgba(5,4,31,.06),0 1px 2px rgba(5,4,31,.04);
  --shadow-md:0 6px 20px rgba(5,4,31,.08),0 2px 6px rgba(5,4,31,.05);
  --shadow-lg:0 18px 48px rgba(5,4,31,.14),0 6px 16px rgba(5,4,31,.08);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--page); color:var(--fg);
  font-family:var(--font-sans); font-size:15px; line-height:24px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1300px; margin:0 auto; padding:0 32px}
a{color:inherit; text-decoration:none}
.eyebrow{font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--accent-deep)}
.serif{font-family:var(--font-serif); font-weight:400; letter-spacing:-.01em; color:var(--ink)}

/* buttons (match preview/buttons.html) */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1; cursor:pointer;
  border:1px solid transparent; transition:background var(--ease-out) .15s, transform var(--ease-out) .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:transparent; color:var(--fg); border-color:var(--border)}
.btn-ghost:hover{background:var(--muted)}
.btn svg{width:15px; height:15px}

/* sparkle icon */
.sp{display:inline-block; color:var(--accent)}
.sp svg{display:block}

/* ============================================================
   Top nav
   ============================================================ */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border-soft)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; letter-spacing:-.01em}
.brand .mark{width:26px; height:26px; border-radius:7px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; color:var(--accent-bright)}
.brand .mark svg{width:15px; height:15px}
.brand-logo{height:30px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:26px; font-size:14px; color:var(--fg-muted)}
.nav-links a:hover{color:var(--fg)}
.nav-login{font-weight:500; color:var(--fg)}
.nav-login:hover{color:var(--accent-deep)}
@media(max-width:760px){.nav-links a.nav-section{display:none}}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative; text-align:center; padding:78px 0 88px}
.hero .glow{position:absolute; left:0; right:0; top:120px; height:640px; margin:0 auto; max-width:1000px;
  background:radial-gradient(closest-side, rgba(96,121,255,.20), rgba(96,121,255,0) 72%);
  pointer-events:none; z-index:0}
.hero .glow.two{top:30px; max-width:680px;
  background:radial-gradient(closest-side, rgba(110,50,224,.15), rgba(110,50,224,0) 70%)}
.hero-inner{position:relative; z-index:1; max-width:900px; margin:0 auto}
.hero-title{font-family:var(--font-serif); font-weight:400; margin:0 0 16px; letter-spacing:-.02em}
.hero-title .l1{display:block; font-size:66px; line-height:1.0; color:var(--ink)}
/* "sounds like your brand": a brush-shaped mask PAINTS ITSELF ON across the words
   (mask grows left to right with a ragged brush edge). White words reveal as the
   purple paints behind them. Hugs the text so it isn't too tall. */
.hero-title .l2{display:inline-block; position:relative; z-index:0; font-size:60px; line-height:1.18; font-style:italic;
  color:#fff; margin-top:8px; padding:.05em .22em .12em}
.hero-title .l2::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--accent); transform:rotate(-1deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2044'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23fff'%20d='M3%209%20C30%205%2070%207%2095%206%20L107%2011%20L99%2016%20L109%2021%20L100%2026%20L108%2032%20L97%2037%20C70%2039%2030%2038%205%2036%20C2%2027%202%2018%203%209%20Z'/%3E%3Cpath%20fill='%23fff'%20d='M103%209%20h15%20l-4%203%20-12%20-2%20z'/%3E%3Cpath%20fill='%23fff'%20d='M101%2024%20h17%20l-5%203%20-13%20-2%20z'/%3E%3C/svg%3E") left center/0% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2044'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23fff'%20d='M3%209%20C30%205%2070%207%2095%206%20L107%2011%20L99%2016%20L109%2021%20L100%2026%20L108%2032%20L97%2037%20C70%2039%2030%2038%205%2036%20C2%2027%202%2018%203%209%20Z'/%3E%3Cpath%20fill='%23fff'%20d='M103%209%20h15%20l-4%203%20-12%20-2%20z'/%3E%3Cpath%20fill='%23fff'%20d='M101%2024%20h17%20l-5%203%20-13%20-2%20z'/%3E%3C/svg%3E") left center/0% 100% no-repeat;
  animation:l2brush 1s var(--ease-out) .4s forwards}
@keyframes l2brush{to{-webkit-mask-size:128% 100%; mask-size:128% 100%}}
@media(prefers-reduced-motion:reduce){.hero-title .l2::before{-webkit-mask-size:128% 100%; mask-size:128% 100%; animation:none}}
.hero-sub{font-size:24px; line-height:1.2; font-weight:500; letter-spacing:-.01em; color:var(--ink); margin:0 0 14px}
.hero-desc{font-size:16px; line-height:26px; color:var(--fg-muted); max-width:560px; margin:0 auto 28px}
.hero .ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:2px}
.hero .ctas .btn{padding:15px 30px; font-size:16px; font-weight:600; border-radius:var(--r-md)}
.hero .ctas .btn svg{width:17px; height:17px}
.hero .ctas .btn-primary{box-shadow:0 10px 24px rgba(110,50,224,.30)}
.hero .ctas .btn-primary:hover{box-shadow:0 14px 32px rgba(110,50,224,.40)}
.hero .ctas .btn-ghost{border-width:1.5px}
@media(max-width:680px){.hero .ctas .btn{padding:14px 24px; font-size:15px}}
/* video below the copy on a 3D diagonal tilt; flattens on hover so it's watchable */
.hero-media{position:relative; z-index:1; margin:56px auto 0; max-width:880px; perspective:1700px}
.hero-video{position:relative; transform:rotateX(9deg) rotateY(-9deg) rotate(-1.5deg); transform-style:preserve-3d;
  transition:transform .6s var(--ease-out)}
.hero-video:hover{transform:rotateX(0) rotateY(0) rotate(0)}
.hero-video .video-frame{box-shadow:var(--shadow-lg)}
@media(max-width:860px){
  .hero-title .l1{font-size:50px} .hero-title .l2{font-size:44px}
  .hero-sub{font-size:21px}
  .hero-media{perspective:none; margin-top:40px}
  .hero-video{transform:none}
}
@media(max-width:680px){.hero{padding:56px 0 56px} .hero-title .l1{font-size:38px} .hero-title .l2{font-size:34px} .hero-sub{font-size:19px}}

/* ============================================================
   Feature sections
   ============================================================ */
.feature{padding:60px 0; border-top:1px solid var(--border-soft)}
.feature .grid{display:grid; grid-template-columns:0.78fr 1.22fr; gap:48px; align-items:center}
/* flipped rows: mirror the columns so the art panel stays the WIDE column on the left */
.feature.flip .grid{grid-template-columns:1.22fr 0.78fr}
.feature.flip .copy{order:2}
.feature.flip .stage{order:1}
.copy .eyebrow{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.copy h2{font-family:var(--font-serif); font-weight:400; font-size:34px; line-height:1.12;
  letter-spacing:-.015em; color:var(--ink); margin:0 0 14px}
.copy p{font-size:16px; line-height:26px; color:var(--fg-muted); margin:0 0 18px; max-width:440px}
.copy ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.copy li{display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--fg)}
.copy li svg{width:17px; height:17px; color:var(--success); flex-shrink:0; margin-top:2px}
@media(max-width:860px){
  .feature .grid,
  .feature.flip .grid{grid-template-columns:1fr; gap:30px}
  .feature.flip .copy{order:1} .feature.flip .stage{order:2}
}

/* ---- mock app-card frame ---- */
/* art panel: landscape, with extra top space so the giant background word shows above the card */
.stage{position:relative; padding:86px 46px 40px; border-radius:var(--r-xl); overflow:hidden;
  background:var(--sand,#F2F2F5) center top/cover no-repeat}
/* per-feature background art (compressed webp in assets/) */
#brand .stage{background-image:url("assets/brand.webp")}
#seo .stage{background-image:url("assets/rank.webp")}
#publish .stage{background-image:url("assets/polish.webp")}
#plan .stage{background-image:url("assets/plan.webp")}
#opportunities .stage{background-image:url("assets/growth.webp")}
#intel .stage{background-image:url("assets/ideas.webp")}
@media(max-width:680px){.stage{padding:58px 18px 20px}}
.mock{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; min-height:330px}
.mock .topbar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--border-soft);
  background:var(--muted)}
.mock .topbar .dot{width:9px; height:9px; border-radius:50%; background:#D3D3D7}
.mock .topbar .crumb{margin-left:8px; font-family:var(--font-mono); font-size:11px; color:var(--fg-subtle)}
.mock .body{position:relative; padding:18px}

/* ---- shared mock primitives ---- */
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:var(--r-pill);
  font-size:12px; font-weight:500; line-height:1}
.chip .cdot{width:6px; height:6px; border-radius:50%}
.chip.idea{background:#ECE6F6; color:#5A4A85} .chip.idea .cdot{background:#8C7BBE}
.chip.draft{background:#ECE9E1; color:#5C5950} .chip.draft .cdot{background:#6F6B5E}
.chip.review{background:#FCEFD9; color:#B97320} .chip.review .cdot{background:#E89730}
.chip.sched{background:#E1ECF9; color:#2D6BB8} .chip.sched .cdot{background:#4A8BD9}
.chip.pub{background:#E4F4EA; color:#1B7A43} .chip.pub .cdot{background:#2E9E5C}
.chip.ai{background:var(--accent-tint); color:var(--accent-deep)}
.tag{background:var(--muted); color:var(--fg-muted); padding:3px 8px; border-radius:var(--r-xs);
  font-family:var(--font-mono); font-size:11px}
.tag.accent{background:var(--accent-tint); color:var(--accent-deep)}

.spinner{width:13px; height:13px; border-radius:50%; border:2px solid rgba(110,50,224,.25);
  border-top-color:var(--accent); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* fake cursor */
.cursor{position:absolute; width:20px; height:20px; z-index:6; pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(5,4,31,.3))}
.cursor svg{width:100%; height:100%}

/* ============================================================
   Animation gating - paused until section is in view,
   off entirely under reduced-motion (markup shows resting state)
   ============================================================ */
.anim{animation-play-state:paused}
.feature.in-view .anim{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.anim{animation:none!important}}

/* ============================================================
   F1 - Brand context
   ============================================================ */
.f1-scan{position:absolute; left:0; right:0; top:0; height:64px; z-index:4;
  background:linear-gradient(180deg, rgba(96,121,255,0), rgba(96,121,255,.18) 60%, rgba(96,121,255,0));
  animation:f1scan 8s var(--ease-out) infinite}
@keyframes f1scan{0%{transform:translateY(-30px); opacity:0}4%{opacity:1}24%{opacity:1}
  30%{transform:translateY(280px); opacity:0}100%{transform:translateY(280px); opacity:0}}
.f1-loader{position:absolute; top:16px; left:18px; display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:var(--r-pill); background:var(--accent-tint); color:var(--accent-deep);
  font-size:12px; font-weight:500; z-index:5; animation:f1loader 8s linear infinite}
@keyframes f1loader{0%{opacity:0}3%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
.f1-cards{display:flex; flex-direction:column; gap:11px}
.f1-card{border:1px solid var(--border); border-radius:var(--r-md); padding:12px 13px; background:var(--surface)}
.f1-card .h{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.f1-card .lbl{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-subtle)}
.f1-card .name{font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px}
.f1-row{display:flex; gap:6px; flex-wrap:wrap}
.f1-a{animation:f1pop 8s var(--ease-spring) infinite}
.f1-b{animation:f1pop 8s var(--ease-spring) infinite; animation-delay:0s}
.f1-c{animation:f1pop 8s var(--ease-spring) infinite}
/* distinct appear windows baked into keyframes (no animation-delay, so loops stay in sync) */
.f1-a{animation-name:f1popA} .f1-b{animation-name:f1popB} .f1-c{animation-name:f1popC}
@keyframes f1popA{0%,30%{opacity:0;transform:translateY(12px) scale(.96)}38%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes f1popB{0%,38%{opacity:0;transform:translateY(12px) scale(.96)}46%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes f1popC{0%,46%{opacity:0;transform:translateY(12px) scale(.96)}54%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}

/* ============================================================
   F2 - SEO & GEO
   ============================================================ */
.f2-chat{display:flex; flex-direction:column; gap:10px}
.f2-userrow{display:flex; justify-content:flex-end}
.f2-user{max-width:74%; background:var(--ink); color:#fff; padding:9px 13px; font-size:13px; line-height:20px;
  border-radius:16px 16px 4px 16px}
.f2-arow{display:flex; gap:9px; align-items:flex-start}
.f2-av{width:26px; height:26px; border-radius:50%; flex-shrink:0; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center}
.f2-av svg{width:13px; height:13px}
.f2-think{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--r-pill);
  background:var(--muted); color:var(--fg-muted); font-size:12px; animation:f2think 9s linear infinite}
@keyframes f2think{0%{opacity:0}3%{opacity:1}22%{opacity:1}27%{opacity:0}100%{opacity:0}}
.f2-kw{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; animation:f2panel 9s var(--ease-out) infinite}
@keyframes f2panel{0%,24%{opacity:0;transform:translateY(8px)}30%{opacity:1;transform:none}100%{opacity:1}}
.f2-kwhead{display:flex; justify-content:space-between; padding:7px 12px; background:var(--muted);
  font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-subtle)}
.f2-kwrow{display:flex; align-items:center; justify-content:space-between; padding:8px 12px; font-size:13px;
  border-top:1px solid var(--border-soft)}
.f2-kwrow .term{font-weight:500}
.f2-kwrow .meta{font-family:var(--font-mono); font-size:11px; color:var(--fg-subtle)}
.f2-kwrow.top{background:var(--accent-tint-strong)}
.f2-kwrow.top .term{color:var(--accent-deep)}
.f2-kwrow.r1{animation:f2row 9s var(--ease-out) infinite; animation-name:f2row1}
.f2-kwrow.r2{animation:f2row 9s var(--ease-out) infinite; animation-name:f2row2}
.f2-kwrow.r3{animation:f2row 9s var(--ease-out) infinite; animation-name:f2row3}
.f2-kwrow.r4{animation:f2row 9s var(--ease-out) infinite; animation-name:f2row4}
@keyframes f2row1{0%,30%{opacity:0;transform:translateX(-8px)}35%{opacity:1;transform:none}100%{opacity:1}}
@keyframes f2row2{0%,34%{opacity:0;transform:translateX(-8px)}39%{opacity:1;transform:none}100%{opacity:1}}
@keyframes f2row3{0%,38%{opacity:0;transform:translateX(-8px)}43%{opacity:1;transform:none}100%{opacity:1}}
@keyframes f2row4{0%,42%{opacity:0;transform:translateX(-8px)}47%{opacity:1;transform:none}100%{opacity:1}}
.f2-geo{margin-top:11px; border:1px solid var(--border); border-radius:var(--r-md); padding:11px 13px;
  animation:f2geo 9s var(--ease-out) infinite}
@keyframes f2geo{0%,52%{opacity:0;transform:translateY(8px)}58%{opacity:1;transform:none}100%{opacity:1}}
.f2-geolabel{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--fg-muted); margin-bottom:9px}
.f2-geolabel .working{animation:f2working 9s linear infinite}
@keyframes f2working{0%,76%{opacity:1}79%,100%{opacity:0;display:none}}
.f2-geolabel .done{display:inline-flex; align-items:center; gap:6px; color:var(--success-fg); font-weight:600; opacity:0;
  animation:f2done 9s var(--ease-spring) infinite}
@keyframes f2done{0%,77%{opacity:0;transform:scale(.9)}82%,100%{opacity:1;transform:none}}
.f2-bar{height:7px; border-radius:var(--r-pill); background:var(--muted); overflow:hidden}
.f2-fill{height:100%; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent),var(--blue)); animation:f2fill 9s var(--ease-out) infinite}
@keyframes f2fill{0%,56%{width:0}76%{width:100%}100%{width:100%}}

/* ============================================================
   F3 - Publishing flow
   ============================================================ */
.f3-stepper{display:flex; align-items:center; gap:5px; flex-wrap:nowrap; margin-bottom:0; overflow:hidden}
.f3-step{display:flex; align-items:center; gap:5px; padding:5px 9px; border-radius:var(--r-pill);
  font-size:11px; font-weight:500; color:var(--fg-muted); background:var(--muted); position:relative; white-space:nowrap}
.f3-step .chk{width:14px; height:14px; border-radius:50%; background:var(--success); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.5)}
.f3-step .chk svg{width:9px; height:9px}
.f3-sep{color:var(--fg-subtle); font-size:13px}
.f3-step.s1{animation:f3lit 9s linear infinite; animation-name:f3lit1}
.f3-step.s2{animation:f3lit 9s linear infinite; animation-name:f3lit2}
.f3-step.s3{animation:f3lit 9s linear infinite; animation-name:f3lit3}
.f3-step.s4{animation:f3lit 9s linear infinite; animation-name:f3lit4}
.f3-step.s5{animation:f3lit 9s linear infinite; animation-name:f3lit5}
@keyframes f3lit1{0%,8%{background:var(--muted);color:var(--fg-muted)}12%,100%{background:var(--accent-tint);color:var(--accent-deep)}}
@keyframes f3lit2{0%,18%{background:var(--muted);color:var(--fg-muted)}22%,100%{background:var(--accent-tint);color:var(--accent-deep)}}
@keyframes f3lit3{0%,28%{background:var(--muted);color:var(--fg-muted)}32%,100%{background:var(--accent-tint);color:var(--accent-deep)}}
@keyframes f3lit4{0%,38%{background:var(--muted);color:var(--fg-muted)}42%,100%{background:var(--accent-tint);color:var(--accent-deep)}}
@keyframes f3lit5{0%,48%{background:var(--muted);color:var(--fg-muted)}52%,100%{background:var(--accent-tint);color:var(--accent-deep)}}
.f3-step.s1 .chk{animation:f3chk 9s var(--ease-spring) infinite; animation-name:f3chk1}
.f3-step.s2 .chk{animation:f3chk 9s var(--ease-spring) infinite; animation-name:f3chk2}
.f3-step.s3 .chk{animation:f3chk 9s var(--ease-spring) infinite; animation-name:f3chk3}
.f3-step.s4 .chk{animation:f3chk 9s var(--ease-spring) infinite; animation-name:f3chk4}
@keyframes f3chk1{0%,12%{opacity:0;transform:scale(.5)}16%,100%{opacity:1;transform:none}}
@keyframes f3chk2{0%,22%{opacity:0;transform:scale(.5)}26%,100%{opacity:1;transform:none}}
@keyframes f3chk3{0%,32%{opacity:0;transform:scale(.5)}36%,100%{opacity:1;transform:none}}
@keyframes f3chk4{0%,42%{opacity:0;transform:scale(.5)}46%,100%{opacity:1;transform:none}}
.f3-pubwrap{display:flex; justify-content:center; margin-top:46px}
.f3-pubbtn{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--r-sm);
  background:var(--accent); color:#fff; font-size:13px; font-weight:500; animation:f3btn 9s var(--ease-out) infinite}
.f3-pubbtn svg{width:14px;height:14px}
@keyframes f3btn{0%,54%{transform:scale(1); opacity:1}
  58%{box-shadow:0 0 0 0 rgba(110,50,224,.45)}
  60%{transform:scale(.92)}
  64%{transform:scale(1)}
  68%{box-shadow:0 0 0 9px rgba(110,50,224,0)}
  80%{opacity:1}
  86%,100%{opacity:0; transform:scale(.96)}}
.f3-cursor{top:auto; left:0; animation:f3cursor 9s var(--ease-out) infinite}
@keyframes f3cursor{
  0%{left:7%; top:32px} 12%{left:15%; top:32px} 24%{left:31%; top:32px}
  36%{left:49%; top:32px} 48%{left:70%; top:32px}
  56%{left:46%; top:114px} 60%{left:45%; top:117px} 64%{left:46%; top:114px}
  100%{left:46%; top:114px}}
.f3-toast{position:absolute; right:16px; bottom:64px; display:inline-flex; align-items:center; gap:8px;
  padding:9px 13px; border-radius:var(--r-md); background:var(--ink); color:#fff; font-size:12px;
  box-shadow:var(--shadow-md); animation:f3toast 9s var(--ease-out) infinite}
@keyframes f3toast{0%,64%{opacity:0;transform:translateY(8px)}68%,82%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(8px)}}
.f3-postwrap{position:absolute; left:18px; right:18px; top:52%; transform:translateY(-50%)}
.f3-post{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px;
  display:flex; gap:13px; align-items:flex-start; box-shadow:var(--shadow-md);
  animation:f3post 9s var(--ease-out) infinite}
@keyframes f3post{0%,82%{opacity:0;transform:translateY(14px)}88%,100%{opacity:1;transform:none}}
.f3-thumb{width:64px; height:64px; border-radius:var(--r-md); flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--blue))}
.f3-post .t{font-size:14px; font-weight:600; color:var(--ink); margin-bottom:5px; line-height:1.3}
.f3-post .u{font-family:var(--font-mono); font-size:11px; color:var(--fg-subtle)}
.f3-post .ex{font-size:11px; color:var(--fg-muted); margin-top:7px; line-height:1.45; max-width:240px}

/* ============================================================
   F4 - Content plan + calendar
   ============================================================ */
.f4-layer{position:absolute; left:18px; right:18px; top:12px; bottom:10px}
.f4-plan{animation:f4plan 11s var(--ease-out) infinite}
@keyframes f4plan{0%{opacity:1}50%{opacity:1}56%,94%{opacity:0; pointer-events:none}100%{opacity:0}}
.f4-cal{opacity:0; animation:f4cal 11s var(--ease-out) infinite}
@keyframes f4cal{0%,50%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}
.f4-chatline{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent-deep); font-size:12px; font-weight:500; margin-bottom:9px;
  animation:f4line 11s linear infinite}
@keyframes f4line{0%{opacity:0}2%{opacity:1}18%{opacity:1}24%{opacity:0}100%{opacity:0}}
.f4-months{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.f4-col{border:1px solid var(--border); border-radius:var(--r-md); padding:9px; background:var(--surface)}
.f4-col .mh{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-subtle); margin-bottom:6px}
.f4-cluster{font-size:11px; font-weight:600; color:var(--accent-deep); margin-bottom:6px; display:flex; align-items:center; gap:5px}
.f4-cluster::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0}
.f4-topic{font-size:10px; color:var(--fg-muted); padding:4px 6px; background:var(--muted); border-radius:var(--r-xs); margin-bottom:4px; line-height:1.25}
.f4-col.c1{animation:f4colpop 11s var(--ease-out) infinite; animation-name:f4col1}
.f4-col.c2{animation:f4colpop 11s var(--ease-out) infinite; animation-name:f4col2}
.f4-col.c3{animation:f4colpop 11s var(--ease-out) infinite; animation-name:f4col3}
@keyframes f4col1{0%,22%{opacity:0;transform:translateY(12px)}28%,100%{opacity:1;transform:none}}
@keyframes f4col2{0%,28%{opacity:0;transform:translateY(12px)}34%,100%{opacity:1;transform:none}}
@keyframes f4col3{0%,34%{opacity:0;transform:translateY(12px)}40%,100%{opacity:1;transform:none}}
.f4-done{display:inline-flex; align-items:center; gap:7px; margin-top:9px; padding:6px 11px; border-radius:var(--r-pill);
  background:var(--success-bg); color:var(--success-fg); font-size:12px; font-weight:600;
  animation:f4done 11s var(--ease-spring) infinite}
@keyframes f4done{0%,42%{opacity:0;transform:scale(.9)}47%,52%{opacity:1;transform:none}56%,100%{opacity:0}}
/* calendar */
.f4-calhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.f4-calhead .m{font-size:14px; font-weight:600; color:var(--ink)}
.f4-wd{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:5px}
.f4-wd span{font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-subtle); text-align:center}
.f4-days{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.f4-day{aspect-ratio:1/.82; border:1px solid var(--border-soft); border-radius:var(--r-xs); padding:4px;
  font-size:9px; color:var(--fg-subtle); position:relative}
.f4-adot{position:absolute; left:4px; right:4px; bottom:4px; height:5px; border-radius:2px; opacity:0}
.f4-adot.a{background:var(--accent)} .f4-adot.b{background:var(--blue)} .f4-adot.c{background:var(--warning)}
.f4-adot.show{animation:f4dot 11s var(--ease-spring) infinite}
@keyframes f4dot{0%,60%{opacity:0;transform:scaleX(.2)}66%,92%{opacity:1;transform:none}100%{opacity:0}}

/* ============================================================
   F5 - Optimization opportunities (GSC)
   ============================================================ */
.f5-header{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.f5-gsc{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-pill);
  background:var(--success-bg); color:var(--success-fg); font-size:12px; font-weight:500}
.f5-gsc .live{width:7px; height:7px; border-radius:50%; background:var(--success); animation:f5pulse 1.6s ease-in-out infinite}
@keyframes f5pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,158,92,.5)}50%{box-shadow:0 0 0 5px rgba(46,158,92,0)}}
/* three states overlap in one cell and cross-fade by opacity, so a pill is ALWAYS visible (never blanks out) */
.f5-optall{display:grid; align-items:center; justify-items:end; min-width:128px; position:relative}
.f5-optall > span{grid-area:1/1; display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border-radius:var(--r-sm); font-size:12px; font-weight:500; white-space:nowrap}
.f5-opt{background:var(--accent); color:#fff; animation:f5opt 9s linear infinite}
@keyframes f5opt{0%,48%{opacity:1}53%,100%{opacity:0}}
.f5-analyzing{background:var(--accent-tint); color:var(--accent-deep); opacity:0; animation:f5analyzing 9s linear infinite}
@keyframes f5analyzing{0%,48%{opacity:0}53%,64%{opacity:1}69%,100%{opacity:0}}
.f5-ready{background:var(--success-bg); color:var(--success-fg); font-weight:600; opacity:0; animation:f5ready 9s var(--ease-spring) infinite}
@keyframes f5ready{0%,65%{opacity:0}70%,100%{opacity:1}}
.f5-table{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
.f5-th,.f5-tr{display:grid; grid-template-columns:1.7fr .7fr .9fr .9fr; align-items:center; gap:8px; padding:9px 13px}
.f5-th{background:var(--muted); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-subtle)}
.f5-tr{border-top:1px solid var(--border-soft); font-size:12px}
.f5-tr .url{font-family:var(--font-mono); font-size:11px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.f5-tr .num{font-variant-numeric:tabular-nums; color:var(--fg-muted)}
.f5-tr .num.pos{font-weight:600; color:var(--fg)}
.f5-bucket{justify-self:start}
/* rows fade in ONCE on entry and stay (no per-loop reset, so the table never disappears) */
.f5-tr.r1,.f5-tr.r2,.f5-tr.r3,.f5-tr.r4{animation:f5in .5s var(--ease-out) both}
.f5-tr.r1{animation-delay:.05s}
.f5-tr.r2{animation-delay:.12s}
.f5-tr.r3{animation-delay:.19s}
.f5-tr.r4{animation-delay:.26s}
@keyframes f5in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.f5-cursor{animation:f5cursor 9s var(--ease-out) infinite}
@keyframes f5cursor{0%{left:42%; top:120px; opacity:0}28%{opacity:0}
  34%{opacity:1; left:66%; top:60px}46%{left:84%; top:22px}49%{left:83%; top:24px}52%{left:84%; top:22px}62%{opacity:1}70%{opacity:0}100%{opacity:0}}

/* ============================================================
   F6 - Intelligence & ideation
   ============================================================ */
.f6-sources{display:flex; gap:10px; justify-content:center; margin-bottom:8px}
.f6-src{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--r-pill);
  border:1px solid var(--border); font-size:12px; font-weight:500; background:var(--surface)}
.f6-src .ic{width:18px; height:18px; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700}
.f6-src.reddit .ic{background:#FF4500} .f6-src.li .ic{background:#0A66C2} .f6-src.web .ic{background:var(--accent)}
.f6-src.s1{animation:f6src 9s ease-in-out infinite; animation-name:f6src1}
.f6-src.s2{animation:f6src 9s ease-in-out infinite; animation-name:f6src2}
.f6-src.s3{animation:f6src 9s ease-in-out infinite; animation-name:f6src3}
@keyframes f6src1{0%,8%{transform:none;box-shadow:none}12%{transform:translateY(-3px);box-shadow:0 4px 12px rgba(255,69,0,.25)}20%,100%{transform:none;box-shadow:none}}
@keyframes f6src2{0%,12%{transform:none;box-shadow:none}16%{transform:translateY(-3px);box-shadow:0 4px 12px rgba(10,102,194,.25)}24%,100%{transform:none;box-shadow:none}}
@keyframes f6src3{0%,16%{transform:none;box-shadow:none}20%{transform:translateY(-3px);box-shadow:0 4px 12px rgba(110,50,224,.25)}28%,100%{transform:none;box-shadow:none}}
.f6-canvas{position:relative; height:120px; margin:6px 0}
.f6-snip{position:absolute; padding:5px 9px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); font-size:10px; color:var(--fg-muted); box-shadow:var(--shadow-sm); max-width:130px}
.f6-snip.n1{left:2%; top:6px; animation:f6fly 9s var(--ease-out) infinite; animation-name:f6fly1}
.f6-snip.n2{right:2%; top:0; animation:f6fly 9s var(--ease-out) infinite; animation-name:f6fly2}
.f6-snip.n3{left:14%; bottom:4px; animation:f6fly 9s var(--ease-out) infinite; animation-name:f6fly3}
@keyframes f6fly1{0%,22%{opacity:0; transform:translate(0,0) scale(.9)}28%{opacity:1}40%{opacity:1; transform:translate(120px,28px) scale(.9)}48%{opacity:0; transform:translate(150px,34px) scale(.5)}100%{opacity:0}}
@keyframes f6fly2{0%,26%{opacity:0; transform:translate(0,0) scale(.9)}32%{opacity:1}44%{opacity:1; transform:translate(-130px,40px) scale(.9)}52%{opacity:0; transform:translate(-160px,46px) scale(.5)}100%{opacity:0}}
@keyframes f6fly3{0%,30%{opacity:0; transform:translate(0,0) scale(.9)}36%{opacity:1}48%{opacity:1; transform:translate(90px,-22px) scale(.9)}56%{opacity:0; transform:translate(110px,-28px) scale(.5)}100%{opacity:0}}
.f6-node{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent-deep); font-size:12px; font-weight:600; white-space:nowrap;
  display:grid; align-items:center; justify-items:center; animation:f6node 9s ease-in-out infinite}
@keyframes f6node{0%,38%{opacity:0; transform:translate(-50%,-50%) scale(.85); background:var(--accent-tint)}
  44%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  57%{background:var(--accent-tint)}62%{background:var(--success-bg)}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1); background:var(--success-bg)}}
.f6-nwork,.f6-ndone{grid-area:1/1; display:inline-flex; align-items:center; gap:8px}
.f6-nwork{animation:f6nwork 9s linear infinite}
@keyframes f6nwork{0%,55%{opacity:1}61%,100%{opacity:0}}
.f6-ndone{color:var(--success-fg); opacity:0; animation:f6ndone 9s var(--ease-spring) infinite}
@keyframes f6ndone{0%,58%{opacity:0; transform:scale(.85)}66%,100%{opacity:1; transform:none}}
.f6-idea{border:1px solid var(--accent); border-radius:var(--r-md); padding:13px; background:var(--surface);
  box-shadow:0 0 0 4px var(--accent-tint); animation:f6idea 9s var(--ease-spring) infinite}
@keyframes f6idea{0%,60%{opacity:0; transform:translateY(16px) scale(.96)}68%,94%{opacity:1; transform:none}98%,100%{opacity:0}}
.f6-idea .ih{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.f6-idea .it{font-size:14px; font-weight:600; color:var(--ink); line-height:1.25; margin-bottom:9px; max-width:90%}
.f6-pscore{font-family:var(--font-mono); font-size:11px; font-weight:600; color:#fff; background:var(--success);
  padding:2px 7px; border-radius:var(--r-pill)}
.f6-sugg{font-size:12px; color:var(--fg-muted); line-height:1.4}
.f6-sugg b{color:var(--accent-deep)}

/* ============================================================
   Closing CTA + footer
   ============================================================ */
.cta{position:relative; overflow:hidden; text-align:center; padding:84px 0; border-top:1px solid var(--border-soft)}
.cta .glow{position:absolute; inset:auto 0 -40% 0; height:480px; margin:auto;
  background:radial-gradient(closest-side, rgba(110,50,224,.16), rgba(110,50,224,0) 72%)}
.cta .inner{position:relative; z-index:1}
.cta h2{font-family:var(--font-serif); font-weight:400; font-size:42px; line-height:1.08; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 16px}
.cta p{font-size:17px; color:var(--fg-muted); max-width:520px; margin:0 auto 26px}
@media(max-width:680px){.cta h2{font-size:32px}}
.foot{border-top:1px solid var(--border-soft); padding:32px 0}
.foot-wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot-logo{height:24px; width:auto; display:block}
.foot-right{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.foot-links{display:flex; gap:20px}
.foot-links a{font-size:13px; color:var(--fg-muted)}
.foot-links a:hover{color:var(--fg)}
.foot-social{display:flex; gap:10px}
.foot-social a{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-sm);
  border:1px solid var(--border); color:var(--fg-muted); transition:color var(--ease-out) .15s, border-color var(--ease-out) .15s}
.foot-social a:hover{color:var(--accent-deep); border-color:var(--accent)}
.foot-social svg{width:16px; height:16px}
.foot-bottom{margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft); font-size:12px; color:var(--fg-subtle)}

/* ============================================================
   Video frame (used inside the hero)
   ============================================================ */
.video-frame{position:relative; padding-top:56.25%; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-lg); background:var(--ink)}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ============================================================
   Features intro: super-big zig-zag title that opens the benefits
   ============================================================ */
.features-intro{position:relative; z-index:1; padding:90px 0 30px}
.fi-title{font-family:var(--font-serif); font-weight:400; letter-spacing:-.025em; line-height:.96; margin:0 auto;
  max-width:1240px; padding:0 28px; color:var(--ink)}
.fi-title .fi-l1{display:block; text-align:left; font-size:clamp(32px, 5.4vw, 72px)}
.fi-title .fi-l2{display:block; text-align:right; font-style:italic; color:var(--accent-deep); font-size:clamp(32px, 5.4vw, 72px)}
/* the title flows straight into the first feature, no divider line under it */
.features-intro + .feature{border-top:0}

/* ============================================================
   Agency band (backed by Airfleet) + related reading
   ============================================================ */
.agency{background:var(--muted); border-top:1px solid var(--border-soft); padding:66px 0}
.agency-copy{max-width:680px; margin:0 auto; text-align:center}
.agency-logo{display:block; height:30px; width:auto; margin:0 auto 18px; filter:brightness(0)}
.agency-kicker{display:block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:12px}
.agency-title{font-family:var(--font-serif); font-weight:400; font-size:36px; line-height:1.1; letter-spacing:-.015em; color:var(--ink); margin:0 0 14px}
.agency-body{font-size:17px; line-height:27px; color:var(--fg-muted); margin:0 auto 22px; max-width:600px}
.agency .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.agency-reading{margin-top:46px}
.agency-reading-head{text-align:center; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); margin-bottom:18px}
.agency-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:980px; margin:0 auto}
.agency-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
  transition:border-color var(--ease-out) .15s, box-shadow var(--ease-out) .15s, transform var(--ease-out) .15s}
.agency-card:hover{border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-2px)}
.ac-thumb{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--inset)}
.ac-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s var(--ease-out)}
.agency-card:hover .ac-thumb img{transform:scale(1.05)}
.ac-body{display:flex; flex-direction:column; gap:8px; padding:16px}
.ac-tag{align-self:flex-start; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-tint); padding:3px 8px; border-radius:var(--r-pill)}
.ac-title{font-size:15px; font-weight:600; line-height:1.3; color:var(--ink)}
.ac-desc{font-size:13px; line-height:19px; color:var(--fg-muted); flex:1}
.ac-link{font-size:12px; font-weight:500; color:var(--accent-deep)}
@media(max-width:760px){.agency-cards{grid-template-columns:1fr; max-width:420px} .agency-title{font-size:28px}}
@media(max-width:680px){.features-intro{padding:56px 0 18px} .fi-title{padding:0 22px} .fi-title .fi-l1,.fi-title .fi-l2{font-size:32px}}

/* ============================================================
   Book-a-demo modal
   ============================================================ */
.modal-overlay{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(5,4,31,.5); backdrop-filter:blur(3px)}
.modal-overlay[hidden]{display:none}
.modal{position:relative; width:100%; max-width:480px; max-height:90vh; overflow:auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:26px}
.modal h3{font-family:var(--font-serif); font-weight:400; font-size:26px; color:var(--ink); margin:0 0 6px}
.modal p{font-size:14px; color:var(--fg-muted); margin:0 0 18px}
.modal-close{position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); font-size:18px; line-height:1; cursor:pointer}
.modal-close:hover{background:var(--muted); color:var(--fg)}
.hs-placeholder{border:1px dashed var(--border); border-radius:var(--r-md); padding:24px; text-align:center;
  font-size:12px; color:var(--fg-subtle); font-family:var(--font-mono); line-height:1.6}
.modal.wide{max-width:760px}
#hubspot-meeting{min-height:720px}
.meetings-iframe-container{min-height:720px}
.meetings-iframe-container iframe{width:100%!important; min-height:720px; border:0}
#hubspot-meeting iframe{width:100%!important; min-height:720px; border:0}

/* ---- HubSpot legacy form, redesigned to the design system (scoped to the modal).
       Uses !important throughout to override HubSpot's own form stylesheet. ---- */
#hubspot-demo-form .hs-form,
#hubspot-demo-form form.hs-form{font-family:var(--font-sans)!important; color:var(--fg)!important; width:100%}
#hubspot-demo-form fieldset{max-width:none!important}
#hubspot-demo-form .hs-form-field{width:100%!important; float:none!important; padding:0!important; margin:0 0 16px!important}
#hubspot-demo-form .hs-form-field > label{display:block!important; font-size:11px!important; font-weight:600!important; letter-spacing:.05em!important;
  text-transform:uppercase!important; color:var(--fg-muted)!important; margin-bottom:7px!important; line-height:1.3!important}
#hubspot-demo-form .hs-form-required{color:var(--danger)!important; margin-left:3px}
#hubspot-demo-form .hs-field-desc{font-size:12px!important; line-height:1.4!important; color:var(--fg-subtle)!important; margin:0 0 7px!important; text-transform:none!important; letter-spacing:0!important; font-weight:400!important}
#hubspot-demo-form .input{margin-right:0!important}

/* text inputs, select, textarea: soft "filled" field that lifts to white with a purple ring on focus.
   (checkboxes/radios are excluded so they keep their native control) */
#hubspot-demo-form input.hs-input:not([type=checkbox]):not([type=radio]),
#hubspot-demo-form select.hs-input,
#hubspot-demo-form textarea.hs-input{
  width:100%!important; box-sizing:border-box!important; padding:12px 14px!important; font-family:var(--font-sans)!important; font-size:14px!important; line-height:1.3!important;
  color:var(--fg)!important; background:var(--surface)!important; border:1px solid var(--border)!important; border-radius:var(--r-md)!important; outline:none!important;
  -webkit-appearance:none!important; -moz-appearance:none!important; appearance:none!important; box-shadow:none!important;
  transition:background var(--ease-out) .15s, border-color var(--ease-out) .15s, box-shadow var(--ease-out) .15s!important}
#hubspot-demo-form input.hs-input:not([type=checkbox]):not([type=radio]):hover,
#hubspot-demo-form select.hs-input:hover,
#hubspot-demo-form textarea.hs-input:hover{border-color:var(--fg-subtle)!important}
#hubspot-demo-form input.hs-input:not([type=checkbox]):not([type=radio]):focus,
#hubspot-demo-form select.hs-input:focus,
#hubspot-demo-form textarea.hs-input:focus{background:var(--surface)!important; border-color:var(--accent)!important; box-shadow:0 0 0 4px rgba(110,50,224,.15)!important}
#hubspot-demo-form .hs-input::placeholder{color:var(--fg-subtle)!important}
#hubspot-demo-form textarea.hs-input{min-height:104px!important; resize:vertical; line-height:1.5!important}
#hubspot-demo-form .hs-input.invalid,
#hubspot-demo-form .hs-input.error{background:var(--surface)!important; border-color:var(--danger)!important}
#hubspot-demo-form .hs-input.invalid:focus,
#hubspot-demo-form .hs-input.error:focus{box-shadow:0 0 0 4px rgba(253,107,107,.16)!important}

/* SELECT: custom purple chevron, consistent across Chrome, Safari, Firefox, Edge */
#hubspot-demo-form select.hs-input{cursor:pointer; padding-right:40px!important;
  background-repeat:no-repeat!important; background-position:right 14px center!important; background-size:12px 8px!important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20stroke='%236E32E0'%20stroke-width='1.8'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E")!important}
#hubspot-demo-form select.hs-input::-ms-expand{display:none}
#hubspot-demo-form select.hs-input:-moz-focusring{color:transparent; text-shadow:0 0 0 var(--fg)}
#hubspot-demo-form select.hs-input option{color:var(--fg); background:var(--surface); font-size:14px}

/* checkboxes & radios */
#hubspot-demo-form .inputs-list{list-style:none!important; margin:8px 0 0!important; padding:0!important; display:flex; flex-direction:column; gap:8px}
#hubspot-demo-form .hs-form-booleancheckbox-display,
#hubspot-demo-form .hs-form-radio-display{display:flex!important; align-items:flex-start; gap:9px; font-size:13px!important; line-height:1.45!important; color:var(--fg-muted)!important; text-transform:none!important; letter-spacing:0!important; font-weight:400!important}
#hubspot-demo-form .inputs-list input[type=checkbox],
#hubspot-demo-form .inputs-list input[type=radio]{width:18px!important; height:18px!important; flex:0 0 auto; margin:1px 0 0!important; accent-color:var(--accent); cursor:pointer}

/* errors */
#hubspot-demo-form .hs-error-msgs{list-style:none!important; margin:7px 0 0!important; padding:0!important}
#hubspot-demo-form .hs-error-msg,
#hubspot-demo-form label.hs-error-msg{color:var(--danger)!important; font-size:12px!important; font-weight:500!important}

/* submit */
#hubspot-demo-form .hs-submit{margin-top:20px!important}
#hubspot-demo-form .hs-button,
#hubspot-demo-form input[type=submit].hs-button{
  display:inline-flex!important; align-items:center; justify-content:center; width:100%!important; cursor:pointer; -webkit-appearance:none!important; appearance:none!important;
  font-family:var(--font-sans)!important; font-size:15px!important; font-weight:600!important; letter-spacing:-.005em!important; line-height:1!important; padding:14px 20px!important;
  color:#fff!important; background:var(--accent)!important; border:0!important; border-radius:var(--r-md)!important; box-shadow:0 8px 20px rgba(110,50,224,.28)!important;
  transition:background var(--ease-out) .15s, transform var(--ease-out) .15s, box-shadow var(--ease-out) .15s!important}
#hubspot-demo-form .hs-button:hover{background:var(--accent-deep)!important; transform:translateY(-2px); box-shadow:0 12px 26px rgba(110,50,224,.34)!important}
#hubspot-demo-form .hs-button:active{transform:translateY(0)}
#hubspot-demo-form .hs-button:disabled{opacity:.5!important; pointer-events:none; box-shadow:none!important}

/* ============================================================
   Nav "Use cases" dropdown (shared)
   ============================================================ */
.nav-dd{position:relative; display:inline-flex; align-items:center}
/* invisible hover bridges over the gap so the menus don't close when moving from trigger to panel */
.nav-dd::after,.nav-mega::after{content:""; position:absolute; left:-10px; right:-10px; top:100%; height:20px}
.nav-dd>.nav-dd-trigger{display:inline-flex; align-items:center; gap:5px; font-size:14px; color:var(--fg-muted); background:none; border:0; cursor:pointer; font-family:inherit; padding:0}
.nav-dd>.nav-dd-trigger:hover{color:var(--fg)}
.nav-dd>.nav-dd-trigger svg{width:11px; height:11px; transition:transform var(--ease-out) .15s}
.nav-dd:hover>.nav-dd-trigger svg,.nav-dd:focus-within>.nav-dd-trigger svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px); min-width:280px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:7px;
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition:opacity var(--ease-out) .15s, transform var(--ease-out) .15s; z-index:60}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-dd-menu a{display:block; padding:9px 11px; border-radius:var(--r-sm); text-decoration:none}
.nav-dd-menu a:hover{background:var(--muted)}
.nav-dd-menu a .t{display:block; font-size:14px; font-weight:500; color:var(--fg)}
.nav-dd-menu a .d{display:block; font-size:12px; color:var(--fg-muted); margin-top:1px}
@media(max-width:760px){.nav-dd{display:none}}

/* ============================================================
   Use-case pages (shared)
   ============================================================ */
.uc-hero{position:relative; overflow:hidden; text-align:center; padding:64px 0 44px}
.uc-hero .glow{position:absolute; left:0; right:0; top:30px; height:560px; margin:0 auto; max-width:920px;
  background:radial-gradient(closest-side, rgba(96,121,255,.18), rgba(96,121,255,0) 72%); pointer-events:none; z-index:0}
.uc-hero .inner{position:relative; z-index:1; max-width:820px; margin:0 auto}
.uc-eyebrow{display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 9px; border-radius:var(--r-pill);
  background:var(--accent-tint); color:var(--accent-deep); font-size:12px; font-weight:600; margin-bottom:20px}
.uc-hero h1{font-family:var(--font-serif); font-weight:400; font-size:52px; line-height:1.05; letter-spacing:-.02em; color:var(--ink); margin:0 0 16px}
.uc-hero h1 em{font-style:italic; color:var(--accent-deep)}
.uc-hero p.lead{font-size:18px; line-height:28px; color:var(--fg-muted); max-width:620px; margin:0 auto 28px}
.uc-hero .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
@media(max-width:680px){.uc-hero h1{font-size:36px}}

/* benefit cards grid */
.uc-cards{padding:8px 0 8px}
.uc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.uc-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px}
.uc-card .ic{width:38px; height:38px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:13px}
.uc-card .ic svg{width:19px; height:19px}
.uc-card h3{font-size:16px; font-weight:600; color:var(--ink); margin:0 0 7px; line-height:1.3}
.uc-card p{font-size:14px; line-height:1.5; color:var(--fg-muted); margin:0}
@media(max-width:860px){.uc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.uc-grid{grid-template-columns:1fr}}

/* deep content sections (alternating) */
.uc-rows{padding:8px 0}
.uc-row{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:40px 0; border-top:1px solid var(--border-soft)}
.uc-row.flip .uc-rc{order:2}
.uc-row .uc-rc h2{font-family:var(--font-serif); font-weight:400; font-size:32px; line-height:1.12; letter-spacing:-.015em; color:var(--ink); margin:0 0 14px}
.uc-row .uc-rc p{font-size:16px; line-height:26px; color:var(--fg-muted); margin:0 0 16px; max-width:480px}
.uc-row .uc-rc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.uc-row .uc-rc li{display:flex; gap:9px; font-size:14px; color:var(--fg); line-height:1.45}
.uc-row .uc-rc li svg{width:17px; height:17px; color:var(--success); flex:0 0 auto; margin-top:2px}
.uc-art{border-radius:var(--r-xl); min-height:300px; background:var(--sand,#F2F2F5) center/cover no-repeat; border:1px solid var(--border-soft)}
@media(max-width:860px){.uc-row{grid-template-columns:1fr; gap:26px; padding:30px 0} .uc-row.flip .uc-rc{order:0} .uc-art{min-height:200px}}

/* ============================================================
   Mega menu
   ============================================================ */
.nav-mega{position:relative; display:inline-flex; align-items:center}
.nav-mega>.nav-dd-trigger{display:inline-flex; align-items:center; gap:5px; font-size:14px; color:var(--fg-muted); background:none; border:0; cursor:pointer; font-family:inherit; padding:0}
.nav-mega>.nav-dd-trigger:hover{color:var(--fg)}
.nav-mega>.nav-dd-trigger svg{width:11px; height:11px; transition:transform var(--ease-out) .15s}
.nav-mega:hover>.nav-dd-trigger svg,.nav-mega:focus-within>.nav-dd-trigger svg{transform:rotate(180deg)}
.nav-mega-panel{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px); width:min(720px,92vw);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:18px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px 18px; opacity:0; visibility:hidden;
  transition:opacity var(--ease-out) .15s, transform var(--ease-out) .15s; z-index:60}
.nav-mega:hover .nav-mega-panel,.nav-mega:focus-within .nav-mega-panel{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-mega-col .col-h{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-subtle); font-weight:600; padding:6px 8px 5px}
.nav-mega-panel a{display:block; padding:6px 8px; border-radius:var(--r-sm); text-decoration:none}
.nav-mega-panel a:hover{background:var(--muted)}
.nav-mega-panel a .t{display:block; font-size:13px; font-weight:500; color:var(--fg)}
.nav-mega-panel a .d{display:block; font-size:11.5px; color:var(--fg-muted); margin-top:1px}
@media(max-width:760px){.nav-mega{display:none}}

/* ============================================================
   Integrations page
   ============================================================ */
.intg-cat{font-family:var(--font-serif); font-weight:400; font-size:24px; color:var(--ink); margin:38px 0 16px}
.intg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.intg-card{display:flex; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px}
.intg-logo{width:44px; height:44px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.intg-logo svg{width:23px; height:23px}
.intg-card h3{font-size:15px; font-weight:600; margin:0 0 4px; color:var(--ink)}
.intg-card p{font-size:13px; line-height:1.45; color:var(--fg-muted); margin:0}
@media(max-width:860px){.intg-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.intg-grid{grid-template-columns:1fr}}

/* ============================================================
   Comparison table
   ============================================================ */
.cmp-wrap{overflow-x:auto}
.cmp-table{width:100%; min-width:560px; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden}
.cmp-table th,.cmp-table td{padding:14px 16px; text-align:left; font-size:14px; border-top:1px solid var(--border-soft)}
.cmp-table thead th{background:var(--muted); font-size:13px; font-weight:600; color:var(--ink); border-top:0}
.cmp-table thead th.us{background:var(--accent-tint); color:var(--accent-deep)}
.cmp-table tbody td:first-child{font-weight:500; color:var(--ink)}
.cmp-table td.us{background:rgba(96,121,255,.06)}
.cmp-yes{color:var(--success-fg); font-weight:600}
.cmp-no{color:var(--fg-subtle)}

/* ============================================================
   Article / resource pages
   ============================================================ */
.article{max-width:760px; margin:0 auto; padding:6px 0 0}
.article .lede{font-size:20px; line-height:1.6; color:var(--fg-muted); margin:0 0 24px}
.article p{font-size:17px; line-height:1.72; color:var(--fg); margin:0 0 18px}
.article h2{font-family:var(--font-serif); font-weight:400; font-size:30px; line-height:1.15; letter-spacing:-.01em; color:var(--ink); margin:38px 0 14px}
.article h3{font-size:19px; font-weight:600; color:var(--ink); margin:24px 0 10px}
.article ul,.article ol{margin:0 0 18px; padding-left:22px; color:var(--fg); font-size:16px; line-height:1.7}
.article li{margin-bottom:8px}
.article a{color:var(--accent-deep); text-decoration:underline}
.article table{width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; line-height:1.55}
.article th,.article td{border:1px solid var(--border-soft); padding:10px 14px; text-align:left; vertical-align:top; color:var(--fg)}
.article thead th{background:var(--sand,#F5F3EE); font-weight:600; color:var(--ink)}
.article tbody tr:nth-child(even){background:rgba(5,4,31,.02)}
.article table p{margin:0}
/* resources lobby cards */
.rgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:0 0 8px}
@media(max-width:900px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rgrid{grid-template-columns:1fr}}
.rcard{display:flex; flex-direction:column; border:1px solid var(--border-soft); border-radius:16px; overflow:hidden; background:var(--surface,#fff); text-decoration:none; transition:transform .2s, box-shadow .2s}
.rcard:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(5,4,31,.10)}
.rc-media{aspect-ratio:16/10; background-size:cover; background-position:center}
.rc-media img{width:100%; height:100%; object-fit:cover; display:block}
.rc-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.rc-cat{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-deep)}
.rc-title{font-family:var(--font-serif); font-weight:400; font-size:21px; line-height:1.2; color:var(--ink); margin:0}
.rc-desc{font-size:14px; line-height:1.6; color:var(--fg-muted); margin:0}
.rc-more{font-size:14px; font-weight:600; color:var(--accent-deep); margin-top:auto; padding-top:4px}
.rsec-h{font-family:var(--font-serif); font-weight:400; font-size:26px; color:var(--ink); margin:34px 0 16px}
/* article byline */
.uc-byline{display:flex; align-items:center; gap:10px; margin:4px 0 16px; font-size:14px; color:var(--fg-muted)}
.uc-byline .av{width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--border-soft)}
.uc-byline a{color:var(--ink); font-weight:600; text-decoration:none}
.uc-byline a:hover{text-decoration:underline}
/* author page */
.author-card{display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; padding:8px 0}
.author-card .av{width:112px; height:112px; border-radius:50%; object-fit:cover; border:1px solid var(--border-soft); flex:none}
.author-meta{display:flex; flex-direction:column; align-items:flex-start}
.author-meta .uc-eyebrow{margin:0 0 10px}
.author-meta h1{font-family:var(--font-serif); font-weight:400; font-size:40px; line-height:1.05; color:var(--ink); margin:0 0 6px}
.author-role{color:var(--accent-deep); font-weight:600; font-size:15px; margin:0 0 10px}
.author-bio{font-size:16px; line-height:1.65; color:var(--fg-muted); max-width:640px; margin:0 0 16px}
.author-social{display:flex; gap:12px; flex-wrap:wrap}
.author-social a{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; border:1px solid var(--border); padding:8px 14px; border-radius:999px}
.author-social a:hover{background:var(--sand,#F5F3EE)}
/* glossary lobby (A-Z) */
.gl-az{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 26px}
.gl-az a, .gl-az span{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; font-weight:600; font-size:15px; text-transform:uppercase}
.gl-az a{background:var(--sand,#F5F3EE); color:var(--accent-deep); text-decoration:none}
.gl-az a:hover{background:var(--accent); color:#fff}
.gl-az span{color:var(--fg-subtle)}
.gl-letter{font-family:var(--font-serif); font-weight:400; font-size:34px; color:var(--accent); margin:32px 0 8px; text-transform:uppercase; border-bottom:1px solid var(--border-soft); padding-bottom:8px}
.gl-term{padding:15px 0; border-bottom:1px solid var(--border-soft)}
.gl-term h3{font-size:20px; margin:0 0 6px}
.gl-term h3 a{color:var(--ink); text-decoration:none}
.gl-term h3 a:hover{color:var(--accent-deep)}
.gl-term p{font-size:15px; line-height:1.6; color:var(--fg-muted); margin:0 0 6px; max-width:760px}
.gl-term .more{font-size:14px; font-weight:600; color:var(--accent-deep); text-decoration:none}
.gl-date{color:var(--fg-muted); font-size:14px; margin:8px 0 0}
/* article hero feature image + two-column sidebar layout */
.article-hero .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
.article-hero .hero-text{text-align:left; display:flex; flex-direction:column; align-items:flex-start}
.article-hero .hero-media{border-radius:18px; overflow:hidden; aspect-ratio:16/11; background-size:cover; background-position:center; box-shadow:0 20px 48px rgba(5,4,31,.14)}
.article-hero .hero-media img{width:100%; height:100%; object-fit:cover; display:block}
@media(max-width:860px){.article-hero .hero-grid{grid-template-columns:1fr; gap:22px} .article-hero .hero-media{aspect-ratio:16/9}}
.article-layout{display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:52px; align-items:start; max-width:1120px; margin:0 auto}
.article-layout .article{max-width:none; margin:0}
@media(max-width:900px){.article-layout{grid-template-columns:1fr; gap:10px}}
.article-side{position:sticky; top:84px; display:flex; flex-direction:column; gap:18px}
@media(max-width:900px){.article-side{position:static; margin-top:26px}}
.side-card{border:1px solid var(--border-soft); border-radius:14px; padding:15px 18px}
.side-h{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-muted); margin:0 0 10px}
.side-toc{display:flex; flex-direction:column}
.side-toc a{font-size:13.5px; line-height:1.35; color:var(--fg-muted); text-decoration:none; padding:5px 0 5px 12px; border-left:2px solid var(--border-soft)}
.side-toc a:hover{color:var(--accent-deep); border-left-color:var(--accent)}
.side-related a{display:block; font-size:14px; font-weight:500; color:var(--ink); text-decoration:none; padding:8px 0; border-bottom:1px solid var(--border-soft)}
.side-related a:last-child{border-bottom:0; padding-bottom:0}
.side-related a:hover{color:var(--accent-deep)}
.side-cta{background:var(--sand,#F5F3EE); border:1px solid var(--border-soft); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px}
.side-cta .btn{width:100%}
.toc{background:var(--muted); border-radius:var(--r-md); padding:16px 18px; margin:0 0 28px}
.toc .t{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-subtle); font-weight:600; margin-bottom:8px}
.toc a{display:block; font-size:14px; color:var(--accent-deep); padding:3px 0; text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ============================================================
   About page
   ============================================================ */
.about-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:8px 0 0}
.about-stat{text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 14px}
.about-stat .n{font-family:var(--font-serif); font-size:42px; color:var(--accent-deep); line-height:1}
.about-stat .l{font-size:13px; color:var(--fg-muted); margin-top:7px}
@media(max-width:680px){.about-stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   Shared FAQ accordion (used on every page)
   ============================================================ */
.pricing-faq{padding:66px 0 12px}
.pricing-faq h2{font-family:var(--font-serif); font-weight:400; font-size:36px; text-align:center; letter-spacing:-.015em; color:var(--ink); margin:0 0 28px}
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.faq-item{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); overflow:hidden}
.faq-item summary{list-style:none; cursor:pointer; padding:16px 18px; font-size:15px; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; font-size:22px; font-weight:400; line-height:1; color:var(--accent)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item .ans{padding:0 18px 16px; font-size:14px; line-height:1.6; color:var(--fg-muted)}
.pricing-note{text-align:center; font-size:13px; color:var(--fg-subtle); margin-top:22px}

/* ============================================================
   Mobile menu (hamburger), shown under 760px when dropdowns hide
   ============================================================ */
.nav-burger{display:none; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border);
  border-radius:var(--r-sm); background:var(--surface); cursor:pointer; color:var(--ink)}
.nav-burger svg{width:20px; height:20px}
.nav-mobile{display:none; border-top:1px solid var(--border-soft); background:var(--surface); max-height:78vh; overflow:auto}
.nav-mobile.open{display:block}
.nav-mobile .mwrap{padding:10px 28px 24px}
.nav-mobile .mh{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-subtle); font-weight:600; margin:18px 0 4px}
.nav-mobile a{display:block; padding:10px 0; font-size:15px; color:var(--fg); text-decoration:none; border-bottom:1px solid var(--border-soft)}
.nav-mobile .mbtns{margin-top:18px}
.nav-mobile .mbtns .btn{width:100%; justify-content:center}
@media(max-width:760px){ .nav .nav-links{display:none} .nav-burger{display:inline-flex} }