/* ══════════════════════════════════════════════════════════════════════
   TAVVLO HOME HERO — Attio hero structure, Tavvlo content

   A direct port of the hero in attio-recreation/dist/index.html. Layout,
   spacing, type scale, colour ramp and motion curves are the source's; the
   copy, the links and the three satellite windows are Tavvlo's.

   Written as plain CSS rather than shipping the source's Tailwind bundle:
   that bundle carries a preflight reset which would strip the Webflow
   stylesheet driving this site's nav and footer. Every rule below is scoped
   under #tvah-hero and every class carries a tvah- prefix, so the two
   systems cannot reach each other.

   Values are resolved from the source's design tokens
   (chunks/2u932smwr0yu_.css) and its utility definitions; the motion
   constants come from the hero component in chunks/2shk5swxjbjat.js.
   ══════════════════════════════════════════════════════════════════════ */

#tvah-hero{
  /* ── palette (source: :root token block) ───────────────────────── */
  --tvah-white-100:#fff;
  --tvah-white-200:#fafafb;
  --tvah-white-300:#f3f4f6;
  --tvah-white-400:#edeff3;
  --tvah-white-500:#e4e7ec;
  --tvah-white-700:#d3d8df;
  --tvah-white-800:#cad0d9;
  --tvah-white-900:#b5bdc9;
  --tvah-black-0:#000;
  --tvah-black-50:#101010;
  --tvah-black-100:#1c1d1f;
  --tvah-black-200:#202124;
  --tvah-black-300:#232529;
  --tvah-black-400:#2e3238;
  --tvah-black-500:#383e47;
  --tvah-black-600:#505967;
  --tvah-black-700:#6f7988;
  --tvah-black-800:#8f99a8;
  --tvah-black-900:#a4adba;
  --tvah-red-500:#ff5b59;
  --tvah-yellow-500:#f5b900;
  --tvah-green-500:#0fc27b;
  --tvah-blue-500:#266df0;

  /* Hero fade, in Tavvlo green. The source's ramp is blue — #e6ecff,
     #bccbff, #86a0ee. These are those exact three stops converted to OKLCH
     with their lightness and chroma left untouched and only the hue rotated
     onto the brand green (--accent-neon #88ef56, hue 137°), so the fade
     keeps the source's tonal weight: same steps between stops, same
     contrast against the white radial sitting over it. All three land
     inside sRGB, so nothing was clipped to get there. */
  --tvah-fade-1:#e5f1e0;
  --tvah-fade-2:#b7d9a9;
  --tvah-fade-3:#80b56a;

  /* semantic aliases */
  --tvah-primary-background:var(--tvah-white-100);
  --tvah-weak-stroke:var(--tvah-white-400);
  --tvah-subtle-stroke:var(--tvah-white-500);
  --tvah-default-stroke:var(--tvah-white-700);
  --tvah-primary-foreground:var(--tvah-black-100);
  --tvah-secondary-foreground:var(--tvah-black-300);
  --tvah-tertiary-foreground:var(--tvah-black-600);
  --tvah-accent-foreground:var(--tvah-black-700);

  /* Stands in for the source's --site-header-height. This site's header is
     the 48px announcement strip plus the 68px nav row; dismissing the strip
     drops it to the nav alone, and the hero's sticky offsets have to follow
     or the headline pins behind the logo. */
  --tvah-header:116px;
  /* The nav row alone. Unlike the source's header, this site's nav is
     position:absolute and overlays the top of the hero, so the section
     begins level with the announcement strip rather than below the whole
     header. Left alone, the headline's flow position would then sit ABOVE
     its own sticky offset, and at rest the sticky constraint would shove it
     down by exactly this much — closing the air between the buttons and the
     window that the composition is supposed to open with. Padding the
     section by the overlapping row puts the headline's flow position back
     on --tvah-header, which is where the source starts it. */
  --tvah-navrow:68px;

  /* ── motion constants (source: module 50457) ───────────────────── */
  --tvah-ease-reveal:cubic-bezier(0,0,.58,1);
  --tvah-ease-ui:cubic-bezier(.33,1,.68,1);
  --tvah-ease-in-out:cubic-bezier(.2,0,0,1);

  /* Five-step product shadow, not one big blur — that is what keeps the
     windows sitting on the page instead of floating over it. */
  --tvah-shadow-window:
    0 0 0 1px rgba(11,13,24,.06),
    0 1px 2px rgba(11,13,24,.025),
    0 3px 6px rgba(11,13,24,.03),
    0 8px 14px rgba(11,13,24,.035),
    0 16px 28px rgba(11,13,24,.04);
  /* Deeper, and thrown further, for the window currently being dragged. */
  --tvah-shadow-drag:
    0 0 0 1px rgba(11,13,24,.06),
    0 2px 5px rgba(11,13,24,.03),
    0 6px 14px rgba(11,13,24,.04),
    0 16px 32px rgba(11,13,24,.05),
    0 28px 52px rgba(11,13,24,.06);

  position:relative;
  padding-top:var(--tvah-navrow);
  border-bottom:1px solid var(--tvah-subtle-stroke);
  background-color:var(--tvah-primary-background);
  color:var(--tvah-primary-foreground);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* The strip shrinks to 44px below this width, so the header does too. */
