/* ═══════════════════════════ the landing page ═══════════════════════════
   Jack's reimagined homepage, grafted onto the live product.

   Two things were done to it on the way in, both so it cannot reach the room:
   every custom property was renamed --x → --h-x, because the design's --ink is a
   near-black BACKGROUND while the room's --ink is near-white TEXT; and every
   selector is scoped under #gate, the landing wrapper, which is display:none the
   moment a meeting opens.

   Generated by a brace-depth parser, not by regex over lines. The regex version
   produced `#gate #gate .site-header`, which matches nothing — and silently
   unstyled the entire navigation and both dialogs while looking correct in the
   file. A comment sitting in front of an @media was all it took. */

#gate{ min-width:320px; -webkit-font-smoothing:antialiased; }
body.modal-open{ overflow:hidden }

#gate{
  --h-ink: #030611;
  --h-ink-2: #06091a;
  --h-ink-3: #0a0e23;
  --h-panel: rgba(11, 16, 41, 0.72);
  --h-panel-solid: #0c1129;
  --h-line: rgba(255, 255, 255, 0.095);
  --h-line-bright: rgba(255, 255, 255, 0.18);
  --h-white: #f7f8ff;
  --h-text: #eef1ff;
  --h-muted: #9aa5c1;
  --h-muted-2: #6f7896;
  --h-blue: #168cff;
  --h-cyan: #23d0ff;
  --h-violet: #7046ff;
  --h-purple: #9c6cff;
  --h-mint: #37e9bd;
  --h-red: #ff5b6e;
  --h-yellow: #f8c75b;
  --h-shadow: 0 35px 100px rgba(0, 0, 0, 0.52);
  --h-shadow-blue: 0 24px 80px rgba(25, 119, 255, 0.25);
  --h-page: 1380px;
  --h-radius-xl: 34px;
  --h-radius-lg: 24px;
  --h-radius-md: 16px;
  --h-radius-sm: 11px;
}
#gate, #gate *{ box-sizing: border-box; }
#gate{ scroll-behavior: smooth; background: var(--h-ink); }
#gate{
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 7% 9%, rgba(9, 117, 255, 0.08), transparent 26%),
    radial-gradient(circle at 93% 20%, rgba(98, 48, 255, 0.08), transparent 24%),
    var(--h-ink);
  color: var(--h-text);
  font-family: "Inter Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.modal-open{ overflow: hidden; }
#gate button, #gate input{ font: inherit; }
#gate button, #gate a{ -webkit-tap-highlight-color: transparent; }
#gate a{ color: inherit; text-decoration: none; }
#gate button{ color: inherit; }
#gate img{ display: block; max-width: 100%; }
#gate svg{ display: block; }
::selection{ background: rgba(37, 182, 255, 0.28); color: #fff; }
#gate .page-noise{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: url("/hp/noise.png") repeat;
  background-size: 210px 210px;
  opacity: 0.06;
  mix-blend-mode: soft-light;
}
#gate .cursor-glow{
  position: fixed;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  left: -230px;
  top: -230px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(33, 156, 255, 0.09), rgba(84, 62, 255, 0.035) 42%, transparent 70%);
  transform: translate3d(var(--h-cursor-x, -500px), var(--h-cursor-y, -500px), 0);
  transition: transform 80ms linear;
}
#gate .page-width{
  width: min(calc(100% - 64px), var(--h-page));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
#gate .sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#gate .site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 13px 18px 0;
}
#gate .nav-shell{
  width: min(100%, 1480px);
  min-height: 64px;
  margin: 0 auto;
  padding: 0 12px 0 16px;
  display: grid;
  grid-template-columns: 248px 1fr 310px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(3, 6, 17, 0.67);
  box-shadow: 0 15px 55px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
#gate .site-header.scrolled .nav-shell{
  background: rgba(3, 6, 17, 0.9);
  border-color: rgba(255, 255, 255, 0.13);
}
#gate .brand-lockup{
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: max-content;
}
#gate .brand-mark{ width: 32px; height: 34px; object-fit: contain; }
#gate .brand-wordmark{ width: 178px; height: auto; }
#gate .nav-links{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 32px;
}
#gate .nav-links a, #gate .nav-link-muted{
  position: relative;
  color: #a7afc8;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.01em;
  transition: color 180ms ease;
}
#gate .nav-links a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: linear-gradient(90deg, var(--h-cyan), var(--h-violet));
  transition: right 180ms ease;
}
#gate .nav-links a:hover, #gate .nav-link-muted:hover{ color: #fff; }
#gate .nav-links a:hover::after{ right: 0; }
#gate .nav-actions{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}
#gate .menu-button{
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--h-line);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
}
#gate .menu-button span{ width: 18px; height: 1px; margin: 5px auto; display: block; background: #fff; }
#gate .button{
  border: 0;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 670;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
#gate .button::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,0.26) 44%, transparent 69%);
  transform: translateX(-125%);
  transition: transform 650ms ease;
}
#gate .button:hover::before{ transform: translateX(125%); }
#gate .button:hover{ transform: translateY(-2px); }
#gate .button:active{ transform: translateY(0) scale(0.985); }
#gate .button svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#gate .button-small{ height: 42px; padding: 0 18px; font-size: 13px; }
#gate .button-large{ min-height: 56px; padding: 0 24px; font-size: 15px; }
/* Solid, with a slow rotating glow OUTSIDE it — not a gradient fill. The light moves
   around the button instead of being painted on it, the fill stays one confident
   colour, and the label sits on a flat surface it can actually be read against. The
   glow is a conic gradient on a pseudo-element behind the button, blurred, driven by
   a registered custom property so the ANGLE animates rather than the element — the
   pseudo-element itself never rotates, so the pill's corners never sweep. Browsers
   without @property just get the glow standing still, which still looks intentional. */
#gate .button-primary{
  color: #fff;
  background: #1256E8;
  border: 1px solid rgba(255,255,255,.22);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
#gate .button-primary::before{
  content:''; position:absolute; inset:-5px; z-index:-1; border-radius:inherit;
  background: conic-gradient(from var(--btnrot, 0deg),
    rgba(14,165,255,0) 0deg, rgba(14,165,255,.9) 80deg, rgba(98,54,255,.9) 160deg,
    rgba(35,208,255,.75) 240deg, rgba(14,165,255,0) 330deg);
  filter: blur(13px);
  opacity:.75;
  animation: btnrot 3.8s linear infinite;
}
#gate .button-primary:hover{ background:#1B61F5 }
#gate .button-primary:hover::before{ opacity:1; animation-duration:2.2s }
@property --btnrot{ syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes btnrot{ to{ --btnrot:360deg } }
@media (prefers-reduced-motion: reduce){ #gate .button-primary::before{ animation:none } }
#gate .button-ghost{
  color: #e6eaff;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#gate .button-ghost:hover{ background: rgba(255,255,255,0.075); border-color: rgba(255,255,255,0.22); }
#gate .button-ghost-bright{
  color: #fff;
  border: 1px solid rgba(116, 206, 255, 0.32);
  background: rgba(29, 121, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#gate .button-ghost-bright:hover{ background: rgba(29, 121, 255, 0.17); border-color: rgba(116,206,255,.48); }
#gate .play-icon{
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}
#gate .play-icon svg{ width: 15px; height: 15px; fill: currentColor; stroke: none; }
#gate .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #55c9ff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#gate .eyebrow-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--h-cyan);
  box-shadow: 0 0 0 5px rgba(35,208,255,0.08), 0 0 20px rgba(35,208,255,0.75);
}
#gate .section{ position: relative; padding: 142px 0; }
#gate .section-heading.centered{ max-width: 840px; margin: 0 auto; text-align: center; }
#gate .section-heading h2, #gate .modes-copy h2, #gate .receipts-copy h2, #gate .agents-hero h2, #gate .developer-copy h2, #gate .final-cta h2{
  margin: 22px 0 20px;
  color: #f8f9ff;
  font-size: clamp(48px, 5.25vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.061em;
  font-weight: 720;
}
#gate .section-heading h2 span, #gate .modes-copy h2 span, #gate .receipts-copy h2 span, #gate .agents-hero h2 span, #gate .developer-copy h2 span, #gate .final-cta h2 span{
  color: transparent;
  background: linear-gradient(105deg, #f5f7ff 8%, #98acdf 42%, #6f7eac 88%);
  -webkit-background-clip: text;
  background-clip: text;
}
#gate .section-heading p, #gate .modes-copy > p, #gate .receipts-copy > p, #gate .agents-hero > p, #gate .developer-copy > p, #gate .final-cta > p{
  color: var(--h-muted);
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -0.018em;
}
#gate .hero{
  min-height: 1040px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 150px 0 62px;
  isolation: isolate;
}
#gate .hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  background: linear-gradient(180deg, rgba(3,6,17,0.05), rgba(3,6,17,0.22) 65%, #030611 96%);
}
#gate .hero-aurora{ position: absolute; z-index: -7; inset: -50px auto auto 50%; width: 1800px; max-width: none; transform: translateX(-50%); opacity: .94; }
#gate .hero-grid{ position: absolute; z-index: -6; width: 1600px; max-width: none; bottom: -330px; left: 50%; transform: translateX(-50%); opacity: .56; }
#gate .hero-rings{ position: absolute; z-index: -5; width: 850px; right: -250px; top: 80px; opacity: .16; animation: slow-spin 60s linear infinite; }
#gate .hero-beam{ position: absolute; z-index: -4; width: 850px; height: 1px; right: -20px; top: 520px; transform: rotate(-12deg); background: linear-gradient(90deg, transparent, rgba(47,193,255,.45), rgba(112,70,255,.28), transparent); box-shadow: 0 0 28px rgba(47,193,255,.35); }
#gate .hero-layout{
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(690px, 1.18fr);
  align-items: center;
  gap: 34px;
}
#gate .hero-copy{ padding-left: 6px; padding-bottom: 34px; position: relative; z-index: 8; }
#gate .hero-copy h1{
  margin: 22px 0 24px;
  max-width: 650px;
  font-size: clamp(64px, 6vw, 92px);
  line-height: .93;
  letter-spacing: -0.068em;
  font-weight: 740;
  color: #fbfbff;
}
#gate .hero-copy h1 span{
  display: inline-block;
  color: transparent;
  background: linear-gradient(104deg, #f7f8ff 2%, #bdcaff 43%, #8e82df 82%, #7f69ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
#gate .hero-subhead{ max-width: 620px; margin: 0; color: #a6afca; font-size: 19px; line-height: 1.62; letter-spacing: -0.022em; }
#gate .hero-actions{ display: flex; align-items: center; gap: 12px; margin-top: 34px; }
#gate .hero-trustline{ display: flex; align-items: center; gap: 12px; margin-top: 21px; color: #737d9b; font-size: 12px; letter-spacing: .02em; }
#gate .hero-trustline i{ width: 3px; height: 3px; border-radius: 50%; background: #4e5978; }
#gate .hero-visual{ min-height: 640px; position: relative; display: grid; place-items: center; }
/* Flat. The rotateY/rotateX skew was the whole reason the frame looked like a stock
   template, and it was also a measurable bug: with rotateX the body's rendered bottom
   edge landed 21px BELOW the footer's top, so the last video tile ran under the Leave
   button and the panel's mic button sat under "Notes & chat". A straight-on frame is
   what the product actually looks like, and nothing in it overlaps anything. */
#gate .meeting-perspective{
  width: 760px;
  max-width: 100%;
  transform: none;
  position: relative;
  z-index: 3;
}
#gate .meeting-glow{
  position: absolute;
  inset: 9% 8% -9%;
  z-index: -1;
  background: radial-gradient(circle at 45% 45%, rgba(18, 150, 255, 0.42), rgba(93, 56, 255, 0.25) 50%, transparent 72%);
  filter: blur(55px);
}
#gate .meeting-window{
  border-radius: 24px;
  border: 1px solid rgba(148, 175, 255, 0.22);
  background: rgba(7, 10, 26, 0.92);
  box-shadow: 0 40px 120px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.025) inset, 0 0 85px rgba(52,108,255,.12);
  overflow: hidden;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
