/* ============================================================================
   GrandSkynet — public site
   Locked design: Stripe mega-menu header · ClickUp structure (orbital hub hero,
   per-module section template) · Linear.app greyscale + GA Card Standard ·
   Linear motion choreography (staggered fade-up, living elements) ·
   rainbow conic CTA border. Zero dependencies, all assets self-hosted.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Linear.app greyscale, measured off the live site by usage frequency.
     The cyan accent stays GrandAxis — Linear's indigo is their brand, not a grey.
     account.grandskynet.com is the one surface that stays white. */
  --ink:        #f7f8f8;
  --ink-mid:    #d0d6e0;
  --ink-soft:   #8a8f98;
  --ink-faint:  #62666d;
  --bg:         #08090a;
  --bg-soft:    #0f1011;
  --surface:    rgba(255,255,255,.05);
  --surface-2:  rgba(255,255,255,.02);
  --accent:     #00b4ff;
  --accent-deep:#5ac8ff;
  --green:      #47e58c;
  --green-bg:   rgba(71,229,140,.12);
  --amber:      #f7bf8b;
  --amber-bg:   rgba(247,191,139,.12);
  --line:       rgba(255,255,255,.08);
  --line-soft:  rgba(255,255,255,.05);
  --mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
  /* Same stack the Accounts app declares, so the two sites render identically.
     Inter is vendored at assets/fonts/inter (self-containment law, no CDN). */
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── Reveal-on-scroll (Linear choreography): fade + 6px lift, staggered via --d ── */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* Stagger seats for .rv. Layer 1 forbids inline style, so every delay the page
   uses is a named class here rather than a style="--d:..." on the element. */
.dly-05 { --d: .05s; } .dly-06 { --d: .06s; } .dly-08 { --d: .08s; }
.dly-10 { --d: .10s; } .dly-12 { --d: .12s; } .dly-15 { --d: .15s; }
.dly-16 { --d: .16s; } .dly-18 { --d: .18s; } .dly-20 { --d: .20s; }
.dly-24 { --d: .24s; } .dly-25 { --d: .25s; } .dly-30 { --d: .30s; }

/* Orbit seats — ring 1 sits its four moons at 45/135/225/315deg,
   ring 2 its five at 0/72/144/216/288deg. */
.seat-a1 { left: 85.36%; top: 14.64%; }
.seat-a2 { left: 85.36%; top: 85.36%; }
.seat-a3 { left: 14.64%; top: 85.36%; }
.seat-a4 { left: 14.64%; top: 14.64%; }
.seat-b1 { left: 100%;   top: 50%;    }
.seat-b2 { left: 65.45%; top: 97.55%; }
.seat-b3 { left: 9.55%;  top: 79.39%; }
.seat-b4 { left: 9.55%;  top: 20.61%; }
.seat-b5 { left: 65.45%; top: 2.45%;  }

/* Hub captions + the work chips that stream toward the core. */
/* Captions clear the outer ring completely — the stage is 40px taller than the
   widest orbit so there is a band top and bottom no moon can ever reach. The band
   inside ring 1 is too thin to hold them (verified: inner moons swept it). */
.hub-word-top { left: 50%; top: 2px; transform: translateX(-50%); }
.hub-word-bot { left: 50%; bottom: 2px; transform: translateX(-50%); }
/* Chips live in the mid-band at the far edges: outside ring 2 entirely, and above
   the bottom cards / below the top ones, so nothing can drift into them. */
.cs-1 { left: 2%;  top: 32%; --cx: -60px; --cd: 0s;   }
.cs-2 { right: 2%; top: 40%; --cx: 70px;  --cd: 2.2s; }
.cs-3 { left: 2%;  top: 52%; --cx: -70px; --cd: 4.4s; }
.cs-4 { right: 2%; top: 60%; --cx: 60px;  --cd: 6.6s; }

/* Avatar colours in the product window. */
.pw-av-blue   { background: var(--accent-deep); }
.pw-av-violet { background: #8a5cff; }
.pw-av-green  { background: var(--green); }

/* ============================== HEADER (Stripe) ============================== */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(8,9,10,.72);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.hd.scrolled { border-color: var(--line); }
.hd-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 28px; }
/* Real GrandSkynet lockup — the mark already carries the parent brand
   (GRANDAXIS + SKYNET + the cyan ring), so no text wordmark and no
   "part of GrandAxis" tag is needed beside it. */
