/* ---------- Tokens ---------- */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --black: #000;
  --white: #fff;
  --grey-bg: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-dark: #f5f5f7;
  --ink-dark-2: #86868b;
  --hairline: #d2d2d7;
  --blue: #0071e3;
  /* Text links: #0071e3 is 4.3:1 on --grey-bg, under the 4.5:1 small text needs. */
  --link: #0066cc;
  --blue-dark: #2997ff;
  --glance: #ef852e;
  --radius: 28px;
  --wrap: 980px;
  --wide: 1240px;
  --nav-h: 48px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 17px/1.47 var(--font);
  letter-spacing: -.022em;
  color: var(--ink);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 3px; border-radius: 4px; }
.light :focus-visible { outline-color: var(--blue); }

.skip {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  z-index: 100; padding: 10px 18px; border-radius: 980px;
  background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600;
}
.skip:focus { transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(var(--wrap), calc(100% - 44px)); margin: 0 auto; }
.wrap.narrow { max-width: 640px; }
.wrap.wide { width: min(var(--wide), calc(100% - 44px)); }

.light { background: var(--grey-bg); color: var(--ink); }
.dark  { background: var(--black); color: var(--ink-dark); }
.light .eyebrow, .light .lede, .light .fine { color: var(--ink-2); }
.dark  .eyebrow, .dark  .lede, .dark  .fine { color: var(--ink-dark-2); }

.eyebrow { font-size: 21px; font-weight: 600; letter-spacing: .007em; margin-bottom: 8px; }
h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.12; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.lede { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.33; max-width: 34em; }
.fine { font-size: 13px; line-height: 1.45; }
.fine a { color: inherit; text-decoration: underline; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

section { padding: clamp(90px, 12vw, 150px) 0; }

/* Apple's section head: the headline on the left, the copy on the right, bottoms aligned. */
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.two-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.section-head.two-col .lede { max-width: none; }
.section-head:not(.two-col) > .lede { margin-top: 20px; }
.section-head h2, .section-head h1 { text-wrap: balance; }
/* A two-sentence headline balances each sentence on its own. */
.section-head h2 > span { display: block; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 100ms);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 980px;
  font: inherit;
  line-height: 1.2;
  border: 0;
  cursor: pointer;
  transition: background .22s var(--ease), transform .22s var(--ease), opacity .22s;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: #0077ed; transform: scale(1.02); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .55; cursor: default; transform: none; }
.btn-ghost { color: var(--blue-dark); padding-left: 0; padding-right: 0; background: none; }
.light .btn-ghost { color: var(--link); }
.btn-ghost:hover { text-decoration: underline; }
.btn-block { display: block; width: 100%; text-align: center; }

.pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  background: rgba(255, 255, 255, .12);
  color: var(--ink-dark);
}
.pill-accent { background: rgba(41, 151, 255, .18); color: var(--blue-dark); }

/* ---------- Nav (Apple's local nav: name left, links and a small Buy pill right) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
  color: var(--ink-dark);
  font-size: 14px;
}
body.light .nav { background: rgba(0, 0, 0, .92); }
.nav-brand { display: flex; align-items: center; gap: 7px; font-weight: 600; letter-spacing: -.01em; }
.logo { width: 27px; height: 9px; fill: currentColor; }
.logo .dot { fill: var(--glance); }
.wordmark > span { color: var(--ink-2); }
.dark .wordmark > span, .nav .wordmark > span { color: var(--ink-dark-2); }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-link { color: var(--ink-dark-2); display: inline-flex; align-items: center; height: 100%; }
.nav-link:hover { color: var(--ink-dark); }
.nav-cta { background: var(--blue); color: var(--white); font-size: 13px; font-weight: 500; padding: 8px 15px; border-radius: 980px; }
.nav-cta:hover { background: #0077ed; }

/* ---------- The whole MacBook, with a capture composited onto the real desktop at the notch ----------
   The render's screen is a transparent window at left 10.909%, top 11.48%, width 78.182%, height
   77.04%. Behind it sits the desktop capture; each clip is the middle half of the top 300pt of that
   same desktop (x 378..1134pt of 1512), so it lands at left 25%, width 50% and lines up with the menu
   bar underneath. The frame paints on top, so its own notch covers the fold the way the glass does. */
