/* Built by website/src/build.py from src/css/ (v27): edit those files, not this one. */

/* Drainspot's website: every page uses this one file. Dark and light, left-to-right and right-to-left (logical
   properties throughout), no outside fonts or images, so the strict CSP in _headers holds.
   Layers, in cascade order: reset, tokens (colours, sizes), base, layout, components, effects (motion).
   After the main layers, each later feature adds its own tokens/components/effects in one block: the hero battery,
   the charge story, the ambient background, the 3D tilt (tilt.js).
   After editing, raise CSS_VERSION in tools/siteconfig.py and run tools/build.py: every page's ?v= follows it. */

@layer reset, tokens, base, layout, components, effects;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    color-scheme: dark light;
  }

  body {
    margin: 0;
    overflow-x: clip;
  }

  h1, h2, h3, p, ul, ol, dl, dd, figure {
    margin: 0;
  }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  img, svg, picture {
    display: block;
    max-width: 100%;
  }

  button, input {
    font: inherit;
    color: inherit;
  }
}

@layer tokens {
  :root {
    --bg: #07080b;
    --bg-elevated: #0d1016;
    --surface: #11141c;
    --surface-2: #171b26;
    --surface-glass: rgba(15, 18, 26, 0.78);
    --surface-popover: rgba(18, 21, 30, 0.94);
    --fill: rgba(255, 255, 255, 0.04);
    --fill-2: rgba(255, 255, 255, 0.075);

    --label: #f4f6fa;
    --label-2: #b0b8c9;
    --label-3: #8791a4;
    --border: rgba(255, 255, 255, 0.085);
    --border-strong: rgba(255, 255, 255, 0.16);
    --specular: rgba(255, 255, 255, 0.11);

    --accent: #4dd4ab;
    --accent-bright: #7beed0;
    --accent-dim: rgba(77, 212, 171, 0.13);
    --accent-border: rgba(77, 212, 171, 0.32);
    --on-accent: #051610;

    --blue: #6aa8f8;
    --blue-dim: rgba(106, 168, 248, 0.14);
    --blue-border: rgba(106, 168, 248, 0.30);

    --amber: #f4b76b;
    --amber-dim: rgba(244, 183, 107, 0.14);
    --amber-border: rgba(244, 183, 107, 0.30);

    --cell-case: rgba(255, 255, 255, 0.36);
    --cell-fill: linear-gradient(90deg, #3ac39a, #7ff1d2);


    --shadow-sm: 0 12px 28px -16px rgba(0, 0, 0, 0.65);
    --shadow-card:
      0 28px 60px -30px rgba(0, 0, 0, 0.80),
      inset 0 1px 0 var(--specular);
    --shadow-hardware:
      0 55px 120px -28px rgba(0, 0, 0, 0.92),
      0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-float:
      0 36px 80px -22px rgba(0, 0, 0, 0.90),
      0 0 0 1px rgba(255, 255, 255, 0.14);

    --in-oklab: ;
    --in-oklch: ;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", sans-serif;
    --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", sans-serif;
    --rounded: ui-rounded, "SF Pro Rounded", var(--display);

    --wrap: 74rem;
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
  }

  @supports (color: color-mix(in oklab, black, white)) {
    :root {
      --in-oklab: in oklab;
      --in-oklch: in oklch;
    }
  }

  :root:lang(ar) {
    --font: -apple-system, BlinkMacSystemFont, "SF Arabic", "SF Pro Arabic", "SF Pro Text", system-ui, "Geeza Pro", sans-serif;
    --display: -apple-system, BlinkMacSystemFont, "SF Arabic", "SF Pro Display", system-ui, "Geeza Pro", sans-serif;
  }

  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f6f7fa;
      --bg-elevated: #eceff5;
      --surface: #ffffff;
      --surface-2: #f1f4f9;
      --surface-glass: rgba(255, 255, 255, 0.84);
      --surface-popover: rgba(255, 255, 255, 0.96);
      --fill: rgba(15, 23, 42, 0.035);
      --fill-2: rgba(15, 23, 42, 0.065);

      --label: #15181e;
      --label-2: #4a5262;
      --label-3: #5b6373;
      --border: rgba(15, 23, 42, 0.09);
      --border-strong: rgba(15, 23, 42, 0.16);
      --specular: rgba(255, 255, 255, 0.95);

      --accent: #097c5f;
      --accent-bright: #18a582;
      --accent-dim: rgba(9, 124, 95, 0.10);
      --accent-border: rgba(9, 124, 95, 0.28);
      --on-accent: #ffffff;

      --blue: #1a5dc9;
      --blue-dim: rgba(26, 93, 201, 0.10);
      --blue-border: rgba(26, 93, 201, 0.26);

      --amber: #9c5600;
      --amber-dim: rgba(156, 86, 0, 0.10);
      --amber-border: rgba(156, 86, 0, 0.24);

      --cell-case: rgba(15, 23, 42, 0.28);
      --cell-fill: linear-gradient(90deg, #0b8a6b, #28bd96);


      --shadow-sm: 0 10px 24px -14px rgba(15, 23, 42, 0.12);
      --shadow-card:
        0 24px 52px -28px rgba(15, 23, 42, 0.12),
        0 2px 6px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 var(--specular);
      --shadow-hardware:
        0 40px 85px -24px rgba(15, 23, 42, 0.24),
        0 0 0 1px rgba(15, 23, 42, 0.12);
      --shadow-float:
        0 30px 70px -22px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(15, 23, 42, 0.12);
    }
  }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--label);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.58;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 8px;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -4rem;
    background: var(--accent);
    color: var(--on-accent);
    padding: 0.625rem 1rem;
    border-radius: 10px;
    font-weight: 650;
    font-size: 0.875rem;
    text-decoration: none;
    z-index: 200;
  }

  .skip:focus {
    inset-block-start: 1rem;
  }
}

@layer layout {
  .wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1rem, 3.2vw, 2.5rem);
  }

  .section {
    padding-block: clamp(4.25rem, 8vw, 7rem);
    position: relative;
    scroll-margin-block-start: 4.25rem;
  }

  .section + .section {
    border-top: 1px solid var(--border);
  }

  .section-head {
    max-width: 42rem;
    margin-block-end: clamp(2rem, 4.5vw, 3.25rem);
  }

  .section-head h2 {
    font-family: var(--display);
    font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -0.032em;
    font-weight: 700;
    text-wrap: balance;
  }

  :lang(ar) .section-head h2 {
    letter-spacing: 0;
    line-height: 1.24;
  }

  .section-head p {
    margin-block-start: 0.875rem;
    color: var(--label-2);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.58;
  }

  .explain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .explain-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--fill);
  }

  .explain-card h3 { font-size: 1.125rem; line-height: 1.35; }
  .explain-card p { color: var(--label-2); line-height: 1.6; flex: 1; }
  .explain-card a { color: var(--accent-bright); font-weight: 600; text-underline-offset: 0.2em; }

  @media (max-width: 48em) {
    .explain-grid { grid-template-columns: 1fr; }
  }
}

