/* ==========================================================================
   BurnMyMac — landing page
   --------------------------------------------------------------------------
   The material is the same one SizeUp's page uses, and for the same reasons —
   three things do the work, and all three have to be present or it collapses
   into flat 2018 glassmorphism:

     1. blur() *and* saturate(). Saturation is what reads as refraction; blur
        on its own is grey fog.
     2. A directional specular rim. Real glass catches light on one side of its
        edge — a uniform 1px white border is the single loudest "AI glass" tell.
        Done here with a mask-composite gradient ring so it follows the radius.
     3. Grain. Mathematically smooth gradients are the other giveaway.

   What differs from the sibling is the *hue*, not the grammar. SizeUp's field
   is blue/violet/cyan, because its subject is screen geometry. This one runs
   ember/amber/red, because its subject is heat. Same tokens, same panels, same
   rim — a different temperature.

   backdrop-filter is the most expensive property in CSS, so it is rationed:
   `.glass` (real backdrop-filter) is used on exactly three surfaces — the
   sticky nav, the hero display, the download slab. Everything else uses
   `.panel`, which is the same visual grammar minus the filter. They sit over
   the same aurora, so the difference is barely legible; the cost difference is
   enormous. Glass is also never nested inside glass — nested backdrop roots
   behave inconsistently across engines and double the work.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink:       #fff4ec;
  --ink-dim:   rgb(255 238 226 / .74);
  /* Kept at .58, not .40: this token lands on real prose (the hero fineprint,
     the download notes), and .40 measures below WCAG AA on this background. */
  --ink-faint: rgb(255 238 226 / .58);

  --void:      #0b0705;
  --ember:     #e8622a;
  --ember-up:  #ff9351;
  --amber:     #ffb340;
  --crimson:   #d8324b;

  /* Diagonal, so every panel has a lit side and a shadowed side. */
  --fill: linear-gradient(148deg,
            rgb(255 255 255 / .105) 0%,
            rgb(255 255 255 / .042) 42%,
            rgb(255 255 255 / .028) 60%,
            rgb(255 255 255 / .072) 100%);
  --frost: blur(30px) saturate(190%) brightness(1.06);

  /* Tight contact shadow + wide ambient one. */
  --lift: 0 2px 6px rgb(10 3 0 / .40), 0 28px 64px -18px rgb(10 3 0 / .74);

  --r-lg: 30px;
  --r-md: 20px;
  --r-sm: 12px;

  --spring: cubic-bezier(.32, 1.28, .38, 1);
  --glide:  cubic-bezier(.22, .78, .26, 1);

  /* Edge-to-edge (viewport-fit=cover), so on a notched iPhone in landscape the
     safe area is wider than the design gutter. max() takes whichever is larger. */
  --gutter-base: clamp(1.25rem, 5vw, 5rem);
  --gutter: max(var(--gutter-base), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --measure: 1180px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Instrument Sans", system-ui, sans-serif;
  --display: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100vh;
  background: var(--void);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.06rem)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden`: `overflow-x: hidden` makes the element a scroll
     container, which breaks `position: sticky` on the nav in several engines. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--ember-up); outline-offset: 3px; border-radius: 6px; }

/* Present to a screen reader, absent to everything else. `display: none` would take it out
   of the accessibility tree as well, which defeats the point — the slider needs a name. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- atmosphere */
.atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* Enormous, slow, pre-blurred colour masses. Without them the glass blurs a flat
   black backdrop and the whole material dies. Only `transform` animates —
   animating `filter` would re-run the blur every frame. */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .5;
  will-change: transform;
}
.aurora--a {
  width: 62vw; height: 62vw; min-width: 460px; min-height: 460px;
  top: -26vw; left: -14vw;
  background: radial-gradient(circle at 40% 40%, var(--ember), rgb(232 98 42 / 0) 68%);
  animation: drift-a 28s var(--glide) infinite alternate;
}
.aurora--b {
  width: 54vw; height: 54vw; min-width: 400px; min-height: 400px;
  top: 2vh; right: -18vw;
  background: radial-gradient(circle at 50% 50%, var(--crimson), rgb(216 50 75 / 0) 66%);
  animation: drift-b 34s var(--glide) infinite alternate;
}
.aurora--c {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  top: 54vh; left: 22vw;
  opacity: .26;
  background: radial-gradient(circle at 50% 50%, var(--amber), rgb(255 179 64 / 0) 64%);
  animation: drift-c 41s var(--glide) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(9vw, 7vh, 0) scale(1.14); } }
@keyframes drift-b { to { transform: translate3d(-11vw, 12vh, 0) scale(.88); } }
@keyframes drift-c { to { transform: translate3d(7vw, -11vh, 0) scale(1.2); } }

/* This product's subject is the pixel grid, so the field states it — at the app's
   own 6px device cell, which is what a design pixel measures at Large on Retina. */
.grid-field {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 94% 70% at 50% 16%, #000 4%, transparent 74%);
}

/* Static, deliberately. Animated feTurbulence is a Safari performance disaster,
   and the still grain does the whole job: it kills gradient banding and takes the
   CG sheen off every smooth surface on the page. */
.grain {
  position: absolute;
  inset: 0;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) { .aurora { animation: none; } }

@media (max-width: 40rem) {
  /* Phone GPUs pay for a large blur radius far more than a desktop one does, and
     the aurorae are the biggest blurred surfaces on the page — three of them,
     animating, beneath three backdrop-filtered panels. At this size the masses are
     only ~400px across, so a smaller radius is invisible and takes a real bite out
     of the per-frame compositing cost. */
  .aurora { filter: blur(64px); }
  .grid-field { background-size: 18px 18px; }
}

/* ---------------------------------------------------------------- material */
.glass, .panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background: var(--fill);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .14),          /* bright top lip */
    inset 0 -14px 26px -14px rgb(0 0 0 / .40),     /* dark lower belly */
    var(--lift);
}

/* The only three surfaces that pay for a backdrop filter. */
.glass {
  -webkit-backdrop-filter: var(--frost);
          backdrop-filter: var(--frost);
}

/* The specular rim. A padding-box/border-box mask XOR leaves a 1px ring, which —
   unlike `border` — can carry a gradient, so light falls off around the shape the
   way it does on a real bevelled edge. Brightest at top-left, the implied source. */
.glass::before, .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
              rgb(255 255 255 / .58) 0%,
              rgb(255 255 255 / .13) 26%,
              rgb(255 255 255 / .03) 48%,
              rgb(255 255 255 / .10) 78%,
              rgb(255 255 255 / .34) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Sheen pooled at the top, as if lit from above and in front. Kept very low
   contrast — this is the detail that tips into cheap plastic the moment it shouts. */
.glass::after, .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(120% 76% at 22% -14%, rgb(255 255 255 / .15), transparent 62%);
  pointer-events: none;
}

/* Content sits above both pseudo-elements. */
.glass > *, .panel > * { position: relative; z-index: 3; }

/* Cursor-tracked specular hotspot; --mx/--my are written by app.js on pointermove.
   The faint amber/crimson pair at opposite corners fakes the chromatic split you
   get at the edge of a real lens. */
.glass--live::after {
  background:
    radial-gradient(240px 240px at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .13), transparent 68%),
    radial-gradient(90% 60% at 0% 0%, rgb(255 179 64 / .12), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgb(216 50 75 / .10), transparent 55%),
    radial-gradient(120% 76% at 22% -14%, rgb(255 255 255 / .15), transparent 62%);
}

/* ---------------------------------------------------------------- type */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .99;
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 5.4vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.2rem; line-height: 1.24; letter-spacing: -.022em; }

/* Gradient text exactly once on the page — in the hero. Everywhere else the
   emphasis comes from contrast, which is why this one still lands. */
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--amber) 0%, var(--ember-up) 46%, var(--crimson) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
h3 em { font-style: italic; color: var(--ember-up); }

.eyebrow {
  display: block;
  margin-bottom: 1.05rem;
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

code { font: 400 .82em/1.5 var(--mono); color: var(--ink-dim); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  max-width: 100%;
  padding: .92rem 1.5rem;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.012em;
  white-space: nowrap;
  transition: transform .32s var(--spring), box-shadow .32s var(--glide), background-color .3s var(--glide);
}
/* Lift on hover only where hovering is a thing. On a touchscreen `:hover` sticks
   after a tap, so the button would stay raised until you touch elsewhere. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0) scale(.985); transition-duration: .09s; }

.btn--primary {
  background: linear-gradient(178deg, var(--ember-up), var(--ember) 58%, #b8431a);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .46),
    inset 0 -1px 0 rgb(0 0 0 / .18),
    0 2px 8px rgb(140 46 12 / .44),
    0 16px 38px -10px rgb(232 98 42 / .62);
}
@media (hover: hover) {
  .btn--primary:hover {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .5),
      0 4px 12px rgb(140 46 12 / .48),
      0 24px 52px -12px rgb(255 147 81 / .78);
  }
}

.btn--sm:not(.btn--primary) {
  background: rgb(255 255 255 / .065);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 1px 0 rgb(255 255 255 / .22);
  color: var(--ink);
}
@media (hover: hover) {
  .btn--sm:not(.btn--primary):hover { background: rgb(255 255 255 / .12); }
}

.btn--sm { padding: .55rem 1.1rem; font-size: .92rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.08rem; }

.btn__meta {
  padding-left: .72rem;
  border-left: 1px solid rgb(255 255 255 / .26);
  font: 400 .8em/1 var(--mono);
  opacity: .82;
}

/* "Download BurnMyMac 1.0.0 · 3.6 MB · .dmg" on one nowrap line runs off the side
   of every phone. Stack the metadata under the label rather than letting it push
   the pill past the viewport. */
@media (max-width: 30rem) {
  .btn--lg {
    flex-direction: column;
    gap: .5rem;
    padding: .95rem 1.4rem;
    font-size: 1rem;
    white-space: normal;
    text-align: center;
  }
  .btn--lg .btn__meta {
    padding: .5rem 0 0;
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / .26);
    align-self: stretch;
  }
}

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding: .8rem var(--gutter);
  transition: background-color .4s var(--glide), box-shadow .4s var(--glide);
}
/* Frosted only once it actually overlaps content — a permanently frosted bar over
   the hero reads as a seam across the page. */
.nav.is-stuck {
  background: rgb(11 7 5 / .58);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .07), 0 12px 32px -18px rgb(0 0 0 / .9);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.025em;
}
.nav__brand img { border-radius: 7px; }

.nav__links { display: flex; gap: 1.7rem; font-size: .94rem; color: var(--ink-dim); }
.nav__links a { transition: color .25s; }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); } }
@media (max-width: 860px) { .nav__links { display: none; } }
/* Nav Download is the one control above the fold on a phone; 33px tall is too small
   to hit reliably while scrolling one-handed. */
@media (pointer: coarse) { .nav .btn--sm { padding: .7rem 1.2rem; } }

/* ---------------------------------------------------------------- hero */
/* Asymmetric on purpose: copy left, product right. A centred hero column is the
   layout every generated landing page reaches for first. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 3rem; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem 1rem .42rem .7rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .13), inset 0 1px 0 rgb(255 255 255 / .2);
  font-size: .845rem;
  color: var(--ink-dim);
  transition: background-color .3s, color .3s;
}
@media (hover: hover) { .pill:hover { background: rgb(255 255 255 / .1); color: var(--ink); } }
.pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgb(255 179 64 / .2), 0 0 12px rgb(255 179 64 / .9);
}

.hero h1 { margin: 1.5rem 0 0; }

.lede {
  max-width: 42ch;
  margin-top: 1.4rem;
  font-size: clamp(1.04rem, .98rem + .35vw, 1.18rem);
  line-height: 1.58;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.fineprint { margin-top: 1.25rem; font-size: .83rem; color: var(--ink-faint); }

/* ---------------------------------------------------------------- demo stage */
.stage { display: flex; flex-direction: column; gap: .85rem; }

.screen { overflow: hidden; border-radius: var(--r-lg); }

/* A mock desktop with a real menu bar across the top. The whole hero is one
   claim — "this is what it looks like up there" — so the frame has to be a Mac
   screen and the readout has to sit in the bar, not float in a card. */
/* Short on purpose. The subject of this demo is a 22 px strip at the very top, so the
   desktop below it is framing — enough to say "this is a Mac screen" and no more. At the
   16/10 of a real display the readout ended up as a speck above a large empty rectangle,
   which is a picture of a desktop, not of the product. */
.screen__desktop {
  position: relative;
  aspect-ratio: 16 / 6.6;
  /* Capped as well as proportioned. Once the hero stacks to one column the stage is the
     full page width, and an aspect ratio alone would grow the empty desktop to 400 px of
     nothing under a 22 px menu bar. */
  max-height: 260px;
  background:
    radial-gradient(70% 120% at 16% 0%, rgb(232 98 42 / .34), transparent 62%),
    radial-gradient(80% 130% at 92% 100%, rgb(216 50 75 / .28), transparent 60%),
    linear-gradient(160deg, #2a1207, #140805 62%, #1c0c07);
}
@media (max-width: 40rem) { .screen__desktop { aspect-ratio: 16 / 8.5; max-height: 200px; } }

/* 22 CSS px, matching NSStatusBar.system.thickness, so the readout is shown at the
   same proportion of the bar it really occupies. */
.menubar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 22px;
  padding: 0 10px;
  background: rgb(16 10 8 / .62);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / .09);
  font: 500 11px/1 var(--sans);
  color: rgb(255 244 236 / .78);
}
.menubar__apple { font-size: 12px; opacity: .82; }
.menubar__app { font-weight: 700; }
.menubar__spacer { margin-left: auto; }
.menubar__extra { opacity: .55; }
.menubar__clock { font-variant-numeric: tabular-nums; opacity: .82; }

/* The readout itself, drawn to a canvas by app.js from the app's own exported
   glyph tables. Sized in CSS px to match the app's points 1:1. */
#readout {
  display: block;
  image-rendering: pixelated;      /* belt and braces; nothing is scaled */
  filter: drop-shadow(0 0 6px rgb(255 179 64 / .35));
}
#readout.is-hot { filter: drop-shadow(0 0 8px rgb(255 147 81 / .75)); }

.screen__hint {
  position: absolute;
  left: 50%; bottom: 14%;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  text-align: center;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgb(11 7 5 / .5);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
  font: 400 .78rem/1 var(--mono);
  letter-spacing: .04em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* --- the controls under the stage */
.trybar {
  display: grid;
  gap: .85rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
}
.trybar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; }
.trybar__label {
  min-width: 4.2rem;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.trybar__chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
  padding: .38rem .8rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 1px 0 rgb(255 255 255 / .18);
  font: 500 .82rem/1.35 var(--sans);
  color: var(--ink-dim);
  cursor: pointer;
  transition: background-color .24s, color .24s, transform .3s var(--spring);
}
@media (hover: hover) {
  .chip:hover { background: rgb(255 255 255 / .12); color: var(--ink); transform: translateY(-1px); }
}
/* The chip row is the primary control on a phone. 28px tall is under every touch
   guideline; min-height pins the result at 44px rather than leaving it to whatever
   padding plus the current font size happens to add up to. */
@media (pointer: coarse) {
  .chip { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.05rem; font-size: .88rem; }
}
.chip.is-active {
  background: linear-gradient(178deg, var(--ember-up), var(--ember));
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), 0 6px 18px -6px rgb(232 98 42 / .8);
}

/* The temperature slider: the control that makes the demo answer "what does it
   look like when my Mac is actually hot?" without anybody having to heat a Mac. */
.slider { flex: 1 1 12rem; display: flex; align-items: center; gap: .7rem; min-width: 0; }
.slider input {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
}
.slider input::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4a7fe8, var(--amber) 62%, var(--crimson));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
}
.slider input::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4a7fe8, var(--amber) 62%, var(--crimson));
}
.slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 16px; height: 16px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #ffd9bd);
  box-shadow: 0 1px 3px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .3);
}
.slider input::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #ffd9bd);
  box-shadow: 0 1px 3px rgb(0 0 0 / .5);
}
.slider__value {
  min-width: 4.5rem;
  font: 500 .82rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  text-align: right;
}

/* ---------------------------------------------------------------- sections */
.section {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
}
.section--tight { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

.section__head { max-width: 48ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section__head p { margin-top: 1.1rem; font-size: 1.04rem; color: var(--ink-dim); text-wrap: pretty; }

/* ---------------------------------------------------------------- style cards */
.styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1rem; }
@media (min-width: 940px) { .styles { grid-template-columns: repeat(4, 1fr); } }

.style {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.35rem 1.45rem 1.5rem;
  border-radius: var(--r-md);
}
.style__strip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09);
}
.style__name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; }
.style__desc { font-size: .9rem; color: var(--ink-dim); text-wrap: pretty; }
.style__meta {
  margin-top: auto;
  font: 400 .68rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- band */
/* Full bleed, and the only section that breaks the measure — the differentiator
   should not sit in the same box as everything else. */
.band {
  position: relative;
  margin-block: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(3rem, 6.5vw, 5rem) 0;
  background: linear-gradient(180deg, transparent, rgb(232 98 42 / .07) 30%, rgb(216 50 75 / .07) 70%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 -1px 0 rgb(255 255 255 / .07);
}
.band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (max-width: 880px) { .band__inner { grid-template-columns: 1fr; } }
.band__copy p { margin-top: 1.1rem; max-width: 44ch; color: var(--ink-dim); text-wrap: pretty; }

/* The sensor table: the page's proof that the number is a real choice among many. */
.sensors {
  padding: 1.15rem 1.3rem;
  border-radius: var(--r-md);
  font: 400 .82rem/1 var(--mono);
}
.sensors__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem 1rem;
  align-items: center;
  padding: .5rem 0;
  color: var(--ink-faint);
}
.sensors__row + .sensors__row { box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }
.sensors__row.is-picked { color: var(--ink); }
.sensors__bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / .09);
  overflow: hidden;
}
.sensors__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--ember));
  opacity: .45;
}
.sensors__row.is-picked .sensors__bar i { opacity: 1; }
.sensors__tag {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ember-up);
}

/* ---------------------------------------------------------------- bento */
.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); gap: 1rem; }
@media (min-width: 920px) { .bento { grid-template-columns: repeat(3, 1fr); } }

.feat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
  padding: 1.7rem;
  border-radius: var(--r-md);
  transition: transform .45s var(--glide), box-shadow .45s var(--glide);
}
@media (hover: hover) {
  .feat:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .18),
      inset 0 -14px 26px -14px rgb(0 0 0 / .38),
      0 2px 6px rgb(10 3 0 / .4), 0 40px 72px -22px rgb(10 3 0 / .85);
  }
}
.feat p { font-size: .95rem; color: var(--ink-dim); text-wrap: pretty; }
.feat p em { font-style: italic; color: var(--ink); }

.feat__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: .3rem;
  border-radius: 12px;
  background: linear-gradient(160deg, rgb(255 255 255 / .19), rgb(255 255 255 / .05));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 0 0 1px rgb(255 255 255 / .1);
  color: var(--ember-up);
}

/* ---------------------------------------------------------------- trust */
.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem 1.6rem;
  max-width: var(--measure);
  margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  padding-inline: var(--gutter);
  font: 500 .78rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.trust li { display: flex; align-items: center; gap: 1.6rem; }
.trust li:not(:last-child)::after {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
/* The dots separate items on a single line. Once the list wraps on a phone, the
   item that ends a line trails a dot pointing at nothing — so drop them and let
   the wider gap do the separating. */
@media (max-width: 40rem) {
  .trust { gap: .6rem 1.15rem; letter-spacing: .1em; }
  .trust li { gap: 0; }
  .trust li:not(:last-child)::after { display: none; }
}

/* ---------------------------------------------------------------- download */
.download { padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem); text-align: center; }

.download__icon {
  width: clamp(84px, 12vw, 112px);
  margin: 0 auto 1.4rem;
  border-radius: 24px;
  filter: drop-shadow(0 20px 40px rgb(232 98 42 / .45));
}
.download h2 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); }
.download__sub { margin: .85rem auto 1.9rem; color: var(--ink-dim); }
.download .btn { margin-inline: auto; }

.specs {
  display: grid;
  /* One column on a phone: three 1fr tracks on a 320px screen give each spec
     ~100px, which wraps "macOS 13.0 or later" onto three lines. */
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 2.4rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgb(255 255 255 / .08);      /* shows through the gap as hairlines */
  text-align: left;
}
/* Exactly three, never auto-fit: the three short specs fill one row and the hash
   spans the next. auto-fit picks four at this width and strands an empty cell. */
@media (min-width: 34rem) { .specs { grid-template-columns: repeat(3, 1fr); } }
/* A grid item's default min-width is `auto` — i.e. its content — so the unbroken
   64-character hash widens its track and drags the whole slab past the viewport. */
.specs > div { min-width: 0; padding: .85rem 1.05rem; background: rgb(24 12 8 / .5); }
.specs--full { grid-column: 1 / -1; }
.specs dt {
  font: 500 .66rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.specs dd { margin: .42rem 0 0; font-size: .92rem; }

.download__note {
  max-width: 58ch;
  margin: 1.9rem auto 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.download__note strong { color: var(--ink-dim); font-weight: 600; }

/* ---------------------------------------------------------------- footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  max-width: var(--measure);
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding: 2.5rem var(--gutter) 4rem;
  font-size: .87rem;
  color: var(--ink-faint);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
}
.footer__brand { display: flex; align-items: center; gap: .55rem; color: var(--ink-dim); font-weight: 600; }
.footer__brand img { border-radius: 6px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer nav a { transition: color .25s; }
@media (hover: hover) { .footer nav a:hover { color: var(--ink); } }
.footer > p { flex-basis: 100%; }

/* ---------------------------------------------------------------- reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: rise .9s var(--glide) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--glide), transform .8s var(--glide);
}
.on-scroll.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .on-scroll { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Fallbacks
   -------------------------------------------------------------------------- */

/* Without backdrop-filter the glass surfaces render as near-invisible 4%-white
   rectangles. Give them an opaque tint instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav.is-stuck, .menubar { background: rgb(32 18 13 / .94); }
}

/* Some people find translucency itself hard to read through, and macOS exposes
   that preference. Honour it: keep the layout, drop the see-through. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .panel, .nav.is-stuck { background: #1c1009; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::after, .panel::after, .glass--live::after { display: none; }
  .aurora { opacity: .3; }
  .grain { display: none; }
}