.mac-full { position: relative; margin: 0; width: 100%; aspect-ratio: 1800 / 1184; }
.mac-full > .frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .55)); }
.mac-full > .display {
  position: absolute; left: 10.909%; top: 11.48%; width: 78.182%; height: 77.04%;
  background: #05060f url(img/desktop.webp) center / cover no-repeat;
  overflow: hidden;
}
.mac-full .shot { position: absolute; left: 25%; top: 0; width: 50%; height: auto; display: block; aspect-ratio: 1512 / 600;
  /* The wallpaper is animated, so a clip never matches the still desktop behind it exactly. Its sides
     and foot fade into the desktop instead of ending on a hard edge; the left fade also hides the tail
     of the Help menu the capture carries. Every fold panel sits inside the solid middle. */
  -webkit-mask-image: linear-gradient(to right, transparent 1.3%, #000 10%, #000 90%, transparent),
                      linear-gradient(to bottom, #000 68%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 1.3%, #000 10%, #000 90%, transparent),
              linear-gradient(to bottom, #000 68%, transparent);
  mask-composite: intersect; }
/* The push-in: the machine starts small, whole and floating, then grows to its full width. It never
   scales past 1, so the left and right bezels are never cropped; the frame around it cuts the chin.
   The origin is the notch, so the notch holds still while everything grows around it. main.js adds
   .is-zoomed when the figure scrolls into view and starts the clip when the push settles. */
.mac-full[data-zoom] {
  transform-origin: 50% 11.48%;
  transform: translateY(var(--from-shift, 0%)) scale(var(--from, .86));
  transition: transform 2.4s cubic-bezier(.3, .6, .15, 1);
}
.mac-full.is-zoomed { transform: translateY(var(--shift, 0%)) scale(var(--zoom, 1)); }

/* ---------- Hero: the product, then the words ---------- */
/* The hero owns the first screen: the machine is bounded by what is left after the copy row, so the
   headline and the button are on screen at every size without scrolling. */
.hero {
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(18px, 2.2svh, 34px);
  padding: clamp(12px, 1.6svh, 24px) 0 clamp(18px, 2.4svh, 34px);
  background: radial-gradient(56% 34% at 50% 0%, rgba(96, 116, 255, .22), transparent 72%), var(--black);
}
.stage {
  position: relative; margin: 0 auto; overflow: hidden; border-radius: 28px;
  aspect-ratio: 1800 / 1002;
  width: min(1600px, calc(100% - 40px), calc((100svh - 248px) * 1.796));
}
/* The machine fades into the section instead of ending on a hard edge. */
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75) 62%, #000);
  pointer-events: none;
}
/* The push-in ends at 1.5x, so the machine is magnified past the frame and its sides bleed off. */
.stage .mac-full { position: absolute; top: 0; left: 0; --from: .86; --from-shift: 4%; }
/* Apple's hero foot: the headline hard left, the call to action hard right, both on the page gutter. */
.hero-copy {
  align-self: stretch;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 0 clamp(20px, 3.4vw, 48px);
}
.hero-copy h1 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -.025em; font-weight: 600; }
.hero-cta { flex: none; text-align: right; }
.hero-cta .btn { padding: 13px 28px; font-size: 17px; }
.hero-sub { margin-top: 9px; font-size: 12px; letter-spacing: -.01em; color: var(--ink-dark-2); }

/* ---------- Closer look: Apple's product viewer. One big black card, a column of pills on the left,
   the machine zoomed on the notch bleeding off the right. Picking a pill swaps it for its caption.
   Radio inputs and :has(), no script. ---------------------------------------------------------- */
