/* ==========================================================================
   CYGM take B - "the device itself, made of glass and soft-touch plastic"
   --------------------------------------------------------------------------
   Loaded only when the B skin is active, after every A sheet, and deliberately
   UNLAYERED: an unlayered rule beats every @layer, so this file restyles the
   whole site without a single !important and without touching a shared file.

   The premise: the page is the product, photographed in a dark studio. Modules
   are soft-touch matte parts with a slightly convex face and a polished
   chamfer catching a cyan rim light. Device captures sit behind real glass with
   a specular sweep. Buttons are glossy pills you can press. Labels are debossed
   into the plastic. There is no brushed grain, no fixing, no rack ear and no
   vent slot anywhere on the page: this material is moulded, not machined.

   Every texture is CSS: gradients, box-shadow stacks, inset shadows and masks.
   No images, no libraries, no extra fonts. The brand is untouched - navy
   ground, cyan accent reserved for emissive things, Outfit on the headings,
   DM Sans in the body, JetBrains Mono on the labels, 16px corners, pill
   buttons.

   Two blocks below carry the whole file. The first is the B palette. The
   second REDEFINES every material token the A sheet declares, so the per-
   surface sheets that read those tokens - and Track 2's companion sheet -
   come out in this material without knowing anything about this file. The
   component overrides after them exist only where A wrote a literal shadow
   that no token could reach.

   Hex literals are allowed in the :root blocks and NOWHERE else. Shadows are
   never transitioned; a hover shadow is a pseudo-element whose opacity moves.
   ========================================================================== */

:root {
  /* ----- The soft-touch plastic ramp. A convex face is lighter at the top,
     where it turns toward the studio key light, and falls away at the bottom.
     Sampled off the existing navy so a module still reads as the same family
     as the page it sits on. ----- */
  --b-face-0: #232e43;   /* the crown of the chamfer          */
  --b-face-1: #1c2536;   /* face, top of the curve            */
  --b-face-2: #151d2c;   /* face, mid                         */
  --b-face-3: #0d1320;   /* face, bottom of the curve         */
  --b-face-4: #080d16;   /* the shadowed underside of a part  */

  /* The polished chamfer cut around every face: one bright hairline along the
     top, one black hairline along the bottom. Those two lines are the entire
     illusion of thickness. */
  --b-chamfer-hi: #3d4c68;
  --b-chamfer-lo: #04060c;

  /* Studio blacks. Deeper than the page ground, so a part can cast onto it. */
  --b-cast: #000308;

  /* Glass: the near-black behind a pane, and the plain white the specular
     sweep is mixed out of. */
  --b-pane: #04070d;
  --b-spec: #ffffff;

  /* Debossed type: dark above the glyph, light below it. */
  --b-deboss-hi: #4b5b78;

  /* The one warm value on the page, and the printed stock in the footer. */
  --b-amber: #d9a441;
  --b-label: #c9cdd4;
  --b-label-ink: #10151f;

  /* The loud tier. Deliberately off-material: a warning that reads as a nicely
     moulded part is a warning nobody acts on. */
  --b-danger-face: #2a1008;
  --b-danger-edge: #f0762c;
  --b-cap-ink: #dde5f2;

  /* ----- Derived, so a change up in tokens.css still propagates. ----- */
  --b-rim:       color-mix(in srgb, var(--color-accent) 42%, transparent);
  --b-rim-soft:  color-mix(in srgb, var(--color-accent) 16%, transparent);
  --b-rim-faint: color-mix(in srgb, var(--color-accent) 7%, transparent);
  --b-led:       color-mix(in srgb, var(--color-accent) 85%, transparent);

  --b-edge-hi:  color-mix(in srgb, var(--b-chamfer-hi) 72%, transparent);
  --b-edge-mid: color-mix(in srgb, var(--b-chamfer-hi) 26%, transparent);
  --b-edge-lo:  color-mix(in srgb, var(--b-chamfer-lo) 92%, transparent);

  --b-glass-70: color-mix(in srgb, var(--b-spec) 70%, transparent);
  --b-glass-34: color-mix(in srgb, var(--b-spec) 34%, transparent);
  --b-glass-16: color-mix(in srgb, var(--b-spec) 16%, transparent);
  --b-glass-08: color-mix(in srgb, var(--b-spec) 8%, transparent);
  --b-glass-04: color-mix(in srgb, var(--b-spec) 4%, transparent);
  --b-glass-02: color-mix(in srgb, var(--b-spec) 2%, transparent);

  --b-cast-85: color-mix(in srgb, var(--b-cast) 85%, transparent);
  --b-cast-60: color-mix(in srgb, var(--b-cast) 60%, transparent);
  --b-cast-40: color-mix(in srgb, var(--b-cast) 40%, transparent);
  --b-cast-22: color-mix(in srgb, var(--b-cast) 22%, transparent);

  --b-deboss-dn: color-mix(in srgb, var(--b-deboss-hi) 55%, transparent);

  /* The convex face, written once because two dozen components paint it. */
  --b-module-face:
    linear-gradient(180deg,
      var(--b-face-1) 0%,
      var(--b-face-2) 46%,
      var(--b-face-3) 100%);

  /* A part sitting BEHIND another one: same material, one stop darker. */
  --b-sunken-face:
    linear-gradient(180deg,
      var(--b-face-2) 0%,
      var(--b-face-3) 58%,
      var(--b-face-4) 100%);

  /* The polished chamfer, as a shadow stack. */
  --b-chamfer:
    inset 0 1px 0 0 var(--b-edge-hi),
    inset 0 2px 0 -1px var(--b-rim-soft),
    inset 0 -1px 0 0 var(--b-edge-lo),
    inset 1px 0 0 0 var(--b-edge-mid),
    inset -1px 0 0 0 var(--b-edge-mid);

  /* The studio cast. Two softnesses, so a part reads as sitting ON the ground
     rather than as stuck to it. */
  --b-studio-cast:
    0 1px 1px var(--b-cast-40),
    0 10px 22px -8px var(--b-cast-40),
    0 26px 48px -22px var(--b-cast-60);

  /* Face curvature: a bloom off the key light at the top, a matte roll-off at
     the bottom. Inset, so it lives inside the chamfer. */
  --b-curve:
    inset 0 2px 3px -1px var(--b-glass-04),
    inset 0 -14px 22px -18px var(--b-cast-60);

  /* The whole moulded part in one token. */
  --b-module: var(--b-chamfer), var(--b-curve), var(--b-studio-cast);

  /* A recess moulded INTO a face: soft walls, no machined lip. */
  --b-mould-in:
    inset 0 2px 5px var(--b-cast-85),
    inset 0 1px 0 var(--b-cast-60),
    inset 0 -1px 0 var(--b-edge-mid);

  /* The pane in front of a screen. Three layers: a raking sweep across the top
     left corner, a bloom behind it so the sweep has a source rather than an
     edge, and a faint reflection dropping down the lower right.

     The sweep is a LINEAR gradient rather than a radial one. A radial whose
     centre sits off the corner draws a beautiful curve on a hero-sized pane and
     nothing at all on a 150px capture, because the whole arc falls outside the
     box - which is exactly the size most panes on this site are. */
  --b-specular:
    linear-gradient(var(--b-sweep, 146deg),
      var(--b-glass-34) 0%,
      var(--b-glass-16) 12%,
      var(--b-glass-04) 24%,
      transparent 38%),
    radial-gradient(120% 95% at -12% -22%,
      var(--b-glass-16) 0%, var(--b-glass-04) 34%, transparent 58%),
    linear-gradient(198deg,
      transparent 0 68%,
      var(--b-glass-04) 84%,
      transparent 97%);

  /* The 1px lit edge of a pane, drawn as a shadow so a mask on the sweep above
     never takes the edge with it. */
  --b-pane-edge:
    inset 0 1px 0 var(--b-glass-34),
    inset 0 0 0 1px var(--b-glass-08),
    inset 0 -1px 0 var(--b-glass-16);

  /* A lit lens over an emissive part. */
  --b-lens:
    inset 0 1px 1px var(--b-glass-34),
    0 0 7px var(--b-led),
    0 0 18px var(--color-glow-strong);
}

