/* ---------------------------------------------------------------
   StackSplit — base styles
   Plain HTML/CSS/JS site. All layout lives as inline styles in
   index.html (faithful 1:1 with the original design). This file
   holds resets, hover states, and the interactivity hooks.
----------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
::selection { background: rgba(123, 97, 255, .4); color: #fff; }
a { text-decoration: none; color: inherit; }

/* Hidden scrollbar for the template carousel */
.ss-scroll::-webkit-scrollbar { height: 0; width: 0; }
.ss-scroll { scrollbar-width: none; }

/* ---------------------------------------------------------------
   Floating "liquid glass" pill navbar
   - normal at the top of the page
   - shrinks while scrolling down (still visible)
   - returns to full size on scroll-up or hover
----------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;            /* only the pill itself is interactive */
}
.topbar__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 38px;
  height: 60px;
  padding: 0 16px 0 26px;
  border-radius: 999px;
  background: rgba(28, 5, 77, .55);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(184, 168, 245, .18);
  box-shadow:
    0 10px 34px rgba(0, 0, 0, .38),
    0 2px 8px rgba(74, 46, 181, .25),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  transform-origin: top center;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1),
              gap .4s cubic-bezier(.22, 1, .36, 1),
              padding .4s cubic-bezier(.22, 1, .36, 1),
              background .4s ease,
              box-shadow .4s ease;
  will-change: transform;
}
/* Shrunk state (toggled by JS while scrolling down) — keeps the
   tighter collapsed width while only the expanded state is wider */
.topbar.is-shrunk .topbar__pill {
  transform: scale(.86);
  gap: 18px;
  padding: 0 12px 0 18px;
  background: rgba(28, 5, 77, .72);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}
/* Hovering the pill always restores full size, even while shrunk */
.topbar.is-shrunk .topbar__pill:hover {
  transform: scale(1);
  gap: 38px;
  padding: 0 16px 0 26px;
  background: rgba(28, 5, 77, .6);
}
@media (prefers-reduced-motion: reduce) {
  .topbar__pill { transition: none; }
}