@media (max-width:640px){ #tvah-hero{--tvah-header:112px} }
/* Higher specificity than either rule above, so it wins at every width. */
html.tv-strip-closed #tvah-hero{--tvah-header:68px}

/* Webflow's stylesheet styles bare h1/p/a/button globally. Neutralise inside
   the hero so the ported metrics are the only thing in play. */
#tvah-hero *,#tvah-hero *::before,#tvah-hero *::after{box-sizing:border-box}
#tvah-hero h1,#tvah-hero p{margin:0;padding:0}
#tvah-hero a{color:inherit;text-decoration:none}
#tvah-hero svg{display:block}

/* ── desktop / mobile split (source breakpoint md = 768px) ───────── */
#tvah-hero .tvah-desktop{display:none}
#tvah-hero .tvah-mobile{display:block}
@media (min-width:768px){
  #tvah-hero .tvah-desktop{display:block}
  #tvah-hero .tvah-mobile{display:none}
}

/* ══ DESKTOP ═══════════════════════════════════════════════════════
   One grid cell holding three stacked layers: an inert gradient ground, the
   headline column, and the window composition. The ground and the headline
   pin under the header while the composition pins to the very top, so the
   composition rides up over the headline as you scroll rather than pushing
   it away. */
#tvah-hero .tvah-stack{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
}

/* ── layer 1: ground ───────────────────────────────────────────── */
#tvah-hero .tvah-ground{
  pointer-events:none;
  position:sticky;
  top:var(--tvah-header);
  z-index:0;
  grid-column-start:1;
  grid-row-start:1;
  height:calc(100svh - var(--tvah-header));
  align-self:start;
  overflow:hidden;
}
#tvah-hero .tvah-ground > i{position:absolute;inset:0;display:block}
/* the tint rising from the bottom; opacity is scrubbed 0.4 → 0.7 by script */
#tvah-hero .tvah-ground-glow{
  background-image:radial-gradient(90% 80% at 50% 100%,
    var(--tvah-fade-1) 0%, var(--tvah-fade-2) 45%, var(--tvah-fade-3) 100%);
  opacity:.4;
}
/* hairline columns on an 8px pitch — fine enough to read as paper texture
   rather than as a grid */
#tvah-hero .tvah-ground-rules{
  opacity:.4;
  background-image:repeating-linear-gradient(90deg,
    color-mix(in oklab, var(--tvah-white-100) 78%, transparent) 0 1px,
    transparent 1px 8px);
}
/* an oversized white radial that keeps the top of the hero on paper. Its
   scaleX/scaleY are scrubbed by script, hence the explicit origin. Selector
   carries the > i so it outranks the inset:0 above; without that the radial
   gets pinned to the viewport and the whole hero reads blue from the top. */
#tvah-hero .tvah-ground > i.tvah-ground-fade{
  inset:auto;
  top:0;
  left:-150%;
  height:150%;
  width:400%;
  transform-origin:top;
  will-change:transform;
  background-image:radial-gradient(70% 106.6667% at 50% 0%, var(--tvah-primary-background) 32%, transparent 64%);
}

/* ── layer 2: headline + composition column ────────────────────── */
#tvah-hero .tvah-col{
  position:relative;
  z-index:10;
  grid-column-start:1;
  grid-row-start:1;
  display:flex;
  flex-direction:column;
}