@layer components {
  /* ── Top Navigation Bar ─────────────────────────────────────────────────── */
  .top {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: var(--surface-glass);
    backdrop-filter: saturate(190%) blur(24px);
    -webkit-backdrop-filter: saturate(190%) blur(24px);
    border-bottom: 1px solid var(--border);
  }

  .top .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 3.75rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.025em;
    flex: none;
  }

  .brand img {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 7px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(0.125rem, 0.7vw, 0.375rem);
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--fill);
    border: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--label-2);
  }

  .nav a {
    text-decoration: none;
    white-space: nowrap;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
  }

  .nav a:hover {
    color: var(--label);
    background: var(--fill-2);
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    flex: none;
  }

  .lang {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--label-2);
    text-decoration: none;
    padding: 0.4375rem 0.8125rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--fill);
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
  }

  .lang svg {
    width: 0.9375rem;
    height: 0.9375rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
  }

  .lang:hover {
    border-color: var(--border-strong);
    color: var(--label);
    background: var(--fill-2);
  }

  .menu-btn {
    display: none;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.8125rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--label);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    anchor-name: --menu-btn;
  }

  .menu-btn svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
  }

  .mobile-nav {
    margin: 0;
    padding: 0.5rem;
    min-inline-size: min(14.5rem, 86vw);
    border-radius: 18px;
    background: var(--surface-popover);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(22px);
    position: fixed;
    inset-block-start: 4.125rem;
    inset-inline-end: 1rem;
    inset-inline-start: auto;
    color: var(--label);
  }

  @supports (position-anchor: --menu-btn) {
    .mobile-nav {
      position-anchor: --menu-btn;
      inset: auto;
      inset-block-start: calc(anchor(end) + 0.5rem);
      justify-self: anchor-end;
    }
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6875rem 0.875rem;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--label-2);
    transition: background-color 0.15s, color 0.15s;
  }

  .mobile-nav a:hover {
    background: var(--fill-2);
    color: var(--label);
  }

  /* The full bar needs about 880px (Arabic a little more); below that the menu button takes over. */
  @media (max-width: 56em) {
    .nav {
      display: none;
    }
    .menu-btn {
      display: inline-flex;
    }
    .top .btn.get {
      display: none;
    }
  }

  /* The smallest phones (320px): the menu button keeps only its icon; the word stays for screen readers. */
  @media (max-width: 22.5em) {
    .menu-btn span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .header-actions {
      gap: 0.375rem;
    }
  }
}

@layer components {
  /* ── Tactile Buttons ────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5625rem;
    min-block-size: 2.875rem;
    padding: 0.6875rem 1.375rem;
    border-radius: 14px;
    font-size: 0.9375rem;
    font-weight: 620;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  }

  .btn svg {
    width: 1.0625rem;
    height: 1.0625rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  .btn.primary {
    background: linear-gradient(180deg var(--in-oklab), var(--accent-bright), var(--accent));
    color: var(--on-accent);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      0 14px 34px -12px color-mix(in oklab, var(--accent) 68%, transparent);
    position: relative;
    overflow: hidden;
  }

  .btn.primary:not(.soon):hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
  }

  /* A charge of light crosses the button on hover, in the writing direction. */
  .btn.primary::after {
    content: "";
    position: absolute;
    inset: 0;
    translate: -130% 0;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.42) 50%, transparent 68%);
    pointer-events: none;
    transition: translate 0.01ms;
  }

  .btn.primary:not(.soon):hover::after {
    translate: 130% 0;
    transition: translate 0.55s ease;
  }

  :lang(ar) .btn.primary::after {
    translate: 130% 0;
  }

  :lang(ar) .btn.primary:not(.soon):hover::after {
    translate: -130% 0;
  }

  .btn.quiet {
    background: var(--surface-2);
    color: var(--label);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
  }

  .btn.quiet:not(.soon):hover {
    transform: translateY(-1px);
    border-color: var(--accent-border);
    background: color-mix(in oklab, var(--surface-2) 86%, var(--accent));
  }

  /* Pro in the hero: a mint-edged glass button with a solid "Pro" tag and the price, and a sheen on hover. */
  .btn.pro {
    position: relative;
    overflow: hidden;
    gap: 0.75rem;
    padding-inline: 0.4375rem 1.25rem;
    color: var(--label);
    border: 1px solid transparent;
    background:
      radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%) padding-box,
      linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
      linear-gradient(135deg, var(--accent-bright), color-mix(in oklab, var(--accent) 18%, transparent) 48%, var(--accent-bright)) border-box;
    box-shadow:
      inset 0 1px 0 var(--specular),
      0 14px 34px -16px color-mix(in oklab, var(--accent) 62%, transparent);
  }
  .btn.pro .pro-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 10px;
    background: linear-gradient(180deg var(--in-oklab), var(--accent-bright), var(--accent));
    color: var(--on-accent);
    font-size: 0.8125rem;
    font-weight: 720;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 12px -4px color-mix(in oklab, var(--accent) 70%, transparent);
  }
  .btn.pro .pro-tag svg {
    width: 0.8125rem;
    height: 0.8125rem;
    fill: currentColor;
    stroke: none;
  }
  .btn.pro .pro-price {
    color: var(--label-2);
    font-weight: 560;
  }
  .btn.pro .pro-price b {
    color: var(--label);
    font-weight: 720;
    font-variant-numeric: tabular-nums;
  }
  .btn.pro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  .btn.pro:hover {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 var(--specular),
      0 18px 40px -14px color-mix(in oklab, var(--accent) 75%, transparent);
  }
  @media (prefers-reduced-motion: no-preference) {
    .btn.pro:hover::after {
      transform: translateX(120%);
      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
  }
  @media (forced-colors: active) {
    .btn.pro { border: 1px solid ButtonText; background: ButtonFace; }
    .btn.pro .pro-tag { background: Highlight; color: HighlightText; }
  }

  /* Clear Free vs Pro hierarchy on pre-launch buttons */
  .btn.soon {
    cursor: default;
  }

  .btn.primary.soon {
    background:
      radial-gradient(130% 150% at 50% 0%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 68%),
      linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 82%, var(--accent)), var(--surface));
    color: var(--label);
    border-color: color-mix(in oklab, var(--accent) 52%, var(--border-strong));
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, var(--accent-bright) 30%, var(--specular)),
      0 14px 36px -14px color-mix(in oklab, var(--accent) 55%, transparent);
  }

  .btn.primary.soon .beacon {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 0 3px var(--accent-dim), 0 0 10px var(--accent);
    flex: none;
  }

  .btn.quiet.soon {
    background: var(--fill);
    color: var(--label-2);
    border-color: var(--border);
    box-shadow: none;
  }

  .top .btn {
    min-block-size: 2.1875rem;
    padding: 0.375rem 0.9375rem;
    font-size: 0.8125rem;
    border-radius: 999px;
  }
}