/* ==========================================================================
   THE MATERIAL CONTRACT

   Every --sk-* token the A sheet declares, redefined in this material. The
   per-surface sheets (doc, legal, media, forms, flash, guide) and Track 2's
   companion sheet read these and nothing else, so they come out in soft-touch
   plastic and glass without a line of their own.

   The fixings are the important ones: --sk-screw, --sk-screw-b and --sk-hole
   go to `none`, so any A rule that paints a fixing from a token paints nothing
   at all. --sk-brush and --sk-knurl go the same way: this material has no
   grain to catch the light.
   ========================================================================== */

:root {
  /* The material ramp. */
  --sk-metal-top:  var(--b-face-0);
  --sk-metal-hi:   var(--b-face-1);
  --sk-metal:      var(--b-face-2);
  --sk-metal-lo:   var(--b-face-3);
  --sk-metal-deep: var(--b-face-4);
  --sk-cast:       var(--b-cast);

  /* Edge lighting becomes the polished chamfer. */
  --sk-edge-lit:   var(--b-edge-hi);
  --sk-edge-lit-2: var(--b-edge-mid);
  --sk-edge-lit-3: var(--b-rim-faint);
  --sk-edge-dark:  var(--b-edge-lo);

  /* Real glass. The scanline goes: a moulded pane in front of a colour LCD has
     no visible pixel comb at this scale, and a comb over a photograph is the
     one thing that reads as costume rather than as product. */
  --sk-glass:     var(--b-pane);
  --sk-glass-lit: var(--b-glass-34);
  --sk-glare:     146deg;
  --sk-scanline:  transparent;

  /* Soft-touch, where A had rubber. */
  --sk-rubber:    var(--b-face-4);
  --sk-rubber-hi: var(--b-face-1);

  /* The lamps stay emissive cyan: the one thing on this page that emits. */
  --sk-led-on:     var(--color-accent);
  --sk-led-off:    color-mix(in srgb, var(--color-accent) 18%, var(--b-face-4));
  --sk-lamp-dead:  var(--b-face-4);

  /* No fixings, no punched holes, no grain of any kind. */
  --sk-screw:   none;
  --sk-screw-b: none;
  --sk-hole:    none;
  --sk-brush:   none;
  --sk-knurl:   none;
  --sk-grain:   none;

  /* The moulded faces. */
  --sk-panel-face: var(--b-module-face);
  --sk-plate-face: var(--b-sunken-face);

  /* Relief, lift and recess. */
  --sk-bevel:  var(--b-chamfer);
  --sk-lift:   var(--b-studio-cast);
  --sk-recess: var(--b-mould-in);

  /* Wells behind an emissive readout. */
  --sk-well:      var(--b-pane);
  --sk-well-2:    #0a1018;
  --sk-well-warm: #0b111c;
  --sk-lip:       #0d121a;

  /* No moulded cable leaves this part, so the jacket ramp is inert. */
  --sk-jacket:    transparent;
  --sk-jacket-hi: transparent;
  --sk-jacket-lo: transparent;

  /* The printed label on the underside, kept. */
  --sk-sticker:     var(--b-label);
  --sk-sticker-ink: var(--b-label-ink);

  /* The hazard rule, and the two ends of every mix. */
  --sk-hazard: var(--b-amber);
  --sk-white:  var(--b-spec);
  --sk-black:  #000000;

  /* The two surface tiers the per-surface sheets read. A panel WRAPS content
     and is moulded; a reading slab HOLDS content, is flat and near-solid, and
     is very slightly lighter than the ground so text never sits on a curve. */
  --sk-reading:      #141b29;
  --sk-reading-edge: var(--b-chamfer-lo);
  --sk-cap-ink:      var(--b-cap-ink);
  --sk-danger-face:  var(--b-danger-face);
  --sk-danger-edge:  var(--b-danger-edge);

  --surface-panel:   var(--b-face-2);
  --surface-reading: var(--sk-reading);

  /* The tier marks, unchanged in shape: they are brand icons, not material. */
  --sk-ico-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M12 10.4v6.4' stroke-linecap='round'/%3E%3Cpath d='M12 7.2v.1' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E");
  --sk-ico-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eab308' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 22.6 21H1.4Z'/%3E%3Cpath d='M12 9.6v4.8' stroke-linecap='round'/%3E%3Cpath d='M12 17.6v.1' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E");
  --sk-ico-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0762c' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M8.1 1.8h7.8L22.2 8.1v7.8l-6.3 6.3H8.1L1.8 15.9V8.1Z'/%3E%3Cpath d='M12 6.8v6.4' stroke-linecap='round'/%3E%3Cpath d='M12 16.8v.1' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   THE STUDIO

   A dark cyclorama: a cool pool of key light behind the top of the page, and a
   vignette falling away to the corners. Fixed, so it never scrolls with the
   content and never becomes a moire under motion.
   ========================================================================== */
body {
  background-color: var(--color-page);
  background-image:
    radial-gradient(120% 60% at 50% -6%, var(--b-rim-faint) 0, transparent 62%),
    radial-gradient(150% 100% at 50% 40%,
      transparent 34%, var(--b-cast-40) 86%, var(--b-cast-60) 100%),
    linear-gradient(180deg, var(--b-glass-02) 0, transparent 26%);
  background-attachment: fixed;
}

/* A's film-grain overlay has no place on a moulded part photographed clean. */
body::after { display: none; }

/* ==========================================================================
   TYPE RELIEF

   Debossed: dark shadow above the glyph, light below it, so the type reads as
   stamped into the plastic rather than printed on it. One pixel each way is
   the whole effect; any more turns to mud. Never applied to body copy.
   ========================================================================== */
.eyebrow,
.fact-label,
.card-foot,
.section-note,
.footer h2,
.screenshot figcaption,
.shots-swipe,
.callout-title,
h1, h2, h3,
.fact-value,
.wordmark {
  text-shadow: 0 -1px 0 var(--b-cast-60), 0 1px 0 var(--b-deboss-dn);
}

/* Links keep the accent hairline, softened to sit on plastic. */
.prose a,
.card-body a { box-shadow: 0 1px 0 var(--b-rim); }

.prose a:hover,
.card-body a:hover {
  box-shadow: 0 1px 0 var(--color-accent), 0 2px 10px var(--color-glow);
}

/* ==========================================================================
   THE RAIL

   A moulded strip across the top of the product: convex face, lit chamfer
   along its crest, a black hairline where it meets the page. No ears, no
   mounting holes.
   ========================================================================== */
.masthead {
  background-color: transparent;
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--b-face-1) 90%, transparent) 0%,
    color-mix(in srgb, var(--b-face-3) 94%, transparent) 100%);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 var(--b-edge-hi),
    inset 0 2px 0 -1px var(--b-rim-soft),
    inset 0 -1px 0 var(--b-edge-lo),
    0 1px 0 var(--b-edge-mid),
    0 14px 30px -22px var(--b-cast-60);
}