#gate .meeting-topbar{
  height: 48px;
  display: grid;
  grid-template-columns: 96px 1fr 96px;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
#gate .traffic-lights{ display: flex; align-items: center; gap: 6px; }
#gate .traffic-lights i{ width: 7px; height: 7px; border-radius: 50%; background: #44506b; }
#gate .traffic-lights i:nth-child(1){ background: #ff6172; }
#gate .traffic-lights i:nth-child(2){ background: #f7c861; }
#gate .traffic-lights i:nth-child(3){ background: #3ee2ad; }
#gate .meeting-name{ justify-self: center; display: flex; align-items: center; gap: 7px; color: #c9d0e7; font-size: 10px; font-weight: 620; }
#gate .live-pip{ width: 5px; height: 5px; border-radius: 50%; background: #ff5c70; box-shadow: 0 0 10px rgba(255,92,112,.8); }
#gate .meeting-code{ color: #63708d; font-weight: 480; }
#gate .meeting-top-actions{ justify-self: end; display: flex; gap: 6px; }
#gate .meeting-top-actions button, #gate .outcome-ask button, #gate .mode-stage-top button{
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
#gate .meeting-top-actions button{ width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: #7e89a8; }
#gate .meeting-top-actions svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#gate .meeting-body{ height: 468px; display: grid; grid-template-columns: 1.6fr .94fr; overflow: hidden; }
#gate .video-column{ padding: 10px 8px 10px 10px; min-width: 0; }
#gate .video-grid{ height: 100%; display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: repeat(3, 1fr); gap: 7px; }
#gate .video-tile{ min-height: 0; position: relative; border-radius: 11px; overflow: hidden; background: #12172a; border: 1px solid rgba(255,255,255,.055); }
#gate .video-main{ grid-row: 1 / 4; }
#gate .video-tile img{ width: 100%; height: 100%; object-fit: cover; }
#gate .tile-gradient{ position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(4,6,16,.74)); }
#gate .tile-label{ position: absolute; left: 10px; bottom: 9px; display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 620; color: #eef1ff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
#gate .speaking-ring{ width: 5px; height: 5px; border-radius: 50%; background: var(--h-mint); box-shadow: 0 0 0 3px rgba(55,233,189,.12), 0 0 11px rgba(55,233,189,.7); }
#gate .live-caption{ position: absolute; left: 12px; right: 12px; bottom: 30px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 8px; background: rgba(4,7,18,.7); color: #f4f6ff; font-size: 8px; line-height: 1.45; backdrop-filter: blur(8px); }
#gate .outcome-panel{ min-width: 0; display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.075); background: linear-gradient(180deg, rgba(15,20,49,.82), rgba(7,10,25,.88)); }
#gate .outcome-header{ min-height: 60px; padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); }
#gate .outcome-header > div{ display: flex; align-items: center; gap: 8px; }
#gate .teama-orb{ width: 28px; height: 28px; padding: 4px; border-radius: 8px; background: linear-gradient(145deg, rgba(26,171,255,.2), rgba(111,63,255,.22)); border: 1px solid rgba(94,151,255,.2); display: grid; place-items: center; box-shadow: 0 0 16px rgba(30,120,255,.16); }
#gate .teama-orb img{ width: 22px; height: 22px; object-fit: contain; }
#gate .outcome-header b{ display: block; color: #f4f6ff; font-size: 10px; }
#gate .outcome-header small{ display: block; margin-top: 2px; color: #7d8aa8; font-size: 7px; }
#gate .mode-pill{ padding: 5px 7px; border-radius: 999px; background: rgba(109,70,255,.13); border: 1px solid rgba(122,91,255,.24); color: #a997ff; font-size: 7px; font-weight: 670; }
#gate .outcome-stream{ padding: 9px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
#gate .outcome-item{ padding: 9px; display: grid; grid-template-columns: 26px 1fr; gap: 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.025); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
#gate .outcome-item-decision{ border-color: rgba(55,233,189,.17); background: linear-gradient(110deg, rgba(55,233,189,.075), rgba(255,255,255,.02)); }
#gate .outcome-item-dim{ opacity: .68; }
#gate .outcome-icon{ width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--h-mint); background: rgba(55,233,189,.09); border: 1px solid rgba(55,233,189,.14); }
#gate .outcome-icon-blue{ color: #4bb6ff; background: rgba(27,143,255,.09); border-color: rgba(27,143,255,.15); }
#gate .outcome-icon-violet{ color: #9b7cff; background: rgba(116,72,255,.1); border-color: rgba(116,72,255,.16); }
#gate .outcome-icon-cyan{ color: #54dcff; background: rgba(35,208,255,.08); border-color: rgba(35,208,255,.14); }
#gate .outcome-icon svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#gate .outcome-item span{ display: block; color: #6f7d9f; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
#gate .outcome-item b{ display: block; margin-top: 3px; color: #e8ebf9; font-size: 8px; line-height: 1.35; }
#gate .outcome-item small{ display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #6d7896; font-size: 6.5px; }
#gate .outcome-item small i{ width: 4px; height: 4px; border-radius: 50%; background: var(--h-mint); box-shadow: 0 0 6px rgba(55,233,189,.7); }
#gate .outcome-ask{ margin: auto 9px 9px; height: 35px; padding: 0 6px 0 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; display: flex; align-items: center; justify-content: space-between; background: rgba(4,7,17,.55); color: #687593; font-size: 7px; }
#gate .outcome-ask button{ width: 24px; height: 24px; border-radius: 7px; color: #43bfff; background: rgba(25,142,255,.11); }
#gate .outcome-ask svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#gate .meeting-controls{ min-height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(5,8,20,.96); }
#gate .bar-l{ display: flex; align-items: center; gap: 9px; }
#gate .bar-l button{ width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: #99a5c3; display: grid; place-items: center; }
#gate .live-dot{ width: 7px; height: 7px; border-radius: 50%; background: #35d99a; box-shadow: 0 0 8px #35d99a; }
#gate .control-cluster{ justify-self: center; display: flex; align-items: center; gap: 6px; }
/* Round, like the real ones. */
#gate .control-cluster button{ width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); color: #aab4cc; display: grid; place-items: center; cursor: pointer; }
#gate .control-cluster button.control-on{ color: #e2e8f8; }
#gate .control-cluster button.control-lit{ color: #7fb6ff; background: rgba(42,110,255,.16); border-color: rgba(42,110,255,.4); }
#gate .control-cluster button.control-clip{ width: auto; padding: 0 12px 0 9px; border-radius: 18px; display: inline-flex; gap: 6px; font-size: 9.5px; font-weight: 600; color: #e2e8f8; }
#gate .control-cluster .control-clip i{ width: 8px; height: 8px; border-radius: 50%; background: #ff5b6e; box-shadow: 0 0 8px rgba(255,91,110,.7); }
#gate .control-cluster button.control-end{ width: auto; padding: 0 14px; border-radius: 18px; font-size: 10px; font-weight: 600; color: #ff9aa6; background: rgba(255,73,93,.16); border-color: rgba(255,120,137,.32); margin-left: 4px; }
#gate .control-cluster svg, #gate .notes-button svg, #gate .bar-l svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#gate .notes-button{ justify-self: end; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: #aab4cc; display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; cursor: pointer; }
/* REC lives on the video, top-left, as it does in the room. */
#gate .rec-chip{ position: absolute; top: 9px; left: 9px; display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; background: rgba(4,7,20,.7); border: 1px solid rgba(255,255,255,.08); color: #ffd7dc; font-family: var(--h-mono, ui-monospace, monospace); font-size: 8.5px; font-weight: 600; letter-spacing: .04em; }
#gate .rec-chip span{ width: 6px; height: 6px; border-radius: 50%; background: #ff5b6e; box-shadow: 0 0 8px rgba(255,91,110,.65); }
/* The rail's tabs, as in the product. */
#gate .outcome-tabs{ display: flex; gap: 2px; padding: 8px 8px 0; }
#gate .outcome-tabs span{ padding: 5px 7px; border-radius: 7px; font-size: 8.5px; color: #7b87a3; white-space: nowrap; }
#gate .outcome-tabs span.on{ background: rgba(255,255,255,.07); color: #e2e8f8; font-weight: 600; }
#gate .float-card{ position: absolute; z-index: 7; border: 1px solid rgba(142,169,255,.17); background: rgba(9,13,33,.78); box-shadow: 0 20px 55px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(18px); border-radius: 14px; }
#gate .float-card-top{ top: 54px; right: 6px; width: 154px; padding: 12px 13px; animation: float-y 5.6s ease-in-out infinite; }
#gate .float-card-top .float-kicker{ display: block; color: #71809f; font-size: 8px; font-weight: 680; text-transform: uppercase; letter-spacing: .12em; }
#gate .float-card-top strong{ display: inline-block; margin-top: 5px; font-size: 18px; letter-spacing: -.04em; }
#gate .mini-wave{ float: right; display: inline-flex; align-items: center; gap: 2px; height: 23px; }
#gate .mini-wave i{ width: 2px; border-radius: 9px; background: linear-gradient(180deg, var(--h-cyan), var(--h-violet)); animation: wave 1.25s ease-in-out infinite; }
#gate .mini-wave i:nth-child(1){ height: 7px; }
#gate .mini-wave i:nth-child(2){ height: 14px; animation-delay: -.2s; }
#gate .mini-wave i:nth-child(3){ height: 20px; animation-delay: -.4s; }
#gate .mini-wave i:nth-child(4){ height: 11px; animation-delay: -.15s; }
#gate .mini-wave i:nth-child(5){ height: 17px; animation-delay: -.55s; }
#gate .mini-wave i:nth-child(6){ height: 8px; animation-delay: -.3s; }
/* Well clear of the hero CTA. It used to sit level with "Start a meeting", hanging
   over the copy column, and the two read as one confused control. It belongs to the
   product mock, so it stays over the mock's own top half. */