@layer components {
  /* ── Keynote Centered Hero & MacBook Hardware Stage ─────────────────────── */
  .hero {
    position: relative;
    padding-block: clamp(1.75rem, 3.8vw, 3.5rem) clamp(3.5rem, 6vw, 5.5rem);
    overflow: hidden;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset-block-start: -8rem;
    inset-inline: -15%;
    block-size: 46rem;
    background:
      radial-gradient(46% 52% at 50% 24%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 72%),
      radial-gradient(32% 38% at 22% 48%, color-mix(in oklab, var(--blue) 14%, transparent), transparent 72%),
      radial-gradient(32% 38% at 78% 48%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%);
    pointer-events: none;
    z-index: 0;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    block-size: 38rem;
    background-image:
      linear-gradient(to right, var(--border) 1px, transparent 1px),
      linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    opacity: 0.38;
    -webkit-mask-image: radial-gradient(72% 72% at 50% 34%, black 22%, transparent 86%);
    mask-image: radial-gradient(72% 72% at 50% 34%, black 22%, transparent 86%);
    pointer-events: none;
    z-index: 0;
  }

  .hero > .wrap {
    position: relative;
    z-index: 1;
  }

  .hero-header {
    text-align: center;
    max-width: 52rem;
    margin-inline: auto;
  }

  h1 {
    font-family: var(--display);
    font-weight: 720;
    font-size: clamp(2.35rem, 1.4rem + 3.4vw, 4.35rem);
    line-height: 1.03;
    letter-spacing: -0.038em;
    margin-block-start: 1.125rem;
    text-wrap: balance;
  }

  /* The headline is set in the same graded ink as the battery readout, so both read as one instrument. */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero h1 {
      background: var(--battery-numeral);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  :lang(ar) h1 {
    letter-spacing: 0;
    line-height: 1.18;
  }

  .lead {
    margin-block-start: 1rem;
    margin-inline: auto;
    max-width: 40rem;
    font-size: clamp(1.03rem, 0.96rem + 0.35vw, 1.2rem);
    line-height: 1.56;
    color: var(--label-2);
    text-wrap: pretty;
  }

  .cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: 1.5rem;
  }
}

@layer components {
  /* ── Interactive Tabs + Space Black MacBook Pro Frame + Floating HUDs ───── */
  .stage-showcase {
    margin-block-start: clamp(1.85rem, 3.6vw, 2.75rem);
  }

  /* Hardware + HUD layout */
  .hardware-stage {
    position: relative;
    max-width: 68rem;
    margin-inline: auto;
  }

  .macbook {
    position: relative;
    max-width: 55rem;
    margin-inline: auto;
  }

  .macbook-lid {
    position: relative;
    padding: clamp(0.5rem, 1.1vw, 0.8125rem);
    border-radius: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px) 6px 6px;
    background: linear-gradient(180deg, #272b35 0%, #14171d 12%, #0c0e13 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--shadow-hardware);
  }

  .macbook-notch {
    position: relative;
    width: 6.25rem;
    height: 0.75rem;
    margin-inline: auto;
    margin-block-end: -0.1875rem;
    background: #0b0d11;
    border-radius: 0 0 8px 8px;
    display: grid;
    place-items: center;
    z-index: 4;
  }

  .macbook-notch::before {
    content: "";
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #4fa88f, #11221e 65%);
    box-shadow: 0 0 6px rgba(77, 212, 171, 0.45);
  }

  .macbook-screen {
    position: relative;
    display: grid;
    border-radius: clamp(10px, 1.3vw, 15px);
    overflow: hidden;
    background: #0b0c10;
  }

  .macbook-base {
    height: 0.875rem;
    margin-inline: clamp(-1.25rem, -2.5vw, -0.5rem);
    border-radius: 3px 3px 14px 14px;
    background: linear-gradient(180deg, #3c4250 0%, #262a34 45%, #161920 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.75);
    position: relative;
  }

  .macbook-base::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: calc(50% - 3.5rem);
    height: 0.3125rem;
    border-radius: 0 0 6px 6px;
    background: #101319;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  }

  /* Overlapping grid slides inside MacBook Screen */
  .stage-panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.988);
    transition:
      opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.3s step-end;
    display: grid;
    place-items: center;
    background: #0d1016;
  }

  .stage-panel img.shot {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  /* The hero shows the Now page only; the other pages appear in the features below. */
  .stage-panel[data-view="now"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .hero-meta {
    margin-block-start: 1.25rem;
    font-size: 0.875rem;
    color: var(--label-3);
  }
}

@layer components {
  /* ── On the desktop: the real widget and menu bar window ───────────────── */
  .desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }

  .desktop-copy h2 {
    font-family: var(--display);
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.032em;
    font-weight: 720;
    text-wrap: balance;
  }

  :lang(ar) .desktop-copy h2 {
    letter-spacing: 0;
    line-height: 1.25;
  }

  .desktop-copy p {
    margin-block-start: 1rem;
    max-width: 30rem;
    color: var(--label-2);
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  /* The widget as macOS draws it, with the menu bar window standing behind and to the side. */
  .desktop-shots {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    align-items: start;
    gap: 1.5rem;
  }

  .widget-shot {
    display: block;
    width: 100%;
    max-width: 22.5rem;
    align-self: center;
    justify-self: end;
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
  }

  .widget-shot img {
    display: block;
    width: 100%;
    height: auto;
  }

  .pop-shot img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow-float);
  }

  @media (max-width: 56em) {
    .desktop-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 36em) {
    .desktop-shots {
      grid-template-columns: 1fr;
      justify-items: center;
    }
    .widget-shot {
      justify-self: center;
    }
    .pop-shot {
      max-width: 15rem;
    }
  }
}

@layer components {
  /* ── Section 4: Feature Chapters with Custom Icon Bullets & Stages ─────── */
  .feature {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }

  .feature + .feature {
    margin-block-start: clamp(4.5rem, 8.5vw, 7.5rem);
  }

  .feature.flip .copy {
    order: 2;
  }

  .feature-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .page-name {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--accent);
  }

  .feature[data-tone="blue"] .page-name {
    color: var(--blue);
  }

  .feature[data-tone="amber"] .page-name {
    color: var(--amber);
  }

  .feature h3 {
    font-family: var(--display);
    font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem);
    line-height: 1.14;
    letter-spacing: -0.028em;
    font-weight: 700;
    margin-block-start: 1rem;
    text-wrap: balance;
  }

  :lang(ar) .feature h3 {
    letter-spacing: 0;
    line-height: 1.28;
  }

  .feature p {
    margin-block-start: 0.875rem;
    color: var(--label-2);
    font-size: 1.03125rem;
  }

  .icon-list {
    margin-block-start: 1.5rem;
    display: grid;
    gap: 0.875rem;
  }

  .icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--label-2);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .icon-list li::before {
    content: "";
    inline-size: 0.3125rem;
    block-size: 0.3125rem;
    margin-block-start: 0.625em;
    border-radius: 50%;
    background: var(--label-3);
    flex: none;
  }

  .shot-stage {
    position: relative;
    padding: clamp(0.875rem, 2vw, 1.5rem);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(80% 70% at 50% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 68%),
      var(--surface);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .feature[data-tone="blue"] .shot-stage {
    background:
      radial-gradient(80% 70% at 50% 0%, color-mix(in oklab, var(--blue) 20%, transparent), transparent 68%),
      var(--surface);
  }

  .feature[data-tone="amber"] .shot-stage {
    background:
      radial-gradient(80% 70% at 50% 0%, color-mix(in oklab, var(--amber) 20%, transparent), transparent 68%),
      var(--surface);
  }

  .shot-stage .shot {
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.72);
  }

  @media (max-width: 56em) {
    .feature {
      grid-template-columns: 1fr;
    }
    .feature.flip .copy {
      order: 0;
    }
  }
}