.masthead::before,
.masthead::after { content: none; }

.masthead.is-condensed { border-bottom-color: transparent; }

.wordmark {
  color: color-mix(in srgb, var(--color-text) 82%, var(--b-face-4));
}
.wordmark:hover { color: var(--color-text); }

/* The mark beside it is a lit indicator lens set into the strip. */
.wordmark-mark {
  background: radial-gradient(circle at 34% 28%,
    color-mix(in srgb, var(--color-accent) 42%, var(--b-spec)) 0 22%,
    var(--color-accent) 58%,
    color-mix(in srgb, var(--color-accent) 55%, var(--b-cast)) 100%);
  box-shadow: var(--b-lens), 0 0 0 3px var(--b-cast-60);
}

/* The online counter: a lit readout behind a small pane. */
.devices-online {
  background: linear-gradient(180deg, var(--b-pane) 0, var(--b-face-4) 100%);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--b-mould-in), var(--b-pane-edge);
}

.online-dot { box-shadow: var(--b-lens); }

/* The menu button is a glossy key in the strip. */
.nav-toggle {
  position: relative;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: transparent;
  background-image: var(--b-module-face);
  box-shadow: var(--b-chamfer), var(--b-curve), 0 2px 6px -2px var(--b-cast-60);
}

.nav-toggle::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 48%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, var(--b-glass-08), transparent);
}

.nav-toggle:active {
  transform: translateY(1px);
  box-shadow: var(--b-mould-in);
}

/* The search entry: a slot moulded into the strip. */
.nav-search {
  background-color: transparent;
  background-image: var(--b-sunken-face);
  border: 0;
  box-shadow: var(--b-mould-in);
}

.nav-search-key {
  color: var(--color-text-faint);
  background: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-chamfer), 0 1px 2px -1px var(--b-cast-60);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
