/* ============================================================
   Left Field — one stylesheet for the whole site.
   Shared chrome is global; anything page-specific is scoped under a
   body class, because several class names (.card, .step, .dot) mean
   different things on different pages and a flat merge silently
   broke them depending on file order.
   ============================================================ */

/* ---------- shared ---------- */
/* ============================================================
   LEFT FIELD — downloads, Apple-style. Mockup only.
   ============================================================ */
@font-face{
  font-family:"Gradient";
  src:url("../assets/fonts/Gradient-Variable_Trial.woff2") format("woff2"),
      url("../assets/fonts/Gradient-Variable_Trial.ttf") format("truetype");
  font-weight:100 800; font-style:normal; font-display:swap;
}

:root{
  color-scheme:light;
  --ink:#1d1d1f; --sec:#6e6e73; --bg:#f5f5f7; --surface:#ffffff;
  --sheen-gold:#FFD9A8; --sheen-peach:#FFC49B; --sheen-cream:#FFF1DC;
  --sheen-sky:#8FC4E4;  --sheen-sky-deep:#6CA4CA;
  --blue:#00A2FF; --blue-hi:#1FAEFF;
  --hairline:rgba(0,0,0,.12);
  --drums:#FF8E55; --synth:#67BBFF; --loom:#998FFD; --strings:#FFD85D; --bundle:#FFB359;
  --accent:var(--bundle);
  --radius-card:28px; --radius-pill:980px;
  --max:1024px; --wide:1240px;
  --ease:cubic-bezier(.28,.11,.32,1);
  --glass-regular-bg:rgba(255,255,255,.60);
  --glass-regular-blur:saturate(180%) blur(24px);
  --glass-clear-bg:rgba(255,255,255,.32);
  --glass-clear-blur:saturate(160%) blur(16px);
  --glass-edge:inset 0 0 0 .5px rgba(255,255,255,.55);
}

*,*::before,*::after{box-sizing:border-box}

*{margin:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  background:var(--bg); color:var(--ink);
  font-family:"Gradient",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}

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

a{color:inherit;text-decoration:none}

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

button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:22px}

.wrap--wide{max-width:var(--wide)}

section[id]{scroll-margin-top:128px}

:where(a,button):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

.glass{background:var(--glass-regular-bg);
  -webkit-backdrop-filter:var(--glass-regular-blur);backdrop-filter:var(--glass-regular-blur);
  box-shadow:var(--glass-edge)}

.glass--clear{background:var(--glass-clear-bg);
  -webkit-backdrop-filter:var(--glass-clear-blur);backdrop-filter:var(--glass-clear-blur)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:color-mix(in srgb,var(--surface) 94%,transparent)}
}

/* nav */
.globalnav{position:sticky;top:0;z-index:60;height:48px;display:flex;align-items:center;
  border-bottom:.5px solid transparent;transition:border-color .35s var(--ease)}

.globalnav.is-stuck{border-bottom-color:var(--hairline)}

.globalnav__inner{max-width:var(--wide);margin-inline:auto;width:100%;padding-inline:22px;
  display:flex;align-items:center;justify-content:center;gap:6px}

.globalnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-size:12px;color:var(--ink);opacity:.86;transition:opacity .2s var(--ease)}

.globalnav a:hover{opacity:1}

.globalnav a[aria-current="page"]{opacity:1;font-weight:600}

.globalnav__mark{width:20px;height:auto;opacity:.9}

@media (max-width:900px){
  .globalnav__inner{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .globalnav__inner::-webkit-scrollbar{display:none}
}

.subnav{position:sticky;top:66px;z-index:55;height:0;padding:0 22px;pointer-events:none}

.subnav__inner{pointer-events:auto;width:min(100%,620px);margin-inline:auto;
  height:52px;display:flex;align-items:center;justify-content:space-between;gap:44px;
  padding:0 10px 0 26px;border-radius:var(--radius-pill);
  box-shadow:var(--glass-edge),0 6px 24px rgba(20,30,60,.16)}

.subnav__name{font-size:21px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}

.subnav__actions{display:flex;align-items:center;gap:10px}

@media (max-width:734px){.subnav__inner{height:56px;gap:14px;padding-left:18px}.subnav__name{font-size:16px}}

/* buttons + cloud sheen */
@property --lf-a{syntax:"<angle>";initial-value:0deg;inherits:false}

@keyframes lf-spin{to{--lf-a:360deg}}

.btn{position:relative;isolation:isolate;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:32px;padding:0 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:400;letter-spacing:-.01em;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}

.btn--ghost{border:1px solid var(--hairline);color:var(--ink)}

.btn--ghost:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}

.btn--primary{background:var(--blue);color:#fff;font-weight:600}

.btn--primary::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,var(--sheen-gold),var(--sheen-cream) 40%,var(--sheen-sky));
  opacity:0;transition:opacity .35s var(--ease)}

.btn--primary:hover::after,.btn--primary:focus-visible::after{opacity:1}

.btn--primary:hover,.btn--primary:focus-visible{color:#0C1D28}

.btn--lg{min-height:44px;padding:0 24px;font-size:17px}

@media (max-width:734px){.btn{min-height:44px;padding:0 20px}}

.btn::before{content:"";position:absolute;inset:0;z-index:-1;padding:3px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--lf-a),
    var(--sheen-sky-deep),var(--sheen-sky),var(--sheen-cream),
    var(--sheen-gold),var(--sheen-peach),var(--sheen-sky-deep));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .3s var(--ease)}

.btn:hover::before,.btn:focus-visible::before{opacity:1;animation:lf-spin 3.2s linear infinite}

.btn:active,.btn.is-lit{
  /* pressed: flat white, nothing else. no wash, no halo. the ink label keeps
     it legible on white — a white fill with white text would vanish. */
  background:#fff;
  color:var(--ink);
  border-color:transparent;
  transform:scale(.985);
  box-shadow:none;
  transition-duration:0s}

/* instant, so it reads as a press */
/* and no rim sheen while pressed, or the "white" still has a coloured edge */
.btn:active::before,.btn.is-lit::before{opacity:0;animation:none}

.btn:active::after,.btn.is-lit::after{opacity:0}

@media (prefers-reduced-motion:reduce){.btn:hover::before,.btn:focus-visible::before{animation:none}}

.more{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--blue);font-size:17px}

.more:hover{text-decoration:underline}

/* the steps slide instead of sitting in a row */
  :root{--slide-ms:5200ms}

.rail__viewport{
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-inline:max(22px,calc((100% - 620px) / 2));padding-block:6px 4px}

.rail__viewport::-webkit-scrollbar{display:none}

.rail__track{display:flex;gap:16px;width:max-content}

.rail__controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(20px,2.6vw,30px)}

.dots{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--radius-pill)}

.dot{position:relative;overflow:hidden;width:8px;height:8px;border-radius:var(--radius-pill);
    background:color-mix(in srgb,var(--ink) 24%,transparent);
    transition:width .3s var(--ease),background .3s var(--ease)}

.dot[aria-current="true"]{width:30px;background:color-mix(in srgb,var(--ink) 18%,transparent)}

/* the fill IS the dwell, so it pauses exactly when the carousel does */
  .dot[aria-current="true"]::after{content:"";position:absolute;inset:0;border-radius:inherit;
    background:color-mix(in srgb,var(--ink) 66%,transparent);
    transform-origin:left center;transform:scaleX(0);
    animation:dotfill var(--slide-ms) linear forwards}

.rail__controls[data-playing="false"] .dot[aria-current="true"]::after{animation-play-state:paused}

@keyframes dotfill{to{transform:scaleX(1)}}

.railbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    transition:background .2s var(--ease)}

.railbtn:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}

.railbtn svg{width:14px;height:14px;fill:var(--ink);opacity:.75}

@media (max-width:734px){.railbtn{width:44px;height:44px}}

/* requirements */
.techs{padding-bottom:clamp(56px,8vw,104px)}

.techs__grid{border-top:1px solid var(--hairline)}

.techs__row{display:grid;grid-template-columns:1fr;gap:2px;padding:18px 4px;border-bottom:1px solid var(--hairline)}

@media(min-width:620px){.techs__row{grid-template-columns:200px 1fr;gap:20px;align-items:baseline}}

