/* ============================================================
   REALEFLOW · DESIGN SYSTEM
   Cartographic Infrastructure — refined dark, technical mono,
   editorial serif accents, aurora teal→blue gradients.
============================================================ */

:root{
  /* Brand */
  --teal:#22DFDC;
  --blue:#8bc9ee;

  /* Dark elevation tiers */
  --bg:#08090B;          /* base — slightly cooler than #0a0a0a */
  --bg-1:#0E1014;        /* one elevation up */
  --bg-2:#13161B;        /* surface */
  --bg-3:#1B1F26;        /* elevated card */
  --bg-warm:#171516;     /* warm dark used for case study */

  /* Lines and dividers */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  /* Text */
  --ink:#F5F6F4;         /* off-white */
  --ink-2:#C7CAC2;       /* secondary */
  --ink-3:#8B8F88;       /* tertiary / mono labels */
  --ink-4:#5B5F58;       /* faint */

  /* Type */
  --sans:"Geist","Inter",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
  --serif:"Geist Mono",ui-monospace,Menlo,monospace;

  /* Sizing */
  --radius:14px;
  --radius-lg:22px;
  --container:1440px;

  /* Motion */
  --ease:cubic-bezier(.2,.65,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
*::selection{background:var(--blue);color:#0a0a0a}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  background:var(--bg);
}

html{
  /* Defense-in-depth against horizontal scroll. Some descendants
     (rotated postcards, floating deal tiles, hot-zone heatmap
     blobs) overflow their containers; overflow-x:clip on the root
     prevents iOS Safari from letting the page scroll horizontally
     even when body's own overflow-x:hidden gets bypassed. */
  overflow-x:clip;
}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  letter-spacing:-0.005em;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}

/* Utilities --------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:720px){ .container{padding:0 20px} }

.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px 6px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(8px);
}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 3px rgba(139,201,238,.15);
  animation:pulseDot 2.4s var(--ease) infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 3px rgba(139,201,238,.15)}
  50%{box-shadow:0 0 0 6px rgba(139,201,238,.04)}
}

.dot{display:inline-block;width:6px;height:6px;border-radius:50%}
.dot--blue{background:var(--blue);box-shadow:0 0 6px rgba(139,201,238,.6)}

em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--blue);
  font-size:.92em;
  letter-spacing:-.025em;
}

/* Buttons ------------------------------------------------------
   Single pill with an inline icon "viewport" on the right. On
   hover the visible icon slides off to the right and a duplicate
   slides in from the left — the ticker effect, contained inside
   the button itself. */
.btn{
  display:inline-flex;align-items:center;
  gap:10px;
  padding:13px 22px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  letter-spacing:-.005em;
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform   .35s var(--ease),
    background  .35s ease,
    border-color .35s ease,
    box-shadow  .35s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* Icon viewport: a fixed-size frame with overflow hidden, so the
   two stacked icons slide within it cleanly. */
.btn__icon{
  position:relative;
  display:inline-flex;
  width:14px;
  height:14px;
  flex-shrink:0;
  overflow:hidden;
}
.btn__icon-svg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.btn__icon-svg svg{ display:block; }
.btn__icon-svg--leading{ transform:translateX(-130%); }
.btn:hover .btn__icon-svg--default,
.btn:focus-visible .btn__icon-svg--default{ transform:translateX(130%); }
.btn:hover .btn__icon-svg--leading,
.btn:focus-visible .btn__icon-svg--leading{ transform:translateX(0); }

/* Sizes */
.btn--sm{ padding:9px 16px; font-size:13px; gap:8px; }
.btn--sm .btn__icon{ width:12px; height:12px; }

.btn--lg{ padding:18px 28px; font-size:15px; gap:12px; }
.btn--lg .btn__icon{ width:16px; height:16px; }

/* Primary — solid gradient pill */
.btn--primary{
  color:#06231C;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 10px 28px -10px rgba(34,223,220,.5);
}
.btn--primary:hover{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 16px 36px -8px rgba(139,201,238,.6);
}

/* Ghost — outlined translucent pill */
.btn--ghost{
  color:var(--ink);
  border-color:var(--line-2);
  background:rgba(255,255,255,.03);
}
.btn--ghost:hover{
  background:rgba(139,201,238,.08);
  border-color:rgba(139,201,238,.45);
}
.btn--ghost .btn__icon{ color:var(--blue); }

/* ============================================================
   NAVIGATION
============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 0;
  transition:padding .3s var(--ease), background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding:10px 0;
  background:rgba(8,9,11,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:32px;
}
@media (max-width:720px){ .nav__inner{padding:0 20px;gap:14px} }

.nav__logo{
  display:inline-flex;align-items:center;
  flex-shrink:0;
}
.nav__logo-full{
  display:block;
  height:22px;width:auto;
  user-select:none;
}
.nav__logo-mark{
  display:none;
  height:22px;width:auto;
  user-select:none;
}
.footer__logo img{
  display:block;
  height:26px;width:auto;
  user-select:none;
}
@media (max-width:560px){
  .nav__logo-full{ display:none; }
  .nav__logo-mark{ display:block; }
}

.nav__links{
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:14px;
}
.nav__links a, .nav__dropdown button{
  position:relative;
  padding:8px 14px;
  color:var(--ink-2);
  border-radius:999px;
  transition:color .25s ease, background .25s ease;
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;
  font-weight:450;
}
.nav__links a:hover, .nav__dropdown button:hover{ color:var(--ink); background:rgba(255,255,255,.04) }
.nav__links a.is-active{ color:var(--ink) }
.nav__links a.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;
  background:linear-gradient(90deg,var(--teal),var(--blue));
}

.nav__dropdown{position:relative}
.nav__dropdown svg{transition:transform .25s ease}
.nav__dropdown:hover svg{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,4px);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px;
  min-width:280px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease, transform .25s var(--ease), visibility .2s ease;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.nav__dropdown:hover .nav__menu, .nav__dropdown:focus-within .nav__menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.nav__menu a{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:10px 14px;border-radius:10px;
  background:transparent;
}
.nav__menu a:hover{background:rgba(255,255,255,.04)}
/* Active dropdown item — outline ring instead of an underline so it
   doesn't read as a divider between the AI Tools / Features rows. */
.nav__menu a.is-active{
  background:rgba(34,223,220,.06);
  box-shadow:inset 0 0 0 1px rgba(34,223,220,.45);
}
.nav__menu a.is-active::after{ display:none; }
.nav__menu-label{color:var(--ink);font-size:14px;font-weight:500}
.nav__menu-meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}

.nav__actions{display:flex;align-items:center;gap:14px}
.nav__login{font-size:14px;color:var(--ink-2);padding:6px 8px}
.nav__login:hover{color:var(--ink)}
.nav__burger{display:none}

@media (max-width:1020px){
  /* Switch from 3-col grid to flex with space-between so logo pins to
     the left and the actions cluster pins to the right. The 1fr middle
     column was getting squeezed to 0 by the wide Apply Now button. */
  .nav__inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .nav__links{display:none}
  .nav__login{display:none}
  .nav__burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:36px;height:36px;align-items:center;
    border:1px solid var(--line);border-radius:10px;
    position:relative;z-index:201; /* sit above the mobile-nav backdrop */
    transition:border-color .25s ease;
  }
  .nav__burger span{
    display:block;width:14px;height:1.4px;background:var(--ink);
    transition:transform .35s cubic-bezier(.6,0,.2,1);
  }
  /* Morph the two bars into an X when the mobile menu is open. */
  body.nav-open .nav__burger{ border-color:rgba(255,255,255,.18); }
  body.nav-open .nav__burger span:nth-child(1){ transform:translateY(3.2px) rotate(45deg); }
  body.nav-open .nav__burger span:nth-child(2){ transform:translateY(-3.2px) rotate(-45deg); }
}

/* ============================================================
   MOBILE NAVIGATION PANEL
   Full-screen slide-in panel injected at <body> level by
   script.js when the burger is tapped. The panel covers the
   viewport, fades in a blurred dark backdrop, and staggers the
   nav links in with a small translateY rise.
============================================================ */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  visibility:hidden;
  transition:visibility 0s linear .45s; /* delay hiding until panel/backdrop fade out */
}
body.nav-open{ overflow:hidden; }
body.nav-open .mobile-nav{
  pointer-events:auto;
  visibility:visible;
  transition:visibility 0s linear 0s;
}

.mobile-nav__backdrop{
  position:absolute;inset:0;
  background:rgba(6,7,10,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .35s var(--ease-out);
}
body.nav-open .mobile-nav__backdrop{ opacity:1; }

.mobile-nav__panel{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(440px, 92vw);
  background:linear-gradient(180deg, #0F1218 0%, #0A0B0F 100%);
  border-left:1px solid rgba(255,255,255,.06);
  box-shadow:-40px 0 80px -30px rgba(0,0,0,.8);
  display:flex;flex-direction:column;
  padding:22px 26px 24px;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.6,0,.2,1);
  overflow:hidden;
}
body.nav-open .mobile-nav__panel{ transform:translateX(0); }

.mobile-nav__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:36px;
  padding:6px 0;
}
.mobile-nav__logo{
  display:inline-flex;align-items:center;
  opacity:.95;
}
.mobile-nav__logo img{ height:20px;width:auto;display:block; }
.mobile-nav__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:transparent;color:var(--ink);
  transition:border-color .25s ease, background .25s ease;
}
.mobile-nav__close:hover{
  border-color:rgba(34,223,220,.4);
  background:rgba(34,223,220,.05);
}

.mobile-nav__nav{
  display:flex;flex-direction:column;
  gap:32px;
  flex:1;
  padding:6px 0;
}
.mobile-nav__group{
  display:flex;flex-direction:column;gap:14px;
}
.mobile-nav__kicker{
  font-size:10.5px;color:rgba(255,255,255,.42);letter-spacing:.16em;
  margin-bottom:2px;
}
/* Uniform link size — all destination pages read at the same
   visual weight. Hierarchy comes from the mono kicker above
   grouped items, not from font-size differences. */
.mobile-nav__link,
.mobile-nav__sub{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--sans);
  font-size:22px;font-weight:500;
  letter-spacing:-.015em;
  color:var(--ink);
  text-decoration:none;
  padding:4px 0;
}
.mobile-nav__link:hover,
.mobile-nav__sub:hover{ color:var(--teal); }
.mobile-nav__link::after,
.mobile-nav__sub::after{
  content:"";
  display:inline-block;
  width:14px;height:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322DFDC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13'/><path d='m12 5 7 7-7 7'/></svg>");
  background-repeat:no-repeat;background-size:contain;
  opacity:0;transform:translateX(-4px);
  transition:opacity .25s ease, transform .25s ease;
}
.mobile-nav__link:hover::after,
.mobile-nav__sub:hover::after{ opacity:1;transform:translateX(0); }

.mobile-nav__foot{
  display:flex;flex-direction:column;gap:12px;
  padding-top:20px;
  margin-top:auto;
}
.mobile-nav__foot .btn{ width:100%;justify-content:center; }

/* Stagger-rise animation for the nav items. The keyframe runs only
   once per open; the delay sequences entries so they cascade in. */
.mobile-nav__nav > *,
.mobile-nav__foot > *{
  opacity:0;transform:translateY(8px);
}
body.nav-open .mobile-nav__nav > *,
body.nav-open .mobile-nav__foot > *{
  animation:mnRise .55s var(--ease-out) forwards;
}
body.nav-open .mobile-nav__nav > *:nth-child(1){ animation-delay:.16s; }
body.nav-open .mobile-nav__nav > *:nth-child(2){ animation-delay:.22s; }
body.nav-open .mobile-nav__nav > *:nth-child(3){ animation-delay:.28s; }
body.nav-open .mobile-nav__nav > *:nth-child(4){ animation-delay:.34s; }
body.nav-open .mobile-nav__nav > *:nth-child(5){ animation-delay:.40s; }
body.nav-open .mobile-nav__foot > *:nth-child(1){ animation-delay:.46s; }
body.nav-open .mobile-nav__foot > *:nth-child(2){ animation-delay:.52s; }
@keyframes mnRise{
  to{ opacity:1;transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .mobile-nav__panel{ transition:none; }
  .mobile-nav__nav > *,
  .mobile-nav__foot > *{ opacity:1;transform:none;animation:none; }
}

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative;
  min-height:min(900px,100svh);
  padding:120px 0 80px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  /* Containment: tell the browser this section's paint is contained
     within its bounds, so scrolling won't trigger repaints of the
     animated/blurred children when the hero is offscreen. */
  contain:layout paint style;
}
.hero__bg{position:absolute;inset:0;z-index:-1}

/* Animated CSS shader — four large blurred blobs drifting on different
   timings to create a slow, generative-feeling backdrop. No canvas/JS. */
.hero__shader{
  position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, #0E141C 0%, #07090C 70%);
  overflow:hidden;
  pointer-events:none;
}
.hero__blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  will-change:transform;
  pointer-events:none;
}
.hero__blob--a{
  width:62vw;aspect-ratio:1;
  top:-18%;left:-12%;
  background:radial-gradient(closest-side, rgba(34,223,220,.55), transparent 70%);
  animation:blobA 24s ease-in-out infinite alternate;
}
.hero__blob--b{
  width:58vw;aspect-ratio:1;
  bottom:-22%;right:-14%;
  background:radial-gradient(closest-side, rgba(139,201,238,.55), transparent 70%);
  animation:blobB 28s ease-in-out infinite alternate;
}
.hero__blob--c{
  width:48vw;aspect-ratio:1;
  top:20%;left:30%;
  background:radial-gradient(closest-side, rgba(60,120,180,.30), transparent 70%);
  animation:blobC 34s ease-in-out infinite alternate;
}
.hero__blob--d{
  width:30vw;aspect-ratio:1;
  bottom:10%;left:8%;
  background:radial-gradient(closest-side, rgba(34,223,220,.22), transparent 70%);
  animation:blobD 20s ease-in-out infinite alternate;
}

@keyframes blobA{
  0%  { transform:translate(0,0) scale(1); }
  50% { transform:translate(14vw, 10vh) scale(1.08); }
  100%{ transform:translate(6vw, -6vh) scale(.95); }
}
@keyframes blobB{
  0%  { transform:translate(0,0) scale(1); }
  50% { transform:translate(-12vw,-8vh) scale(1.12); }
  100%{ transform:translate(4vw,-14vh) scale(1.02); }
}
@keyframes blobC{
  0%  { transform:translate(0,0) scale(1); }
  50% { transform:translate(-9vw, 5vh) scale(1.05); }
  100%{ transform:translate(8vw,-7vh) scale(1.1); }
}
@keyframes blobD{
  0%  { transform:translate(0,0) scale(.9); }
  50% { transform:translate(8vw,-6vh) scale(1.05); }
  100%{ transform:translate(-4vw,4vh) scale(.95); }
}

/* Faint cinematic image layered on top of the shader.
   Screen blend lets the bright wireframes/lights show, dark areas drop out. */
.hero__intel{
  position:absolute;inset:0;
  background-image:url('assets/images/hero-intelligence.webp');
  background-size:cover;
  background-position:center right;
  opacity:.32;
  pointer-events:none;
  filter:saturate(.95) contrast(1.05);
  animation:intelDrift 36s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes intelDrift{
  0%  { transform:scale(1.02) translate3d(0,0,0); }
  100%{ transform:scale(1.06) translate3d(-1%, .5%, 0); }
}

@media (prefers-reduced-motion:reduce){
  .hero__blob, .hero__intel{ animation:none !important; }
}

.hero__veil{
  position:absolute;inset:0;
  background:
    /* faint left-side scrim so the headline reads cleanly */
    linear-gradient(90deg, rgba(8,9,11,.45) 0%, rgba(8,9,11,.15) 35%, transparent 60%),
    /* bottom gutter so the page transitions cleanly into the next section */
    linear-gradient(180deg, transparent 60%, rgba(8,9,11,.65) 85%, rgba(8,9,11,.95) 100%);
}

.hero__aurora{
  position:absolute;
  width:1100px;height:600px;
  left:50%;top:30%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(34,223,220,.18), transparent 70%),
    radial-gradient(closest-side at 70% 40%, rgba(139,201,238,.18), transparent 70%);
  filter:blur(60px);
  opacity:.85;
  animation:auroraDrift 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes auroraDrift{
  0%{transform:translate(-50%,-50%) translate(-30px,0)}
  100%{transform:translate(-50%,-50%) translate(40px,-20px)}
}

.hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  opacity:.5;
}
.hero__grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;pointer-events:none}

.hero__inner{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:56px;
  align-items:center;
  position:relative;
  z-index:1;
}
@media (max-width:1020px){
  .hero__inner{grid-template-columns:1fr;gap:48px}
}

.hero__copy > *{ opacity:0; transform:translateY(14px); animation:rise .9s var(--ease-out) forwards; animation-delay:var(--d,0s) }
@keyframes rise{ to{opacity:1;transform:translateY(0)} }