/* The legends are moulded into the body face here, not silkscreened on a rail,
   so they take the body face in sentence case. Only the deboss carries over. */
.nav-list > li > a,
.nav-details > summary,
.nav-cta {
  text-transform: none;
  font-family: var(--font-body);
  letter-spacing: normal;
}

.nav-list > li > a,
.nav-details > summary {
  color: var(--color-text-muted);
  text-shadow: 0 -1px 0 var(--b-cast-60), 0 1px 0 var(--b-deboss-dn);
}

/* The disclosure panel is a second moulded part hanging off the strip. It is
   the same part in the phone drawer as on the rail, so the treatment sits
   outside the width query rather than inside it; otherwise the drawer falls
   back to the other skin's recessed well.

   The rim light is raised here specifically: the panel sits against the strip's
   own face rather than against the page, so the shared alpha reads as nothing. */
.nav-panel {
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  border-radius: var(--radius-card);
  /* The chamfer is written out rather than taken from the token: this part sits
     against the strip's own face instead of against the page, so at the shared
     rim alpha the edge reads as nothing. Same stack, brighter rim. */
  box-shadow:
    inset 0 1px 0 0 var(--b-chamfer-hi),
    inset 0 2px 0 -1px var(--b-rim),
    inset 0 -1px 0 0 var(--b-edge-lo),
    inset 1px 0 0 0 var(--b-edge-hi),
    inset -1px 0 0 0 var(--b-edge-hi),
    var(--b-curve),
    0 22px 48px -18px var(--b-cast-85);
}

.nav-panel::before {
  background: linear-gradient(180deg, var(--b-face-1), var(--b-face-3));
}

.nav-panel a { border: 0; }

.nav-panel a:hover,
.nav-panel a:focus-visible {
  background-color: transparent;
  background-image: var(--b-sunken-face);
  box-shadow: var(--b-mould-in);
}

.nav-panel a[aria-current='page'] {
  background-color: transparent;
  background-image: var(--b-sunken-face);
  box-shadow: var(--b-mould-in), inset 2px 0 0 var(--color-accent);
}

@media (max-width: 65.999rem) {
  .nav-list[data-open='true'] {
    background-color: transparent;
    background-image: var(--b-module-face);
    border-bottom: 0;
    box-shadow:
      inset 0 1px 0 var(--b-edge-mid),
      inset 0 -1px 0 var(--b-edge-lo),
      0 22px 40px -18px var(--b-cast-85);
  }

  .nav-group {
    border-bottom-color: var(--b-edge-lo);
    box-shadow: 0 1px 0 var(--b-edge-mid);
  }

  /* The drawer's panel is the same moulded part as the rail's, so it keeps the
     module treatment set above; only the shared sheet's border-left has to go. */
  .nav-panel { border-left: 0; }
}

/* The one key in the rail: a glossy cyan pill. */
/* `position` is deliberately absent here: the skip link is parked off-screen by
   a position of its own, and relative positioning brings it back on. */
.nav-cta,
.skip-link {
  color: var(--color-page);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent) 82%, var(--b-spec)) 0%,
    var(--color-accent) 42%,
    var(--color-accent-dim) 100%);
  border: 0;
  box-shadow:
    inset 0 1px 0 var(--b-glass-70),
    inset 0 -2px 4px -1px var(--b-cast-40),
    0 1px 1px var(--b-cast-40),
    0 8px 20px -8px var(--color-glow-strong);
  text-shadow: 0 1px 0 var(--b-glass-34);
}

.nav-cta:active { transform: translateY(1px); }

.nav-cta.is-current {
  color: var(--color-accent);
  background: var(--b-sunken-face);
  text-shadow: none;
  box-shadow: var(--b-mould-in), inset 0 0 0 1px var(--b-rim-soft);
}

.crumbs { text-shadow: 0 1px 0 var(--b-cast-60); }

/* ==========================================================================
   KEYS

   Glossy convex pills. The top half is lit, the bottom rolls away, a bright
   hairline runs along the crest. The press is real: the pill sinks a pixel,
   the gloss dims and the cast collapses into a moulded recess.

   The shadow never transitions. The hover glow is a pseudo-element whose
   opacity moves, which is the only thing on a key that animates.
   ========================================================================== */
.btn {
  position: relative;
  border: 0;
  transition:
    transform 90ms ease-out,
    color var(--dur) var(--ease-spring);
}

/* The gloss. Two stops plus a mask, because one gradient either shows a seam
   or leaves no crest at all. */
.btn::before {
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg,
    var(--b-glass-34) 0%, var(--b-glass-08) 54%, transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, var(--b-spec), transparent 62%);
  mask-image: linear-gradient(180deg, var(--b-spec), transparent 62%);
  transition: opacity var(--dur-fast) var(--ease);
}

/* The hover bloom, held on its own layer so no shadow ever animates. */
.btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.btn-primary {
  color: var(--color-page);
  background-color: var(--color-accent);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent) 80%, var(--b-spec)) 0%,
    var(--color-accent) 40%,
    var(--color-accent-dim) 100%);
  text-shadow: 0 1px 0 var(--b-glass-34);
  box-shadow:
    inset 0 1px 0 var(--b-glass-70),
    inset 0 -3px 5px -1px var(--b-cast-40),
    0 1px 1px var(--b-cast-40),
    0 8px 18px -8px var(--color-glow-strong),
    0 18px 36px -20px var(--b-cast-60);
}

.btn-primary::after { box-shadow: 0 12px 34px -8px var(--color-glow-strong); }
.btn-primary:hover { color: var(--color-page); transform: none; }
.btn-primary:hover::after { opacity: 1; }