#tvah-hero .tvah-headline{
  position:sticky;
  top:var(--tvah-header);
  margin-bottom:calc(-1 * min(calc(8px + 20svh), calc(50svh - 261px)));
  display:flex;
  min-height:clamp(320px, calc(40svh - var(--tvah-header)), 520px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:max(96px,10svh) 24px 0;
  text-align:center;
  /* Faded out by script once the reader scrolls; DUR_SWITCH on EASE_UI. */
  transition:opacity .5s var(--tvah-ease-ui), filter .5s var(--tvah-ease-ui);
}
@media (min-width:768px){
  #tvah-hero .tvah-headline{padding-left:56px;padding-right:56px}
}
@media (min-width:992px){
  #tvah-hero .tvah-headline{
    margin-bottom:max(
      min(calc(120px - 20svh), calc(550px - 53svh)),
      calc(max(389px, min(calc(82px + 20vw), 466px)) - 50svh)
    );
    padding-left:58px;
    padding-right:58px;
  }
}
#tvah-hero .tvah-stack[data-scrolled] .tvah-headline{
  opacity:0;
  filter:blur(2.5px);
  pointer-events:none;
}
#tvah-hero .tvah-stack[data-headline-gone] .tvah-headline{visibility:hidden}

#tvah-hero .tvah-headline-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
}

/* ── badge pill ────────────────────────────────────────────────── */
#tvah-hero .tvah-badge{
  position:relative;
  display:block;
  border:1px solid var(--tvah-weak-stroke);
  border-radius:13px;
  transition:border-color .3s var(--tvah-ease-in-out);
}
#tvah-hero .tvah-badge:active{border-color:var(--tvah-subtle-stroke)}
#tvah-hero .tvah-badge-inner{
  position:relative;
  display:flex;
  align-items:center;
  column-gap:4px;
  padding:5px 7px 5px 11px;
  border-radius:13px;
  background:var(--tvah-white-100);
  font-size:13px;
  line-height:18px;
  font-weight:500;
  color:var(--tvah-secondary-foreground);
  transition:background-color .3s var(--tvah-ease-in-out);
}
#tvah-hero .tvah-badge:hover .tvah-badge-inner{background:#FBFBFC}
#tvah-hero .tvah-badge svg{
  width:12px;height:12px;flex:0 0 auto;
  transition:transform .3s var(--tvah-ease-in-out);
}
#tvah-hero .tvah-badge:hover svg{transform:translateX(-1px);transition-duration:.05s}

/* ── headline type ─────────────────────────────────────────────── */
#tvah-hero .tvah-h1{
  text-wrap:balance;
  font-weight:600;
  line-height:.95;
  color:var(--tvah-primary-foreground);
  font-size:clamp(64px, calc(16px + 5.333svh), 80px);
  letter-spacing:clamp(-2.4px, calc(2.08px - .3733svh), -1.28px);
}
#tvah-hero .tvah-sub{
  margin-top:12px;
  max-width:27em;
  text-wrap:balance;
  font-weight:500;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.18px;
  color:var(--tvah-accent-foreground);
}