.techs__row dt{font-size:14px;color:var(--sec)}

.techs__row dd{font-weight:600;letter-spacing:-.02em}

.foot{border-top:.5px solid var(--hairline);padding-block:34px;font-size:12px;color:var(--sec)}

.foot nav{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:12px}

.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}

.foot nav a:hover{text-decoration:underline;color:var(--ink)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- narrow-screen + hit-target fixes ---- */
/* the pill's name and two buttons together exceeded 375px, pushing the page
   sideways. let the name shrink and truncate instead of forcing the width. */
@media (max-width:430px){
  .subnav{padding:0 12px}
  .subnav__inner{gap:10px;padding:0 6px 0 14px}
  .subnav__name{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .btn{padding:0 14px;font-size:13px}
  .btn--lg{padding:0 18px;font-size:15px}
}


:root {
  color-scheme: light;

  --ink:        #1d1d1f;
  --sec:        #6e6e73;
  --bg:         #f5f5f7;
  --surface:    #ffffff;

  /* cloud sheen, sampled from clouds-square.jpg:
     warm cloud #DEC59E (hue 37), sky #6CA4CA (hue 204) */
  --sheen-gold:#FFD9A8; --sheen-peach:#FFC49B; --sheen-cream:#FFF1DC;
  --sheen-sky:#8FC4E4;  --sheen-sky-deep:#6CA4CA;

  --blue:       #00A2FF;
  --blue-hi:    #1FAEFF;
  --hairline:   rgba(0,0,0,.12);

  /* brand accents retained */
  --drums:#FF8E55; --synth:#67BBFF; --loom:#998FFD; --strings:#FFD85D; --bundle:#FFB359;

  --radius-card: 28px;
  --radius-pill: 980px;
  --max: 1024px;
  --wide: 1240px;
  --ease: cubic-bezier(.28,.11,.32,1);

  /* --- glass tokens, to the reference's stated ranges --- */
  /* clearer — both sit at the bottom of the reference's stated ranges now,
     so more of what's behind comes through without losing legibility */
  --glass-regular-bg:  rgba(255,255,255,.60);   /* opacity 0.6–0.8 */
  --glass-regular-blur: saturate(180%) blur(24px);   /* 20–40px, sat 1.2–1.5x+ */
  --glass-clear-bg:    rgba(255,255,255,.32);   /* opacity 0.3–0.5 */
  --glass-clear-blur:  saturate(160%) blur(16px);    /* 10–20px */
  --glass-edge:        inset 0 0 0 .5px rgba(255,255,255,.55);
}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

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

/* the global bar plus the floating pill = ~120px of chrome; without this an
   in-page jump lands with the heading hidden underneath them. */
section[id],main[id]{scroll-margin-top:128px}

/* ---- shared glass utilities ---- */
.glass{
  background:var(--glass-regular-bg);
  -webkit-backdrop-filter:var(--glass-regular-blur);
  backdrop-filter:var(--glass-regular-blur);
  box-shadow:var(--glass-edge);
}

.glass--clear{
  background:var(--glass-clear-bg);
  -webkit-backdrop-filter:var(--glass-clear-blur);
  backdrop-filter:var(--glass-clear-blur);
}

/* ============================================================
   FUNCTIONAL LAYER — global nav
   ============================================================ */
.globalnav{
  position:sticky; top:0; z-index:60;
  height:48px; display:flex; align-items:center;
  border-bottom:.5px solid transparent;
  transition:border-color .35s var(--ease);
}

.globalnav__inner{
  max-width:var(--wide); margin-inline:auto; width:100%;
  padding-inline:22px; display:flex; align-items:center; justify-content:center; gap:6px;
}

.globalnav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
  font-size:12px; letter-spacing:-.01em; color:var(--ink); opacity:.86;
  transition:opacity .2s var(--ease);
}

/* ============================================================
   FUNCTIONAL LAYER — sticky product sub-nav
   ============================================================ */
/* the strip is only a positioner now — it has no surface of its own and lets
   clicks through, so the pill inside is the only thing that floats. */
/* 48px top bar + an 18px gap = the pill starts at 66.
   the gap has to live on `top`, NOT as a margin on the pill: this strip is
   zero-height with no padding, so a child's top margin collapses straight
   through it and shifts the strip instead of the pill — which is why the gap
   looked like it was applied but never appeared. */
.subnav{
  position:sticky; top:66px; z-index:55;
  height:0;                    /* takes no space, so the pill floats OVER the
                                  content instead of sitting on a shelf above it */
  padding:0 22px;
  pointer-events:none;
}

.subnav__inner{
  pointer-events:auto;
  width:min(100%,620px);           /* wide enough to hold the old bar's spacing */
  margin-inline:auto;
  height:52px; display:flex; align-items:center;
  justify-content:space-between; gap:44px;
  padding:0 10px 0 26px;
  border-radius:var(--radius-pill);
  /* keeps the glass rim from .glass and adds the lift that makes it read
     as floating over the content rather than sitting on it */
  box-shadow:var(--glass-edge),0 6px 24px rgba(20,30,60,.16);
}

.btn{white-space:nowrap}

/* narrow: the sub-nav has to hold a name and two pills on one row, so shrink
   the name rather than let anything wrap to a second line. */
@media (max-width:734px){
  .subnav__inner{height:56px;gap:10px}
  .subnav__name{font-size:16px}
  .subnav__actions{gap:8px}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:400;letter-spacing:-.01em;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}

/* hover: the wash comes up underneath and the label crosses white → black.
   the wash is its own layer rather than a background swap, because
   background-image can't transition — it would snap. z-index -2 puts it
   under the rim sheen (-1) but still above the button's blue. */
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-2;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,
    var(--sheen-gold),var(--sheen-cream) 40%,var(--sheen-sky));
  opacity:0;transition:opacity .35s var(--ease);
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after{opacity:1}

.btn--primary:hover,
.btn--primary:focus-visible{color:#0C1D28}

.btn--lg{min-height:44px;padding:0 22px;font-size:17px}

.btn{position:relative;isolation:isolate}

.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;  /* over the bg, under the label */
  padding:3px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--lf-a),
    var(--sheen-sky-deep),var(--sheen-sky),var(--sheen-cream),
    var(--sheen-gold),var(--sheen-peach),var(--sheen-sky-deep));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .3s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .btn:hover::before,.btn:focus-visible::before{animation:none}
}

/* 32px clears the 28pt desktop floor, but the mobile floor is 44pt — so the
   compact pill is a desktop-only affordance. */
@media (max-width:734px){
  .btn{min-height:44px;padding:0 20px}
}

/* if backdrop-filter is unavailable the glass would fall back to a barely
   tinted transparent bar and the nav would become unreadable over content.
   opt into an opaque surface instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:color-mix(in srgb,var(--surface) 94%,transparent)}
  .glass--clear{background:rgba(0,0,0,.55)}
}

/* ---- footer ---- */
.foot{background:var(--bg);border-top:.5px solid var(--hairline);padding-block:34px;font-size:12px;color:var(--sec)}

.foot nav{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:14px}

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

:root{
  color-scheme:light;

  --ink:#1d1d1f; --sec:#6e6e73; --bg:#f5f5f7; --surface:#ffffff;

  /* cloud sheen, sampled from clouds-square.jpg */
  --sheen-gold:#FFD9A8; --sheen-peach:#FFC49B; --sheen-cream:#FFF1DC;
  --sheen-sky:#8FC4E4;  --sheen-sky-deep:#6CA4CA;

  --blue:#00A2FF; --blue-hi:#1FAEFF;
  --hairline:rgba(0,0,0,.12);

  --drums:#FF8E55; --synth:#67BBFF; --loom:#998FFD; --strings:#FFD85D;

  /* this page is Drums */
  --accent:var(--drums);

  --radius-card:28px; --radius-pill:980px;
  --max:1024px; --wide:1240px;
  --ease:cubic-bezier(.28,.11,.32,1);

  --glass-regular-bg:rgba(255,255,255,.60);
  --glass-regular-blur:saturate(180%) blur(24px);
  --glass-clear-bg:rgba(255,255,255,.32);
  --glass-clear-blur:saturate(160%) blur(16px);
  --glass-edge:inset 0 0 0 .5px rgba(255,255,255,.55);
}