.btn-secondary {
  color: var(--color-text);
  background-color: transparent;
  background-image: var(--b-module-face);
  text-shadow: 0 -1px 0 var(--b-cast-60), 0 1px 0 var(--b-deboss-dn);
  box-shadow:
    inset 0 1px 0 var(--b-edge-hi),
    inset 0 -1px 0 var(--b-edge-lo),
    inset 0 -10px 16px -14px var(--b-cast-60),
    0 1px 1px var(--b-cast-40),
    0 10px 22px -12px var(--b-cast-60);
}

.btn-secondary::before {
  background: linear-gradient(180deg,
    var(--b-glass-08) 0%, var(--b-glass-02) 62%, transparent 80%);
}

.btn-secondary::after {
  box-shadow: inset 0 1px 0 var(--b-rim), 0 0 30px -10px var(--color-glow);
}

.btn-secondary:hover {
  transform: none;
  color: var(--color-text);
  background-color: transparent;
  background-image: var(--b-module-face);
}

.btn-secondary:hover::after { opacity: 1; }

.btn-primary:active,
.btn-secondary:active {
  transform: translateY(1px) scale(0.996);
  box-shadow: var(--b-mould-in);
}

.btn-primary:active::before,
.btn-secondary:active::before { opacity: 0.3; }
.btn:active::after { opacity: 0; }

.btn:disabled,
.btn[aria-disabled='true'] {
  color: var(--color-text-faint);
  background-color: transparent;
  background-image: var(--b-sunken-face);
  border: 0;
  text-shadow: none;
  box-shadow: var(--b-mould-in);
}

/* ==========================================================================
   MODULES

   .card, .callout, .screenshot and the panels below are all the same moulded
   part: convex face, polished chamfer, a cyan rim light along the top edge,
   and the studio cast underneath. No fixings anywhere.
   ========================================================================== */

/* A's recessed equipment bay is a machined idea. Here the rail is nothing: the
   modules sit on the studio floor with the page's own gap between them. */
.sk-bay {
  gap: var(--space-gutter);
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

.card {
  overflow: hidden;
  padding-inline: var(--space-card);
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-module);
}

/* The rim light: a permanent faint sweep along the polished top chamfer that
   brightens when the module is picked up. This is the hover shadow. */
.card::before {
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--b-rim), var(--b-glass-70), var(--b-rim), transparent);
  opacity: 0.7;
}

/* A's four fixings become the face curvature: a key-light bloom off the upper
   left of the moulding and the matte roll-off along the bottom. */
.card::after {
  background-image:
    radial-gradient(120% 78% at 22% -14%,
      var(--b-glass-08) 0%, var(--b-glass-02) 42%, transparent 68%),
    linear-gradient(180deg, transparent 58%, var(--b-cast-22) 100%);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 0 0;
}

a.card:hover,
.card-interactive:hover {
  background-color: transparent;
  background-image: var(--b-module-face);
  transform: translateY(-3px);
  box-shadow: var(--b-module);
}

a.card:hover::before,
.card-interactive:hover::before { opacity: 1; }

.card-foot {
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--b-edge-lo), inset 0 2px 0 var(--b-edge-mid);
}

/* The washed icon tile becomes a moulded well with a lit floor. */
.card-icon {
  background: var(--b-sunken-face);
  box-shadow: var(--b-mould-in), 0 1px 0 var(--b-edge-mid);
}

/* The module lamp: emissive, behind a lens, no countersunk bezel. */
.led {
  background: radial-gradient(circle at 34% 28%,
    color-mix(in srgb, var(--color-accent) 42%, var(--b-spec)) 0 20%,
    var(--color-accent) 56%,
    color-mix(in srgb, var(--color-accent) 55%, var(--b-cast)) 100%);
  box-shadow: var(--b-lens), 0 0 0 3px var(--b-cast-60);
}

.led-off {
  background: radial-gradient(circle at 34% 28%,
    color-mix(in srgb, var(--sk-led-off) 70%, var(--b-spec)) 0 16%,
    var(--sk-led-off) 58%,
    var(--b-face-4) 100%);
  box-shadow: inset 0 1px 2px var(--b-cast-85), 0 0 0 3px var(--b-cast-60);
}

/* ==========================================================================
   THE HERO

   A glass-fronted device module, not a metal chassis: soft-touch surround,
   real glass over the capture with a specular sweep, and one cyan bloom
   underneath because the thing behind the glass is lit.
   ========================================================================== */
.hero {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--b-edge-lo), 0 1px 0 var(--b-edge-mid);
}

.bezel {
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  border-radius: calc(var(--radius-card) + 10px);
  box-shadow:
    var(--b-chamfer),
    var(--b-curve),
    0 2px 3px var(--b-cast-60),
    0 26px 54px -18px var(--b-cast-85),
    0 60px 110px -40px var(--b-cast-85),
    0 0 80px -20px var(--color-glow);
}

/* A's fixing plate becomes the rim light around the surround. */
.bezel::before {
  background-image: none;
  box-shadow:
    inset 0 0 0 1px var(--b-glass-04),
    inset 0 1px 0 var(--b-rim-soft),
    inset 0 18px 26px -18px var(--b-glass-08);
}

/* The pane over the capture: the specular sweep, the lit pane edge, and a soft
   inner shadow all round from the lip the glass is bonded into. */
.bezel::after {
  background: var(--b-specular);
  box-shadow:
    var(--b-pane-edge),
    inset 0 2px 10px var(--b-cast-85),
    inset 0 0 26px -6px var(--b-cast-60);
}