.closer { background: #161617; color: var(--ink-dark); }
.closer > .wrap > h2 { margin-bottom: clamp(28px, 4vw, 56px); }
.look { width: min(1560px, calc(100% - 44px)); margin: 0 auto; }
.look input { position: absolute; opacity: 0; pointer-events: none; }

.look-card {
  position: relative; overflow: hidden;
  background: radial-gradient(70% 90% at 82% 50%, #15132c, transparent 70%), #000;
  border-radius: 28px;
  display: grid; grid-template-columns: minmax(300px, 32%) 1fr; align-items: stretch;
  height: min(76vh, 760px);
}
.picks { position: relative; z-index: 2; align-self: center; display: grid; justify-items: start; gap: 12px; min-width: 0; padding: 40px clamp(20px, 3vw, 48px); }

/* One container per row. Choosing a row grows that same box to the right and down; the label fades
   out as it goes and the caption fades in as it lands. Both axes are animated in pixels with one
   curve and one duration, so the box moves as a single object. main.js measures the four numbers. */
.pick {
  --curve: cubic-bezier(.32, .72, 0, 1);
  display: grid; overflow: hidden;
  width: var(--w, max-content); height: var(--h, auto); max-width: 100%;
  background: rgba(48, 48, 51, .82);
  border-radius: 980px; cursor: pointer; color: var(--ink-dark);
  transition: width .52s var(--curve), height .52s var(--curve), border-radius .52s var(--curve), background .25s var(--ease);
}
.pick:hover { background: rgba(70, 70, 74, .9); }
/* The two states share one cell, so the box grows from its own top left corner. */
.pick > * { grid-area: 1 / 1; align-self: start; }
.pill-inner {
  display: flex; align-items: center; gap: 14px; padding: 11px 26px 11px 11px;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  transition: opacity .18s linear;
}
/* The badge is a plus drawn from two bars. */
.pill-inner i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); transition: box-shadow .25s var(--ease), transform .35s var(--ease); }
.pick:hover .pill-inner i { transform: rotate(90deg); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
.pill-inner i::before, .pill-inner i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; margin: -.75px 0 0 -6.5px; background: var(--ink-dark); }
.pill-inner i::after { transform: rotate(90deg); }
.cap-inner {
  width: var(--wo, 440px); max-width: 100%; padding: 22px 26px;
  font-size: 17px; line-height: 1.45; color: var(--ink-dark-2);
  opacity: 0; transition: opacity .28s var(--ease);
}
.cap-inner b { color: var(--ink-dark); font-weight: 600; }