/* ── buttons ───────────────────────────────────────────────────── */
#tvah-hero .tvah-ctas{
  display:flex;
  align-items:center;
  justify-content:center;
  column-gap:10px;
  row-gap:8px;
}
#tvah-hero .tvah-btn{
  position:relative;
  display:inline-flex;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border:1px solid transparent;
  height:36px;
  column-gap:6px;
  border-radius:10px;
  padding:0 12px;
  font-size:.875rem;
  line-height:1.25rem;
  font-weight:500;
  letter-spacing:-.005em;
  transition:color .3s var(--tvah-ease-in-out),
             border-color .3s var(--tvah-ease-in-out),
             background-color .3s var(--tvah-ease-in-out);
}
#tvah-hero .tvah-btn:hover,#tvah-hero .tvah-btn:active{transition-duration:.05s}
/* button-outline, light scope */
#tvah-hero .tvah-btn-outline{
  background:var(--tvah-white-100);
  border-color:var(--tvah-white-800);
  color:var(--tvah-black-400);
}
#tvah-hero .tvah-btn-outline:hover{border-color:var(--tvah-black-700)}
#tvah-hero .tvah-btn-outline:active{
  background:var(--tvah-white-300);
  border-color:var(--tvah-black-500);
  color:var(--tvah-black-300);
}
/* button-primary, light scope */
#tvah-hero .tvah-btn-primary{
  background-color:var(--tvah-black-200);
  background-image:radial-gradient(at center -10%, var(--tvah-black-200) 0%, var(--tvah-black-200) 100%);
  border-color:var(--tvah-black-600);
  color:var(--tvah-white-300);
}
#tvah-hero .tvah-btn-primary:hover{
  background-color:var(--tvah-black-500);
  background-image:radial-gradient(at center -10%, var(--tvah-black-600) 0%, var(--tvah-black-200) 100%);
  color:var(--tvah-white-100);
}
#tvah-hero .tvah-btn-primary:active{
  background-color:var(--tvah-black-600);
  background-image:radial-gradient(at center -10%, var(--tvah-black-500) 0%, var(--tvah-black-500) 100%);
  color:var(--tvah-white-100);
}
/* button-ghost, used by the mobile secondary action */
#tvah-hero .tvah-btn-ghost{background:transparent;border-color:transparent;color:var(--tvah-black-400)}
#tvah-hero .tvah-btn-ghost:hover{background:var(--tvah-white-300)}
#tvah-hero .tvah-btn-ghost svg{width:14px;height:14px;transition:translate .4s var(--tvah-ease-in-out)}
#tvah-hero .tvah-btn-ghost:hover svg{translate:1px 0;transition-duration:.15s}

/* ── layer 3: window composition ───────────────────────────────── */
#tvah-hero .tvah-stagepin{
  position:sticky;
  top:0;
  display:flex;
  height:100svh;
  align-items:center;
  justify-content:center;
  overflow:visible;
  padding-top:var(--tvah-header);
  padding-bottom:80px;
  pointer-events:none;
}
/* Doubles as the drag constraint box: a window can be thrown anywhere inside
   this element and no further. */
#tvah-hero .tvah-stack[data-interactive] .tvah-stagepin{pointer-events:auto}
#tvah-hero .tvah-stage{
  position:relative;
  width:66.6667%;
  max-width:1440px;
}
@media (min-width:992px){ #tvah-hero .tvah-stage{width:75%} }

/* ── window chrome, shared by every window ─────────────────────── */
#tvah-hero .tvah-win{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  padding:0 3px 3px;
  background:rgba(243,244,246,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--tvah-shadow-window);
  /* touch-action must be none or a drag on a touchscreen scrolls the page
     out from under the window instead of moving it. */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  transition:box-shadow .22s var(--tvah-ease-ui);
}
/* Grabbable only once the section is 10% scrolled, so a window can never
   swallow a click meant for the headline underneath it. */
#tvah-hero .tvah-stack[data-interactive] .tvah-win{
  pointer-events:auto;
  cursor:grab;
}
#tvah-hero .tvah-stack[data-interactive] .tvah-win:active,
#tvah-hero .tvah-win.is-dragging{cursor:grabbing}
#tvah-hero .tvah-win.is-dragging{box-shadow:var(--tvah-shadow-drag)}
@media (min-width:992px){
  #tvah-hero .tvah-win{border-radius:16px;padding:0 6px 6px}
}
/* While the reader is actively scrolling the backdrop filter is dropped and
   the fill goes opaque — compositing a live blur under a moving sticky layer
   is what makes this hero stutter otherwise. */
#tvah-hero .tvah-stack[data-hero-scrolling] .tvah-win{
  background:var(--tvah-white-300);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#tvah-hero .tvah-win-dark{background:rgba(0,0,0,.8)}
#tvah-hero .tvah-stack[data-hero-scrolling] .tvah-win-dark{background:var(--tvah-black-0)}