#gate .float-card-left{ left: -38px; top: 96px; bottom: auto; width: 228px; padding: 12px; display: flex; align-items: center; gap: 10px; animation: float-y 6.2s ease-in-out -1.2s infinite; }
#gate .float-icon{ flex: 0 0 auto; width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; border: 1px solid rgba(55,233,189,.2); background: rgba(55,233,189,.09); color: var(--h-mint); }
#gate .float-icon svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#gate .float-card b{ display: block; color: #f0f3ff; font-size: 9px; }
#gate .float-card small{ display: block; margin-top: 3px; color: #73809e; font-size: 7px; }
#gate .float-card-right{ right: -20px; bottom: 82px; width: 170px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; animation: float-y 5.9s ease-in-out -.5s infinite; }
#gate .quote-mark{ color: #6ccfff; font-family: Georgia, serif; font-size: 30px; line-height: .8; }
#gate .hero-proof{ margin-top: 5px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 22px; align-items: center; color: #6f7995; font-size: 11px; text-transform: uppercase; letter-spacing: .115em; }
#gate .proof-rule{ height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(61,159,255,.25), rgba(255,255,255,.05)); }
#gate .signal-strip{ border-block: 1px solid rgba(255,255,255,.065); background: rgba(255,255,255,.018); overflow: hidden; }
#gate .signal-track{ width: max-content; min-height: 57px; display: flex; align-items: center; gap: 46px; padding: 0 0; animation: marquee 30s linear infinite; }
#gate .signal-track span{ display: inline-flex; align-items: center; gap: 9px; color: #7e89a7; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; white-space: nowrap; }
#gate .signal-dot{ width: 6px; height: 6px; border-radius: 50%; }
#gate .signal-blue{ background: var(--h-cyan); box-shadow: 0 0 12px rgba(35,208,255,.6); }
#gate .signal-mint{ background: var(--h-mint); box-shadow: 0 0 12px rgba(55,233,189,.6); }
#gate .signal-violet{ background: var(--h-violet); box-shadow: 0 0 12px rgba(112,70,255,.7); }
#gate .outcomes-section{ background: linear-gradient(180deg, #030611 0%, #050819 52%, #030611 100%); overflow: hidden; }
#gate .outcomes-section::before{ content: ""; position: absolute; inset: 12% -20% auto; height: 800px; background: radial-gradient(ellipse at center, rgba(35,99,255,.085), transparent 68%); pointer-events: none; }
#gate .outcome-orbit{ height: 820px; max-width: 1220px; margin: 40px auto -30px; position: relative; }
#gate .orbit-glow{ position: absolute; width: 500px; height: 500px; top: 170px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(33,149,255,.17), rgba(108,64,255,.09) 48%, transparent 70%); filter: blur(25px); }
#gate .conversation-core{ position: absolute; z-index: 5; width: 260px; height: 260px; left: 50%; top: 275px; transform: translateX(-50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(91,169,255,.25); background: radial-gradient(circle at 45% 35%, rgba(25,123,255,.22), rgba(12,15,38,.92) 55%, rgba(6,8,20,.98)); box-shadow: 0 0 0 18px rgba(34,113,255,.028), 0 0 0 42px rgba(34,113,255,.02), 0 45px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
#gate .conversation-core::before, #gate .conversation-core::after{ content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(63,151,255,.17); animation: slow-spin 24s linear infinite; }
#gate .conversation-core::before{ inset: -52px; }
#gate .conversation-core::after{ inset: -96px; animation-direction: reverse; animation-duration: 36s; }
#gate .conversation-core img{ width: 58px; height: 60px; filter: drop-shadow(0 10px 20px rgba(28,101,255,.3)); }
#gate .core-copy{ margin-top: 13px; text-align: center; }
#gate .core-copy span{ display: block; color: #8a97ba; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
#gate .core-copy b{ display: block; margin-top: 5px; font-size: 19px; letter-spacing: -.04em; }
#gate .waveform{ height: 34px; margin-top: 11px; display: flex; align-items: center; gap: 3px; }
#gate .waveform i{ width: 3px; border-radius: 6px; background: linear-gradient(180deg, var(--h-cyan), var(--h-violet)); animation: wave 1.3s ease-in-out infinite; }
#gate .waveform i:nth-child(1){height:8px}
#gate .waveform i:nth-child(2){height:14px;animation-delay:-.1s}
#gate .waveform i:nth-child(3){height:23px;animation-delay:-.25s}
#gate .waveform i:nth-child(4){height:31px;animation-delay:-.4s}
#gate .waveform i:nth-child(5){height:18px;animation-delay:-.55s}
#gate .waveform i:nth-child(6){height:28px;animation-delay:-.2s}
#gate .waveform i:nth-child(7){height:14px;animation-delay:-.7s}
#gate .waveform i:nth-child(8){height:25px;animation-delay:-.3s}
#gate .waveform i:nth-child(9){height:10px;animation-delay:-.45s}
#gate .waveform i:nth-child(10){height:19px;animation-delay:-.6s}
#gate .waveform i:nth-child(11){height:12px;animation-delay:-.15s}
#gate .waveform i:nth-child(12){height:7px;animation-delay:-.5s}
#gate .orbit-line{ position: absolute; left: 50%; top: 405px; border: 1px solid rgba(63,137,255,.12); border-radius: 50%; transform: translate(-50%,-50%) rotate(-9deg); }
#gate .orbit-line-1{ width: 910px; height: 520px; }
#gate .orbit-line-2{ width: 1130px; height: 660px; transform: translate(-50%,-50%) rotate(12deg); border-style: dashed; opacity: .55; }
#gate .artifact-card{ position: absolute; z-index: 6; width: 302px; min-height: 205px; padding: 19px; border-radius: 20px; border: 1px solid rgba(255,255,255,.095); background: linear-gradient(145deg, rgba(17,23,55,.82), rgba(8,11,28,.82)); box-shadow: 0 25px 65px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(18px); }
#gate .artifact-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(130deg,rgba(255,255,255,.04),transparent 30%); }
#gate .artifact-one{ left: 55px; top: 110px; transform: rotate(-2deg); }
#gate .artifact-two{ right: 45px; top: 88px; transform: rotate(2.5deg); }
#gate .artifact-three{ left: 72px; bottom: 68px; transform: rotate(2deg); }
#gate .artifact-four{ right: 58px; bottom: 51px; transform: rotate(-2.4deg); }
#gate .artifact-top{ display: flex; align-items: center; gap: 9px; color: #7785a5; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
#gate .artifact-icon{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
#gate .artifact-icon svg{ width: 15px; height: 15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#gate .artifact-icon-blue{ color:#5bc8ff;background:rgba(29,145,255,.1);border:1px solid rgba(29,145,255,.17); }
#gate .artifact-icon-mint{ color:var(--h-mint);background:rgba(55,233,189,.09);border:1px solid rgba(55,233,189,.15); }
#gate .artifact-icon-violet{ color:#9c82ff;background:rgba(112,70,255,.1);border:1px solid rgba(112,70,255,.16); }
#gate .artifact-icon-cyan{ color:#51dcff;background:rgba(35,208,255,.09);border:1px solid rgba(35,208,255,.16); }
#gate .artifact-card h3{ margin: 15px 0 8px; font-size: 18px; line-height: 1.18; letter-spacing: -.035em; }
#gate .artifact-card p{ margin: 0; color: #8490ae; font-size: 11px; line-height: 1.55; }
#gate .artifact-source{ margin-top: 14px; padding: 10px 11px; border-left: 2px solid #34cfff; border-radius: 0 8px 8px 0; background: rgba(31,151,255,.06); }
#gate .artifact-source span, #gate .artifact-source b{ display: block; }
#gate .artifact-source span{ color:#c9d2ea;font-size:9px;font-style:italic; }
#gate .artifact-source b{ margin-top:4px;color:#64718f;font-size:7px; }
#gate .task-row{ margin-top: 11px; padding: 9px 10px; display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:rgba(255,255,255,.025);font-size:8px; }
#gate .task-row i{ width:7px;height:7px;border-radius:50%;border:1px solid rgba(55,233,189,.55);box-shadow:inset 0 0 0 2px rgba(55,233,189,.08); }
#gate .task-row span{ color:#b6bfd7; }
#gate .task-row b{color:#6d7b9b;font-size:7px;}
#gate .clip-preview{ height: 82px; margin-top: 12px; position:relative;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.07); }
#gate .clip-preview img{ width:100%;height:100%;object-fit:cover;object-position:center 32%;filter:saturate(.85); }
#gate .clip-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,20,.2),rgba(5,8,20,.05));}
#gate .clip-play{position:absolute;z-index:2;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);}
#gate .clip-play svg{width:14px;height:14px;fill:#fff;}
#gate .clip-duration{position:absolute;z-index:2;right:7px;bottom:6px;padding:3px 5px;border-radius:5px;background:rgba(3,5,15,.72);font-size:7px;}
#gate .artifact-three h3{margin-top:11px;margin-bottom:3px}
#gate .artifact-three>small{color:#687592;font-size:7px;}
#gate .diagram-mini{ margin:14px 0 13px;height:54px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;background:linear-gradient(110deg,rgba(33,152,255,.06),rgba(112,70,255,.06));border:1px solid rgba(255,255,255,.06); }
#gate .diagram-mini span{padding:6px 7px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:7px;color:#b6c0da;}
#gate .diagram-mini i{width:15px;height:1px;background:linear-gradient(90deg,#24cfff,#7654ff);position:relative}
#gate .diagram-mini i::after{content:"";position:absolute;right:-1px;top:-2px;width:4px;height:4px;border-top:1px solid #8063ff;border-right:1px solid #8063ff;transform:rotate(45deg)}
#gate .modes-section{ overflow: hidden; border-block: 1px solid rgba(255,255,255,.055); background: linear-gradient(180deg,#050719,#070a1e 52%,#040617); }
#gate .modes-aura{ position:absolute;width:850px;height:850px;right:-280px;top:40px;border-radius:50%;background:radial-gradient(circle,rgba(85,54,255,.18),rgba(25,126,255,.07) 42%,transparent 69%);filter:blur(10px); }
#gate .modes-layout{ display:grid;grid-template-columns:.86fr 1.14fr;gap:92px;align-items:center; }
#gate .modes-copy h2{ font-size: clamp(50px,5.1vw,74px); }
#gate .modes-copy > p{ max-width:590px; }
#gate .mode-tabs{ margin-top:43px;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08); }
#gate .mode-tab{ width:100%;min-height:88px;padding:13px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;display:grid;grid-template-columns:38px 1fr 24px;align-items:center;gap:8px;text-align:left;cursor:pointer;color:#7d88a5;transition:color .2s ease,padding-left .2s ease,background .2s ease; }
#gate .mode-tab:hover, #gate .mode-tab.active{color:#f3f5ff;padding-left:12px;background:linear-gradient(90deg,rgba(42,134,255,.08),transparent 78%);}
#gate .mode-number{font-size:9px;letter-spacing:.1em;color:#55617f;}
#gate .mode-tab.active .mode-number{color:#46c7ff;}
#gate .mode-tab-copy b{display:block;font-size:15px;letter-spacing:-.02em}
#gate .mode-tab-copy small{display:block;margin-top:5px;color:#6f7b98;font-size:10px;line-height:1.45}
#gate .mode-tab.active .mode-tab-copy small{color:#8e9ab7;}
#gate .mode-arrow{justify-self:end;color:#53607e;font-size:14px;transform:translate(-4px,4px);opacity:0;transition:.2s ease}
#gate .mode-tab:hover .mode-arrow, #gate .mode-tab.active .mode-arrow{opacity:1;transform:translate(0,0);color:#45c6ff;}
#gate .mode-stage-wrap{ position:relative;min-height:700px;display:flex;align-items:center;justify-content:center; }
#gate .mode-stage{ position:relative;z-index:4;width:650px;max-width:100%;height:660px;border:1px solid rgba(135,157,255,.18);border-radius:28px;background:linear-gradient(160deg,rgba(15,20,51,.96),rgba(7,10,27,.96));box-shadow:0 50px 120px rgba(0,0,0,.52),0 0 100px rgba(59,69,255,.10),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden; }
#gate .mode-underlay{position:absolute;width:600px;height:600px;border-radius:28px;border:1px solid rgba(91,94,255,.11);background:rgba(13,15,40,.4);}
#gate .mode-underlay-one{transform:translate(30px,25px) rotate(3.5deg);}
#gate .mode-underlay-two{transform:translate(55px,43px) rotate(6deg);opacity:.45;}
#gate .mode-stage-top{height:62px;padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018);}
#gate .mode-status{display:flex;align-items:center;gap:7px;color:#7582a1;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
#gate .mode-status span{width:6px;height:6px;border-radius:50%;background:var(--h-mint);box-shadow:0 0 12px rgba(55,233,189,.7);}
#gate .mode-label{padding:7px 11px;border-radius:999px;border:1px solid rgba(110,86,255,.19);background:rgba(110,70,255,.09);color:#ad9dff;font-size:9px;font-weight:650;}
#gate .mode-stage-top button{justify-self:end;color:#687594;font-size:12px;letter-spacing:2px;}
#gate .mode-panel{display:none;height:calc(100% - 62px);padding:26px;animation:panel-in .35s ease both}
#gate .mode-panel.active{display:block;}
#gate .mode-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}
#gate .mode-panel-header span{font-size:12px;font-weight:650;color:#dce2f5}
#gate .mode-panel-header small{font-size:8px;color:#667390;}
#gate .recap-stack{display:flex;flex-direction:column;gap:13px}
#gate .recap-stack article{padding:18px;border-radius:16px;border:1px solid rgba(255,255,255,.075);background:linear-gradient(145deg,rgba(255,255,255,.034),rgba(255,255,255,.016));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
#gate .recap-kind{display:inline-flex;padding:5px 7px;border-radius:999px;font-size:7px;text-transform:uppercase;letter-spacing:.1em;font-weight:720}
#gate .recap-kind-mint{color:var(--h-mint);background:rgba(55,233,189,.08);border:1px solid rgba(55,233,189,.15)}
#gate .recap-kind-blue{color:#58c4ff;background:rgba(33,151,255,.08);border:1px solid rgba(33,151,255,.15)}
#gate .recap-kind-violet{color:#a187ff;background:rgba(112,70,255,.08);border:1px solid rgba(112,70,255,.15)}
#gate .recap-stack h3{margin:11px 0 7px;font-size:17px;line-height:1.25;letter-spacing:-.03em}
#gate .recap-stack p{margin:0;color:#8290ae;font-size:10px;line-height:1.5}
#gate .recap-stack article>small{display:block;margin-top:8px;color:#5e6b89;font-size:8px}
#gate .agenda-progress{height:4px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:17px}
#gate .agenda-progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--h-cyan),var(--h-violet));box-shadow:0 0 12px rgba(35,208,255,.35)}
#gate .agenda-list{display:flex;flex-direction:column}
#gate .agenda-list article{min-height:80px;display:grid;grid-template-columns:35px 1fr 24px;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);color:#60708f}
#gate .agenda-list article>span{font-size:9px}
#gate .agenda-list b{display:block;color:#9aa5bf;font-size:13px}
#gate .agenda-list small{display:block;margin-top:5px;color:#596681;font-size:8px}
#gate .agenda-list article>i{justify-self:end;font-style:normal}
#gate .agenda-list article.done b{color:#d5dcef}
#gate .agenda-list article.done>i{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:rgba(55,233,189,.09);border:1px solid rgba(55,233,189,.16);color:var(--h-mint);font-size:9px}
#gate .agenda-list article.current{margin:0 -10px;padding:0 10px;border:1px solid rgba(41,164,255,.17);border-radius:14px;background:rgba(41,164,255,.055)}
#gate .agenda-list article.current b{color:#f0f4ff}
#gate .agenda-list article.current>i{width:7px;height:7px;border-radius:50%;background:#29ccff;box-shadow:0 0 12px rgba(41,204,255,.7)}
#gate .agenda-list article:last-child>i{color:#ffb75c;font-size:12px;font-weight:bold}
#gate .brainstorm-canvas{height:500px;position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:radial-gradient(circle at 50% 45%,rgba(76,70,255,.11),transparent 43%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px;}
#gate .brainstorm-canvas svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:url(#network-line);stroke-width:1.3;stroke-dasharray:5 6;opacity:.55}
#gate .canvas-node{position:absolute;z-index:2;padding:11px 13px;border-radius:13px;border:1px solid rgba(255,255,255,.09);background:rgba(10,14,35,.88);box-shadow:0 12px 30px rgba(0,0,0,.28)}
#gate .canvas-node span, #gate .canvas-node small{display:block}
#gate .canvas-node span{font-size:10px;font-weight:660;color:#e8ecfa}
#gate .canvas-node small{margin-top:3px;font-size:7px;color:#6d7895}
#gate .node-primary{left:50%;top:50%;transform:translate(-50%,-50%);padding:20px 28px;text-align:center;border-color:rgba(77,159,255,.23);background:linear-gradient(145deg,rgba(31,129,255,.16),rgba(91,55,255,.14));box-shadow:0 0 35px rgba(48,99,255,.16)}
#gate .node-primary span{font-size:16px}
#gate .node-one{left:40px;top:55px}
#gate .node-two{right:40px;top:50px}
#gate .node-three{left:36px;bottom:55px}
#gate .node-four{right:34px;bottom:52px}
#gate .align-card{padding:28px;border-radius:19px;border:1px solid rgba(91,131,255,.16);background:linear-gradient(145deg,rgba(33,111,255,.08),rgba(103,59,255,.07));}
#gate .align-kicker{font-size:8px;text-transform:uppercase;letter-spacing:.13em;color:#6d7b9d}
#gate .align-card>h3{margin:13px 0 24px;font-size:24px;line-height:1.2;letter-spacing:-.045em}
#gate .support-row{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center;padding:20px 0;border-block:1px solid rgba(255,255,255,.07)}
#gate .support-ring{width:118px;height:118px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(55,233,189,.09),transparent 68%);border:6px solid rgba(55,233,189,.14);box-shadow:inset 0 0 0 2px rgba(55,233,189,.5),0 0 30px rgba(55,233,189,.09)}
#gate .support-ring span{font-size:27px;font-weight:720;letter-spacing:-.05em}
#gate .support-ring small{color:#55d6b4;font-size:8px;text-transform:uppercase;letter-spacing:.1em}
#gate .support-people{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#gate .support-people>div{padding:8px;display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:8px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
#gate .support-people img{grid-row:1/3;width:28px;height:28px;border-radius:8px;object-fit:cover}
#gate .support-people span{font-size:8px;color:#cbd2e6}
#gate .support-people b{font-size:6px;color:var(--h-mint);text-transform:uppercase;letter-spacing:.08em}
#gate .signed-record{margin-top:20px;padding:13px 14px;border-radius:11px;display:flex;align-items:center;justify-content:space-between;background:rgba(55,233,189,.055);border:1px solid rgba(55,233,189,.12)}
#gate .signed-record span{color:#7fe8cb;font-size:9px;font-weight:650}
#gate .signed-record b{color:#687794;font-size:7px;font-weight:500}
#gate .feature-pair{ background:#030611; }
#gate .feature-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
#gate .feature-card{min-height:770px;padding:48px 48px 32px;border-radius:30px;border:1px solid rgba(255,255,255,.085);position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(15,20,48,.8),rgba(6,9,24,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
#gate .feature-card::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(20px);pointer-events:none}
#gate .feature-record::before{right:-230px;top:-240px;background:radial-gradient(circle,rgba(22,140,255,.21),transparent 67%)}
#gate .feature-ai::before{left:-250px;bottom:-260px;background:radial-gradient(circle,rgba(112,70,255,.2),transparent 68%)}
#gate .feature-copy{position:relative;z-index:3;max-width:520px}
#gate .feature-icon-big{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px}
#gate .feature-icon-big svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#gate .feature-icon-blue{color:#50c3ff;background:rgba(28,140,255,.10);border:1px solid rgba(28,140,255,.18)}
#gate .feature-icon-violet{background:linear-gradient(145deg,rgba(22,160,255,.12),rgba(111,62,255,.15));border:1px solid rgba(90,120,255,.2)}
#gate .feature-icon-violet img{width:36px;height:36px}
#gate .feature-kicker{color:#72809f;font-size:9px;font-weight:720;text-transform:uppercase;letter-spacing:.15em}
#gate .feature-copy h2{margin:13px 0 15px;font-size:clamp(38px,3.4vw,55px);line-height:1.02;letter-spacing:-.055em}
#gate .feature-copy p{margin:0;color:#8995b2;font-size:15px;line-height:1.62;letter-spacing:-.015em}
#gate .feature-copy>a{display:inline-flex;align-items:center;gap:8px;margin-top:23px;color:#7bcfff;font-size:12px;font-weight:640}
#gate .feature-copy>a span{transition:transform .18s ease}
#gate .feature-copy>a:hover span{transform:translate(3px,-3px)}
#gate .recording-ui{position:absolute;left:48px;right:48px;bottom:34px;height:320px;padding:13px;border-radius:21px;border:1px solid rgba(255,255,255,.09);background:rgba(6,9,23,.73);box-shadow:0 24px 60px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(16px)}
#gate .recording-preview{height:203px;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:hidden;border-radius:13px;background:#0c1025}
#gate .recording-preview img{width:100%;height:100%;object-fit:cover}
#gate .recording-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(3,5,15,.68));pointer-events:none}
#gate .recording-overlay{position:absolute;z-index:2;left:10px;top:10px;padding:5px 7px;border-radius:7px;background:rgba(4,6,17,.72);border:1px solid rgba(255,255,255,.11);font-size:7px;font-weight:650;color:#ff8592}
#gate .rec-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:4px;background:#ff5b6e;box-shadow:0 0 8px rgba(255,91,110,.65)}
#gate .recording-title{position:absolute;z-index:2;left:12px;bottom:11px;font-size:10px;font-weight:650}
#gate .recording-preview button{position:absolute;z-index:3;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:43px;height:43px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;cursor:pointer}
#gate .recording-preview button svg{width:21px;height:21px;fill:#fff}
#gate .recording-timeline{height:40px;position:relative;display:flex;align-items:center}
#gate .timeline-wave{height:25px;flex:1;display:flex;align-items:center;gap:2px;overflow:hidden}
#gate .timeline-wave i{width:4%;border-radius:5px;background:linear-gradient(180deg,rgba(63,192,255,.75),rgba(103,74,255,.5));}
#gate .timeline-wave i:nth-child(1), #gate .timeline-wave i:nth-child(7), #gate .timeline-wave i:nth-child(13){height:6px}
#gate .timeline-wave i:nth-child(2), #gate .timeline-wave i:nth-child(9), #gate .timeline-wave i:nth-child(17){height:13px}
#gate .timeline-wave i:nth-child(3), #gate .timeline-wave i:nth-child(6), #gate .timeline-wave i:nth-child(11){height:20px}
#gate .timeline-wave i:nth-child(4), #gate .timeline-wave i:nth-child(15){height:25px}
#gate .timeline-wave i:nth-child(5), #gate .timeline-wave i:nth-child(10), #gate .timeline-wave i:nth-child(18){height:10px}
#gate .timeline-wave i:nth-child(8), #gate .timeline-wave i:nth-child(12), #gate .timeline-wave i:nth-child(16){height:17px}
#gate .recording-timeline>span{margin-left:8px;color:#75829f;font-size:7px}
#gate .recording-ready{height:48px;padding:0 9px;display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;border-top:1px solid rgba(255,255,255,.07)}
#gate .ready-check{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;color:var(--h-mint);background:rgba(55,233,189,.08);border:1px solid rgba(55,233,189,.14);font-size:10px}
#gate .recording-ready b, #gate .recording-ready small{display:block}
#gate .recording-ready b{font-size:9px}
#gate .recording-ready small{margin-top:3px;color:#697693;font-size:7px}
#gate .recording-ready button{height:27px;padding:0 10px;border-radius:8px;border:1px solid rgba(56,171,255,.18);background:rgba(34,137,255,.08);color:#69c9ff;font-size:7px;cursor:pointer}
#gate .ai-answer-ui{position:absolute;left:48px;right:48px;bottom:44px;min-height:330px;padding:17px;border-radius:21px;border:1px solid rgba(255,255,255,.09);background:rgba(7,10,26,.77);box-shadow:0 25px 65px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(18px)}
#gate .question-bubble{margin-left:19%;padding:12px 14px;border-radius:14px 14px 4px 14px;background:linear-gradient(120deg,rgba(29,136,255,.16),rgba(103,59,255,.15));border:1px solid rgba(92,118,255,.18);font-size:10px;color:#d8def0}
#gate .question-bubble span{display:block;margin-bottom:4px;color:#7181a2;font-size:7px;text-transform:uppercase;letter-spacing:.1em}
#gate .teama-answer{margin-top:13px;padding:15px;border-radius:14px 14px 14px 4px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
#gate .teama-answer-head{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px}
#gate .teama-answer-head b, #gate .teama-answer-head small{display:block}
#gate .teama-answer-head b{font-size:10px}
#gate .teama-answer-head small{margin-top:2px;color:#687592;font-size:7px}
#gate .voice-bars{display:flex;align-items:center;gap:2px;height:18px}
#gate .voice-bars i{width:2px;border-radius:5px;background:linear-gradient(180deg,var(--h-cyan),var(--h-violet));animation:wave 1s ease-in-out infinite}
#gate .voice-bars i:nth-child(1){height:7px}
#gate .voice-bars i:nth-child(2){height:15px;animation-delay:-.2s}
#gate .voice-bars i:nth-child(3){height:10px;animation-delay:-.4s}
#gate .voice-bars i:nth-child(4){height:16px;animation-delay:-.1s}
#gate .teama-answer>p{margin:14px 0 12px;color:#d3d9eb;font-size:11px;line-height:1.5}
#gate .answer-source{padding:10px 11px;border-radius:10px;background:rgba(31,147,255,.06);border:1px solid rgba(31,147,255,.10)}
#gate .answer-source>span{color:#51bdff;font-size:6.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
#gate .answer-source blockquote{margin:6px 0 5px;color:#aeb8d2;font-size:9px;font-style:italic}
#gate .answer-source small{color:#64718e;font-size:7px}
#gate .external-label{margin-top:10px;color:#63708d;font-size:7px}
#gate .external-label span{color:#7685a4}
#gate .receipts-section{overflow:hidden;background:linear-gradient(180deg,#030611,#050819 50%,#030611)}
#gate .receipts-section::before{content:"";position:absolute;width:900px;height:900px;left:-420px;top:-50px;border-radius:50%;background:radial-gradient(circle,rgba(16,129,255,.12),transparent 68%);}
#gate .receipts-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:85px;align-items:center}
#gate .receipts-copy h2{font-size:clamp(52px,5.2vw,77px)}
#gate .receipt-points{margin-top:40px;display:flex;flex-direction:column;gap:20px}
#gate .receipt-points>div{display:grid;grid-template-columns:38px 1fr;gap:13px;padding-top:18px;border-top:1px solid rgba(255,255,255,.075)}
#gate .receipt-points>div>span{font-size:9px;color:#486d9f;letter-spacing:.1em}
#gate .receipt-points p{margin:0;color:#73809d;font-size:12px;line-height:1.58}
#gate .receipt-points b{color:#c9d1e7;font-weight:620}
#gate .receipt-visual{height:600px;position:relative}
#gate .transcript-card{position:absolute;left:0;top:44px;width:380px;padding:17px;border-radius:20px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(150deg,rgba(14,19,48,.95),rgba(7,10,27,.96));box-shadow:0 35px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);z-index:3}
#gate .transcript-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.07)}
#gate .transcript-head span{font-size:10px;font-weight:650}
#gate .transcript-head small{color:#65728f;font-size:7px}
#gate .transcript-line{display:grid;grid-template-columns:33px 1fr;gap:10px;padding:15px 7px;border-bottom:1px solid rgba(255,255,255,.06);position:relative}
#gate .transcript-line.active{margin:0 -8px;padding-inline:15px;border:1px solid rgba(35,174,255,.18);border-radius:12px;background:rgba(35,174,255,.055)}
#gate .transcript-line img{width:33px;height:33px;border-radius:9px;object-fit:cover}
#gate .transcript-line span{font-size:9px;font-weight:650}
#gate .transcript-line span small{margin-left:4px;color:#5f6c88;font-size:6px}
#gate .transcript-line p{margin:5px 0 0;color:#909bb6;font-size:8px;line-height:1.55}
#gate .receipt-connectors{position:absolute;inset:0;width:100%;height:100%;z-index:2;fill:none;stroke:#2bbdfb;stroke-width:1.2;stroke-dasharray:4 6;opacity:.45}
#gate .receipt-card{position:absolute;z-index:4;right:0;width:280px;padding:16px;border-radius:15px;border:1px solid rgba(255,255,255,.085);background:rgba(11,15,37,.9);box-shadow:0 18px 45px rgba(0,0,0,.33),inset 0 1px 0 rgba(255,255,255,.035)}
#gate .receipt-card-one{top:45px}
#gate .receipt-card-two{top:217px}
#gate .receipt-card-three{top:386px}
#gate .receipt-card span{display:block;color:#50c8ff;font-size:7px;text-transform:uppercase;letter-spacing:.12em;font-weight:720}
#gate .receipt-card b{display:block;margin-top:8px;color:#e1e6f5;font-size:12px;line-height:1.4}
#gate .receipt-card small{display:block;margin-top:8px;color:#697693;font-size:7px}
#gate .agents-section{padding-bottom:100px;overflow:hidden;border-top:1px solid rgba(255,255,255,.055);background:linear-gradient(180deg,#06091a,#030611)}
#gate .agents-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,transparent,black 25%,black 80%,transparent);}
#gate .agents-hero{max-width:900px;margin:0 auto;text-align:center}
#gate .agents-hero>p{max-width:660px;margin-inline:auto}
#gate .agent-network{height:690px;max-width:1120px;margin:20px auto 0;position:relative}
#gate .agent-network::before{content:"";position:absolute;width:600px;height:600px;left:50%;top:49%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(25,133,255,.13),rgba(99,60,255,.07) 45%,transparent 70%)}
#gate .agent-network>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:url(#network-line);stroke-width:1.35;stroke-dasharray:6 7;opacity:.46}
#gate .agent-node{position:absolute;z-index:3;border:1px solid rgba(255,255,255,.09);background:rgba(9,13,32,.88);box-shadow:0 24px 65px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(18px)}
#gate .agent-node-center{left:50%;top:50%;transform:translate(-50%,-50%);width:250px;height:250px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-color:rgba(76,155,255,.23);background:radial-gradient(circle at 45% 35%,rgba(28,137,255,.2),rgba(16,17,49,.94) 58%,rgba(7,9,24,.98));box-shadow:0 0 0 16px rgba(34,122,255,.025),0 0 0 45px rgba(34,122,255,.015),0 35px 90px rgba(0,0,0,.48)}
#gate .agent-node-center img{width:70px;height:73px}
#gate .agent-node-center span{margin-top:14px;font-size:16px;font-weight:680}
#gate .agent-node-center small{margin-top:5px;color:#71809e;font-size:8px;text-transform:uppercase;letter-spacing:.1em}
#gate .agent-node:not(.agent-node-center){width:180px;min-height:112px;padding:17px;border-radius:17px;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:11px}
#gate .agent-emoji{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(29,151,255,.12),rgba(111,63,255,.12));border:1px solid rgba(87,131,255,.18);font-size:18px}
#gate .agent-node b{align-self:end;font-size:11px}
#gate .agent-node small{align-self:start;margin-top:3px;color:#6b7896;font-size:7px}
#gate .agent-node-one{left:50px;top:82px;transform:rotate(-2deg)}
#gate .agent-node-two{right:45px;top:75px;transform:rotate(2deg)}
#gate .agent-node-three{left:30px;bottom:67px;transform:rotate(2deg)}
#gate .agent-node-four{right:30px;bottom:57px;transform:rotate(-2deg)}
#gate .network-pulse{position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;background:#3bd5ff;box-shadow:0 0 15px rgba(59,213,255,.9);animation:pulse-travel 5s linear infinite}
#gate .pulse-one{left:20%;top:20%;}
#gate .pulse-two{right:19%;top:18%;animation-delay:-1.2s}
#gate .pulse-three{left:17%;bottom:18%;animation-delay:-2.5s}
#gate .pulse-four{right:18%;bottom:16%;animation-delay:-3.7s}
#gate .developers-section{padding-top:115px;background:radial-gradient(circle at 80% 50%,rgba(88,53,255,.095),transparent 33%),#030611}
#gate .developer-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:center}
#gate .developer-copy h2{font-size:clamp(56px,5.5vw,82px)}
#gate .developer-copy>p{max-width:560px}
#gate .developer-stats{display:flex;gap:32px;margin:36px 0 33px}
#gate .developer-stats>div{padding-left:16px;border-left:1px solid rgba(255,255,255,.1)}
#gate .developer-stats strong, #gate .developer-stats span{display:block}
#gate .developer-stats strong{font-size:22px;letter-spacing:-.04em}
#gate .developer-stats span{margin-top:4px;color:#6c7895;font-size:8px;text-transform:uppercase;letter-spacing:.11em}
#gate .code-window{border-radius:24px;border:1px solid rgba(103,130,255,.2);background:linear-gradient(155deg,rgba(14,18,46,.96),rgba(6,9,25,.98));box-shadow:0 45px 110px rgba(0,0,0,.55),0 0 100px rgba(66,69,255,.09),inset 0 1px 0 rgba(255,255,255,.055);overflow:hidden;transform:perspective(1400px) rotateY(-3deg) rotateX(1.5deg)}
#gate .code-topbar{height:55px;padding:0 17px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
#gate .code-topbar span{font-size:9px;color:#7d89a7}
#gate .code-topbar button{justify-self:end;height:26px;padding:0 9px;border-radius:7px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#7582a0;font-size:7px;cursor:pointer}
#gate .code-window pre{margin:0;padding:34px 35px 27px;overflow:auto;color:#bcc5dc;font:12px/1.75 "DejaVu Sans Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#gate .code-purple{color:#b99aff}
#gate .code-green{color:#72e5bd}
#gate .code-blue{color:#66cfff}
#gate .code-console{margin:0 22px 19px;padding:12px 13px;border-radius:10px;border:1px solid rgba(55,233,189,.12);background:rgba(55,233,189,.045);color:#8c9ab8;font:8px/1.4 "DejaVu Sans Mono",monospace}
#gate .code-console b{color:#d4dced}
#gate .console-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:var(--h-mint);box-shadow:0 0 10px rgba(55,233,189,.65)}
#gate .code-badges{padding:0 22px 22px;display:flex;gap:7px}
#gate .code-badges span{padding:6px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#6e7b98;font-size:7px;text-transform:uppercase;letter-spacing:.08em}
#gate .final-cta-section{min-height:770px;position:relative;display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);background:#040617}
#gate .final-cta-aura{position:absolute;inset:-20% -10%;background:radial-gradient(circle at 50% 52%,rgba(30,125,255,.2),rgba(101,59,255,.11) 32%,transparent 64%)}
#gate .final-cta-rings{position:absolute;width:880px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.18;animation:slow-spin 70s linear infinite}
#gate .final-cta{text-align:center;max-width:910px}
#gate .final-mark{width:70px;height:73px;margin:0 auto 24px;filter:drop-shadow(0 17px 30px rgba(34,99,255,.3))}
#gate .final-cta h2{font-size:clamp(63px,6.8vw,98px);margin-top:20px}
#gate .final-cta>p{max-width:600px;margin:0 auto}
#gate .start-form{width:min(100%,620px);margin:32px auto 0;padding:6px;display:grid;grid-template-columns:1fr auto;gap:7px;border-radius:17px;border:1px solid rgba(255,255,255,.11);background:rgba(7,10,27,.69);box-shadow:0 25px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(18px)}
#gate .start-form input{min-width:0;height:56px;padding:0 18px;border:0;outline:0;background:transparent;color:#fff;font-size:14px}
#gate .start-form input::placeholder{color:#65708d}
#gate .final-trustline{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:24px;color:#6e7a97;font-size:9px}
#gate .final-trustline span{display:inline-flex;align-items:center;gap:6px}
#gate .final-trustline i{font-style:normal;color:var(--h-mint)}
#gate .site-footer{padding:72px 0 28px;border-top:1px solid rgba(255,255,255,.065);background:#03050d}
#gate .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
#gate .footer-brand p{margin:17px 0 0;color:#56627e;font-size:11px}
#gate .footer-links{display:flex;flex-direction:column;gap:12px}
#gate .footer-links>span{margin-bottom:3px;color:#d7dced;font-size:10px;font-weight:650}
#gate .footer-links a{width:max-content;color:#65718e;font-size:10px;transition:color .18s ease}
#gate .footer-links a:hover{color:#fff}
#gate .footer-bottom{margin-top:58px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;color:#454f68;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
#gate .start-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .22s ease,visibility .22s ease}
#gate .start-modal.open{visibility:visible;opacity:1}
#gate .modal-backdrop{position:absolute;inset:0;background:rgba(1,3,10,.76);backdrop-filter:blur(17px)}
#gate .modal-card{position:relative;z-index:2;width:min(100%,480px);padding:40px;border-radius:26px;border:1px solid rgba(112,145,255,.2);background:linear-gradient(155deg,rgba(17,22,54,.98),rgba(6,9,25,.99));box-shadow:0 50px 130px rgba(0,0,0,.7),0 0 100px rgba(46,82,255,.13),inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(15px) scale(.98);transition:transform .25s ease}
#gate .start-modal.open .modal-card{transform:translateY(0) scale(1)}
#gate .modal-close{position:absolute;right:15px;top:14px;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#7f8aa7;font-size:20px;cursor:pointer}
#gate .modal-brand{width:48px;height:48px;padding:4px;border-radius:14px;background:linear-gradient(145deg,rgba(30,153,255,.13),rgba(111,63,255,.16));border:1px solid rgba(92,128,255,.2);margin-bottom:20px}
#gate .modal-brand img{width:100%;height:100%;object-fit:contain}
#gate .modal-kicker{color:#56c8ff;font-size:8px;font-weight:720;text-transform:uppercase;letter-spacing:.14em}
#gate .modal-card h2{margin:11px 0 9px;font-size:31px;line-height:1.08;letter-spacing:-.045em}
#gate .modal-card>p{margin:0 0 25px;color:#7d89a6;font-size:12px;line-height:1.5}
#gate .modal-card>label{display:block;margin:0 0 7px;color:#77839f;font-size:8px;text-transform:uppercase;letter-spacing:.1em}
#gate .modal-card>input{width:100%;height:54px;padding:0 15px;border-radius:12px;border:1px solid rgba(255,255,255,.1);outline:none;background:rgba(3,6,17,.58);color:#fff;font-size:14px;transition:border-color .18s ease,box-shadow .18s ease}
#gate .modal-card>input:focus{border-color:rgba(43,180,255,.42);box-shadow:0 0 0 4px rgba(43,180,255,.07)}
#gate .modal-card>input::placeholder{color:#5e6985}
#gate .device-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 17px}
#gate .device-toggle{height:44px;border-radius:11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);display:flex;align-items:center;justify-content:center;gap:8px;color:#7b87a3;font-size:9px;cursor:pointer}
#gate .device-toggle.active{color:#cfe3ff;border-color:rgba(42,162,255,.18);background:rgba(42,162,255,.06)}
#gate .device-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#gate .modal-submit{width:100%}
#gate .prototype-note{display:block;margin-top:13px;color:#4f5b76;font-size:7px;line-height:1.45;text-align:center}
/* Visible by DEFAULT. The fade is an enhancement, and it only applies once the script
   that can undo it is actually running — `js-reveals` is stamped on <html> by the
   first line of home.js. Before this the order was the other way round: everything
   started at opacity 0 and waited for JavaScript to reveal it, which meant a slow
   script, a failed script or a script still parsing left a reader looking at a blank
   page under a working navigation. A headline above the fold must not depend on
   JavaScript having run to be readable. */