.look:has(#look-clip:checked) .pick-clip,
.look:has(#look-meet:checked) .pick-meet,
.look:has(#look-live:checked) .pick-live,
.look:has(#look-play:checked) .pick-play {
  width: var(--wo, 440px); height: var(--ho, auto); border-radius: 22px; background: rgba(48, 48, 51, .82);
}
.look:has(#look-clip:checked) .pick-clip .pill-inner,
.look:has(#look-meet:checked) .pick-meet .pill-inner,
.look:has(#look-live:checked) .pick-live .pill-inner,
.look:has(#look-play:checked) .pick-play .pill-inner { opacity: 0; }
.look:has(#look-clip:checked) .pick-clip .cap-inner,
.look:has(#look-meet:checked) .pick-meet .cap-inner,
.look:has(#look-live:checked) .pick-live .cap-inner,
.look:has(#look-play:checked) .pick-play .cap-inner { opacity: 1; transition-delay: .24s; }

.viewer { position: relative; height: 100%; overflow: hidden; }
.panel { display: none; }
.look:has(#look-meet:checked) .panel-meet,
.look:has(#look-clip:checked) .panel-clip,
.look:has(#look-play:checked) .panel-play,
.look:has(#look-live:checked) .panel-live { display: block; animation: panelIn .65s var(--ease) both; }
/* The machine and its glow settle in when the tab changes, the way Apple's viewer swaps shots. */
@keyframes panelIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
/* The machine is drawn large and the card clips it, so the notch fills the frame and the bezel runs
   off the right edge, the way Apple's Camera tab crops. Percentages in translate are of the element's
   own height, so -11.48% lands the notch line exactly on the card's middle. */
/* Each tab carries its own glow behind the machine. */
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 70% at 46% 46%, var(--glow, rgba(96, 116, 255, .3)), transparent 70%);
}
.panel-clip { --glow: rgba(96, 116, 255, .32); }
.panel-meet { --glow: rgba(239, 133, 46, .26); }
.panel-live { --glow: rgba(48, 209, 88, .22); }
.panel-play { --glow: rgba(180, 92, 255, .3); }
.panel .mac-full { position: absolute; top: 9%; left: 0; width: 122%; }
.panel .mac-full > .frame { filter: none; }

.closer-fine { margin-top: 28px; color: var(--ink-dark-2); max-width: 62ch; }

/* ---------- Tiles and chips ---------- */
.tiles-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tiles-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile { border-radius: var(--radius); padding: clamp(28px, 3.5vw, 40px); background: var(--white); }
.dark .tile { background: #1d1d1f; }
.tile h3 { font-size: 24px; margin-bottom: 12px; }
.tile p { color: var(--ink-2); }
.dark .tile p { color: var(--ink-dark-2); }
.tile a { color: var(--link); }
.dark .tile a { color: var(--blue-dark); }

.feature {
  border-radius: var(--radius); padding: clamp(28px, 3.5vw, 44px);
  background: var(--white); display: flex; flex-direction: column; gap: 14px; min-height: 520px;
}
.feature h3 { font-size: clamp(26px, 2.8vw, 34px); }
.feature p { color: var(--ink-2); }
.chips { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px; border-radius: 980px;
  background: var(--grey-bg); color: var(--ink); font-size: 15px; font-weight: 500;
}
/* App icons: the apps' own artwork in img/apps (Webex is still a Simple Icons glyph on its brand
   colour). Nominative use for a "works with" list. */
.chips svg { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.chips img { width: 26px; height: 26px; flex: none; object-fit: contain; }
/* These two come without a tile of their own; the rest carry their shape in the artwork. */
.chips img[src$="calendar.png"], .chips img[src$="airpods.png"] { border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.chips img[src$="calendar.png"] { background: #fff; }

/* A Liquid Glass fold, drawn in CSS: the wallpaper behind, a notch, a translucent shell with a
   highlight edge, and the shapes of a now-playing row inside it. */
.glass-demo {
  position: relative; margin-top: auto; height: 240px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(70% 80% at 30% 100%, #4b2cc7 0%, transparent 60%), radial-gradient(60% 50% at 90% 20%, #ff6a3d 0%, transparent 55%), radial-gradient(80% 70% at 50% 40%, #1d3fd1, #06061a 70%);
}
.glass-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; background: #000; border-radius: 0 0 10px 10px; z-index: 2; }
.glass-fold {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 74%; height: 112px;
  display: flex; align-items: center; gap: 16px; padding: 30px 22px 0;
  border-radius: 0 0 34px 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .14)),
    radial-gradient(120% 60% at 50% 120%, rgba(255, 255, 255, .28), transparent 60%);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(1.1); backdrop-filter: blur(22px) saturate(200%) brightness(1.1);
  box-shadow:
    inset 0 -1.5px 0 rgba(255, 255, 255, .7), inset 1.5px 0 0 rgba(255, 255, 255, .35), inset -1.5px 0 0 rgba(255, 255, 255, .35),
    inset 0 -12px 24px rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .5);
}
.glass-fold::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 10px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); }
.glass-art { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, #6f7bff, #b45cff); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); flex: none; }
.glass-lines { flex: 1; display: grid; gap: 9px; }
.glass-lines i { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .85); }
.glass-lines i + i { width: 55%; background: rgba(255, 255, 255, .5); }
.glass-meter { display: flex; align-items: flex-end; gap: 4px; height: 26px; flex: none; }
.glass-meter i { display: block; width: 4px; border-radius: 2px; background: var(--glance); animation: meter 1.1s ease-in-out infinite alternate; }
.glass-meter i:nth-child(1) { height: 40%; animation-delay: -.2s; } .glass-meter i:nth-child(2) { height: 90%; animation-delay: -.6s; }
.glass-meter i:nth-child(3) { height: 60%; animation-delay: -.4s; } .glass-meter i:nth-child(4) { height: 100%; }
@keyframes meter { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* ---------- Privacy: a grid of small feature tiles with glyphs ---------- */
.privacy { text-align: center; }
.privacy .wrap.narrow { max-width: 760px; }
.privacy .lock { width: 52px; height: 52px; color: var(--ink-dark); fill: none; margin: 0 auto 26px; display: block; }
.privacy .lede { margin: 22px auto 26px; max-width: none; }

/* ---------- Compare (compare.html only; not linked from the site) ---------- */
.compare-page { padding: clamp(60px, 8vw, 110px) 0; }
.compare-page h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-weight: 600; letter-spacing: -.02em; }
.table-hint { display: none; text-align: center; margin: -24px auto 14px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: var(--white); min-width: 640px; }
thead th { font-size: 19px; font-weight: 600; padding: 22px 18px; text-align: center; border-bottom: 1px solid #e8e8ed; }
thead th:first-child { text-align: left; }
tbody th { text-align: left; font-weight: 400; color: var(--ink-2); padding: 16px 18px; border-bottom: 1px solid #f0f0f3; }
tbody td { text-align: center; padding: 16px 18px; border-bottom: 1px solid #f0f0f3; color: var(--ink-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.us { color: var(--ink); font-weight: 600; background: rgba(0, 113, 227, .05); }
thead .us { color: var(--link); }
.us .yes { color: var(--blue); }
.na { color: #a1a1a6; font-size: 14px; font-weight: 400; }
td small { font-weight: 400; color: var(--ink-2); }
.compare-page .fine { margin-top: 18px; max-width: 70ch; }
.compare-page .fine a { color: var(--link); text-decoration: none; }

/* ---------- Early access: the price on the left, what you get on the right ---------- */
.pricing h2 { max-width: 16ch; }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 72px); }
.offer-price {
  background: var(--white); border-radius: var(--radius); padding: clamp(32px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px;
}
.price-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); margin-bottom: 6px; }
.light .pill { background: rgba(0, 113, 227, .1); color: var(--link); }
.price { display: flex; justify-content: center; align-items: baseline; gap: 4px; }
.price strong { font-size: clamp(56px, 7.5vw, 92px); line-height: 1; font-weight: 600; letter-spacing: -.03em; }
.price .per { font-size: 22px; color: var(--ink-2); }
.price-sub { color: var(--ink-2); }
.offer-price .btn { margin-top: 14px; padding: 14px 30px; font-size: 18px; }
.offer-price .fine { color: var(--ink-2); }
.offer-perks { display: grid; gap: 20px; }
.perk {
  background: var(--white); border-radius: var(--radius); padding: 24px 28px;
  display: flex; align-items: center; gap: 18px;
}
.perk svg { flex: none; width: 38px; height: 38px; color: var(--blue); fill: none; }
.perk b { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.perk span { font-size: 17px; font-weight: 600; }
.perk p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.offer-fine { margin-top: 24px; max-width: 64ch; }
.offer-fine a { color: var(--link); text-decoration: none; }

/* ---------- Buy ---------- */
.waitlist { text-align: center; }
.waitlist .lede { margin: 18px auto 30px; }
.signup-note { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.dark .signup-note { color: var(--ink-dark-2); }
.signup-note a { color: var(--link); }
.dark .signup-note a { color: var(--blue-dark); }

/* ---------- Footer ---------- */
.footer { background: var(--grey-bg); color: var(--ink-2); padding: 28px 0 40px; border-top: 1px solid var(--hairline); font-size: 13px; }
.footer p + p { margin-top: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { display: inline-block; padding: 7px 0; }
.footer-links a { color: var(--ink); }
.footer-links a:hover { text-decoration: underline; }

/* ---------- FAQ: native details, no script. faq.html reuses these. ---------- */
.faq .lede { margin-bottom: clamp(28px, 4vw, 48px); }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 300; color: var(--ink-2); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); font-size: 17px; line-height: 1.5; padding-bottom: 22px; }
.faq a { color: var(--link); }

/* ---------- Legal pages: privacy.html, terms.html ---------- */
.legal { padding: clamp(60px, 8vw, 110px) 0; }
.legal h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -.018em; margin: 4px 0 14px; }
.legal .lede { font-size: 17px; }
.legal h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.012em; margin: 44px 0 12px; }
.legal h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 17px; line-height: 1.55; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal a:not(.btn) { color: var(--link); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .section-head.two-col { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .tiles-3 { grid-template-columns: 1fr 1fr; }
  .tiles-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav-link { display: none; }
  /* Phone: the copy is centred under the machine, the way Apple sets its hero on a narrow screen. */
  .hero-copy { display: grid; gap: 18px; justify-items: stretch; text-align: center; }
  .hero-copy h1 { font-size: clamp(32px, 8.8vw, 44px); }
  .hero-cta { text-align: center; }
  .hero-cta .btn { display: block; }
  .hero-sub { font-size: 12px; margin-top: 8px; }
  /* Phone: the machine bleeds a little past the screen so it is not a thin strip in a tall frame. */
  /* Phone: the machine bleeds a little past the screen so it is not a thin strip in a tall frame.
     The hero clips it, so the page itself never grows wider than the viewport. */
  /* Phone: full width, so both side bezels stay in frame; the hero centres it. */
  .stage { border-radius: 0; margin: 0; width: min(100%, calc(52svh * 1.796)); }
  .feature { min-height: 0; }
  .offer { grid-template-columns: 1fr; }
  .perk { padding: 20px; }
  .look { width: 100%; }
  .look-card { grid-template-columns: 1fr; border-radius: 0; height: auto; }
  /* Stacked, the whole machine is shown rather than a crop of its top edge. */
  .viewer { height: auto; aspect-ratio: 1800 / 1184; order: -1; }
  .panel .mac-full { position: relative; width: 100%; left: 0; top: 0; transform: none; }
  /* Stacked, the rows read as a column rather than as a list pinned to one edge. */
  .picks { width: min(440px, 100%); margin: 0 auto; padding: 22px 16px 28px; gap: 10px; }
  .pill-inner { font-size: 17px; padding: 10px 20px 10px 10px; }
  .pill-inner i { width: 30px; height: 30px; }
  .cap-inner { font-size: 15px; }
  .tiles-3, .tiles-2 { grid-template-columns: 1fr; }
  .table-hint { display: block; }
  tbody th, thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); width: 38%; font-size: 14px; padding: 12px 14px; }
  .us { background: #f2f7fd; }
  tbody td, thead th { padding: 12px 14px; }
}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-transparency: reduce) {
  .nav { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .pick, .pill-inner, .pill-inner i, .cap-inner, .mac-full[data-zoom] { transition: none; }
  .pick:hover, .pick:hover .pill-inner i { transform: none; }
  .pill:hover, .pill:hover i { transform: none; }
  .panel { animation: none !important; }
  .glass-meter i { animation: none; }
}