@layer components {
  /* ── Section 5: Pricing Cards & Icon Comparison Table ───────────────────── */
  .plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.375rem;
    align-items: stretch;
  }

  @media (max-width: 48em) {
    .plans {
      grid-template-columns: 1fr;
    }
  }

  .plan {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(1.75rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
  }

  .plan.pro {
    position: relative;
    border-color: var(--accent-border);
    background:
      radial-gradient(95% 65% at 50% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 68%),
      var(--surface);
    box-shadow:
      0 32px 72px -30px color-mix(in oklab, var(--accent) 42%, transparent),
      inset 0 1px 0 color-mix(in oklab, var(--accent-bright) 28%, var(--specular)),
      var(--shadow-card);
  }

  .plan.pro::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 20%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  }

  .plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .plan h3 {
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 640;
    color: var(--label-2);
  }

  .plan.pro h3 {
    color: var(--accent);
  }

  .plan-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 620;
    padding: 0.25rem 0.6875rem;
    border-radius: 999px;
    background: var(--fill);
    border: 1px solid var(--border);
    color: var(--label-2);
  }

  .plan.pro .plan-tag {
    background: var(--accent-dim);
    border-color: var(--accent-border);
    color: var(--accent);
  }

  .price {
    font-family: var(--rounded);
    font-size: clamp(3rem, 2.4rem + 2vw, 4rem);
    font-weight: 720;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-block-start: 1.25rem;
    font-variant-numeric: tabular-nums;
  }

  .plan.pro .price {
    background: linear-gradient(180deg, var(--label) 30%, var(--accent-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  :lang(ar) .price {
    letter-spacing: 0;
  }

  .price small {
    font-size: 0.28em;
    font-weight: 560;
    color: var(--label-2);
    -webkit-text-fill-color: var(--label-2);
    letter-spacing: 0;
    margin-inline-start: 0.25em;
  }

  /* Pro's two prices side by side: monthly, and lifetime marked as the better deal. */
  .price-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-block-start: 1.25rem;
  }

  .price-option {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--fill);
  }

  .price-option.best {
    border-color: var(--accent-border);
    background: var(--accent-dim);
  }

  .po-name {
    font-size: 0.8125rem;
    font-weight: 640;
    color: var(--label-2);
  }

  .price-option.best .po-name {
    color: var(--accent);
  }

  .po-price {
    font-family: var(--rounded);
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
    font-weight: 720;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--label);
  }

  :lang(ar) .po-price {
    letter-spacing: 0;
  }

  .po-price small {
    white-space: nowrap;
    font-size: 0.45em;
    font-weight: 560;
    letter-spacing: 0;
    color: var(--label-2);
    margin-inline-start: 0.3em;
  }

  .po-fine {
    font-size: 0.8125rem;
    color: var(--label-2);
  }

  @media (max-width: 26em) {
    .price-options {
      grid-template-columns: 1fr;
    }
  }

  .plan .note {
    margin-block-start: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--label);
  }

  .plan ul {
    margin-block: 1.5rem 1.75rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--border);
    display: grid;
    align-content: start;
    gap: 0.875rem;
    flex: 1;
    font-size: 0.9375rem;
    color: var(--label-2);
  }

  .plan.pro ul {
    border-color: var(--accent-border);
    color: var(--label);
  }

  .plan li {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
  }

  .check-chip {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: 0.125rem;
    border-radius: 50%;
    background: var(--fill);
    border: 1px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: var(--label-2);
  }

  .plan.pro .check-chip {
    background: var(--accent-dim);
    border-color: var(--accent-border);
    color: var(--accent);
  }

  .check-chip svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .plan .btn {
    inline-size: 100%;
  }

  .plan .fine {
    margin-block-start: 0.75rem;
    font-size: 0.8125rem;
    color: var(--label-3);
    text-align: center;
  }
}

@layer components {
  .table-wrap {
    margin-block-start: 2.25rem;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }

  .compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    min-inline-size: 36rem;
  }

  .compare caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .compare th,
  .compare td {
    text-align: start;
    padding: 0.9375rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }

  .compare tr:last-child th,
  .compare tr:last-child td {
    border-bottom: 0;
  }

  .compare thead th,
  .compare thead td {
    font-weight: 680;
    color: var(--label);
    background: var(--fill);
    font-size: 0.875rem;
  }

  .compare thead th:last-child {
    color: var(--accent);
  }

  /* The Pro column is the one being sold: a faint cell-green band and brighter text pull the eye
     to it, while Free steps back a shade. The band spans head to foot of the column. */
  .compare thead th:last-child,
  .compare tbody td:last-child {
    background: color-mix(in oklab, var(--accent) 7%, transparent);
    border-inline-start: 1px solid var(--accent-border);
  }

  .compare tbody td:last-child {
    color: var(--label);
  }

  .compare tbody th {
    font-weight: 560;
    color: var(--label);
  }

  .row-label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
  }

  .row-label svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: var(--label-3);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  .compare tbody td {
    color: var(--label-2);
  }

  /* "+" opens every Pro line that builds on Free: set in the accent so the pattern reads at a glance. */
  .compare .plus {
    color: var(--accent);
    font-weight: 700;
    margin-inline-end: 0.125rem;
  }

  /* "Not included" as a quiet hollow ring, the same size as the tick, so the two scan as a pair. */
  .dash-badge {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px dashed var(--border-strong);
    color: var(--label-3);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  .compare tbody tr:hover {
    background: var(--fill);
  }

  .tick-badge {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
  }

  /* Phones: the comparison fits the screen and its words wrap. A wider table, even inside its scroll box,
     makes Chrome on Android zoom the whole page out. */
  @media (max-width: 40em) {
    .compare {
      min-inline-size: 0;
      font-size: 0.8125rem;
    }
    .compare th,
    .compare td {
      padding: 0.75rem 0.625rem;
    }
    .compare tbody th svg {
      display: none;
    }
  }
}