/* The part reference, debossed into the bottom lip of the surround. */
.sk-etch {
  color: var(--b-edge-hi);
  text-shadow: 0 1px 0 var(--b-deboss-dn);
}

/* No cable leaves this part and it stands on nothing: it is floating in a
   studio, lit from above. */
.sk-cable,
.sk-feet { display: none; }

/* ==========================================================================
   DEVICE CAPTURES

   Each capture is a soft-touch module with a glass pane over the picture. The
   mounting rail behind the row is gone; the row sits on the studio floor.
   ========================================================================== */
.shots::before { content: none; }

.screenshot {
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--b-module), 0 24px 56px -28px var(--color-glow);
}

/* A's fixings become the pane edge, sized to the picture rather than to the
   module, so it never runs over the caption. */
.screenshot::before {
  left: var(--step-3);
  right: var(--step-3);
  top: var(--step-3);
  inset-block-end: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  background-image: none;
  box-shadow: var(--b-pane-edge);
}

/* The pane itself. */
.screenshot::after {
  background-image: var(--b-specular);
  box-shadow:
    inset 0 2px 8px var(--b-cast-85),
    inset 0 0 0 1px var(--b-glass-04),
    inset 0 0 20px -6px var(--b-cast-60);
}

@media (min-width: 60rem) {
  .shots .screenshot::before {
    left: var(--step-2);
    right: var(--step-2);
    top: var(--step-2);
  }
}

/* The sweep angle varies per pane, so a row of three does not read as one
   decal applied three times. */
.shots .screenshot:nth-child(2) { --b-sweep: 124deg; }
.shots .screenshot:nth-child(3) { --b-sweep: 162deg; }

/* Nothing sits in the caption's way now, so it can use the module's padding. */
.screenshot figcaption { padding-inline: var(--step-1); }

/* ==========================================================================
   THE LIGHTBOX

   Sizing is untouched - the caption still wraps only as wide as the picture.
   Only the material changes: the picture on near-black behind a thin pane.
   ========================================================================== */
#shot-dialog.screenshot::before,
#shot-dialog.screenshot::after { content: none; }

/* The sweep is suppressed over the photograph, so the material has to come from
   the dialog itself: a moulded pane holding the picture. Sizing is untouched. */
#shot-dialog.screenshot {
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-chamfer), var(--b-curve), 0 40px 90px -20px var(--b-cast-85);
}

#shot-dialog.screenshot img {
  background-color: var(--b-pane);
  box-shadow:
    0 0 0 1px var(--b-glass-08),
    0 2px 4px var(--b-cast-85),
    0 34px 80px -24px var(--b-cast-85);
}

#shot-dialog::backdrop {
  background-color: color-mix(in srgb, var(--b-cast) 92%, transparent);
  background-image: radial-gradient(120% 120% at 50% 40%,
    color-mix(in srgb, var(--b-face-3) 55%, transparent) 0,
    color-mix(in srgb, var(--b-cast) 94%, transparent) 100%);
}

/* ==========================================================================
   THE READOUT STRIP

   A's screwed-down data plate becomes a strip of debossed cells moulded into
   one part: no plate, no fixings, one groove between cells.
   ========================================================================== */
.facts {
  padding: var(--step-6) var(--step-4);
  background-color: transparent;
  background-image: var(--b-sunken-face);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--b-mould-in), 0 1px 0 var(--b-edge-mid);
}

.facts::before { content: none; }

/* The groove between cells: a dark cut with a lit far wall. */
.facts > * + * {
  border-left: 0;
  box-shadow: inset 1px 0 0 var(--b-edge-lo), inset 2px 0 0 var(--b-edge-mid);
}

/* The value is lit from behind, in its own moulded well. */
.fact-value {
  background: linear-gradient(180deg, var(--b-pane) 0, var(--b-face-4) 100%);
  color: var(--color-accent);
  text-shadow:
    0 0 7px color-mix(in srgb, var(--color-accent) 80%, transparent),
    0 0 22px color-mix(in srgb, var(--color-accent) 32%, transparent);
  box-shadow: var(--b-mould-in), var(--b-pane-edge);
}

/* ==========================================================================
   SECTION LEGENDS

   The index numeral is debossed straight into the plastic: no plate, no
   fixings, just a moulded recess with the numeral cut into its floor.
   ========================================================================== */
.eyebrow::after {
  height: 2px;
  background: linear-gradient(180deg,
    var(--b-edge-lo) 0 1px, var(--b-edge-mid) 1px 2px);
}

.eyebrow-index {
  color: color-mix(in srgb, var(--color-text) 46%, var(--b-face-4));
  text-shadow: 0 -1px 0 var(--b-cast-60), 0 1px 0 var(--b-deboss-dn);
  background-color: transparent;
  background-image: var(--b-sunken-face);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--b-mould-in);
}

.eyebrow-index::after { content: none; }

/* A section boundary on a moulded part is a channel, not a line: a dark cut
   with the far wall of the groove catching the key light directly beneath it. */
.section + .section {
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--b-edge-lo), inset 0 2px 0 var(--b-edge-mid);
}

/* ==========================================================================
   THE PRIVACY BAND

   The one full-width change of material on the page: a darker soft-touch face,
   with the chamfer running along both of its edges.
   ========================================================================== */
.section-privacy {
  background-color: transparent;
  background-image: linear-gradient(180deg,
    var(--b-face-3) 0%, var(--b-face-2) 46%, var(--b-face-4) 100%);
  border-top: 0;
  box-shadow:
    inset 0 1px 0 var(--b-edge-mid),
    inset 0 2px 0 -1px var(--b-rim-soft),
    inset 0 -1px 0 var(--b-edge-lo);
}