.logo { display: flex; align-items: center; }
.logo img { height: 48px; width: auto; display: block; }   /* = .ga-topnav-wordmark, the house standard */
.ft-brand .logo img { height: 48px; }

/* Logo and actions take equal flex share so the nav lands on the PAGE centre,
   not the centre of whatever space happens to be left over. */
.nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 0 1 auto; }
.hd-in > .logo { flex: 1 1 0; }
.nav-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink);
  transition: background .15s;
}
.nav-btn:hover, .nav-item.open .nav-btn { background: var(--surface); }
.nav-btn .chev { transition: transform .2s ease; width: 10px; height: 10px; }
.nav-item.open .nav-btn .chev { transform: rotate(180deg); }

.hd-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 1 1 0; }
.signin { font-size: 15px; font-weight: 500; padding: 9px 14px; border-radius: 8px; transition: background .15s; }
.signin:hover { background: var(--surface); }

/* ── Rainbow conic CTA (the Google-style running border) ── */
.cta-rainbow { position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 8px; background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 600; isolation: isolate; transition: transform .15s ease; }
.cta-rainbow:hover { transform: translateY(-1px); }
.cta-rainbow::before {
  content: ''; position: absolute; inset: -2.5px; border-radius: 8px; z-index: -1;
  background: conic-gradient(from var(--ra, 0deg),
    #ff5f6d, #ffc371, #47e58c, #00b4ff, #8a5cff, #ff5f6d);
  animation: ra-spin 3.2s linear infinite;
}
.cta-rainbow::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: var(--ink); z-index: -1; }
@property --ra { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ra-spin { to { --ra: 360deg; } }
/* fallback for browsers without @property: gentle hue drift */
@supports not (background: conic-gradient(from var(--ra), red, blue)) {
  .cta-rainbow::before { animation: ra-hue 3.2s linear infinite; }
  @keyframes ra-hue { to { filter: hue-rotate(360deg); } }
}

/* ── Mega menu panels ── */
.mega {
  position: absolute; left: 0; right: 0; top: 68px;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.nav-item.open .mega { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ── ONE PANEL THAT MORPHS (AxisMail's pattern, ported) ──────────────────────
   All four panels stay mounted side by side inside a clipped viewport, so moving
   between triggers slides the strip and resizes the viewport — the browser
   interpolates ONE continuous motion instead of destroying one panel and
   building another. Adapted for a full-bleed bar rather than AxisMail's
   right-anchored card: width is constant here, so only HEIGHT is measured, and
   --mega-w keeps every panel exactly one viewport wide so offsetLeft still
   gives the strip offset. */
.mega-vp {
  position: absolute; left: 0; right: 0; top: 68px;
  height: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
  background: var(--bg-soft);
  border-bottom: 1px solid transparent;
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.6);
  transition: height .22s cubic-bezier(.2,0,0,1), opacity .16s ease, border-color .16s ease;
  z-index: 90;
}
.hd.mega-open .mega-vp { opacity: 1; pointer-events: auto; border-bottom-color: var(--line); }
/* Inside the nav sheet it becomes a flex item in a COLUMN container, so flex-basis
   is the HEIGHT axis — a basis of 100% silently overrides the measured height and
   collapses it. Basis auto lets the measured height win; width is the cross axis. */
.nav > .mega-vp { flex: 0 0 auto; width: 100%; }

.mega-strip {
  display: flex; align-items: flex-start;
  /* max-content, or the panels would be measured while squeezed inside a viewport
     that is 0px wide when closed — every measurement would come back wrong. */
  width: max-content;
  transform: translateX(var(--mega-x, 0px));
  transition: transform .22s cubic-bezier(.2,0,0,1);
}

/* Panels keep .mega so every descendant rule still applies; these reset the
   absolute-positioned popover behaviour that class used to carry alone. */
.mega-panel {
  position: static; flex: 0 0 var(--mega-w, 100vw);
  opacity: 1; transform: none; pointer-events: auto;
  background: transparent; border-bottom: 0; box-shadow: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .mega-vp, .mega-strip { transition: opacity .16s ease; }
}
.mega-in { max-width: 1180px; margin: 0 auto; padding: 30px 24px 34px; display: grid; gap: 36px; }
.mega-cols-3 { grid-template-columns: 1.2fr 1fr 1fr; }
.mega-cols-2 { grid-template-columns: 1fr 1fr; }
.mega h5 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.mega-item { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: background .15s; align-items: flex-start; }
/* Only real links highlight. Items whose page does not exist yet render as plain
   labels — a control that does nothing reads as broken, a label reads as pending. */
a.mega-item { cursor: pointer; }
a.mega-item:hover { background: var(--surface); }
span.mega-item { cursor: default; }
span.mega-item b { color: var(--ink-mid); }
.mega-ico { flex: 0 0 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--accent); }
.mega-ico svg { width: 18px; height: 18px; }
.mega-item b { display: block; font-size: 14.5px; font-weight: 600; }
.mega-item b .soon { font-size: 10.5px; font-weight: 700; color: var(--amber); background: var(--amber-bg); border-radius: 5px; padding: 1.5px 6px; margin-left: 7px; vertical-align: 1px; }
.mega-item p { font-size: 13px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }

.burger { display: none; }

/* ============================== HERO ============================== */
/* First screen is budgeted to fit 1920x1080 with the hub visible — the ClickUp
   test. Header 68 + hero + stage must stay under 1080; verify before changing. */
.hero { padding: 96px 0 34px; text-align: center; position: relative; }
/* Chip carries the same running rainbow border as the CTA. The chip itself is
   only the 2px track — .hero-chip-in masks the middle so just the edge shows.
   --ra is registered once, up with .cta-rainbow. */
.hero-chip { position: relative; display: inline-flex; padding: 1px; border-radius: 8px;
  overflow: hidden; isolation: isolate; }
.hero-chip::before {
  content: ''; position: absolute; inset: -50%; z-index: 0;
  background: conic-gradient(from var(--ra, 0deg),
    #ff5f6d, #ffc371, #47e58c, #00b4ff, #8a5cff, #ff5f6d);
  animation: ra-spin 4s linear infinite;
}
.hero-chip-in { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent-deep);
  background: var(--bg-soft); padding: 6px 14px; border-radius: 7px; }
.hero-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.2s ease infinite; }
@keyframes pulse { 0%,100% { opacity: .5; transform: scale(.9);} 50% { opacity: 1; transform: scale(1.15);} }

/* Type scale copied from the Accounts app (.ga-hero h1): 2.75rem / 700 / -.03em
   / 1.08. Inter tops out at 700 — there is no 800 face to load. */
.hero h1 { font-size: 2.75rem; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; margin: 18px auto 0; max-width: 720px; }
.hero h1 .grey { color: var(--ink-faint); }
.hero-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 18px; font-size: 15.5px; color: var(--ink-soft); }
.hero-sub span { display: inline-flex; align-items: center; gap: 7px; }
.hero-sub svg { width: 15px; height: 15px; color: var(--green); flex: 0 0 auto; }
/* "Free" is a promise about price and is true of docs today; "available" is a
   claim about now and is not. Priced-but-not-shipped gets a clock, not a tick. */