@layer components {
  /* ── Section 6: Privacy Vault w/ 3D Hardware Core ───────────────────────── */
  .privacy {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  @media (max-width: 56em) {
    .privacy {
      grid-template-columns: 1fr;
    }
  }

  .privacy-visual {
    display: grid;
    gap: 1.5rem;
  }

  .privacy-intro h2 {
    font-family: var(--display);
    font-size: clamp(1.85rem, 1.3rem + 2vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 700;
    text-wrap: balance;
  }

  :lang(ar) .privacy-intro h2 {
    letter-spacing: 0;
    line-height: 1.26;
  }

  .privacy-intro p {
    margin-block-start: 0.75rem;
    color: var(--label-2);
    font-size: 1.03125rem;
  }

  .privacy-intro p a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-block-start: 0.25rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 620;
    border-bottom: 1px solid var(--accent-border);
    padding-block-end: 0.125rem;
  }

  .privacy-cards {
    display: grid;
    gap: 0.875rem;
  }

  .privacy-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.375rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
  }

  .privacy-item dt {
    font-family: var(--display);
    font-weight: 660;
    font-size: 1rem;
    margin-block-end: 0.25rem;
  }

  .privacy-item dd {
    color: var(--label-2);
    font-size: 0.9375rem;
    line-height: 1.56;
  }
}

@layer components {
  /* ── Section 7: Smooth Modern Accordions (.faq) ─────────────────────────── */
  .faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    align-items: start;
  }

  @media (max-width: 50em) {
    .faq {
      grid-template-columns: 1fr;
    }
  }

  .faq details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.125rem 1.375rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, background-color 0.2s;
  }

  .faq details[open] {
    border-color: var(--accent-border);
  }

  .faq summary {
    cursor: pointer;
    font-weight: 630;
    font-size: 1rem;
    line-height: 1.4;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq-q {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .faq-q svg {
    width: 1.0625rem;
    height: 1.0625rem;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }

  .faq summary::after {
    content: "";
    width: 1.625rem;
    height: 1.625rem;
    flex: none;
    border-radius: 50%;
    background:
      linear-gradient(var(--label-2), var(--label-2)) center / 0.625rem 1.5px no-repeat,
      linear-gradient(var(--label-2), var(--label-2)) center / 1.5px 0.625rem no-repeat,
      var(--fill-2);
    border: 1px solid var(--border);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s, border-color 0.2s;
  }

  .faq details[open] summary::after {
    transform: rotate(45deg);
    border-color: var(--accent-border);
    background-color: var(--accent-dim);
  }

  .faq details p {
    margin-block-start: 0.875rem;
    color: var(--label-2);
    font-size: 0.9375rem;
    line-height: 1.62;
  }

  .faq details a {
    color: var(--accent);
  }

  @supports (interpolate-size: allow-keywords) {
    .faq details {
      interpolate-size: allow-keywords;
    }
    .faq details::details-content {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
      contain: layout;
      transition:
        block-size 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease,
        content-visibility 0.32s allow-discrete;
    }
    .faq details[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

@layer components {
  /* ── Closing Spotlight Stage & Footer ───────────────────────────────────── */
  .closing {
    text-align: center;
    padding-block: clamp(4.5rem, 9vw, 8rem);
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden;
  }

  .closing-aura {
    position: relative;
    display: inline-grid;
    place-items: center;
    padding: 1.75rem;
  }

  .closing-aura::before {
    content: "";
    position: absolute;
    inset: -3rem;
    background: radial-gradient(circle, color-mix(in oklab, var(--accent) 34%, transparent), transparent 68%);
    pointer-events: none;
  }

  .closing-icon {
    position: relative;
    width: 6.75rem;
    height: 6.75rem;
    border-radius: 26px;
    filter: drop-shadow(0 28px 46px rgba(0, 0, 0, 0.55));
  }

  .closing h2 {
    font-family: var(--display);
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 720;
    margin-block-start: 1rem;
    text-wrap: balance;
  }

  :lang(ar) .closing h2 {
    letter-spacing: 0;
    line-height: 1.24;
  }

  .closing p {
    margin-block-start: 0.875rem;
    margin-inline: auto;
    max-width: 34rem;
    color: var(--label-2);
    font-size: 1.0625rem;
  }

  .closing .cta {
    justify-content: center;
    margin-block-start: 1.75rem;
  }

  footer {
    border-top: 1px solid var(--border);
    padding-block: 2.25rem 3rem;
    font-size: 0.875rem;
    color: var(--label-3);
  }

  footer .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .foot-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 560;
  }

  footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  footer a {
    text-decoration: none;
    color: var(--label-2);
    transition: color 0.15s;
  }

  footer a:hover {
    color: var(--label);
  }
}

@layer components {
  /* ── Legal Document Card ────────────────────────────────────────────────── */
  .legal {
    max-width: 50rem;
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3.2vw, 2rem) 5.5rem;
  }

  .legal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(1.75rem, 4vw, 3.25rem);
    box-shadow: var(--shadow-card);
  }

  .legal h1 {
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
    letter-spacing: -0.03em;
    margin: 0;
  }

  :lang(ar) .legal h1 {
    letter-spacing: 0;
  }

  .legal .updated {
    color: var(--label-3);
    font-size: 0.875rem;
    margin-block-start: 0.5rem;
  }


  .legal .toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 1.5rem;
    padding-block-end: 1.5rem;
    border-bottom: 1px solid var(--border);
  }

  .legal .toc a {
    text-decoration: none;
    color: var(--label-2);
    background: var(--fill);
    border: 1px solid var(--border);
    padding: 0.375rem 0.9375rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 560;
    transition: border-color 0.2s, color 0.2s;
  }

  .legal .toc a:hover {
    border-color: var(--accent-border);
    color: var(--label);
  }

  .legal h2 {
    font-family: var(--display);
    font-size: 1.4375rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    margin-block-start: 2.5rem;
    scroll-margin-block-start: 5rem;
  }

  :lang(ar) .legal h2 {
    letter-spacing: 0;
  }

  .legal h3 {
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 650;
    margin-block-start: 1.5rem;
  }

  .legal p,
  .legal li {
    color: var(--label-2);
    margin-block-start: 0.6875rem;
    font-size: 0.9375rem;
    line-height: 1.65;
  }

  .legal ul {
    margin-block-start: 0.625rem;
    padding-inline-start: 1.25rem;
    list-style: disc;
  }

  .legal li strong {
    color: var(--label);
    font-weight: 620;
  }

  .legal a {
    color: var(--accent);
  }

  /* Guides reuse the legal page's card; these are the parts only an article needs. */
  .guide .crumbs {
    font-size: 0.8125rem;
    color: var(--label-3);
    margin-block-end: 1rem;
  }

  .guide .crumbs a {
    color: var(--label-2);
    text-decoration: none;
  }

  .guide .lead {
    font-size: 1.0625rem;
    color: var(--label);
    margin-block-start: 1.25rem;
  }

  .guide ol {
    margin-block-start: 0.625rem;
    padding-inline-start: 1.25rem;
    list-style: decimal;
  }

  .guide code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.875em;
    background: var(--fill);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.0625rem 0.3125rem;
    overflow-wrap: anywhere;
  }

  .guide pre {
    margin-block-start: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--fill);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;
    max-inline-size: 100%;
  }

  .guide pre code {
    background: none;
    border: 0;
    padding: 0;
    color: var(--label);
    white-space: pre-wrap;
  }

  .guide .app-note {
    margin-block-start: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--accent-border);
    border-radius: 18px;
    background: var(--accent-dim);
  }

  .guide .app-note h2 {
    margin-block-start: 0;
  }

  .guide .app-note .btn {
    margin-block-start: 1rem;
    color: var(--label);
  }

  .guide .guide-list {
    list-style: none;
    padding: 0;
  }

  .guide .guide-list li {
    padding-block: 1rem;
    border-bottom: 1px solid var(--border);
  }
}

