/* ═══════════════════════════════════════════════════════════════════════
   Aegis.css — everything specific to the Aegis page.

   Loads LAST, after Dark.css, like Hound.css and Iconic.css: it overrides
   the windows group (just the signup card here), the page colours in BOTH
   schemes, and the phone hero's picture.

   Sources: Eddy's two reference renders (Mac popover, Windows flyout),
   both drawn at the same life size — a 442 × 474 Mac panel and the
   440 × 498 Windows flyout — and the Windows source
   (Aegis.Windows/…/Views/MonitorFlyoutView.cs) for the flyout's geometry.
   ⚠️ The Mac render is ~1.5× the shipping app's 288pt popover. The
   modules' product shots are built to the render; the hero's popover,
   hanging off a real-size menu bar, is built life size from the Swift
   source (PopoverView & co.) — Eddy found the render size enormous there.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Same page colours as GitHound, in both schemes (Eddy's call). */
  --page-bg:   #FFFFFF;
  --footer-bg: #F2F2F2;

  /* No app window: the group is just the 330 × 356 signup card. */
  --group-w: 330px;
  --group-h: 356px;
  --hero-radius-max: 20px;

  /* The Mac panel's paint. In the hero it's real glass over the wallpaper;
     in the modules (a light or dark page, not the desktop) it's that same
     glass flattened to the colour it comes out over the wallpaper. */
  --pop-glass:  rgba(28,30,34,.58);
  --pop-solid:  #1C1E21;
  --pop-card:   rgba(255,255,255,.065);
  --pop-rim:    rgba(255,255,255,.2);
  --pop-ink:    #FFFFFF;
  --pop-ink-2:  rgba(255,255,255,.5);
  --pop-ink-3:  rgba(255,255,255,.3);
  --pop-track:  rgba(255,255,255,.12);
  --pop-green:  #30D158;
  --pop-red:    #FF453A;
  --pop-yellow: #FFD60A;
}


/* ═══════════════════════════════════════════════════════════════════════
   The hero
   ═══════════════════════════════════════════════════════════════════════ */

/* "ASCII terrain": a soft noise field drawn in monospaced characters
   (. ` : - = + * # %) on near-black, vignetted. Generated for this page
   (see "The Aegis page" in CLAUDE.md), 2560 × 1600, lossless WebP, 108 KB —
   lossless is both the smallest and the only setting that keeps the
   characters crisp. The flat colour is the image's own ground. */
.Wallpaper{
  background-color: #0B0C0E;
  background-image: url('/Assets/Images/Wallpaper-Aegis-v1.webp');
}

/* Aegis's menu bar extra, open. 20pt glyph (the app draws it a touch over
   the 18pt default, its art sits inside its own padding), in the selected-
   item capsule. The popover hangs from it. */
.Menubar-extra{
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 22px;
  margin: -2px -6px 0;
  border-radius: 999px;
}
.Menubar-extra.is-open{ background: rgba(255,255,255,.18); }
.Menubar-glyph--aegis{ width: 20px; height: 20px; }

/* Under the extra, centred on it, 8px below the menu bar. Aegis.js scales
   it down (about the extra) and, if that's not enough, nudges the signup
   card left, on desktops too narrow for both to sit side by side. */
.Pop--hero{
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(var(--pop-scale, 1));
  transform-origin: 50% 0;
  text-align: left;
  pointer-events: none;
}
.Windows{ left: calc(50% - var(--aegis-shift, 0px)); }
/* Signup.css places the card for myPod's two-window group; here it IS the
   group. */
.Signup{ left: 0; top: 0; }