#gate .reveal{opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,.8,.23,1),transform .75s cubic-bezier(.22,.8,.23,1)}
html.js-reveals #gate .reveal{opacity:0;transform:translateY(22px)}
html.js-reveals #gate .reveal.in-view{opacity:1;transform:none}
#gate .reveal.in-view{opacity:1;transform:none}
#gate .reveal-delay-1{transition-delay:.12s}
#gate .reveal-delay-2{transition-delay:.23s}
@keyframes slow-spin{ to { transform: rotate(360deg); } }
@keyframes float-y{ 0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)} }
@keyframes wave{ 0%,100%{transform:scaleY(.55);opacity:.62}50%{transform:scaleY(1);opacity:1} }
@keyframes marquee{ to { transform: translateX(-50%); } }
@keyframes panel-in{ from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
@keyframes pulse-travel{ 0%,100%{opacity:.1;transform:scale(.6)}45%,55%{opacity:1;transform:scale(1.2)} }
@media (max-width: 1250px){
#gate{ --h-page: 1160px; }
#gate .nav-shell{ grid-template-columns: 220px 1fr 280px; }
#gate .nav-links{ gap: 21px; }
#gate .brand-wordmark{ width: 158px; }
#gate .hero-layout{ grid-template-columns: .85fr 1.15fr; }
#gate .meeting-perspective{ width: 690px; }
#gate .meeting-body{ height: 430px; }
#gate .hero-copy h1{ font-size: 72px; }
#gate .hero-visual{ transform: scale(.94); transform-origin: center right; }
#gate .receipt-card{ width: 250px; }
#gate .transcript-card{ width: 345px; }
}
@media (max-width: 1060px){
#gate .page-width{ width: min(calc(100% - 40px), var(--h-page)); }
#gate .nav-shell{ grid-template-columns: 1fr auto; }
#gate .nav-links{ position:absolute;top:70px;left:18px;right:18px;padding:20px;border:1px solid var(--h-line);border-radius:16px;background:rgba(4,7,18,.96);display:none;flex-direction:column;align-items:flex-start;box-shadow:var(--h-shadow); }
#gate .nav-shell.nav-open .nav-links{ display:flex; }
#gate .nav-actions{ display:none; }
#gate .menu-button{ display:block; justify-self:end; }
#gate .hero{ padding-top: 135px; min-height: auto; }
#gate .hero-layout{ grid-template-columns: 1fr; gap: 35px; }
#gate .hero-copy{ max-width:800px;text-align:center;margin:0 auto;padding:20px 0 0; }
#gate .hero-copy .eyebrow{ justify-content:center; }
#gate .hero-copy h1{ max-width:850px;margin-inline:auto;font-size:clamp(64px,9vw,92px); }
#gate .hero-subhead{ margin-inline:auto; }
#gate .hero-actions, #gate .hero-trustline{ justify-content:center; }
#gate .hero-visual{ min-height:700px; transform: none; }
#gate .meeting-perspective{ width:760px; }
#gate .meeting-body{ height:468px; }
#gate .hero-proof{ margin-top:10px; }
#gate .modes-layout, #gate .receipts-layout, #gate .developer-layout{ grid-template-columns:1fr;gap:60px; }
#gate .modes-copy, #gate .receipts-copy, #gate .developer-copy{ max-width:760px; }
#gate .mode-stage-wrap{ min-height:680px; }
#gate .receipts-layout{ gap:35px; }
#gate .receipt-visual{ width:min(100%,760px);margin-inline:auto; }
#gate .developer-copy{ text-align:center;margin-inline:auto; }
#gate .developer-copy>p{ margin-inline:auto; }
#gate .developer-stats{ justify-content:center; }
#gate .developer-copy .button{ margin-inline:auto; }
#gate .code-window{ max-width:760px;margin-inline:auto;transform:none; }
#gate .agent-network{ transform:scale(.9);margin-top:-20px; }
}
@media (max-width: 820px){
#gate .section{ padding:105px 0; }
#gate .hero{ padding-bottom:48px; }
#gate .hero-visual{ min-height:620px; }
#gate .meeting-perspective{ width:690px; transform:scale(.91); }
#gate .float-card-left{ left:0; }
#gate .float-card-right{right:0}
#gate .float-card-top{right:20px}
#gate .hero-proof{ grid-template-columns:1fr;gap:12px;text-align:center; }
#gate .hero-proof .proof-rule{ display:none; }
#gate .outcome-orbit{ height:1080px;margin-top:50px; }
#gate .conversation-core{ top:410px; }
#gate .orbit-line{ top:540px; }
#gate .orbit-line-1{ width:650px;height:790px; }
#gate .orbit-line-2{width:780px;height:930px}
#gate .artifact-one{left:3%;top:55px}
#gate .artifact-two{right:2%;top:80px}
#gate .artifact-three{left:4%;bottom:70px}
#gate .artifact-four{right:2%;bottom:45px}
#gate .feature-pair-grid{ grid-template-columns:1fr; }
#gate .feature-card{ min-height:730px; }
#gate .feature-card::before{ opacity:.8; }
#gate .agent-network{ height:920px;transform:none;max-width:600px; }
#gate .agent-network>svg{ display:none; }
#gate .agent-node-center{ top:50%; }
#gate .agent-node-one{left:0;top:70px}
#gate .agent-node-two{right:0;top:155px}
#gate .agent-node-three{left:0;bottom:140px}
#gate .agent-node-four{right:0;bottom:50px}
#gate .network-pulse{ display:none; }
#gate .footer-grid{ grid-template-columns:1.8fr 1fr 1fr; }
#gate .footer-grid .footer-links:last-child{grid-column:2/4}
}
@media (max-width: 640px){
#gate .page-width{ width: min(calc(100% - 28px), var(--h-page)); }
#gate .site-header{ padding:9px 10px 0; }
#gate .nav-shell{ min-height:58px;border-radius:15px;padding-left:12px; }
#gate .brand-mark{ width:28px;height:29px }
#gate .brand-wordmark{width:142px}
#gate .brand-lockup{gap:10px}
#gate .hero{ padding-top:116px; }
#gate .hero-copy h1{ font-size:52px;line-height:.96;letter-spacing:-.061em; }
#gate .hero-subhead{ font-size:16px; }
#gate .hero-actions{ flex-wrap:wrap;max-width:390px;margin-inline:auto;margin-top:28px; }
#gate .hero-actions input[type=text]{ flex:1 1 100%; }
#gate .hero-devices{ flex:0 0 auto }
#gate .hero-actions .button{ flex:1 1 auto }
#gate .hero-actions .button{ width:100%; }
#gate .hero-trustline{ gap:8px;font-size:10px; }
/* The frame is laid out at 760px and scaled DOWN to fit, because scaling the layout
   itself would reflow every element inside it into a different picture. .64 of 760 is
   486px, which is wider than any phone, so the right edge was cut off; the scale is
   now taken from the viewport so the whole frame is always visible. transform-origin
   at the top so the container can be exactly the scaled height, with no dead band
   above or below from centring a 595px layout box. */
#gate .hero-visual{ --frame-s: .47; height: calc(600px * var(--frame-s)); min-height:0; min-width:0; width:100%; margin:5px 0 0; overflow:visible; display:block; position:relative; }
/* Absolutely positioned at the container's top-left and scaled from that corner. This
   used to rely on where the engine put a 760px block inside a 362px parent before
   scaling it about its centre — Chromium centred it, WebKit started it at the left
   edge as the spec says, and on an iPhone the frame ran off the right of the screen.
   left:0 + transform-origin:top left is the same answer everywhere. */
#gate .meeting-perspective{ position:absolute; left:0; top:0; width:760px;max-width:none;margin:0;transform:scale(var(--frame-s));transform-origin:top left; }
#gate .float-card-top{top:30px;right:4px}
#gate .float-card-left{left:-20px;bottom:60px}
#gate .float-card-right{right:-20px;bottom:35px}
#gate .hero-proof{ font-size:9px; }
#gate .section-heading h2, #gate .modes-copy h2, #gate .receipts-copy h2, #gate .agents-hero h2, #gate .developer-copy h2{font-size:46px}
#gate .section-heading p, #gate .modes-copy>p, #gate .receipts-copy>p, #gate .agents-hero>p, #gate .developer-copy>p{font-size:16px}
#gate .outcome-orbit{ height:1250px;margin-top:30px; }
#gate .conversation-core{ top:485px;width:220px;height:220px; }
#gate .orbit-line{top:595px}
#gate .orbit-line-1{width:560px;height:910px}
#gate .orbit-line-2{width:660px;height:1080px}
#gate .artifact-card{width:280px;min-height:auto}
#gate .artifact-one{left:50%;top:25px;transform:translateX(-50%) rotate(-1deg)}
#gate .artifact-two{left:50%;right:auto;top:235px;transform:translateX(-50%) rotate(1deg)}
#gate .artifact-three{left:50%;bottom:215px;transform:translateX(-50%) rotate(1deg)}
#gate .artifact-four{left:50%;right:auto;bottom:5px;transform:translateX(-50%) rotate(-1deg)}
#gate .modes-layout{gap:45px}
#gate .mode-tabs{margin-top:28px}
#gate .mode-stage-wrap{min-height:570px;margin-inline:-6px}
#gate .mode-stage{height:550px;border-radius:22px}
#gate .mode-underlay{height:510px;width:90%}
#gate .mode-panel{padding:18px}
#gate .recap-stack article{padding:13px}
#gate .recap-stack h3{font-size:14px}
#gate .agenda-list article{min-height:66px}
#gate .brainstorm-canvas{height:400px}
#gate .node-primary{padding:15px 18px}
#gate .canvas-node{padding:9px}
#gate .node-one{left:15px}
#gate .node-two{right:15px}
#gate .node-three{left:15px}
#gate .node-four{right:15px}
#gate .align-card{padding:18px}
#gate .align-card>h3{font-size:19px}
#gate .support-row{grid-template-columns:1fr;justify-items:center}
#gate .support-people{width:100%}
#gate .signed-record{align-items:flex-start;gap:8px;flex-direction:column}
#gate .feature-card{min-height:705px;padding:34px 24px 23px;border-radius:24px}
#gate .feature-copy h2{font-size:40px}
#gate .feature-copy p{font-size:14px}
#gate .recording-ui, #gate .ai-answer-ui{left:18px;right:18px;bottom:22px}
#gate .recording-ui{height:315px}
#gate .ai-answer-ui{min-height:335px}
#gate .question-bubble{margin-left:8%}
#gate .receipt-visual{height:760px}
#gate .transcript-card{left:50%;top:0;transform:translateX(-50%);width:min(100%,365px)}
#gate .receipt-connectors{display:none}
#gate .receipt-card{left:50%;right:auto;transform:translateX(-50%);width:min(92%,310px)}
#gate .receipt-card-one{top:390px}
#gate .receipt-card-two{top:508px}
#gate .receipt-card-three{top:626px}
#gate .agent-network{height:860px}
#gate .agent-node-center{width:210px;height:210px}
#gate .agent-node:not(.agent-node-center){width:155px;min-height:96px;padding:12px;grid-template-columns:34px 1fr}
#gate .agent-emoji{width:34px;height:34px;font-size:15px}
#gate .agent-node-one{left:-5px;top:45px}
#gate .agent-node-two{right:-5px;top:135px}
#gate .agent-node-three{left:-5px;bottom:125px}
#gate .agent-node-four{right:-5px;bottom:35px}
#gate .developer-stats{gap:15px}
#gate .developer-stats>div{padding-left:10px}
#gate .code-window pre{padding:23px 18px;font-size:9px;line-height:1.7}
#gate .code-console{margin-inline:14px}
#gate .code-badges{padding-inline:14px}
#gate .final-cta-section{min-height:700px}
#gate .final-cta h2{font-size:53px}
#gate .start-form{grid-template-columns:1fr;padding:7px}
#gate .start-form .button{width:100%}
#gate .final-trustline{flex-direction:column;gap:8px}
#gate .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
#gate .footer-brand{grid-column:1/3}
#gate .footer-grid .footer-links:last-child{grid-column:auto}
#gate .footer-bottom{margin-top:40px}
#gate .modal-card{padding:30px 22px;border-radius:22px}
}
@media (prefers-reduced-motion: reduce){
#gate{ scroll-behavior: auto; }
#gate, #gate *, #gate *::before, #gate *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
#gate .reveal{ opacity:1;transform:none; }
}

/* ───────── the live product's own bits, inside the new design ───────── */
#gate .startnote{
  margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--h-muted-2);text-align:center;
}
#gate .startnote.bad{color:var(--h-red)}
#gate .modal-card input[type=text]{
  width:100%;background:rgba(4,7,20,.72);border:1px solid var(--h-line);color:var(--h-text);
  border-radius:var(--h-radius-sm);padding:13px 15px;font-size:15px;outline:none;
  transition:border-color .16s,box-shadow .16s;
}
#gate .modal-card input[type=text]:focus{
  border-color:rgba(35,208,255,.55);box-shadow:0 0 0 3px rgba(35,208,255,.12);
}
#gate .modal-submit[disabled]{opacity:.6;pointer-events:none}
/* the account control sits in the nav beside Join by code */
#gate .nav-actions #auth-slot{display:inline-flex;align-items:center}
#gate .nav-actions .signin-btn{color:var(--h-muted);border-color:var(--h-line);font-size:13px;padding:7px 13px}
#gate .nav-actions .signin-btn:hover{color:var(--h-white);border-color:var(--h-line-bright)}
#gate button.nav-link-muted{background:none;border:0;cursor:pointer;font:inherit}
#gate .modal-live{
  margin:-4px 0 4px;font-size:12px;line-height:1.5;color:var(--h-mint);
  display:flex;align-items:center;gap:7px;
}
#gate .modal-live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
  box-shadow:0 0 8px currentColor;
}


