/* web-apple-style — tokens + base components.
   v2: values harvested from apple.com/es stylesheets (74 files, 75k rules) and live measurement at
   1440 / 375 px on 2026-11-11, plus Apple Store and getcanopy.pro. Pair with motion.js.
   In <head>: <script>document.documentElement.classList.add('js')</script>
   Breakpoints (Apple): xlarge ≥1441 · large 1069–1440 · medium 735–1068 · small ≤734 · xsmall ≤480;
   global nav switches to the phone layout at ≤833. */

/* ---------- SF Pro (user has permission; files subset from /Library/Fonts, Latin + Apple logo U+F8FF) ----------
   Copy assets/fonts/ next to tokens.css. Text < 20px, Display ≥ 20px, like apple.com. */
@font-face { font-family: "SF Pro Text"; font-style: normal; font-weight: 400; font-display: swap; src: local("SF Pro Text Regular"), local("SFProText-Regular"), url("fonts/sf-pro-text-regular.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }
@font-face { font-family: "SF Pro Text"; font-style: normal; font-weight: 500; font-display: swap; src: local("SF Pro Text Medium"), local("SFProText-Medium"), url("fonts/sf-pro-text-medium.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }
@font-face { font-family: "SF Pro Text"; font-style: normal; font-weight: 600; font-display: swap; src: local("SF Pro Text Semibold"), local("SFProText-Semibold"), url("fonts/sf-pro-text-semibold.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }
@font-face { font-family: "SF Pro Text"; font-style: normal; font-weight: 700; font-display: swap; src: local("SF Pro Text Bold"), local("SFProText-Bold"), url("fonts/sf-pro-text-bold.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 300; font-display: swap; src: local("SF Pro Display Light"), local("SFProDisplay-Light"), url("fonts/sf-pro-display-light.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 400; font-display: swap; src: local("SF Pro Display Regular"), local("SFProDisplay-Regular"), url("fonts/sf-pro-display-regular.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 500; font-display: swap; src: local("SF Pro Display Medium"), local("SFProDisplay-Medium"), url("fonts/sf-pro-display-medium.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 600; font-display: swap; src: local("SF Pro Display Semibold"), local("SFProDisplay-Semibold"), url("fonts/sf-pro-display-semibold.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }
@font-face { font-family: "SF Pro Display"; font-style: normal; font-weight: 700; font-display: swap; src: local("SF Pro Display Bold"), local("SFProDisplay-Bold"), url("fonts/sf-pro-display-bold.woff2") format("woff2"); unicode-range: U+0000-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0308, U+2000-209F, U+20AC, U+2116, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265, U+25B6, U+25CF, U+FEFF, U+FFFD, U+F8FF; }

:root {
  /* ---- Type: SF Pro web fonts above (Display ≥ 20px, Text < 20px, exactly like apple.com) ---- */
  --font-text: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Neutrals (Apple sk-glyph / sk-fill) ---- */
  --ink: #1d1d1f;          /* sk-body-text, headlines */
  --ink-2: #424245;        /* glyph-gray-secondary-alt, store eyebrows */
  --ink-3: #6e6e73;        /* glyph-gray-secondary: grey copy, captions */
  --ink-4: #86868b;        /* fill-gray-secondary: placeholders, dark-theme grey */
  --hairline: #d2d2d7;     /* fill-gray-tertiary */
  --fill-4: #e8e8ed;       /* fill-gray-quaternary: chips, segmented track, icon-control */
  --canvas: #f5f5f7;       /* fill-tertiary: alt sections, footer, tiles */
  --canvas-2: #fafafc;     /* fill-secondary: flyouts, menus, index */
  --white: #fff;
  --black: #000;
  --surface-dark: #161617; /* flyout / footer dark */
  --card-dark: #1d1d1f;    /* alt section dark, cards on black */
  --ink-dark: #f5f5f7;
  --ink-3-dark: #86868b;
  --hairline-dark: #424245;
  --fill-4-dark: #333336;
  /* alpha glyphs (on images / translucent chrome) */
  --glyph-a: rgba(0, 0, 0, .88);
  --glyph-a2: rgba(0, 0, 0, .56);
  --glyph-a-dark: rgba(255, 255, 255, .92);
  --glyph-a2-dark: rgba(255, 255, 255, .56);

  /* ---- Action + status ---- */
  --blue: #0071e3;          /* button fill, focus ring */
  --blue-hover: #0076df;
  --blue-active: #006edb;
  --link: #0066cc;
  --link-dark: #2997ff;
  --orange: #b64400;        /* "Nuevo" badge text (dark #ff791b) */
  --orange-fill: #f56300;
  --green: #008009;  --green-fill: #03a10e;
  --red: #e30000;    --red-dark: #ff3037;
  --yellow-fill: #ffe045;
  --disabled: .42;          /* .36 on dark */

  /* ---- Shape ---- */
  --r-card: 28px;           /* tiles, store cards, modal overlay */
  --r-sheet: 18px;          /* modal inner cards, product-nav cards */
  --r-ribbon: 12px;
  --r-field: 12px;
  --r-badge: 6px;           /* 5px ≤1068 */
  --r-pill: 980px;
  --sh-card: 2px 4px 12px rgba(0, 0, 0, .08);
  --sh-card-hover: 2px 4px 16px rgba(0, 0, 0, .16);
  --sh-float: 8px 8px 16px 0 rgba(0, 0, 0, .08);
  --ring-focus: 0 0 0 3px #fff, 0 0 0 5px var(--blue);        /* container focus */
  --ring-focus-dark: 0 0 0 3px #000, 0 0 0 5px var(--blue);

  /* ---- Materials ---- */
  --material-light: rgba(250, 250, 252, .8);   /* nav over light: rgba(245,245,247,.8) */
  --material-dark: rgba(22, 22, 23, .8);       /* nav over black heroes: rgba(0,0,0,.8) */
  --blur: saturate(180%) blur(20px);
  --curtain-light: rgba(232, 232, 237, .4);
  --curtain-dark: rgba(0, 0, 0, .4);
  --scrim-modal: rgba(0, 0, 0, .48);

  /* ---- Motion (frequency on apple.com in brackets) ---- */
  --ease: cubic-bezier(.4, 0, .6, 1);          /* standard [374] */
  --ease-in-out: cubic-bezier(.42, 0, .58, 1); /* CSS ease-in-out [588] */
  --ease-out: cubic-bezier(0, 0, .2, 1);       /* enter [101] */
  --ease-soft: cubic-bezier(.25, .1, .3, 1);   /* long fades [26] */
  --ease-card: cubic-bezier(0, 0, .5, 1);      /* hover lift, chapter-nav hover [28] */
  --ease-indie: cubic-bezier(.22, .61, .2, 1);
  --dur-fast: .16s;  --dur-hover: .24s;  --dur: .32s;  --dur-slow: .5s;  --dur-reveal: 1s;

  /* ---- Layout ---- */
  --viewport-content: 980px;                  /* text column: 980 / 692 / 87.5% */
  --content-max: 1260px;                      /* galleries, store, modal overlay */
  --content-max-hero: 1680px;
  --gutter: max(22px, calc((100% - 1160px) / 2));   /* store shelves: 140px at 1440 */
  --gutter-gallery: max(22px, calc((100% - 1260px) / 2)); /* product galleries: 90px at 1440 */
  --section-pad: 144px;                       /* global-section-padding 144 / 120 / 112 */
  --section-pad-reduced: 120px;               /* 120 / 80 / 56 */
  --nav-h: 44px;                              /* 48 at ≤833 */
  --localnav-h: 52px;                         /* 48 at ≤734 */
  --grid-gap: 24px;                           /* 12-col grid gutter */
  --tile-gap: 12px;                           /* home tiles */
  --card-gap: 20px;                           /* shelves, galleries */
}
@media (max-width: 1068px) {
  :root { --viewport-content: 692px; --section-pad: 120px; --section-pad-reduced: 80px; --r-badge: 5px; }
}
@media (max-width: 833px) { :root { --nav-h: 48px; } }
@media (max-width: 734px) {
  :root { --viewport-content: 87.5%; --content-max: 420px; --section-pad: 112px; --section-pad-reduced: 56px; --localnav-h: 48px; --gutter: 6.25vw; --gutter-gallery: 6.25vw; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px;
  font: 400 17px/1.47059 var(--font-text);
  letter-spacing: -.022em;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.has-modal { overflow: hidden; }
.visuallyhidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; }

.theme-light { background: var(--white); color: var(--ink); }
.theme-grey { background: var(--canvas); color: var(--ink); }
.theme-index { background: var(--canvas-2); color: var(--ink); }
.theme-dark, .theme-dark-alt {
  background: var(--black);
  color: var(--ink-dark);
  --ink-3: var(--ink-3-dark);
  --hairline: var(--hairline-dark);
  --fill-4: var(--fill-4-dark);
  --link: var(--link-dark);
  --orange: #ff791b;
  --disabled: .36;
  --hl: var(--ink-dark);
}
.theme-dark-alt { background: var(--card-dark); }

/* ---------- Layout ---------- */
.container { width: var(--viewport-content); max-width: 980px; margin-inline: auto; }
.container--wide { width: min(var(--content-max), 87.5%); margin-inline: auto; }
.container--hero { width: min(var(--content-max-hero), 100%); margin-inline: auto; }
.measure { max-width: 660px; margin-inline: auto; }
.col-10 { width: calc(100% * 10 / 12); margin-inline: auto; }   /* chapter copy = large-10, offset 1 */
.section { padding-block: var(--section-pad); }
.section--reduced { padding-top: var(--section-pad-reduced); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }

/* ---------- Typography: Apple's ramp (size / line-height / tracking per breakpoint) ---------- */
.t-hero     { font: 600 80px/1.05 var(--font-display); letter-spacing: -.015em; }    /* headline-super / section-headline */
.t-standalone { font: 600 96px/1.04167 var(--font-display); letter-spacing: -.015em; }/* headline-standalone */
.t-elevated { font: 600 64px/1.0625 var(--font-display); letter-spacing: -.009em; }  /* headline-elevated */
.t-section  { font: 600 56px/1.07143 var(--font-display); letter-spacing: -.005em; } /* tile-headline, section-header */
.t-headline { font: 600 48px/1.08349 var(--font-display); letter-spacing: -.003em; } /* headline */
.t-tile     { font: 600 40px/1.1 var(--font-display); letter-spacing: 0; }           /* headline-reduced, promo tile */
.t-callout  { font: 600 32px/1.125 var(--font-display); letter-spacing: .004em; }    /* callout, eyebrow-super */
.t-title    { font: 600 28px/1.14286 var(--font-display); letter-spacing: .007em; }  /* eyebrow-elevated, card title */
.t-subhead  { font: 400 28px/1.14286 var(--font-display); letter-spacing: .007em; }  /* tile-subhead */
.t-label    { font: 600 24px/1.16667 var(--font-display); letter-spacing: .009em; }  /* eyebrow, section label */
.t-eyebrow  { font: 600 21px/1.19048 var(--font-display); letter-spacing: .011em; }  /* eyebrow-reduced */
.t-intro-elevated { font: 400 24px/1.33341 var(--font-display); letter-spacing: .009em; }
.t-intro    { font: 400 21px/1.381 var(--font-display); letter-spacing: .011em; }    /* intro */
.t-copy     { font: 600 21px/1.381 var(--font-display); letter-spacing: .011em; }    /* chapter copy: grey + ink highlights */
.t-tout     { font: 600 19px/1.21053 var(--font-display); letter-spacing: .012em; }
.t-body     { font: 400 17px/1.47059 var(--font-text); letter-spacing: -.022em; }
.t-body-tight { font: 400 17px/1.23536 var(--font-text); letter-spacing: -.022em; }
.t-caption  { font: 400 14px/1.42859 var(--font-text); letter-spacing: -.016em; }    /* body-reduced */
.t-footnote { font: 400 12px/1.33337 var(--font-text); letter-spacing: -.01em; }     /* caption / sosumi */
.t-caps     { font: 600 12px/1.33337 var(--font-text); letter-spacing: -.01em; text-transform: uppercase; }
.t-quote    { font: 400 40px/1.2 var(--font-display); letter-spacing: 0; }
.t-manifesto{ font: 600 32px/1.25 var(--font-display); letter-spacing: .004em; }
@media (max-width: 1068px) {
  .t-standalone { font-size: 80px; line-height: 1.05; }
  .t-hero { font-size: 64px; line-height: 1.0625; letter-spacing: -.009em; }
  .t-elevated { font-size: 48px; line-height: 1.08349; letter-spacing: -.003em; }
  .t-section { font-size: 48px; line-height: 1.08349; letter-spacing: -.002em; }
  .t-headline { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
  .t-tile { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  .t-callout { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
  .t-title, .t-subhead, .t-label { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
  .t-eyebrow { font-size: 21px; } .t-intro-elevated { font-size: 21px; line-height: 1.381; letter-spacing: .011em; }
  .t-intro, .t-copy { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
  .t-tout { font-size: 17px; line-height: 1.23536; letter-spacing: -.022em; }
  .t-quote { font-size: 32px; line-height: 1.25; letter-spacing: .004em; }
  .t-manifesto { font-size: 28px; line-height: 1.28583; letter-spacing: .007em; }
}
@media (max-width: 734px) {
  .t-standalone, .t-hero, .t-elevated { font-size: 48px; line-height: 1.08349; letter-spacing: -.003em; }
  .t-section { font-size: 32px; line-height: 1.125; letter-spacing: .002em; }
  .t-headline { font-size: 32px; line-height: 1.125; letter-spacing: .004em; }
  .t-tile { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
  .t-callout, .t-label { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; }
  .t-title { font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
  .t-subhead, .t-eyebrow, .t-tout { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; }
  .t-intro-elevated, .t-intro, .t-copy { font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
  .t-quote { font-size: 28px; line-height: 1.28583; letter-spacing: .007em; }
  .t-manifesto { font-size: 24px; line-height: 1.33341; letter-spacing: .009em; }
}
/* Indie (Canopy) display */
.t-indie-hero { font: 700 clamp(56px, 7vw, 104px)/.95 var(--font-display); letter-spacing: -.05em; }
.t-indie-sub { font: 600 clamp(24px, 2.6vw, 38px)/1.12 var(--font-display); letter-spacing: -.035em; color: #8e9197; }

.tone { color: var(--ink-3); }                         /* two-tone continuation */
.hl { color: var(--hl, var(--ink)); font-weight: 600; } /* highlight inside grey copy */
.t-intro.tone-copy, .t-copy { color: var(--ink-3); }
.t-copy strong, .t-copy .hl { color: var(--hl, var(--ink)); font-weight: 600; }
/* Footnotes (Apple sosumi): superscript numbers in copy, list above the footer */
sup.fn, .footnote { font-size: .6em; line-height: 0; position: relative; top: -.5em; vertical-align: baseline; font-feature-settings: "numr"; }
sup.fn a, .footnote a { color: inherit; text-decoration: underline; text-underline-offset: -.28em; }
.footnotes { font: 400 12px/1.33337 var(--font-text); letter-spacing: -.01em; color: var(--glyph-a2); }
.footnotes li + li { margin-top: 8px; }
.t-gradient {
  background: linear-gradient(90deg, var(--g1, #ff7a18), var(--g2, #af00ff) 40%, var(--g3, #2997ff) 70%, var(--g1, #ff7a18));
  background: linear-gradient(90deg in oklch, var(--g1, #ff7a18), var(--g2, #af00ff) 40%, var(--g3, #2997ff) 70%, var(--g1, #ff7a18));
  background-size: 300% 100%;
  background-position-x: 160%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.t-gradient.is-in { animation: gradient-swipe 2.4s var(--ease-soft) forwards; }
@keyframes gradient-swipe { from { background-position-x: 160%; } to { background-position-x: 1%; } }

/* ---------- Buttons & links (Apple .button sizes: padding includes the 1px border) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 70px; padding: 11px 21px;               /* elevated: 44px tall, hero CTAs */
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--blue); color: #fff;
  font: 400 17px/1.17648 var(--font-text); letter-spacing: -.022em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.btn:hover { background: var(--blue-hover); text-decoration: none; }
.btn:active { background: var(--blue-active); }
.btn[disabled], .btn.is-disabled { opacity: var(--disabled); pointer-events: none; }
.btn--sm { min-width: 60px; padding: 8px 15px; font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; }  /* default: 36px, promo tiles */
.btn--xs { min-width: 45px; padding: 3px 10px; font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; } /* reduced: 24px, local nav */
.btn--super { min-width: 90px; padding: 17px 30px; }                                                              /* super: 56px */
.btn--block { display: flex; width: 100%; border-radius: 8px; }
.btn--secondary { background: transparent; color: var(--link); border-color: currentColor; }
.btn--secondary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn--dark, .btn--neutral { background: var(--ink); color: #fff; }
.btn--dark:hover, .btn--neutral:hover { background: #272729; }
.btn--dark:active, .btn--neutral:active { background: #18181a; }
.theme-dark .btn--neutral { background: var(--ink-dark); color: var(--ink); }
.btn--indie {
  min-height: 48px; padding: 0 20px; border-radius: 14px;
  background: #030303; color: #f7f8f9; font-size: 15px; font-weight: 600;
  box-shadow: 0 14px 30px -10px rgba(3, 3, 3, .45);
  transition: transform .35s var(--ease-indie), box-shadow .35s var(--ease-indie), background-color .35s var(--ease-indie);
}
.btn--indie:hover { background: #1a1a1a; transform: translateY(-1px); box-shadow: 0 18px 36px -12px rgba(3, 3, 3, .5); }
.btn--indie:active { transform: scale(.98); }
.ctas { display: flex; flex-wrap: wrap; column-gap: 17px; row-gap: 16px; justify-content: center; align-items: center; }
@media (max-width: 734px) { .ctas { column-gap: 14px; } }
.link-more::after { content: "\00a0\203A"; }       /* Apple uses the SF Pro Icons chevron; › is the fallback */
.link-ext::after { content: "\00a0\2197"; }
.links-inline > * + * { margin-inline-start: .8em; }
.links-stacked > * + * { margin-top: .4em; }
.badge { display: inline-block; padding: 6px 9px; border-radius: var(--r-badge); color: var(--orange); font: 600 12px/1.33337 var(--font-text); letter-spacing: -.01em; }
.eyebrow-new { color: var(--orange); font: 600 12px/1.33337 var(--font-text); letter-spacing: -.01em; }

/* ---------- Global nav (basic shell) ---------- */
.gnav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: var(--material-light);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  color: var(--ink);
}
.gnav--dark { background: var(--material-dark); color: var(--ink-dark); }
.gnav__inner {
  max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; letter-spacing: -.01em;
}
.gnav a { color: inherit; opacity: .8; padding: 0 8px; line-height: var(--nav-h); transition: opacity .32s var(--ease); }
.gnav a:hover { opacity: 1; text-decoration: none; }
@media (max-width: 833px) { :root { --nav-h: 48px; } }

/* ---------- Tiles ---------- */
.tile {
  position: relative; overflow: hidden; min-height: 692px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: 52px;
}
.tile .t-subhead, .tile .t-eyebrow { margin: 4px 0 0; }
.tile .ctas { margin-top: 18px; }
.tile__media { margin-top: auto; width: 100%; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.mosaic > .tile { min-height: 580px; }
@media (max-width: 734px) { .mosaic { grid-template-columns: 1fr; } .tile { min-height: 560px; } .mosaic > .tile { min-height: 500px; } }

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: 313px; height: 500px; padding: 28px;
  border-radius: var(--r-card);
  background: var(--card-bg, var(--white)); color: var(--card-ink, var(--ink));
  box-shadow: var(--sh-card);
  transition: box-shadow .3s var(--ease-card), transform .3s var(--ease-card);
}
@media (hover: hover) { a.card:hover, .card--link:hover { box-shadow: var(--sh-card-hover); transform: scale(1.01); text-decoration: none; } }
.card--feature { width: 400px; }
.card--wide { width: 480px; }
.card--short { height: 240px; }
.card-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; width: 313px; height: 500px; }
.card-stack > .card { width: auto; height: auto; }
.card__eyebrow { margin: 0 0 6px; font: 600 12px/1.33337 var(--font-text); letter-spacing: -.01em; text-transform: uppercase; color: var(--card-ink, var(--ink-2)); }
.card__eyebrow--new { color: var(--orange); text-transform: none; }
.card__title { margin: 0; font: 600 28px/1.14286 var(--font-display); letter-spacing: .007em; }
.card--short .card__title { font-size: 24px; line-height: 1.16667; }
.card__copy { margin: 10px 0 0; font-size: 17px; }
.card__price { margin: 10px 0 0; font-size: 14px; letter-spacing: -.016em; }
.card__glyph { width: auto; height: 56px; margin: -12px 0 4px; color: currentColor; }
.card__media { margin: auto -28px -28px; }
.card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; }
.card__action {
  position: absolute; right: 18px; bottom: 18px;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(232, 232, 237, .9); color: var(--ink); font-size: 20px; line-height: 1;
}
.card--tonal .card__action { background: rgba(255, 255, 255, .72); color: #1d1d1f; }
@media (max-width: 734px) { .card, .card--feature, .card--wide, .card-stack { width: 309px; height: 450px; } }

/* Tonal pairs (store-measured; adapt the hues to the brand) */
.pair-yellow   { --card-bg: #fae492; --card-ink: #57161a; }
.pair-purple   { --card-bg: #420052; --card-ink: #c4b8eb; }
.pair-lavender { --card-bg: #c4b8eb; --card-ink: #420052; }
.pair-sky      { --card-bg: #71cfff; --card-ink: #00224d; }
.pair-mint     { --card-bg: #9bceaa; --card-ink: #1a4c44; }
.pair-navy     { --card-bg: #113679; --card-ink: #b3ceea; }
.pair-pink     { --card-bg: #ffc1db; --card-ink: #5a122c; }

/* ---------- Shelf (horizontal scroller) ---------- */
.shelf { position: relative; }
.shelf__header { margin: 0; padding-inline: var(--gutter); }
.shelf__crop { overflow: hidden; }
.shelf__track {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 16px var(--gutter) 40px;
  scrollbar-width: none;
}
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__track > * { flex: none; scroll-snap-align: start; }
.gallery .shelf__track > * { scroll-snap-stop: always; }   /* a long swipe moves one card, never several */
.paddles { display: flex; justify-content: flex-end; gap: 20px; margin-top: -24px; padding-inline: var(--gutter); }
.paddle {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(210, 210, 215, .64); color: rgba(0, 0, 0, .56);
  transition: background-color .3s var(--ease), color .3s var(--ease), opacity .7s cubic-bezier(.15, 0, .2, 1) .1s;
}
.paddle:hover { background: rgba(223, 223, 227, .8); color: rgba(0, 0, 0, .64); }
.paddle:disabled { opacity: .42; cursor: default; }
.theme-dark .paddle { background: rgba(66, 66, 69, .72); color: rgba(255, 255, 255, .8); }

/* ---------- Highlights gallery + dotnav ---------- */
.gallery .shelf__track { padding-inline: 90px; scroll-padding-inline: 90px; }
.gallery__header { margin: 0 0 24px; padding-inline: 90px; }
.gallery__item {
  position: relative; overflow: hidden; width: 100%; height: min(612px, 72vh);
  border-radius: var(--r-card); background: var(--card-dark); color: #fff;
}
.gallery__item > img, .gallery__item > video { width: 100%; height: 100%; object-fit: cover; }
.gallery__caption {
  position: absolute; inset: 48px 12% auto; margin: 0; text-align: center;
  font: 600 28px/1.14286 var(--font-display); letter-spacing: .007em;
}
@media (max-width: 734px) { .gallery .shelf__track, .gallery__header { padding-inline: 22px; scroll-padding-inline: 22px; } .gallery__caption { font-size: 21px; inset: 28px 8% auto; } }
.gallery__controls { display: flex; justify-content: center; align-items: center; gap: 12px; }
.dotnav {
  display: inline-flex; align-items: center; gap: 16px; height: 56px; padding: 0 24px;
  border-radius: var(--r-pill); background: var(--dotnav-bg, rgba(232, 232, 237, .76));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.dot {
  position: relative; overflow: hidden; width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--dot, rgba(0, 0, 0, .24));
  transition: width .4s var(--ease), background-color .3s var(--ease);
}
.dot[aria-current="true"] { width: 48px; }
.dot--run::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--dot-fill, var(--ink));
  animation: dot-fill var(--dur, 6s) linear forwards;
}
.is-paused .dot--run::after { animation-play-state: paused; }
@keyframes dot-fill { to { transform: scaleX(1); } }   /* compositor-only (width relaid out every frame) */
.playpause {
  display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; color: inherit;
  background: var(--dotnav-bg, rgba(232, 232, 237, .76));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.playpause .i-play { display: none; }
.playpause[data-state="paused"] .i-play { display: block; }
.playpause[data-state="paused"] .i-pause { display: none; }
.theme-dark .dotnav, .theme-dark .playpause { --dotnav-bg: rgba(66, 66, 69, .72); }
.theme-dark .dot { --dot: rgba(255, 255, 255, .36); --dot-fill: var(--ink-dark); }

/* ---------- Segmented control ---------- */
.segmented { position: relative; display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--fill-4); }
.segmented button {
  position: relative; z-index: 1; padding: 8px 18px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--ink); cursor: pointer;
  font: 400 14px/1.42859 var(--font-text); letter-spacing: -.016em;
  transition: color .3s var(--ease);
}
.segmented button[aria-pressed="true"] { color: #fff; }
.segmented__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: var(--r-pill); background: var(--ink); transition: transform .4s var(--ease), width .4s var(--ease); }

/* ---------- Modal sheet (native <dialog class="sheet">) ---------- */
dialog.sheet {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 40px 20px; border: 0; background: transparent; overflow-y: auto;
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, .48); }
.sheet__panel { position: relative; width: min(816px, 100%); margin: 0 auto; padding: 0 76px 76px; border-radius: var(--r-sheet); background: var(--white); color: var(--ink); }
.sheet__close {
  position: sticky; top: 16px; z-index: 2; display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0 -60px 20px auto; padding: 0; border: 0; border-radius: 50%;
  background: var(--fill-4); color: var(--ink-3); cursor: pointer; font-size: 20px; line-height: 1;
}
.sheet__panel::before { content: ""; display: block; height: 16px; }
dialog.sheet[open] .sheet__panel { animation: sheet-in .45s var(--ease-out); }
dialog.sheet[open]::backdrop { animation: fade-in .2s linear; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes fade-in { from { opacity: 0; } }
@media (max-width: 734px) { .sheet__panel { padding: 0 24px 48px; } .sheet__close { margin-right: -8px; } }

/* ---------- Reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 20px));
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
/* Armed (JS, ~1.5 viewports ahead): own layer, painted at .001 so the fade is compositor-only */
.js [data-reveal][data-armed]:not(.is-in) { opacity: .001; transition: none; }
.js [data-reveal="fade"] { --reveal-y: 0px; }
.js [data-reveal="blur"] { transform: scale(1.04); filter: blur(10px); transition-property: opacity, transform, filter; }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Footer ---------- */
.footer { background: var(--canvas); color: var(--ink-3); font-size: 12px; line-height: 1.33337; letter-spacing: -.01em; }
.footer a { color: var(--ink-2); }
.footer__notes { padding: 17px 0 11px; border-bottom: 1px solid var(--hairline); }
.footer__dir { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 30px; padding: 20px 0; }
.footer__dir h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ink); }
.footer__dir ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
@media (max-width: 734px) { .footer__dir { grid-template-columns: 1fr; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; filter: none; transition: opacity .2s linear; transition-delay: 0s; }
  .t-gradient.is-in { animation: none; background-position-x: 1%; }
  .card, .btn, .paddle, .dot, .segmented__thumb { transition: none; }
  .dot--run::after { animation: none; transform: none; }
  dialog.sheet[open] .sheet__panel, dialog.sheet[open]::backdrop { animation: none; }
}

/* Scroll-driven reveal (desktop Safari 26+/Chrome): progress follows the scroll itself, so it can
   never start late or stall behind the main thread. Set by motion.js on fine-pointer devices. */
@keyframes reveal-sd { from { opacity: 0; transform: translateY(var(--reveal-y, 28px)); } to { opacity: 1; transform: none; } }
.reveal-sd [data-reveal] {
  opacity: 1; transform: none; filter: none; transition: none;
  animation: reveal-sd linear both;
  animation-timeline: view();
  animation-range: entry 24px entry 380px;
}
.reveal-sd [data-reveal="fade"] { --reveal-y: 0px; }