.glass{
  background:var(--glass-regular-bg);
  -webkit-backdrop-filter:var(--glass-regular-blur);backdrop-filter:var(--glass-regular-blur);
  box-shadow:var(--glass-edge);
}

.glass--clear{
  background:var(--glass-clear-bg);
  -webkit-backdrop-filter:var(--glass-clear-blur);backdrop-filter:var(--glass-clear-blur);
}

.subnav__inner{
  pointer-events:auto;width:min(100%,620px);margin-inline:auto;
  height:52px;display:flex;align-items:center;justify-content:space-between;gap:44px;
  padding:0 10px 0 26px;border-radius:var(--radius-pill);
  box-shadow:var(--glass-edge),0 6px 24px rgba(20,30,60,.16);
}

@media (max-width:734px){
  .subnav__inner{height:56px;gap:14px;padding-left:18px}
  .subnav__name{font-size:16px}
}

.btn{
  position:relative;isolation:isolate;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:400;letter-spacing:-.01em;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}

.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,var(--sheen-gold),var(--sheen-cream) 40%,var(--sheen-sky));
  opacity:0;transition:opacity .35s var(--ease);
}

.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;padding:3px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--lf-a),
    var(--sheen-sky-deep),var(--sheen-sky),var(--sheen-cream),
    var(--sheen-gold),var(--sheen-peach),var(--sheen-sky-deep));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .3s var(--ease);
}

/* ============================================================
   SPEC SHEET — modal. <dialog> gives focus trapping, Esc and
   inertness for free, so there is no custom a11y plumbing.
   ============================================================ */
.specsheet-open{margin-top:22px;display:flex;justify-content:center}

.sheet{
  /* the UA centres a modal with `dialog{margin:auto}` — our `*{margin:0}`
     reset wipes that out, which is why it was pinned to the top edge */
  margin:auto;
  width:min(100% - 32px,560px);max-height:min(80vh,700px);
  padding:0;border:0;border-radius:24px;
  background:var(--surface);color:var(--ink);
  box-shadow:0 40px 90px -20px rgba(20,22,40,.5);
  overflow:hidden;
}

/* the flex column is what makes the body scrollable — header keeps its height,
   body takes the remainder. it MUST be scoped to [open]: an unconditional
   `display:flex` overrides the UA's `dialog:not([open]){display:none}`, so
   close() would leave the panel on the page, just dropped out of the top
   layer — it looked like it was hiding behind the content. */
.sheet[open]{display:flex;flex-direction:column}

.sheet::backdrop{
  background:rgba(20,24,34,.42);
  -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);
}

.sheet__head{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px 18px 26px;
  border-bottom:1px solid var(--hairline);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}

.sheet__title{font-size:19px;font-weight:600;letter-spacing:-.02em}

.sheet__close{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 8%,transparent);
  transition:background .2s var(--ease);
}

.sheet__close:hover{background:color-mix(in srgb,var(--ink) 15%,transparent)}

.sheet__close svg{width:14px;height:14px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}

/* min-height:0 is required — a flex item defaults to min-height:auto, which
   refuses to shrink below its content and kills the scroll. */
.sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 26px 30px;-webkit-overflow-scrolling:touch}

.sheet__group{padding-top:24px}

.sheet__group h4{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sec);
  padding-bottom:8px;
}

.sheet__row{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:14px 2px;border-top:1px solid var(--hairline);
}

@media(min-width:560px){.sheet__row{grid-template-columns:170px 1fr;gap:18px;align-items:baseline}}

.sheet__row dt{font-size:14px;color:var(--sec)}

.sheet__row dd{letter-spacing:-.02em}

.techs__grid{display:grid;gap:0;border-top:1px solid var(--hairline)}

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

:root{
  color-scheme:light;
  --ink:#1d1d1f; --sec:#6e6e73; --bg:#f5f5f7; --surface:#ffffff;

  --sheen-gold:#FFD9A8; --sheen-peach:#FFC49B; --sheen-cream:#FFF1DC;
  --sheen-sky:#8FC4E4;  --sheen-sky-deep:#6CA4CA;

  --blue:#00A2FF; --blue-hi:#1FAEFF;
  --hairline:rgba(0,0,0,.12);

  --drums:#FF8E55; --synth:#67BBFF; --loom:#998FFD; --strings:#FFD85D; --bundle:#FFB359;
  --accent:var(--bundle);

  --radius-card:28px; --radius-pill:980px;
  --max:1024px; --wide:1240px;
  --ease:cubic-bezier(.28,.11,.32,1);

  --glass-regular-bg:rgba(255,255,255,.60);
  --glass-regular-blur:saturate(180%) blur(24px);
  --glass-clear-bg:rgba(255,255,255,.32);
  --glass-clear-blur:saturate(160%) blur(16px);
  --glass-edge:inset 0 0 0 .5px rgba(255,255,255,.55);

  --slide-ms:5200ms;          /* one dwell — shared by the timer and the dot fill */
}

/* ============================================================
   CAROUSEL — plays through horizontally, pause to browse by hand
   ============================================================ */
.rail{padding-block:clamp(40px,6vw,72px) clamp(56px,8vw,104px)}

.rail__head{text-align:center;margin-bottom:clamp(26px,3.6vw,44px)}

.rail__head h2{font-size:clamp(2rem,4.4vw,3rem);font-weight:600;letter-spacing:-.03em}

.rail__head p{margin-top:10px;color:var(--sec)}

.rail__viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  /* let a slide sit centred with its neighbours peeking in */
  padding-inline:max(22px,calc((100% - 760px) / 2));
  padding-block:6px 4px;
}

.rail__track{display:flex;gap:18px;width:max-content}

.slide{
  scroll-snap-align:center;
  width:min(76vw,760px);
  border-radius:var(--radius-card);overflow:hidden;
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--a) 32%,var(--surface)),
    color-mix(in srgb,var(--a) 8%,var(--surface)) 58%, var(--surface));
  border:1px solid var(--hairline);
  padding:clamp(26px,3.6vw,46px);
  text-align:center;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  opacity:.55;transform:scale(.965);
}

/* the centred slide comes forward — the neighbours sit back */
.slide[data-active="true"]{opacity:1;transform:scale(1)}

.slide img{
  width:min(100%,520px);margin:0 auto clamp(18px,2.4vw,28px);
  border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.22);
}

.slide__name{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.025em}

.slide__type{font-size:14px;color:var(--sec);margin-top:2px}

.slide__line{margin-top:12px;color:var(--sec);max-width:46ch;margin-inline:auto}

.slide__more{margin-top:6px}

/* ---- controls: dots with a progress fill, plus play/pause ---- */
.rail__controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(22px,3vw,34px)}

.dot{
  position:relative;overflow:hidden;
  width:8px;height:8px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--ink) 24%,transparent);
  transition:width .3s var(--ease),background .3s var(--ease);
}

/* the fill is the dwell made visible — same duration as the advance timer */
.dot[aria-current="true"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:color-mix(in srgb,var(--ink) 66%,transparent);
  transform-origin:left center;transform:scaleX(0);
  animation:dotfill var(--slide-ms) linear forwards;
}

.railbtn{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  transition:background .2s var(--ease);
}

/* reduced motion: no autoplay, no scaling, no fill — it becomes a plain
   horizontal list you scroll yourself */
@media (prefers-reduced-motion:reduce){
  .slide{opacity:1;transform:none}
  .dot[aria-current="true"]::after{animation:none;transform:scaleX(1)}
}

.sheet::backdrop{background:rgba(20,24,34,.42);
  -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px)}

.sheet__head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px 18px 26px;border-bottom:1px solid var(--hairline);
}

.sheet__close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 8%,transparent);transition:background .2s var(--ease)}

.sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 26px 30px}

.sheet__group h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sec);padding-bottom:8px}

.sheet__row{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 2px;border-top:1px solid var(--hairline)}

.foot{border-top:.5px solid var(--hairline);padding-block:34px;font-size:12px;color:var(--sec);margin-top:40px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---- splash: the mark plays, then dissolves into the page ---- */
  html.splash-on, html.splash-on body { overflow: hidden; }

.btn:active,.btn.is-lit{
  background:linear-gradient(135deg,var(--sheen-gold),var(--sheen-cream) 40%,var(--sheen-sky));
  color:var(--ink);border-color:transparent;transform:translateY(0) scale(.985);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sheen-gold) 38%,transparent),
             0 12px 30px -10px color-mix(in srgb,var(--sheen-sky-deep) 75%,transparent);
  transition-duration:0s}