/* ───────── the nav, with the product's own controls in it ─────────
   The design's right-hand column was sized for two items. It now carries Join by code,
   How it works, the account control and Start a meeting, so it needs room — and none
   of them may wrap, which is what turned "Join by code" into three stacked words. */
#gate .nav-shell{ grid-template-columns: 210px 1fr auto; column-gap: 18px; }
#gate .nav-actions{ display:flex; align-items:center; gap:14px; white-space:nowrap; }
#gate .nav-actions > *{ white-space:nowrap; flex:none; }
#gate .nav-actions .button{ white-space:nowrap; }

/* On a phone the nav has to fit, and something has to go. The "Start a meeting"
   button is the one to drop: the hero directly beneath it is the same button, larger,
   and two of the same call to action six inches apart is not twice the invitation.
   The lockup and who you are signed in as both stay. */
@media (max-width:720px){
  #gate .nav-shell{ min-width:0 }
  #gate .nav-actions{ gap:8px; min-width:0; flex-shrink:1; overflow:hidden }
  #gate .nav-actions > .button.button-primary{ display:none }
  #gate .nav-actions #auth-slot{ min-width:0 }
  #gate .nav-actions .acct-btn span:not(.initial){ max-width:11ch; overflow:hidden;
    text-overflow:ellipsis; display:inline-block; vertical-align:bottom }
}
#gate .nav-links .panel-signin{ display:none; }   /* phone only — see the mobile nav block at the end */
#gate .nav-link-muted{ font-size:13.5px; line-height:1; }
@media (max-width:1180px){
  #gate .nav-shell{ grid-template-columns: 190px 1fr auto; }
  #gate .nav-links{ gap:16px; }
  #gate .nav-links a{ font-size:13px; }
}
@media (max-width:1000px){
  #gate #gguide{ display:none; }          /* the hero already offers "Watch the room work" */
}
@media (max-width:860px){
  #gate .nav-actions #gjoinBtn{ display:none; }   /* the panel has Join by code in it too */
}