.hero__headline{
  margin-top:22px;
  font-size:clamp(40px, 4.4vw, 72px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:550;
  color:var(--ink);
}
.hero__line{display:block;opacity:0;transform:translateY(20px);animation:rise 1s var(--ease-out) forwards;animation-delay:var(--d,0s);padding:2px 0}
.hero__line--accent em{font-size:1.05em}
.hero__line--accent{ font-weight:400 }

.hero__sub{
  margin-top:22px;
  max-width:560px;
  font-size:clamp(16px, 1.2vw, 19px);
  color:var(--ink-2);
  line-height:1.55;
}

.hero__ctas{
  margin-top:32px;
  display:flex;flex-wrap:wrap;gap:12px;
}

.hero__trust{
  margin-top:42px;
  display:flex;flex-wrap:wrap;gap:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.hero__trust-item{display:flex;flex-direction:column;gap:2px}
.hero__trust-item .mono{color:var(--ink)}
.hero__trust-item span:last-child{font-size:13px;color:var(--ink-3)}

/* Hero LATTICE — signature visual, glassmorphic card */
/* ============================================================
   HERO APP MOCK — simplified white-label software preview that
   cycles through three brand skins. Dark theme so it lives with
   the rest of the hero; tilted in 3-D so it reads bigger without
   eating the headline column.
============================================================ */
.hero__app{
  position:relative;
  perspective:1000px;
  perspective-origin:25% 50%;
}
.app-mock{
  --skin-bg:#13161B;
  --skin-surface:#181C24;
  --skin-elevated:#1F242E;
  --skin-line:rgba(255,255,255,.10);
  --skin-line-soft:rgba(255,255,255,.06);
  --skin-text:#EDEEEA;
  --skin-text-muted:rgba(255,255,255,.55);
  --skin-placeholder:rgba(255,255,255,.14);
  --skin-placeholder-strong:rgba(255,255,255,.32);
  --skin-accent:#22DFDC;
  --skin-mark:#1B72E8;

  position:relative;
  width:100%;
  background:var(--skin-bg);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  font-family:var(--sans);
  color:var(--skin-text);
  isolation:isolate;

  /* 3-D tilt: right side recedes more dramatically + a slight
     downward pitch. Lower perspective + larger rotation = more
     pronounced depth. */
  transform-style:preserve-3d;
  transform-origin:20% 50%;
  transform:rotateY(-22deg) rotateX(7deg);

  box-shadow:
    /* contact shadow underneath */
    0 35px 60px -25px rgba(0,0,0,.7),
    /* longer ambient halo */
    0 60px 120px -40px rgba(0,0,0,.55),
    /* tight outline */
    0 0 0 1px rgba(255,255,255,.04),
    /* faint accent halo, intensifies during swap */
    0 0 0 0 rgba(34,223,220,0);

  opacity:0;
  animation:appMockBoot 1.2s var(--ease-out) .15s forwards;
  transition:
    background  1.1s ease,
    border-color 1.1s ease,
    box-shadow  1.1s ease;
  will-change:transform, box-shadow;
}
@keyframes appMockBoot{
  0%  { opacity:0; transform:rotateY(-22deg) rotateX(7deg) translateY(20px) scale(.94); }
  100%{ opacity:1; transform:rotateY(-22deg) rotateX(7deg) translateY(0) scale(1); }
}

/* The accent "sweep" overlay that flashes across the mock whenever
   the brand skin changes. Pure visual moment — no layout impact. */
.app-mock::after{
  content:"";
  position:absolute;
  inset:-3px;
  background:linear-gradient(105deg,
    transparent 30%,
    var(--skin-accent) 48%,
    transparent 66%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:5;
  border-radius:inherit;
  filter:blur(2px);
  transform:translateX(-110%);
}
.app-mock.is-swapping::after{
  animation:mockSwap 1.15s ease-out;
}
@keyframes mockSwap{
  0%  { opacity:0;   transform:translateX(-110%); }
  35% { opacity:.7;  }
  100%{ opacity:0;   transform:translateX(110%); }
}

/* During swap, brief outer glow in the new accent color */
.app-mock.is-swapping{
  box-shadow:
    0 35px 60px -25px rgba(0,0,0,.7),
    0 60px 120px -40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 60px 4px var(--skin-accent);
  transition:box-shadow .6s ease;
}

/* ---- per-skin tokens ---- */
.app-mock[data-skin="0"]{ --skin-accent:#34D399; --skin-mark:#6EE7B7; }
.app-mock[data-skin="1"]{ --skin-accent:#F19B3F; --skin-mark:#F0B96A; }
.app-mock[data-skin="2"]{ --skin-accent:#A78BFA; --skin-mark:#C4B5FD; }

/* ---- top nav ---- */
.app-mock__nav{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--skin-line-soft);
  background:var(--skin-bg);
  position:relative;
  z-index:2;
  transition:background 1.1s ease, border-color 1.1s ease;
}
.app-mock__brand{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.app-mock__mark{
  position:relative;
  width:22px;height:22px;
  display:inline-block;
}
.app-mock__mark-shape{
  position:absolute;inset:0;
  width:100%;height:100%;
  color:var(--skin-mark);
  opacity:0;
  transform:scale(.55) rotate(-40deg);
  transition:
    opacity   .9s ease,
    transform .9s var(--ease-out),
    color     1.1s ease,
    filter    .9s ease;
  filter:drop-shadow(0 0 0 transparent);
}
.app-mock[data-skin="0"] .app-mock__mark-shape[data-skin="0"],
.app-mock[data-skin="1"] .app-mock__mark-shape[data-skin="1"],
.app-mock[data-skin="2"] .app-mock__mark-shape[data-skin="2"]{
  opacity:1;
  transform:scale(1) rotate(0);
  filter:drop-shadow(0 0 8px var(--skin-accent));
}

.app-mock__brand-text{
  position:relative;
  display:inline-block;
  height:14px;
  min-width:118px;
}
.app-mock__brand-name{
  position:absolute;left:0;top:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--skin-text);
  white-space:nowrap;
  opacity:0;
  transform:translateY(14px) scale(.92);
  transition:
    opacity   .8s ease,
    transform .8s var(--ease-out);
}
.app-mock[data-skin="0"] .app-mock__brand-name[data-skin="0"],
.app-mock[data-skin="1"] .app-mock__brand-name[data-skin="1"],
.app-mock[data-skin="2"] .app-mock__brand-name[data-skin="2"]{
  opacity:1;
  transform:translateY(0) scale(1);
}

.app-mock__search{
  flex:1;
  height:28px;
  background:var(--skin-surface);
  border:1px solid var(--skin-line-soft);
  border-radius:8px;
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
  transition:background 1.1s ease, border-color 1.1s ease;
}
.app-mock__search-dot{
  width:9px;height:9px;
  border:1.5px solid var(--skin-text-muted);
  border-radius:50%;
  flex-shrink:0;
}
.app-mock__search-line{
  flex:1;height:5px;
  background:var(--skin-placeholder);
  border-radius:3px;
  max-width:55%;
  transition:background 1.1s ease;
}
.app-mock__nav-actions{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.app-mock__pill{
  width:48px;height:22px;
  background:var(--skin-accent);
  border-radius:7px;
  transition:background 1.1s ease, box-shadow 1.1s ease;
  box-shadow:0 0 14px -2px var(--skin-accent);
}
.app-mock__avatar{
  width:24px;height:24px;
  border-radius:50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
}

/* ---- body: map + cards ---- */
.app-mock__body{
  display:grid;
  grid-template-columns:0.9fr 1fr;
  gap:0;
  background:var(--skin-bg);
  transition:background 1.1s ease;
}
.app-mock__map{
  position:relative;
  background:var(--skin-surface);
  border-right:1px solid var(--skin-line-soft);
  min-height:300px;
  overflow:hidden;
  transition:background 1.1s ease, border-color 1.1s ease;
}
.app-mock__map-svg{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.app-mock__roads path{
  stroke:var(--skin-line);
  fill:none;
  stroke-linecap:round;
  transition:stroke 1.1s ease;
}
.app-mock__pin{
  position:absolute;
  font-size:10px;
  font-weight:600;
  letter-spacing:.01em;
  color:#0B0D11;
  background:var(--skin-accent);
  padding:3px 8px;
  border-radius:999px;
  box-shadow:0 6px 18px -4px var(--skin-accent);
  transition:background 1.1s ease, box-shadow 1.1s ease;
  white-space:nowrap;
}
.app-mock__pin--a{ left:18%; top:22%; }
.app-mock__pin--b{ left:62%; top:38%; }
.app-mock__pin--c{ left:30%; top:68%; }

/* Cards column */
.app-mock__cards{
  padding:16px;
  display:flex;flex-direction:column;gap:12px;
  background:var(--skin-bg);
  transition:background 1.1s ease;
}
.app-mock__card{
  background:var(--skin-elevated);
  border:1px solid var(--skin-line-soft);
  border-radius:10px;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;
  transition:background 1.1s ease, border-color 1.1s ease;
}
.app-mock__card-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;
}
.app-mock__lines{
  display:flex;flex-direction:column;gap:6px;
  flex:1;min-width:0;
}
.app-mock__line{
  height:5px;
  background:var(--skin-placeholder);
  border-radius:999px;
  display:block;
  transition:background 1.1s ease;
}
.app-mock__line--lg{ width:60%; height:6px; background:var(--skin-placeholder-strong); }
.app-mock__line--sm{ width:32%; }
.app-mock__line--full{ width:100%; }
.app-mock__line--three{ width:75%; }
.app-mock__thumb{
  width:36px;height:36px;
  background:var(--skin-line);
  border-radius:6px;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.app-mock__thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--skin-accent), transparent 70%);
  opacity:.5;
  transition:opacity 1.1s ease, background 1.1s ease;
}
.app-mock__card-body{
  display:flex;flex-direction:column;gap:6px;
}

@media (max-width:1020px){
  .hero__app{ perspective:none; }
  .app-mock{
    transform:none;
    max-width:600px;
    margin:0 auto;
  }
  .app-mock.is-swapping{
    box-shadow:
      0 35px 60px -25px rgba(0,0,0,.7),
      0 0 0 1px rgba(255,255,255,.04),
      0 0 60px 4px var(--skin-accent);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero__app{ perspective:none; }
  .app-mock{ transform:none; animation:none; opacity:1; }
  .app-mock::after{ display:none; }
}
.lattice{
  position:relative;
  border-radius:var(--radius-lg);
  padding:20px;
  border:1px solid transparent;
  /* layered backgrounds: subtle vertical sheen on the surface, gradient hairline border */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.01) 38%, rgba(255,255,255,.04) 100%) padding-box,
    linear-gradient(140deg, rgba(34,223,220,.55) 0%, rgba(139,201,238,.35) 35%, rgba(255,255,255,.06) 70%, rgba(34,223,220,.25) 100%) border-box;
  background-color:rgba(10,14,20,.72);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  /* Promote to its own compositor layer so scroll doesn't repaint backdrop */
  transform:translateZ(0);
  will-change:transform;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 40px 100px -30px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
  isolation:isolate;
  /* Card boot-in animation */
  opacity:0;
  transform:translateY(14px) scale(.985);
  animation:latticeBoot .9s var(--ease-out) .15s forwards;
}
@keyframes latticeBoot{
  0%  { opacity:0; transform:translateY(14px) scale(.985); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
/* Specular highlight bloom along the top-left edge */
.lattice::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:60%;
  background:radial-gradient(120% 80% at 25% 0%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
  border-radius:inherit;
  z-index:0;
}
.lattice > *{ position:relative; z-index:1; }

.lattice__legend{
  display:flex;gap:14px;font-size:11px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;
}
.lattice__legend span{display:inline-flex;align-items:center;gap:6px}
.lattice__legend .mono{color:var(--ink);}
.lattice__legend i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c)}

.lattice__grid{
  margin:14px 0;
  display:grid;
  grid-template-columns:repeat(28, 1fr);
  gap:5px;
  height:160px;
}
.lattice__cell{
  background:rgba(255,255,255,.05);
  border-radius:2px;
  transition:background .35s ease, box-shadow .35s ease, transform .25s var(--ease-out);
  /* Boot-load: cells appear in a wave (delay set per-cell in JS) */
  opacity:0;
  transform-origin:center;
  animation:cellBoot .55s var(--ease-out) forwards;
}
@keyframes cellBoot{
  0%  { opacity:0; transform:scale(.35); }
  60% { opacity:1; transform:scale(1.18); }
  100%{ opacity:1; transform:scale(1); }
}
.lattice__cell.is-scored{
  background:rgba(34,223,220,.65);
  box-shadow:0 0 8px rgba(34,223,220,.4);
}
.lattice__cell.is-matched{
  background:rgba(139,201,238,.7);
  box-shadow:0 0 8px rgba(139,201,238,.5);
}
.lattice__cell.is-popping{
  animation:cellPop .55s var(--ease-out);
}
@keyframes cellPop{
  0%{transform:scale(.4);opacity:0}
  60%{transform:scale(1.25)}
  100%{transform:scale(1);opacity:1}
}
.lattice__cell.is-flash{
  background:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.8);
}
.lattice__cell.is-fading{
  transition:background .9s ease, box-shadow .9s ease;
}

.lattice__feed{
  border-top:1px solid var(--line);
  padding-top:12px;
  font-size:13px;
  color:var(--ink-2);
  height:120px;
  overflow:hidden;
  position:relative;
  --row-h:29px;
  mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.lattice__feed-track{
  display:flex;flex-direction:column;gap:7px;
  will-change:transform;
}
.lattice__row{
  display:flex;gap:14px;align-items:baseline;
  height:22px;line-height:22px;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  flex-shrink:0;
}
.lattice__row .mono{color:var(--ink-3);flex-shrink:0}
.lattice__row span:last-child{
  overflow:hidden;text-overflow:ellipsis;
}
.lattice__row.is-fresh{
  animation:rowGlow .9s ease-out;
}
@keyframes rowGlow{
  0%{color:var(--blue);transform:translateX(-3px);opacity:0}
  35%{opacity:1}
  100%{color:var(--ink-2);transform:translateX(0);opacity:1}
}

.lattice__stat-row{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.lattice__label{color:var(--ink-3)}
.lattice__big{
  font-family:var(--sans);
  font-size:20px;letter-spacing:-.02em;font-weight:500;
  color:var(--ink);
  line-height:1.1;
}

@media (max-width:1020px){
  .lattice{max-width:560px;margin:0 auto}
  .lattice__grid{grid-template-columns:repeat(20,1fr);height:120px}
}
@media (max-width:520px){
  .lattice__grid{grid-template-columns:repeat(14,1fr);height:90px}
  .lattice__legend{display:none}
}

.hero__scroll{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-3);
  z-index:2;
}
.hero__scroll-line{
  display:block;width:1px;height:32px;
  background:linear-gradient(180deg, transparent, var(--ink-3), transparent);
  animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{
  0%,100%{transform:scaleY(.4);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
}
@media (max-width:1020px){.hero__scroll{display:none}}

/* ============================================================
   MEDIA BAR
============================================================ */
.media{
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 0;
}
.media__rail{
  display:flex;align-items:center;gap:36px;
  flex-wrap:wrap;
  justify-content:center;
}
.media__eyebrow{
  flex-shrink:0;
  padding-right:36px;
  border-right:1px solid var(--line);
}
.media__track{
  display:flex;align-items:center;gap:42px;
  flex-wrap:wrap;
  justify-content:center;
  color:var(--ink-3);
  flex:1;
  filter:saturate(0);
  opacity:.85;
}
.logo{font-size:18px;letter-spacing:-.01em;font-weight:600;transition:color .3s ease}
.media__track .logo:hover{color:var(--ink)}
.logo--serifBold{font-family:Georgia,serif;font-weight:900;letter-spacing:-.02em;font-size:22px}
.logo--serifItalic{font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:22px}
.logo--fox{font-family:var(--sans);font-weight:400;font-size:18px;letter-spacing:.02em}
.logo--fox b{font-weight:800;letter-spacing:.05em}
.logo--bp{font-weight:700;font-size:14px;letter-spacing:.06em}
.logo--ent{font-weight:800;font-size:13px;letter-spacing:.18em}
.logo--cnbc{font-weight:800;font-size:18px;letter-spacing:.04em}
.logo--inman{font-family:Georgia,serif;font-weight:400;font-size:22px;letter-spacing:.01em}

@media (max-width:720px){
  .media__eyebrow{border-right:0;padding-right:0}
  .media__track{gap:24px}
  .logo--serifBold,.logo--serifItalic,.logo--inman{font-size:18px}
}

/* ============================================================
   SECTION HEADERS (shared)
============================================================ */
.section-head{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:60px;
  max-width:780px;
}
.section-head--center{text-align:center;align-items:center;margin-left:auto;margin-right:auto}
.section-head--split{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:48px;align-items:end;
  max-width:none;
}
@media (max-width:900px){
  .section-head--split{grid-template-columns:1fr}
}
.section-head__kicker{color:var(--ink-3)}
.section-head__title{
  font-size:clamp(32px, 4.4vw, 56px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:550;
}
.section-head__lead{
  margin-top:6px;
  color:var(--ink-2);
  font-size:18px;
  max-width:560px;
}

/* ============================================================
   PROOF OF SCALE
============================================================ */
.scale{
  padding:120px 0;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(139,201,238,.05), transparent 60%),
    var(--bg-1);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.scale__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.scale__cell{
  padding:64px 36px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  transition:background .4s ease;
}
.scale__cell:last-child{border-right:0}
.scale__cell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,201,238,.5), transparent);
  opacity:0;transition:opacity .4s ease;
}
.scale__cell:hover::before{opacity:1}
.scale__cell:hover{background:rgba(255,255,255,.015)}

.scale__num{
  font-size:clamp(48px, 6.6vw, 96px);
  font-weight:300;
  letter-spacing:-.05em;
  line-height:.95;
  background:linear-gradient(180deg, var(--ink) 30%, rgba(255,255,255,.4));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" on;
  white-space:nowrap;
  display:flex;align-items:baseline;
}
.scale__num span{display:inline-block}
.scale__num::after{
  content:attr(data-suffix);
  background:linear-gradient(135deg,var(--teal),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:300;
  margin-left:2px;
}
.scale__label{
  font-size:18px;color:var(--ink);font-weight:500;letter-spacing:-.01em;
  margin-top:8px;
}
.scale__sub{ color:var(--ink-3) }

.scale__note{
  margin-top:36px;text-align:center;
  color:var(--ink-3);
  font-size:14px;
}
.scale__note em{color:var(--ink-2);font-family:var(--serif);font-size:1.05em}

@media (max-width:900px){
  .scale__grid{grid-template-columns:1fr}
  .scale__cell{border-right:0;border-bottom:1px solid var(--line);padding:42px 24px}
  .scale__cell:last-child{border-bottom:0}
}

/* ============================================================
   AUDIENCE — vertical-tab pattern (eyebrow + intro + persistent CTA
   above; tab list left, image gallery right; auto-advancing with a
   thin progress rail on the active tab).
============================================================ */
.audience{
  padding:140px 0 140px;
  background:var(--bg);
  position:relative;
}

/* Header row: intro on the left, CTA pinned bottom-right */
.audience__header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:end;
  margin-bottom:80px;
}
.audience__intro{
  display:flex;flex-direction:column;gap:14px;
  max-width:760px;
}
.audience__intro .section-head__title{ margin-top:4px; }
.audience__intro .section-head__lead{ margin-top:6px; max-width:540px; }
.audience__cta{ flex-shrink:0; align-self:end; }
@media (max-width:900px){
  .audience__header{ grid-template-columns:1fr; gap:28px; align-items:start; }
  .audience__cta{ align-self:start; }
}

/* The 2-col panel */
.audience__panel{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr);
  gap:64px;
  align-items:start;
}
@media (max-width:980px){
  .audience__panel{ grid-template-columns:1fr; gap:48px; }
}

/* ---- Tab list (left column) ---- */
.audience__tabs{
  display:flex;flex-direction:column;
  padding-left:28px;       /* room for the vertical progress bar sticking out */
  position:relative;
}
@media (max-width:980px){ .audience__tabs{ order:2; } }

.aud-tab{
  position:relative;
  display:flex;align-items:flex-start;gap:18px;
  width:100%;
  padding:24px 0;
  text-align:left;
  border:0;background:transparent;
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--ink-3);
  cursor:pointer;
  transition:color .35s var(--ease);
}
.aud-tab:first-child{ border-top:0; }
.aud-tab:hover{ color:var(--ink-2); }
.aud-tab.is-active{ color:var(--ink); }

/* Vertical progress rail to the LEFT of the tab content */
.aud-tab__progress{
  position:absolute;
  left:-28px;top:0;bottom:0;
  width:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.aud-tab__progress-fill{
  position:absolute;top:0;left:0;width:100%;
  height:0%;
  background:var(--blue);
  box-shadow:0 0 8px rgba(139,201,238,.5);
  will-change:height;
}

.aud-tab__num{
  margin-top:14px;
  color:var(--ink-4);
  font-size:10px;
  flex-shrink:0;
}
.aud-tab.is-active .aud-tab__num{ color:var(--ink-3); }

.aud-tab__body{
  flex:1;display:flex;flex-direction:column;gap:0;
  min-width:0;
}
.aud-tab__title{
  font-size:clamp(28px, 2.6vw, 38px);
  letter-spacing:-.02em;
  font-weight:500;
  line-height:1.1;
  color:inherit;
  transition:color .35s var(--ease);
}

/* Description: collapsed by default, expanded when active */
.aud-tab__desc{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .45s var(--ease-out), opacity .35s ease;
}
.aud-tab.is-active .aud-tab__desc{
  grid-template-rows:1fr;
  opacity:1;
  transition-delay:.05s;
}
.aud-tab__desc > p{
  overflow:hidden;
  font-size:15px;line-height:1.55;
  color:var(--ink-2);
  max-width:520px;
  padding-top:12px;
  padding-bottom:4px;
}

/* ---- Image gallery (right column) ---- */
.audience__gallery{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-2);
  border:1px solid var(--line);
  aspect-ratio: 16 / 11;
  isolation:isolate;
}
@media (max-width:980px){
  .audience__gallery{ order:1; aspect-ratio: 4/3; }
}
@media (max-width:560px){ .audience__gallery{ aspect-ratio: 4/3; } }

.aud-image{
  position:absolute;inset:0;
  opacity:0;
  transform:translateY(28px) scale(1.02);
  transition:opacity .55s ease, transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.aud-image.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.aud-image.is-leaving{
  opacity:0;
  transform:translateY(-28px) scale(1.02);
  transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.aud-image img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.audience__gallery::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(8,9,11,.45));
  pointer-events:none;
  z-index:1;
}

.audience__arrows{
  position:absolute;
  right:18px;bottom:18px;
  display:flex;gap:10px;
  z-index:2;
}
.aud-arrow{
  width:42px;height:42px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);
  background:rgba(8,9,11,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s ease, border-color .25s ease;
}
.aud-arrow:hover{
  background:rgba(8,9,11,.85);
  border-color:rgba(139,201,238,.45);
}
.aud-arrow:active{ transform:scale(.92); }

/* ============================================================
   PILLARS
============================================================ */
.pillars{
  padding:140px 0;
  background:var(--bg-1);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.pillars__intro-aside{
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
}
.pillars__intro-aside .section-head__lead{ max-width:none; }
.pillars__cta{ flex-shrink:0; }
.pillars::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:80%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,201,238,.4), transparent);
}

.pillars__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
@media (max-width:980px){.pillars__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pillars__grid{grid-template-columns:1fr}}

.pillar{
  position:relative;
  background:var(--bg-1);
  padding:38px 32px 36px;
  display:flex;flex-direction:column;gap:14px;
  transition:background .4s ease;
  overflow:hidden;
  isolation:isolate;
}
.pillar > *{ position:relative; z-index:1; }

/* Grid-pattern hover overlay (adapted from 21st.dev grid-feature-cards).
   - SVG grid with hairline strokes + a few randomly-placed filled cells
   - Positioned top-left, masked vertically for a smooth top→bottom fade
   - Hidden by default, fades in on hover                                */
/* Outer wrapper: spans the full card; vertical linear fade so the
   grid dissolves smoothly into the dark of the card.                    */
.pillar__grid{
  pointer-events:none;
  position:absolute;
  inset:0;
  margin-top:-8px;
  z-index:0;
  opacity:0;
  transition:opacity .5s var(--ease-out);
  -webkit-mask-image:linear-gradient(180deg, #fff 0%, transparent 95%);
          mask-image:linear-gradient(180deg, #fff 0%, transparent 95%);
}
.pillar:hover .pillar__grid{ opacity:1; }

/* Subtle ambient tint behind the grid (very faint warm-light at top). */
.pillar__grid::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.04), transparent 70%);
  pointer-events:none;
}

.pillar__grid svg{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.pillar__grid svg path{
  stroke:rgba(255,255,255,.22);
  stroke-width:1;
  fill:none;
}
.pillar__grid svg rect{
  fill:rgba(255,255,255,.13);
}
.pillar:hover{background:var(--bg-2)}
.pillar__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.pillar__num{color:var(--ink-3)}
.pillar__icon{
  width:32px;height:32px;color:var(--ink-2);
  transition:color .3s ease, transform .4s var(--ease);
}
.pillar:hover .pillar__icon{color:var(--blue);transform:scale(1.05) rotate(-2deg)}
.pillar__title{
  font-size:22px;letter-spacing:-.018em;font-weight:550;line-height:1.2;
}
.pillar__copy{ color:var(--ink-2); font-size:14.5px; line-height:1.6 }

.pillar--accent .pillar__icon{ color:var(--blue) }
.pillar--accent .pillar__title::before{
  content:"";display:inline-block;
  width:5px;height:5px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  margin-right:10px;vertical-align:middle;transform:translateY(-3px);
  box-shadow:0 0 8px rgba(139,201,238,.6);
}
.pillar__tag{
  position:absolute;top:18px;right:18px;
  padding:3px 8px;
  background:rgba(139,201,238,.1);
  color:var(--blue);
  border:1px solid rgba(139,201,238,.3);
  border-radius:999px;
  font-size:9.5px;
}

/* ============================================================
   BUILT DIFFERENT — MOAT (case-study-style left-aligned layout)
============================================================ */
.moat{
  position:relative;
  padding:160px 0;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.moat__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:80px;
  align-items:center;
}
@media (max-width:1020px){
  .moat__layout{grid-template-columns:1fr;gap:48px}
}
.moat__story{
  display:flex;flex-direction:column;
}
.moat__story .section-head__kicker{ margin-bottom:18px; }
.moat__title{
  font-size:clamp(34px, 3.6vw, 56px);
  line-height:1.06;letter-spacing:-.025em;font-weight:550;
}
.moat__copy{
  margin-top:28px;
  font-size:clamp(16px, 1.1vw, 19px);
  line-height:1.6;
  color:var(--ink-2);
  max-width:540px;
}
.moat__copy strong{color:var(--ink);font-weight:500}
.moat__highlight{
  background:linear-gradient(135deg,var(--teal),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:500;
}

/* The relocated topographic-map background — used in the CTA below.
   Classes are kept the same so JS still finds #moat-map. */
.moat__map{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(40,1fr);
  grid-template-rows:repeat(20,1fr);
  gap:3px;
  padding:24px;
  mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 75%);
}
.moat__map span{
  background:rgba(255,255,255,.04);
  border-radius:1px;
}
.moat__map span.is-on{ background:rgba(34,223,220,.55); box-shadow:0 0 6px rgba(34,223,220,.45) }
.moat__map span.is-on--g{ background:rgba(139,201,238,.55); box-shadow:0 0 6px rgba(139,201,238,.45) }
/* Mobile: containers using this map (CTA, "Built Different") are
   taller than wide, so the 40×20 grid renders cells as tall lines.
   Swap to 20×40 so cells stay roughly square. */
@media (max-width:760px){
  .moat__map{
    grid-template-columns:repeat(20,1fr);
    grid-template-rows:repeat(40,1fr);
    padding:18px;
  }
}

.moat__sweep{
  position:absolute;inset:0;
  background:radial-gradient(50% 80% at 50% 50%, rgba(34,223,220,.12), transparent 70%);
  filter:blur(20px);
  animation:sweepMove 14s ease-in-out infinite alternate;
}
@keyframes sweepMove{
  from{transform:translate(-10%,-5%)}
  to{transform:translate(10%,5%)}
}
.moat__grain{position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay}


/* ============================================================
   PARTNER CASE STUDY
============================================================ */
.case{
  padding:160px 0;
  background:var(--bg-warm);
  background-image:
    radial-gradient(80% 60% at 100% 0%, rgba(139,201,238,.06), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(139,201,238,.05), transparent 60%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.case__head{
  display:flex;flex-direction:column;gap:18px;
  margin-bottom:64px;
  max-width:1020px;
}
.case__title{
  font-size:clamp(40px, 6vw, 84px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:500;
}
.case__title em{font-size:1.05em;color:var(--blue)}

.case__layout{
  display:grid;grid-template-columns:1fr 1.35fr;
  gap:64px;
  align-items:start;
}
@media (max-width:1020px){
  .case__layout{grid-template-columns:1fr;gap:48px}
}

.case__lede{
  font-size:18px;line-height:1.6;color:var(--ink-2);
  max-width:520px;
}

.case__stats{
  margin-top:32px;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.case__stats > div{
  padding:20px 22px;
  background:var(--bg-warm);
  display:flex;flex-direction:column;gap:6px;
}
.case__stats > div:nth-child(5){
  grid-column:span 2;
}
.case__stats dt{ color:var(--ink-3); font-size:11px }
.case__stats dd{
  font-size:30px;line-height:1;letter-spacing:-.02em;font-weight:500;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* Chart */
.case__chart{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-2);
  padding:24px 24px 30px;
  position:relative;
  overflow:hidden;
}
.case__chart::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,201,238,.5), transparent);
}
.case__chart-head{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px;
}
.case__chart-trend{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--blue);
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.case__chart-area{
  position:relative;
  padding-left:48px;
  padding-bottom:48px;
}
.case__chart-area svg{
  display:block;width:100%;height:auto;
  aspect-ratio:800/360;
}
.chart__grid line{ stroke:var(--line); stroke-dasharray:2 4 }
.chart__y, .chart__x{ list-style:none; position:absolute; color:var(--ink-3); font-size:10px }
.chart__y{
  top:0;bottom:48px;left:0;width:42px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
}
.chart__x{
  left:48px;right:0;bottom:0;
  display:flex;justify-content:space-between;
  text-align:center;
}
.chart__x li b{
  display:block;color:var(--ink);font-size:13px;font-family:var(--sans);
  font-weight:500;letter-spacing:-.01em;
  margin-top:4px;
  font-variant-numeric:tabular-nums;
}

.curve-dot{
  fill:var(--bg-2);
  stroke:url(#curveStroke);
  stroke-width:2;
  opacity:0;
}
.curve-dot.is-shown{
  opacity:1;
  animation:dotPop .5s var(--ease-out) forwards;
}
.curve-dot--last{
  fill:var(--blue);
  stroke:#0a0a0a;
}
@keyframes dotPop{
  from{transform:scale(0);transform-origin:center}
  to{transform:scale(1)}
}

.case__callout{
  margin-top:24px;
  display:flex;gap:16px;align-items:flex-start;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(139,201,238,.04);
}
.case__callout-pin{
  width:10px;height:10px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px rgba(139,201,238,.22);
  flex-shrink:0;margin-top:6px;
}
.case__callout .mono{color:var(--blue);margin-bottom:4px}
.case__callout p{font-size:14.5px;color:var(--ink-2)}
.case__callout b{color:var(--ink);font-weight:500}

/* ============================================================
   BOTTOM CTA
============================================================ */
.cta{
  position:relative;
  padding:160px 0;
  text-align:center;
  isolation:isolate;
  overflow:hidden;
  background:#06080A;
  contain:layout paint style;
}
.cta__bg{position:absolute;inset:0;z-index:-1;opacity:.55}
.cta__inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.cta__title{
  font-size:clamp(40px, 6vw, 80px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:550;
}
.cta__sub{
  max-width:720px;
  color:var(--ink-2);
  font-size:18px;
  line-height:1.55;
}
.cta__buttons{
  margin-top:18px;
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
}

/* Light variant — keeps the moat-map background graphic but flips
   the surface to cream with dark type, matching the page rhythm. */
.cta.is-light{
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(34,223,220,.16), transparent 60%),
    #F2F0EA;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.cta.is-light .cta__bg{ opacity:.22; }
.cta.is-light .moat__map span{ background:rgba(0,0,0,.04); }
.cta.is-light .moat__map span.is-on{ background:rgba(15,140,138,.35); box-shadow:0 0 5px rgba(15,140,138,.22) }
.cta.is-light .moat__map span.is-on--g{ background:rgba(60,140,200,.35); box-shadow:0 0 5px rgba(60,140,200,.22) }
.cta.is-light .moat__sweep{
  background:radial-gradient(50% 80% at 50% 50%, rgba(34,223,220,.08), transparent 70%);
}
.cta.is-light .moat__grain{
  opacity:.08;
  mix-blend-mode:multiply;
}
.cta.is-light .cta__sub{ color:#3F4146; }

/* ============================================================
   FOOTER
============================================================ */
.footer{
  background:#040506;
  border-top:1px solid var(--line);
  padding:80px 0 24px;
}
.footer__inner{
  display:grid;grid-template-columns:1.3fr 2fr;
  gap:60px;
  padding-bottom:60px;
  border-bottom:1px solid var(--line);
}
@media (max-width:900px){.footer__inner{grid-template-columns:1fr;gap:40px}}

.footer__mission{
  margin-top:18px;
  color:var(--ink-3);
  font-size:14px;line-height:1.6;
  max-width:340px;
}
.footer__chip{
  margin-top:24px;
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:var(--blue);
}

.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media (max-width:680px){.footer__cols{grid-template-columns:1fr 1fr;gap:32px}}
.footer__cols h4{ margin-bottom:18px; color:var(--ink-3) }
.footer__cols ul{ list-style:none; display:flex; flex-direction:column; gap:10px }
.footer__cols a{ color:var(--ink-2); font-size:14px; transition:color .25s ease }
.footer__cols a:hover{ color:var(--ink) }

.footer__base{
  padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  color:var(--ink-4);
}

/* ============================================================
   LIGHT SECTIONS — pattern interrupt
   Re-skin a dark section to a warm cream tone by overriding the
   ink/line/bg variables in scope. Most descendants pick this up
   automatically via var(--ink) etc. Raw rgba spots are patched
   below.
============================================================ */
.is-light{
  --ink:#0E0F12;
  --ink-2:#3F4146;
  --ink-3:#7B7D78;
  --ink-4:#A4A6A1;
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.16);
  --bg:#F2F0EA;
  --bg-1:#F2F0EA;
  --bg-2:#FFFFFF;
  --bg-3:#F8F7F1;
  --bg-warm:#F6F4ED;
  color:var(--ink);
}
.is-light em{ color:var(--blue); }

/* Scale section, light variant */
.scale.is-light{
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(139,201,238,.18), transparent 60%),
    #F2F0EA;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.scale.is-light .scale__cell:hover{ background:rgba(0,0,0,.025); }
.scale.is-light .scale__num{
  background:linear-gradient(180deg, #0E0F12 25%, rgba(14,15,18,.5));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.scale.is-light .scale__cell::before{
  background:linear-gradient(90deg, transparent, rgba(34,223,220,.55), transparent);
}

/* Case study section, light variant */
.case.is-light{
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(34,223,220,.10), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(139,201,238,.12), transparent 60%),
    #F6F4ED;
}
.case.is-light .case__title em{ color:var(--blue); }
.case.is-light .case__chart{
  background:#FFFFFF;
  box-shadow:0 30px 80px -40px rgba(20,24,30,.18);
}
.case.is-light .case__chart::before{
  background:linear-gradient(90deg, transparent, rgba(139,201,238,.6), transparent);
}
.case.is-light .case__stats > div{ background:#FFFFFF; }
.case.is-light .curve-dot{ fill:#FFFFFF; }
.case.is-light .curve-dot--last{ fill:var(--blue); stroke:#FFFFFF; }
.case.is-light .case__callout{
  background:rgba(139,201,238,.10);
  border-color:rgba(20,24,30,.10);
}
.case.is-light .chart__grid line{ stroke:rgba(0,0,0,.08); }

/* Utility: keep a phrase from breaking mid-line in a heading */
.section-head__title em.nowrap{ white-space:nowrap; }

/* ============================================================
   HEADLINE LINE-CONTROL (case study + CTA)
   Each phrase is a span that flows inline by default and stacks
   to its own line on mobile.
============================================================ */
.case__title-line,
.cta__title-line{ display:inline; }
.case__title em.case__title-line,
.cta__title em.cta__title-line{ display:block; }
@media (max-width:600px){
  .case__title > .case__title-line,
  .cta__title  > .cta__title-line{ display:block; }
  /* The <br/> between case-title spans is for desktop only — at
     mobile the spans become block themselves, so the br would
     create a phantom empty line of extra space. */
  .case__title > br{ display:none; }
}

/* ============================================================
   MOBILE-ONLY ADJUSTMENTS
============================================================ */

/* Nav: keep the Apply Now compact on small phones so it clusters
   with the burger on the right rather than crowding the logo. */
@media (max-width:520px){
  .nav .btn--sm{ padding:7px 12px; font-size:12px; gap:7px; }
  .nav .btn--sm .btn__icon{ width:11px;height:11px; }
}

/* As Seen In — eyebrow on its own line, logos as an infinite
   marquee underneath. The track is duplicated so translateX(-50%)
   loops seamlessly. */
@media (max-width:720px){
  .media{ padding:24px 0; overflow:hidden; }
  .media .container{ padding:0; }
  /* Rail as block (not flex) — flex was using the track's max-content
     cross-size to position items, pushing the eyebrow far off-screen. */
  .media__rail{
    display:block;
    overflow:hidden;
    width:100%;
  }
  .media__eyebrow{
    display:block;
    border-right:0;
    padding:0;
    margin:0 0 18px;
    text-align:center;
  }
  .media__track{
    display:flex;
    flex-wrap:nowrap;
    width:max-content;
    gap:36px;
    animation:mediaMarquee 28s linear infinite;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    will-change:transform;
  }
  .media__track .logo{ flex-shrink:0; }
}
@keyframes mediaMarquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* Audience: keep the Learn More button auto-sized rather than
   stretching across the column. */
@media (max-width:900px){
  .audience__cta{ justify-self:start; align-self:start; }
}

/* Pillars: turn the 3×2 grid into a swipeable horizontal carousel
   with a peek of the next card. JS appends 2 clones at the end +
   handles the loop reset. */
.pillar__copy-short{ display:none; }
@media (max-width:600px){
  .pillars{ overflow:hidden; }
  .pillars__grid{
    display:flex;
    grid-template-columns:none;
    gap:16px;
    padding:0 20px 4px;
    margin-left:-20px;
    margin-right:-20px;
    background:none;
    border:0;
    border-radius:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    align-items:flex-start; /* let cards size to content; don't stretch */
  }
  .pillars__grid::-webkit-scrollbar{ display:none; }
  .pillar{
    flex:0 0 80%;
    scroll-snap-align:start;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--bg-2);
  }
  .pillar:hover{ background:var(--bg-2); } /* no hover-state on touch */
  /* Swap pillar 5 & 6 to shorter copy on mobile so the carousel
     cards have similar heights. */
  .pillar__copy-full{ display:none; }
  .pillar__copy-short{ display:inline; }
}
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) }
[data-reveal].is-in{ opacity:1; transform:translateY(0) }
[data-reveal="instant"]{opacity:1;transform:none;transition:none}

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

/* ============================================================
   WHY REALEFLOW PAGE
============================================================ */

/* ---- HERO ---- */
.why-hero{
  position:relative;
  padding:140px 0 100px;
  overflow:hidden;
  isolation:isolate;
  contain:layout paint;
}
.why-hero__bg{ position:absolute;inset:0;z-index:-1; }
.why-hero__photo{
  position:absolute;inset:-5%;
  background-size:cover;background-position:center;
  filter:brightness(.4) saturate(.85) contrast(1.05);
  opacity:.4;
}
.why-hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(8,9,11,.85) 0%, rgba(8,9,11,.45) 45%, transparent 75%),
    linear-gradient(180deg, rgba(8,9,11,.4) 0%, rgba(8,9,11,.25) 30%, rgba(8,9,11,.85) 100%);
}
.why-hero__aurora{
  position:absolute;
  width:1100px;height:600px;
  left:55%;top:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(34,223,220,.16), transparent 70%),
    radial-gradient(closest-side at 70% 40%, rgba(139,201,238,.18), transparent 70%);
  filter:blur(80px);
  opacity:.85;
  pointer-events:none;
}
.why-hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  opacity:.4;
}
.why-hero__grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none}