#tvah-hero .tvah-win-bar{
  display:flex;
  height:16px;
  align-items:center;
  padding-left:4px;
}
@media (min-width:992px){
  #tvah-hero .tvah-win-bar{height:32px;padding-left:8px}
}
#tvah-hero .tvah-dots{
  position:relative;
  z-index:20;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:3px;
}
#tvah-hero .tvah-dots span{
  width:6px;height:6px;border-radius:9999px;background:var(--tvah-white-800);
}
@media (min-width:992px){
  #tvah-hero .tvah-dots{gap:6px}
  #tvah-hero .tvah-dots span{width:12px;height:12px}
  #tvah-hero .tvah-dots span:nth-child(1){background:var(--tvah-red-500)}
  #tvah-hero .tvah-dots span:nth-child(2){background:var(--tvah-yellow-500)}
  #tvah-hero .tvah-dots span:nth-child(3){background:var(--tvah-green-500)}
}

/* the main window's screen: an empty white panel, as in the source */
#tvah-hero .tvah-screen{
  height:280px;
  width:100%;
  overflow:hidden;
  border-radius:6px;
  background:var(--tvah-white-100);
}
@media (min-width:768px){ #tvah-hero .tvah-screen{height:380px} }
@media (min-width:992px){
  #tvah-hero .tvah-screen{
    height:min(40.35vw,775px);
    border-radius:12px;
    border:1px solid rgba(0,0,0,.05);
  }
}
/* satellite window bodies */
#tvah-hero .tvah-win-body{
  overflow:hidden;
  border-radius:6px;
  background:var(--tvah-primary-background);
}
@media (min-width:992px){
  #tvah-hero .tvah-win-body{border-radius:12px;border:1px solid rgba(0,0,0,.05)}
}
#tvah-hero .tvah-win-dark .tvah-win-body{background:var(--tvah-black-50)}

/* ── main window shell: mount reveal + scripted scale ───────────── */
#tvah-hero .tvah-shell{
  position:relative;
  width:100%;
  pointer-events:none;
  opacity:0;
  animation:tvah-shell-in .9s var(--tvah-ease-reveal) .45s both;
}
@keyframes tvah-shell-in{
  from{opacity:0;transform:scale(.98)}
  to  {opacity:1;transform:none}
}
#tvah-hero .tvah-shell > .tvah-win{
  transform-origin:center;
  transform:scale(var(--tvah-scale,1));
  will-change:transform;
}

/* ── satellite windows ─────────────────────────────────────────── */
/* The outer wrapper carries only the staggered mount fade; the inner layer
   carries the scroll reveal — the same two motion levels as the source. */
#tvah-hero .tvah-sat{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  animation:tvah-fade-in .9s var(--tvah-ease-reveal) both;
}
@keyframes tvah-fade-in{ from{opacity:0} to{opacity:1} }
#tvah-hero .tvah-sat-inner{
  position:absolute;
  inset:0;
  opacity:0;
  filter:blur(3px);
  transition:opacity .6s var(--tvah-ease-reveal), filter .6s var(--tvah-ease-reveal);
}
#tvah-hero .tvah-stack[data-scrolled] .tvah-sat-inner{opacity:1;filter:blur(0)}

/* reveal order is terminal → chat → complaints, 0.2s apart; the mount fade
   runs 1.2s + 0.15s per window in the same order */
#tvah-hero .tvah-sat-terminal{animation-delay:1.2s}
#tvah-hero .tvah-sat-chat{animation-delay:1.35s}
#tvah-hero .tvah-sat-complaints{animation-delay:1.5s}
#tvah-hero .tvah-stack[data-scrolled] .tvah-sat-terminal   .tvah-sat-inner{transition-delay:0s}
#tvah-hero .tvah-stack[data-scrolled] .tvah-sat-chat       .tvah-sat-inner{transition-delay:.2s}
#tvah-hero .tvah-stack[data-scrolled] .tvah-sat-complaints .tvah-sat-inner{transition-delay:.4s}