/* ───────── the door, in the hero ─────────
   One row, one click, and the name is optional. A person who was sent a link is
   trying to get into a meeting, not to fill in a form. */
#gate .hero-start{ display:flex; flex-direction:column; gap:14px; margin-top:34px; max-width:600px; }
/* One row. Every control in it is --hero-h tall and --hero-r round, so the eye reads a
   single instrument rather than a text box, a button and two stragglers. The name field
   is sized for a name — 28 characters is the limit, and 220px holds most of them — not
   stretched to fill whatever was left. */
#gate .hero-start{ --hero-h:52px; --hero-r:13px; }
#gate .hero-actions{ display:flex; gap:10px; align-items:stretch; margin:0; }
#gate .hero-actions input[type=text]{
  flex:0 1 220px; min-width:140px; height:var(--hero-h);
  background:rgba(6,10,26,.72); border:1px solid var(--h-line);
  color:var(--h-text); border-radius:var(--hero-r); padding:0 16px; font-size:15px;
  outline:none; transition:border-color .16s, box-shadow .16s, background .16s;
}
#gate .hero-actions input[type=text]::placeholder{ color:var(--h-muted-2) }
#gate .hero-actions input[type=text]:focus{
  border-color:rgba(35,208,255,.55); background:rgba(8,13,33,.9);
  box-shadow:0 0 0 3px rgba(35,208,255,.12);
}
#gate .hero-actions .button{ flex:0 0 auto; height:var(--hero-h); min-height:0; border-radius:var(--hero-r); padding:0 22px; }
#gate .hero-devices{ display:flex; gap:10px; margin:0; flex:0 0 auto }
/* Icon buttons, the size and shape of everything beside them. The label is for screen
   readers; a sighted person sees the same mic and camera glyphs the room's bar uses,
   lit when on. */