@layer effects {

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
    }
  }

  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes top-condense {
        to {
          background: var(--surface-popover);
          box-shadow: 0 12px 34px -20px rgba(0, 0, 0, 0.68);
        }
      }

      .top {
        animation: top-condense linear both;
        animation-timeline: scroll(root);
        animation-range: 0px 140px;
      }
    }
  }

  /* Only the hardware frames settle into place as they enter; the copy stays still. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes stage-settle {
        from {
          opacity: 0.4;
          transform: translateY(22px) scale(0.985);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .shot-stage,
      .desktop-shots {
        animation: stage-settle linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 32%;
      }
    }
  }

  /* The page is a battery: a cell-green line along the top edge charges from empty to full as you read,
     full at the closing Download. Scroll-driven, so browsers without the timeline just never show it. */
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes page-charge {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
      }
      body::after {
        content: "";
        position: fixed;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        block-size: 2.5px;
        z-index: 300;
        pointer-events: none;
        border-start-end-radius: 999px;
        border-end-end-radius: 999px;
        background: var(--cell-fill);
        box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 60%, transparent);
        transform-origin: 0% 50%;
        animation: page-charge linear both;
        animation-timeline: scroll(root);
      }
      :lang(ar) body::after {
        transform-origin: 100% 50%;
      }
    }
  }

  /* One orchestrated opening: headline, words, buttons, then the cell drains and the MacBook settles. */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hero-rise {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    @keyframes stage-lift {
      from {
        opacity: 0;
        transform: translateY(30px) scale(0.988);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    .hero h1 {
      animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .hero .lead {
      animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    }
    .hero .cta,
    .hero .hero-meta {
      animation: hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
    }
    .hero .stage-showcase {
      animation: stage-lift 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
    }
  }

  @media (forced-colors: active) {
    .top {
      background: Canvas;
      backdrop-filter: none;
      border-bottom: 1px solid CanvasText;
    }
    .shot-stage,
    .plan,
    .privacy-item,
    .faq details,
    .legal-card,
    .table-wrap {
      border: 1px solid CanvasText;
      box-shadow: none;
      background: Canvas;
      color: CanvasText;
    }
    .btn.primary,
    .btn.primary.soon {
      border: 2px solid ButtonText;
      background: Highlight;
      color: HighlightText;
    }
    .btn.primary::after,
    body::after {
      display: none;
    }
    .hero h1 {
      background: none;
      -webkit-background-clip: border-box;
      background-clip: border-box;
      color: CanvasText;
    }
  }
}

/* ── Hero battery: the cell drains from 100% to the Now screenshot's level (from Codex's 2026-11-15 draft) ── */
@property --level { syntax: "<integer>"; initial-value: 51; inherits: true; }
@property --charge { syntax: "<number>"; initial-value: 51; inherits: true; }


@layer tokens {
  :root {
    --battery-bg: linear-gradient(180deg, rgba(24, 29, 39, 0.90) 0%, rgba(11, 14, 20, 0.96) 100%);
    --battery-border: rgba(255, 255, 255, 0.13);
    --battery-glow: radial-gradient(78% 120% at 66% 50%, rgba(77, 212, 171, 0.16), transparent 68%);
    --battery-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.60),
      0 0 0 1px rgba(0, 0, 0, 0.45),
      0 18px 42px -14px rgba(0, 0, 0, 0.85),
      0 22px 54px -18px rgba(77, 212, 171, 0.20);
    --battery-numeral: linear-gradient(180deg, #ffffff 18%, rgba(203, 213, 225, 0.78) 100%);
    --battery-unit: rgba(176, 184, 201, 0.85);

    --hb-cell-case: rgba(255, 255, 255, 0.19);
    --hb-cell-well: linear-gradient(180deg, #05070b 0%, #090c12 100%);
    --hb-cell-cap: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(190, 202, 220, 0.22) 52%, rgba(110, 122, 140, 0.28) 100%);
    --hb-cell-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, transparent 100%);
    --hb-cell-fill:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 56%),
      linear-gradient(90deg var(--in-oklab), #1ea67e 0%, #44d3a8 52%, #92fae0 100%);
    --hb-cell-fill-rtl:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 56%),
      linear-gradient(270deg var(--in-oklab), #1ea67e 0%, #44d3a8 52%, #92fae0 100%);
    --hb-cell-edge: #e4fff7;
    --hb-cell-edge-glow: rgba(146, 250, 224, 0.88);
    --hb-cell-shadow:
      inset 0 2px 6px rgba(0, 0, 0, 0.88),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      0 1px 0 rgba(255, 255, 255, 0.07);
    --hb-cell-glow:
      inset 0 1px 0 rgba(255, 255, 255, 0.52),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 0 20px -2px rgba(77, 212, 171, 0.56),
      0 0 40px -6px rgba(94, 211, 176, 0.30);
    --hb-cell-mark: rgba(255, 255, 255, 0.24);

  }
  @media (prefers-color-scheme: light) {
    :root {
      --battery-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 242, 248, 0.94) 100%);
      --battery-border: rgba(15, 23, 42, 0.11);
      --battery-glow: radial-gradient(78% 120% at 66% 50%, rgba(9, 124, 95, 0.11), transparent 68%);
      --battery-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -1px 0 rgba(15, 23, 42, 0.05),
        0 12px 28px -12px rgba(15, 23, 42, 0.14),
        0 22px 48px -18px rgba(9, 124, 95, 0.14);
      --battery-numeral: linear-gradient(180deg, #0b111c 18%, #334155 100%);
      --battery-unit: rgba(74, 82, 98, 0.86);

      --hb-cell-case: rgba(15, 23, 42, 0.18);
      --hb-cell-well: linear-gradient(180deg, #dfe5ef 0%, #edf1f7 100%);
      --hb-cell-cap: linear-gradient(180deg, rgba(15, 23, 42, 0.16) 0%, rgba(15, 23, 42, 0.34) 52%, rgba(15, 23, 42, 0.18) 100%);
      --hb-cell-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, transparent 100%);
      --hb-cell-fill:
        linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 56%),
        linear-gradient(90deg var(--in-oklab), #097c5f 0%, #149d7b 52%, #2ec9a2 100%);
      --hb-cell-fill-rtl:
        linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 56%),
        linear-gradient(270deg var(--in-oklab), #097c5f 0%, #149d7b 52%, #2ec9a2 100%);
      --hb-cell-edge: #d8fff4;
      --hb-cell-edge-glow: rgba(24, 165, 130, 0.72);
      --hb-cell-shadow:
        inset 0 2px 5px rgba(15, 23, 42, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.90);
      --hb-cell-glow:
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10),
        0 0 16px -3px rgba(9, 124, 95, 0.38);
      --hb-cell-mark: rgba(15, 23, 42, 0.22);

    }
  }
}