#tvah-hero .tvah-sat .tvah-win{
  position:absolute;
  transform:scale(var(--tvah-scale,1));
  will-change:transform;
}
/* geometry, taken from the source's per-app windowClassName */
#tvah-hero .tvah-sat-complaints .tvah-win{
  top:20px;right:-64px;width:136px;transform-origin:0% 100%;z-index:1;
}
#tvah-hero .tvah-sat-chat .tvah-win{
  top:-8px;left:-64px;width:134px;transform-origin:100% 100%;z-index:1;
}
#tvah-hero .tvah-sat-terminal .tvah-win{
  bottom:16px;left:-48px;width:150px;transform-origin:100% 0%;z-index:1;
}
@media (min-width:992px){
  #tvah-hero .tvah-sat-complaints .tvah-win{top:40px;right:-128px;width:30%;max-width:272px}
  #tvah-hero .tvah-sat-chat       .tvah-win{top:-16px;left:-128px;width:30%;max-width:268px}
  #tvah-hero .tvah-sat-terminal   .tvah-win{bottom:32px;left:-96px;width:33%;max-width:300px}
}
@media (min-width:1200px){
  #tvah-hero .tvah-sat-complaints .tvah-win{right:-160px}
  #tvah-hero .tvah-sat-chat       .tvah-win{left:-160px}
  #tvah-hero .tvah-sat-terminal   .tvah-win{left:-128px}
}
@media (min-width:1536px){
  #tvah-hero .tvah-sat-complaints .tvah-win{right:-172px}
  #tvah-hero .tvah-sat-chat       .tvah-win{left:-172px}
  #tvah-hero .tvah-sat-terminal   .tvah-win{left:-144px}
}

/* ── satellite content ─────────────────────────────────────────────
   The source's three windows are a call transcript, a Slack thread and a
   terminal. Each keeps its structure and metrics here; only the subject
   changes. Type sizes double at lg, as in the source, because the whole
   composition is drawn at roughly half scale below it. */

/* window title row, shared */
#tvah-hero .tvah-sat-title{
  display:flex;align-items:center;height:14px;padding:0 6px;
  border-bottom:1px solid var(--tvah-subtle-stroke);
}
@media (min-width:992px){ #tvah-hero .tvah-sat-title{height:28px;padding:0 12px} }
#tvah-hero .tvah-sat-title span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;font-size:5.5px;color:var(--tvah-primary-foreground);
}
@media (min-width:992px){ #tvah-hero .tvah-sat-title span{font-size:11px} }

/* complaints list — the call window's masked, scrolling body */
#tvah-hero .tvah-cx{padding:3px 6px 7px}
@media (min-width:992px){ #tvah-hero .tvah-cx{padding:6px 12px 14px} }
#tvah-hero .tvah-cx-list{
  display:flex;flex-direction:column;gap:6px;padding-top:4px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 84%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 84%,transparent);
}
@media (min-width:992px){ #tvah-hero .tvah-cx-list{gap:12px;padding-top:8px} }
#tvah-hero .tvah-cx-row{display:flex;flex-direction:column;gap:1px}
#tvah-hero .tvah-cx-row b{
  font-weight:600;font-size:5.5px;line-height:7.5px;color:var(--tvah-primary-foreground);
}
#tvah-hero .tvah-cx-row span{
  font-weight:500;font-size:5px;line-height:7.5px;color:var(--tvah-accent-foreground);
}
@media (min-width:992px){
  #tvah-hero .tvah-cx-row{gap:2px}
  #tvah-hero .tvah-cx-row b{font-size:11px;line-height:15px}
  #tvah-hero .tvah-cx-row span{font-size:10px;line-height:15px}
}
#tvah-hero .tvah-cx-done{color:var(--tvah-green-500)}
#tvah-hero .tvah-cx-open{color:var(--tvah-blue-500)}