.why-hero__inner{
  display:flex;
  flex-direction:column;
  gap:72px;
  position:relative;
  z-index:1;
}

/* Top row: kicker+headline left, sub+buttons right */
.why-hero__top{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:64px;
  align-items:end;
}
@media (max-width:1020px){
  .why-hero__top{ grid-template-columns:1fr; gap:36px; align-items:start; }
}

.why-hero__copy{ display:flex; flex-direction:column; }
.why-hero__copy > *{ opacity:0; transform:translateY(14px); animation:rise .9s var(--ease-out) forwards; }
.why-hero__copy .section-head__kicker{ animation-delay:.05s; }
.why-hero__title{
  margin-top:18px;
  font-size:clamp(40px, 4.6vw, 76px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:550;
  animation-delay:.18s;
}
.why-hero__title em{ font-size:.94em; letter-spacing:-.025em; }

.why-hero__actions{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-bottom:6px;
}
.why-hero__actions > *{ opacity:0; transform:translateY(14px); animation:rise .9s var(--ease-out) forwards; }
.why-hero__sub{
  max-width:520px;
  font-size:clamp(16px, 1.2vw, 19px);
  color:var(--ink-2);
  line-height:1.55;
  animation-delay:.34s;
}
.why-hero__actions .hero__ctas{
  display:flex;flex-wrap:wrap;gap:14px;
  animation-delay:.5s;
}

/* Bottom row: 3 photos + bigger white-label card, full-width */
.why-hero__row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
@media (max-width:1020px){
  .why-hero__row{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
}
/* Mobile: compose into a 2-col mini-grid — one tall photo on the
   left, two landscape photos stacked on the right, white-label card
   spans full-width underneath. Keeps the vertical footprint tight.
   Selectors are scoped via .why-hero__row to outrank the base
   .why-photo aspect-ratio that follows later in the file. */
@media (max-width:600px){
  .why-hero__row{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    gap:10px;
  }
  .why-hero__row .why-photo--a{
    grid-column:1;
    grid-row:1 / span 2;
    aspect-ratio:auto;
    height:100%;
  }
  .why-hero__row .why-photo--b{
    grid-column:2;
    grid-row:1;
    aspect-ratio:16 / 11;
  }
  .why-hero__row .why-photo--c{
    grid-column:2;
    grid-row:2;
    aspect-ratio:16 / 11;
  }
  /* These two photos are portrait originals being letterbox-cropped
     to landscape on mobile. Pull the focal point up so the
     subjects' faces stay visible instead of being cut off. */
  .why-hero__row .why-photo--b img,
  .why-hero__row .why-photo--c img{
    object-position:center 25%;
  }
  .why-hero__row .why-card{
    grid-column:1 / -1;
    grid-row:3;
  }
}

.why-photo{
  position:relative;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#0a0c12;
  aspect-ratio:4 / 5;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 30px 70px -20px rgba(0,0,0,.7),
    0 0 80px rgba(34,223,220,.12);
  opacity:0;
  transform:translateY(28px) scale(.97);
  animation:photoRise 1s var(--ease-out) forwards;
}
.why-photo img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.why-photo--a{ animation-delay:.45s; }
.why-photo--b{ animation-delay:.6s; transform:translateY(40px) scale(.97); }
.why-photo--c{ animation-delay:.75s; }

/* Big white-label card — last cell of the row, taller chrome */
.why-card{
  position:relative;
  display:flex;flex-direction:column;
  gap:14px;
  padding:22px 22px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(34,223,220,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box;
  background-color:rgba(14,18,24,.55);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 30px 60px -16px rgba(0,0,0,.7),
    0 0 70px -8px rgba(34,223,220,.22);
  opacity:0;
  transform:translateY(28px) scale(.96);
  animation:cardRise 1s var(--ease-out) .9s forwards;
}
.why-card__icon{
  margin-top:auto;
  width:54px;height:54px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  display:flex;align-items:center;justify-content:center;
  color:#06231C;
  box-shadow:0 8px 20px -4px rgba(34,223,220,.5);
}
.why-card__text{
  display:flex;flex-direction:column;gap:4px;
}
.why-card__text strong{
  font-size:18px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.15;
}
.why-card__text span{
  font-size:13px;color:var(--ink-3);
}

@keyframes photoRise{
  0%   { opacity:0; transform:translateY(28px) scale(.97); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cardRise{
  0%   { opacity:0; transform:translateY(28px) scale(.96); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion:reduce){
  .why-photo, .why-card{ animation:none; opacity:1; transform:none; }
}

@media (max-width:560px){
  .why-card{ padding:18px; }
  .why-card__icon{ width:46px;height:46px; }
  .why-card__text strong{ font-size:16px; }
}

/* ---- WHY-SECTION shared ---- */
.why-section{
  padding:140px 0;
  background:var(--bg);
  border-top:1px solid var(--line);
  position:relative;
  isolation:isolate;
}
.why-section__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:center;
}
@media (max-width:1020px){
  .why-section__layout{ grid-template-columns:1fr; gap:48px; }
}
.why-section__story{
  display:flex;flex-direction:column;
}
.why-section__story .section-head__kicker{ margin-bottom:18px; }
.why-section__title{
  font-size:clamp(34px, 3.6vw, 56px);
  line-height:1.06;letter-spacing:-.025em;font-weight:550;
}
.why-section__line{
  margin-top:14px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(18px, 1.4vw, 22px);
  color:var(--blue);
  letter-spacing:-.015em;
}
.why-section__copy{
  margin-top:24px;
  max-width:540px;
  font-size:clamp(16px, 1.05vw, 18px);
  line-height:1.65;
  color:var(--ink-2);
}
.why-section__strip{
  margin-top:36px;
  display:grid;grid-template-columns:repeat(3,auto);
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(13,16,20,.5);
  width:fit-content;
}
.why-section__strip > div{
  padding:14px 20px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  border-right:1px solid var(--line);
}
.why-section__strip > div:last-child{border-right:0}
.why-section__strip b{font-weight:500;color:var(--ink);font-size:14px}
@media (max-width:760px){
  .why-section__strip{grid-template-columns:1fr;width:100%}
  .why-section__strip > div{border-right:0;border-bottom:1px solid var(--line)}
  .why-section__strip > div:last-child{border-bottom:0}
}

/* ---- BRAND CREDIBILITY · "Meet your Team" composition ----
   A photo of someone working + a glassmorphic overlay card with a
   continuously-scrolling marquee of team avatars + a "+20" chip. */
.why-credibility{ background:var(--bg); }

.why-team{
  position:relative;
  width:100%;
  max-width:600px;
  margin-left:auto;
  aspect-ratio:5 / 4.4;
}
@media (max-width:1020px){ .why-team{ margin:0 auto; } }

/* Soft blue glow halo behind the photo */
.why-team::before{
  content:"";
  position:absolute;
  inset:-12% -8% -10% -12%;
  background:
    radial-gradient(40% 40% at 18% 50%, rgba(139,201,238,.30), transparent 70%),
    radial-gradient(45% 35% at 80% 28%, rgba(34,223,220,.22), transparent 70%);
  filter:blur(20px);
  z-index:0;
  pointer-events:none;
}

.why-team__photo{
  position:absolute;
  inset:0;
  margin:0;
  border-radius:22px;
  overflow:hidden;
  z-index:1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 40px 80px -25px rgba(0,0,0,.7);
}
.why-team__photo img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}

/* Glassmorphic card overlaying the photo. Shifted to overhang past
   the photo's left edge for a more dynamic offset composition. */
.why-team__card{
  position:absolute;
  z-index:2;
  left:-6%;
  bottom:9%;
  width:50%;
  display:flex;flex-direction:column;gap:14px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) padding-box;
  background-color:rgba(14,18,24,.45);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 30px 60px -15px rgba(0,0,0,.55);
}
.why-team__title{
  font-size:17px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* Row containing the marquee + the +20 puck side-by-side. The
   marquee is bounded on the right by the +20 — avatars exit left,
   never travel under the +20. */
.why-team__row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Avatar marquee — JS-driven recycling, no DOM clones. */
.why-team__marquee{
  flex:1;
  position:relative;
  height:48px;          /* slightly taller than avatar to allow border */
  overflow:hidden;
  /* feather both sides so avatars fade in on entry and out on exit */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.why-team__track{
  position:relative;
  height:100%;
}

.why-avatar{
  position:absolute;
  top:50%;
  width:42px;height:42px;
  border-radius:50%;
  overflow:hidden;
  background:#0a0c12;
  display:block;
  will-change:transform;
}
.why-avatar img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  filter:saturate(1.05);
}

/* The "+20" puck — sits in normal flow, anchors the right of the row */
.why-team__more{
  flex-shrink:0;
  width:42px;height:42px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--ink-2);
  border:1.5px solid rgba(255,255,255,.20);
  background:rgba(14,18,24,.6);
}

@media (prefers-reduced-motion:reduce){
  .why-team__photo, .why-team__card{ animation:none; opacity:1; transform:none; }
}

@media (max-width:560px){
  .why-team{ aspect-ratio:5 / 4.6; }
  .why-team__card{ left:0; right:auto; bottom:7%; width:88%; padding:16px 18px; }
  .why-team__title{ font-size:15px; }
  .why-avatar{ width:38px;height:38px; }
  .why-team__more{ width:38px;height:38px; font-size:11px; }
}

/* ---- RECURRING REVENUE — centered stack + live dashboard mockup ---- */
.why-revenue{
  background:#F6F4ED;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* Light-section title/copy override (keeps the section type
   readable on the warm cream background) */
.why-revenue .why-section__title{ color:#0E0F12; }
.why-revenue .why-section__copy{ color:#3F4146; }

/* Stage holds the dashboard panel + the two floating cards */
.why-revenue__stage{
  position:relative;
  width:100%;
  aspect-ratio:1.25 / 1;
}

/* The blue gradient panel sitting behind the cards */
.why-revenue__panel{
  position:absolute;
  inset:5% 4% 0 12%;
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 100% 50%, rgba(34,223,220,.20), transparent 65%),
    linear-gradient(112deg, #DCE2E8 0%, #B5D2EB 50%, #82BCE5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 30px 60px -25px rgba(20,30,40,.25);
}
.why-revenue__arcs{
  position:absolute;
  right:0;top:0;
  width:75%;height:100%;
}

/* Generic card chrome */
.rev-card{
  position:absolute;
  background:#FFFFFF;
  border-radius:16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 24px 48px -16px rgba(20,30,40,.25);
}

/* Sign-ups card — top-right of the panel */
.rev-card--signups{
  top:8%;
  right:6%;
  display:flex;align-items:center;gap:14px;
  padding:14px 22px 14px 14px;
  z-index:2;
}
.rev-card__user-icon{
  width:48px;height:48px;
  border-radius:50%;
  border:2px solid #B7D2E5;
  background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  color:#3D6A8F;
  flex-shrink:0;
}
.rev-card__user-icon svg{ width:24px;height:24px; }

/* Revenue card — overlaps bottom-left, bigger */
.rev-card--revenue{
  bottom:5%;
  left:0;
  width:54%;
  padding:24px 26px 22px;
  display:flex;flex-direction:column;gap:14px;
  z-index:3;
}
.rev-card__head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;
}
.rev-card__primary{ min-width:0; }
.rev-card__num{
  display:block;
  font-size:30px;letter-spacing:-.02em;font-weight:700;
  color:#0E0F12;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  transition:color .35s ease;
}
.rev-card__num--big{ font-size:clamp(32px, 2.6vw, 40px); }
.rev-card__label{
  display:block;
  margin-top:4px;
  font-size:13px;color:#5C5E5A;
  font-weight:500;
}
.rev-card__avatar{
  width:50px;height:50px;
  border-radius:50%;
  overflow:hidden;
  background:#E5EAF0;
  flex-shrink:0;
  border:2px solid #FFFFFF;
  box-shadow:0 4px 10px -2px rgba(20,30,40,.2);
}
.rev-card__avatar img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.rev-card__lines{
  display:flex;flex-direction:column;gap:8px;
  margin-top:4px;
}
.rev-line{
  height:9px;border-radius:999px;
  background:#E5EAF0;
}
.rev-line--xs{ width:18%; }
.rev-line--md{ width:75%; }
.rev-card__btns{
  display:flex;gap:10px;
  margin-top:6px;
}
.rev-btn{
  flex:1;height:36px;border-radius:9px;
}
.rev-btn--primary{ background:#7EB6E0; }
.rev-btn--outline{ background:#FFFFFF; border:1.5px solid #B7D2E5; }

/* Number bump animation on tick */
@keyframes numBump{
  0%   { transform:translateY(0); color:#0E0F12; }
  35%  { transform:translateY(-3px); color:#1E78C2; }
  100% { transform:translateY(0); color:#0E0F12; }
}
.rev-card__num.is-bumping{
  animation:numBump .65s var(--ease-out);
}

@media (max-width:760px){
  .why-revenue__stage{ max-width:520px; margin:0 auto; aspect-ratio:1.05 / 1; }
  .why-revenue__panel{ inset:8% 0 4% 8%; }
  .rev-card--signups{ top:4%; right:0; padding:10px 16px 10px 10px; gap:10px; }
  .rev-card__user-icon{ width:38px;height:38px; }
  .rev-card__user-icon svg{ width:18px;height:18px; }
  .rev-card--revenue{ width:78%; padding:18px 20px 16px; }
  .rev-card__num--big{ font-size:28px; }
  .rev-card__avatar{ width:42px;height:42px; }
  .rev-btn{ height:30px; }
}

/* ---- RETENTION heatmap ---- */
.why-retention{
  background:var(--bg);
}
.why-section__layout--ret{ align-items:start; gap:80px; }

.ret-heatmap{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-2);
  padding:22px 22px 18px;
  position:relative;
}
.ret-heatmap__head{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.ret-heatmap__legend{
  display:inline-flex;align-items:center;gap:8px;
  font-size:9px;color:var(--ink-3);
}
.ret-heatmap__scale{
  display:inline-flex;gap:3px;
}
.ret-heatmap__scale i{
  width:11px;height:11px;border-radius:2px;
  background:var(--c);
}
.ret-heatmap__grid{
  display:grid;
  grid-template-columns:repeat(52, 1fr);
  grid-template-rows:repeat(7, 1fr);
  grid-auto-flow:column;
  gap:3px;
  height:200px;
}
.ret-heatmap__cell{
  border-radius:2px;
  background:rgba(255,255,255,.04);
  transition:background .4s ease, box-shadow .4s ease;
}
.ret-heatmap__cell.lvl-1{ background:rgba(34,223,220,.18); }
.ret-heatmap__cell.lvl-2{ background:rgba(34,223,220,.4); }
.ret-heatmap__cell.lvl-3{ background:rgba(34,223,220,.65); box-shadow:0 0 4px rgba(34,223,220,.3); }
.ret-heatmap__cell.lvl-4{ background:rgba(139,201,238,.85); box-shadow:0 0 6px rgba(139,201,238,.5); }
.ret-heatmap__months{
  list-style:none;
  display:flex;justify-content:space-between;
  margin-top:14px;
  font-size:9px;color:var(--ink-3);
}

@media (max-width:760px){
  /* Keep all 52 weeks visible on mobile — narrower cells with a
     tighter gap so the full year fits the container width. The
     previous repeat(26,1fr) was clipping Nov–Dec into implicit
     overflow columns hidden by the section's overflow:hidden. */
  .ret-heatmap__grid{ grid-template-columns:repeat(52,1fr); gap:2px; height:150px; }
  .ret-heatmap__months{ font-size:8px; }
  .ret-heatmap__months li:nth-child(odd){ display:none; }
}

/* ---- THIS IS NOT A TEMPLATE ---- */
.why-template{
  position:relative;
  padding:160px 0;
  background:#06080A;
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid var(--line);
}
.why-template__bg{ position:absolute;inset:0;z-index:-1;opacity:.45; }
.why-template__map{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(40,1fr);
  grid-template-rows:repeat(20,1fr);
  gap:3px;
  padding:24px;
  mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 75%);
}
/* Mobile: the section gets much taller than wide, so the 40×20
   grid renders as tall vertical lines. Swap dimensions so cells
   stay roughly square (same 800-cell total). */
@media (max-width:760px){
  .why-template__map{
    grid-template-columns:repeat(20,1fr);
    grid-template-rows:repeat(40,1fr);
    padding:18px;
  }
}
.why-template__map span{ background:rgba(255,255,255,.04); border-radius:1px; }
.why-template__map span.is-on{ background:rgba(34,223,220,.55); box-shadow:0 0 6px rgba(34,223,220,.45); }
.why-template__map span.is-on--g{ background:rgba(139,201,238,.55); box-shadow:0 0 6px rgba(139,201,238,.45); }
.why-template__sweep{
  position:absolute;inset:0;
  background:radial-gradient(50% 80% at 50% 50%, rgba(139,201,238,.10), transparent 70%);
  filter:blur(20px);
  animation:sweepMove 14s ease-in-out infinite alternate;
}
.why-template__grain{ position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay; }

.why-template__inner{ position:relative; z-index:1; }
.why-template__head{
  max-width:920px;
  margin-bottom:64px;
  display:flex;flex-direction:column;gap:18px;
}
.why-template__title{
  font-size:clamp(36px, 4.4vw, 64px);
  line-height:1.04;letter-spacing:-.03em;font-weight:550;
}
.why-template__copy{
  font-size:clamp(16px, 1.1vw, 19px);
  line-height:1.6;
  color:var(--ink-2);
  max-width:780px;
}
.why-template__copy em{ color:var(--blue); font-size:1em; }

.why-template__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:980px){ .why-template__grid{ grid-template-columns:1fr; } }

.why-template__foot{
  margin-top:42px;
  text-align:center;
  color:var(--ink-3);
  letter-spacing:.04em;
}

/* Per-config skin tokens */
.config{
  --conf-accent:#22DFDC;
  --conf-mark:#22DFDC;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  background-color:rgba(13,16,20,.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  display:flex;flex-direction:column;
  isolation:isolate;
  transition:transform .5s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.config:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.6), 0 0 0 1px var(--conf-accent), 0 0 40px -8px var(--conf-accent);
}
.config[data-skin="apex"]{ --conf-accent:#F19B3F; --conf-mark:#F0B96A; }
.config[data-skin="metro"]{ --conf-accent:#A78BFA; --conf-mark:#C4B5FD; }
.config[data-skin="bridge"]{ --conf-accent:#34D399; --conf-mark:#6EE7B7; }

.config__head{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--ink);
}
.config__mark{
  display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;
  color:var(--conf-mark);
  font-size:14px;
}
.config__type{
  margin-left:auto;
  color:var(--ink-3);
  font-weight:500;
  font-size:9px;
  letter-spacing:.1em;
}
.config__body{
  padding:18px;
  display:flex;flex-direction:column;gap:18px;
  flex:1;
}

.config__layout{
  position:relative;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  padding:14px;
  min-height:200px;
}

/* Listings layout (Apex) */
.config__layout--list{ padding:8px; }
.config__row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:13px;
  color:var(--ink);
}
.config__row:last-child{ border-bottom:0; }
.config__row--head{
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.1em;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.config__pill{
  font-family:var(--mono);
  font-size:11px;font-weight:600;
  padding:2px 8px;
  border-radius:999px;
  background:var(--conf-accent);
  color:#0B0D11;
  box-shadow:0 0 8px -2px var(--conf-accent);
}

/* Map layout (Metro) */
.config__layout--map{
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.config__layout--map::before{
  content:"";
  position:absolute;
  inset:-4%;
  background:url('assets/images/map_2_tile.svg') center/cover no-repeat;
  /* The source SVG renders as dark gray streets on white. Invert so
     it becomes near-white on transparent, then dim with opacity to
     match the muted card aesthetic. */
  filter:invert(1) brightness(1.4) contrast(1.1) opacity(.35);
  pointer-events:none;
  z-index:0;
}
.config__map-pin{
  position:absolute;
  z-index:1;
  font-size:10px;font-weight:600;
  color:#0B0D11;
  background:var(--conf-accent);
  padding:3px 8px;border-radius:999px;
  box-shadow:0 6px 18px -4px var(--conf-accent);
}

/* Course layout (Bridge) — square creator portrait + lesson stack */
.config__layout--course{
  display:grid;
  grid-template-columns:50% minmax(0,1fr);
  align-items:start;
  gap:12px;
  padding:12px;
}
.config__face{
  margin:0;
  aspect-ratio:1 / 1;
  border-radius:8px;
  overflow:hidden;
  background:#0a0c12;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(52,211,153,.12), 0 12px 24px -10px rgba(0,0,0,.5);
}
.config__face img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.config__lessons{
  display:flex;flex-direction:column;
  gap:6px;
  min-width:0;
}
.config__lesson{
  display:flex;align-items:center;gap:10px;
  padding:7px 11px;
  border-radius:7px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-size:11.5px;color:var(--ink-2);
  line-height:1.25;
}
.config__lesson.is-active{
  background:rgba(52,211,153,.10);
  border-color:rgba(52,211,153,.4);
  color:var(--ink);
}
.config__step{
  font-family:var(--mono);
  font-size:9px;
  color:var(--ink-3);
  letter-spacing:.1em;
}
.config__lesson.is-active .config__step{ color:var(--conf-accent); }
.config__lesson > .mono{
  margin-left:auto;
  font-size:9px;color:var(--ink-3);
}
.config__lesson.is-active > .mono{
  color:var(--conf-accent);
}

.config__tools{
  display:flex;flex-direction:column;gap:8px;
}
.config__tools .mono{ color:var(--ink-3); font-size:9px; }
.config__chips{
  display:flex;flex-wrap:wrap;gap:6px;
}
.config__chips span{
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--ink-2);
}

/* ---- WHY page mobile tweaks ---- */
@media (max-width:1020px){
  .why-section{ padding:100px 0; }
  .why-template{ padding:120px 0; }
  .why-template__head{ margin-bottom:48px; }
}

/* ============================================================
   PARTNERSHIP PAGE
   - Hero is center-aligned with a six-tile "ops grid" doubling as
     a TOC for the page.
   - Six pillar sections alternate light/dark and use distinct
     visual mockups (support queue, marketing collage, training
     agenda, chat thread, changelog, roadmap board) so the page
     never settles into a 2-col image-left/copy-right rhythm.
============================================================ */

/* ---- HERO ---- */
.partner-hero{
  position:relative;
  padding:140px 0 100px;
  overflow:hidden;
  isolation:isolate;
}
.partner-hero__bg{ position:absolute;inset:0;z-index:-1; }
.partner-hero__photo{
  position:absolute;inset:-4%;
  background-image:url('assets/images/partner_hero.webp');
  background-size:cover;
  background-position:center;
  filter:brightness(.55) saturate(.9) contrast(1.05);
  opacity:.55;
  animation:partnerHeroDrift 36s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes partnerHeroDrift{
  0%  { transform:scale(1.02) translate3d(0,0,0); }
  100%{ transform:scale(1.06) translate3d(-1%, .5%, 0); }
}
.partner-hero__veil{
  position:absolute;inset:0;
  background:
    /* central spotlight to keep text readable */
    radial-gradient(60% 70% at 50% 35%, rgba(8,9,11,.25) 0%, rgba(8,9,11,.6) 70%, rgba(8,9,11,.9) 100%),
    /* bottom gutter into next section */
    linear-gradient(180deg, transparent 50%, rgba(8,9,11,.7) 85%, rgba(8,9,11,.95) 100%);
}
@media (prefers-reduced-motion:reduce){
  .partner-hero__photo{ animation:none; }
}
.partner-hero__aurora{
  position:absolute;
  width:1300px;height:700px;
  left:50%;top:30%;
  transform:translate(-50%,-30%);
  background:
    radial-gradient(closest-side, rgba(34,223,220,.16), transparent 70%),
    radial-gradient(closest-side at 70% 40%, rgba(139,201,238,.16), transparent 70%);
  filter:blur(90px);
  opacity:.85;
  pointer-events:none;
}
.partner-hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  opacity:.4;
}
.partner-hero__grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none}

.partner-hero__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  align-items:center;
  gap:64px;
  text-align:center;
}
.partner-hero__copy{ max-width:880px; }
.partner-hero__copy > *{ opacity:0; transform:translateY(14px); animation:rise .9s var(--ease-out) forwards; }
.partner-hero__copy .section-head__kicker{ animation-delay:.05s; }
.partner-hero__title{
  margin-top:18px;
  font-size:clamp(40px, 5.4vw, 84px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:550;
  animation-delay:.18s;
}
.partner-hero__title em{ font-size:.95em; letter-spacing:-.025em; }
.partner-hero__sub{
  margin:24px auto 0;
  max-width:640px;
  font-size:clamp(16px, 1.2vw, 19px);
  color:var(--ink-2);
  line-height:1.55;
  animation-delay:.34s;
}
.partner-hero__copy .hero__ctas{
  margin-top:32px;
  justify-content:center;
  display:flex;flex-wrap:wrap;gap:14px;
  animation-delay:.5s;
}

/* ---- OPS GRID — 6-tile command-center / TOC ---- */
.ops-grid{
  list-style:none;
  margin:0;padding:0;
  width:100%;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px;
  opacity:0;
  transform:translateY(20px);
  animation:rise 1s var(--ease-out) .7s forwards;
}
@media (max-width:1020px){
  .ops-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:520px){
  .ops-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.ops-tile{
  display:flex;flex-direction:column;
  gap:10px;
  padding:18px 16px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) padding-box;
  background-color:rgba(13,16,20,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  text-align:left;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .35s ease, transform .5s var(--ease-out), box-shadow .35s ease;
  height:100%;
}
.ops-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(34,223,220,.45);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.7), 0 0 0 1px rgba(34,223,220,.25), 0 0 30px -8px rgba(34,223,220,.4);
}
.ops-tile__num{
  font-size:10px;color:var(--ink-3);letter-spacing:.14em;
}
.ops-tile__icon{
  display:inline-flex;width:36px;height:36px;
  border-radius:9px;
  background:linear-gradient(135deg, rgba(34,223,220,.18), rgba(139,201,238,.12));
  align-items:center;justify-content:center;
  color:var(--teal);
}
.ops-tile__label{
  font-weight:600;
  font-size:14px;
  letter-spacing:-.005em;
  line-height:1.25;
  color:var(--ink);
}
.ops-tile__meta{
  font-size:9.5px;color:var(--ink-3);letter-spacing:.14em;
  margin-top:auto;
}

/* ---- SHARED PARTNER BLOCK ---- */
.partner-block{
  padding:140px 0;
  background:var(--bg);
  border-top:1px solid var(--line);
  position:relative;
  isolation:isolate;
}
.partner-block.is-light{
  background:#F2F0EA;
  border-top:1px solid rgba(0,0,0,.06);
}
.partner-block__inner{
  display:flex;flex-direction:column;gap:56px;
}
.partner-block__inner--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:center;
}
.partner-block__inner--reverse > *:first-child{ order:2; }
@media (max-width:1020px){
  .partner-block__inner--split{ grid-template-columns:1fr; gap:48px; }
  .partner-block__inner--reverse > *:first-child{ order:0; }
  .partner-block{ padding:100px 0; }
}
.partner-block__story{ display:flex;flex-direction:column;gap:0; }
.partner-block__head{
  max-width:780px;
  margin:0 auto;
  text-align:center;
  display:flex;flex-direction:column;gap:0;
}
.partner-block__head--start{
  margin:0;
  text-align:left;
  align-items:flex-start;
}
.partner-block__head .section-head__kicker,
.partner-block__story .section-head__kicker{ margin-bottom:18px; }
.partner-block__title{
  font-size:clamp(34px, 3.6vw, 56px);
  line-height:1.06;letter-spacing:-.025em;font-weight:550;
}
.partner-block__copy{
  margin-top:22px;
  font-size:clamp(16px, 1.05vw, 18px);
  line-height:1.65;
  color:var(--ink-2);
  max-width:560px;
}
.partner-block__head .partner-block__copy{ margin-left:auto; margin-right:auto; }
.partner-block__list{
  margin:32px 0 0;
  padding:0;
  list-style:none;
  display:flex;flex-direction:column;gap:10px;
}
.partner-block__list li{
  position:relative;
  padding-left:24px;
  font-size:15px;color:var(--ink);
  line-height:1.5;
}
.partner-block__list li::before{
  content:"";
  position:absolute;left:2px;top:.6em;
  width:8px;height:8px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  transform:rotate(45deg);
  border-radius:1.5px;
  box-shadow:0 0 8px -2px rgba(34,223,220,.55);
}
.partner-block__list--row{
  flex-direction:row;flex-wrap:wrap;
  gap:18px 36px;
  margin-top:36px;
  justify-content:center;
}
.partner-block__list--row li{ flex:1 1 240px; max-width:340px; }

/* ---- PILLAR 1 · SUPPORT QUEUE ---- */
.support-queue{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--bg-2);
  padding:18px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
}
.support-queue__head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.support-queue__pulse{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--teal);
}
.support-queue__pulse i{
  width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.support-queue__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.support-queue__row{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
}
.support-queue__row.is-active{
  background:rgba(34,223,220,.08);
  border-color:rgba(34,223,220,.3);
}
.support-queue__avatar{
  width:32px;height:32px;border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.support-queue__avatar img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.support-queue__body{ display:flex;flex-direction:column;gap:1px;flex:1;min-width:0; }
.support-queue__body strong{ font-size:13.5px;color:var(--ink);font-weight:600;letter-spacing:-.005em; }
.support-queue__body span{ font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.support-queue__pill{
  font-size:9.5px;letter-spacing:.12em;
  padding:4px 9px;border-radius:999px;
  border:1px solid var(--line);
  color:var(--ink-3);
  flex-shrink:0;
}
.support-queue__pill--ok{
  color:#22EDB6;border-color:rgba(34,237,182,.35);
  background:rgba(34,237,182,.08);
}
.support-queue__pill--live{
  color:var(--teal);border-color:rgba(34,223,220,.35);
  background:rgba(34,223,220,.08);
}
.support-queue__foot{
  display:flex;justify-content:flex-end;
  font-size:10px;letter-spacing:.12em;color:var(--ink-3);
  padding-top:6px;border-top:1px solid var(--line);
}
.support-queue__foot em{ color:var(--ink-2);font-style:normal;font-weight:500; }

/* PMG headline + copy gets a wider read so it's not stuck at 560px */
.partner-block--pmg .partner-block__head{ max-width:920px; }
.partner-block--pmg .partner-block__copy{ max-width:760px; }

/* AM section: slightly wider copy below the headline */
.partner-block--am .partner-block__head{ max-width:880px; }
.partner-block--am .partner-block__copy{ max-width:720px; }

/* ---- PILLAR 2 · PMG COLLAGE ---- */
.pmg-collage{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:18px;
}
@media (max-width:900px){
  .pmg-collage{ grid-template-columns:1fr 1fr; grid-template-rows:auto; }
}
@media (max-width:560px){
  .pmg-collage{ grid-template-columns:1fr; }
}
.pmg-asset{
  position:relative;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:14px;
  box-shadow:0 30px 50px -25px rgba(20,30,40,.18);
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
  min-height:0;
}
.pmg-asset__tag{
  position:absolute;
  top:12px;right:12px;
  font-size:9px;letter-spacing:.14em;
  padding:3px 8px;border-radius:999px;
  background:rgba(34,223,220,.14);
  color:#0E0F12;
  border:1px solid rgba(34,223,220,.4);
}
/* Landing page mock - spans 2 rows */
.pmg-asset--landing{
  grid-row:span 2;
  background:linear-gradient(180deg, #FFFFFF 0%, #F8F7F1 100%);
}
.pmg-asset__head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.05);
}
.pmg-asset__dots{
  display:inline-flex;gap:5px;align-items:center;
  flex:0 0 auto;
}
.pmg-asset__dot{ width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.12); }
.pmg-asset__dots .pmg-asset__dot:nth-child(1){ background:#FF7B72; }
.pmg-asset__dots .pmg-asset__dot:nth-child(2){ background:#F1B935; }
.pmg-asset__dots .pmg-asset__dot:nth-child(3){ background:#34D399; }
.pmg-asset__url{
  flex:0 0 auto;
  font-size:10px;color:#7B7D78;
  background:rgba(0,0,0,.04);
  border-radius:6px;
  padding:5px 12px;
  white-space:nowrap;
  text-align:left;
  letter-spacing:.06em;
}
.pmg-asset__hero{
  height:90px;border-radius:8px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(34,223,220,.4), transparent 60%),
    linear-gradient(120deg, #DCE2E8 0%, #B5D2EB 50%, #82BCE5 100%);
}
.pmg-asset__lines{ display:flex;flex-direction:column;gap:6px; }
.pmg-asset__lines i{ height:8px;border-radius:4px;background:rgba(0,0,0,.07); display:block; }
.pmg-asset__lines i:first-child{ width:65%; }
.pmg-asset__lines i:nth-child(2){ width:90%; }
.pmg-asset__lines i:nth-child(3){ width:50%; }
.pmg-asset__cta{
  height:32px;width:130px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow:0 6px 14px -4px rgba(34,223,220,.5);
}
/* Landing card secondary row: 16:9 image placeholder + filler lines. */
.pmg-asset__row{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.pmg-asset__placeholder--lg{
  flex:0 0 56%;
  aspect-ratio:16 / 9;
  border-radius:8px;
  overflow:hidden;
}
.pmg-asset__placeholder--lg svg{
  display:block;
  width:100%;
  height:100%;
}
.pmg-asset__lines--tight{ gap:5px; }
.pmg-asset__lines--tight i{ height:6px; }
.pmg-asset__lines--tight i:nth-child(1){ width:80%; }
.pmg-asset__lines--tight i:nth-child(2){ width:95%; }
.pmg-asset__lines--tight i:nth-child(3){ width:60%; }
.pmg-asset__lines--tight i:nth-child(4){ width:75%; }
/* Column variant — fills the remaining width next to the placeholder. */
.pmg-asset__lines--col{
  flex:1;
  align-self:center;
  gap:6px;
}

/* Email mock */
.pmg-asset--email{ grid-column:span 2; }
@media (max-width:900px){ .pmg-asset--email{ grid-column:span 1; } }
.pmg-asset__email-head{
  padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.05);
  font-size:11.5px;color:#7B7D78;
  /* Make room for the EMAIL CAMPAIGN tag pinned top-right so the
     subject line doesn't run under it. The single-line + ellipsis
     keeps long subjects visually tidy. */
  padding-right:130px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pmg-asset__email-head em{
  /* em already has its own truncation inside the parent — keep the
     parent's truncation working by allowing em to participate in it. */
  white-space:nowrap;
}
.pmg-asset__email-head em{
  color:#0E0F12;font-style:normal;font-weight:500;
}
.pmg-asset__email-body{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  font-size:12px;line-height:1.55;color:#3F4146;
  flex:1;
  min-height:0;
  overflow:hidden;
  /* Fade the bottom so the email reads as if clipped — feels like a
     real long email rather than artificially short copy. */
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 70%, transparent 100%);
}
.pmg-asset__email-body p{ margin:0; }
.pmg-asset__email-body p:first-child{ font-weight:500;color:#0E0F12; }

/* Video mock */
.pmg-asset--video{ display:flex;flex-direction:column; }
.pmg-asset__video-thumb{
  position:relative;
  flex:1;
  min-height:170px;
  border-radius:10px;
  background-image:url('assets/images/demo.webp');
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.pmg-asset__video-thumb::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.pmg-asset__play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.95);
  color:#0E0F12;
  z-index:1;
  box-shadow:0 8px 18px -4px rgba(0,0,0,.5);
}
.pmg-asset__duration{
  position:absolute;right:8px;bottom:8px;
  font-size:10px;color:#fff;
  background:rgba(0,0,0,.6);
  padding:2px 6px;border-radius:4px;
  z-index:1;
}
.pmg-asset__video-cap{
  display:flex;flex-direction:column;gap:2px;
  font-size:13px;color:#0E0F12;
  padding-top:4px;
}

/* Social mock */
.pmg-asset--social{
  background:#0E0F12;
  color:#fff;
  display:flex;flex-direction:column;
}
.pmg-asset__social-img{
  flex:1;
  min-height:170px;
  border-radius:10px;
  background-image:url('assets/images/SocialCard.webp');
  background-size:cover;
  background-position:center;
}
.pmg-asset__social-cap{
  display:flex;flex-direction:column;gap:4px;
  font-size:13px;color:#fff;line-height:1.35;
}
.pmg-asset__social-cap .mono{ font-size:9.5px;letter-spacing:.14em;color:rgba(255,255,255,.7); }
.pmg-asset--social .pmg-asset__tag{
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);
  backdrop-filter:blur(6px);
}

/* ---- PILLAR 3 · TRAINING AGENDA ---- */
.agenda{
  width:100%;
  margin-top:24px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.agenda::-webkit-scrollbar{ display:none; }
.agenda__track{
  display:flex;gap:18px;
  padding:4px 4px 12px;
  min-width:max-content;
}
.agenda__card{
  flex:0 0 320px;
  display:flex;flex-direction:column;gap:12px;
  padding:20px 22px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) padding-box;
  background-color:rgba(13,16,20,.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.agenda__card--quiet{
  background-color:rgba(13,16,20,.4);
  border-style:dashed;
}
.agenda__head{
  display:flex;justify-content:space-between;align-items:center;
}
.agenda__day{
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);
}
.agenda__live{
  display:inline-flex;align-items:center;gap:6px;
  font-size:9px;letter-spacing:.14em;color:var(--teal);
}
.agenda__live i{
  width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.agenda__title{
  font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  line-height:1.25;margin:0;
}
.agenda__desc{
  font-size:13px;color:var(--ink-2);line-height:1.55;margin:0;
}
.agenda__foot{
  display:flex;align-items:center;gap:10px;
  margin-top:auto;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:10px;letter-spacing:.12em;color:var(--ink-3);
}
.agenda__foot .mono:first-of-type{ flex:1; }
.agenda__avatar{
  width:24px;height:24px;border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.agenda__avatar img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.agenda__dur{ color:var(--ink-2); }

/* ---- PILLAR 4 · ACCOUNT MANAGER CHAT ---- */
.am-thread{
  display:grid;
  grid-template-columns:minmax(320px, 540px) minmax(0,1fr);
  gap:56px;
  align-items:center;
  margin-top:24px;
}
@media (max-width:900px){ .am-thread{ grid-template-columns:1fr; gap:32px; } }
.am-thread__col{ display:flex; flex-direction:column; gap:24px; }
.am-thread__copy{
  font-size:clamp(15px, 1vw, 17px);
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
}
.am-thread__panel{
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 30px 50px -20px rgba(20,30,40,.18);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.am-thread__head{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:#FCFAF4;
}
.am-thread__avatar{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#06231C;font-weight:700;font-size:12px;letter-spacing:.03em;
}
.am-thread__avatar--sm{ width:26px;height:26px;font-size:9.5px; }
.am-thread__id{ display:flex;flex-direction:column;gap:0;flex:1; }
.am-thread__id strong{ font-size:14px;color:#0E0F12;font-weight:600; }
.am-thread__id .mono{ font-size:9.5px;letter-spacing:.12em;color:#7B7D78; }
.am-thread__live{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:.14em;color:#0F8C8A;
}
.am-thread__live i{
  width:7px;height:7px;border-radius:50%;background:#22DFDC;
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.am-thread__day{
  text-align:center;
  font-size:9.5px;letter-spacing:.16em;color:#7B7D78;
  padding:14px 0 6px;
}
/* Multi-scene messages stage. Scenes are absolutely positioned so
   the panel keeps a stable height while we cycle through them. */
.am-thread__messages{
  position:relative;
  min-height:260px;
  flex:1;
}
.am-thread__scene{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:0 0 6px;
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
}
.am-thread__scene.is-active{
  opacity:1;
  pointer-events:auto;
}
/* When a scene becomes active, sequentially reveal its message bubbles
   based on each child's --d delay. */
.am-thread__scene .am-thread__day,
.am-thread__scene .am-thread__msg{
  opacity:0;
  transform:translateY(8px);
}
.am-thread__scene.is-active .am-thread__day,
.am-thread__scene.is-active .am-thread__msg{
  animation:msgRise .55s var(--ease-out) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes msgRise{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .am-thread__scene.is-active .am-thread__day,
  .am-thread__scene.is-active .am-thread__msg{
    animation:none; opacity:1; transform:none;
  }
}
.am-thread__msg{
  display:flex;align-items:flex-end;gap:8px;
  padding:6px 16px;
}
.am-thread__msg--out{ justify-content:flex-end; }
.am-thread__bubble{
  font-size:13.5px;line-height:1.5;color:#0E0F12;
  background:#F2F0EA;
  padding:10px 14px;border-radius:14px 14px 14px 4px;
  max-width:80%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.am-thread__bubble--out{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#06231C;
  border-radius:14px 14px 4px 14px;
}
.am-thread__foot{
  display:flex;align-items:center;
  padding:12px 16px;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:12px;color:#A4A6A1;
}
.am-thread__type{ flex:1;letter-spacing:0;font-family:var(--sans); }
.am-thread__send{
  font-size:10.5px;letter-spacing:.12em;
  color:var(--blue);
}
.am-thread__bullets{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px;
}
.am-thread__bullets{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:18px;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.06);
}
.am-thread__bullets li{
  position:relative;
  padding-left:42px;
  font-size:15.5px;line-height:1.4;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.005em;
}
.am-thread__bullets li::before{ display:none; }

/* Icon bullet — used in Sales & Training and Account Manager lists */
.partner-block__list--icons li{
  padding-left:42px;
  font-weight:600;
  font-size:15.5px;
  letter-spacing:-.005em;
  line-height:1.4;
}
.partner-block__list--icons li::before{ display:none; }
.icon-bullet{
  position:absolute;
  left:0;
  top:-2px;
  width:28px;height:28px;
  display:inline-flex;
  align-items:center;justify-content:center;
  color:var(--teal);
  background:rgba(34,223,220,.10);
  border:1px solid rgba(34,223,220,.3);
  border-radius:8px;
  /* subtle teal glow for cohesion with the rest of the page */
  filter:drop-shadow(0 0 6px rgba(34,223,220,.25));
}
.icon-bullet svg{
  width:16px;height:16px;
  display:block;
}

/* ---- PILLAR 5 · CHANGELOG ---- */
.changelog{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--bg-2);
  padding:18px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
}
.changelog__head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.changelog__pulse{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--teal);
}
.changelog__pulse i{
  width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.changelog__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:0;
}
.changelog__row{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.changelog__row:last-child{ border-bottom:0; }
.changelog__row > div{ display:flex;flex-direction:column;gap:3px;min-width:0; }
.changelog__dot{
  width:11px;height:11px;border-radius:50%;
  background:rgba(255,255,255,.18);
  margin-top:5px;
  flex-shrink:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.05);
}
.changelog__dot--new{ background:var(--teal); box-shadow:0 0 10px rgba(34,223,220,.6); }
.changelog__dot--imp{ background:#22EDB6; box-shadow:0 0 8px rgba(34,237,182,.5); }
.changelog__dot--launch{ background:var(--blue); box-shadow:0 0 8px rgba(139,201,238,.5); }
.changelog__ver{ font-size:9.5px;letter-spacing:.14em;color:var(--ink-3); }
.changelog__row strong{ font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em; }
.changelog__row > div span:last-child{ font-size:13px;color:var(--ink-2);line-height:1.5; }
.changelog__tag{
  font-size:9px;letter-spacing:.14em;
  padding:3px 8px;border-radius:999px;
  border:1px solid var(--line);
  color:var(--ink-3);
  margin-top:4px;
  flex-shrink:0;
  height:fit-content;
}
.changelog__tag--imp{ color:#22EDB6;border-color:rgba(34,237,182,.4);background:rgba(34,237,182,.08); }
.changelog__tag--launch{ color:var(--blue);border-color:rgba(139,201,238,.4);background:rgba(139,201,238,.08); }
.changelog__row:has(.changelog__dot--new) .changelog__tag{
  color:var(--teal);border-color:rgba(34,223,220,.4);background:rgba(34,223,220,.08);
}
.changelog__foot{
  font-size:9.5px;letter-spacing:.14em;color:var(--ink-3);
  padding-top:6px;border-top:1px solid var(--line);
}

/* ---- PILLAR 6 · ROADMAP BOARD ---- */
.roadmap{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  align-items:start;
}
@media (max-width:760px){ .roadmap{ grid-template-columns:1fr; } }
.roadmap__col{
  display:flex;flex-direction:column;gap:10px;
  padding:14px;
  border-radius:14px;
  background:rgba(0,0,0,.025);
  border:1px solid rgba(0,0,0,.06);
}
.roadmap__title{
  font-size:9.5px;letter-spacing:.18em;color:#7B7D78;
  margin:0 0 4px;font-weight:600;
}
.roadmap__card{
  position:relative;
  padding:14px 14px 12px;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.07);
  border-radius:10px;
  display:flex;flex-direction:column;gap:8px;
  box-shadow:0 4px 12px -6px rgba(20,30,40,.12);
}
.roadmap__card strong{
  font-size:13.5px;font-weight:600;color:#0E0F12;
  letter-spacing:-.005em;line-height:1.35;
}
.roadmap__meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:#7B7D78;
}
.roadmap__vote{
  font-weight:700;color:#0F8C8A;letter-spacing:.02em;
}
.roadmap__by{ font-size:9.5px;letter-spacing:.12em; }
.roadmap__pin{
  display:inline-block;align-self:flex-start;
  font-size:9px;letter-spacing:.14em;color:var(--teal);
  background:rgba(34,223,220,.14);
  border:1px solid rgba(34,223,220,.4);
  padding:3px 7px;border-radius:999px;
  margin-bottom:2px;
}
.roadmap__card--mine{
  background:linear-gradient(180deg, #FFFFFF 0%, rgba(34,223,220,.06) 100%);
  border-color:rgba(34,223,220,.35);
  box-shadow:0 6px 14px -4px rgba(34,223,220,.18);
}
.roadmap__card--shipped{
  background:rgba(255,255,255,.6);
  opacity:.78;
}
.roadmap__card--shipped strong{ color:#3F4146; }
.roadmap__progress{
  display:block;
  height:5px;border-radius:999px;
  background:rgba(0,0,0,.05);
  overflow:hidden;
}
.roadmap__progress i{
  display:block;height:100%;
  width:var(--p);
  background:linear-gradient(90deg, var(--teal), var(--blue));
}

/* Compact size — drops the gap inside and trims the padding so the
   short cards visibly distinguish themselves from the taller ones. */
.roadmap__card--sm{
  padding:10px 12px 9px;
  gap:5px;
}
.roadmap__card--sm strong{ font-size:12.5px;line-height:1.3; }
.roadmap__card--sm .roadmap__meta{ font-size:10.5px; }

/* Optional 1-line description, used on the "richer" cards */
.roadmap__desc{
  margin:0;
  font-size:11.5px;
  line-height:1.45;
  color:#5C5E5A;
}

/* Stacked tiny avatars on the "in build" team-seats card */
.roadmap__meta--row{ gap:10px; }
.roadmap__avatars{
  display:inline-flex;
  align-items:center;
}
.roadmap__avatars i{
  display:inline-block;
  width:18px;height:18px;border-radius:50%;
  border:2px solid #FFFFFF;
  background:linear-gradient(135deg, var(--teal), var(--blue));
}
.roadmap__avatars i + i{ margin-left:-7px; }
.roadmap__avatars i:nth-child(2){ background:linear-gradient(135deg, #F19B3F, #E26E5C); }
.roadmap__avatars i:nth-child(3){ background:linear-gradient(135deg, #A78BFA, #6EE7B7); }

/* ============================================================
   AI TOOLS PAGE
   - Hero mirrors Why Realeflow (top split, full-width visual
     below) but the visual is a JS-driven scanner card stream.
   - Sections rotate light/dark and never repeat the same shape.
============================================================ */

/* ---- HERO ---- */
.ai-hero{
  position:relative;
  padding:170px 0 60px;
  overflow:hidden;
  isolation:isolate;
}
.ai-hero__bg{ position:absolute;inset:0;z-index:-1; }
.ai-hero__photo{
  position:absolute;inset:-4%;
  background-image:url('assets/images/AiTools_Hero.webp');
  background-size:cover;
  background-position:center;
  filter:brightness(.55) saturate(.9) contrast(1.05);
  opacity:.5;
  animation:partnerHeroDrift 36s ease-in-out infinite alternate;
  will-change:transform;
}
.ai-hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 50% 35%, rgba(8,9,11,.30) 0%, rgba(8,9,11,.65) 70%, rgba(8,9,11,.92) 100%),
    linear-gradient(180deg, transparent 50%, rgba(8,9,11,.7) 85%, rgba(8,9,11,.95) 100%);
}
@media (prefers-reduced-motion:reduce){
  .ai-hero__photo{ animation:none; }
}
.ai-hero__aurora{
  position:absolute;
  width:1200px;height:600px;
  left:50%;top:30%;
  transform:translate(-50%,-30%);
  background:
    radial-gradient(closest-side, rgba(34,223,220,.18), transparent 70%),
    radial-gradient(closest-side at 70% 40%, rgba(139,201,238,.15), transparent 70%);
  filter:blur(90px);
  opacity:.85;
  pointer-events:none;
}
.ai-hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 80%);
  opacity:.4;
}
.ai-hero__grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none}

.ai-hero__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  gap:56px;
}
.ai-hero__top{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:64px;
  align-items:start;
}
@media (max-width:1020px){
  .ai-hero__top{ grid-template-columns:1fr; gap:36px; }
}
.ai-hero__copy{ display:flex;flex-direction:column; }
.ai-hero__copy > *{ opacity:0; transform:translateY(14px); animation:rise .9s var(--ease-out) forwards; }
.ai-hero__copy .section-head__kicker{ animation-delay:.05s; }
.ai-hero__title{
  margin-top:18px;
  font-size:clamp(40px, 4.6vw, 76px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:550;
  animation-delay:.18s;
}
.ai-hero__title em{ font-size:.95em; letter-spacing:-.025em; }
.ai-hero__actions{
  display:flex;flex-direction:column;gap:24px;
  padding-bottom:6px;
}
.ai-hero__actions > *{ opacity:0; transform:translateY(14px); animation:rise .9s var(--ease-out) forwards; }
.ai-hero__sub{
  max-width:520px;
  font-size:clamp(16px, 1.2vw, 19px);
  color:var(--ink-2);
  line-height:1.55;
  animation-delay:.34s;
}
.ai-hero__actions .hero__ctas{
  display:flex;flex-wrap:wrap;gap:14px;
  animation-delay:.5s;
}

/* ---- SCANNER CARD STREAM ---- */
/* The viewport is full-page-width — the marquee escapes the
   container so houses sweep edge to edge of the screen. */
.scanner-stream{
  position:relative;
  margin-top:32px;
  width:100vw;
  margin-left:calc(50% - 50vw);
  isolation:isolate;
  opacity:0;
  animation:rise 1s var(--ease-out) .65s forwards;
}
.scanner-stream__viewport{
  position:relative;
  height:400px;
  overflow:hidden;
}
.scanner-stream__track{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  gap:36px;
  height:100%;
  white-space:nowrap;
  will-change:transform;
}
.scan-card{
  position:relative;
  flex:0 0 auto;
  width:380px;
  height:300px;
  border-radius:14px;
  overflow:hidden;
}
.scan-card__image,
.scan-card__ascii{
  position:absolute;inset:0;
  border-radius:14px;
  overflow:hidden;
}
/* Image gets clipped from the LEFT (the inset(... left)) by --clip-right.
   So as --clip-right grows, the image is hidden from left → right. */
.scan-card__image{
  background:#0a0c12;
  clip-path:inset(0 0 0 var(--clip-right, 0%));
  -webkit-clip-path:inset(0 0 0 var(--clip-right, 0%));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 20px 50px -20px rgba(0,0,0,.6);
}
.scan-card__image img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05) brightness(1.02);
}
/* ASCII gets clipped from the RIGHT by (100% - --clip-left).
   So as --clip-left grows, the ASCII is revealed from left → right. */
.scan-card__ascii{
  background:linear-gradient(135deg, #061218 0%, #08111b 100%);
  clip-path:inset(0 calc(100% - var(--clip-left, 0%)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--clip-left, 0%)) 0 0);
  box-shadow:
    inset 0 0 0 1px rgba(34,223,220,.18),
    inset 0 0 60px rgba(34,223,220,.12);
}
.scan-card__ascii pre{
  margin:0;
  padding:14px 16px;
  width:100%;height:100%;
  box-sizing:border-box;
  font-family:var(--mono);
  font-size:11px;
  line-height:13px;
  color:rgba(34,223,220,.65);
  white-space:pre;
  overflow:hidden;
  letter-spacing:.02em;
  /* Soft mask only at the very right edge so the text reads with even
     padding on the visible sides and just a subtle fade as it meets
     the card boundary. */
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 92%, transparent 100%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 92%, transparent 100%);
  text-shadow:0 0 8px rgba(34,223,220,.35);
  animation:asciiFlicker .12s steps(1) infinite alternate;
}
@keyframes asciiFlicker{
  0%   { opacity:.92; }
  100% { opacity:1; }
}

/* Vertical scanner line — center of the viewport */
.scanner-stream__line{
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:340px;
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg, transparent 0%, var(--teal) 30%, var(--blue) 70%, transparent 100%);
  border-radius:999px;
  z-index:5;
  pointer-events:none;
  opacity:.45;
  transition:opacity .25s ease;
  box-shadow:
    0 0 10px rgba(34,223,220,.85),
    0 0 24px rgba(34,223,220,.6),
    0 0 50px rgba(139,201,238,.35);
  animation:scannerPulse 1.5s ease-in-out infinite alternate;
}
.scanner-stream__line.is-active{ opacity:1; }
@keyframes scannerPulse{
  from { transform:translate(-50%,-50%) scaleY(1); }
  to   { transform:translate(-50%,-50%) scaleY(1.04); }
}
.scanner-stream__line-cap{
  position:absolute;
  left:50%;
  width:8px;height:8px;
  border-radius:50%;
  transform:translateX(-50%);
  background:var(--teal);
  box-shadow:0 0 12px rgba(34,223,220,.8);
}
.scanner-stream__line-cap--top{ top:-4px; }
.scanner-stream__line-cap--bot{ bottom:-4px; background:var(--blue); box-shadow:0 0 12px rgba(139,201,238,.7); }

/* Soft fade-out edges so the marquee feels infinite, not like it
   hits a hard wall on the left/right viewport boundaries. */
.scanner-stream__edge{
  position:absolute;
  top:0;bottom:0;
  width:160px;
  pointer-events:none;
  z-index:6;
}
.scanner-stream__edge--left{
  left:0;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(8,9,11,.85) 35%, transparent 100%);
}
.scanner-stream__edge--right{
  right:0;
  background:linear-gradient(270deg, var(--bg) 0%, rgba(8,9,11,.85) 35%, transparent 100%);
}

@media (max-width:760px){
  .scan-card{ width:280px; height:240px; }
  /* Track fills the full viewport height so flex `align-items:center`
     can actually center the 240px-tall cards inside the 340px-tall
     viewport. The earlier 240px track left the cards top-aligned. */
  .scanner-stream__track{ height:340px; gap:24px; }
  .scanner-stream__viewport{ height:340px; }
  /* Keep the line shorter than the viewport. Its box-shadow glow is
     drawn at the line's edges; if the line matches the viewport height,
     the glow hits the viewport's overflow:hidden boundary and renders
     as a hard cropped line. With 60px of breathing room above and
     below, the glow fades naturally before the edge. */
  .scanner-stream__line{ height:280px; }
  .scanner-stream__edge{ width:80px; }
  .scanner-stream{ margin-bottom:32px; }
}
@media (prefers-reduced-motion:reduce){
  .scanner-stream__line{ animation:none; }
  .scan-card__ascii pre{ animation:none; }
}

/* ---- AI BLOCK shared (sections after the hero) ---- */
.ai-block{
  padding:140px 0;
  background:var(--bg);
  border-top:1px solid var(--line);
  position:relative;
  isolation:isolate;
}
.ai-block.is-light{
  background:#F2F0EA;
  border-top:1px solid rgba(0,0,0,.06);
}
/* Third register — dark with a faint hairline-grid + scattered
   filled cubes, masked to a center spotlight so the edges fall off
   into a dark vignette. Subtler than a flat grid. Works on both
   .ai-block and .partner-block via the --grid modifier. */
.ai-block--grid,
.partner-block--grid,
.pillars--grid{
  background:linear-gradient(180deg, #1A1E26 0%, #13161D 100%);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.ai-block--grid > .ai-block__bg,
.partner-block--grid > .ai-block__bg,
.pillars--grid > .ai-block__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* Radial center-spotlight mask — grid is fully visible only near
     the middle, fading out toward all edges for a vignette. */
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 45%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 75% at 50% 45%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 55%, transparent 100%);
}
.ai-block--grid .ai-block__bg-grid,
.partner-block--grid .ai-block__bg-grid,
.pillars--grid .ai-block__bg-grid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ai-block--grid .ai-block__bg-grid path,
.partner-block--grid .ai-block__bg-grid path,
.pillars--grid .ai-block__bg-grid path{ stroke:rgba(255,255,255,.045); }
.ai-block--grid .ai-block__bg-grid g rect,
.partner-block--grid .ai-block__bg-grid g rect,
.pillars--grid .ai-block__bg-grid g rect{ fill:rgba(255,255,255,.025); }
/* Side vignette — darkens left/right edges further for that soft
   "cinematic" falloff effect. */
.ai-block--grid::after,
.partner-block--grid::after,
.pillars--grid::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 50%, rgba(8,10,14,.55) 100%);
}
.ai-block--grid > .container,
.partner-block--grid > .container,
.pillars--grid > .container{
  position:relative;
  z-index:1;
}
.ai-block__inner{
  display:flex;flex-direction:column;gap:56px;
}
.ai-block__inner--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:center;
}
@media (max-width:1020px){
  .ai-block__inner--split{ grid-template-columns:1fr; gap:48px; }
  .ai-block{ padding:100px 0; }
}
.ai-block__story{ display:flex;flex-direction:column; }
.ai-block__head{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  display:flex;flex-direction:column;
}
.ai-block__head .section-head__kicker,
.ai-block__story .section-head__kicker{ margin-bottom:18px; }
.ai-block__title{
  font-size:clamp(34px, 3.6vw, 56px);
  line-height:1.06;letter-spacing:-.025em;font-weight:550;
}
.ai-block__copy{
  margin-top:22px;
  max-width:620px;
  font-size:clamp(16px, 1.05vw, 18px);
  line-height:1.65;
  color:var(--ink-2);
}
.ai-block__head .ai-block__copy{ margin-left:auto; margin-right:auto; }
.ai-block__copy--small{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink-3);
}
.ai-block.is-light .ai-block__title{ color:#0E0F12; }
.ai-block.is-light .ai-block__copy{ color:#3F4146; }

/* ---- DATA CREDIBILITY · borderless 3-column stat row, modeled on
   the homepage Proof of Scale grid ---- */
.cred-grid{
  list-style:none;
  margin:60px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid rgba(0,0,0,.10);
  border-bottom:1px solid rgba(0,0,0,.10);
}
.cred-grid__cell{
  padding:60px 36px;
  border-right:1px solid rgba(0,0,0,.10);
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
  transition:background .4s ease;
}
.cred-grid__cell::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,223,220,.5), transparent);
  opacity:0;
  transition:opacity .4s ease;
}
.cred-grid__cell:hover::before{ opacity:1; }
.cred-grid__cell:hover{ background:rgba(0,0,0,.025); }
.cred-grid__cell:last-child{ border-right:0; }
.cred-grid__num{
  font-size:clamp(48px, 6.6vw, 96px);
  font-weight:300;
  letter-spacing:-.05em;
  line-height:.95;
  background:linear-gradient(180deg, #0E0F12 30%, rgba(14,15,18,.4));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;
  white-space:nowrap;
}
.cred-grid__num--word{
  font-style:italic;
  font-family:var(--mono);
  letter-spacing:-.02em;
  font-size:clamp(40px, 5.6vw, 80px);
}
.cred-grid__suffix{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-left:2px;
  font-weight:300;
}
.cred-grid__label{
  font-size:18px;color:#0E0F12;font-weight:500;letter-spacing:-.01em;
  margin-top:8px;
}
.cred-grid__sub{
  font-size:11px;color:#7B7D78;letter-spacing:.14em;
  margin-top:auto;
}
@media (max-width:900px){
  .cred-grid{ grid-template-columns:1fr; }
  .cred-grid__cell{
    border-right:0;
    border-bottom:1px solid rgba(0,0,0,.10);
    padding:42px 24px;
  }
  .cred-grid__cell:last-child{ border-bottom:0; }
}

/* ---- SELLABILITY · scorecard ---- */
/* Bullet rule list — Retail / Wholesale / Rental laid out as plain
   rows separated only by a soft horizontal rule between each pair
   (no border at the top or bottom of the list). */
.ai-block--score .ai-block__list--rule{
  list-style:none;margin:32px 0 0;padding:0;
  display:flex;flex-direction:column;gap:0;
}
.ai-block--score .ai-block__list--rule li{
  position:relative;
  padding:20px 0 20px 56px;
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;flex-direction:column;gap:5px;
}
.ai-block--score .ai-block__list--rule li:last-child{ border-bottom:0; }
/* The base .ai-block__list draws a teal diamond ::before; the rule
   variant uses icons instead, so suppress the diamond to avoid
   stacking two bullet shapes per row. */
.ai-block--score .ai-block__list--rule li::before{ display:none; }
.ai-block--score .ai-block__list--rule strong{
  font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.005em;
}
.ai-block--score .ai-block__list--rule span:not(.icon-bullet){
  font-size:13.5px;color:var(--ink-2);line-height:1.55;
}
.ai-block--score .ai-block__list--rule .icon-bullet{
  position:absolute;
  left:0;
  top:18px;
  width:36px;height:36px;
  background:rgba(34,223,220,.10);
  border:1px solid rgba(34,223,220,.3);
  border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--teal);
  filter:drop-shadow(0 0 8px rgba(34,223,220,.25));
}
.ai-block--score .ai-block__list--rule .icon-bullet svg{
  width:18px;height:18px;
  display:block;
}

/* The right column hosts the scorecard with a 3-D tilt mirroring the
   homepage hero app mock — right edge recedes, slight downward pitch.
   Perspective lives on the column wrapper so the card pivots in
   real 3-D space rather than as a flat skew. */
.ai-block--score .ai-block__inner--split{
  perspective:1400px;
  perspective-origin:30% 50%;
}
.scorecard{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--bg-2);
  padding:26px 26px 30px;
  display:flex;flex-direction:column;gap:24px;
  transform-style:preserve-3d;
  transform-origin:0% 50%;
  transform:rotateY(-12deg) rotateX(5deg);
  box-shadow:
    0 35px 60px -25px rgba(0,0,0,.7),
    0 60px 120px -40px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04);
  will-change:transform;
}
/* The generic [data-reveal] rules apply translateY for the fade-in;
   re-apply the 3-D rotation alongside translateY so the skew survives
   the reveal animation. Specificity (.scorecard[data-reveal].is-in) is
   higher than the generic [data-reveal].is-in selector. */
.scorecard[data-reveal]{
  transform:translateY(28px) rotateY(-12deg) rotateX(5deg);
}
.scorecard[data-reveal].is-in{
  transform:translateY(0) rotateY(-12deg) rotateX(5deg);
}
@media (max-width:1020px){
  .ai-block--score .ai-block__inner--split{ perspective:none; }
  .scorecard,
  .scorecard[data-reveal],
  .scorecard[data-reveal].is-in{ transform:translateY(0); }
  .scorecard[data-reveal]:not(.is-in){ transform:translateY(28px); }
}
.scorecard__head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.scorecard__pulse{ display:inline-flex;align-items:center;gap:6px;color:var(--teal); }
.scorecard__pulse i{
  width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.scorecard__hero{
  display:flex;
  align-items:center;
  gap:14px;
}
.scorecard__photo{
  margin:0;
  flex:0 0 auto;
  width:180px;
  aspect-ratio:1 / 1;
  border-radius:12px;
  overflow:hidden;
  background:#0a0c12;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 14px 28px -10px rgba(0,0,0,.55);
}
.scorecard__photo img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.scorecard__hero-text{
  display:flex;flex-direction:column;
  gap:3px;
  min-width:0;
}
.scorecard__addr{
  font-size:15px;color:var(--ink);
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.2;
}
.scorecard__addr-city{
  font-size:12.5px;color:var(--ink-2);
  line-height:1.3;
}
.scorecard__addrSub{
  font-size:10px;color:var(--ink-3);letter-spacing:.12em;
  margin-top:2px;
}

/* Three model-score rows */
.scorecard__models{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:32px;
}
.score-row{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:14px;
  row-gap:8px;
}
.score-row__label{
  font-size:13px;font-weight:500;color:var(--ink-2);
  letter-spacing:-.005em;
  grid-column:1;
  grid-row:1;
}
.score-row__num{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  display:inline-flex;align-items:baseline;gap:3px;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}
.score-row__num span{
  font-size:24px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1;
}
.score-row__num em{
  font-style:normal;
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:.04em;
}
.score-row__meter{
  grid-column:1 / span 2;
  grid-row:2;
  position:relative;
  height:6px;border-radius:999px;
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.score-row__meter i{
  display:block;height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--teal), var(--blue));
  box-shadow:0 0 10px rgba(34,223,220,.4);
  transition:width 1.4s cubic-bezier(.22,1,.36,1);
  transform-origin:left center;
}
.scorecard.is-animated .score-row__meter i{ width:var(--p); }
.scorecard.is-animated .score-row:nth-child(1) .score-row__meter i{ transition-delay:0s; }
.scorecard.is-animated .score-row:nth-child(2) .score-row__meter i{ transition-delay:.18s; }
.scorecard.is-animated .score-row:nth-child(3) .score-row__meter i{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  .score-row__meter i{ width:var(--p) !important; transition:none; }
}
/* Distinct accent per model so the rows read as different products */
.score-row[data-model="retail"]   .score-row__meter i{
  background:linear-gradient(90deg, #22EDB6, var(--teal));
}
.score-row[data-model="wholesale"] .score-row__meter i{
  background:linear-gradient(90deg, var(--teal), var(--blue));
}
.score-row[data-model="rental"]   .score-row__meter i{
  background:linear-gradient(90deg, var(--blue), #A78BFA);
}

/* ---- TARGET MATCH AI · cycling diagram ----
   Rings sit behind the tier cards (cards cover ~half of the target).
   A JS interval flips data-active between aim → focus → bullseye —
   the matching ring glows and the matching tier card scales up. */
.target{
  position:relative;
  min-height:500px;
  display:flex;
  align-items:center;
}
.target__rings{
  position:absolute;
  top:50%;left:0;
  transform:translateY(-50%);
  width:500px;height:500px;
  pointer-events:none;
  z-index:0;
}
.target__ring{
  position:absolute;
  top:50%;left:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1.5px solid rgba(0,0,0,.08);
  background:radial-gradient(circle, rgba(34,223,220,.03) 0%, transparent 70%);
  transition:
    border-color .8s ease,
    background .8s ease,
    box-shadow .8s ease;
}
.target__ring--aim{ width:500px;height:500px; }
.target__ring--focus{ width:360px;height:360px; }
.target__ring--bullseye{ width:220px;height:220px; }

.target__bull{
  position:absolute;
  top:50%;left:50%;
  width:64px;height:64px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow:0 0 0 6px rgba(34,223,220,.12), 0 0 22px rgba(34,223,220,.35);
  transition:box-shadow .8s ease, transform .6s ease;
}
.target__cross{
  position:absolute;
  top:50%;left:50%;
  width:360px;height:360px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(0deg, transparent 49.6%, rgba(0,0,0,.06) 49.6%, rgba(0,0,0,.06) 50.4%, transparent 50.4%),
    linear-gradient(90deg, transparent 49.6%, rgba(0,0,0,.06) 49.6%, rgba(0,0,0,.06) 50.4%, transparent 50.4%);
  pointer-events:none;
}

/* Active zone highlight — driven by data-active on .target */
.target[data-active="aim"]      .target__ring--aim,
.target[data-active="focus"]    .target__ring--focus,
.target[data-active="bullseye"] .target__ring--bullseye{
  border-color:rgba(15,140,138,.55);
}
.target[data-active="aim"] .target__ring--aim{
  background:radial-gradient(circle, rgba(34,223,220,.14) 0%, transparent 60%);
  box-shadow:
    0 0 0 4px rgba(34,223,220,.12),
    0 0 60px rgba(34,223,220,.28);
}
.target[data-active="focus"] .target__ring--focus{
  background:radial-gradient(circle, rgba(34,223,220,.20) 0%, transparent 60%);
  box-shadow:
    0 0 0 4px rgba(34,223,220,.14),
    0 0 50px rgba(34,223,220,.32);
}
.target[data-active="bullseye"] .target__ring--bullseye{
  background:radial-gradient(circle, rgba(34,223,220,.28) 0%, transparent 60%);
  box-shadow:
    0 0 0 4px rgba(34,223,220,.16),
    0 0 60px rgba(34,223,220,.4);
}
.target[data-active="bullseye"] .target__bull{
  box-shadow:
    0 0 0 10px rgba(34,223,220,.25),
    0 0 50px rgba(34,223,220,.55);
  transform:translate(-50%,-50%) scale(1.12);
}

/* Tier cards float on top of the right half of the diagram */
.target__tiers{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  gap:14px;
  position:relative;
  z-index:1;
  margin-left:auto;
  width:100%;
  max-width:340px;
}
.target__tier{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 16px 14px 42px;
  border-radius:12px;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 18px -10px rgba(20,30,40,.15);
  position:relative;
  transition:
    transform .55s var(--ease-out),
    border-color .55s ease,
    background .55s ease,
    box-shadow .55s ease;
}
.target__tier::before{
  content:"";
  position:absolute;
  left:14px;top:50%;
  width:14px;height:14px;
  border-radius:50%;
  transform:translateY(-50%);
  border:2px solid rgba(34,223,220,.45);
  background:rgba(34,223,220,.06);
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.target__tier[data-tier="focus"]::before{ background:rgba(34,223,220,.4); border-color:rgba(15,140,138,.6); }
.target__tier[data-tier="bullseye"]::before{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  border-color:rgba(15,140,138,.85);
  box-shadow:0 0 0 3px rgba(34,223,220,.18);
}
.target__label{ font-size:9.5px;letter-spacing:.16em;color:#7B7D78; }
.target__tier strong{ font-size:15px;color:#0E0F12;font-weight:600;letter-spacing:-.005em; }
.target__tier span:not(.target__label){ font-size:13px;color:#3F4146;line-height:1.5; }

/* Active card grows slightly and gets a teal accent halo */
.target__tier.is-active{
  transform:scale(1.06);
  border-color:rgba(34,223,220,.5);
  background:linear-gradient(180deg, #FFFFFF 0%, rgba(34,223,220,.05) 100%);
  box-shadow:
    0 22px 36px -12px rgba(34,223,220,.28),
    0 12px 24px -8px rgba(20,30,40,.18);
  z-index:2;
}
.target__tier.is-active::before{
  box-shadow:0 0 0 4px rgba(34,223,220,.22);
}

@media (max-width:1020px){
  .target{ min-height:auto; flex-direction:column; gap:32px; align-items:stretch; }
  .target__rings{
    position:relative;top:auto;left:auto;
    transform:none;
    width:340px;height:340px;
    align-self:center;
    flex:0 0 auto;
  }
  .target__ring--aim{ width:340px;height:340px; }
  .target__ring--focus{ width:240px;height:240px; }
  .target__ring--bullseye{ width:140px;height:140px; }
  .target__bull{ width:48px;height:48px; }
  .target__cross{ width:240px;height:240px; }
  .target__tiers{ max-width:none;margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .target__tier, .target__ring, .target__bull{ transition:none !important; }
}

/* ---- AI CHATBOT ---- */
.chatbot{
  display:grid;
  grid-template-columns:minmax(320px, 540px) minmax(0, 1fr);
  gap:48px;
  align-items:start;
  margin-top:24px;
}
@media (max-width:1020px){ .chatbot{ grid-template-columns:1fr; gap:32px; } }
.chatbot__panel{
  background:linear-gradient(180deg, #0E1218 0%, #0A0D12 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.7);
}
.chatbot__head{
  display:flex;align-items:center;gap:6px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.chatbot__dot{ width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18); }
.chatbot__dot:first-child{ background:#FF7B72; }
.chatbot__dot:nth-child(2){ background:#F1B935; }
.chatbot__dot:nth-child(3){ background:#34D399; }
.chatbot__title{ margin-left:12px;font-size:10px;color:var(--ink-3);letter-spacing:.14em; }
.chatbot__body{
  position:relative;
  padding:18px 18px 8px;
  min-height:380px;
}
/* Mobile: scenes wrap to 2+ lines per bubble, so 380px isn't enough
   to fit the tallest conversation (5 bubbles × wrapped lines). Bump
   the body so nothing hides behind the footer input row. */
@media (max-width:760px){
  .chatbot__body{ min-height:520px; }
}
.chatbot__scene{
  position:absolute;
  inset:18px 18px 8px;
  display:flex;flex-direction:column;gap:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
}
.chatbot__scene.is-active{
  opacity:1;
  pointer-events:auto;
}
/* Each child reveals on its own --d delay when the scene becomes
   active. The typing dots are a special case — they show, hold,
   then fade out so the bot's bubble can take their place. */
.chatbot__scene .chatbot__msg{
  opacity:0;
  transform:translateY(8px);
}
.chatbot__scene.is-active .chatbot__msg{
  animation:msgRise .55s var(--ease-out) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes msgRise{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
.chatbot__typing{
  display:flex;align-items:flex-end;gap:10px;
  opacity:0;
}
.chatbot__scene.is-active .chatbot__typing{
  animation:typingShowHide 1.5s ease-out forwards;
  animation-delay:var(--d, 0s);
}
@keyframes typingShowHide{
  0%   { opacity:0; transform:translateY(8px); }
  12%  { opacity:1; transform:translateY(0); }
  85%  { opacity:1; }
  100% { opacity:0; transform:translateY(-4px); }
}
.chatbot__bubble--typing{
  display:inline-flex;align-items:center;gap:5px;
  padding:14px 16px;
}
.chatbot__bubble--typing span{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.55);
  animation:typingBounce 1.1s infinite ease-in-out;
}
.chatbot__bubble--typing span:nth-child(2){ animation-delay:.15s; }
.chatbot__bubble--typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{
  0%, 60%, 100% { transform:translateY(0); opacity:.45; }
  30%           { transform:translateY(-4px); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .chatbot__scene.is-active .chatbot__msg,
  .chatbot__scene.is-active .chatbot__typing,
  .chatbot__bubble--typing span{
    animation:none; opacity:1; transform:none;
  }
}

.chatbot__msg{ display:flex;align-items:flex-end;gap:10px; }
.chatbot__msg--user{ justify-content:flex-end; }
.chatbot__avatar{
  width:32px;height:32px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#06231C;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  flex-shrink:0;
  box-shadow:0 4px 10px -3px rgba(34,223,220,.45);
}
.chatbot__avatar svg{ width:18px;height:18px;display:block; }
.chatbot__bubble{
  max-width:78%;
  padding:12px 16px;
  border-radius:14px 14px 14px 4px;
  font-size:14px;line-height:1.55;color:var(--ink);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.chatbot__msg--user .chatbot__bubble{
  border-radius:14px 14px 4px 14px;
  background:linear-gradient(135deg, rgba(34,223,220,.16), rgba(139,201,238,.10));
  border-color:rgba(34,223,220,.3);
  color:var(--ink);
}
.chatbot__bubble ul{
  list-style:none;margin:8px 0 0;padding:0;
  display:flex;flex-direction:column;gap:4px;
  font-size:13px;color:var(--ink-2);
}
.chatbot__bubble ul strong{ color:var(--ink);font-weight:600; }
.chatbot__bubble ul em{
  font-style:normal;font-weight:600;
  color:var(--teal);
  font-family:var(--mono);
}
.chatbot__foot{
  display:flex;align-items:center;
  padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:var(--ink-3);letter-spacing:.04em;
}
.chatbot__type{ flex:1;letter-spacing:0;font-family:var(--sans); }
.chatbot__send{ color:var(--teal); }

/* Feature pills next to the chat */
.chatbot__features{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px;
}
.chatbot__features li{
  position:relative;
  padding:14px 16px 14px 60px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:3px;
}
.chatbot__features strong{ font-size:14px;color:var(--ink);font-weight:600;letter-spacing:-.005em; }
.chatbot__features span{ font-size:12.5px;color:var(--ink-2);line-height:1.5; }
.chatbot__features .icon-bullet{
  position:absolute;
  left:14px;top:50%;
  width:32px;height:32px;
  transform:translateY(-50%);
  background:rgba(34,223,220,.10);
  border:1px solid rgba(34,223,220,.3);
  border-radius:9px;
}
.chatbot__features .icon-bullet svg{ width:18px;height:18px; }

/* ---- SIGNAL AI HEATMAP ---- */
/* Dark card on a cream section. A teal halo behind the card gives
   it some visual separation from the light background. */
.heatmap{
  position:relative;
  margin:64px 0 0;
  isolation:isolate;
}
.heatmap::before{
  content:"";
  position:absolute;
  inset:-30px;
  background:
    radial-gradient(60% 70% at 50% 60%, rgba(34,223,220,.14), transparent 70%),
    radial-gradient(80% 80% at 50% 100%, rgba(0,0,0,.08), transparent 70%);
  filter:blur(30px);
  z-index:-1;
  pointer-events:none;
}
.heatmap__panel{
  background:#0B1118;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:
    0 40px 70px -25px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.02),
    0 0 80px -10px rgba(34,223,220,.18);
}
.heatmap__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.55);
}
.heatmap__pulse{ display:inline-flex;align-items:center;gap:6px;color:var(--teal); }
.heatmap__pulse i{
  width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.heatmap__plot{
  position:relative;
  width:100%;
  aspect-ratio:600 / 320;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(34,223,220,.06), transparent 70%),
    #0B1118;
  overflow:hidden;
  isolation:isolate;
}
/* Real street-map tile underneath the heat data — inverted so the
   dark-on-white source draws as faint light-on-dark streets. */
.heatmap__plot::before{
  content:"";
  position:absolute;inset:0;
  background:url('assets/images/map_2_tile.svg') center/cover no-repeat;
  filter:invert(1) saturate(0) brightness(.85) contrast(.7) opacity(.28);
  z-index:0;
  pointer-events:none;
}
.heatmap__hot{
  position:absolute;
  left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  width:280px;height:280px;
  border-radius:50%;
  background:radial-gradient(circle, var(--c) 0%, transparent 60%);
  filter:blur(8px);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
  animation:hotPulse 4s ease-in-out infinite alternate;
}
.heatmap__hot--lg{ width:380px;height:380px; }
.heatmap__hot--md{ width:210px;height:210px; }
.heatmap__hot--sm{ width:160px;height:160px; }
@keyframes hotPulse{
  0%   { opacity:.85; transform:translate(-50%,-50%) scale(.95); }
  100% { opacity:1;   transform:translate(-50%,-50%) scale(1.05); }
}
.heatmap__cold{
  position:absolute;
  left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  width:210px;height:210px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(140,170,210,.55) 0%, transparent 60%);
  filter:blur(8px);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}
.heatmap__cold--md{ width:280px;height:280px; }
.heatmap__pin{
  position:absolute;
  left:var(--x);top:var(--y);
  transform:translate(-50%,-115%);
  z-index:3;
  display:inline-flex;flex-direction:column;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(8,12,18,.92);
  color:#FFFFFF;
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.005em;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 14px 28px -6px rgba(0,0,0,.55),
    0 0 0 1px rgba(34,223,220,.18),
    0 0 22px -6px rgba(34,223,220,.35);
  backdrop-filter:blur(6px);
}
.heatmap__pin small{
  font-size:10.5px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.7);
  font-weight:500;
  margin-top:2px;
}
.heatmap__pin::after{
  content:"";
  position:absolute;
  left:50%;bottom:-6px;
  width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);
  background:#0E0F12;
}
.heatmap__pin--right{ transform:translate(-30%,-115%); }
.heatmap__pin--down{
  transform:translate(-50%, 15%);
}
.heatmap__pin--down::after{ top:-6px; bottom:auto; }
.heatmap__foot{
  display:flex;gap:24px;
  padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.55);
}
.heatmap__sw{
  display:inline-block;
  width:10px;height:10px;border-radius:50%;
  vertical-align:middle;
  margin-right:2px;
}
.heatmap__sw--hot{ background:#22EDB6; box-shadow:0 0 8px rgba(34,237,182,.7); }
.heatmap__sw--mid{ background:#8BC9EE; box-shadow:0 0 6px rgba(139,201,238,.4); }
.heatmap__sw--cold{ background:#7C97B8; }

/* Mobile: swap to portrait orientation so pins have vertical room
   to spread out. Only three city pins survive — Apollo Beach and
   Temple Terrace are too close to the others at this width and
   were overlapping. Remaining pins are repositioned for the
   taller frame. The hot/cold blobs keep their original positions
   since they're soft background gradients, not labeled hits. */
@media (max-width:760px){
  .heatmap__plot{ aspect-ratio:320 / 460; }
  /* Pins are children of .heatmap__plot after 9 hots + 2 colds.
     Pin order: 1=St.Petersburg, 2=Tampa, 3=Brandon, 4=Apollo Beach,
     5=Temple Terrace. Hide 4 and 5, reposition 1–3. */
  .heatmap__plot > .heatmap__pin:nth-of-type(15),
  .heatmap__plot > .heatmap__pin:nth-of-type(16){ display:none; }
  .heatmap__plot > .heatmap__pin:nth-of-type(12){ left:30% !important; top:65% !important; } /* St. Petersburg */
  .heatmap__plot > .heatmap__pin:nth-of-type(13){ left:55% !important; top:22% !important; } /* Tampa (center, top) */
  .heatmap__plot > .heatmap__pin:nth-of-type(14){ left:68% !important; top:88% !important; } /* Brandon */
}

/* ============================================================
   FEATURES PAGE
   - Reuses .ai-block / .ai-block__inner shared layout from AI Tools.
   - Adds page-specific visuals: feature index strip, comp grid,
     lead-type pill columns, deal-sheet, kanban board, postcard fan,
     and skip-trace results card.
============================================================ */

/* Reverse split helper for ai-block inner */
.ai-block__inner--reverse > *:first-child{ order:2; }
@media (max-width:1020px){
  .ai-block__inner--reverse > *:first-child{ order:0; }
}

/* Default diamond bullets for .ai-block__list (matches the
   partnership block list — kept consistent across pages) */
.ai-block__list{
  margin:32px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:10px;
}
.ai-block__list li{
  position:relative;
  padding-left:24px;
  font-size:15px;line-height:1.55;color:var(--ink);
}
.ai-block__list li::before{
  content:"";
  position:absolute;left:2px;top:.6em;
  width:8px;height:8px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  transform:rotate(45deg);
  border-radius:1.5px;
  box-shadow:0 0 8px -2px rgba(34,223,220,.55);
}
.ai-block__list--row{
  flex-direction:row;flex-wrap:wrap;
  gap:18px 36px;
  margin-top:36px;
  justify-content:center;
}
.ai-block__list--row li{ flex:1 1 240px;max-width:340px; }

.ai-block.is-light .ai-block__list li{ color:#0E0F12; }

/* ---- HERO · feature index strip ---- */
.feat-hero{ padding-bottom:80px; }
.feat-hero__photo{
  position:absolute;inset:-4%;
  background-image:url('assets/images/Features_Hero.webp');
  background-size:cover;
  background-position:center;
  filter:brightness(.55) saturate(.9) contrast(1.05);
  opacity:.5;
  animation:partnerHeroDrift 36s ease-in-out infinite alternate;
  will-change:transform;
}
.feat-hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 50% 35%, rgba(8,9,11,.30) 0%, rgba(8,9,11,.65) 70%, rgba(8,9,11,.92) 100%),
    linear-gradient(180deg, transparent 50%, rgba(8,9,11,.7) 85%, rgba(8,9,11,.95) 100%);
}
@media (prefers-reduced-motion:reduce){
  .feat-hero__photo{ animation:none; }
}
.feat-index{
  list-style:none;margin:48px 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:10px;
  opacity:0;
  transform:translateY(20px);
  animation:rise 1s var(--ease-out) .65s forwards;
}
@media (max-width:1020px){
  .feat-index{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:520px){
  .feat-index{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.feat-index a{
  display:flex;flex-direction:column;
  gap:8px;
  padding:14px 14px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(13,16,20,.55);
  backdrop-filter:blur(14px);
  color:var(--ink);
  text-decoration:none;
  transition:transform .4s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.feat-index a:hover{
  transform:translateY(-2px);
  border-color:rgba(34,223,220,.45);
  box-shadow:0 22px 40px -25px rgba(0,0,0,.7), 0 0 0 1px rgba(34,223,220,.25), 0 0 24px -8px rgba(34,223,220,.4);
}
.feat-index__num{ font-size:9.5px;color:var(--ink-3);letter-spacing:.14em; }
.feat-index__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(34,223,220,.18), rgba(139,201,238,.10));
  color:var(--teal);
}
.feat-index__label{
  font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em;line-height:1.2;
  margin-top:auto;
}

/* ---- 01 · COMP RADAR ----
   Subject card centered, concentric rings around it, comp price
   chips floated at varying radii so the visual reads as
   "comparable sales near the subject". */
.comp-radar{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  max-width:620px;
  margin:0 auto 36px;
  isolation:isolate;
}
.comp-radar__rings{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.comp-radar__ring{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1.5px dashed rgba(0,0,0,.10);
  background:radial-gradient(circle, rgba(34,223,220,.04) 0%, transparent 70%);
  /* Lock the rings to a 1:1 aspect so they stay perfectly circular
     even when the surrounding radar container is portrait
     (e.g. mobile). Sizing each ring as a width % only — height
     follows automatically. */
  aspect-ratio:1 / 1;
  height:auto;
}
.comp-radar__ring--1{ width:46%; border-color:rgba(15,140,138,.35); }
.comp-radar__ring--2{ width:74%; }
.comp-radar__ring--3{ width:100%; }
/* Subject card stays a fixed size at the center regardless of the
   container's growth — only the rings + chips spread out. */
.comp-radar__subject{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:300px;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 30px 50px -20px rgba(20,30,40,.25),
    0 0 0 8px rgba(34,223,220,.08);
  z-index:3;
}
.comp-radar__photo{
  margin:0;
  position:relative;
  aspect-ratio:16 / 9;
  background:#0a0c12;
  overflow:hidden;
}
.comp-radar__photo img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.comp-radar__pin{
  position:absolute;
  bottom:8px;left:8px;
  width:14px;height:14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  border:2px solid #FFFFFF;
  box-shadow:
    0 0 0 4px rgba(34,223,220,.25),
    0 4px 8px -2px rgba(0,0,0,.4);
  animation:radarPinPulse 2s ease-in-out infinite alternate;
}
@keyframes radarPinPulse{
  from { box-shadow:0 0 0 4px rgba(34,223,220,.18), 0 4px 8px -2px rgba(0,0,0,.4); }
  to   { box-shadow:0 0 0 7px rgba(34,223,220,.32), 0 4px 8px -2px rgba(0,0,0,.4); }
}
.comp-radar__info{
  padding:14px 16px 14px;
  display:flex;flex-direction:column;gap:4px;
}
.comp-radar__tag{
  font-size:9.5px;letter-spacing:.16em;color:#7B7D78;
}
.comp-radar__info strong{
  font-size:15px;color:#0E0F12;font-weight:600;letter-spacing:-.005em;
}
.comp-radar__city{ font-size:11px;letter-spacing:.04em;color:#7B7D78; }
.comp-radar__specs{
  display:flex;gap:0;
  list-style:none;margin:6px 0 0;padding:0;
  font-size:10.5px;letter-spacing:.08em;color:#3F4146;
}
.comp-radar__specs li{
  padding:0 8px 0 0;
  border-right:1px solid rgba(0,0,0,.10);
  margin-right:8px;
}
.comp-radar__specs li:last-child{ border-right:0;margin-right:0;padding-right:0; }
.comp-radar__estimate{
  margin-top:8px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:8px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.06);
}
.comp-radar__estimate > .mono:first-child{
  font-size:9.5px;letter-spacing:.14em;color:#7B7D78;
}
.comp-radar__estimate strong{
  font-size:24px;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(135deg, #0F8C8A, #1F4D6E);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:var(--mono);
}
.comp-radar__conf{
  font-size:9.5px;letter-spacing:.14em;color:#0F8C8A;
  text-align:right;
}
/* Comp price chips floated at user-positioned --x/--y */
.comp-radar__chip{
  position:absolute;
  left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  display:inline-flex;flex-direction:column;align-items:flex-start;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  padding:7px 11px 6px;
  font-family:var(--mono);
  font-size:14px;font-weight:700;color:#0E0F12;
  letter-spacing:-.005em;
  box-shadow:
    0 12px 22px -10px rgba(20,30,40,.18),
    0 0 0 1px rgba(34,223,220,.12);
  z-index:2;
  white-space:nowrap;
  animation:radarChipFloat 5s ease-in-out infinite alternate;
}
.comp-radar__chip:nth-of-type(2){ animation-delay:-1.5s; }
.comp-radar__chip:nth-of-type(3){ animation-delay:-3s; }
.comp-radar__chip:nth-of-type(4){ animation-delay:-2s; }
.comp-radar__chip:nth-of-type(5){ animation-delay:-4s; }
.comp-radar__chip small{
  font-family:var(--mono);
  font-size:9px;font-weight:500;letter-spacing:.14em;
  color:#7B7D78;
  margin-top:1px;
}
.comp-radar__chip--cool{
  color:#7B7D78;
  border-color:rgba(0,0,0,.06);
  box-shadow:0 8px 16px -10px rgba(20,30,40,.15);
}
@keyframes radarChipFloat{
  from{ transform:translate(-50%,-50%) translateY(-2px); }
  to  { transform:translate(-50%,-50%) translateY(2px); }
}
.comp-radar__foot{
  position:absolute;
  left:50%;bottom:-28px;
  transform:translateX(-50%);
  font-size:10px;letter-spacing:.14em;color:#7B7D78;
  white-space:nowrap;
  z-index:1;
}
@media (max-width:760px){
  .comp-radar{
    aspect-ratio:1 / 1.1;
    /* Clip any chip that would otherwise push past the radar edge
       — at narrow widths the chip centers + nowrap text were
       extending beyond the container and giving the page
       horizontal scroll. */
    overflow:hidden;
  }
  /* Shrink the subject card so the surrounding price chips have
     room to breathe; pull chips farther into the corners so they
     don't tuck behind the card. Positions are pulled toward the
     middle (vs. desktop 14%/86%) since the chip widths at this
     viewport are a much larger share of the container width. */
  .comp-radar__subject{ width:50%; }
  /* Card got narrower — let the specs row wrap instead of being
     clipped by the card's overflow:hidden. */
  .comp-radar__specs{ flex-wrap:wrap; row-gap:4px; }
  .comp-radar__chip{ font-size:11.5px;padding:5px 8px; }
  .comp-radar__chip:nth-of-type(1){ left:18% !important; top:11% !important; }
  .comp-radar__chip:nth-of-type(2){ left:82% !important; top:14% !important; }
  .comp-radar__chip:nth-of-type(3){ left:16% !important; top:68% !important; }
  .comp-radar__chip:nth-of-type(4){ left:84% !important; top:70% !important; }
  .comp-radar__chip:nth-of-type(5){ left:50% !important; top:92% !important; }
  /* "94% confidence" was being clipped on the right at narrow
     widths. Drop it to its own row beneath the EST. ARV value. */
  .comp-radar__estimate{
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    row-gap:4px;
  }
  .comp-radar__conf{
    grid-column:1 / -1;
    text-align:right;
  }
}
@media (prefers-reduced-motion:reduce){
  .comp-radar__chip,
  .comp-radar__pin{ animation:none; }
}

/* ---- 02 · LEAD GEN ---- */
/* Top row: copy left (wider), icon-bullets right (vertically centered) */
.leadgen-top{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:72px;
  align-items:center;
}
@media (max-width:1020px){
  .leadgen-top{ grid-template-columns:1fr; gap:36px; align-items:start; }
}
.leadgen-top .ai-block__story{
  text-align:left;
  margin:0;
  max-width:none;
}
.leadgen-top .ai-block__list--icons{
  margin:0;
  align-self:center;
}
.leadgen-top .ai-block__list--icons li{
  font-size:15.5px;
  font-weight:600;
  line-height:1.45;
  color:var(--ink);
  letter-spacing:-.005em;
}

/* Generic icon-bullet list for ai-block (mirrors the partner list
   but scoped so the diamond ::before stays elsewhere) */
.ai-block__list--icons{
  margin:32px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:18px;
}
.ai-block__list--icons li{
  position:relative;
  padding:6px 0 6px 50px;
  font-size:15px;line-height:1.5;color:var(--ink);
}
.ai-block__list--icons li::before{ display:none; }
.ai-block__list--icons .icon-bullet{
  position:absolute;
  left:0;top:2px;
  width:34px;height:34px;
  background:rgba(34,223,220,.10);
  border:1px solid rgba(34,223,220,.3);
  border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--teal);
  filter:drop-shadow(0 0 6px rgba(34,223,220,.25));
}
.ai-block__list--icons .icon-bullet svg{ width:18px;height:18px;display:block; }

/* Lead-type pill columns */
.leadtypes{
  margin-top:60px;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width:900px){
  .leadtypes{ grid-template-columns:1fr; }
}
.leadtypes__col{
  display:flex;flex-direction:column;gap:18px;
  padding:24px 24px 22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) padding-box;
  background-color:rgba(13,16,20,.55);
  backdrop-filter:blur(14px);
  position:relative;
}
.leadtypes__col--feature{
  border-color:rgba(34,223,220,.35);
  background:
    linear-gradient(180deg, rgba(34,223,220,.06), rgba(34,223,220,.01)) padding-box;
  background-color:rgba(13,16,20,.7);
  box-shadow:0 0 60px -15px rgba(34,223,220,.25);
}
.leadtypes__head{ display:flex;flex-direction:column;gap:6px; }
.leadtypes__tier{
  font-size:9.5px;letter-spacing:.16em;color:var(--ink-3);
}
.leadtypes__col--feature .leadtypes__tier{ color:var(--teal); }
.leadtypes__head h3{
  font-size:24px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
  margin:0;
}
.leadtypes__pills{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.leadtypes__pills li{
  font-size:13px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--ink);
  white-space:nowrap;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.leadtypes__pills li:hover{
  border-color:rgba(34,223,220,.4);
  background:rgba(34,223,220,.08);
  transform:translateY(-1px);
}
.leadtypes__col--feature .leadtypes__pills li{
  border-color:rgba(34,223,220,.2);
  background:rgba(34,223,220,.05);
}
.leadtypes__note{
  margin-top:auto;
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);
}

/* ---- 03 · DEAL TILES (image-driven) ----
   Floating photo tiles for each cost component arranged around a
   summary panel. Varying rotation, size, and drop-shadow depth give
   the impression of layered cards. */
.dealtiles{
  position:relative;
  width:100%;
  aspect-ratio:1.05 / 1;
  max-width:600px;
  margin:0 auto;
  isolation:isolate;
  /* Tiles rotate slightly; clip so they can't trigger horizontal
     page scroll on narrow viewports. */
  overflow:hidden;
}
.dealtile{
  position:absolute;
  border-radius:12px;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.05);
  overflow:hidden;
  display:flex;flex-direction:column;
  transform-origin:center;
  transition:transform .5s var(--ease-out), box-shadow .5s ease;
}
.dealtile:hover{
  transform:translateY(-3px) rotate(0deg) !important;
  box-shadow:0 36px 48px -16px rgba(20,30,40,.32) !important;
  z-index:6 !important;
}
.dealtile__photo{
  margin:0;
  height:108px;
  background:#0a0c12;
}
.dealtile__photo img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.dealtile__body{
  padding:9px 13px 11px;
  display:flex;flex-direction:column;gap:2px;
}
.dealtile__label{
  font-size:9px;letter-spacing:.16em;color:#7B7D78;
}
.dealtile__price{
  font-size:16px;font-weight:700;color:#0E0F12;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* Per-tile placement — varying rotation, size, shadow depth.
   Sizes range 18% → 36% so the tile cluster has clear hierarchy:
   purchase is the dominant input, roof and holding are the smallest
   accent tiles. Cluster sits closer to the summary panel so the
   inputs visually feed into the result. */
.dealtile--purchase{
  top:0; left:6%; width:36%;
  transform:rotate(-3deg);
  box-shadow:0 22px 30px -14px rgba(20,30,40,.22);
  z-index:2;
}
.dealtile--roof{
  top:6%; left:46%; width:18%;
  transform:rotate(4deg);
  box-shadow:0 12px 20px -10px rgba(20,30,40,.16);
  z-index:1;
}
.dealtile--holding{
  top:9%; right:6%; width:20%;
  transform:rotate(-5deg);
  box-shadow:0 14px 22px -12px rgba(20,30,40,.18);
  z-index:1;
}
.dealtile--kitchen{
  top:34%; left:14%; width:28%;
  transform:rotate(-2deg);
  box-shadow:0 26px 36px -14px rgba(20,30,40,.26);
  z-index:3;
}
.dealtile--bath{
  top:36%; left:46%; width:22%;
  transform:rotate(5deg);
  box-shadow:0 30px 40px -16px rgba(20,30,40,.30);
  z-index:4;
}

/* Summary panel — biggest, deepest shadow, anchored bottom-right */
.dealsummary{
  position:absolute;
  right:0; bottom:0;
  width:48%;
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%);
  border:1px solid rgba(0,0,0,.07);
  border-radius:14px;
  padding:16px 18px 14px;
  box-shadow:
    0 36px 50px -18px rgba(20,30,40,.30),
    0 0 0 1px rgba(34,223,220,.10);
  z-index:5;
  display:flex;flex-direction:column;gap:8px;
}
.dealsummary__head{
  font-size:9.5px;letter-spacing:.14em;color:#7B7D78;
  padding-bottom:8px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.dealsummary__row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:#3F4146;
}
.dealsummary__row strong{
  font-size:15px;font-weight:600;color:#0E0F12;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}
.dealsummary__row--feature{
  margin-top:2px;
}
.dealsummary__row--feature strong{
  font-size:22px;font-weight:700;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.dealsummary__profit{
  /* keeps the dealsummary__row--feature gradient styling */
}
.dealsummary__foot{
  display:flex;align-items:center;gap:10px;
  margin-top:4px;padding-top:10px;
  border-top:1px solid rgba(0,0,0,.06);
}
.dealsummary__verdict{
  display:inline-flex;align-items:center;
  font-family:var(--sans);
  font-weight:700;font-size:11px;letter-spacing:.18em;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#06231C;
  box-shadow:0 6px 12px -3px rgba(34,223,220,.5);
}
.dealsummary__hint{
  font-size:10px;letter-spacing:.14em;color:#7B7D78;
}

@media (max-width:760px){
  /* Taller container so the tiles can fan vertically instead of
     stacking on top of each other. Positions reset to a 2-column
     mosaic in the upper portion; summary anchors the bottom. */
  .dealtiles{ aspect-ratio:1 / 1.5; max-width:380px; }
  .dealtile--purchase{ top:0;     left:0;    right:auto; width:46%; }
  .dealtile--kitchen { top:3%;    left:auto; right:0;    width:40%; }
  .dealtile--bath    { top:27%;   left:8%;   right:auto; width:38%; }
  .dealtile--roof    { top:30%;   left:auto; right:6%;   width:30%; }
  .dealtile--holding { top:50%;   left:24%;  right:auto; width:36%; }
  .dealsummary{ width:78%; }
}

/* ---- 04 · KANBAN ---- */
.kanban{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(13,16,20,.5);
  overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
}
.kanban__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);
}
.kanban__live{
  display:inline-flex;align-items:center;gap:6px;color:var(--teal);
}
.kanban__live i{
  width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.kanban__cols{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  padding:14px;
}
.kanban__col{
  position:relative;
  display:flex;flex-direction:column;gap:8px;
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
  /* Sized to fit 3 cards (~86px each) + gaps + title + padding so
     the column never grows when a 3rd card lands. */
  min-height:318px;
}
.kanban__title{
  font-size:9.5px;letter-spacing:.18em;
  color:var(--ink-3);
  margin:0 0 4px;font-weight:600;
  position:relative;z-index:2;
}
/* Three permanent ghost slots — sit behind the cards as a fixed
   3-row track so the column height stays constant whether the
   slots are filled or empty. */
.kanban__slots{
  position:absolute;
  top:34px;left:10px;right:10px;bottom:10px;
  display:flex;flex-direction:column;gap:8px;
  z-index:0;
  pointer-events:none;
}
.kanban__slot{
  flex:1;
  min-height:60px;
  border:1px dashed rgba(255,255,255,.06);
  border-radius:8px;
}
.kanban__card{
  position:relative;
  z-index:1;
  display:flex;flex-direction:column;gap:5px;
  padding:11px 12px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.kanban__card strong{
  font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em;
}
.kanban__card span{ font-size:11px;color:var(--ink-3); }
.kanban__card--ghost{
  background:transparent;
  border-style:dashed;
  border-color:rgba(255,255,255,.06);
  height:48px;
}
.kanban__card--active{
  border-color:rgba(139,201,238,.35);
  background:rgba(139,201,238,.06);
}
.kanban__card--won{
  border-color:rgba(34,237,182,.35);
  background:rgba(34,237,182,.06);
}
.kanban__chip{
  align-self:flex-start;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:var(--ink-2);
  margin-top:2px;
}
.kanban__chip--hot{ background:rgba(34,223,220,.12);color:var(--teal);border-color:rgba(34,223,220,.35); }
.kanban__chip--blue{ background:rgba(139,201,238,.12);color:var(--blue);border-color:rgba(139,201,238,.35); }
.kanban__chip--won{ background:rgba(34,237,182,.12);color:#22EDB6;border-color:rgba(34,237,182,.35); }
/* On mobile the kanban columns are narrow enough that chips wrap to
   2-3 lines. The 999px pill radius made the wrapped chips look like
   ovals/circles. Drop to a subtle rounded rectangle so they read as
   tags rather than buttons. */
@media (max-width:760px){
  .kanban__chip{ border-radius:6px; }
}

/* ---- 05 · POSTCARD FAN ---- */
.postcards{
  position:relative;
  margin:60px auto 0;
  width:100%;
  max-width:680px;
  height:380px;
  isolation:isolate;
  /* Postcards rotate +/-7deg and translate by up to 26px; clip
     their bounding box so they never push the viewport wider. */
  overflow:hidden;
}
@media (max-width:760px){ .postcards{ height:420px; } }
.postcard{
  position:absolute;
  inset:0;
  margin:auto;
  width:560px;height:340px;
  border-radius:14px;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:
    0 30px 50px -20px rgba(20,30,40,.25),
    0 12px 22px -8px rgba(20,30,40,.15);
  padding:22px 26px;
  display:flex;flex-direction:column;gap:14px;
  transform-origin:center bottom;
  transition:transform .9s cubic-bezier(.65, 0, .35, 1);
  will-change:transform;
}
@media (max-width:760px){ .postcard{ width:90%;height:auto;min-height:300px; } }

/* Position-driven stack — three slots that the cards rotate through. */
.postcard[data-position="1"]{
  transform:rotate(-1deg);
  z-index:3;
}
.postcard[data-position="2"]{
  transform:rotate(3deg) translate(18px, 6px);
  z-index:2;
}
.postcard[data-position="3"]{
  transform:rotate(-7deg) translate(-26px, 14px);
  z-index:1;
}

/* Swoop-out animation — front card lifts up and around, lands at
   the back position. End-keyframe matches data-position="3" so the
   handoff back to position-driven CSS is jump-free. */
.postcard.is-swooping{
  z-index:5;
  animation:postcardSwoop 1.2s cubic-bezier(.65, 0, .35, 1) forwards;
  pointer-events:none;
}
@keyframes postcardSwoop{
  0%   { transform:rotate(-1deg) translate(0,0) scale(1); }
  30%  { transform:rotate(10deg) translate(120px,-90px) scale(1.05); }
  55%  { transform:rotate(-8deg) translate(140px,-180px) scale(1.02); }
  80%  { transform:rotate(-22deg) translate(-10px,-110px) scale(.94); }
  100% { transform:rotate(-7deg) translate(-26px, 14px) scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .postcard.is-swooping{ animation:none; }
}

/* ---- Variant A · Cash Offer ---- */
.postcard--a{
  background:#FFFFFF;
}
.postcard--a .postcard__copy strong{
  font-size:22px;font-weight:700;color:#0E0F12;letter-spacing:-.015em;line-height:1.15;
}

/* ---- Variant B · Quick Sale (full-width hero on top) ---- */
.postcard--b{
  background:linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%);
}
.postcard--b .postcard__band{ color:#B45309; }
.postcard__b-hero{
  flex:0 0 auto;
  height:120px;
  border-radius:8px;
  background:
    radial-gradient(60% 100% at 80% 0%, rgba(255,180,80,.55), transparent 60%),
    linear-gradient(135deg, #F19B3F 0%, #E26E5C 60%, #B045A2 100%);
}
.postcard__b-body{
  display:flex;flex-direction:column;gap:6px;
  margin-top:2px;
}
.postcard__b-body strong{
  font-size:30px;font-weight:700;color:#0E0F12;letter-spacing:-.025em;line-height:1.05;
}
.postcard__b-body span{ font-size:13px;color:#3F4146; }
.postcard__b-foot{
  margin-top:auto;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
}
.postcard__b-url{
  font-style:normal;font-weight:700;
  color:#B45309;
  font-family:var(--mono);
  font-size:14px;letter-spacing:.04em;
}

/* ---- Variant C · Landlord Exit (copy-heavy, no image) ---- */
.postcard--c{
  background:linear-gradient(180deg, #FBF7EE 0%, #F3E9D6 100%);
}
.postcard--c .postcard__band{ color:#7A4A2A; }
.postcard__c-body{
  flex:1;
  display:flex;flex-direction:column;gap:12px;
  justify-content:center;
}
.postcard__c-tag{
  font-size:10px;letter-spacing:.18em;color:#9C6B3F;
  align-self:flex-start;
  padding:4px 10px;border-radius:999px;
  background:rgba(154,107,63,.12);
  border:1px solid rgba(154,107,63,.3);
}
.postcard__c-body strong{
  font-size:34px;font-weight:700;color:#3D2818;letter-spacing:-.025em;line-height:1.05;
  font-family:var(--serif, Georgia), serif;
}
.postcard__c-rule{
  height:2px;
  width:48px;
  background:linear-gradient(90deg, #B45309, #C2410C);
}
.postcard__c-body em{
  font-style:normal;
  font-size:14px;
  color:#3D2818;
  font-weight:500;
  line-height:1.5;
}
.postcard__c-yes{
  font-weight:700;
  color:#B45309;
  letter-spacing:.04em;
}
.postcard__addr--simple{
  border-top:1px solid rgba(0,0,0,.08);
}
.postcard__band{
  font-size:9.5px;letter-spacing:.16em;color:#7B7D78;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(0,0,0,.08);
}
.postcard__hero{
  flex:0 0 auto;
  height:90px;
  border-radius:8px;
  background:
    radial-gradient(60% 100% at 80% 0%, rgba(34,223,220,.45), transparent 60%),
    linear-gradient(120deg, #DCE2E8 0%, #B5D2EB 50%, #82BCE5 100%);
}
.postcard__hero--alt{
  background:linear-gradient(135deg, #F19B3F 0%, #E26E5C 60%, #B045A2 100%);
}
.postcard__hero--main{
  flex:0 0 auto;
  width:160px;height:100px;
}
.postcard__row{ display:flex;gap:18px;align-items:stretch; }
.postcard__copy{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;
}
.postcard__copy strong{
  font-size:22px;font-weight:700;color:#0E0F12;letter-spacing:-.015em;
  line-height:1.15;
}
.postcard__copy span{ font-size:13px;color:#3F4146; }
.postcard__cta{
  margin-top:6px;
  font-style:normal;font-weight:700;
  color:#0F8C8A;
  font-family:var(--mono);
  font-size:14px;letter-spacing:.04em;
}
.postcard__lines{
  margin-top:auto;
  display:flex;flex-direction:column;gap:6px;
}
.postcard__lines i{ height:6px;border-radius:3px;background:rgba(0,0,0,.07);display:block; }
.postcard__lines i:nth-child(1){ width:80%; }
.postcard__lines i:nth-child(2){ width:95%; }
.postcard__lines i:nth-child(3){ width:60%; }
.postcard__addr{
  margin-top:auto;
  display:flex;flex-direction:column;gap:2px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:12px;color:#3F4146;line-height:1.45;
}
.postcard__to{ font-size:10px;color:#7B7D78;letter-spacing:.14em; }
.postcard__stamp{
  position:absolute;
  top:18px;right:22px;
  width:42px;height:50px;
  border:1.5px dashed rgba(0,0,0,.18);
  border-radius:4px;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(34,223,220,.18), transparent 70%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 4px, transparent 4px 8px);
}

/* ---- 06 · SKIP TRACE CARD ---- */
.skip-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(13,16,20,.6);
  padding:18px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
}
.skip-card__head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.skip-card__pulse{ display:inline-flex;align-items:center;gap:6px;color:var(--teal); }
.skip-card__pulse i{
  width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.skip-card__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:0;
}
.skip-card__row{
  display:grid;
  grid-template-columns:1.1fr 1.4fr auto;
  gap:14px;align-items:center;
  padding:14px 4px;
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.skip-card__row:last-child{ border-bottom:0; }
.skip-card__row > div:first-child{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.skip-card__row strong{ font-size:14px;color:var(--ink);font-weight:600;letter-spacing:-.005em; }
.skip-card__row > div:first-child > .mono{ font-size:11px;color:var(--ink-3);letter-spacing:.04em; }
.skip-card__contact{
  display:flex;flex-direction:column;gap:3px;
  font-size:13px;color:var(--ink-2);
  min-width:0;
}
.skip-card__field{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--ink-2);
}
.skip-card__field em{
  font-style:normal;
  color:var(--teal);
  font-weight:600;
  font-size:12.5px;
}
.skip-card__field--blank{
  font-style:italic;
  color:var(--ink-3);
  font-size:12px;
}
.skip-card__pill{
  font-size:9.5px;letter-spacing:.14em;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--ink-3);
  font-weight:600;
}
.skip-card__pill--ok{
  color:#22EDB6;border-color:rgba(34,237,182,.4);background:rgba(34,237,182,.08);
}
.skip-card__pill--live{
  color:var(--teal);border-color:rgba(34,223,220,.4);background:rgba(34,223,220,.08);
}
.skip-card__row--matching{
  background:linear-gradient(90deg, rgba(34,223,220,.04), transparent);
}
.skip-card__foot{
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ============================================================
   CONTACT PAGE
============================================================ */
.contact-hero{ padding-bottom:80px; }
.contact-hero__photo{
  position:absolute;inset:-4%;
  background-image:url('assets/images/contact_Hero.webp');
  background-size:cover;
  background-position:center;
  filter:brightness(.55) saturate(.9) contrast(1.05);
  opacity:.5;
  animation:partnerHeroDrift 36s ease-in-out infinite alternate;
  will-change:transform;
}
.contact-hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 50% 35%, rgba(8,9,11,.30) 0%, rgba(8,9,11,.65) 70%, rgba(8,9,11,.92) 100%),
    linear-gradient(180deg, transparent 50%, rgba(8,9,11,.7) 85%, rgba(8,9,11,.95) 100%);
}
@media (prefers-reduced-motion:reduce){
  .contact-hero__photo{ animation:none; }
}

/* 3-tile contact strip below the hero split */
.contact-strip{
  list-style:none;margin:48px 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  opacity:0;
  transform:translateY(20px);
  animation:rise 1s var(--ease-out) .65s forwards;
}
@media (max-width:760px){ .contact-strip{ grid-template-columns:1fr; } }
.contact-strip__tile{
  display:flex;flex-direction:column;
  gap:6px;
  padding:22px 22px 20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) padding-box;
  background-color:rgba(13,16,20,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .35s ease, transform .5s var(--ease-out), box-shadow .35s ease;
}
.contact-strip__tile:hover{
  transform:translateY(-2px);
  border-color:rgba(34,223,220,.45);
  box-shadow:0 28px 50px -25px rgba(0,0,0,.7), 0 0 0 1px rgba(34,223,220,.25), 0 0 30px -8px rgba(34,223,220,.4);
}
.contact-strip__icon{
  display:inline-flex;width:36px;height:36px;
  border-radius:9px;
  background:linear-gradient(135deg, rgba(34,223,220,.18), rgba(139,201,238,.12));
  align-items:center;justify-content:center;
  color:var(--teal);
  margin-bottom:6px;
}
.contact-strip__label{
  font-size:9.5px;letter-spacing:.18em;color:var(--ink-3);
}
.contact-strip__value{
  font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  font-family:var(--mono);
}
.contact-strip__sub{
  font-size:12.5px;color:var(--ink-3);
  margin-top:auto;
}

/* Form section — split: copy/promises left, form card right */
.contact-form-section .ai-block__inner--split{ align-items:start; gap:64px; }

/* Routing card under the body copy on the left */
.contact-routing{
  margin-top:36px;
  padding:18px 20px;
  border-radius:12px;
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 24px -12px rgba(20,30,40,.12);
  display:flex;flex-direction:column;gap:6px;
}
.contact-routing__label{
  font-size:9.5px;letter-spacing:.16em;color:#0F8C8A;
  margin:0;
}
.contact-routing p{
  margin:0;
  font-size:13.5px;color:#3F4146;line-height:1.55;
}
.contact-routing__link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;
  font-size:14px;font-weight:600;
  color:#0F8C8A;
  text-decoration:none;
  letter-spacing:-.005em;
  transition:gap .25s ease, color .25s ease;
}
.contact-routing__link:hover{ gap:10px; color:#0E0F12; }
.contact-routing__link svg{ flex:0 0 auto; }

/* Form card */
.contact-form{
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:24px 24px 22px;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:0 30px 50px -20px rgba(20,30,40,.18);
}
.contact-form__head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:9.5px;letter-spacing:.16em;color:#7B7D78;
  padding-bottom:14px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.contact-form__live{
  display:inline-flex;align-items:center;gap:6px;color:#0F8C8A;
}
.contact-form__live i{
  width:7px;height:7px;border-radius:50%;background:#22DFDC;
  box-shadow:0 0 0 0 rgba(34,223,220,.55);
  animation:cardPulse 1.8s var(--ease-out) infinite;
}
.contact-form__row--two{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
@media (max-width:560px){ .contact-form__row--two{ grid-template-columns:1fr; } }
.contact-form__field{
  display:flex;flex-direction:column;gap:6px;
  font-size:11.5px;letter-spacing:.06em;color:#7B7D78;
}
.contact-form__field > span{
  display:flex;gap:4px;align-items:baseline;
}
.contact-form__field em{
  color:#C2410C;font-style:normal;font-weight:600;
}
.contact-form__field input,
.contact-form__field textarea{
  font:inherit;
  font-family:var(--sans);
  font-size:14px;letter-spacing:0;
  color:#0E0F12;
  background:#FCFAF4;
  border:1px solid rgba(0,0,0,.10);
  border-radius:8px;
  padding:11px 13px;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
}
.contact-form__field textarea{
  resize:vertical;
  min-height:110px;
  line-height:1.5;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder{
  color:#A4A6A1;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus{
  outline:none;
  border-color:rgba(34,223,220,.55);
  background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(34,223,220,.14);
}

/* Topic chip group — friendly alternative to a select */
.contact-form__topic{
  border:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.contact-form__topic legend{
  font-size:11.5px;letter-spacing:.06em;color:#7B7D78;
  padding:0;
}
.contact-form__chips{
  display:flex;flex-wrap:wrap;gap:8px;
}
.contact-form__chips label{
  position:relative;cursor:pointer;
}
.contact-form__chips input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.contact-form__chips span{
  display:inline-flex;align-items:center;
  font-size:13px;font-weight:500;color:#3F4146;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#FCFAF4;
  transition:all .25s ease;
}
.contact-form__chips label:hover span{
  border-color:rgba(34,223,220,.4);
  background:rgba(34,223,220,.05);
}
.contact-form__chips input:checked + span{
  border-color:rgba(34,223,220,.55);
  background:linear-gradient(180deg, rgba(34,223,220,.08), rgba(139,201,238,.05));
  color:#0E0F12;
  box-shadow:0 0 0 3px rgba(34,223,220,.10);
}
.contact-form__chips input:focus-visible + span{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

.contact-form__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
  margin-top:4px;
  flex-wrap:wrap;
}
.contact-form__assurance{
  font-size:10px;letter-spacing:.14em;color:#7B7D78;
}

/* Submit status row + success state (revealed after successful POST
   to /.netlify/functions/contact-submit). */
.contact-form__status{
  width:100%;
  margin:8px 0 0;
  font-size:11px;letter-spacing:.14em;
  color:#7B7D78;
}
.contact-form__status[data-state="error"]{
  color:#B83333;
  letter-spacing:0;text-transform:none;
  font-family:var(--sans);
  font-size:13px;
}
.contact-form__success{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:36px 28px;
}
.contact-form__success-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(34,223,220,.18), rgba(139,201,238,.10));
  border:1.5px solid rgba(34,223,220,.45);
  color:#0F8C8A;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  animation:applyCheckPop .5s var(--ease-out);
}
.contact-form__success h3{
  font-family:var(--sans);
  font-size:22px;font-weight:550;
  letter-spacing:-.02em;color:#0E0F12;
  margin:0 0 10px;
}
.contact-form__success p{
  font-size:14.5px;line-height:1.55;color:#3A3D38;
  max-width:380px;margin:0;
}

/* =================================================================
   WHO WE HELP PAGE
   Hero photo + audience index strip, then four audience sections
   (Brokerages, Educators, Tech Companies, Influencers). Each
   section composes the audience photo with a bespoke mock UI.
================================================================= */

/* ---- HERO ---- */
/* Who We Help skews the columns toward the headline (left) and
   pulls the right column up to share a baseline with the head — the
   page doesn't need a TOC strip below since each audience is a
   short scroll away, so the hero is compact and centered. */
.who-hero{ padding-bottom:120px; }
.who-hero .ai-hero__top{
  grid-template-columns:1.35fr .65fr;
  align-items:center;
}
@media (max-width:1020px){
  .who-hero .ai-hero__top{ grid-template-columns:1fr; }
}
.who-hero .ai-hero__title{ max-width:760px; }
/* Anchor the right-column content to the visual center of the
   headline. align-items:center on the grid only centers the cell —
   the actions flex column was top-aligning its own content. */
.who-hero .ai-hero__actions{
  height:100%;
  justify-content:center;
}
.who-hero__photo{
  position:absolute;inset:-4%;
  background-image:url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=2400&q=70');
  background-size:cover;
  background-position:center;
  filter:brightness(.55) saturate(.9) contrast(1.05);
  opacity:.5;
  animation:partnerHeroDrift 36s ease-in-out infinite alternate;
  will-change:transform;
}
.who-hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 50% 35%, rgba(8,9,11,.30) 0%, rgba(8,9,11,.65) 70%, rgba(8,9,11,.92) 100%),
    linear-gradient(180deg, transparent 50%, rgba(8,9,11,.7) 85%, rgba(8,9,11,.95) 100%);
}
@media (prefers-reduced-motion:reduce){
  .who-hero__photo{ animation:none; }
}

/* Audience index strip — 4 tiles, each a small thumbnail above the
   audience label. Mirrors .feat-index but with a photo, since the
   audiences are visual in a way that features aren't. */
.aud-index{
  list-style:none;margin:48px 0 0;padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  opacity:0;
  transform:translateY(20px);
  animation:rise 1s var(--ease-out) .65s forwards;
}
@media (max-width:880px){ .aud-index{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:460px){ .aud-index{ grid-template-columns:1fr; } }
.aud-index a{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px 12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(13,16,20,.55);
  backdrop-filter:blur(14px);
  color:var(--ink);
  text-decoration:none;
  transition:transform .4s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.aud-index a:hover{
  transform:translateY(-2px);
  border-color:rgba(34,223,220,.45);
  box-shadow:0 22px 40px -25px rgba(0,0,0,.7), 0 0 0 1px rgba(34,223,220,.25), 0 0 24px -8px rgba(34,223,220,.4);
}
.aud-index__photo{
  flex:none;
  width:48px;height:48px;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  background:#1A1E26;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.aud-index__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.95) contrast(1.02);
}
.aud-index__body{ display:flex;flex-direction:column;gap:2px;line-height:1.15; }
.aud-index__num{ font-size:9.5px;color:var(--ink-3);letter-spacing:.14em; }
.aud-index__label{
  font-size:14px;font-weight:600;color:var(--ink);
  letter-spacing:-.005em;
}

/* ---- Shared who-visual composition shell ---- */
/* The right (or left) column of an audience section. Stacks a
   photo tile with one or two floating mock-UI cards on top. */
.who-visual{
  position:relative;
  width:100%;
  min-height:520px;
  isolation:isolate;
}
@media (max-width:1020px){
  .who-visual{ min-height:580px; }
}
.who-visual__photo{
  position:absolute;
  margin:0;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.55);
}
.who-visual__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.who-visual__caption{
  position:absolute;
  left:18px;bottom:14px;
  font-size:10px;color:rgba(255,255,255,.7);
  letter-spacing:.14em;
  z-index:2;
}

/* ---- BROKERAGES: agent roster card ----
   Photo tile in the back-left, branded agent panel overlapping on
   the front-right. Reads as a partner-branded dashboard. */
.who-visual--brokerages{ min-height:560px; }
.who-visual__photo--brokerages{
  top:0;left:0;
  width:62%;height:340px;
}
.agent-roster{
  position:absolute;
  right:0;bottom:0;
  width:84%;
  background:#FFFFFF;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:
    0 50px 80px -40px rgba(20,24,36,.30),
    0 24px 40px -28px rgba(20,24,36,.20);
  overflow:hidden;
  z-index:2;
}
.agent-roster__head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background:linear-gradient(180deg, #FBFAF6 0%, #F2F0EA 100%);
}
.agent-roster__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:6px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#0A0B0F;font-size:12px;
}
.agent-roster__brand{
  font-weight:700;font-size:13px;letter-spacing:.06em;color:#0E0F12;
  flex:1;
}
.agent-roster__chip{
  font-size:9.5px;letter-spacing:.14em;
  color:#5A5C58;
  padding:4px 8px;border-radius:999px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.05);
}
.agent-roster__list{
  list-style:none;padding:6px 8px;margin:0;
}
.agent-row{
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;gap:12px;
  padding:10px 12px;
  border-radius:10px;
  transition:background .25s ease;
}
.agent-row + .agent-row{ border-top:1px solid rgba(0,0,0,.04); }
.agent-row.is-hot{
  background:linear-gradient(90deg, rgba(34,223,220,.10), rgba(139,201,238,.06));
  box-shadow:inset 0 0 0 1px rgba(34,223,220,.22);
  border-top-color:transparent;
}
.agent-row__avatar{
  width:36px;height:36px;border-radius:50%;
  overflow:hidden;
  background:#E8E5DA;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.agent-row__avatar img{ width:100%;height:100%;object-fit:cover;display:block; }
.agent-row__body{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.agent-row__name{ font-weight:600;font-size:13.5px;color:#0E0F12;letter-spacing:-.005em; }
.agent-row__meta{ font-size:9.5px;color:#7B7D78;letter-spacing:.14em; }
.agent-row.is-hot .agent-row__meta{ color:#0F8F8C; }
.agent-row__stat{ display:flex;flex-direction:column;align-items:flex-end;gap:2px; }
.agent-row__num{ font-weight:600;font-size:16px;color:#0E0F12;letter-spacing:-.01em; }
.agent-row.is-hot .agent-row__num{ color:#0F8F8C; }
.agent-row__lbl{ font-size:9px;color:#7B7D78;letter-spacing:.14em; }
.agent-roster__foot{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  padding:14px 18px;
  border-top:1px solid rgba(0,0,0,.06);
  background:#FAFAF7;
}
.agent-roster__foot > div{
  display:flex;flex-direction:column;gap:2px;
}
.agent-roster__foot .mono{ font-size:9px;color:#7B7D78;letter-spacing:.14em; }
.agent-roster__foot b{ font-size:14px;color:#0E0F12;font-weight:600;letter-spacing:-.01em; }

@media (max-width:1020px){
  .who-visual--brokerages{ min-height:auto; }
  .who-visual__photo--brokerages{
    position:relative;
    width:100%;height:240px;
    margin-bottom:-32px;
  }
  .agent-roster{
    position:relative;
    width:100%;
    right:auto;bottom:auto;
  }
}

/* ---- EDUCATORS: student wins feed ----
   Photo tile front-right, wins feed front-left overlapping the
   photo slightly. Cards inside the feed cycle every ~5s. */
.who-visual--educators{ min-height:560px; }
.who-visual__photo--educators{
  top:20px;right:0;
  width:58%;height:300px;
}
.wins-feed{
  position:absolute;
  left:0;bottom:0;
  width:80%;
  background:linear-gradient(180deg, #14171F 0%, #0F1218 100%);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 50px 80px -40px rgba(0,0,0,.7),
    0 24px 40px -28px rgba(0,0,0,.5);
  overflow:hidden;
  z-index:2;
}
.wins-feed__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}
.wins-feed__head .mono{
  font-size:10px;color:rgba(255,255,255,.7);letter-spacing:.14em;
}
.wins-feed__pulse{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;color:rgba(34,223,220,.9);letter-spacing:.14em;
  text-transform:uppercase;font-family:var(--mono);
}
.wins-feed__pulse i{
  width:7px;height:7px;border-radius:50%;
  background:#22DFDC;
  box-shadow:0 0 0 4px rgba(34,223,220,.15);
  animation:winsPulse 1.6s ease-in-out infinite;
}
@keyframes winsPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(34,223,220,.15); }
  50%   { box-shadow:0 0 0 8px rgba(34,223,220,.05); }
}
.wins-feed__list{
  list-style:none;padding:8px;margin:0;
  display:flex;flex-direction:column;gap:6px;
  /* Strict count cap: the list visible area never grows beyond 4
     cards. The cycler pre-trims the oldest before inserting the new
     one, so we don't need overflow tricks — but the explicit
     min/max-height locks it in case a 5th card transiently appears. */
  height:336px;
  min-height:336px;
  max-height:336px;
  overflow:hidden;
}
.wins-card{
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;gap:12px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  transition:transform .55s var(--ease-out), opacity .35s ease;
}
.wins-card.is-entering{
  animation:winsEnter .65s var(--ease-out) both;
}
.wins-card.is-leaving{
  animation:winsLeave .45s var(--ease-out) both;
}
@keyframes winsEnter{
  0%   { opacity:0; transform:translateY(-14px) scale(.97); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes winsLeave{
  0%   { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(10px); }
}
.wins-card__avatar{
  width:40px;height:40px;border-radius:50%;
  overflow:hidden;
  background:#1A1E26;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.wins-card__avatar img{ width:100%;height:100%;object-fit:cover;display:block; }
.wins-card__body{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.wins-card__name{ font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:-.005em; }
.wins-card__line{ font-size:12px;color:rgba(255,255,255,.65); }
.wins-card__meta{ font-size:9px;color:rgba(255,255,255,.42);letter-spacing:.14em;margin-top:1px; }
.wins-card__stat{ display:flex;flex-direction:column;align-items:flex-end;gap:2px; }
.wins-card__amount{
  font-weight:600;font-size:15px;letter-spacing:-.01em;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wins-card__when{ font-size:9px;color:rgba(255,255,255,.42);letter-spacing:.14em; }

@media (max-width:1020px){
  .who-visual--educators{ min-height:auto; }
  .who-visual__photo--educators{
    position:relative;
    width:100%;height:220px;
    top:auto;right:auto;
    margin-bottom:-24px;
  }
  .wins-feed{
    position:relative;
    width:100%;
    left:auto;bottom:auto;
  }
}

/* ---- TECH COMPANIES: photo banner + 3-card module rack ----
   Photo banner spans the full container width, matching the
   modrack grid below it. 2:1 ratio so the image reads as a
   cinematic header rather than a thin strip. */
.who-visual__photo--tech{
  position:relative;
  margin:48px 0 0;
  display:block;
  width:100%;
  aspect-ratio:2 / 1;
  height:auto;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(20,24,36,.25);
}
.who-visual__photo--tech img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.95);
}
.who-visual__photo--tech .who-visual__caption{
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  left:22px;bottom:18px;
  font-size:11px;
}
.who-visual__photo--tech::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,10,14,.55) 100%);
  pointer-events:none;
}

.modrack{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:36px;
}
@media (max-width:960px){ .modrack{ grid-template-columns:1fr; } }
.modrack__card{
  background:#FFFFFF;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  padding:24px;
  box-shadow:0 24px 50px -38px rgba(20,24,36,.30);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease;
}
.modrack__card:hover{
  transform:translateY(-3px);
  border-color:rgba(34,223,220,.32);
  box-shadow:0 30px 60px -38px rgba(20,24,36,.35), 0 0 0 1px rgba(34,223,220,.18);
}
.modrack__card--feature{
  background:linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
  border-color:rgba(34,223,220,.32);
  box-shadow:
    0 0 0 1px rgba(34,223,220,.20),
    0 30px 60px -38px rgba(20,24,36,.30),
    0 0 32px -8px rgba(34,223,220,.20);
}
.modrack__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.modrack__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg, rgba(34,223,220,.16), rgba(139,201,238,.10));
  color:#0F8F8C;
}
.modrack__chip{
  font-size:9.5px;letter-spacing:.14em;color:#5A5C58;
  padding:4px 8px;border-radius:999px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.05);
}
.modrack__chip--feature{
  color:#0F8F8C;
  background:rgba(34,223,220,.10);
  border-color:rgba(34,223,220,.30);
}
.modrack__title{
  font-size:18px;font-weight:600;color:#0E0F12;letter-spacing:-.01em;
  margin:0;
}
.modrack__copy{
  font-size:14px;line-height:1.55;color:#3A3D38;
  margin:0;
}
.modrack__bullets{
  list-style:none;padding:0;margin:6px 0 0;
  display:flex;flex-direction:column;gap:6px;
  font-size:10px;letter-spacing:.14em;color:#5A5C58;
}
.modrack__bullets li{ display:flex;align-items:center;gap:8px; }
.modrack__dot{
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--blue));
}

/* Tech outcomes strip — closes the section with a different visual
   shape than the cards above. No boxes, no icons; just three short
   mono-labelled lines separated by hairlines so the page reads as
   "what plugs in (cards) / what it does for you (this row)". */
.tech-outcomes{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:28px;
}
@media (max-width:900px){
  .tech-outcomes{ grid-template-columns:1fr; padding-top:18px; }
}
.tech-outcomes__item{
  display:flex;flex-direction:column;gap:10px;
  padding:0 28px;
  border-left:1px solid rgba(0,0,0,.08);
}
.tech-outcomes__item:first-child{ border-left:0; padding-left:0; }
.tech-outcomes__item:last-child{ padding-right:0; }
@media (max-width:900px){
  .tech-outcomes__item{
    border-left:0;
    padding:14px 0;
    border-top:1px solid rgba(0,0,0,.06);
  }
  .tech-outcomes__item:first-child{ border-top:0; padding-top:0; }
}
.tech-outcomes__kicker{
  font-size:10px;color:#5A5C58;letter-spacing:.14em;
}
.tech-outcomes__copy{
  margin:0;
  font-size:15px;line-height:1.55;color:#0E0F12;
  letter-spacing:-.005em;
  max-width:320px;
}

/* ---- INFLUENCERS: photo + branded phone + audience funnel ---- */
.who-visual--influencers{ min-height:600px; }
.who-visual__photo--influencers{
  top:0;right:0;
  width:55%;height:340px;
}
.who-visual__photo--influencers::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,10,14,.6) 100%);
  pointer-events:none;
}

/* Phone frame — rounded rect with notch + screen filled by a tiny
   branded-app mock. Sized to read as "social-feed phone preview". */
.phone-mock{
  position:absolute;
  left:0;top:60px;
  width:230px;
  z-index:3;
}
.phone-mock__frame{
  position:relative;
  border-radius:34px;
  padding:10px;
  background:linear-gradient(180deg, #1A1E26 0%, #0F1218 100%);
  box-shadow:
    0 40px 70px -30px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone-mock__notch{
  position:absolute;
  top:14px;left:50%;transform:translateX(-50%);
  width:80px;height:18px;
  border-radius:0 0 12px 12px;
  background:#0A0B0F;
  z-index:2;
}
.phone-mock__screen{
  border-radius:26px;
  overflow:hidden;
  background:#0F1218;
  aspect-ratio:9 / 18;
  padding:32px 14px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.phone-app{ display:flex;flex-direction:column;gap:10px;height:100%; }
.phone-app__head{
  display:flex;align-items:center;gap:8px;
  padding:0 4px;
}
.phone-app__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:5px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#0A0B0F;font-size:11px;
}
.phone-app__brand{
  font-size:10.5px;font-weight:700;color:var(--ink);letter-spacing:.06em;
}
.phone-app__hero{
  background:linear-gradient(180deg, rgba(34,223,220,.12) 0%, rgba(139,201,238,.05) 100%);
  border:1px solid rgba(34,223,220,.20);
  border-radius:12px;
  padding:14px;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
}
.phone-app__kicker{
  font-size:8.5px;color:rgba(255,255,255,.6);letter-spacing:.14em;
}
.phone-app__score{
  font-size:38px;line-height:1;font-weight:600;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.02em;
}
.phone-app__sub{
  font-size:8.5px;color:rgba(255,255,255,.55);letter-spacing:.14em;
}
.phone-app__row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  font-size:11px;color:var(--ink);
}
.phone-app__row span{
  flex:1;
  height:6px;
  border-radius:4px;
  background:rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.phone-app__row span::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:60%;border-radius:4px;
  background:linear-gradient(90deg, rgba(34,223,220,.6), rgba(139,201,238,.4));
}
.phone-app__row:nth-child(4) span::before{ width:46%; }
.phone-app__row:nth-child(5) span::before{ width:72%; }
.phone-app__row b{
  font-size:11px;font-weight:600;color:var(--ink);
}
.phone-app__cta{
  margin-top:auto;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#0A0B0F;
  font-weight:600;font-size:12px;letter-spacing:-.005em;
  padding:10px 0;border-radius:10px;border:0;
  font-family:var(--sans);
  cursor:default;
}

/* Audience funnel card — overlapping behind/beside the phone */
.funnel-card{
  position:absolute;
  right:0;bottom:0;
  width:62%;
  background:linear-gradient(180deg, #14171F 0%, #0F1218 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  box-shadow:0 40px 70px -40px rgba(0,0,0,.7);
  z-index:2;
}
.funnel-card__head{
  font-size:10px;color:rgba(255,255,255,.6);letter-spacing:.14em;
  margin-bottom:12px;
}
.funnel-card__row{
  display:grid;
  grid-template-columns:90px 1fr 56px;
  align-items:center;gap:10px;
  padding:8px 0;
}
.funnel-card__row + .funnel-card__row{ border-top:1px solid rgba(255,255,255,.05); }
.funnel-card__lbl{ font-size:9.5px;color:rgba(255,255,255,.5);letter-spacing:.14em; }
.funnel-card__bar{
  display:block;height:6px;border-radius:4px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.funnel-card__bar i{
  display:block;height:100%;
  border-radius:4px;
  background:linear-gradient(90deg, rgba(139,201,238,.5), rgba(34,223,220,.85));
}
.funnel-card__row--accent .funnel-card__bar i{
  background:linear-gradient(90deg, var(--blue), var(--teal));
  box-shadow:0 0 12px rgba(34,223,220,.4);
}
.funnel-card__val{
  font-size:13px;font-weight:600;color:var(--ink);text-align:right;letter-spacing:-.005em;
}
.funnel-card__row--accent .funnel-card__val{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.funnel-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.funnel-card__foot .mono{ font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.14em; }
.funnel-card__foot strong{
  font-size:18px;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

@media (max-width:1020px){
  /* Mobile: photo on top, funnel card full-width below. The phone
     mock duplicates content the audience-funnel card already
     covers, so it's hidden here to free up vertical room and let
     the funnel breathe at full width. */
  .who-visual--influencers{
    min-height:auto;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .who-visual__photo--influencers{
    position:relative;
    width:100%;height:220px;
    top:auto;right:auto;
  }
  .phone-mock{ display:none; }
  .funnel-card{
    position:relative;
    width:100%;
    right:auto;bottom:auto;
    padding:22px;
  }
  /* Bigger numbers and roomier rows now that the funnel has the
     full width to work with. */
  .funnel-card__head{ font-size:11px;margin-bottom:14px; }
  .funnel-card__row{ padding:11px 0; }
  .funnel-card__val{ font-size:15px; }
  .funnel-card__foot strong{ font-size:22px; }
}

/* The Educators section's grid-bg cube SVG inherits the visual
   treatment from .ai-block--grid up top — we just need to extend
   the modifier list so .who-block--educators picks it up. */

/* =================================================================
   APPLY-NOW MODAL
   Multi-step questionnaire that opens when any [data-open-apply]
   trigger is clicked. Same layered overlay pattern as the mobile
   nav: fixed full-viewport with a blurred backdrop, then a dark
   glass card that fades + lifts in. Form lives inside; slides
   between steps via translateX.
================================================================= */
.apply-modal{
  position:fixed;
  inset:0;
  z-index:210;
  pointer-events:none;
  visibility:hidden;
  transition:visibility 0s linear .45s;
}
body.apply-open{ overflow:hidden; }
body.apply-open .apply-modal{
  pointer-events:auto;
  visibility:visible;
  transition:visibility 0s linear 0s;
}

.apply-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(6,7,10,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .35s var(--ease-out);
}
body.apply-open .apply-modal__backdrop{ opacity:1; }

.apply-modal__card{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%, calc(-50% + 18px)) scale(.985);
  width:min(640px, calc(100vw - 32px));
  max-height:min(86vh, 820px);
  background:linear-gradient(180deg, #14171F 0%, #0B0D13 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,.8),
    0 0 0 1px rgba(34,223,220,.08),
    0 0 80px -12px rgba(34,223,220,.18);
  display:flex;flex-direction:column;
  overflow:hidden;
  opacity:0;
  transition:opacity .35s var(--ease-out), transform .45s cubic-bezier(.4, 0, .2, 1);
}
body.apply-open .apply-modal__card{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

/* ---- top progress bar ---- */
.apply-modal__progress{
  position:relative;
  height:3px;
  background:rgba(255,255,255,.05);
  flex:none;
}
.apply-modal__progress-bar{
  position:absolute;
  left:0;top:0;bottom:0;
  width:25%;
  background:linear-gradient(90deg, var(--teal), var(--blue));
  box-shadow:0 0 12px rgba(34,223,220,.5);
  border-radius:0 3px 3px 0;
  transition:width .5s cubic-bezier(.4, 0, .2, 1);
}

/* ---- header ---- */
.apply-modal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px 0;
  flex:none;
}
.apply-modal__step{
  font-family:var(--mono);
  font-size:10px;
  color:rgba(255,255,255,.5);
  letter-spacing:.16em;
}
.apply-modal__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:transparent;color:var(--ink);
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.apply-modal__close:hover{
  border-color:rgba(34,223,220,.4);
  background:rgba(34,223,220,.05);
  color:var(--teal);
}

/* ---- scrolling content area ---- */
.apply-modal__viewport{
  position:relative;
  flex:1 1 auto;
  overflow-y:auto;
  padding:8px 28px 24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
}
.apply-modal__viewport::-webkit-scrollbar{ width:6px; }
.apply-modal__viewport::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);border-radius:3px;
}

/* ---- slide ---- */
.apply-slide{
  display:none;
  animation:applySlideIn .45s var(--ease-out);
}
.apply-slide.is-active{ display:block; }
.apply-slide.is-leaving{
  animation:applySlideOut .25s var(--ease-out) both;
}
@keyframes applySlideIn{
  from{ opacity:0; transform:translateX(20px); }
  to  { opacity:1; transform:translateX(0); }
}
@keyframes applySlideOut{
  from{ opacity:1; transform:translateX(0); }
  to  { opacity:0; transform:translateX(-20px); }
}
.apply-slide__title{
  font-family:var(--sans);
  font-size:clamp(24px, 2.4vw, 32px);
  font-weight:550;
  letter-spacing:-.025em;
  line-height:1.1;
  color:var(--ink);
  margin:6px 0 28px;
}

/* ---- field group ---- */
.apply-field{
  display:flex;flex-direction:column;
  gap:8px;
  margin-bottom:22px;
}
/* The .apply-field rule's `display:flex` has the same specificity
   as the browser default `[hidden] { display:none }`, so without
   this explicit override the `hidden` attribute had no visual
   effect on conditional fields. */
.apply-field[hidden]{ display:none; }
.apply-field__label{
  font-size:13.5px;
  color:rgba(255,255,255,.85);
  letter-spacing:-.005em;
  line-height:1.45;
}
.apply-field__label .req{
  color:var(--teal);
  margin-left:2px;
}
.apply-field__hint{
  font-size:11.5px;
  color:rgba(255,255,255,.45);
  font-style:italic;
  margin-top:-2px;
}
.apply-field__error{
  font-size:11.5px;
  color:#FF8B8B;
  margin-top:2px;
  display:none;
}
.apply-field.has-error .apply-field__error{ display:block; }

/* text-y inputs */
.apply-input,
.apply-textarea{
  font-family:var(--sans);
  font-size:14.5px;
  color:var(--ink);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:11px 14px;
  width:100%;
  outline:none;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.apply-input::placeholder,
.apply-textarea::placeholder{
  color:rgba(255,255,255,.30);
}
.apply-input:hover,
.apply-textarea:hover{
  border-color:rgba(255,255,255,.18);
}
.apply-input:focus,
.apply-textarea:focus{
  border-color:rgba(34,223,220,.55);
  background:rgba(34,223,220,.04);
  box-shadow:0 0 0 3px rgba(34,223,220,.12);
}
.apply-textarea{
  min-height:88px;
  resize:vertical;
  line-height:1.5;
}
.apply-field.has-error .apply-input,
.apply-field.has-error .apply-textarea{
  border-color:rgba(255,139,139,.55);
  box-shadow:0 0 0 3px rgba(255,139,139,.10);
}

/* radio + checkbox stacks (visually identical, just behavior differs) */
.apply-choices{
  display:flex;flex-direction:column;
  gap:8px;
}
.apply-choice{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease;
}
.apply-choice:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
}
.apply-choice input{
  flex:none;
  width:18px;height:18px;
  margin:1px 0 0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.30);
  cursor:pointer;
  position:relative;
  transition:border-color .25s ease, background .25s ease;
}
.apply-choice input[type="radio"]{ border-radius:50%; }
.apply-choice input[type="checkbox"]{ border-radius:5px; }
.apply-choice input:checked{
  border-color:var(--teal);
  background:var(--teal);
}
.apply-choice input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;
  background:#0A0B0F;
}
.apply-choice input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-58%) rotate(45deg);
  width:5px;height:9px;
  border:solid #0A0B0F;
  border-width:0 2px 2px 0;
}
.apply-choice:has(input:checked){
  border-color:rgba(34,223,220,.45);
  background:linear-gradient(90deg, rgba(34,223,220,.08), rgba(139,201,238,.04));
}
.apply-choice__label{
  font-size:14px;
  color:var(--ink);
  line-height:1.4;
}

/* ---- footer ---- */
.apply-modal__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:18px 28px 22px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);
  flex:none;
}
.apply-modal__foot .apply-step-dots{
  display:flex;align-items:center;gap:6px;
  flex:1;justify-content:center;
}
.apply-step-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.15);
  transition:background .35s ease, transform .35s ease;
}
.apply-step-dot.is-active{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  transform:scale(1.4);
  box-shadow:0 0 8px rgba(34,223,220,.5);
}
.apply-step-dot.is-done{
  background:rgba(34,223,220,.45);
}
.apply-btn{
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:550;
  letter-spacing:-.005em;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
  transition:all .25s ease;
}
.apply-btn:hover:not(:disabled){
  border-color:rgba(34,223,220,.45);
  color:var(--teal);
}
.apply-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.apply-btn--primary{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#0A0B0F;
  border-color:transparent;
  box-shadow:0 6px 18px -6px rgba(34,223,220,.5);
}
.apply-btn--primary:hover:not(:disabled){
  color:#0A0B0F;
  transform:translateY(-1px);
  box-shadow:0 10px 24px -6px rgba(34,223,220,.6);
}
.apply-btn svg{ width:14px;height:14px; }

/* ---- success state ---- */
.apply-success{
  text-align:center;
  padding:40px 20px 24px;
}
.apply-success__icon{
  width:64px;height:64px;
  margin:0 auto 24px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(34,223,220,.18), rgba(139,201,238,.10));
  border:1.5px solid rgba(34,223,220,.45);
  color:var(--teal);
  animation:applyCheckPop .5s var(--ease-out);
}
@keyframes applyCheckPop{
  from{ transform:scale(.6); opacity:0; }
  to  { transform:scale(1); opacity:1; }
}
.apply-success__title{
  font-family:var(--sans);
  font-size:24px;font-weight:550;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 12px;
}
.apply-success__copy{
  font-size:14.5px;
  color:rgba(255,255,255,.65);
  line-height:1.6;
  max-width:380px;
  margin:0 auto;
}

/* ---- mobile ---- */
@media (max-width:520px){
  .apply-modal__card{
    width:100vw;
    /* 100vh on Android Chrome includes the area behind the system
       nav bar, which pushes the footer (Next button) off-screen.
       dvh respects the actual visible viewport. The 100vh line is
       a fallback for browsers that don't support dvh. */
    height:100vh;
    height:100dvh;
    max-height:100vh;
    max-height:100dvh;
    border-radius:0;
    left:0;top:0;
    transform:translateY(20px) scale(1);
  }
  body.apply-open .apply-modal__card{
    transform:translateY(0) scale(1);
  }
  .apply-modal__head{ padding:14px 18px 0; }
  .apply-modal__viewport{ padding:8px 18px 18px; }
  /* env(safe-area-inset-bottom) pads under the home indicator /
     gesture bar so the Next button stays comfortably above it. */
  .apply-modal__foot{
    padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .apply-slide__title{ font-size:22px;margin-bottom:22px; }
}

@media (prefers-reduced-motion:reduce){
  .apply-modal__card{ transition:none; }
  .apply-slide,
  .apply-slide.is-leaving{ animation:none; }
}