.section-privacy::after {
  height: 2px;
  background: linear-gradient(180deg,
    var(--b-edge-lo) 0 1px, var(--b-edge-mid) 1px 2px);
  box-shadow: none;
}

.section-privacy > .container::before { content: none; }

.section-privacy h2 {
  color: color-mix(in srgb, var(--color-text) 88%, var(--b-face-4));
  text-shadow: 0 -1px 0 var(--b-cast-60), 0 1px 0 var(--b-deboss-dn);
}

/* The compliance mark: a moulded roundel with its legend debossed into it. */
.sk-stamp {
  background:
    radial-gradient(circle at 36% 28%,
      var(--b-face-1) 0, var(--b-face-2) 48%, var(--b-face-4) 100%);
  box-shadow:
    inset 0 1px 0 var(--b-edge-hi),
    inset 0 -1px 0 var(--b-edge-lo),
    inset 0 -12px 18px -14px var(--b-cast-60),
    0 10px 22px -12px var(--b-cast-60);
}

.sk-stamp::after {
  color: color-mix(in srgb, var(--color-text) 44%, var(--b-face-4));
  text-shadow: 0 -1px 0 var(--b-cast-60), 0 1px 0 var(--b-deboss-dn);
}

/* ==========================================================================
   NOTES, CALLOUTS AND CODE
   ========================================================================== */

/* The closing note under a section: a small part moulded onto the face. */
.section-note {
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  box-shadow: var(--b-chamfer), 0 10px 20px -14px var(--b-cast-60);
}

.section-note::after { content: none; }

/* A note is moulded INTO the face, never raised off it. */
.callout {
  background-color: var(--sk-reading);
  background-image: none;
  border-color: transparent;
  border-inline-start-color: var(--color-accent-dim);
  box-shadow: var(--b-mould-in);
}

/* The safety tier keeps its hazard rule, softened onto plastic. */
.callout-safety {
  background-color: var(--sk-reading);
  background-image: none;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--b-mould-in);
}

.callout-safety::after {
  background: repeating-linear-gradient(45deg,
    var(--b-amber) 0 9px, var(--b-cast) 9px 18px);
  opacity: 0.5;
}

/* Danger stays flat and loud on purpose: no chamfer, no curve, no gloss. */
.callout-danger {
  background-color: var(--b-danger-face);
  background-image: none;
  border: 2px solid var(--b-danger-edge);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--signal-red) 70%, transparent),
    0 0 0 7px color-mix(in srgb, var(--signal-red-deep) 60%, transparent),
    0 0 40px 18px color-mix(in srgb, var(--signal-red-deep) 25%, transparent);
}

/* Inline code reads as a part reference silkscreened on the moulding. */
.prose code {
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--b-glass-04), transparent);
  border: 0;
  box-shadow: inset 0 1px 2px var(--b-cast-60), inset 0 -1px 0 var(--b-edge-mid);
}

/* A hero photograph that is not behind device glass gets stock and an edge. */
.hero-media:not(.bezel) {
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-chamfer), var(--b-studio-cast);
}

.hero-media:not(.bezel) img { box-shadow: inset 0 0 0 1px var(--b-cast-60); }

/* ==========================================================================
   THE UNDERSIDE

   Soft-touch, one shade darker than the page, with the regulatory label still
   applied to it. No vent slots and no feet: this face is moulded closed.
   ========================================================================== */
.footer {
  background-color: transparent;
  background-image: linear-gradient(180deg,
    var(--b-face-3) 0%, var(--b-face-4) 62%, var(--b-cast) 100%);
  border-top: 0;
  box-shadow:
    inset 0 1px 0 var(--b-edge-lo),
    inset 0 2px 0 var(--b-edge-mid);
  padding-bottom: calc(var(--step-8) + var(--step-5));
}

.footer::before,
.footer::after { content: none; }

.footer-base {
  border-top: 0;
  box-shadow: inset 0 1px 0 var(--b-edge-lo), inset 0 2px 0 var(--b-edge-mid);
}

/* The label: printed stock on the moulding, applied very slightly askew, the
   way a real one is. */
.footer-base > span:last-child {
  background: linear-gradient(180deg,
    var(--b-label) 0, color-mix(in srgb, var(--b-label) 84%, var(--b-cast)) 100%);
  color: var(--b-label-ink);
  text-shadow: none;
  box-shadow:
    0 1px 2px var(--b-cast-60),
    0 6px 14px -4px var(--b-cast-60),
    inset 0 1px 0 var(--b-glass-70);
}

/* ==========================================================================
   FLOATING CONTROLS AND WINDOWS
   ========================================================================== */
.to-top {
  color: var(--color-accent);
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-chamfer), var(--b-curve), var(--b-studio-cast);
}

.to-top:active { transform: translateY(1px); }

/* The map window: a glass port in a moulded frame. */
.map-dialog {
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-chamfer), var(--b-curve), 0 44px 90px -28px var(--b-cast-85);
}

.map-head { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--b-edge-lo), 0 1px 0 var(--b-edge-mid); }
.map-foot { border-top: 0; box-shadow: inset 0 1px 0 var(--b-edge-lo), inset 0 2px 0 var(--b-edge-mid); }

.map-canvas {
  background-color: var(--b-pane);
  border-block: 0;
  box-shadow: var(--b-mould-in), var(--b-pane-edge);
}

.map-close {
  border: 0;
  background-color: transparent;
  background-image: var(--b-module-face);
  box-shadow: var(--b-chamfer), 0 1px 2px -1px var(--b-cast-60);
}

/* ==========================================================================
   THE SEARCH PALETTE

   A moulded console dropped in front of the page: a soft-touch shell, a field
   moulded into it, and results that recess when they are the selected one.
   ========================================================================== */