.hero-sub .pending { color: var(--ink-soft); }
.hero-sub .pending svg { color: var(--ink-faint); }
.pill-soon { font-size: 10.5px; font-weight: 700; font-style: normal; color: var(--amber);
  background: var(--amber-bg); border-radius: 5px; padding: 1.5px 6px; margin-left: 7px;
  letter-spacing: .04em; vertical-align: 1px; }
.hero-ctas { display: flex; justify-content: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.cta-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px;
  border: 1px solid var(--line); font-size: 15px; font-weight: 600; transition: border-color .15s, background .15s; }
.cta-ghost:hover { border-color: rgba(255,255,255,.22); background: var(--surface); }

/* ============================== ORBITAL HUB (ClickUp) ============================== */
.hub { position: relative; max-width: 1180px; margin: 6px auto 0; padding: 0 24px 40px; }
.hub-stage { position: relative; height: 660px; }

.hub-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; border-radius: 50%;
  overflow: hidden; box-shadow: 0 0 0 1px rgba(0,180,255,.25), 0 0 80px rgba(0,180,255,.25), 0 30px 60px -20px rgba(0,0,0,.35); z-index: 5; }
.hub-core video { width: 100%; height: 100%; object-fit: cover; }
.hub-core .core-label { position: absolute; inset: auto 0 0 0; padding: 12px 0 14px; text-align: center;
  background: linear-gradient(to top, rgba(2,8,20,.78), transparent); color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em; }