/* ---------------------------------------------------------------
   Hint tooltip (the "?" badge in the hero subtitle)
----------------------------------------------------------------- */
.hint:hover { background: rgba(184, 168, 245, .26); color: #fff; }
.hint__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(20, 4, 56, .96);
  border: 1px solid rgba(184, 168, 245, .18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  color: #e7e1f5;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
/* little pointer arrow */
.hint__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(20, 4, 56, .96);
}
.hint:hover .hint__tip,
.hint:focus-visible .hint__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------
   "Powered by StackOptimise" badge — gold branding
   - a gold arc that circles the pill
   - a periodic breathe: glows slowly, then a quick zoom
   - the whole border turns gold on hover
----------------------------------------------------------------- */
/* the angle the bright spot sits at; animated so only the gradient
   moves (rotating the wide pill itself would sweep a huge arc) */
@property --po-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.po-badge {
  position: fixed;                 /* (also set inline) */
  isolation: isolate;             /* keep the ring's stacking local */
  border-color: rgba(255, 214, 130, .28) !important;   /* whole border subtle gold */
}
/* subtle gold ring with a single bright spot that travels the track */
.po-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1.5px;
  background: conic-gradient(from var(--po-a),
    rgba(255, 220, 140, .28) 0deg,        /* subtle base — visible all the way round */
    rgba(255, 220, 140, .28) 140deg,
    rgba(255, 245, 205, .95) 160deg,      /* bright spot 1 */
    rgba(255, 220, 140, .28) 180deg,
    rgba(255, 220, 140, .28) 320deg,
    rgba(255, 245, 205, .95) 340deg,      /* bright spot 2 (opposite) */
    rgba(255, 220, 140, .28) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /* the two spots are 180° apart, so one half-turn loops seamlessly */
  animation: poTrack 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
/* the bright spots lap the border, gently speeding up and slowing down */
@keyframes poTrack {
  0%   { --po-a: 0deg; }
  35%  { --po-a: 55deg; }     /* slow drift */
  60%  { --po-a: 120deg; }    /* gentle surge */
  100% { --po-a: 180deg; }
}

/* hover: whole border goes a steady, brighter gold (no travelling spot) */
.po-badge:hover {
  border-color: rgba(255, 222, 150, .85) !important;
}
.po-badge:hover::before {
  background: rgba(255, 222, 150, .9);
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .po-badge::before { animation: none; }
}

/* Hover states */
.nav-link:hover  { background: rgba(184, 168, 245, .08); color: #fff; }
.foot-link:hover { color: #fff; }
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.tcard:hover { border-color: rgba(184, 168, 245, .35); }
.iconbtn:hover { background: #3d2488; }

/* ---------------------------------------------------------------
   INTERACTIVITY HOOKS (wiring left for you to add later)
   - .category-item[data-angle]  → the composer's right-hand nav rows
   - .email-highlight[data-angle] → the matching phrase in the email
   Both share a data-angle value: stack-signal | roi-angle | timing
   | soft-ask | ai-layer. Toggle the .is-active class to highlight.
   See script.js for a ready-to-uncomment example.
----------------------------------------------------------------- */

.category-item { transition: background .15s, transform .15s; }
.category-item.is-active { background: #7b61ff !important; }
.category-item.is-active span { color: #fff !important; }

.email-highlight { transition: box-shadow .2s, filter .2s; }
.email-highlight.is-active {
  box-shadow: 0 0 0 2px rgba(184, 168, 245, .9), 0 0 22px rgba(123, 97, 255, .6);
  filter: brightness(1.18);
}

/* ===============================================================
   ANIMATED AGENT DEMO (hero)
   A looping, multi-step agent flow:
   brief → templates → enrich → craft → deliver.
   Layout via these classes; theme matches the inline-styled site.
   =============================================================== */
.agent{
  background:#251161;border-radius:18px;overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.4),0 20px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
}
.agent__bar{
  display:flex;align-items:center;gap:12px;
  background:rgba(0,0,0,.2);padding:14px 18px;border-bottom:1px solid rgba(184,168,245,.06);
}
.agent__live{width:6px;height:6px;border-radius:3px;background:#5eead4;box-shadow:0 0 8px #5eead4;animation:ssBlink 1.6s ease-in-out infinite;}
.agent__body{display:flex;gap:0;min-height:430px;}

/* ---- left rail ---- */
.agent__rail{
  width:218px;flex-shrink:0;border-right:1px solid rgba(184,168,245,.08);
  padding:22px 16px;display:flex;flex-direction:column;gap:6px;
}
.astep{
  display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:11px;
  position:relative;transition:background .3s;
}
.astep::after{
  content:"";position:absolute;left:25px;top:46px;width:1px;height:14px;background:rgba(184,168,245,.14);
}
.astep:last-child::after{display:none;}
.astep__ico{
  width:30px;height:30px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(184,168,245,.07);color:#9085ad;transition:.3s;
}
.astep__txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.astep__t{font-size:14px;font-weight:600;color:#c5bdd9;letter-spacing:-.1px;transition:color .3s;}
.astep__s{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.6px;color:#6f6593;}
.astep__dot{margin-left:auto;width:7px;height:7px;border-radius:4px;background:rgba(184,168,245,.18);flex-shrink:0;transition:.3s;}
.astep.is-active{background:rgba(123,97,255,.14);}
.astep.is-active .astep__ico{background:#7b61ff;color:#fff;box-shadow:0 6px 16px rgba(123,97,255,.5);}
.astep.is-active .astep__t{color:#fff;}
.astep.is-active .astep__dot{background:#7b61ff;box-shadow:0 0 0 4px rgba(123,97,255,.18);animation:ssPulse 1.2s ease-in-out infinite;}
.astep.is-done .astep__ico{background:rgba(94,234,212,.14);color:#5eead4;}
.astep.is-done .astep__dot{background:#5eead4;box-shadow:none;animation:none;}

/* ---- main stage ---- */
.agent__stage{position:relative;flex:1;min-width:0;padding:26px 30px;}
.aview{
  position:absolute;inset:26px 30px;display:flex;flex-direction:column;gap:16px;
  opacity:0;transform:translateX(26px);pointer-events:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1);
}
.aview.is-active{opacity:1;transform:none;pointer-events:auto;}
.aview__head{display:flex;flex-direction:column;gap:6px;}
.aview__kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.7px;color:#b8a8f5;text-transform:uppercase;}
.aview__h{font-family:'Cabinet Grotesk','Inter',sans-serif;font-weight:700;font-size:21px;color:#fff;letter-spacing:-.3px;}

/* ---- view: prompt ---- */
.achat{display:flex;flex-direction:column;gap:8px;}
.achat__who{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.3px;color:#9085ad;}
.achat__bubble{
  background:#311a74;border:1px solid rgba(184,168,245,.1);border-radius:14px;border-top-left-radius:4px;
  padding:16px 18px;font-size:16px;line-height:24px;color:#fff;letter-spacing:-.1px;min-height:24px;
}
.achat__caret{display:inline-block;width:2px;height:18px;background:#b8a8f5;margin-left:2px;vertical-align:-3px;animation:ssCaret 1s step-end infinite;}
.achips{display:flex;flex-wrap:wrap;gap:8px;}
.achip{
  display:flex;align-items:center;gap:8px;background:#1c054d;border:1px solid rgba(184,168,245,.1);
  border-radius:999px;padding:8px 14px 8px 12px;
}
.aview.is-active .achip{animation:ssFadeUp .5s both;animation-delay:calc(1.7s + var(--i,0)*.12s);}
.achips .achip:nth-child(1){--i:0;}
.achips .achip:nth-child(2){--i:1;}
.achips .achip:nth-child(3){--i:2;}
.achip__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;color:#9085ad;text-transform:uppercase;}
.achip__v{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.1px;}
.asend{margin-top:auto;}
.asend__btn{
  display:inline-flex;align-items:center;gap:8px;background:#7b61ff;color:#fff;
  font-size:14px;font-weight:600;padding:11px 20px;border-radius:10px;letter-spacing:-.08px;
  box-shadow:0 12px 24px rgba(123,97,255,.3);
}
.aview.is-active .asend__btn{animation:ssSendPop .5s both;animation-delay:2.2s;}

/* ---- view: templates ---- */
.acount{display:flex;align-items:baseline;gap:12px;}
.acount__n{font-family:'Cabinet Grotesk','Inter',sans-serif;font-weight:700;font-size:46px;line-height:1;color:#fff;letter-spacing:-1.6px;}
.acount__l{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.4px;color:#9085ad;}
.atpls{display:flex;flex-wrap:wrap;gap:8px;}
.atpl{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2px;color:#c5bdd9;
  background:#311a74;border:1px solid rgba(184,168,245,.08);border-radius:8px;padding:8px 12px;
}
.atpl.is-hit{background:rgba(123,97,255,.18);border-color:rgba(184,168,245,.4);color:#fff;}
.aview.is-active .atpl{animation:ssFly .5s both;animation-delay:calc(.15s + var(--d)*.09s);}
.anote{
  margin-top:auto;display:flex;align-items:center;gap:9px;font-size:13px;color:#c5bdd9;letter-spacing:-.07px;
  background:#1c054d;border-radius:10px;padding:12px 14px;
}
.anote b{color:#fff;font-weight:700;}
.anote__dot{width:6px;height:6px;border-radius:3px;background:#5eead4;box-shadow:0 0 8px #5eead4;flex-shrink:0;}
.aview.is-active .anote{animation:ssFadeUp .5s both;animation-delay:1.1s;}

/* ---- view: enrich ---- */
.abrow{background:#1c054d;border-radius:14px;overflow:hidden;border:1px solid rgba(184,168,245,.08);}
.abrow__bar{
  display:flex;align-items:center;gap:9px;position:relative;
  background:#311a74;padding:11px 16px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#c5bdd9;
  border-bottom:1px solid rgba(184,168,245,.08);
}
.abrow__lock{display:flex;color:#5eead4;}
.abrow__scan{position:absolute;left:0;top:0;bottom:0;width:90px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(123,97,255,.45),rgba(0,0,0,0));}
.aview.is-active .abrow__scan{animation:ssScan 1.5s ease-in-out 2;}
.abrow__rows{display:flex;flex-direction:column;}
.arow{
  display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid rgba(184,168,245,.05);
}
.arow:last-child{border-bottom:none;}
.arow__k{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;color:#b8a8f5;text-transform:uppercase;
  width:104px;flex-shrink:0;
}
.arow__v{font-size:14px;color:#fff;letter-spacing:-.1px;}
.aview.is-active .arow{animation:ssReveal .5s both;animation-delay:calc(.9s + var(--d)*.34s);}

/* ---- view: craft ---- */
.acraft{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.acraft__chip{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.4px;color:#fff;
  background:#311a74;border:1px solid rgba(184,168,245,.18);border-radius:8px;padding:8px 12px;
}
.acraft__chip.is-tpl{background:rgba(123,97,255,.2);}
.acraft__plus{color:#9085ad;font-weight:700;}
.aview.is-active .acraft__chip{animation:ssSendPop .45s both;animation-delay:calc(.2s + var(--d)*.18s);}
.aview.is-active .acraft__plus{animation:ssFadeUp .4s both;animation-delay:calc(.32s + var(--d)*.18s);}
.astream{display:flex;flex-direction:column;gap:11px;padding:18px 0 4px;}
.aline{height:11px;border-radius:6px;background:linear-gradient(90deg,rgba(184,168,245,.28),rgba(123,97,255,.5));width:100%;transform-origin:left;}
.aline--short{width:62%;}
.aview.is-active .aline{animation:ssLine .55s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(1.1s + var(--d)*.22s);}

/* ---- view: deliver ---- */
.amail{
  background:#1c054d;border-radius:14px;border:1px solid rgba(184,168,245,.1);overflow:hidden;
  display:flex;flex-direction:column;
}
.aview.is-active .amail{animation:ssFadeUp .55s both;}
.amail__subj{
  display:flex;align-items:baseline;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(184,168,245,.08);
}
.amail__lab{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.3px;color:#9085ad;flex-shrink:0;text-transform:uppercase;}
.amail__line{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.1px;}
.amail__body{padding:16px 20px;display:flex;flex-direction:column;gap:9px;font-size:13.5px;line-height:21px;color:#c5bdd9;letter-spacing:-.07px;}
.amail__body p{margin:0;}
.amail__hl{background:linear-gradient(90deg,rgba(212,200,250,.28),rgba(123,97,255,.62),rgba(212,200,250,.28));border-radius:4px;padding:0 4px;color:#fff;}
.amail__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 20px;border-top:1px solid rgba(184,168,245,.08);background:rgba(0,0,0,.12);
}
.amail__ready{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.4px;color:#5eead4;}
.amail__dot{width:6px;height:6px;border-radius:3px;background:#5eead4;box-shadow:0 0 8px #5eead4;}
.amail__cta{
  display:inline-flex;align-items:center;gap:7px;background:#7b61ff;color:#fff;
  font-size:13px;font-weight:600;padding:9px 15px;border-radius:9px;letter-spacing:-.08px;transition:background .15s;
}
.amail__cta:hover{background:#8b73ff;}

/* ---- keyframes ---- */
@keyframes ssBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes ssPulse{0%,100%{box-shadow:0 0 0 4px rgba(123,97,255,.18)}50%{box-shadow:0 0 0 7px rgba(123,97,255,.05)}}
@keyframes ssCaret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes ssFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ssSendPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes ssFly{from{opacity:0;transform:translateX(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ssReveal{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes ssScan{0%{left:-90px}100%{left:100%}}
@keyframes ssLine{from{transform:scaleX(0);opacity:.4}to{transform:scaleX(1);opacity:1}}

/* ---- responsive ---- */
@media (max-width:720px){
  .agent__body{min-height:0;flex-direction:column;}
  .agent__rail{
    width:auto;flex-direction:row;overflow-x:auto;gap:4px;padding:12px;
    border-right:none;border-bottom:1px solid rgba(184,168,245,.08);
  }
  .astep::after{display:none;}
  .astep__txt{display:none;}
  .astep{padding:8px;}
  .astep.is-active{padding:8px 14px;}
  .astep.is-active .astep__txt{display:flex;}
  .agent__stage{padding:20px;min-height:440px;}
  .aview{inset:20px;}
  .aview__h{font-size:18px;}
}

/* ---- reduced motion: show final state, no animation ---- */
@media (prefers-reduced-motion: reduce){
  .agent__live,.astep.is-active .astep__dot{animation:none;}
  .aview{transition:none;}
  .aview *{animation:none !important;}
  .achat__caret{display:none;}
}

/* ---------------------------------------------------------------
   Legal pages (privacy.html, terms.html)
   Shares the dark theme + fonts loaded on index.html.
----------------------------------------------------------------- */
.legal-body{
  background:#1c054d;color:#c5bdd9;
  font-family:Inter,sans-serif;
  min-height:100vh;position:relative;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.legal-glow{
  position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:1400px;height:1400px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,168,245,.10),rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.legal-header{
  position:relative;max-width:820px;margin:0 auto;
  padding:28px 32px;display:flex;align-items:center;justify-content:space-between;
}
.legal-brand{display:flex;align-items:center;gap:10px;}
.legal-brand img{width:30px;height:30px;border-radius:9px;box-shadow:0 4px 14px rgba(74,46,181,.5);}
.legal-brand span{font-weight:700;font-size:18px;color:#fff;letter-spacing:-.47px;}
.legal-back{
  font-size:14px;font-weight:500;color:#c5bdd9;padding:8px 16px;border-radius:10px;
  border:1px solid rgba(184,168,245,.16);background:rgba(184,168,245,.04);transition:.15s;
}
.legal-back:hover{color:#fff;border-color:rgba(184,168,245,.32);background:rgba(184,168,245,.09);}

.legal-main{position:relative;max-width:820px;margin:0 auto;padding:40px 32px 120px;}
.legal-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.7px;
  color:#b8a8f5;text-transform:uppercase;margin:0 0 14px;
}
.legal-title{
  font-family:'Cabinet Grotesk','Inter',sans-serif;font-weight:800;
  font-size:44px;line-height:1.05;letter-spacing:-1.2px;color:#fff;margin:0;
}
.legal-updated{
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.3px;
  color:#9085ad;margin:16px 0 0;
}
.legal-intro{
  font-size:16px;line-height:27px;color:#c5bdd9;
  margin:28px 0 0;padding-bottom:36px;border-bottom:1px solid rgba(184,168,245,.10);
}
.legal-main h2{
  font-family:'Cabinet Grotesk','Inter',sans-serif;font-weight:700;
  font-size:24px;letter-spacing:-.4px;color:#fff;margin:48px 0 4px;
}
.legal-main h3{
  font-size:16px;font-weight:700;color:#e6dffb;margin:26px 0 0;
}
.legal-main p{font-size:15px;line-height:26px;color:#c5bdd9;margin:14px 0 0;}
.legal-main ul{margin:14px 0 0;padding-left:22px;}
.legal-main li{font-size:15px;line-height:26px;color:#c5bdd9;margin:8px 0 0;}
.legal-main strong{color:#fff;font-weight:600;}
.legal-main a{color:#b8a8f5;text-decoration:underline;text-underline-offset:3px;transition:.15s;}
.legal-main a:hover{color:#fff;}
.legal-contact{
  margin-top:44px;padding:24px;border-radius:14px;
  background:#251161;border:1px solid rgba(184,168,245,.10);
}
.legal-contact p{margin-top:6px;}
.legal-contact p:first-child{margin-top:0;}

.legal-foot{
  position:relative;max-width:820px;margin:0 auto;
  padding:32px;border-top:1px solid rgba(184,168,245,.08);
  display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.48px;color:#9085ad;
}
.legal-foot a{color:#9085ad;transition:.15s;}
.legal-foot a:hover{color:#fff;}
.legal-foot .dot{width:3px;height:3px;border-radius:2px;background:rgba(184,168,245,.35);}

@media (max-width:640px){
  .legal-title{font-size:32px;}
  .legal-header,.legal-main,.legal-foot{padding-left:20px;padding-right:20px;}
}

/* ---------------------------------------------------------------
   Landing headings — use the display face (Cabinet Grotesk).
   Inline styles set size/weight but not font-family, so these
   headings were falling back to Inter. This restores the
   original's display typography without touching the markup.
----------------------------------------------------------------- */
h1, h2, h3 { font-family: 'Cabinet Grotesk', 'Inter', sans-serif; }

/* Offset anchor jumps so the fixed pill nav doesn't cover them */
#problem, #solution, #different, #features, #pricing, #waitlist {
  scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------
   Card hover states (benefit / audience / feature / step cards).
   The cards are inline-styled with no border/shadow, so transform
   + an inset ring add lift on hover without shifting layout or
   fighting the inline background.
----------------------------------------------------------------- */
.hover-lift{
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
  will-change:transform;
}
.hover-lift:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(10,2,40,.45), inset 0 0 0 1px rgba(184,168,245,.28);
}
.hover-slide{
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.hover-slide:hover{
  transform:translateX(6px);
  box-shadow:0 12px 30px rgba(10,2,40,.4), inset 0 0 0 1px rgba(184,168,245,.22);
}
@media (prefers-reduced-motion: reduce){
  .hover-lift, .hover-slide{transition:none;}
  .hover-lift:hover, .hover-slide:hover{transform:none;}
}

/* ---------------------------------------------------------------
   MOBILE / TABLET OVERRIDES
   The landing layout lives in inline styles, so these overrides
   need !important to win. Hook classes were added in index.html.
----------------------------------------------------------------- */

/* --- tablet: relax the grids before phones --- */
@media (max-width: 960px){
  .grid-4{grid-template-columns:repeat(2,1fr) !important;}
  .grid-3{grid-template-columns:1fr !important;}
  .feat-row{flex-direction:column !important;gap:24px !important;}
  .feat-stats{flex-shrink:1 !important;flex-wrap:wrap;}
}

/* --- mobile dropdown menu (hidden on desktop) --- */
.nav-toggle{
  display:none;width:38px;height:38px;flex-shrink:0;
  border:none;border-radius:10px;background:rgba(184,168,245,.12);
  color:#fff;align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle .ico-close{display:none;}
.topbar.is-open .nav-toggle .ico-open{display:none;}
.topbar.is-open .nav-toggle .ico-close{display:block;}
.nav-menu{display:none;}

/* --- phone --- */
@media (max-width: 760px){

  /* Nav pill: full-width app bar — logo + Sign up + hamburger */
  .topbar{top:10px;}
  .topbar .topbar__pill{width:100%;justify-content:space-between;gap:10px;height:56px;padding:0 9px 0 16px;}
  .topbar__pill nav{display:none !important;}
  .pill-signin{display:none !important;}
  .nav-toggle{display:flex;}
  .topbar.is-shrunk .topbar__pill,
  .topbar.is-shrunk .topbar__pill:hover{transform:none;gap:10px;padding:0 9px 0 16px;}

  /* Dropdown panel under the pill */
  .topbar.is-open .nav-menu{
    display:flex;flex-direction:column;pointer-events:auto;
    position:absolute;top:calc(100% + 8px);left:16px;right:16px;
    background:rgba(24,6,64,.94);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid rgba(184,168,245,.18);border-radius:18px;
    padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.5);
    animation:menuIn .18s ease both;
  }
  .nav-menu a{padding:13px 16px;border-radius:12px;font-size:15px;font-weight:500;color:#e7e1f5;}
  .nav-menu a:hover,.nav-menu a:active{background:rgba(184,168,245,.1);color:#fff;}
  .nav-menu__signin{margin-top:6px;border-top:1px solid rgba(184,168,245,.12);border-radius:0 0 12px 12px !important;color:#b8a8f5 !important;}

  /* Page gutters + section rhythm */
  #top{padding:0 20px !important;}
  #top > section{padding:72px 0 !important;}
  #top > section.hero{padding:92px 0 0 !important;}
  #top > section.demo{padding:28px 0 40px !important;}
  #top > section#waitlist{padding:72px 0 48px !important;}

  /* Hero: tighter so the agent demo fits on the first screen */
  .hero p{font-size:15px !important;line-height:23px !important;margin-top:12px !important;}
  .hero p:last-of-type{font-size:11px !important;line-height:17px !important;margin-top:10px !important;}

  /* Agent demo: compact "zoomed out" scale so the card fits a phone */
  .agent__bar{padding:10px 14px;}
  .agent__rail{padding:10px;}
  .agent__stage{padding:16px !important;min-height:380px !important;}
  .aview{inset:16px !important;gap:12px !important;}
  .aview__h{font-size:16px !important;}
  .aview__kicker{font-size:10px;letter-spacing:1.3px;}
  .achat__bubble{font-size:14px;line-height:21px;padding:12px 14px;}
  .achip{padding:6px 11px 6px 10px;}
  .achip__v{font-size:12px;}
  .asend__btn{font-size:13px;padding:9px 16px;}
  .acount__n{font-size:34px;letter-spacing:-1px;}
  .acount__l{font-size:11px;}
  .atpl{font-size:10px;padding:6px 9px;}
  .anote{font-size:12px;padding:10px 12px;}
  .abrow__bar{padding:9px 12px;font-size:12px;}
  .arow{padding:10px 12px;gap:10px;}
  .arow__k{width:76px;font-size:9px;}
  .arow__v{font-size:12.5px;}
  .acraft__chip{font-size:10px;padding:6px 9px;}
  .astream{gap:9px;padding:12px 0 2px;}
  .aline{height:9px;}
  .amail__subj{padding:11px 14px;gap:8px;}
  .amail__lab{font-size:9px;}
  .amail__line{font-size:13px;}
  .amail__body{padding:12px 14px;font-size:12.5px;line-height:19px;gap:7px;}
  .amail__body p:nth-child(4){display:none;}
  .amail__foot{padding:10px 14px;}
  .amail__ready{font-size:11px;}
  .amail__cta{font-size:12px;padding:8px 12px;}

  /* Typography */
  #top h1{font-size:32px !important;letter-spacing:-.8px !important;}
  #top h2{font-size:32px !important;line-height:1.12 !important;letter-spacing:-.8px !important;}
  .feat-row h3{font-size:24px !important;line-height:30px !important;letter-spacing:-.5px !important;}
  .cta-pad h3{font-size:22px !important;line-height:29px !important;}
  .cta-pad{padding:26px 22px 26px !important;}

  /* Problem: stack the two numbered columns */
  .prob-cols{flex-direction:column !important;gap:32px !important;margin-top:40px !important;}
  .prob-col{padding:0 !important;border-left:none !important;}
  .quote-card{padding:36px 24px !important;margin-top:56px !important;}
  .quote-card p{font-size:21px !important;line-height:30px !important;}
  .pullquote{font-size:21px !important;line-height:31px !important;}

  /* How it works: drop the staircase indents, shrink the numbers */
  #solution .hover-slide{margin:0 !important;padding:18px 18px !important;}
  #solution .hover-slide > span:first-child{width:52px !important;font-size:28px !important;}

  /* VS cards: stack with the badge between them */
  .vs-wrap{flex-direction:column !important;}
  .vs-wrap > div:not(.vs-badge){padding:28px 24px !important;}
  .vs-badge{position:static !important;transform:none !important;margin:-32px auto !important;z-index:2;}

  /* Feature hero card + stat tiles */
  .feat-card{padding:28px 22px !important;}
  .feat-stats > div{width:auto !important;flex:1 1 90px;}
  .car-hint{display:none !important;}

  /* Grids fully stacked */
  .grid-4{grid-template-columns:1fr !important;}

  /* Who it's for closing line wraps */
  .for-line{flex-wrap:wrap !important;justify-content:center;font-size:20px !important;}

  /* Pricing cards */
  .price-card{padding:30px 24px !important;}

  /* Footer stacks */
  .foot-wrap{padding:0 20px !important;}
  footer{padding:64px 0 !important;}
  .foot-top{flex-direction:column !important;gap:40px !important;}
  .foot-brand{width:100% !important;}
  .foot-cols{margin-left:0 !important;flex-wrap:wrap !important;gap:32px 24px !important;}
  .foot-cols > div{width:auto !important;flex:1 1 150px;}
  .foot-bottom{flex-direction:column !important;align-items:flex-start !important;gap:20px !important;}

  /* Full-width primary CTAs feel native on mobile */
  .cta-pad .btn-primary{display:flex !important;width:100%;justify-content:center;}

  /* Template carousel: narrower cards so the next one peeks in */
  .tcard{width:250px !important;}

  /* Floating badge: icon only, tucked into the corner */
  .po-badge{right:14px !important;bottom:14px !important;padding:8px !important;}
  .po-badge__txt{display:none !important;}
}

@keyframes menuIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}