/* ── The Mac popover (PopoverView) ───────────────────────────────────── */
.Pop{
  width: 442px;
  padding: 17px 17px 20px;
  border-radius: 26px;
  background: var(--pop-glass);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
          backdrop-filter: blur(28px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px var(--pop-rim),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 .5px rgba(0,0,0,.6),
    0 24px 60px rgba(0,0,0,.45),
    0 6px 18px rgba(0,0,0,.3);
  color: var(--pop-ink);
  font-size: 18px;
  letter-spacing: 0;
  cursor: default;
}
/* Outside the desktop there's no wallpaper to blur, so the panel takes the
   colour it comes out over the wallpaper — a product shot, same in both
   page schemes. */
.Pop--card,
.Pop--list{
  background: var(--pop-solid);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* HeaderCardView: name, three metric rows with bars, Micro SD health. */
.Pop-card{
  padding: 14px 17px 17px;
  border-radius: 16px;
  background: var(--pop-card);
}
.Pop--card{ padding-bottom: 17px; }
.Pop-name{
  font-size: 22px;
  line-height: 33px;
  font-weight: 600;
}
.Pop-metric{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 194px;
  align-items: center;
  height: 32px;
}
.Pop-label,
.Pop-sd{
  line-height: 32px;
  color: var(--pop-ink-2);
  white-space: nowrap;
}
.Pop-sdValue{ color: var(--pop-ink-2); transition: color .35s ease; }
.Pop-sdValue.is-bad { color: var(--pop-red); }
/* StorageBarView: a capsule track and fill, 8 high. The fill eases like
   the app's .easeOut(0.35); white unless the CPU is busy (yellow from
   80%, red from 95%), as StorageBarView.cpuTint does. */
.Pop-bar{
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--pop-track);
  overflow: hidden;
}
.Pop-fill{
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(var(--f, 0));
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), background-color .35s ease;
}
.Pop-fill.is-warm{ background: var(--pop-yellow); }
.Pop-fill.is-hot { background: var(--pop-red); }

/* ServiceRowView rows: name, version, a glowing status dot. 56 apart. */
.Pop-services{ margin-top: 21px; }
.Pop--list .Pop-services{ margin-top: 0; }
.Svc{
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 17px;
  font-size: 21px;
}
.Svc-name{
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--pop-ink);
  transition: color .4s ease;
}
.Svc-ver{
  flex: none;
  margin-left: 12px;
  font-size: 18px;
  color: var(--pop-ink-2);
  white-space: nowrap;
}
.Svc-dot{
  flex: none;
  width: 9px; height: 9px;
  margin-left: 17px;
  border-radius: 50%;
  background: var(--pop-green);
  box-shadow: 0 0 6px rgba(48,209,88,.7);
  transition: background-color .4s ease, box-shadow .4s ease;
}
.Svc.is-down .Svc-name{ color: var(--pop-ink-3); }
.Svc.is-down .Svc-dot{
  background: var(--pop-red);
  box-shadow: 0 0 6px rgba(255,69,58,.7);
}
/* A row whose text is changing fades out and back in (Aegis.js). */
.Svc-name, .Svc-ver{ transition: color .4s ease, opacity .25s ease; }
.Svc.is-swapping .Svc-name,
.Svc.is-swapping .Svc-ver{ opacity: 0; }

/* ── The hero's popover, at the app's real size ──────────────────────────
   The rules above are Eddy's render, which is drawn ~1.5× life size — fine
   as a product shot in the modules, enormous hanging off a real menu bar.
   In the hero the panel is life size, every number from the Swift source:
   PopoverView 288 wide, padding 10; HeaderCardView padding 12, radius 10,
   8pt row spacing, 15pt semibold name, 12pt rows with 96 × 4 bars 10pt
   off the label; ServiceRowView 14pt semibold / 12pt, 7pt dot, padding
   7 × 10, rows 2pt apart, 10pt below the card. */
.Pop--hero{
  width: 288px;
  padding: 10px;
  border-radius: 17px;
  font-size: 12px;
}
.Pop--hero .Pop-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
}
.Pop--hero .Pop-name{
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 18px;
}
.Pop--hero .Pop-metric{
  grid-template-columns: minmax(0, 1fr) 96px;
  column-gap: 10px;
  height: 15px;
}
.Pop--hero .Pop-label,
.Pop--hero .Pop-sd{ line-height: 15px; }
.Pop--hero .Pop-bar,
.Pop--hero .Pop-fill{ height: 4px; border-radius: 2px; }
.Pop--hero .Pop-services{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}
.Pop--hero .Svc{
  height: auto;
  padding: 7px 10px;
  font-size: 14px;
  line-height: 17px;
}
.Pop--hero .Svc-name{ font-weight: 600; }
.Pop--hero .Svc-ver{ margin-left: 8px; font-size: 12px; }
.Pop--hero .Svc-dot{
  width: 7px; height: 7px;
  margin-left: 8px;
  box-shadow: 0 0 4px rgba(48,209,88,.7);
}
.Pop--hero .Svc.is-down .Svc-dot{ box-shadow: 0 0 4px rgba(255,69,58,.7); }