.btn:active::before,.btn.is-lit::before{opacity:1;animation:none}

@keyframes qopen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- p-downloads ---------- */
body.p-downloads /* hero */
.dhero {position:relative;isolation:isolate;text-align:center;
  padding-block:clamp(96px,15vh,170px) clamp(48px,7vh,86px);padding-inline:22px;
  background:radial-gradient(120% 78% at 50% 0%,
    color-mix(in srgb,var(--accent) 34%,var(--bg)) 0%,
    color-mix(in srgb,var(--accent) 11%,var(--bg)) 46%, var(--bg) 82%)}

body.p-downloads .dhero__kicker {font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--sec)}

body.p-downloads .dhero__name {font-size:clamp(2.6rem,7.5vw,5rem);line-height:1.04;font-weight:600;
  letter-spacing:-.035em;margin-block:.06em .2em}

body.p-downloads .dhero__tag {font-size:clamp(18px,2vw,22px);color:var(--sec);max-width:40ch;margin-inline:auto;letter-spacing:-.02em}

body.p-downloads /* the platform the visitor is actually on, body.p-downloads detected and surfaced */
.plat {display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:8px 18px;
  border-radius:var(--radius-pill);font-size:14px;font-weight:600;
  background:color-mix(in srgb,var(--accent) 30%,var(--surface));
  color:color-mix(in srgb,var(--accent) 74%,#1a1a1a)}

body.p-downloads /* download rows */
.dl {padding-bottom:clamp(48px,7vw,90px)}

body.p-downloads .dl__list {display:grid;gap:14px}

body.p-downloads .card {
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius-card);border:1px solid var(--hairline);
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--a) 24%,var(--surface)),
    color-mix(in srgb,var(--a) 6%,var(--surface)) 52%, var(--surface));
  padding:clamp(20px,2.6vw,28px);
  display:grid;gap:18px;align-items:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}

@media(min-width:760px){
body.p-downloads .card {grid-template-columns:220px 1fr auto}
}

body.p-downloads .card:hover {transform:translateY(-2px);box-shadow:0 16px 40px rgba(20,30,60,.13)}

body.p-downloads .card__shot {width:100%;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.18)}

body.p-downloads .card__id {display:grid;gap:2px}

body.p-downloads .card__name {font-size:21px;font-weight:600;letter-spacing:-.025em}

body.p-downloads .card__type {font-size:14px;color:var(--sec)}

body.p-downloads .card__ver {font-size:12px;color:var(--sec);margin-top:6px}

body.p-downloads .grabs {display:grid;gap:10px}

body.p-downloads .grabs__os {display:flex;align-items:center;gap:8px;flex-wrap:wrap}

body.p-downloads .grabs__label {font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--sec);min-width:64px}

body.p-downloads .chip {display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 15px;
  border-radius:var(--radius-pill);border:1px solid var(--hairline);
  font-size:14px;background:color-mix(in srgb,var(--surface) 70%,transparent);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}

body.p-downloads .chip:hover {background:var(--surface);border-color:color-mix(in srgb,var(--a) 60%,var(--hairline));transform:translateY(-1px)}

body.p-downloads .chip svg {width:13px;height:13px;opacity:.55}

@media (max-width:734px){
body.p-downloads .chip {min-height:44px}
}

body.p-downloads /* how-to */
.steps {padding-bottom:clamp(56px,8vw,104px)}

body.p-downloads .steps h2 {text-align:center;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;letter-spacing:-.03em;margin-bottom:clamp(26px,3.4vw,44px)}

body.p-downloads .step {
    scroll-snap-align:center;width:min(78vw,620px);
    border-radius:var(--radius-card);background:var(--surface);border:1px solid var(--hairline);
    padding:clamp(30px,4vw,46px);text-align:center;
    display:grid;gap:10px;align-content:center;min-height:clamp(190px,22vw,240px);
    opacity:.5;transform:scale(.965);
    transition:opacity .45s var(--ease),transform .45s var(--ease)}

body.p-downloads .step[data-active="true"] {opacity:1;transform:scale(1)}

body.p-downloads .step h3 {font-size:clamp(21px,2.4vw,27px);font-weight:600;letter-spacing:-.025em}

body.p-downloads .step p {color:var(--sec);font-size:17px;max-width:42ch;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
body.p-downloads .step {opacity:1;transform:none}
body.p-downloads .dot[aria-current="true"]::after {animation:none;transform:scaleX(1)}
}

body.p-downloads .note {text-align:center;color:var(--sec);font-size:15px;padding-bottom:clamp(48px,7vw,90px)}

body.p-downloads .note a {color:var(--blue)}

body.p-downloads .note a:hover {text-decoration:underline}
/* ---------- p-home ---------- */
body.p-home /* ============================================================
   CONTENT LAYER
   ============================================================ */
.headline {
  text-align:center;
  font-size:clamp(2.5rem,5.6vw,3.6rem);
  line-height:1.05; font-weight:600; letter-spacing:-.03em;
  padding-block:clamp(48px,7vw,88px) clamp(20px,3vw,34px);
}

body.p-home .kicker {text-align:center;font-size:21px;color:var(--sec);letter-spacing:-.02em;max-width:44ch;margin-inline:auto}

body.p-home /* ---- hero: bright media + clear glass + dimming layer ---- */
.hero {
  position:relative; isolation:isolate;
  min-height:min(94vh,900px); display:grid; align-content:center;
  text-align:center; padding-block:clamp(56px,9vh,120px) clamp(120px,16vh,190px);
  padding-inline:22px;
  background:url("../assets/clouds-square.jpg") center/cover no-repeat;
}

@media (max-width:734px){
body.p-home .pricebar {width:calc(100% - 32px);justify-content:space-between;padding-left:18px;white-space:normal}
body.p-home .pricebar__txt {font-size:13px}
}

body.p-home /* "If underlying content is bright → add a dark dimming layer (~35%)" */
.hero::after {
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.14) 42%,rgba(0,0,0,.42));
}

body.p-home .hero__eyebrow {font-size:21px;font-weight:600;letter-spacing:-.02em;color:#fff;opacity:.92}

body.p-home .hero__title {
  font-size:clamp(3rem,9vw,6.5rem);line-height:1.02;font-weight:600;
  letter-spacing:-.035em;color:#fff;margin-block:.08em .22em;
}

body.p-home .hero__sub {font-size:clamp(19px,2.2vw,24px);color:#fff;opacity:.92;max-width:34ch;margin-inline:auto;letter-spacing:-.02em}

body.p-home /* the sting is a BLACK logo on flat white. invert it to white-on-black, body.p-home then
   screen: screen keeps white and drops black, body.p-home so the ground disappears and the
   mark reads light over the dimmed sky. (multiply would do the opposite and
   bury a black logo in a dark hero.) */
.hero__mark {
  width:min(58vw,360px);margin:clamp(28px,5vh,52px) auto 0;
  filter:invert(1);mix-blend-mode:screen;opacity:.94;
}

body.p-home /* floating glass price bar — clear variant over media */
.pricebar {
  position:absolute;left:50%;bottom:clamp(24px,5vh,48px);transform:translateX(-50%);
  z-index:2; display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 22px;border-radius:var(--radius-pill);
  white-space:nowrap;
}

body.p-home .pricebar__txt {font-size:15px;color:#fff}

body.p-home /* ---- lineup cards: SOLID, body.p-home not glass ---- */
.lineup {padding-bottom:clamp(40px,6vw,72px)}

body.p-home .card {
  display:grid;gap:0;align-items:center;
  border-radius:var(--radius-card);overflow:hidden;
  background:var(--surface);margin-bottom:14px;
}

body.p-home /* every tile is light now — the accent does the differentiating, body.p-home not the ground */

/* ---- WASH — product panels turn to a slice of sky on hover ----
   sits above the card's own background but below its contents, body.p-home so the shot
   and the copy are untouched; only the surface around them changes. */
.card {position:relative;isolation:isolate}

body.p-home .card::after {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--sheen-gold),var(--sheen-cream) 38%,var(--sheen-sky));
  opacity:0;transition:opacity .45s var(--ease);
}

body.p-home .card:hover::after, body.p-home .card:focus-within::after {opacity:1}

@media(min-width:735px){
body.p-home .card {grid-template-columns:1fr 1fr}
body.p-home .card--flip .card__media {order:2}
}

body.p-home /* the accent fade, body.p-home pushed much harder — it now carries the whole tile rather
   than sitting as a faint tint behind the shot */
.card {background:linear-gradient(168deg,
  color-mix(in srgb,var(--accent) 26%,var(--surface)) 0%,
  color-mix(in srgb,var(--accent) 8%,var(--surface)) 46%,
  var(--surface) 78%)}

body.p-home .card__media {
  position:relative;isolation:isolate;
  display:grid;place-items:center;padding:clamp(28px,4vw,52px);
  min-height:clamp(240px,30vw,360px);
}

body.p-home /* the accent lives on its own layer so it can FADE BACK when the wash arrives.
   as a plain background it couldn't transition, body.p-home and the wash sits under the
   media element so it would never have shown through at all. */
.card__media::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(130% 105% at 50% -6%,
      color-mix(in srgb,var(--accent) 78%,transparent) 0%,
      color-mix(in srgb,var(--accent) 44%,transparent) 38%,
      color-mix(in srgb,var(--accent) 14%,transparent) 68%,
      transparent 88%);
  transition:opacity .45s var(--ease);
}

