@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,800;1,500;1,800&display=swap');

.aeg{
  --bg:#f4f4f1; --surface:#fff; --surface2:#f9f9f7; --border:#e6e6e1; --border2:#d4d4ce;
  --text:#0f0f0e; --muted:#6b6b62; --muted2:#3e3e38; --accent:#1655f0;
  --accent-s:rgba(22,85,240,.07); --ink:#0c0c0e; --ink-soft:#15151a;
  --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Inter',-apple-system,Segoe UI,sans-serif;
  color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.55;
}
.aeg *{ box-sizing:border-box; }
.aeg .wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }

.aeg .kicker{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent); margin:0 0 20px !important; }

.aeg .display{ font-family:var(--sans); font-weight:700; letter-spacing:-.035em; line-height:1.04 !important;
  font-size:clamp(40px,6.4vw,72px); margin:0 0 22px !important; }
.aeg h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; line-height:1.06 !important;
  font-size:clamp(30px,4.4vw,52px); margin:0 0 16px !important; }
.aeg .sub{ font-family:var(--sans); font-weight:400; font-size:clamp(18px,2vw,22px);
  line-height:1.5 !important; color:var(--muted); max-width:620px; margin:0 auto !important; }
.aeg .sub.left{ margin:0 !important; }
/* The hero paragraph only: at 22px it competed with the headline. */
.aeg .sec:first-child .sub{ font-size:19px !important; max-width:580px; }
.aeg .lgh .sub2{ display:block; font-size:55%; font-weight:500; letter-spacing:-.01em;
  line-height:1.15 !important; color:var(--muted); margin-top:12px; }

.aeg .wm{ font-family:var(--mono); font-weight:800; letter-spacing:-.05em; font-size:clamp(44px,7vw,80px); }
.aeg .wm i{ font-style:italic; font-weight:500; }
.aeg .wm b{ font-style:italic; font-weight:800; }
.aeg .wm-sp{ display:inline-block; width:.3em; }

.aeg .sec{ padding:33px 0 !important; }
.aeg .sec:first-child{ padding-top:4px !important; }
.aeg .center{ text-align:center !important; }
.aeg .center .sub{ margin-left:auto !important; margin-right:auto !important; }

.aeg .aeg-media{ width:100%; aspect-ratio:16/9; border-radius:0; border:1px solid var(--border);
  background:
    radial-gradient(ellipse at 30% 30%, var(--accent-s) 0%, transparent 62%),
    radial-gradient(ellipse at 74% 72%, rgba(22,85,240,.05) 0%, transparent 62%),
    var(--surface);
  box-shadow:0 18px 50px -24px rgba(13,13,20,.28);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--muted); }
.aeg video.aeg-media, .aeg img.aeg-media{ object-fit:cover; display:block; padding:0; border-radius:26px; overflow:hidden; }
.aeg .embed{ position:relative !important; width:100% !important; aspect-ratio:16/9; border-radius:0; box-shadow:0 18px 50px -24px rgba(13,13,20,.28); }
.aeg .embed iframe{ position:absolute !important; top:0; left:0; width:100% !important; height:100% !important; border:0; }
.aeg .mt{ margin-top:30px !important; }

.aeg .row{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:48px !important; align-items:center !important; }
.aeg .row + .row{ margin-top:48px !important; }
.aeg .row h2{ font-size:clamp(26px,3.2vw,38px); margin:0 0 10px !important; }
.aeg .row .sub{ font-size:18px; }

.aeg .dark{ background:var(--ink); color:#f1f1ee; border-radius:32px; padding:48px 24px !important;
  margin:0 auto !important; max-width:1100px; }
.aeg .dark .kicker{ color:#7fa0ff; }
.aeg .dark h2{ color:#f6f6f3; }
.aeg .dark .sub{ color:#b6b6b0; }
.aeg .dark .aeg-media{ background:
    radial-gradient(ellipse at 50% 40%, rgba(22,85,240,.22) 0%, transparent 60%), var(--ink-soft);
  border-color:#26262c; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); color:#8a8a93;
  max-width:520px !important; margin-left:auto !important; margin-right:auto !important; }

.aeg .feat{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 56px !important; max-width:880px; margin:0 auto !important; }
.aeg .feat div{ padding:22px 0 !important; border-top:1px solid var(--border); }
.aeg .feat h3{ font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:-.01em; margin:0 0 4px; color:var(--text); }
.aeg .feat p{ margin:0; font-size:15px; color:var(--muted); line-height:1.5; }

.aeg .chips{ display:flex !important; flex-wrap:wrap; gap:10px !important; justify-content:center; }
.aeg .chips span{ font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--muted2);
  background:var(--surface); border:1px solid var(--border2); border-radius:999px; padding:8px 16px; }

.aeg .specs{ max-width:720px; margin:0 auto !important; text-align:center !important; }
.aeg .specs .row2{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--muted);
  display:flex !important; flex-wrap:wrap; gap:10px 22px !important; justify-content:center; margin-top:18px !important; }
.aeg .specs .gtk{ font-size:15px; color:var(--muted); line-height:1.6; max-width:600px; margin:0 auto; }
.aeg .gtk-lead{ font-size:15.5px; color:var(--muted); line-height:1.6; max-width:640px; margin:0 auto 30px !important; }
.aeg .gtk-lead b{ color:var(--muted2); font-weight:600; }
.aeg .gtk-wrap{ max-width:660px; margin:0 auto 30px !important; }
.aeg .gtk-h{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted2); text-align:left; margin:0 0 6px !important; }
.aeg .gtk-list{ list-style:none; text-align:left; margin:0 !important; padding:0 !important; }
.aeg .gtk-list li{ font-size:14.5px; color:var(--muted); line-height:1.55;
  padding:13px 0 !important; border-top:1px solid var(--border); }