/* chat thread — the Slack window */
#tvah-hero .tvah-chat{padding:4px 6px 6px}
@media (min-width:992px){ #tvah-hero .tvah-chat{padding:8px 12px 12px} }
#tvah-hero .tvah-chat-h{
  font-weight:600;font-size:5.5px;line-height:8px;color:var(--tvah-primary-foreground);
}
@media (min-width:992px){ #tvah-hero .tvah-chat-h{font-size:11px;line-height:16px} }
#tvah-hero .tvah-msg{display:flex;gap:4px;margin-top:6px}
@media (min-width:992px){ #tvah-hero .tvah-msg{gap:8px;margin-top:12px} }
#tvah-hero .tvah-msg-av{
  flex:0 0 auto;width:9px;height:9px;border-radius:2.5px;
  display:grid;place-items:center;
  background:var(--tvah-white-400);color:var(--tvah-tertiary-foreground);
  font-weight:600;font-size:4.5px;
}
@media (min-width:992px){
  #tvah-hero .tvah-msg-av{width:18px;height:18px;border-radius:5px;font-size:9px}
}
#tvah-hero .tvah-msg-b{min-width:0;flex:1 1 auto}
#tvah-hero .tvah-msg-head{
  display:flex;align-items:center;gap:2px;
  font-weight:600;font-size:5.5px;line-height:7.5px;color:var(--tvah-primary-foreground);
}
@media (min-width:992px){
  #tvah-hero .tvah-msg-head{gap:4px;font-size:11px;line-height:15px}
}
#tvah-hero .tvah-msg-time{font-weight:500;color:var(--tvah-black-900)}
#tvah-hero .tvah-msg-app{
  border-radius:2px;padding:0 2px;background:var(--tvah-white-400);
  color:var(--tvah-tertiary-foreground);font-size:4.5px;
}
@media (min-width:992px){ #tvah-hero .tvah-msg-app{border-radius:4px;padding:0 4px;font-size:9px} }
#tvah-hero .tvah-msg-t{
  font-weight:500;font-size:5.5px;line-height:7.5px;color:var(--tvah-secondary-foreground);
}
@media (min-width:992px){ #tvah-hero .tvah-msg-t{font-size:11px;line-height:15px} }
#tvah-hero .tvah-mention{color:var(--tvah-blue-500);font-weight:600}

/* terminal — the dark window */
#tvah-hero .tvah-term{
  display:flex;flex-direction:column;
  background:var(--tvah-black-50);
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:5px;line-height:7.5px;
}
@media (min-width:992px){ #tvah-hero .tvah-term{font-size:10px;line-height:15px} }
#tvah-hero .tvah-term-body{display:flex;flex-direction:column;gap:4px;padding:5px 6px}
@media (min-width:992px){ #tvah-hero .tvah-term-body{gap:8px;padding:10px 12px} }
#tvah-hero .tvah-term-cmd{
  display:flex;gap:3px;margin:0 -2px;border-radius:2px;padding:1px 2px;
  background:rgba(255,255,255,.05);color:var(--tvah-white-100);
}
@media (min-width:992px){
  #tvah-hero .tvah-term-cmd{gap:6px;margin:0 -4px;border-radius:4px;padding:1px 4px}
}
#tvah-hero .tvah-term-lines{display:flex;flex-direction:column;gap:1px;color:var(--tvah-black-800)}
@media (min-width:992px){ #tvah-hero .tvah-term-lines{gap:2px} }
#tvah-hero .tvah-term-lines i{font-style:normal;color:var(--tvah-black-600);margin-right:4px}
#tvah-hero .tvah-term-ok{display:flex;gap:3px;color:var(--tvah-white-900)}
@media (min-width:992px){ #tvah-hero .tvah-term-ok{gap:6px} }
#tvah-hero .tvah-term-ok em{font-style:normal;color:var(--tvah-green-500)}
#tvah-hero .tvah-term-prompt{
  display:flex;align-items:flex-start;gap:3px;
  border:1px solid rgba(255,255,255,.1);border-radius:3px;padding:1px 3px;
  color:var(--tvah-white-100);
}
@media (min-width:992px){
  #tvah-hero .tvah-term-prompt{gap:6px;border-radius:6px;padding:2px 6px}
}
#tvah-hero .tvah-term-prompt > span:first-child{flex:0 0 auto;color:var(--tvah-white-900)}
#tvah-hero .tvah-caret{
  display:inline-block;width:1px;height:.95em;margin-left:1px;
  translate:0 1px;vertical-align:middle;background:currentColor;
  animation:tvah-caret .5s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes tvah-caret{ 0%,70%{opacity:1} 71%,100%{opacity:0} }
#tvah-hero .tvah-term-foot{
  display:flex;align-items:center;gap:3px;
  border-top:1px solid rgba(255,255,255,.1);
  padding:5px 6px 6px;color:var(--tvah-black-700);
}
@media (min-width:992px){
  #tvah-hero .tvah-term-foot{gap:6px;padding:10px 12px 12px}
}
#tvah-hero .tvah-term-foot em{font-style:normal;color:#D97757}

/* ── mount reveal for the headline block ───────────────────────── */
#tvah-hero [data-tvah-in]{
  opacity:0;
  animation:tvah-reveal .6s var(--tvah-ease-reveal) both;
}
@keyframes tvah-reveal{
  from{opacity:0;filter:blur(1.5px)}
  to  {opacity:1;filter:blur(0)}
}
#tvah-hero [data-tvah-in="0"]{animation-delay:0s}
#tvah-hero [data-tvah-in="1"]{animation-delay:.1s}
#tvah-hero [data-tvah-in="2"]{animation-delay:.2s}
#tvah-hero [data-tvah-in="3"]{animation-delay:.3s}
#tvah-hero [data-tvah-in="4"]{animation-delay:.4s}