@layer components {
  /* Precision-machined obsidian/pearl hardware capsule housing only the live readout and cell. */
  .hero-battery {
    position: relative;
    isolation: isolate;
    margin: 1.75rem auto 0;
    inline-size: min(100%, 24.5rem);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(0.875rem, 2.5vw, 1.25rem);
    padding: 0.75rem 1.25rem;
    border-radius: 20px;
    background: var(--battery-bg);
    border: 1px solid var(--battery-border);
    box-shadow: var(--battery-shadow);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  /* Subtle internal mint light bloom anchored under the glowing cell track. */
  .hero-battery::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--battery-glow);
    pointer-events: none;
    z-index: -1;
  }

  :lang(ar) .hero-battery {
    --level: 50;
    --charge: 50;
  }

  /* Keep tabular numerals a fixed width so 100 -> 99 never shifts the neighboring cell. */
  .hero-battery .reading {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--display);
    font-size: clamp(1.9rem, 1.55rem + 1vw, 2.375rem);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    min-inline-size: 3.6ch;
    color: var(--label);
    counter-reset: level var(--level);
  }

  :lang(ar) .hero-battery .reading {
    letter-spacing: 0;
  }

  [dir="rtl"] .hero-battery .reading {
    direction: ltr;
    text-align: start;
  }

  .hero-battery .reading::before {
    content: counter(level);
  }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-battery .reading::before {
      background: var(--battery-numeral);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }

  .hero-battery .reading span {
    font-size: 0.46em;
    font-weight: 600;
    vertical-align: 0.46em;
    margin-inline-start: 0.14em;
    color: var(--battery-unit);
  }

  .hero-battery .cell {
    position: relative;
    height: 2.375rem;
    padding: 4px;
    border-radius: 11px;
    border: 1.5px solid var(--hb-cell-case);
    background: var(--hb-cell-well);
    box-shadow: var(--hb-cell-shadow);
    margin-inline-end: 0.375rem;
  }

  /* Sapphire curved-glass catchlight spanning the entire optical cell chamber. */
  .hero-battery .cell::before {
    content: "";
    position: absolute;
    inset-block-start: 1px;
    inset-inline: 1px;
    height: 46%;
    border-radius: 9px 9px 18px 18px;
    background: var(--hb-cell-glass);
    pointer-events: none;
    z-index: 3;
  }

  /* Positive metallic battery terminal nub using logical radii for automatic RTL flip. */
  .hero-battery .cell::after {
    content: "";
    position: absolute;
    inset-inline-end: -6.5px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 3.5px;
    height: 0.9375rem;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background: var(--hb-cell-cap);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  .hero-battery .cell .fill {
    position: absolute;
    inset-block: 4px;
    inset-inline-start: 4px;
    width: calc((100% - 8px) * var(--charge) / 100);
    border-radius: 7.5px;
    background: var(--hb-cell-fill);
    box-shadow: var(--hb-cell-glow);
  }

  [dir="rtl"] .hero-battery .cell .fill {
    background: var(--hb-cell-fill-rtl);
  }

  /* Luminous leading meniscus riding the live charge edge. */
  .hero-battery .cell .fill::after {
    content: "";
    position: absolute;
    inset-block: 2px;
    inset-inline-end: 1.5px;
    width: 2.5px;
    border-radius: 999px;
    background: var(--hb-cell-edge);
    box-shadow: 0 0 8px 1px var(--hb-cell-edge-glow);
  }

  /* Tapered calibration hairlines matching exact 20% and 80% track coordinates. */
  .hero-battery .cell .mark {
    position: absolute;
    inset-block: 5px;
    width: 1.5px;
    margin-inline-start: -0.75px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, var(--hb-cell-mark) 24%, var(--hb-cell-mark) 76%, transparent);
    pointer-events: none;
    z-index: 2;
  }

  .hero-battery .cell .mark.low {
    inset-inline-start: calc(4px + (100% - 8px) * 0.2);
  }

  .hero-battery .cell .mark.high {
    inset-inline-start: calc(4px + (100% - 8px) * 0.8);
  }

  @media (max-width: 24em) {
    .hero-battery {
      gap: 0.75rem;
      padding: 0.625rem 0.9375rem;
      border-radius: 18px;
    }
    .hero-battery .cell {
      height: 2.125rem;
    }
  }
}

@layer effects {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes meter-drop {
      0%, 18% {
        --level: 100;
        --charge: 100;
      }
      100% {
        --level: 51;
        --charge: 51;
      }
    }

    @keyframes meter-drop-ar {
      0%, 18% {
        --level: 100;
        --charge: 100;
      }
      100% {
        --level: 50;
        --charge: 50;
      }
    }

    .hero-battery {
      animation:
        hero-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both,
        meter-drop 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
    }

    :lang(ar) .hero-battery {
      animation-name: hero-rise, meter-drop-ar;
    }
  }
  @media (forced-colors: active) {
    .hero-battery {
      border: 1px solid CanvasText;
      box-shadow: none;
      background: Canvas;
      color: CanvasText;
    }
    .hero-battery::before,
    .hero-battery .cell::before,
    .hero-battery .cell .fill::after {
      display: none;
    }
    .hero-battery .reading::before,
    .hero-battery .reading span {
      background: none;
      -webkit-background-clip: border-box;
      background-clip: border-box;
      color: CanvasText;
    }
    .hero-battery .cell {
      border-color: CanvasText;
      background: Canvas;
      box-shadow: none;
    }
    .hero-battery .cell::after,
    .hero-battery .cell .mark {
      background: CanvasText;
      box-shadow: none;
    }
    .hero-battery .cell .fill {
      background: Highlight;
      box-shadow: none;
    }
  }
}

/* ── Charge story: three photographs of the MagSafe LED (dark, charging, full) pinned while the page
   scrolls through them; the headline's three words light up with their frame. Owner's photos, 2026-11-15.
   Without scroll-driven animations (or with reduced motion) the section is a plain band showing the
   final, full-charge frame with all three words lit. ── */