.ring { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(255,255,255,.10); border-radius: 50%; }
/* Radial gap between the rings must exceed the widest moon pill, or an inner and
   an outer moon collide whenever they line up on the same angle. 340/560 = 110px. */
.ring-1 { width: 340px; height: 340px; transform: translate(-50%,-50%); animation: orbit 60s linear infinite; }
.ring-2 { width: 580px; height: 580px; transform: translate(-50%,-50%); animation: orbit 95s linear infinite reverse; }
@keyframes orbit { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.moon { position: absolute; width: 0; height: 0; }
.moon-in { transform: translate(-50%,-50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; box-shadow: 0 8px 22px -8px rgba(0,0,0,.6); }
.ring-1 .moon-in { animation: orbit-c 60s linear infinite; }
.ring-2 .moon-in { animation: orbit-cr 95s linear infinite; }
@keyframes orbit-c  { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes orbit-cr { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(360deg);  } }
.moon-in .m-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.moon-in .m-dot.g { background: #34c759; }
.moon-in .m-dot.p { background: #8a5cff; }
.moon-in .m-dot.o { background: #ff9500; }

/* orbit label words (SELF-ORGANIZING style) */
.hub-word { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: .3em; color: var(--ink-faint); }

/* numbered corner cards */
.hub-card { position: absolute; width: 230px; background: var(--surface);
  border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 0 0.5px var(--line); z-index: 6; }
.hub-card h6 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); display: flex; gap: 8px; }
.hub-card h6 .no { color: var(--accent-deep); }
.hub-card ul { list-style: none; margin-top: 10px; }
.hub-card li { font-size: 13px; color: var(--ink-soft); padding: 3.5px 0; display: flex; gap: 8px; align-items: center; }
.hub-card li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.hc-tl { left: 0; top: 30px; }  .hc-tr { right: 0; top: 30px; }
.hc-bl { left: 0; bottom: 20px; } .hc-br { right: 0; bottom: 20px; }

/* streaming chips (work flowing into the network) */
.chip-stream { position: absolute; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft);
  background: var(--bg-soft); border: 1px solid var(--line); padding: 5px 12px; border-radius: 8px;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); opacity: 0; animation: chip-fly 9s ease-in-out infinite; animation-delay: var(--cd, 0s); }
.chip-stream b { color: var(--ink); font-weight: 600; }
@keyframes chip-fly {
  0%   { opacity: 0; transform: translateX(var(--cx, -40px)) translateY(8px); }
  8%   { opacity: 1; }
  38%  { opacity: 1; transform: translateX(0) translateY(0); }
  46%  { opacity: 0; transform: translateX(calc(var(--cx, -40px) * -.4)) translateY(-6px); }
  100% { opacity: 0; }
}

/* ============================== TRUST STRIP ============================== */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.trust-in { max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 12px 34px; justify-content: center;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }
.trust-in span { display: inline-flex; gap: 8px; align-items: center; }
.trust-in svg { width: 14px; height: 14px; color: var(--green); }

/* ============================== SECTION TEMPLATE (per module) ============================== */
.sec { padding: 96px 0 30px; }
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: .18em; color: var(--accent-deep); font-weight: 600;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); display: block; }
.sec h2 { font-size: 2rem; line-height: 1.12; letter-spacing: -.03em; font-weight: 700; margin-top: 30px; max-width: 720px; }
.sec h2 .grey { color: var(--ink-faint); }
.sec-cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; margin-top: 8px; }
.sec-body { font-size: 16.5px; color: var(--ink-soft); line-height: 1.6; }
.sec-body p + p { margin-top: 12px; }
.sec-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 600; color: var(--accent-deep); font-size: 15px; }
.sec-link:hover { text-decoration: underline; }
.fig { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--ink-faint); margin-top: 60px; display: flex; gap: 10px; }
.fig::after { content: ''; flex: 1; border-top: 1px solid var(--line); transform: translateY(7px); }