/* ══ MOBILE ════════════════════════════════════════════════════════
   No pinning and no satellites: the source's mobile scene is the headline
   over a single window that bleeds off the right edge. */
#tvah-hero .tvah-m-scene{position:relative;overflow:hidden}
#tvah-hero .tvah-m-frame{
  position:relative;
  display:flex;
  width:100%;
  flex-direction:column;
  overflow:hidden;
}
#tvah-hero .tvah-m-ground{
  position:absolute;inset:0;overflow:hidden;opacity:.6;
  -webkit-mask-image:radial-gradient(280% 160% at 50% 0%, transparent 32%, #000 64%);
  mask-image:radial-gradient(280% 160% at 50% 0%, transparent 32%, #000 64%);
}
#tvah-hero .tvah-m-ground > i{position:absolute;inset:0;display:block}
#tvah-hero .tvah-m-copy{
  position:relative;z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:28px;
  /* The section's own padding already clears the nav, so this is just the
     source's pt-16 / sm:pt-22 and nothing more. */
  padding:64px 24px 0;
}
@media (min-width:576px){
  #tvah-hero .tvah-m-copy{gap:24px;padding-top:88px}
}
#tvah-hero .tvah-m-top{
  display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;
}
@media (min-width:576px){ #tvah-hero .tvah-m-top{gap:28px} }
#tvah-hero .tvah-m-h1{
  margin-top:8px;text-wrap:balance;font-weight:600;
  font-size:2.5rem;line-height:.95;letter-spacing:-.01em;
  color:var(--tvah-primary-foreground);
}
@media (min-width:576px){
  #tvah-hero .tvah-m-h1{margin-top:4px;font-size:3.5rem;letter-spacing:-.02em}
}
#tvah-hero .tvah-m-sub{
  max-width:420px;text-wrap:balance;font-weight:500;
  font-size:15px;line-height:1.3;letter-spacing:-.17px;
  color:var(--tvah-accent-foreground);
}
@media (min-width:576px){ #tvah-hero .tvah-m-sub{font-size:16px} }
#tvah-hero .tvah-m-ctas{
  display:flex;width:100%;flex-direction:column;align-items:center;
  column-gap:10px;row-gap:8px;
}
#tvah-hero .tvah-m-ctas > .tvah-btn{width:100%;max-width:20rem}
#tvah-hero .tvah-m-win{
  position:relative;z-index:10;
  margin:40px 0 24px 16px;
  overflow:hidden;
  border-radius:8px 0 0 8px;
  background:rgba(243,244,246,.8);
  padding:0 0 3px 3px;
  box-shadow:0 2px 8px rgba(11,13,24,.04),0 16px 40px rgba(11,13,24,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
@media (min-width:576px){
  #tvah-hero .tvah-m-win{
    margin:64px auto 24px;width:calc(100% - 32px);max-width:560px;
    border-radius:8px;padding-right:3px;
  }
}
#tvah-hero .tvah-m-win .tvah-win-bar{gap:3px;padding-left:6px}
#tvah-hero .tvah-m-screen{
  height:296px;width:100%;overflow:hidden;border-radius:6px;
  background:var(--tvah-white-100);
}

/* ── reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #tvah-hero .tvah-shell,
  #tvah-hero .tvah-sat,
  #tvah-hero [data-tvah-in]{animation:none;opacity:1}
  #tvah-hero .tvah-sat-inner{opacity:1;filter:none;transition:none}
  #tvah-hero .tvah-headline{transition:none}
  #tvah-hero .tvah-stack[data-scrolled] .tvah-headline{opacity:1;filter:none}
  #tvah-hero .tvah-stack[data-headline-gone] .tvah-headline{visibility:visible}
}