body.p-home .card:hover .card__media::before, body.p-home .card:focus-within .card__media::before {opacity:.55}

body.p-home .card__shot {width:100%;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.22)}

body.p-home .card__body {padding:clamp(28px,4vw,52px);display:grid;gap:14px;justify-items:start}

body.p-home .card__body h3 {font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.08}

body.p-home .card__body p {font-size:17px;color:var(--sec);max-width:38ch}

body.p-home /* ---- bundle ---- */
.bundle {text-align:center;padding-block:clamp(56px,8vw,104px)}

body.p-home .bundle h2 {font-size:clamp(2rem,4.4vw,3rem);font-weight:600;letter-spacing:-.03em}

body.p-home .bundle p {color:var(--sec);font-size:19px;margin-top:12px}

body.p-home .bundle__actions {display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

body.p-home .swatches {display:flex;gap:8px;justify-content:center;margin-top:26px}

body.p-home .swatches i {width:26px;height:26px;border-radius:8px;display:block}
/* ---------- p-product ---------- */
body.p-product /* ============================================================
   HERO — the product on its own accent-tinted sky
   ============================================================ */
.phero {
  position:relative;isolation:isolate;text-align:center;
  padding-block:clamp(96px,15vh,170px) clamp(120px,16vh,180px);
  padding-inline:22px;
  background:
    radial-gradient(120% 78% at 50% 0%,
      color-mix(in srgb,var(--accent) 42%,var(--bg)) 0%,
      color-mix(in srgb,var(--accent) 14%,var(--bg)) 46%,
      var(--bg) 82%);
}

body.p-product .phero__kicker {font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--sec)}

body.p-product .phero__name {
  font-size:clamp(3rem,9vw,6rem);line-height:1.02;font-weight:600;
  letter-spacing:-.035em;margin-block:.06em .2em;
}

body.p-product .phero__tag {font-size:clamp(19px,2.2vw,24px);color:var(--sec);max-width:34ch;margin-inline:auto;letter-spacing:-.02em}

body.p-product .phero__avail {margin-top:22px;font-size:15px;color:var(--sec)}

body.p-product .phero__shot {
  margin:clamp(38px,6vw,72px) auto 0;border-radius:16px;
  box-shadow:0 30px 70px -20px rgba(20,22,40,.4);
  width:min(100%,760px);
}

body.p-product /* floating buy pill */
.buybar {
  position:sticky;bottom:20px;z-index:40;
  width:min(100% - 32px,620px);margin:-58px auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 10px 10px 24px;border-radius:var(--radius-pill);
  box-shadow:var(--glass-edge),0 8px 30px rgba(20,30,60,.2);
}

body.p-product .buybar__txt {font-size:15px;white-space:nowrap}

@media (max-width:520px){
body.p-product .buybar {gap:10px;padding-left:16px}
body.p-product .buybar__txt {font-size:13px;white-space:normal}
}

body.p-product /* ============================================================
   STATEMENTS — big claims, body.p-product alternating
   ============================================================ */
.statement {padding-block:clamp(64px,10vw,130px);text-align:center}

body.p-product .statement h2 {
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;font-weight:600;
  letter-spacing:-.03em;max-width:20ch;margin-inline:auto;
}

body.p-product .statement p {margin-top:18px;font-size:clamp(17px,1.9vw,21px);color:var(--sec);max-width:52ch;margin-inline:auto}

body.p-product .statement__media {
  /* sized to the copy rather than the grid — the pane is a card of text now,
     so it only needs to be as wide as a comfortable measure */
  width:min(100%,660px);
  margin-inline:auto;
  border-radius:var(--radius-card);overflow:hidden;
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--accent) 30%,var(--surface)),
    color-mix(in srgb,var(--accent) 6%,var(--surface)) 60%,var(--surface));
  padding:clamp(38px,5.5vw,64px) clamp(28px,4.5vw,56px);
}

body.p-product /* `.statement h2` and `.statement p` both set a font-size and beat a bare
   class selector, body.p-product so these have to be scoped to win. */
.statement .statement__title {
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:1.1;letter-spacing:-.03em;
  max-width:none;margin:0 0 .5em;
  text-wrap:balance;
}

body.p-product .statement .statement__lede {
  font-size:clamp(17px,1.9vw,20px);
  line-height:1.45;
  letter-spacing:-.02em;
  color:var(--sec);
  max-width:46ch;
  margin:0 auto;
}

body.p-product .cross {padding-bottom:clamp(70px,10vw,130px)}

body.p-product .cross__head {text-align:center;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:600;letter-spacing:-.03em;margin-bottom:clamp(26px,3.4vw,44px)}

body.p-product .cross__grid {display:grid;gap:14px;grid-template-columns:1fr}

@media(min-width:640px){
body.p-product .cross__grid {grid-template-columns:repeat(3,1fr)}
}

body.p-product .mini {
  /* an <a> is inline by default, which ran the name, type and price together
     on one line and made the padding behave oddly */
  display:grid;align-content:start;justify-items:center;gap:2px;
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  border-radius:var(--radius-card);border:1px solid var(--hairline);
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--a) 26%,var(--surface)),
    color-mix(in srgb,var(--a) 6%,var(--surface)) 55%,var(--surface));
  padding:24px 20px 26px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}

body.p-product .mini:hover {transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,30,60,.14)}

body.p-product .mini::after {
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,var(--sheen-gold),var(--sheen-cream) 38%,var(--sheen-sky));
  opacity:0;transition:opacity .45s var(--ease);
}

body.p-product .mini:hover::after, body.p-product .mini:focus-within::after {opacity:1}

body.p-product /* the three shots are different shapes (1400x1275, body.p-product x980, body.p-product x875), body.p-product so without a
   fixed box the labels underneath land at three different heights */
.mini img {
  width:100%;aspect-ratio:4/3;object-fit:contain;
  border-radius:10px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.22));
  margin-bottom:16px;
}

body.p-product .mini__name {font-size:18px;font-weight:600;letter-spacing:-.02em}

body.p-product .mini__type {font-size:13px;color:var(--sec);margin-top:2px}

body.p-product .mini__price {margin-top:10px;font-weight:600;font-size:15px}

body.p-product /* ---- hero ---- */
.phero {
  position:relative;isolation:isolate;text-align:center;
  padding-block:clamp(96px,15vh,170px) clamp(60px,9vh,110px);
  padding-inline:22px;
  background:radial-gradient(120% 78% at 50% 0%,
    color-mix(in srgb,var(--accent) 42%,var(--bg)) 0%,
    color-mix(in srgb,var(--accent) 14%,var(--bg)) 46%, var(--bg) 82%);
}

body.p-product .phero__name {font-size:clamp(3rem,9vw,6rem);line-height:1.02;font-weight:600;
  letter-spacing:-.035em;margin-block:.06em .2em}