/* ═══════════════════════════════════════════════════════════════════════
   Modules
   ═══════════════════════════════════════════════════════════════════════ */
.Module--perf .Module-title,
.Module--services .Module-title,
.Module--windows .Module-title{ margin-top: 0; }

/* Module 1 — performance: the card on the left, copy on the right. */
.Hero + .Module--perf{ padding-top: 154px; }
.Module--perf .Module-inner,
.Module--services .Module-inner{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.Module-media--perf,
.Module-media--services{ display: flex; justify-content: center; }
.Showcase{ display: flex; flex-direction: column; align-items: center; gap: 22px; }
.Showcase-caption{
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: -.005em;
}
.Showcase-caption [data-perf-caption]{ transition: opacity .3s ease; }
.Showcase-caption.is-swapping [data-perf-caption]{ opacity: 0; }

/* Module 2 — services: copy left, list right. */
.Module--services{ padding-top: 180px; }

/* Module 3 — Windows: centred headline, then a slice of a Windows desktop. */
.Module--windows{ padding-top: 175px; padding-bottom: 104px; }
.Module--windows .Module-title--center{ margin-bottom: 0; }
.Module-sub{
  margin: 28px auto 0;
  max-width: 38em;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -.006em;
}

/* The screen: the Aegis wallpaper behind a Windows 11 taskbar, rounded
   like the receded hero. */
.WinShot{
  position: relative;
  width: min(1240px, 100%);
  height: 640px;
  margin: 64px auto 0;
  border-radius: 20px;
  overflow: hidden;
  background: #0B0C0E;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.WinShot-wall{
  position: absolute;
  inset: 0;
  background: #0B0C0E url('/Assets/Images/Wallpaper-Aegis-v1.webp') center / cover no-repeat;
}

/* MonitorFlyoutView: 440 × 498, black with a 1px #505050 border, 9pt
   corners; the card is #1B1B1B, 224 tall, rounded on top only. Numbers
   straight from the C#. Windows positions it 12px in from the screen's
   right and 12px above the taskbar. */
.Fly{
  position: absolute;
  right: 12px;
  bottom: 60px;
  width: 440px;
  height: 498px;
  border: 1px solid #505050;
  border-radius: 9px;
  background: #000;
  color: #fff;
  font-family: "Segoe UI Variable", "Segoe UI", var(--font);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
}
.Fly-card{
  height: 224px;
  padding: 30px 32px 25px;
  background: #1B1B1B;
  border-radius: 8px 8px 0 0;
}
.Fly-name{
  height: 43px;
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
}
.Fly-metric{
  display: grid;
  grid-template-columns: 198px 178px;
  align-items: center;
  height: 32px;
  font-size: 18px;
  color: #858585;
  white-space: nowrap;
}
.Fly-bar{
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: #353535;
  overflow: hidden;
}
.Fly-fill{
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: #fff;
  transform-origin: 0 50%;
  transform: scaleX(var(--f, 0));
}
.Fly-services{ padding: 24px 22px 20px 23px; }
.FlySvc{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  height: 50px;
  padding: 0 10px;
}
.FlySvc-name{ font-size: 21px; color: #fff; white-space: nowrap; }
.FlySvc-ver{ font-size: 17px; color: #696969; white-space: nowrap; }
.FlySvc-dot{
  position: relative;
  justify-self: end;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(0,255,128,.2);
}
.FlySvc-dot::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #00FF80;
}
.FlySvc.is-down .FlySvc-name{ color: #535353; }
.FlySvc.is-down .FlySvc-ver { color: #5C5C5C; }
.FlySvc.is-down .FlySvc-dot{ background: rgba(255,82,97,.2); }
.FlySvc.is-down .FlySvc-dot::after{ background: #FF5261; }

/* A Windows 11 taskbar: 48 tall, dark acrylic, start button centred, the
   notification area on the right with Aegis's icon selected. */
.Taskbar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  background: rgba(28,28,28,.82);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
          backdrop-filter: blur(30px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-family: "Segoe UI Variable", "Segoe UI", var(--font);
}
.Taskbar-start{
  position: absolute;
  top: 4px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-left: -20px;
  border-radius: 4px;
}
.Taskbar-start svg{ width: 22px; height: 22px; color: #4CC2FF; }
.Taskbar-tray{
  position: absolute;
  top: 4px; bottom: 4px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.Taskbar-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 32px;
  padding: 0 6px;
  border-radius: 4px;
}
.Taskbar-btn.is-open{ background: rgba(255,255,255,.09); }
.Taskbar-btn--group{ padding: 0 10px; }
.Taskbar-glyph{ width: 16px; height: 16px; color: rgba(255,255,255,.92); }
.Taskbar-glyph--aegis{ width: 20px; height: 20px; color: #E5E6E6; }
.Taskbar-clock{
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding: 0 10px;
  font-size: 12px;
  line-height: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Footer — identical to GitHound's (Hound.css); only the page colours,
   set above, decide anything.
   ═══════════════════════════════════════════════════════════════════════ */
.Footer{ padding-top: 106px; }
.Footer-signup{ max-width: 484px; }
.Footer-app{ font-weight: 700; color: var(--ink); margin-right: 2px; }
/* The idle button is drawn pale blue in the mockup rather than grey. */
.SignupForm--footer .SignupForm-button{
  background: #C6DCF0;
  color: #fff;
}
.SignupForm--footer.is-ready .SignupForm-button{ background: #0a84ff; }


/* ═══════════════════════════════════════════════════════════════════════
   Tablet: stack the split modules
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px){
  .Module--perf .Module-inner,
  .Module--services .Module-inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .Module--perf .Module-text{ order: -1; }
  .Hero + .Module--perf{ padding-top: 120px; }
  .Module--services{ padding-top: 120px; }
  .Module--windows{ padding-top: 120px; }
  .WinShot{ height: 600px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Phones
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* The wallpaper is painted by .Mobile as well as .Hero so the white,
     plus-lighter text has something to brighten — GitHound's arrangement. */
  .Hero,
  .Mobile{
    background: #0B0C0E url('/Assets/Images/Wallpaper-Aegis-v1.webp') center center / cover no-repeat;
  }

  /* The picture is the popover itself, centred in the box the other
     pages' windows fill (myPod's, so the name, field and rail land where
     theirs do). 474 tall into a box 566 × --m-win-scale tall: 1.15× the
     scale fills it with a little to spare. */
  .Pop--mobile{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(calc(var(--m-win-scale) * 1.15));
  }

  .MobileIntro{ z-index: auto; }
  .AppRail{ z-index: -1; }

  .BetaTag{
    border-color: rgba(255,255,255,.5);
    mix-blend-mode: plus-lighter;
  }
  .BetaTag-icon,
  .BetaTag-platform{ color: rgba(255,255,255,.9); }
  .BetaTag-label   { color: rgba(255,255,255,.6); }
  .BetaTag-icon--windows{ width: 10px; height: 10px; }

  /* The rotating platform — GitHound's unit swap (see Hound.css). */
  .BetaTag-swap{
    display: grid;
    align-items: center;
    justify-items: start;
    height: 100%;
    margin-right: 3.6px;
    transition: width .55s cubic-bezier(.4, 0, .2, 1);
  }
  .BetaTag-plat{
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(55%);
    filter: blur(2.5px);
    transition:
      opacity   .5s cubic-bezier(.4, 0, .2, 1),
      transform .55s cubic-bezier(.3, 1.25, .5, 1),
      filter    .5s cubic-bezier(.4, 0, .2, 1);
  }
  .BetaTag-plat.is-on{ opacity: 1; transform: none; filter: blur(0); }
  .BetaTag-plat.is-off{ transform: translateY(-55%); }
  .BetaTag-plat .BetaTag-platform{ margin-right: 0; }

  .SignupForm--mobile .SignupForm-field{
    border: .5px solid rgba(255,255,255,.22);
    border-radius: 10px;
    /* Much darker than GitHound's .12 (Eddy): on this near-black, busy
       wallpaper a light tint didn't read as a field at all. */
    background: rgba(0,0,0,.6);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .SignupForm--mobile .SignupForm-input,
  .SignupForm--mobile .SignupForm-input:hover,
  .SignupForm--mobile .SignupForm-input:focus,
  .SignupForm--mobile.is-ready .SignupForm-input:focus,
  .SignupForm--mobile.is-invalid .SignupForm-input{
    height: 56px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
  }
  .SignupForm--mobile .SignupForm-input{
    color: #fff;
    caret-color: #fff;
    mix-blend-mode: plus-lighter;
  }
  .SignupForm--mobile .SignupForm-input::placeholder{ color: rgba(255,255,255,.6); }
  .SignupForm--mobile .SignupForm-input:focus::placeholder{ color: rgba(255,255,255,.4); }
  .SignupForm--mobile .SignupForm-field:focus-within{
    border-color: #007BFF;
    box-shadow: 0 0 0 1.5px #007BFF;
  }
  .SignupForm--mobile.is-ready .SignupForm-field:focus-within{
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
  }
  .SignupForm--mobile.is-invalid .SignupForm-field{
    border-color: #FF6B60;
    box-shadow: 0 0 0 1.5px #FF6B60;
  }

  .AppRail-dot--free{
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(255,255,255,.75);
    mix-blend-mode: plus-lighter;
    transform: translate(var(--dot-x, -99px), var(--dot-y, 0px));
    pointer-events: none;
  }

  /* Modules: no phone mockup, so the other pages' phone rules. The panels
     are 442 wide; scaled to the column. */
  .Hero + .Module--perf{ padding-top: 72px; }
  .Module--services{ padding-top: 88px; }
  .Module--windows{ padding-top: 88px; padding-bottom: 72px; }
  .Module-sub{ margin-top: 20px; font-size: 16px; padding: 0 14px; }
  .Pop--card,
  .Pop--list{ zoom: .76; }
  .WinShot{ height: 520px; margin-top: 40px; border-radius: 14px; }
  /* zoom scales the flyout's own offsets too, so they're divided back out
     to keep it 12px in and 12px above the taskbar on screen. */
  /* Centred across the screen (Eddy), not hung off the right as on
     desktop. Both insets 0 + auto margins centre a fixed-width box, and
     zero needs no dividing by the zoom. */
  .Fly{ zoom: .74; left: 0; right: 0; margin: 0 auto; bottom: calc(60px / .74); }
  /* The tray fills the middle of a phone-width taskbar, so the start
     button moves to the left end — Windows 11's left-aligned taskbar. */
  .Taskbar-start{ left: 8px; margin-left: 0; }
  .Footer{ padding-top: 88px; }
}

@media (max-width: 360px){
  .Pop--card,
  .Pop--list{ zoom: .66; }
  .Fly{ zoom: .66; bottom: calc(60px / .66); }
}


/* ═══════════════════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .BetaTag-swap,
  .BetaTag-plat,
  .Pop-fill,
  .Svc-name, .Svc-ver, .Svc-dot{ transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Dark — colours only
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root{
    --page-bg:   #171717;          /* GitHound's, as asked */
    --footer-bg: #202020;
  }
  /* On the near-black page the panels need an edge to stand off it. */
  .Pop--card,
  .Pop--list{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.5); }
  .WinShot{ box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.5); }

  .Footer-app{ color: var(--ink); }
  .SignupForm--footer .SignupForm-button{
    background: rgba(198,220,240,.28);
    color: rgba(255,255,255,.7);
  }
  .SignupForm--footer.is-ready .SignupForm-button{ background: #0a84ff; color: #fff; }
}