#search-dialog {
  color: var(--color-text);
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--b-chamfer), var(--b-curve), 0 44px 90px -28px var(--b-cast-85);
}

#search-dialog::backdrop {
  background-color: color-mix(in srgb, var(--b-cast) 82%, transparent);
}

.search-input {
  color: var(--color-text);
  background-color: var(--sk-reading);
  border: 0;
  box-shadow: var(--b-mould-in);
}

.search-input:focus-visible { box-shadow: var(--b-mould-in), 0 0 20px -4px var(--color-glow); }

.search-results { border-top: 0; box-shadow: inset 0 1px 0 var(--b-edge-lo), inset 0 2px 0 var(--b-edge-mid); }

.search-result { border: 0; }

.search-result:hover,
.search-result[aria-selected='true'] {
  background-color: transparent;
  background-image: var(--b-sunken-face);
  box-shadow: var(--b-mould-in), inset 2px 0 0 var(--color-accent);
}

.search-result mark { background: var(--b-rim-soft); }

.search-hint {
  border-top: 0;
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--b-face-3), var(--b-face-4));
  color: var(--color-text-faint);
  text-shadow: 0 1px 0 var(--b-cast-60);
  box-shadow: inset 0 1px 0 var(--b-edge-lo), inset 0 2px 0 var(--b-edge-mid);
}

.search-hint kbd,
.nav-search-key {
  background: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-chamfer), 0 1px 2px -1px var(--b-cast-60);
}

/* ==========================================================================
   THE SEQUENCE PAGER AND THE RELATED CHIPS

   Two moulded parts at the foot of the page. The lift is a transform; the
   shadow under it is set once and never transitioned.
   ========================================================================== */
.pager a,
.related a {
  background-color: transparent;
  background-image: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-chamfer), var(--b-curve), 0 10px 22px -12px var(--b-cast-60);
}

.pager-dir,
.related h2 { text-shadow: 0 -1px 0 var(--b-cast-60), 0 1px 0 var(--b-deboss-dn); }

/* ==========================================================================
   THE READING SLAB

   Flat, near-solid, very slightly lighter than the ground. It HOLDS content,
   so it gets no curve and no gloss - only a hairline cut around its edge.
   ========================================================================== */
.slab {
  background-color: var(--surface-reading);
  background-image: none;
  border: 0;
  box-shadow: inset 0 1px 0 var(--b-edge-mid), inset 0 -1px 0 var(--b-edge-lo);
  color: var(--color-text);
}

/* ==========================================================================
   THE LOOK SWITCH

   Preview furniture, not product. It reads as a small moulded remote resting
   on the studio floor, so it does not pretend to be part of the page.
   ========================================================================== */
.preview-bar.skin-bar {
  gap: var(--step-1);
  padding: var(--step-1) var(--step-2);
  color: var(--color-text-faint);
  background: color-mix(in srgb, var(--b-face-2) 92%, transparent);
  border: 0;
  box-shadow: var(--b-chamfer), var(--b-curve), var(--b-studio-cast);
}

.preview-bar.skin-bar a {
  padding: var(--step-1) var(--step-2);
  border-radius: var(--radius-pill);
  color: var(--color-text-faint);
  text-decoration: none;
}

.preview-bar.skin-bar a:hover { color: var(--color-text); text-decoration: none; }

.preview-bar.skin-bar a[aria-current] {
  color: var(--color-page);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent) 82%, var(--b-spec)) 0%,
    var(--color-accent) 42%,
    var(--color-accent-dim) 100%);
  box-shadow:
    inset 0 1px 0 var(--b-glass-70),
    inset 0 -2px 4px -1px var(--b-cast-40),
    0 6px 16px -8px var(--color-glow-strong);
}

/* ==========================================================================
   MOTION

   Everything above that moves is decoration, so a reader who has asked for
   stillness gets the same surfaces without the travel or the bloom.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn::after { transition: none; }

  .btn:active,
  .btn-primary:active,
  .btn-secondary:active,
  .nav-cta:active,
  .nav-toggle:active,
  .to-top:active { transform: none; }

  a.card:hover,
  .card-interactive:hover { transform: none; }
}

/* ==========================================================================
   FORCED COLOURS

   Boundaries come from borders, never from a shadow, and every gloss, chamfer,
   pane and lamp is dropped.
   ========================================================================== */
@media (forced-colors: active) {
  * { text-shadow: none !important; }

  body { background-image: none; }

  .card,
  .bezel,
  .facts,
  .screenshot,
  .section-note,
  .eyebrow-index,
  .devices-online,
  .nav-toggle,
  .nav-search,
  .nav-panel,
  .nav-cta,
  .skip-link,
  .to-top,
  .map-dialog,
  .map-close,
  .map-canvas,
  .callout,
  .callout-danger,
  .pager a,
  .related a,
  .slab,
  .hero-media:not(.bezel),
  #search-dialog,
  .search-input,
  .search-result,
  .preview-bar.skin-bar,
  .btn { border: 1px solid CanvasText; }

  .card::before,
  .card::after,
  .bezel::before,
  .bezel::after,
  .screenshot::before,
  .screenshot::after,
  .btn::before,
  .btn::after,
  .nav-toggle::before,
  .callout-safety::after,
  .sk-stamp { display: none; }

  .card,
  .slab,
  .to-top,
  .map-close,
  .pager a,
  .related a,
  .search-result,
  .nav-panel a { box-shadow: none; }

  .search-result[aria-selected='true'] { border: 2px solid Highlight; }
}

/* Matches the A sheet: clearance under the fixed look switch. */
body { padding-block-end: 4rem; }