#gate .hero-devices .device-toggle{ flex:0 0 auto; width:var(--hero-h); height:var(--hero-h); border-radius:var(--hero-r); gap:0; padding:0; font-size:0; }
#gate .hero-devices .device-toggle svg{ width:19px; height:19px; }
#gate .hero-devices .device-toggle.active{ color:#cfe3ff; border-color:rgba(42,162,255,.3); background:rgba(42,162,255,.1) }
#gate .hero-start .startnote{ margin:2px 0 0; text-align:left }
#gate .hero-start .modal-live{ margin:0 }

@media (max-width:560px){
  #gate .hero-actions{ flex-direction:column }
  #gate .hero-actions input[type=text]{ padding:15px 16px; flex:0 0 auto; width:100%;
    min-width:0; max-height:60px }
  #gate .hero-actions .button{ width:100% ; justify-content:center }
  #gate .hero-devices .device-toggle{ flex:1 1 0 }
}

/* ───────── the hero has to fit ─────────
   The design was drawn at 1040px of hero. A 13" laptop gives about 700px of usable
   height, so the start button, the note under it and the status line all fell below
   the fold — on the one screen where the whole point is "start a meeting in one click".
   The hero is now sized to the window it is actually in, and the type scales with the
   height as well as the width. */
#gate .hero{
  min-height: 0;
  height: auto;
  /* Was clamp(96px, 13vh, 150px). On a tall window 13vh ran away to the 150px cap and
     left a band of nothing between the navigation and the first line of copy. The
     floor still has to clear the fixed nav — 88px does, with room to breathe — and the
     ceiling is now low enough that a taller window gives more CONTENT rather than more
     emptiness above it. */
  padding: clamp(88px, 8.5vh, 112px) 0 clamp(28px, 4vh, 62px);
}
/* The copy column is shorter than the product mock beside it, so centring the two
   pushed the headline down by half the difference — which is most of the gap Jack was
   looking at. The copy starts at the top; the mock, being the taller of the two, is
   the one that gets centred against it. */