/* ── Product windows (dark glass, like Linear/ClickUp product shots) ── */
.pw { margin-top: 44px; border-radius: 8px; overflow: hidden; background: var(--bg-soft);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 0.5px var(--line); }
.pw-bar { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line-soft); }
.pw-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.pw-bar i:nth-child(1) { background: #ff5f57; } .pw-bar i:nth-child(2) { background: #febc2e; } .pw-bar i:nth-child(3) { background: #28c840; }
.pw-bar .pw-title { margin-left: 10px; font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.45); letter-spacing: .06em; }
.pw-body { display: flex; min-height: 340px; color: #e8eaf0; font-size: 13.5px; }
/* The three-pane mail panel needs the room; the chat panel keeps 340. */
.pw-mail-app .pw-body { min-height: 440px; }

.pw-side { flex: 0 0 190px; background: var(--surface-2); border-right: 1px solid var(--line-soft); padding: 14px 10px; }
.pw-side h6 { font-size: 10.5px; letter-spacing: .1em; color: rgba(255,255,255,.35); text-transform: uppercase; padding: 8px 8px 6px; }
.pw-chan { padding: 6px 10px; border-radius: 7px; color: rgba(255,255,255,.62); font-size: 13px; }
.pw-chan.on { background: rgba(0,180,255,.16); color: #fff; }
.pw-main { flex: 1; padding: 18px 22px; }
.pw-msg { display: flex; gap: 11px; padding: 9px 0; }
.pw-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: #fff; }
.pw-msg b { font-size: 13.5px; } .pw-msg .tag { font-size: 9.5px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 4px; padding: 2px 5px; margin-left: 7px; letter-spacing: .04em; vertical-align: 1px; }
.pw-msg p { color: rgba(255,255,255,.72); margin-top: 3px; line-height: 1.5; }
.pw-msg time { font-size: 11px; color: rgba(255,255,255,.3); margin-left: 8px; font-weight: 400; }
.pw-voice { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; background: rgba(52,199,89,.12); border: 1px solid rgba(52,199,89,.3);
  color: #7be0a0; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; }

/* ── AxisMail: all three panes, as the real client shows them ───────────────
   rail · list · reading pane, with the compose window docked over the lot. */
.pw { position: relative; }
.pw-side { display: flex; flex-direction: column; }
.pw-store { margin-top: auto; padding: 10px 8px 4px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em; color: rgba(255,255,255,.35); }

.pw-list { flex: 0 0 268px; border-right: 1px solid var(--line-soft); overflow: hidden; }
.pw-listhead { display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pw-listhead span { font-family: var(--mono); font-size: 10.5px; text-transform: none; color: rgba(255,255,255,.3); }

.pw-mail { display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.pw-mail.on { background: rgba(0,180,255,.10); box-shadow: inset 2px 0 0 var(--accent); }
.pw-mail .pw-av { width: 28px; height: 28px; font-size: 11px; }
.pw-mail-main { flex: 1; min-width: 0; display: block; }
.pw-mail-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pw-mail b { font-size: 13px; font-weight: 600; }
.pw-mail time { font-size: 11px; color: rgba(255,255,255,.35); flex: 0 0 auto; }
.pw-mail .sub, .pw-mail .prev { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pw-mail .sub { color: rgba(255,255,255,.82); font-size: 12.5px; margin-top: 2px; }
.pw-mail .prev { color: rgba(255,255,255,.38); font-size: 12px; margin-top: 1px; }

/* Reading pane */
.pw-read { flex: 1; min-width: 0; padding: 18px 22px; }
.pw-read-subject { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pw-read-meta { display: flex; gap: 11px; align-items: center; margin-top: 14px; }
.pw-read-meta b { font-size: 13px; font-weight: 600; }
.pw-read-meta em { font-style: normal; color: rgba(255,255,255,.4); font-size: 12px; margin-left: 7px; }
.pw-read-date { display: block; font-size: 11.5px; color: rgba(255,255,255,.3); margin-top: 1px; }
.pw-read-body { margin-top: 16px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.6; max-width: 46ch; }
.pw-read-body p + p { margin-top: 10px; }
.pw-read-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.pw-btn { border: 1px solid var(--line); border-radius: 8px; padding: 6px 13px;
  font-size: 12.5px; color: rgba(255,255,255,.75); }
.pw-btn.axon { border-color: rgba(0,180,255,.45); color: var(--accent); }
.pw-btn.sm { padding: 5px 11px; font-size: 11.5px; }

/* Docked compose — sits over the panes, bottom right, like the real one. */
.pw-compose { position: absolute; right: 18px; bottom: 0; width: 316px; z-index: 3;
  background: #101215; border: 1px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0; box-shadow: 0 -8px 32px -8px rgba(0,0,0,.7); overflow: hidden; }
.pw-compose-bar { display: flex; justify-content: space-between; align-items: center;
  padding: 9px 13px; background: rgba(255,255,255,.05); font-size: 12.5px; font-weight: 600; }
.pw-compose-dots { display: flex; gap: 9px; }
.pw-compose-dots i { width: 9px; height: 1.5px; background: rgba(255,255,255,.4); display: block; }
.pw-compose-field { padding: 9px 13px; border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; color: rgba(255,255,255,.45); }
.pw-compose-body { padding: 12px 13px 18px; font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.5; }
.pw-compose-foot { display: flex; align-items: center; gap: 8px; padding: 10px 13px 12px;
  border-top: 1px solid var(--line-soft); }
.pw-send { background: var(--accent); color: #04121a; font-weight: 650; font-size: 12.5px;
  border-radius: 8px; padding: 6px 16px; }

/* ============================== GA CARD STANDARD (light, verbatim) ============================== */
.ga-info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ga-info-card {
  background: var(--surface);
  border-radius: 8px;
  padding: 20px;
  display: flex; justify-content: space-between; align-items: flex-start;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 0.5px var(--line);
  transition: box-shadow 0.15s;
  -webkit-user-select: none; user-select: none;
}
.ga-info-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,.14); }
.ga-info-card.ga-card-full { grid-column: 1 / -1; }
.ga-info-card-left      { flex: 1; min-width: 0; }
.ga-info-card-label     { font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; letter-spacing: -0.01em; }
.ga-info-card-value     { font-size: 0.875rem;  color: var(--ink-soft); word-break: break-word; }
.ga-info-card-secondary { font-size: 0.8125rem; color: var(--ink-faint); margin-top: 4px; }
.ga-info-card-icon      { font-size: 1.375rem;  color: #00b4ff; flex-shrink: 0; margin-left: 14px; }
.ga-info-card-badge     { display: inline-block; font-size: 0.6875rem; background: var(--green-bg); color: var(--green); padding: 2px 8px; border-radius: 6px; }
.ga-badge-unverified    { background: var(--amber-bg); color: var(--amber); }
@keyframes ga-panel-in  { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes ga-panel-out { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(6px); } }

/* ecosystem grid uses 3 columns on desktop */
.eco-grid { grid-template-columns: repeat(3, 1fr); margin-top: 44px; }

/* ============================== DAY TIMELINE ============================== */
.day { margin-top: 44px; border-left: 2px solid var(--line); padding-left: 28px; display: grid; gap: 22px; max-width: 640px; }
.day-row { position: relative; }
.day-row::before { content: ''; position: absolute; left: -35px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--accent); }
.day-row time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); letter-spacing: .08em; }
.day-row p { font-size: 15.5px; margin-top: 3px; }
.day-row p b { font-weight: 600; }

/* ============================== FINAL CTA (dark band) ============================== */
.final { margin-top: 110px; background: var(--bg-soft); color: #eaf0ff; position: relative; overflow: hidden; text-align: center; }
.final-earth { position: absolute; left: 50%; bottom: -340px; transform: translateX(-50%); width: 720px; height: 720px; border-radius: 50%;
  overflow: hidden; opacity: .85; filter: saturate(1.1); }
.final-earth::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 40px 120px rgba(0,180,255,.35); }
.final-earth video { width: 100%; height: 100%; object-fit: cover; }
.final-in { position: relative; z-index: 2; padding: 110px 24px 380px; }
.final h2 { font-size: 2.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.final p { color: var(--ink-soft); font-size: 17px; margin-top: 16px; }
.final .hero-ctas { margin-top: 34px; }
.final .cta-ghost { border-color: rgba(255,255,255,.25); color: #fff; }
.final .cta-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }

/* ============================== FOOTER ============================== */
.ft { background: var(--bg-soft); color: var(--ink-soft); border-top: 1px solid var(--line); }
.ft-in { max-width: 1180px; margin: 0 auto; padding: 54px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.ft h5 { color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .06em; margin-bottom: 14px; }
.ft a { display: block; font-size: 13.5px; padding: 4px 0; transition: color .15s; }
.ft a:hover { color: #fff; }
.ft-dead { display: block; font-size: 13.5px; padding: 4px 0; color: var(--ink-faint); cursor: default; }
.ft .soon2 { font-size: 10px; color: var(--amber); background: var(--amber-bg); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.ft-brand .logo b { color: var(--ink); }
.ft-brand p { font-size: 13px; margin-top: 12px; line-height: 1.6; max-width: 260px; }
.ft-bottom { border-top: 1px solid var(--line); }
.ft-bottom-in { max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; flex-wrap: wrap; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1023px) {
  .hub-stage { height: auto; padding-top: 20px; }
  .hub-core { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; }
  .ring, .hub-word, .chip-stream { display: none; }
  .hub-card { position: static; width: auto; margin-top: 12px; }
  .hub-cards-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
  .sec-cols { grid-template-columns: 1fr; gap: 18px; }
  .ft-in { grid-template-columns: 1fr 1fr; }
  .nav { display: none; position: fixed; inset: 68px 0 0 0; background: var(--bg); flex-direction: column; align-items: stretch;
    padding: 18px 20px; overflow-y: auto; gap: 2px; }
  .nav.open { display: flex; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-btn { width: 100%; justify-content: space-between; padding: 16px 6px; border-radius: 0; font-size: 17px; }
  /* The strip moves INSIDE the nav sheet on mobile (site.js relocates it), so the
     viewport stops being an overlay and becomes part of the sheet's flow. */
  .mega-vp { position: static; box-shadow: none; border-bottom: 0; }
  .hd.mega-open .mega-vp { border-bottom-color: transparent; }
  .mega-in { padding: 4px 0 18px; grid-template-columns: 1fr !important; gap: 8px; }
  .burger { display: flex; flex-direction: column; gap: 5px; padding: 10px; margin-left: auto; }
  .burger i { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; display: block; transition: transform .2s, opacity .2s; }
  .burger.x i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.x i:nth-child(2) { opacity: 0; }
  .burger.x i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hd-actions .signin { display: none; }
}
@media (max-width: 639px) {
  /* Same call the Accounts top nav makes: the 48px wordmark bleeds past a shrunken
     bar, so it drops to 26px and the bar to 44px. */
  .hero h1 { font-size: 1.625rem; }
  .sec h2 { font-size: 1.5rem; }
  .final h2 { font-size: 1.625rem; }
  .hd-in { height: 44px; }
  .logo img { height: 26px; }
  .mega { top: 44px; }
  .nav { inset: 44px 0 0 0; }
  .ga-info-cards, .eco-grid { grid-template-columns: 1fr; }
  .hub-cards-flow { grid-template-columns: 1fr; }
  /* Phone: the list is the only pane that survives — a 268px column, a reading
     pane and a docked compose cannot share 375px and stay legible. */
  .pw-side, .pw-read, .pw-compose { display: none; }
  .pw-list { flex: 1 1 auto; border-right: 0; }
  .pw-mail-app .pw-body { min-height: 0; }
  .ft-in { grid-template-columns: 1fr; }
  .final-earth { width: 480px; height: 480px; bottom: -260px; }
  .final-in { padding-bottom: 250px; }
}
@media (min-width: 1024px) { .hub-cards-flow { display: contents; } }