.aeg .gtk-list li b{ color:var(--text); font-weight:600; }

.aeg .ecp-img{ display:block; max-width:392px; width:100%; margin:50px auto 0 !important; border-radius:13px;
  border:1px solid #171717; box-shadow:0 26px 66px -26px rgba(10,10,16,.55); }
.aeg .dark .aeg-media.tut{ max-width:none !important; }

@media (max-width:720px){
  .aeg .sec{ padding:24px 0 !important; }
  .aeg .row{ grid-template-columns:1fr; gap:20px; }
  .aeg .row + .row{ margin-top:30px; }
  .aeg .feat{ grid-template-columns:1fr; gap:0; }
  .aeg .feat div:nth-child(2){ border-top:1px solid var(--border); }
  .aeg .dark{ border-radius:22px; padding:60px 20px; }
}



/* ============================================================================
   LANDING-PAGE LAYER. Everything above this line is the LIVE product page's own
   stylesheet, lifted byte-for-byte out of store_page_LIVE_backup_2026-09-11.html,
   so the two cannot drift. Nothing above is edited. Below is only what a landing
   page needs and a store page does not: a sticky bar, a buy button, a trust row,
   a click-to-play facade over the live page's .embed, and a footer.
   ============================================================================ */

/* The lifted block declares its tokens on .aeg, so anything OUTSIDE that div (the
   sticky bar) cannot see them: var() would fail and the button would render as
   transparent Times. Re-declaring on :root leaves the lift untouched. */
:root{
  --bg:#f4f4f1; --surface:#fff; --surface2:#f9f9f7; --border:#e6e6e1; --border2:#d4d4ce;
  --text:#0f0f0e; --muted:#6b6b62; --muted2:#3e3e38; --accent:#1655f0;
  --ink:#0c0c0e; --ink-soft:#15151a;
  --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Inter',-apple-system,Segoe UI,sans-serif;
}
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); }
/* :not(.buy) so a generic link colour cannot repaint the CTAs */
.aeg a:not(.buy){ color:var(--accent); }
/* an <img width=.. height=..> maps to a height presentational hint that defeats
   aspect-ratio, and object-fit:cover then crops. Hand the box back. */
.aeg img.aeg-media, .aeg video.aeg-media, .aeg .ecp-img{ height:auto; }

.slbar{ position:sticky; top:0; z-index:50; background:rgba(244,244,241,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border); }
.slbar .in{ max-width:1040px; margin:0 auto; padding:0 24px; height:58px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.slbar .home{ font-family:var(--mono); font-weight:800; letter-spacing:-.05em; font-size:16px;
  color:var(--text); text-decoration:none; }
.slbar .home i{ font-style:italic; font-weight:500; }
.slbar .home b{ font-style:italic; font-weight:800; }
.slbar .home .sp{ display:inline-block; width:.3em; }

.buy{ display:inline-block; font-family:var(--mono); font-weight:500; font-size:12.5px; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; border-radius:999px; padding:14px 26px;
  background:var(--text); color:#f7f7f4; border:1px solid var(--text);
  transition:transform .18s ease, opacity .18s ease; }
.buy:hover{ transform:translateY(-1px); opacity:.9; }
.buy.sm{ padding:9px 17px; font-size:11px; }
.buy b{ font-weight:800; letter-spacing:.06em; }
.buy.ghost{ background:transparent; color:var(--text); border-color:var(--border2); }
.buy.ghost:hover{ border-color:var(--text); }

.aeg .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:30px 0 0; }
.aeg .trust{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; margin:20px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.aeg .trust span{ display:inline-flex; align-items:center; gap:7px; }
.aeg .embed + .trust{ margin-top:22px !important; }
.aeg .trust svg{ width:11px; height:11px; flex:none; fill:none; stroke:currentColor;
  stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }

/* Facade over the live page's .embed: local poster, and the youtube-nocookie player
   is only built on click, so a page view costs Google nothing. */
.aeg .embed{ overflow:hidden; background:var(--ink); }
.aeg .embed img{ width:100%; height:100%; object-fit:cover; display:block; }
.aeg .embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.aeg .embed .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:999px; cursor:pointer; padding:0;
  background:#f7f7f4; border:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 10px 40px -8px rgba(0,0,0,.55);
  display:grid; place-items:center; transition:transform .18s ease, box-shadow .18s ease; }