#gate .hero-layout{ align-items:start; }
#gate .hero-visual{ align-self:center }
#gate .hero-copy{ padding-bottom: clamp(0px, 2vh, 34px); }
@media (max-width:1000px){ #gate .hero-layout{ align-items:center } }
#gate .hero-copy h1{
  font-size: clamp(38px, min(6vw, 8.4vh), 92px);
  margin: clamp(10px, 1.8vh, 22px) 0 clamp(12px, 2vh, 24px);
}
#gate .hero-subhead{
  font-size: clamp(14.5px, 1.9vh, 18px);
  margin-bottom: clamp(8px, 1.6vh, 20px);
}
#gate .hero-start{ margin-top: clamp(14px, 2.4vh, 34px); gap: clamp(9px, 1.4vh, 14px); }
/* Sized through the shared variable, not on two of the four controls. This used to set
   the input and the button directly and leave the mic and camera toggles at their
   fixed size, so on any viewport over ~810px tall the row was 56px, 56px, 52px, 52px —
   which is what "these elements don't feel congruent" looks like measured. */
#gate .hero-start{ --hero-h: clamp(46px, 6.4vh, 54px); }
#gate .hero-actions .button{ padding-block: 0; }
/* Desktop only. These fit the frame to a laptop's viewport by RESIZING its layout
   box — 44vw wide, 46vh tall — which is right where the frame is laid out at full
   size beside the copy. Unconditioned, they also applied on phones, where the frame
   is meant to be laid out at 760px and scaled down: `width:min(100%,44vw)` turned it
   into a 172px-wide layout with every element inside crushed to fit. A phone scales
   the picture; a laptop resizes it. Neither rule should see the other's screen. */
@media (min-width:1061px){
  #gate .hero-visual{ min-height: 0; }
  #gate .meeting-perspective{ width: min(100%, 44vw); }
  #gate .meeting-body{ height: clamp(300px, 46vh, 500px); }
}
#gate .hero-proof{ margin-top: clamp(10px, 2vh, 26px); }

/* Short-and-wide is the case that broke: a laptop in fullscreen. */
@media (min-width:1061px) and (max-height:820px){
  #gate .hero{ padding-top: clamp(88px, 11vh, 118px); }
  #gate .hero-copy h1{ letter-spacing:-.06em; }
  #gate .float-card{ transform: scale(.86); }
  #gate .hero-proof{ font-size: 9.5px; }
}
@media (min-width:1061px) and (max-height:700px){
  #gate .hero-devices .device-toggle{ padding-block: 8px; }
  #gate .hero-start .modal-live{ display:none; }   /* the status line is the least of it */
}


/* code and Join on one line — a button wrapped underneath its field reads as an
   afterthought, and this dialog is two controls pretending to need a column */
#gate .jrow{display:flex;gap:10px;align-items:stretch}
#gate .jrow input{flex:1;min-width:0;margin:0}
#gate .jrow .button{flex:0 0 auto;white-space:nowrap}
@media (max-width:480px){ #gate .jrow{flex-direction:column} #gate .jrow .button{width:100%;justify-content:center} }


/* The hero says one thing. The status line, the how-links-work note and the
   no-account/no-download row all explained a button that now explains itself by
   working in one click — the nodes stay for error text, the prose goes. */
#gate #gai{display:none}
#gate #gtag{display:none}
#gate #gtag.err{display:block}
#gate .hero-trustline{display:none}

/* the signed-in chip lives on the dark nav whatever the THEME is — its ink cannot
   follow a light theme onto a dark bar */
#gate .acct-btn span:last-child{color:#EAF0FF}
#gate .acct-btn{border-color:rgba(255,255,255,.28)}

/* the mock's silhouettes stay inside their tiles — shoulders were poking out of the
   rounded corners, which read as a rendering bug on every screenshot */
#gate .hero-visual [class*="tile"]{overflow:hidden}

/* ───────── the mobile nav, put back together ─────────────────────────────
   These rules are at the END of this file on purpose. The mobile layout is set in an
   `@media (max-width:1060px)` block near the middle, and the desktop nav sizing that
   follows it — `.nav-shell{grid-template-columns:210px 1fr auto}` and
   `.nav-actions{display:flex}` — carries no media query at all. A media query adds no
   specificity, so those later unconditional rules were winning on every phone: the
   210px brand column stayed, Sign in and Sign up sat on top of the wordmark, and the
   dropdown collapsed into a 126px box showing one link out of five.

   The rest of the nav gets folded into the panel behind the button, which is what the
   button is for. The account pill stays out on the bar, because who you are signed in
   as is worth a glance without opening anything. */
@media (max-width: 1060px) {
  #gate .nav-shell {
    position: relative;                      /* the panel positions against THIS */
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 10px;
    align-items: center;
  }
  /* The wordmark is a fixed-width <img>, which does not shrink inside a flex or grid
     track on its own — it just overflows into the next column and sits under the
     account controls. Sized down explicitly here instead. */
  #gate .brand-lockup { min-width: 0; overflow: hidden; gap: 9px; }
  #gate .brand-mark { width: 26px; height: 27px; flex: none; }
  #gate .brand-wordmark { width: 118px; min-width: 0; max-width: 100%; }

  /* Out on the bar: the account pill only. Everything else is in the panel. */
  #gate .nav-actions { display: flex; gap: 8px; min-width: 0; overflow: visible; }
  #gate .nav-actions > .button,
  #gate .nav-actions > #gjoinBtn,
  #gate .nav-actions > #gguide { display: none; }
  /* Signed out there are two of these — Sign in and Sign up — and together they are
     wider than the wordmark they were sitting on top of. Sign up is the one that
     survives, because it is the ask; Sign in is one tap away in the panel. */
  #gate .nav-actions .signin-btn { padding: 9px 12px; font-size: 13px; }
  #gate .nav-actions .signin-btn:first-child { display: none; }
  #gate .nav-links .panel-signin { display: block; }

  /* A real sheet under the header, not a shrink-to-fit box beside it. */
  #gate .nav-links {
    position: absolute;
    /* An absolutely positioned GRID ITEM is boxed by its own grid area, not by the
       grid container — so left:0/right:0 span one column and the panel came out 139px
       wide. Spanning every column makes the area the full bar, which is what those
       offsets were always meant to resolve against. */
    grid-column: 1 / -1;
    /* An abs-pos grid item still honours justify-self, and anything but `stretch`
       makes it shrink-to-fit even with left AND right set — which is what kept the
       panel at 139px after the grid area was already spanning the bar. */
    justify-self: stretch;
    align-self: start;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto;
    padding: 8px;
    gap: 0;
    z-index: 60;
    /* Opaque. The shared value is .96 alpha, which over the hero's bright aurora let
       the headline read straight through the menu. */
    background: #070b16;
    backdrop-filter: blur(14px);
  }
  #gate .nav-shell.nav-open .nav-links { display: flex; }
  #gate .nav-links a {
    display: block;
    width: 100%;
    padding: 13px 12px;                      /* a 44px row, so a thumb hits the link */
    font-size: 15px;
    border-radius: 10px;
  }
  #gate .nav-links a:hover { background: rgba(255,255,255,.05); }
  #gate .nav-links a::after { display: none; }   /* the desktop underline, meaningless here */

  /* 42px is under the 44px minimum a thumb needs, and this is the only control on the
     bar that opens anything. */
  #gate .menu-button {
    display: block;
    justify-self: end;
    width: 44px;
    height: 44px;
    position: relative;
    z-index: 61;
  }
  #gate .menu-button span { width: 20px; }
}

/* ───────── nothing light behind the landing page ─────────
   #gate is position:fixed; inset:0 and scrolls internally. On iOS, when Safari
   collapses its toolbar mid-scroll, the strip it reveals at the bottom is painted with
   the BODY's background until the next layout — and the body is the app's light
   theme, so a pale band appeared under the hero. Jack saw it under the product frame.
   The canvas behind the page is dark now, top and bottom, so the quirk has nothing to
   show. Scoped to the landing page: the app's own pages keep their theme. */
html:has(> body.home), body.home{ background: var(--h-ink, #030611); }