@layer components {
  .charge-frame {
    position: relative;
    min-block-size: 72svh;
    overflow: hidden;
    display: grid;
    align-items: end;
    background: #060708;
  }

  .story-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* All three photos share one frame with the MagSafe LED at ~34.5% / 45%; anchoring object-position
       and transform-origin there keeps the connector registered through every crop and the slow zoom. */
    object-position: 34.5% 45%;
    transform-origin: 34.5% 45%;
  }

  .story-img.base,
  .story-img.red {
    opacity: 0;
  }

  /* Legibility scrim under the copy only; the photographs stay untouched above it. */
  .charge-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.64) 100%);
    pointer-events: none;
  }

  .story-copy {
    position: relative;
    z-index: 1;
    inline-size: min(100% - 3rem, var(--wrap));
    margin-inline: auto;
    padding-block-end: clamp(2.25rem, 6vh, 4rem);
  }

  .story-copy h2 {
    font-family: var(--display);
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
    font-weight: 720;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
    text-wrap: balance;
  }

  :lang(ar) .story-copy h2 {
    letter-spacing: 0;
    line-height: 1.25;
  }

  .story-copy p {
    margin-block-start: 0.625rem;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    color: rgba(255, 255, 255, 0.74);
  }

  .story-copy .st {
    display: inline-block;
  }
}

@layer effects {
  @supports ((animation-timeline: view()) and (animation-range: contain)) {
    @media (prefers-reduced-motion: no-preference) {
      .charge-story {
        block-size: 195svh;
        view-timeline-name: --charge;
      }

      .charge-frame {
        position: sticky;
        inset-block-start: 0;
        block-size: 100svh;
        min-block-size: 0;
      }

      .story-img.base {
        opacity: 1;
      }

      /* One slow push toward the LED, shared by all three photos so they stay registered. */
      @keyframes story-drift {
        from { transform: scale(1); }
        to { transform: scale(1.07); }
      }

      .story-img {
        animation: story-drift linear both;
        animation-timeline: --charge;
      }


      /* Dissolves are S-curved by intermediate steps (scroll-driven animations scrub linearly,
         so the easing lives in the keyframe spacing), and short enough to read as one film dissolve. */
      @keyframes story-red {
        0%, 22% { opacity: 0; }
        27% { opacity: 0.14; }
        33% { opacity: 0.62; }
        38% { opacity: 0.92; }
        42%, 100% { opacity: 1; }
      }

      @keyframes story-green {
        0%, 58% { opacity: 0; }
        63% { opacity: 0.14; }
        69% { opacity: 0.62; }
        74% { opacity: 0.92; }
        78%, 100% { opacity: 1; }
      }

      .story-img.red {
        animation: story-red linear both, story-drift linear both;
        animation-timeline: --charge;
      }

      .story-img.green {
        animation: story-green linear both, story-drift linear both;
        animation-timeline: --charge;
      }

      @keyframes word-off {
        0%, 20% { opacity: 1; }
        26% { opacity: 0.8; }
        36% { opacity: 0.45; }
        42%, 100% { opacity: 0.32; }
      }

      @keyframes word-red {
        0%, 24% { opacity: 0.32; }
        32% { opacity: 0.7; }
        40%, 56% { opacity: 1; }
        64% { opacity: 0.6; }
        72%, 100% { opacity: 0.32; }
      }

      @keyframes word-green {
        0%, 60% { opacity: 0.32; }
        68% { opacity: 0.6; }
        78%, 100% { opacity: 1; }
      }

      .story-copy .st-off {
        animation: word-off linear both;
        animation-timeline: --charge;
      }

      .story-copy .st-red {
        animation: word-red linear both;
        animation-timeline: --charge;
      }

      .story-copy .st-green {
        animation: word-green linear both;
        animation-timeline: --charge;
      }

      /* Last on purpose: the animation shorthands above reset animation-range, so the range is
         set after all of them. "contain" pins every animation to the frame's pinned span exactly. */
      .charge-frame .story-img,
      .story-copy .st-off,
      .story-copy .st-red,
      .story-copy .st-green {
        animation-range: contain;
      }
    }
  }

  @media (forced-colors: active) {
    .charge-frame {
      background: Canvas;
    }
    .charge-frame::after {
      display: none;
    }
    .story-copy h2,
    .story-copy p {
      color: CanvasText;
    }
  }
}

/* Ambient background (2026-11-15, premium pass): three fixed layers behind the whole page.
   body::before  slow-drifting green and blue light (aurora);
   body::after   a very faint conic sheen that turns once every 3 minutes, like light across anodised metal;
   html::after   film grain and a vignette, static, so the gradients never band and the edges sit deeper.
   Pure CSS, transform only (compositor, no repaint), no image file, no script. Still under reduced motion;
   hidden in forced-colors. */

@layer effects {
  body::before,
  body::after {
    content: "";
    position: fixed;
    inset: -30%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
  }

  body::before {
    background:
      radial-gradient(30% 26% at 20% 26%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%),
      radial-gradient(28% 26% at 80% 58%, color-mix(in oklab, var(--blue) 22%, transparent), transparent 70%),
      radial-gradient(26% 24% at 62% 14%, color-mix(in oklab, var(--accent-bright) 12%, transparent), transparent 70%),
      radial-gradient(30% 28% at 30% 82%, color-mix(in oklab, var(--blue) 14%, transparent), transparent 70%);
  }

  body::after {
    background: conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      color-mix(in oklab, var(--accent) 9%, transparent) 50deg,
      transparent 110deg,
      color-mix(in oklab, var(--blue) 8%, transparent) 220deg,
      transparent 290deg,
      color-mix(in oklab, var(--accent-bright) 6%, transparent) 330deg,
      transparent 360deg);
    -webkit-mask-image: radial-gradient(closest-side, black 30%, transparent 100%);
    mask-image: radial-gradient(closest-side, black 30%, transparent 100%);
  }

  html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: soft-light;
    background:
      radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
      /* A file, not a data: URL: the site's CSP allows images from itself only. */ url("grain.svg");
  }

  @media (prefers-reduced-motion: no-preference) {
    body::before {
      animation: ambient-a 38s ease-in-out infinite alternate;
    }
    body::after {
      animation: ambient-spin 180s linear infinite;
    }

    @keyframes ambient-a {
      from { transform: translate3d(-5%, -4%, 0) rotate(0deg) scale(1); }
      to   { transform: translate3d(6%, 5%, 0) rotate(14deg) scale(1.14); }
    }

    @keyframes ambient-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
  }

  @media (forced-colors: active) {
    body::before,
    body::after,
    html::after {
      display: none;
    }
  }
}


/* 3D tilt: tilt.js eases the transform itself every frame (no CSS transition, which would fight it) and adds
   a .glare light to the MacBook screen. */

@layer effects {
  .tilt {
    will-change: transform;
    backface-visibility: hidden;
  }
  .glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: soft-light;
  }
}