body.p-product .phero__save {
  display:inline-block;margin-top:18px;padding:7px 16px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;
  background:color-mix(in srgb,var(--accent) 34%,var(--surface));
  color:color-mix(in srgb,var(--accent) 72%,#1a1a1a);
}

body.p-product /* ---- statement pane ---- */
.statement {padding-block:clamp(56px,8vw,104px);text-align:center}

body.p-product .statement__media {
  width:min(100%,660px);margin-inline:auto;
  border-radius:var(--radius-card);overflow:hidden;
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--accent) 30%,var(--surface)),
    color-mix(in srgb,var(--accent) 6%,var(--surface)) 60%,var(--surface));
  padding:clamp(38px,5.5vw,64px) clamp(28px,4.5vw,56px);
}

body.p-product .statement__title {font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 .5em;text-wrap:balance}

body.p-product .statement__lede {font-size:clamp(17px,1.9vw,20px);line-height:1.45;letter-spacing:-.02em;color:var(--sec);max-width:46ch;margin:0 auto}

body.p-product /* ---- buy bar + footer ---- */
.buybar {
  position:sticky;bottom:20px;z-index:40;
  width:min(100% - 32px,620px);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 10px 10px 24px;border-radius:var(--radius-pill);
  box-shadow:var(--glass-edge),0 8px 30px rgba(20,30,60,.2);
}
/* ---------- p-account ---------- */
@media(min-width:760px){
body.p-account .card {grid-template-columns:220px 1fr auto}
}

@media (max-width:734px){
body.p-account .chip {min-height:44px}
}

@media(min-width:760px){
body.p-account .steps__grid {grid-template-columns:repeat(3,1fr)}
}

body.p-account .ahero {position:relative;text-align:center;padding-block:clamp(96px,15vh,170px) clamp(40px,6vh,72px);padding-inline:22px;
    background:radial-gradient(120% 78% at 50% 0%,
      color-mix(in srgb,var(--synth) 30%,var(--bg)) 0%,
      color-mix(in srgb,var(--synth) 10%,var(--bg)) 46%,var(--bg) 82%)}

body.p-account .ahero__kicker {font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--sec)}

body.p-account .ahero__name {font-size:clamp(2.6rem,7.5vw,5rem);line-height:1.04;font-weight:600;letter-spacing:-.035em;margin-block:.06em .2em}

body.p-account .ahero__tag {font-size:clamp(18px,2vw,22px);color:var(--sec);max-width:40ch;margin-inline:auto;letter-spacing:-.02em}

body.p-account .signin {padding-bottom:clamp(56px,8vw,104px)}

body.p-account .panel {width:min(100%,560px);margin-inline:auto;border-radius:var(--radius-card);
    background:var(--surface);border:1px solid var(--hairline);padding:clamp(28px,4vw,44px)}

body.p-account .panel h2 {font-size:22px;font-weight:600;letter-spacing:-.025em;margin-bottom:6px}

body.p-account .panel p {color:var(--sec);font-size:16px}

body.p-account .field {display:grid;gap:8px;margin-top:22px}

body.p-account .field label {font-size:13px;color:var(--sec)}

body.p-account .field input {
    width:100%;min-height:48px;padding:0 16px;border-radius:14px;
    border:1px solid var(--hairline);background:var(--bg);
    font:inherit;font-size:17px;color:var(--ink);
    transition:border-color .2s var(--ease),background .2s var(--ease)}

body.p-account .field input:focus {outline:none;border-color:var(--blue);background:var(--surface)}

body.p-account .panel .btn {margin-top:18px;width:100%}

body.p-account .panel__note {margin-top:16px;font-size:13px;color:var(--sec);text-align:center}

body.p-account .sent {margin-top:18px;padding:14px 16px;border-radius:14px;font-size:15px;
    background:color-mix(in srgb,var(--synth) 22%,var(--surface));
    border:1px solid color-mix(in srgb,var(--synth) 40%,transparent)}

body.p-account .owned {padding-bottom:clamp(56px,8vw,104px)}

body.p-account .owned h2 {text-align:center;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;letter-spacing:-.03em;margin-bottom:8px}

body.p-account .owned__sub {text-align:center;color:var(--sec);margin-bottom:clamp(26px,3.4vw,44px)}

body.p-account .lic {display:grid;gap:12px}

body.p-account .licrow {
    border-radius:20px;border:1px solid var(--hairline);
    background:linear-gradient(168deg,color-mix(in srgb,var(--a) 20%,var(--surface)),var(--surface) 62%);
    padding:18px 20px;display:grid;gap:14px;align-items:center}

@media(min-width:720px){
body.p-account .licrow {grid-template-columns:180px 1fr auto}
}

body.p-account .licrow__name {font-size:18px;font-weight:600;letter-spacing:-.02em}

body.p-account .licrow__meta {font-size:13px;color:var(--sec)}

body.p-account .code {
    font:13px/1.4 ui-monospace,Menlo,monospace;letter-spacing:0;
    background:var(--bg);border:1px solid var(--hairline);border-radius:10px;
    padding:10px 12px;overflow-x:auto;white-space:nowrap;color:var(--ink)}

body.p-account .licrow__acts {display:flex;gap:8px;flex-wrap:wrap}
/* ---------- p-success ---------- */
@media(min-width:760px){
body.p-success .card {grid-template-columns:220px 1fr auto}
}

@media (max-width:734px){
body.p-success .chip {min-height:44px}
}

@media(min-width:760px){
body.p-success .steps__grid {grid-template-columns:repeat(3,1fr)}
}

body.p-success .step {border-radius:var(--radius-card);background:var(--surface);border:1px solid var(--hairline);
  padding:clamp(24px,3vw,32px);display:grid;gap:8px;align-content:start}

body.p-success .step h3 {font-size:19px;font-weight:600;letter-spacing:-.02em}

body.p-success .step p {color:var(--sec);font-size:16px}

body.p-success .note {text-align:center;color:var(--sec);font-size:15px;padding-bottom:clamp(48px,7vw,90px)}

body.p-success .note a {color:var(--blue)}

body.p-success .note a:hover {text-decoration:underline}

body.p-success .splash {
    position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;
    background:var(--bg) url("../assets/clouds-square.jpg") center/cover no-repeat;
    opacity:1;transition:opacity 900ms var(--ease);
  }

body.p-success .splash--out {opacity:0}

body.p-success .splash__mark {
    width:min(72vw,760px);height:auto;aspect-ratio:1280/406;
    /* the file is a BLACK mark on flat white. multiplied over the clouds the
       white ground multiplies away to nothing and only the ink prints — no
       alpha codec, which Safari does not support in webm. */
    mix-blend-mode:multiply;
  }

body.p-success .splash__skip {
    position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);
    min-height:44px;padding:0 20px;border-radius:var(--radius-pill);
    font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);background:color-mix(in srgb,#fff 74%,transparent);
    border:1px solid var(--hairline);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:background .2s var(--ease);
  }

body.p-success .splash__skip:hover {background:#fff}

body.p-success /* the payoff: clouds, body.p-success the mark playing, body.p-success then the practical bit */
  .win {position:relative;isolation:isolate;text-align:center;min-height:min(92vh,860px);
    display:grid;align-content:center;padding-block:clamp(80px,12vh,150px) clamp(60px,9vh,110px);
    padding-inline:22px;
    background:url("../assets/clouds-square.jpg") center/cover no-repeat}

body.p-success .win::after {content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.14) 42%,rgba(0,0,0,.42))}

