/* Argon site — layer on top of tokens.css (web-apple-style).
   Palette: Apple product page — white / #f5f5f7 / black, taken from the "Cumbre" wallpapers:
   one accent, the dawn-sky blue (#798fbd), in contrast-safe shades for fills, links and special words. */
:root {
  --acc: #5070b3; --acc-hover: #5b7bbd; --acc-light: #99add6;   /* fills (4.7:1 with white), light = on dark */
  --acc-a: #6a82b9; --acc-b: #94a6d6; --acc-text: #6c84bb;       /* special text: dawn sky */
  --blue: var(--acc); --blue-hover: var(--acc-hover); --blue-active: #4566ab; --link: #496cb6; --link-dark: var(--acc-light);
  --tile: var(--canvas);
}
.theme-grey { --tile: var(--white); }
.theme-dark { --acc-a: #8fa4da; --acc-b: #bcc8ec; --acc-text: #9fb2e2; }
/* Card tones: light tiles (grey on white sections, white on grey ones) and black tiles */
.c-pink, .c-sky, .c-yellow, .c-mint, .c-lav, .c-orange, .c-grey {
  --c-bg: var(--tile); --c-ink: var(--ink); --c-ink2: #6e6e73; --c-mid: var(--acc);
}
.c-plum, .c-navy, .c-teal, .c-wine {
  --c-bg: #000; --c-ink: #f5f5f7; --c-ink2: #86868b; --c-mid: var(--acc-light);
  --acc-a: #8fa4da; --acc-b: #bcc8ec; --acc-text: #9fb2e2;
}
.grad, .stat__n, .pcard--lic .pcard__price {
  background: linear-gradient(90deg in oklch, var(--acc-a), var(--acc-b)); -webkit-background-clip: text; background-clip: text; color: transparent;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--localnav-h); }
html.lang-pending body { visibility: hidden; }
body[data-mode="notch"] .only-island, body[data-mode="island"] .only-notch { display: none; }
h3 { margin: 0; }

/* ---------- Nav (Apple local nav: 52/48, title 21, links 12, reduced pill) ---------- */
.gnav { height: var(--localnav-h); background: rgba(250, 250, 252, .8); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .16); }
.gnav__inner { max-width: var(--viewport-content); padding: 0; font-size: 12px; }
.gnav .brand { display: flex; align-items: center; gap: 8px; padding: 0; opacity: 1; line-height: var(--localnav-h); font: 600 21px/1.19048 var(--font-display); letter-spacing: .011em; }
.brand__mark { width: 22px; height: 22px; background: currentColor; -webkit-mask: url(argon-mark-mono.svg) center / contain no-repeat; mask: url(argon-mark-mono.svg) center / contain no-repeat; }
.gnav__links { display: flex; margin-inline-start: auto; }
.gnav__links a { padding: 0; margin-inline-start: 24px; line-height: var(--localnav-h); font: 400 12px/1 var(--font-text); letter-spacing: -.01em; color: var(--ink); opacity: .88; }
.gnav__end { display: flex; align-items: center; gap: 24px; margin-inline-start: 24px; }
.gnav .gnav__buy { opacity: 1; padding: 3px 10px; line-height: 1.33337; color: #fff; }
.lang { display: flex; gap: 2px; }
.lang button { padding: 4px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: 400 12px/1.33337 var(--font-text); letter-spacing: -.01em; color: var(--ink-3); }
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
@media (max-width: 734px) { .gnav__links { display: none; } .gnav .brand { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; } .gnav__end { gap: 14px; } }

/* ---------- Buttons ---------- */
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #e8e8ed; }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 96px; text-align: center; overflow: hidden; }
.hero__icon { width: 88px; height: 88px; margin: 0 auto 24px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .22)); }
.hero h1 { margin: 0; }
.hero__lead { max-width: 660px; margin: 22px auto 0; color: var(--ink-2); }
.hero__ctas { margin-top: 30px; align-items: center; gap: 28px; }
.hero__ctas .link-more { font-size: 17px; }
.hero__fine { margin: 18px 0 0; font-size: 12px; line-height: 1.33337; color: var(--ink-4); letter-spacing: -.01em; }
@media (max-width: 734px) {
  .hero { padding: 48px 0 72px; }
  .hero__icon { width: 72px; height: 72px; }
  .hero__ctas { flex-direction: column; gap: 16px; }
}