.aeg .embed .play:hover{ transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 14px 52px -6px rgba(0,0,0,.6); }
.aeg .embed .play:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.aeg .embed .play svg{ width:28px; height:28px; fill:#0f0f0e; margin-left:4px; }
.aeg .embed .lbl{ position:absolute; left:0; right:0; bottom:14px; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.82); pointer-events:none; }
@media (max-width:720px){ .aeg .embed .play{ width:64px; height:64px; } }

.aeg .closing{ text-align:center; }
/* The final ask should not be the same size as the nav button. */
.aeg .closing .buy{ font-size:14px; padding:18px 36px; letter-spacing:.11em; }
@media (max-width:720px){ .aeg .closing .buy{ font-size:12.5px; padding:15px 26px; } }
.aeg footer{ border-top:1px solid var(--border); padding:24px 0 54px; margin-top:40px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
.aeg footer a:not(.buy){ color:var(--muted); text-decoration:none; }  /* :not() to outrank .aeg a:not(.buy) */

/* The lifted rule .aeg .sec:first-child{ padding-top:4px } is correct ON AESCRIPTS, where their
   own page furniture sits above the block and supplies the gap. Standalone, that leaves the
   wordmark jammed under the sticky bar, so the first section gets its air back. */
.aeg .sec:first-child{ padding-top:56px !important; }
@media (max-width:720px){ .aeg .sec:first-child{ padding-top:36px !important; } }


/* ============================ THEME: DARK BY DEFAULT ============================
   The lifted product-page stylesheet above is untouched and still describes the LIGHT
   theme. Dark is the default here, applied to anything that has not explicitly asked
   for light, so it holds even with JS off. Light is opt-in via the toggle.
   Dark is done purely by re-declaring the store page's own tokens: --ink stops meaning
   "the dark block" and becomes "a raised surface", which is the only structural change
   the inversion needs. */

.slbar .right{ display:flex; align-items:center; gap:10px; }
/* the button does nothing without JS, so it only appears once JS has run */
.tt{ display:none; width:34px; height:34px; border-radius:999px; padding:0; cursor:pointer;
  border:1px solid var(--border2); background:transparent; color:var(--text);
  place-items:center; transition:border-color .18s ease, transform .18s ease; }
html.js .tt{ display:grid; }
.tt:hover{ border-color:var(--text); transform:translateY(-1px); }
.tt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tt svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
/* the icon always shows the theme you would switch TO, so dark shows a sun */
.tt .moon{ display:none; }
.tt .sun{ display:block; }
:root[data-theme="light"] .tt .moon{ display:block; }
:root[data-theme="light"] .tt .sun{ display:none; }

:root:not([data-theme="light"]),
:root:not([data-theme="light"]) .aeg{
  --bg:#0b0b0d; --surface:#17171b; --surface2:#131317; --border:#26262b; --border2:#3a3a42;
  --text:#f2f2f0; --muted:#9d9d96; --muted2:#cfcfc8; --accent:#7ea2ff;
  --accent-s:rgba(126,162,255,.10); --ink:#17171a; --ink-soft:#1f1f25;
}
:root:not([data-theme="light"]) .slbar{ background:rgba(11,11,13,.88); }
/* the pill's ground is var(--text), now near-white, so its label must invert */
:root:not([data-theme="light"]) .buy{ color:#0b0b0d; }
:root:not([data-theme="light"]) .buy.ghost{ color:var(--text); }      /* ...but not the outlined one */
/* the two .dark blocks are the page's drama. On a dark page they would vanish into it,
   so --ink becomes a raised surface and they get a hairline to sit on. */
:root:not([data-theme="light"]) .aeg .dark{ border:1px solid #2c2c33; }
:root:not([data-theme="light"]) .aeg .ecp-img{ border-color:#3a3a42; }
:root:not([data-theme="light"]) .aeg .aeg-media{ box-shadow:0 18px 50px -24px rgba(0,0,0,.65); }


/* ============================ CONSENT BANNER ============================
   Shown only to EEA / UK / CH visitors who have not chosen yet. Sits above the
   page rather than blocking it, because it is asking about a measurement cookie,
   not gating the content. */
.slconsent{ position:fixed; left:16px; right:16px; bottom:16px; z-index:100;
  max-width:680px; margin:0 auto; padding:16px 18px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border2);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.35);
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.slconsent[hidden]{ display:none; }
.slconsent p{ margin:0; flex:1 1 300px; font-size:13.5px; line-height:1.5; color:var(--muted2); }
.slconsent a{ color:var(--accent); }
.slconsent-act{ display:flex; gap:8px; flex:none; }
:root:not([data-theme="light"]) .slconsent{ background:#17171a; border-color:#2c2c33; }
@media (max-width:560px){
  .slconsent{ left:12px; right:12px; bottom:12px; padding:14px; }
  .slconsent-act{ width:100%; }
  .slconsent-act .buy{ flex:1 1 0; text-align:center; }
}