body.p-success .win__pill {display:inline-flex;align-items:center;gap:8px;margin-inline:auto;
    padding:8px 18px 8px 14px;border-radius:var(--radius-pill);
    font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:#0d3b22;background:color-mix(in srgb,#6fd39b 62%,#fff);
    border:1px solid color-mix(in srgb,#3f9c6b 30%,transparent)}

body.p-success .win__pill svg {width:14px;height:14px;flex:none}

body.p-success .win__title {font-size:clamp(2.6rem,8vw,5.2rem);line-height:1.02;font-weight:600;
    letter-spacing:-.035em;color:#fff;margin-block:.14em .2em}

body.p-success .win__tag {font-size:clamp(18px,2.1vw,23px);color:#fff;opacity:.92;max-width:38ch;margin-inline:auto;letter-spacing:-.02em}

body.p-success .next {padding-block:clamp(56px,8vw,100px)}

body.p-success .next h2 {text-align:center;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;letter-spacing:-.03em;margin-bottom:clamp(26px,3.4vw,44px)}

body.p-success .step {
    scroll-snap-align:center;width:min(78vw,620px);
    border-radius:var(--radius-card);background:var(--surface);border:1px solid var(--hairline);
    padding:clamp(30px,4vw,46px);text-align:center;
    display:grid;gap:10px;align-content:center;min-height:clamp(190px,22vw,240px);
    opacity:.5;transform:scale(.965);
    transition:opacity .45s var(--ease),transform .45s var(--ease)}

body.p-success .step[data-active="true"] {opacity:1;transform:scale(1)}

body.p-success .step h3 {font-size:clamp(21px,2.4vw,27px);font-weight:600;letter-spacing:-.025em}

body.p-success .step p {color:var(--sec);font-size:17px;max-width:42ch;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
body.p-success .step {opacity:1;transform:none}
body.p-success .dot[aria-current="true"]::after {animation:none;transform:scaleX(1)}
}

body.p-success .cta {display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,4vw,44px)}
/* ---------- p-support ---------- */
@media(min-width:760px){
body.p-support .card {grid-template-columns:220px 1fr auto}
}

@media (max-width:734px){
body.p-support .chip {min-height:44px}
}

@media(min-width:760px){
body.p-support .steps__grid {grid-template-columns:repeat(3,1fr)}
}

body.p-support .shero {position:relative;text-align:center;padding-block:clamp(96px,15vh,170px) clamp(40px,6vh,72px);padding-inline:22px;
    background:radial-gradient(120% 78% at 50% 0%,
      color-mix(in srgb,var(--loom) 26%,var(--bg)) 0%,
      color-mix(in srgb,var(--loom) 9%,var(--bg)) 46%,var(--bg) 82%)}

body.p-support .shero__kicker {font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--sec)}

body.p-support .shero__name {font-size:clamp(2.6rem,7.5vw,5rem);line-height:1.04;font-weight:600;letter-spacing:-.035em;margin-block:.06em .2em}

body.p-support .shero__tag {font-size:clamp(18px,2vw,22px);color:var(--sec);max-width:42ch;margin-inline:auto;letter-spacing:-.02em}

body.p-support .faq {padding-bottom:clamp(40px,6vw,72px)}

body.p-support .faq h2 {font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--sec);
    margin:clamp(34px,4.5vw,56px) 0 12px}

body.p-support .acc {display:grid;gap:10px}

body.p-support /* native <details>: keyboard operable, body.p-support findable by in-page search, body.p-support and it
     still opens with JS switched off. no custom widget needed. */
  .q {border:1px solid var(--hairline);border-radius:18px;background:var(--surface);
    overflow:hidden;transition:border-color .2s var(--ease)}

body.p-support .q:hover {border-color:color-mix(in srgb,var(--ink) 22%,transparent)}

body.p-support .q[open] {border-color:color-mix(in srgb,var(--ink) 22%,transparent)}

body.p-support .q > summary {
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,24px);
    font-size:clamp(16px,1.8vw,19px);font-weight:600;letter-spacing:-.02em;
    min-height:56px}

body.p-support .q > summary::-webkit-details-marker {display:none}

body.p-support .q > summary:focus-visible {outline:2px solid var(--blue);outline-offset:-3px;border-radius:18px}

body.p-support .chev {flex:none;width:13px;height:13px;transition:transform .25s var(--ease);opacity:.5}

body.p-support .q[open] .chev {transform:rotate(180deg)}

body.p-support .a {padding:0 clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px);color:var(--sec);
    font-size:16px;max-width:70ch;
    /* the content only exists once open, so fade it in rather than faking a
       height transition — details hides its children outright when closed. */
    animation:qopen .28s var(--ease) both}

body.p-support .a p + p {margin-top:10px}

body.p-support .a a {color:var(--blue)}

body.p-support .a a:hover {text-decoration:underline}

body.p-support .a ol {margin-top:10px;display:grid;gap:7px;counter-reset:s;padding:0}

body.p-support .a ol li {padding-left:28px;position:relative;counter-increment:s;color:var(--ink)}

body.p-support .a ol li::before {content:counter(s);position:absolute;left:0;top:0;
    width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
    font-size:11px;font-weight:600;background:color-mix(in srgb,var(--ink) 9%,transparent);
    color:var(--sec)}

body.p-support .a ol li::marker {content:""}

body.p-support .a .lede {color:var(--ink)}

body.p-support .a ul {margin-top:8px;display:grid;gap:6px}

body.p-support .a li {padding-left:16px;position:relative}

body.p-support .a li::before {content:"";position:absolute;left:2px;top:.62em;width:4px;height:4px;
    border-radius:50%;background:color-mix(in srgb,var(--ink) 35%,transparent)}

body.p-support .contact {padding-bottom:clamp(64px,9vw,120px)}

body.p-support .contact__card {width:min(100%,640px);margin-inline:auto;text-align:center;
    border-radius:var(--radius-card);border:1px solid var(--hairline);
    background:linear-gradient(168deg,color-mix(in srgb,var(--loom) 18%,var(--surface)),var(--surface) 60%);
    padding:clamp(30px,4vw,48px)}

body.p-support .contact__card h3 {font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.025em}

body.p-support .contact__card p {color:var(--sec);margin-top:8px}

body.p-support .contact__acts {display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
/* ---------- p-legal ---------- */
@media(min-width:760px){
body.p-legal .card {grid-template-columns:220px 1fr auto}
}

@media (max-width:734px){
body.p-legal .chip {min-height:44px}
}

@media(min-width:760px){
body.p-legal .steps__grid {grid-template-columns:repeat(3,1fr)}
}

body.p-legal .lhero {text-align:center;padding-block:clamp(90px,13vh,150px) clamp(30px,4vh,52px);padding-inline:22px}

body.p-legal .lhero__kicker {font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--sec)}

body.p-legal .lhero__name {font-size:clamp(2.4rem,6.5vw,4rem);line-height:1.04;font-weight:600;letter-spacing:-.035em;margin-block:.06em .18em}

body.p-legal .lhero__date {font-size:14px;color:var(--sec)}

body.p-legal .legal {padding-bottom:clamp(64px,9vw,120px)}

body.p-legal .legal__body {width:min(100%,680px);margin-inline:auto}

body.p-legal .legal__body h2 {font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600;letter-spacing:-.025em;
    margin:clamp(34px,4vw,52px) 0 10px}

body.p-legal .legal__body h2:first-child {margin-top:0}

body.p-legal .legal__body p {color:var(--sec);font-size:17px}

body.p-legal .legal__body p + p {margin-top:12px}

body.p-legal .legal__body ul {margin-top:10px;display:grid;gap:8px}

body.p-legal .legal__body li {color:var(--sec);padding-left:18px;position:relative}

body.p-legal .legal__body li::before {content:"";position:absolute;left:3px;top:.62em;width:4px;height:4px;
    border-radius:50%;background:color-mix(in srgb,var(--ink) 32%,transparent)}

body.p-legal .legal__body a {color:var(--blue)}

body.p-legal .legal__body a:hover {text-decoration:underline}

body.p-legal .legal__body strong {color:var(--ink);font-weight:600}
/* ---------- p-404 ---------- */
@media(min-width:760px){
body.p-404 .card {grid-template-columns:220px 1fr auto}
}

@media (max-width:734px){
body.p-404 .chip {min-height:44px}
}

@media(min-width:760px){
body.p-404 .steps__grid {grid-template-columns:repeat(3,1fr)}
}

body.p-404 .lost {min-height:calc(100vh - 48px);display:grid;place-items:center;text-align:center;padding:22px;
    background:radial-gradient(120% 70% at 50% 0%,
      color-mix(in srgb,var(--loom) 22%,var(--bg)) 0%,
      color-mix(in srgb,var(--loom) 7%,var(--bg)) 46%,var(--bg) 80%)}

body.p-404 .lost__inner {display:grid;gap:14px;justify-items:center}

body.p-404 .lost__code {font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sec)}