/* ---------- MacBook (SVG frame + live screen + 3D scroll/interactive lid) ---------- */
.mac { position: relative; width: min(1120px, 94vw); aspect-ratio: 1200 / 780; margin: 64px auto 0; }
.mac__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mac__screen {
  position: absolute; left: 6.5833%; top: 2.4359%; width: 86.8333%; height: 86.7949%;
  overflow: hidden; background: #0d0d0e;
  border-radius: .96% .96% .3% .3% / 1.48% 1.48% .45% .45%;
}
.mac--hero3d {
  --open: 1;
  perspective: 1800px;
}
.mac__lid3d {
  position: absolute; inset: 0;
  transform-origin: 50% 92.31%;
  transform-style: preserve-3d;
  transform: perspective(1600px) rotateX(calc((1 - var(--open, 1)) * -76deg)) scaleY(calc(.16 + .84 * var(--open, 1)));
  will-change: transform;
}
.mac__lid-front {
  position: absolute; inset: 0;
  filter: brightness(calc(.18 + .82 * var(--open, 1)));
}
.mac--hero3d .mac__notch {
  transform: translateX(-50%) scale(calc(.78 + .22 * var(--open, 1)));
  transform-origin: 50% 0;
}
.mac__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, calc((1 - var(--open, 1)) * .42)) 38%,
    rgba(255, 255, 255, calc((1 - var(--open, 1)) * .12)) 54%,
    transparent 72%);
  mix-blend-mode: screen;
}
.mac__lid-back {
  position: absolute; left: 5.5%; top: 1.54%; width: 89%; height: 90.26%;
  border-radius: 26px 26px 10px 10px;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255, 255, 255, .95), rgba(210, 212, 219, .92) 48%, rgba(164, 166, 174, .96) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, .9),
    inset 0 -6px 14px rgba(0, 0, 0, .28),
    0 24px 48px -12px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
  opacity: clamp(0, calc((.34 - var(--open, 1)) * 3.4), 1);
  pointer-events: none;
}
.mac__apple-mark {
  width: 74px; height: 74px;
  color: rgba(29, 29, 31, .28);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .65));
}
.mac__lid-edge {
  position: absolute; left: 0; right: 0; top: 0; height: 10px;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(90deg, #b8bac2, #f5f5f7 22%, #caccd4 50%, #f5f5f7 78%, #b8bac2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.mac__base3d {
  position: relative; z-index: 2;
}
.wall {
  position: absolute; inset: 0;
  background: #9fb0d8 url(../media/wall-dawn.webp) center / cover no-repeat;   /* "Cumbre — amanecer" */
}
.mcard .wall { background-color: #141a2e; background-image: url(../media/wall-night.webp); }  /* "Cumbre — noche" */
.mac__notch { position: absolute; left: 50%; top: -2px; width: 31%;   /* 2 px above the clipped screen edge: Safari softens a scaled alpha video's top row and the wallpaper showed through as a blue line */ height: auto; transform: translateX(-50%); pointer-events: none; }
.mac__fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mode { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; }
.mode__note { margin: 0; padding-inline: 22px; font-size: 14px; line-height: 1.42859; color: var(--ink-3); letter-spacing: -.016em; }

/* Real captures: cut the baked shadow, add a clean one */
/* Plain CSS shadows only on stills: an SVG url() filter is rasterised on the CPU and re-run on every
   video frame and scroll repaint in WebKit (the scroll lag). Videos carry no filter at all. */
/* (the captures already carry their own baked shadow; no CSS filter — painted per tile on the CPU) */
.spr { clip-path: inset(0 0 3px 0); width: 100%; aspect-ratio: 1240 / 126; background-repeat: no-repeat; background-size: 100% auto; background-position: 0 100%; }

/* ---------- Highlights gallery ---------- */
.highlights { padding-block: var(--section-pad); background: var(--canvas); --tile: var(--white); }
.highlights .gallery .shelf__track { padding-inline: max(90px, calc((100vw - 1260px) / 2)); scroll-padding-inline: max(90px, calc((100vw - 1260px) / 2)); }
.highlights .gallery__header { width: min(1260px, calc(100vw - 180px)); margin: 0 auto 40px; padding-inline: 0; }
.highlights .gallery__controls { margin-top: 8px; }
.hcard { background: var(--c-bg); color: var(--c-ink); width: min(1260px, calc(100vw - 180px)); }
.hcard__cap {
  position: absolute; z-index: 2; top: 44px; left: 48px; max-width: min(540px, calc(100% - 96px)); margin: 0;
  font: 600 28px/1.14286 var(--font-display); letter-spacing: .007em; color: var(--c-ink2);
}
.hcard__cap strong { color: var(--c-ink); font-weight: 700; }
.hcard__media { position: absolute; inset: 30% 0 0; display: grid; place-items: center; }
.hcard__media > video, .hcard__media > img { width: min(680px, 74%); height: auto; }
.hcard--air .hcard__cap { top: 50%; translate: 0 -50%; max-width: calc(46% - 136px); }   /* AirDrop: words on the left, centred on the screen at the right, 48 px clear of it */
.hcard--air .hcard__media { inset: 40px 40px 40px auto; width: 54%; place-items: center end; }
.hcard--air .hcard__media > video { width: 100%; height: auto; max-height: 100%; aspect-ratio: 6 / 5; object-fit: cover; object-position: 50% 0; border-radius: 22px; background: #141a2e; }
@media (min-width: 735px) and (max-width: 1068px) {
  .hcard--air .hcard__cap { top: 44px; translate: none; max-width: calc(100% - 96px); }
  .hcard--air .hcard__media { inset: auto 40px 40px; width: auto; height: 58%; place-items: end center; }
  .hcard--air .hcard__media > video { width: auto; height: 100%; max-width: 100%; }
}
@media (max-width: 734px) {
  .highlights .gallery .shelf__track { padding-inline: 6.25vw; scroll-padding-inline: 6.25vw; }
  .highlights .gallery__header { width: 87.5vw; margin-bottom: 28px; }
  .hcard { width: 87.5vw; }
  .hcard__cap { top: 28px; left: 26px; max-width: calc(100% - 52px); font-size: 21px; line-height: 1.19048; letter-spacing: .011em; }
  .hcard__media { inset: 44% 0 0; }
  .hcard--air .hcard__cap { top: 28px; translate: none; max-width: calc(100% - 52px); }
  .hcard--air .hcard__media { inset: auto 20px 20px; width: auto; place-items: end stretch; }
  .hcard--air .hcard__media > video { width: 100%; max-height: none; border-radius: 16px; }
  .hcard__media > video, .hcard__media > img { width: 90%; }
}

/* Keycaps (original drawing) */
.keys { display: flex; gap: 16px; }
.key {
  position: relative; display: grid; place-items: center; width: 112px; height: 112px;
  border-radius: 20px; background: linear-gradient(180deg, #2b2b2d, #161617); color: #f5f5f7;   /* MacBook keycaps: black, light legends */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 7px 0 #070707, 0 24px 30px -14px rgba(0, 0, 0, .45);
}
.key b { position: absolute; top: 14px; right: 16px; font: 500 26px/1 var(--font-display); }
.key small { position: absolute; left: 14px; bottom: 13px; font: 500 14px/1 var(--font-text); letter-spacing: 0; color: rgba(245, 245, 247, .78); }
.key--letter b { position: static; font-size: 46px; font-weight: 500; }
.keys--xl { gap: 22px; }
.keys--xl .key { width: 150px; height: 150px; border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 9px 0 #070707, 0 30px 36px -16px rgba(0, 0, 0, .45); }
.keys--xl .key b { top: 18px; right: 20px; font-size: 34px; }
.keys--xl .key small { left: 18px; bottom: 17px; font-size: 17px; }
.keys--xl .key--letter b { font-size: 62px; }
@media (max-width: 734px) {
  .keys, .keys--xl { gap: 10px; }
  .key, .keys--xl .key { width: 78px; height: 78px; border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 5px 0 #070707, 0 18px 22px -12px rgba(0, 0, 0, .45); }
  .key b, .keys--xl .key b { top: 10px; right: 11px; font-size: 19px; }
  .key small, .keys--xl .key small { left: 10px; bottom: 9px; font-size: 11px; }
  .key--letter b, .keys--xl .key--letter b { font-size: 32px; }
}

/* ---------- Chapters ---------- */
/* Chapter head (MacBook Air anatomy): eyebrow 24/28 → headline 80/84 (+10px) → copy 21/29 grey, on 10 of 12 columns */
.chapter__head { text-align: start; }
.chapter__head > * { width: calc(100% * 10 / 12); margin-inline: auto; }
.chapter__eyebrow { margin-block: 0; display: flex; align-items: baseline; gap: 10px; }
.chapter__head .t-hero { margin-block: 10px -5px; text-wrap: pretty; }
.chapter__head .t-copy { margin-block: 48px 0; }
@media (max-width: 734px) { .chapter__head > * { width: 100%; } .chapter__head .t-copy { margin-top: 32px; } }
.badge {
  display: inline; margin: 0; padding: 0; border-radius: 0;
  background: none; color: var(--acc-text); font: inherit; letter-spacing: inherit;
}

/* Lock (dark) */
.lock .mac { margin-top: 72px; }
.feat3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 88px; }
@media (max-width: 1068px) { .feat3 { grid-template-columns: repeat(2, 1fr); gap: 48px 64px; } }
.feat3 svg { width: 44px; height: 44px; margin-bottom: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--acc-light); }
.feat3__icon { width: 48px; height: 48px; margin-bottom: 14px; object-fit: contain; display: block; }
.feat3 h3 { margin: 0 0 6px; font: 600 21px/1.19048 var(--font-display); letter-spacing: .011em; color: var(--ink-dark); }
.feat3 p { margin: 0; color: #86868b; }
@media (max-width: 734px) { .feat3 { grid-template-columns: 1fr; gap: 36px; margin-top: 56px; } }

/* Two cards side by side (files, weather) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 64px; }
.fcard { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 540px; border-radius: var(--r-card); background: var(--c-bg); color: var(--c-ink); }
.fcard__copy { position: relative; z-index: 1; padding: 36px 36px 0; }
.fcard h3, .wcard h3 { font: 600 28px/1.14286 var(--font-display); letter-spacing: .007em; }
.fcard p, .wcard p { max-width: 440px; margin: 10px 0 0; color: var(--c-ink2); font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
.fcard__media { flex: 1; display: grid; place-items: center; padding: 28px 28px 44px; }
.fcard__media > img { width: min(520px, 100%); height: auto; }
.fcard__media--stack { align-content: center; gap: 36px; }
.fcard__media > .fcard__subcap { width: min(440px, 84.6%); }   /* the timer apart from the Pomodoro, at the same scale (1432 / 1692 px) */
.fcard--air .fcard__media { padding: 28px 28px 32px; }
.fcard--air video { width: min(100%, 560px); height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-radius: 20px; background: #141a2e; }
.fcard__media--art { gap: 28px; align-content: center; }
@media (max-width: 834px) { .duo { grid-template-columns: 1fr; } .fcard { min-height: 460px; } .fcard--air { min-height: 520px; } }
@media (max-width: 734px) { .duo { margin-top: 48px; } .fcard__copy { padding: 28px 28px 0; } .fcard h3, .wcard h3 { font-size: 24px; line-height: 1.16667; letter-spacing: .009em; } .fcard p, .wcard p { font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; } }

/* Weather + Pomodoro drawings */
.wx { display: flex; align-items: center; gap: 18px; }
.wx svg { width: 150px; height: 120px; overflow: visible; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wx__sun { stroke: var(--c-mid); } .wx__sun circle { fill: var(--c-mid); }
.wx__cloud { fill: var(--c-ink); stroke: var(--c-ink); }
.wx__t { font: 600 96px/1.04167 var(--font-display); letter-spacing: -.015em; }
.wx__hours { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wx__hours li { display: grid; gap: 4px; justify-items: center; min-width: 62px; padding: 10px 0 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; }
.wx__hours span { color: var(--c-mid); }
.wx__hours b { font: 600 19px/1.21053 var(--font-display); letter-spacing: .012em; }
.pomo { position: relative; display: grid; place-items: center; width: 240px; height: 240px; }
.pomo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 12; stroke-linecap: round; }
.pomo__bg { stroke: #e8e8ed; }
.pomo__fg { stroke: var(--c-mid); stroke-dasharray: 414.7; stroke-dashoffset: 120; }
.pomo span { font: 600 56px/1.07143 var(--font-display); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
@media (max-width: 734px) { .wx svg { width: 110px; height: 88px; } .wx__t { font-size: 72px; line-height: 1.05556; letter-spacing: -.003em; } .wx__hours { gap: 6px; } .wx__hours li { min-width: 46px; } .pomo { width: 200px; height: 200px; } .pomo span { font-size: 48px; line-height: 1.08349; letter-spacing: -.003em; } }

/* Notes grid */
.ngrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.ncard {
  position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 300px;
  padding: 30px 30px 32px; border-radius: var(--r-card); background: var(--c-bg); color: var(--c-ink);
}
.ncard h3 { font: 600 21px/1.19048 var(--font-display); letter-spacing: .011em; }
.ncard p { margin: 8px 0 0; color: var(--c-ink2); font-size: 17px; line-height: 1.47059; letter-spacing: -.022em; }
.ncard code { font: 500 .88em/1 ui-monospace, "SF Mono", Menlo, monospace; }
.ncard__demo { margin-top: auto; padding-top: 22px; }
.ncard__demo--shot { display: grid; place-items: center; padding-top: 18px; }
.ncard__shot { width: 100%; height: auto; border-radius: 14px; }
.ncard--big { grid-column: span 2; grid-row: span 2; min-height: 620px; justify-content: space-between; gap: 28px; }
.ncard--big h3 { font-size: 28px; line-height: 1.14286; letter-spacing: .007em; }
.ncard--big p { max-width: 520px; font-size: 19px; line-height: 1.4211; letter-spacing: .012em; }
.ncard--big .keys { align-self: center; margin-block: auto; }
.ncard__hero-shot { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-block: auto; }
.ncard__notch-img { width: min(560px, 100%); height: auto; }
.sheetlet {
  padding: 14px 16px 15px; border-radius: 14px; background: #fff; color: var(--ink);
  font-size: 14px; line-height: 1.42859; letter-spacing: -.016em; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .5);
}
.sheetlet p { color: inherit; font-size: inherit; }
.sheetlet .md-h { margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.sheetlet ul { margin: 0; padding-left: 18px; }
.sheetlet .md-q { margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--acc); color: var(--ink-3); }
.math { display: flex; flex-direction: column; gap: 8px; }
.math code { color: var(--ink-3); font-size: 13px; }
.math__out { font: italic 400 26px/1.1 "Iowan Old Style", "Times New Roman", serif; letter-spacing: 0; }
.math__out sup { font-size: .6em; }
.photos { position: relative; height: 120px; }
.ph { position: absolute; bottom: 0; width: 52%; aspect-ratio: 4 / 3; border-radius: 12px; border: 4px solid #fff; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); }
.ph--a { left: 4%; transform: rotate(-5deg); background: #c9b8c4 url(../media/wall-clouds.webp) center / cover; }  /* "Cumbre — mar de nubes" */
.ph--b { right: 4%; transform: rotate(6deg); background: #1c2233 url(../media/wall-night.webp) center / cover; }  /* the same peaks at night: "Cumbre — noche" */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .07); font-size: 14px; line-height: 1.28577; letter-spacing: -.016em; color: var(--c-ink); }
.chips .on { background: var(--c-mid); color: #fff; font-weight: 600; }
.folder { display: flex; align-items: center; gap: 14px; }
.folder svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.folder__apple-lock { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.folder span { display: grid; font: 600 17px/1.23536 var(--font-text); letter-spacing: -.022em; }
.folder small { font: 400 14px/1.28577 var(--font-text); letter-spacing: -.016em; color: var(--c-ink2); }
@media (max-width: 1068px) {
  .ngrid { grid-template-columns: repeat(2, 1fr); }
  .ncard--big { grid-row: auto; min-height: 480px; }
}
@media (max-width: 734px) {
  .ngrid { grid-template-columns: 1fr; margin-top: 48px; }
  .ncard--big { grid-column: auto; min-height: 0; }
  .ncard--big .keys { margin: 8px 0 20px; }
  .ncard { min-height: 0; }
}

/* Battery */
.stackcards { display: grid; gap: 20px; margin-top: 64px; }
.wcard { overflow: hidden; padding: 40px; border-radius: var(--r-card); background: var(--c-bg); color: var(--c-ink); }
.apsel { margin-top: 36px; }   /* one pair at a time; Apple's own chapter-nav icons below pick which */
.apsel__stage { position: relative; max-width: 760px; margin-inline: auto; }
.apsel__ghost { position: absolute; inset: 0; pointer-events: none; transition: opacity .55s cubic-bezier(.4, 0, .2, 1), transform .55s cubic-bezier(.4, 0, .2, 1); }   /* the outgoing pair fades over the incoming one */
.apsel__ghost.is-out { opacity: 0; transform: scale(.985); }
.apsel__row { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.apsel__btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px; padding: 12px 6px 10px; border: 0; border-radius: 22px; background: transparent; color: var(--c-ink2); font: 600 12px/1.33337 var(--font-text); letter-spacing: -.01em; cursor: pointer; transition: background-color .25s, color .25s; }
.apsel__ic { display: flex; align-items: flex-end; justify-content: center; height: 56px; }   /* Apple's icons sit on one baseline at their own size */
.apsel__ic img { display: block; transition: transform .35s var(--ease-card, ease); }
.apsel__btn[aria-selected="true"] { background: rgba(255, 255, 255, .72); color: var(--c-ink); }
@media (hover: hover) { .apsel__btn:hover img { transform: scale(1.06); } }
.apsel__btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.wcard--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: center; }
@media (max-width: 834px) { .wcard--row { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 734px) { .stackcards { margin-top: 48px; } .wcard { padding: 28px 22px 34px; } }
@media (max-width: 734px) { .apsel__row { gap: 2px; } .apsel__btn { width: 76px; padding-inline: 2px; font-size: 11px; } .apsel__ic { zoom: .86; } }

/* "And also" shelf */
.more .shelf__header { margin-bottom: 24px; }
.mcard { --card-bg: var(--c-bg); --card-ink: var(--c-ink); box-shadow: none; }
.mcard .card__copy { color: var(--c-ink2); }
.mcard__media { margin-block: auto; }
.mcard__media--glyph { margin-block: auto 8px; display: flex; align-items: center; }
.mcard__media--glyph svg { width: 120px; height: 120px; fill: none; stroke: var(--c-mid); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mcard__apple-icon { width: 96px; height: 96px; object-fit: contain; display: block; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .35)); }
.mcard__notch { width: 100%; height: auto; border-radius: 14px; }
.card--feature.mcard--duo { width: 640px; }   /* two states of one feature: a wider card, both shown as a collage */
.mcard__duo { display: grid; }
.mcard__duo > img { grid-area: 1 / 1; width: 62%; align-self: start; }   /* the captures carry their own baked shadow: no box-shadow (it would draw a rectangle) */
.mcard__duo > img:first-child { justify-self: start; }
.mcard__duo > img + img { justify-self: end; margin-top: 16%; }
@media (max-width: 734px) { .mcard__duo > img { width: 76%; } .mcard__duo > img + img { margin-top: 34%; } }
.mini.mini--pill img { width: 66%; }   /* beats .mini img below */
.mini.mini--wide img { width: 100%; }   /* a pill that carries a name (Reduce Interruptions) spans the screen */
.mcard__clip { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .45); }
.mini { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 7px solid #0a0a0b; border-radius: 14px; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6); }
.mini img { position: absolute; left: 50%; top: 0; width: 52%; height: auto; transform: translateX(-50%); }
@media (max-width: 734px) { .card--feature.mcard { width: 309px; } }

/* Performance */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: calc(var(--viewport-content) * 10 / 12); max-width: calc(980px * 10 / 12); margin-top: 64px; }
.stat { padding: 44px 40px 40px; border-radius: var(--r-card); background: var(--c-bg, var(--white)); color: var(--c-ink, var(--ink)); text-align: center; }
.stat__n { margin: 0; font: 600 96px/1.04167 var(--font-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.stat__l { margin: 10px 0 0; font: 600 21px/1.19048 var(--font-display); letter-spacing: .011em; color: var(--c-ink2, var(--ink-3)); }
.perf__note { max-width: 660px; margin-top: 28px; text-align: center; font-size: 12px; line-height: 1.33337; color: var(--ink-3); letter-spacing: -.01em; }
@media (max-width: 734px) { .stats { grid-template-columns: 1fr; width: var(--viewport-content); max-width: none; margin-top: 48px; } .stat__n { font-size: 72px; line-height: 1.05556; letter-spacing: -.003em; } }

/* ---------- Price + community ---------- */
.pgrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; width: calc(var(--viewport-content) * 10 / 12); max-width: calc(980px * 10 / 12); margin-top: 64px; }
.pgrid--even { grid-template-columns: 1fr 1fr; }
.pcard { display: flex; flex-direction: column; padding: 36px 36px 40px; border-radius: var(--r-card); background: var(--c-bg, var(--canvas)); color: var(--c-ink, var(--ink)); }
.pcard__kicker { margin: 0; font: 600 17px/1.23536 var(--font-text); letter-spacing: -.022em; color: var(--c-ink2, var(--ink-3)); }
.pcard__price { margin: 6px 0 0; font: 600 56px/1.07143 var(--font-display); letter-spacing: -.005em; }
.pcard__title { margin: 6px 0 0; font: 600 32px/1.125 var(--font-display); letter-spacing: .004em; }
.pcard__note { margin: 8px 0 0; color: var(--c-ink2, var(--ink-3)); }
.pcard__list { display: grid; gap: 10px; margin: 24px 0 32px; padding: 0; list-style: none; }
.pcard__list li { position: relative; padding-left: 28px; }
.pcard__list li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pcard__btn { align-self: flex-start; margin-top: auto; }
.pcard__note + .pcard__btn { margin-top: 28px; }
.price__req { margin: 32px 0 0; text-align: center; font-size: 14px; line-height: 1.42859; color: var(--ink-3); letter-spacing: -.016em; }
@media (max-width: 734px) { .pgrid, .pgrid--even { grid-template-columns: 1fr; width: var(--viewport-content); max-width: none; margin-top: 48px; } .pcard { padding: 28px 28px 32px; } .pcard__price { font-size: 48px; line-height: 1.08349; letter-spacing: -.003em; } }

/* ---------- FAQ ---------- */
.faq__list { margin-top: 48px; border-bottom: 1px solid var(--hairline); }
.faq details { border-top: 1px solid var(--hairline); }
.faq summary { position: relative; padding: 22px 44px 22px 0; cursor: pointer; list-style: none; font: 600 24px/1.16667 var(--font-display); letter-spacing: .009em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 720px; margin: 0; padding: 0 0 26px; color: var(--ink-3); }
@media (max-width: 734px) { .faq summary { font-size: 19px; line-height: 1.21053; letter-spacing: .012em; } }

/* ---------- Footer ---------- */
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px 0 24px; }
.footer__bar p { margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Static capture mode (?shot): everything visible, no transitions ---------- */
.shot [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.shot { scroll-behavior: auto; }

/* Lid fully open: flatten the 3D stack so the hero is one plain composited layer while scrolling */
.mac--hero3d.is-open { perspective: none; }
.mac--hero3d.is-open .mac__lid3d { transform: none; transform-style: flat; will-change: auto; }
.mac--hero3d.is-open .mac__lid-front { filter: none; }
.mac--hero3d.is-open .mac__glare, .mac--hero3d.is-open .mac__lid-back { display: none; }

/* ?perf= A/B switches (see site.js) */
.p-noreveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; }
.p-noblur .gnav, .p-noblur .dotnav, .p-noblur .playpause { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #f5f5f7 !important; }
.p-noshadow * { box-shadow: none !important; filter: none !important; }

/* Key words: blue in the big headlines, bold (in the card's own ink) in the small copy */
.hl { color: var(--acc); }
.theme-dark .hl { color: var(--acc-light); }
.fcard p strong, .wcard p strong, .ncard p strong, .card__copy strong, .chapter__head p strong { font-weight: 600; color: var(--c-ink, inherit); }
.feat3 p strong { font-weight: 600; color: var(--ink-dark); }
.theme-dark .chapter__head p strong { color: #f5f5f7; }

/* Liquid Glass: real glass captures over the Cumbre wallpapers, as a collage */
.lg__grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 18px; margin-top: 72px; }
.lg__tile { position: relative; overflow: hidden; margin: 0; border-radius: 28px; background: #141a2e; }
.lg__tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.lg__tile--tall { grid-row: span 2; }
.lg__tile:not(.lg__tile--tall) { aspect-ratio: 1.4; }
.lg__tile figcaption { position: absolute; left: 20px; bottom: 16px; padding: 6px 12px; border-radius: 999px; font: 600 13px/1.2 var(--font-text); letter-spacing: -.01em; color: #fff;
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); }
@media (max-width: 1068px) { .lg__grid { grid-template-columns: 1fr 1fr; } .lg__tile--tall { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; } }
@media (max-width: 734px) { .lg__grid { gap: 10px; margin-top: 48px; } .lg__tile { border-radius: 18px; } .lg__tile--tall { aspect-ratio: 4 / 3; } .lg__tile figcaption { left: 10px; bottom: 10px; padding: 4px 9px; font-size: 11px; } }
.lg__tile.lg__tile--pano { grid-column: 1 / -1; aspect-ratio: 2.9; }   /* the tray as a panorama row: the glass over the whole night ridge */
@media (max-width: 734px) { .lg__tile.lg__tile--pano { aspect-ratio: 2; } }

/* Reminders: the feature row on a light section */
.theme-light .feat3 h3 { color: var(--ink); }
.theme-light .feat3 p { color: var(--ink-2, #6e6e73); }
.theme-light .feat3 p strong { color: var(--ink); }
.rem .stackcards { margin-top: 20px; }
.rem .wcard__media { display: grid; place-items: center; }
.rem .wcard__media img { width: min(520px, 100%); height: auto; }   /* same scale as the two cards above */

/* Face ID: the real scan hangs from the top of a lock screen; the wallpaper it was recorded over continues around it
   (the take's plate fills 1470 pt with the 1920×1200 image: 1529.6 pt wide, so the image is 1529.6/600 = 2.549 × the clip's width) */
.fid__stage { position: relative; max-width: 980px; margin: 72px auto 0; aspect-ratio: 980 / 420; overflow: hidden; border-radius: 32px;
  background: #121731 url(../media/wall-night.webp) 50% 0 / 158.07% auto no-repeat; }
.fid__clip { display: block; width: 62%; height: auto; margin: 0 auto;
  /* edges feathered into the stage: Safari colour-manages video a touch lighter than the CSS wallpaper, and a hard box showed */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(#000 45%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(#000 45%, transparent);
  mask-composite: intersect; }
.fid__steps { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; justify-content: center; gap: clamp(18px, 5vw, 56px); margin: 0; padding: 0 16px; list-style: none; counter-reset: s; }
.fid__steps li { display: flex; align-items: center; gap: 10px; font: 600 17px/1.235 var(--font-text); letter-spacing: -.022em; color: rgba(255, 255, 255, .36); transition: color .5s var(--ease); }
.fid__steps li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; background: rgba(255, 255, 255, .1); transition: background-color .5s var(--ease), color .5s var(--ease); }
.fid__steps li.is-on { color: #fff; }
.fid__steps li.is-on::before { background: #fff; color: #121731; }
@media (max-width: 734px) {
  .fid__stage { aspect-ratio: auto; margin-top: 48px; padding-bottom: 104px; border-radius: 24px; background-size: 254.9% auto; }
  .fid__clip { width: 100%; }
  .fid__steps { bottom: 26px; gap: 12px; }
  .fid__steps li { flex-direction: column; gap: 8px; font-size: 14px; text-align: center; }
}
.feat3--six { grid-template-columns: repeat(3, 1fr); gap: 56px 48px; }
@media (max-width: 1068px) { .feat3--six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 734px) { .feat3--six { grid-template-columns: 1fr; gap: 36px; } }
.clipcard .wcard__media { display: grid; place-items: center; }
.clipcard .wcard__media img { width: min(560px, 100%); height: auto; }

/* ---------- Arrival, Apple-style (transform + opacity only: compositor work) ---------- */
/* Hero, on load: the icon settles, then the headline, the copy, the buttons and the fine print rise in turn */
@keyframes hero-in { from { opacity: 0; transform: translateY(28px); } }
@keyframes icon-in { from { opacity: 0; transform: translateY(10px) scale(.84); } }
.js .hero__icon { animation: icon-in 1.1s cubic-bezier(.2, .8, .2, 1) .05s both; }
.js .hero__copy > :not(.hero__icon) { animation: hero-in 1.05s cubic-bezier(.2, .8, .2, 1) .2s both; }
.js .hero__copy > :nth-child(3) { animation-delay: .32s; }
.js .hero__copy > :nth-child(4) { animation-delay: .44s; }
.js .hero__copy > :nth-child(5) { animation-delay: .54s; }
/* Chapter heads: eyebrow, headline and copy each arrive on their own, so they cascade as the page comes up */
.reveal-sd .chapter__head[data-reveal] { animation: none; }
.reveal-sd .chapter__head[data-reveal] > * { --reveal-y: 40px; animation: reveal-sd cubic-bezier(.2, .7, .25, 1) both; animation-timeline: view(); animation-range: entry 0px entry 340px; }
.js:not(.reveal-sd) .chapter__head[data-reveal] { opacity: 1; transform: none; transition: none; }
.js:not(.reveal-sd) .chapter__head[data-reveal] > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js:not(.reveal-sd) .chapter__head[data-reveal].is-in > * { opacity: 1; transform: none; }
.js:not(.reveal-sd) .chapter__head[data-reveal].is-in > :nth-child(2) { transition-delay: .1s; }
.js:not(.reveal-sd) .chapter__head[data-reveal].is-in > :nth-child(3) { transition-delay: .2s; }
/* Rises ease out with the scroll; side-by-side cards start a little apart */
.reveal-sd [data-reveal] { animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
.reveal-sd [data-stagger] > [data-reveal] { animation-range: entry calc(24px + var(--i, 0) * 44px) entry calc(380px + var(--i, 0) * 44px); }
/* Big media: a slight zoom up into place */
@keyframes reveal-zoom { from { opacity: 0; transform: translateY(36px) scale(.93); } to { opacity: 1; transform: none; } }
.reveal-sd [data-reveal="zoom"], .reveal-sd [data-stagger] > [data-reveal="zoom"] { animation-name: reveal-zoom; animation-range: entry calc(var(--i, 0) * 48px) entry calc(560px + var(--i, 0) * 48px); }
.js:not(.reveal-sd) [data-reveal="zoom"] { transform: translateY(24px) scale(.95); transition-duration: 1.1s; }
.js:not(.reveal-sd) [data-reveal="zoom"].is-in { transform: none; }
.shot .hero__icon, .shot .hero__copy > *, .shot .chapter__head > * { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__icon, .js .hero__copy > * { animation: none; }
  .reveal-sd .chapter__head[data-reveal] > *, .js .chapter__head[data-reveal] > * { animation: none; transform: none; transition: opacity .2s linear; }
  .js [data-reveal="zoom"] { transform: none; }
}

/* Blocks holding a video reveal on a timer even where the rest follows the scroll (motion.js adds .rv-t): Safari 27 hides and pauses a
   video under a scroll-driven animation */
html.reveal-sd [data-reveal].rv-t { animation: none; 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); }
html.reveal-sd [data-reveal="zoom"].rv-t { transform: translateY(24px) scale(.95); transition-duration: 1.1s; }
html.reveal-sd [data-reveal].rv-t.is-in { opacity: 1; transform: none; }
.shot [data-reveal].rv-t, .p-noreveal [data-reveal].rv-t { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { html.reveal-sd [data-reveal].rv-t { transform: none; transition: opacity .2s linear; } }

/* Clip stills painted as the video's own background (site.js dress): never an empty box while a clip loads, stalls or cannot play */
video[data-clip] { background-repeat: no-repeat; background-position: center; background-size: contain; }
.mac__fill, .hcard--air .hcard__media > video, .fcard--air video { background-size: cover; }
.hcard--air .hcard__media > video { background-position: 50% 0; }
video[data-clip][data-alpha].is-live { background-image: none !important; }