body.p-404 .lost__name {font-size:clamp(2.6rem,8vw,5rem);line-height:1.02;font-weight:600;letter-spacing:-.035em}

body.p-404 .lost__tag {font-size:clamp(17px,2vw,21px);color:var(--sec);max-width:40ch}

body.p-404 .lost__acts {display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}

body.p-404 .lost__links {margin-top:26px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}

body.p-404 .lost__links a {display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
    font-size:14px;color:var(--sec)}

body.p-404 .lost__links a:hover {color:var(--ink);text-decoration:underline}
/* ---------- p-cancel ---------- */
@media(min-width:760px){
body.p-cancel .card {grid-template-columns:220px 1fr auto}
}

@media (max-width:734px){
body.p-cancel .chip {min-height:44px}
}

@media(min-width:760px){
body.p-cancel .steps__grid {grid-template-columns:repeat(3,1fr)}
}

body.p-cancel .cx {min-height:calc(100vh - 48px);display:grid;place-items:center;text-align:center;padding:22px;
    background:radial-gradient(120% 70% at 50% 0%,
      color-mix(in srgb,var(--sec) 14%,var(--bg)) 0%,var(--bg) 70%)}

body.p-cancel .cx__inner {display:grid;gap:14px;justify-items:center;max-width:44ch}

body.p-cancel .cx__mark {width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
    background:color-mix(in srgb,var(--ink) 7%,transparent);margin-bottom:6px}

body.p-cancel .cx__mark svg {width:24px;height:24px;stroke:var(--sec);stroke-width:2.2;fill:none;stroke-linecap:round}

body.p-cancel .cx__name {font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.04;font-weight:600;letter-spacing:-.035em}

body.p-cancel .cx__tag {font-size:clamp(17px,2vw,21px);color:var(--sec)}

body.p-cancel .cx__acts {display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}

body.p-cancel .cx__note {margin-top:18px;font-size:14px;color:var(--sec)}

body.p-cancel .cx__note a {color:var(--blue)}

body.p-cancel .cx__note a:hover {text-decoration:underline}

/* ---- late overrides: these must win over the page-scoped blocks above,
   which redeclare the same bare selectors at equal specificity ---- */
/* carousel dots were 8px tall — far under the 44pt floor. the button now
   spans a full target while the visible pill stays 8px, drawn by ::before. */
.dot{
  height:44px;background:none;overflow:visible;border-radius:0;
  display:block;position:relative;
}

.dot::before{
  content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:8px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--ink) 24%,transparent);
  transition:background .3s var(--ease);
}

.dot[aria-current="true"]{background:none}

.dot[aria-current="true"]::before{background:color-mix(in srgb,var(--ink) 18%,transparent)}

.dot[aria-current="true"]::after{
  top:50%;bottom:auto;height:8px;transform-origin:left center;
  transform:translateY(-50%) scaleX(0);
}

@keyframes dotfill{to{transform:translateY(-50%) scaleX(1)}}

.dots{padding:0 14px}

/* inline "Learn more" links sat at 42px */
.more{min-height:44px}

/* the duplicate .btn base blocks further up redeclare min-height at equal
   specificity, so the touch-target floor has to be restated last. */
.btn--lg{min-height:44px;padding:0 24px;font-size:17px}
@media (max-width:734px){.btn{min-height:44px;padding:0 20px}}

/* ============================================================
   FUNCTIONAL LAYER — products menu
   the nav used to list every product inline, which overflowed on phones and
   turned the bar into a horizontal scroller — and the first thing scrolled
   out of sight was the LF mark. one menu holds the products instead, so the
   bar fits at 320px and the mark never leaves the corner.
   these rules sit last because the merged blocks above redeclare .globalnav
   at equal specificity.
   ============================================================ */
.globalnav__inner{gap:4px;overflow:visible}

/* the scroller is gone; nothing may clip the menu panel */
@media (max-width:900px){
  .globalnav__inner{justify-content:center;overflow:visible}
}

.globalnav__home{flex:0 0 auto;padding-inline:8px}

.navmenu{position:relative;flex:0 0 auto}

.navmenu>summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  min-height:44px;padding:0 12px;
  font-size:12px;letter-spacing:-.01em;color:var(--ink);opacity:.86;
  transition:opacity .2s var(--ease);
}
.navmenu>summary::-webkit-details-marker{display:none}
.navmenu>summary::marker{content:""}
.navmenu>summary:hover{opacity:1}

/* chevron drawn from a rotated corner so it inherits the link colour */
.navmenu>summary::after{
  content:"";width:5px;height:5px;
  border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;
  transform:translateY(-1.5px) rotate(45deg);
  transition:transform .25s var(--ease);
}
.navmenu[open]>summary{opacity:1}
.navmenu[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.navmenu.is-current>summary{opacity:1;font-weight:600}

.navmenu__panel{
  position:absolute;top:calc(100% + 8px);left:0;
  z-index:70;min-width:196px;padding:6px;border-radius:18px;
  display:flex;flex-direction:column;
  /* the nav bar's glass can be thin because it only ever has to hold 12px
     labels against a hairline. a menu sits over the middle of the hero, so
     it needs a real surface behind the text — 92% of the page ground, with
     the blur still doing the work at the edges. */
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:var(--glass-edge),0 14px 44px rgba(20,30,60,.20);
}

.navmenu__panel a{
  display:flex;align-items:center;min-height:44px;padding:0 14px;
  border-radius:12px;font-size:14px;white-space:nowrap;opacity:.92;
}
.navmenu__panel a:hover{opacity:1;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.navmenu__panel a[aria-current="page"]{opacity:1;font-weight:600}
.navmenu__panel hr{border:0;border-top:.5px solid var(--hairline);margin:5px 10px}

/* the panel is left-anchored to its summary rather than centred, so one
   keyframe works at every width — @keyframes is global, so a per-breakpoint
   redefinition would leak out of its media query. */
@media (prefers-reduced-motion:no-preference){
  .navmenu[open] .navmenu__panel{animation:navmenu-in .18s var(--ease) both}
}
@keyframes navmenu-in{from{opacity:0;transform:translateY(-6px)}}

/* 320px: trim the padding rather than let the bar scroll again */
@media (max-width:420px){
  .globalnav__inner{padding-inline:10px;gap:2px}
  .globalnav a,.navmenu>summary{padding:0 8px}
  .globalnav__home{padding-inline:4px}
  .navmenu__panel{min-width:186px}
}

/* on a phone the pill was squeezing "The Maker Series" down to "The Mak…".
   the name is the one thing in there that can't be guessed from context, so
   the padding gives way instead. */
@media (max-width:420px){
  .subnav{padding-inline:12px}
  .subnav__inner{gap:8px;padding:0 6px 0 12px}
  .subnav__actions .btn{padding:0 14px}
}

/* at 320px the price bar's nowrap row ran 45px past the viewport. the "— or
   £25 for all four" half is the part that doesn't fit and the part the
   pricing page repeats anyway, so on a phone the bar keeps the entry price
   and drops the rest, rather than stacking or shrinking the type. */
@media (max-width:600px){
  .pricebar__more{display:none}
  body.p-home .pricebar{width:auto;justify-content:center;padding-left:18px}
}

/* ---- the whole lineup tile is the link ----
   the "Learn more" anchor stays in the markup — it's what a screen reader
   announces and what the keyboard tabs to — but its ::after is stretched
   over the tile, so a pointer anywhere on the tile follows it. the anchor
   itself keeps the focus ring, which a stretched box wouldn't draw legibly. */
body.p-home .card{cursor:pointer}

body.p-home .card .more::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;
}

/* the affordance has to follow the pointer onto the rest of the tile, or the
   link looks inert while the thing under the cursor is the one that's live */
body.p-home .card:hover .more{text-decoration:underline}

/* ---- decimal point in prices ----
   Gradient's full stop is unusually small: measured at 100px it adds 9.5px
   of advance where Helvetica's adds 27.8. At 15px that's not enough to
   separate the pounds from the pence, and £7.50 reads as £750. Scaling the
   glyph and giving it a little air fixes the reading without changing the
   number. line-height:0 keeps the taller glyph out of the line box. */
.dec{font-size:1.7em;line-height:0;margin-inline:.03em}