/* =====================================================================
   Morpheus website — styles (mobile first; desktop from 900px)
   Black, white and greys, one signature blue, a few quiet companions.
   ===================================================================== */

/* -------------------------------------------------------------- TUNING
   Every look-and-feel value lives here. Change a number, reload. */
:root {
  /* light sections */
  --bg: #FFFFFF;             /* white sections */
  --bg-alt: #F5F5F7;         /* the grey sections (every other one) */
  --card: #FFFFFF;           /* cards on grey */
  --card-alt: #F5F5F7;       /* cards on white */
  --ink: #1D1D1F;            /* headlines and letters */
  --ink-2: #6E6E73;          /* body text */
  --ink-3: #86868B;          /* small labels */
  --line: rgba(0, 0, 0, .08);
  --fill: #E8E8ED;           /* controls: buy pill, switches */
  --fill-hover: #DDDDE3;

  /* dark sections */
  --dk: #000000;             /* black sections */
  --dk-card: #161617;        /* cards on black */
  --dk-card-2: #1D1D1F;
  --dk-ink: #F5F5F7;
  --dk-ink-2: #A1A1A6;
  --dk-ink-3: #6E6E73;
  --dk-line: rgba(255, 255, 255, .1);
  --dk-fill: rgba(255, 255, 255, .1);
  --dk-fill-hover: rgba(255, 255, 255, .16);

  /* the signature colour and its companions */
  --blue: #0071E3;           /* buttons, the playhead, links on white */
  --blue-hover: #0077ED;
  --blue-bright: #2997FF;    /* blue on black */
  --violet: #8E7CFF;         /* companions: gradient words, trails */
  --teal: #3FD0E0;
  --pink: #FF5FA2;
  --green: #30D158;
  --red: #FF453A;
  --grad: linear-gradient(90deg, #2997FF 0%, #8E7CFF 55%, #FF5FA2 100%);

  /* type */
  --font: "Mona Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Twin Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --h1: clamp(44px, 11vw, 96px);      /* hero title */
  --h2: clamp(28px, 7.2vw, 80px);     /* section titles (phones 28 px, laptops 80 px) */
  --sub: clamp(17px, 4.2vw, 21px);    /* the line under a title */
  --title-weight: 700;

  /* space */
  --pad: 22px;                        /* page side margin (desktop sets its own below) */
  --sec: clamp(110px, 18vw, 180px);   /* space between sections */
  --nav-h: 52px;
  --ruler-h: 20px;
  --radius: 28px;                     /* cards */

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-apple: cubic-bezier(.25, .1, .25, 1);
  /* (the titles' letter-by-letter entrance is timed in js/type.js, TUNE) */
  /* the switches' pill (Height / Width / Weight / Slant, Reveal's looks) sliding to the picked one: a plain ease, no overshoot */
  --seg-time: .4s;                    /* how long it takes.  Now .4s.  Try .25s - .6s */
  --seg-ease: cubic-bezier(.4, 0, .2, 1);
  /* a hint's triangle turning in (.tri-ico): a quarter turn anticlockwise + a fade in, together */
  --tri-time: .6s;                    /* how long it takes.  Now .6s.  Try .4s - 1s */
  --tri-ease: cubic-bezier(.5, 0, .5, 1);   /* an easy ease, a little steeper than AE's (AE's Easy Ease: .33, 0, .67, 1; 50 % influence
                                               here).  Steeper: .6, 0, .4, 1 */
}
@media (min-width: 900px) {
  :root { --pad: clamp(32px, 5vw, 80px); --ruler-h: 22px; }
}

/* -------------------------------------------------------------- base */
@font-face { font-family: "Mona Sans"; src: url(../fonts/MonaSans.woff2?v=e1edbf7c60) format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/GeistMono.woff2?v=5589308495) format("woff2"); font-weight: 400 600; font-display: swap; }
/* Twin Sans = what Android / Windows show wherever this site asks for Apple's font (Apple's font is only on Apple devices).
   Inter's letter shapes with the measurements of Apple's font as Safari draws it: the same letter widths, size tracking, kerning
   and line height at every size and weight - so lines break and letters sit as on the iPhone. Apple devices never download it
   (their own font comes first in every list). Rebuild: Morpheus site tools/twin-sans/README.txt. Licence: fonts/TwinSans-OFL.txt */
@font-face { font-family: "Twin Sans"; src: url(../fonts/TwinSans.woff2?v=bd605ddc48) format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0141-0142, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+21E7, U+2212, U+2318, U+2605; }

*, *::before, *::after { box-sizing: border-box; }
/* (overflow-x on BOTH: a browser hands a body's overflow to the screen itself unless the html sets its own - then the body never cut
   anything, and on an iPhone anything past the right edge (the Proximity null dropped at the edge) made the page wider than the
   screen, so Safari zoomed the whole page out to fit it: everything shifted left with a dead strip down the right. With the html's
   own, the body cuts its sideways overflow itself, as meant: the page is never wider than the screen) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--dk); color-scheme: light; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.47 var(--font); font-stretch: 100%; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, canvas, svg { display: block; }
canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* a canvas is never "selected" */
/* the demos' controls never select either (the same list as DEMOS in js/main.js). It is set once, here, not as a class on the
   page while a demo is held: that restyled every element of the page (~4,000) on each touch and again on letting go */
.dial, .seg, .chips, .presets, .ae-timeline { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgba(0, 113, 227, .22); }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }
/* a reload lands where you were (js/restore.js): until the page is back in its place nothing in it shows - Chrome goes on showing the
   old page meanwhile. (!important: it must win over the visibility the scripts set on elements, and the panel's `all: initial`) */
html.restoring body, html.restoring body * { visibility: hidden !important; }
html.restoring.arriving { background: var(--bg); }  /* (coming by a link to one of its parts - Get on Terms: the white of the page
                                                       you came from, and of the price you land on, not the hero's black) */
html.holding, html.holding body { overflow-anchor: none; }  /* (...and while it holds that spot, it alone keeps the page still) */

/* touch vs mouse words ("Touch" / "Point") */
.mouse-word { display: none; }
@media (hover: hover) and (pointer: fine) { .mouse-word { display: inline; } .touch-word { display: none; } }

/* -------------------------------------------------------------- sections: light, grey, black */
.sec { position: relative; padding: var(--sec) 0; background: var(--bg); }
.sec.alt { background: var(--bg-alt); }
.dark { background: var(--dk); color: var(--dk-ink); }
section[id] { scroll-margin-top: calc(var(--nav-h) + var(--ruler-h)); }

/* -------------------------------------------------------------- type */
.h1, .h2 { margin: 0; font-weight: var(--title-weight); font-stretch: 100%; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); max-width: 15ch; }
.h2.huge { font-size: clamp(40px, 11vw, 150px); max-width: none; letter-spacing: -.045em; }
.head.center, .head.center .h2 { text-align: center; margin-left: auto; margin-right: auto; }
.head.center .sub { margin-left: auto; margin-right: auto; }
.sub { margin: 20px 0 0; max-width: 36ch; font-size: var(--sub); line-height: 1.38; color: var(--ink-2); font-weight: 450; text-wrap: pretty; }
.dark .sub { color: var(--dk-ink-2); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.flex .grad .ch { background: var(--grad); background-size: var(--gw, 100%) 100%; background-position: var(--gx, 0) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* split titles: every letter its own box (js/type.js) */
.flex .ch { display: inline-block; white-space: pre; text-align: center; }
.flex .wd { display: inline-block; white-space: nowrap; }
.js .flex[data-split]:not(.split-done) { visibility: hidden; }

/* small captions with a live icon: how to play with a demo */
.hint { display: inline-flex; align-items: center; gap: 9px; margin: 22px 0 0; font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.dark .hint { color: var(--dk-ink-3); }
/* its mark: a small blue triangle pointing at its line. It turns in once as the line arrives - a quarter turn anticlockwise round
   its own middle, fading in as it turns (--tri-time, --tri-ease). .on comes on the line's row as it arrives (js/cards.js: a
   feature's SE) or, for a hint standing on its own, on the hint the first time it is all on the screen (js/main.js) */
.tri-ico { flex: none; width: 7.8px; height: 9px; background: var(--blue); -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 33.333% 50%; }
.dark .tri-ico { background: var(--blue-bright); }
.js .tri-ico { opacity: 0; transform: rotate(90deg); }
.js .on .tri-ico { opacity: 1; transform: none; animation: tri-in var(--tri-time) var(--tri-ease) both; }
@keyframes tri-in { from { opacity: 0; transform: rotate(90deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .tri-ico { opacity: 1; transform: none; animation: none; } }
.mouse-ico { position: relative; width: 16px; height: 24px; border-radius: 9px; border: 1.6px solid currentColor; opacity: .9; }
.mouse-ico::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: var(--blue-bright); animation: wheel 1.8s var(--ease-out) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(7px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* -------------------------------------------------------------- nav + ruler (switches to dark over black sections) */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); color: var(--ink);
  padding-top: env(safe-area-inset-top);
  transition: background .45s var(--ease-apple), color .45s var(--ease-apple), border-color .45s var(--ease-apple),
    opacity .3s var(--ease-apple);           /* (opacity: it steps aside for the panel full screen, where there is no top layer) */
}
.nav.on-dark { background: rgba(22, 22, 23, .72); color: var(--dk-ink); border-bottom-color: var(--dk-line); }
.nav-row { height: var(--nav-h); display: flex; align-items: center; gap: 18px; padding: 0 var(--pad); max-width: 1440px; margin: 0 auto; }
.brand { font-weight: 650; font-size: 20px; letter-spacing: -.02em; line-height: 1; text-decoration: none; white-space: nowrap; }
.nav-links { display: none; margin-left: auto; gap: 26px; }
.nav-links a { position: relative; text-decoration: none; font-size: 13px; font-weight: 450; letter-spacing: -.005em; opacity: .8; transition: opacity .25s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform .35s var(--ease-out); }
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-buy {
  margin-left: auto; display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px;
  background: var(--blue); color: #fff; text-decoration: none; font-size: 13px; font-weight: 550;
  transition: background .2s, transform .3s var(--ease-back);
}
.nav-buy:hover { background: var(--blue-hover); transform: scale(1.04); }
.nav-buy:active { transform: scale(.96); }
@media (min-width: 900px) { .nav-links { display: flex; } .nav-buy { margin-left: 10px; } .ticks b { display: block; } }
.brand + .nav-buy { margin-left: auto; }   /* (pages without section links: the legal pages) */

.ruler { height: var(--ruler-h); display: flex; align-items: stretch; max-width: 1440px; margin: 0 auto; }
.tc { flex: 0 0 auto; display: flex; align-items: center; padding: 0 10px 0 var(--pad); font: 500 10.5px/1 var(--mono); color: var(--blue); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.nav.on-dark .tc { color: var(--blue-bright); }
.ruler-track { position: relative; flex: 1; margin-right: var(--pad); overflow: hidden; }
.ticks { position: absolute; inset: 0; }
.ticks i { position: absolute; bottom: 0; width: 1px; height: 3px; background: currentColor; opacity: .22; }
.ticks i.s { height: 6px; opacity: .38; }
.ticks b { display: none; position: absolute; top: 3px; font: 500 8.5px/1 var(--mono); opacity: .45; transform: translateX(3px); }
.keys { position: absolute; inset: 0; }
.keys button {
  position: absolute; top: 58%; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg) scale(.9);
  border: 1.3px solid currentColor; opacity: .45; background: transparent; transition: background .3s, opacity .3s, transform .5s var(--ease-back);
}
.keys button.on { background: currentColor; opacity: .9; }
.keys button:hover { transform: rotate(45deg) scale(1.4); opacity: 1; }
.cti { position: absolute; top: 0; bottom: 0; left: 0; width: 0; will-change: transform; }
.cti::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1.5px; background: var(--blue-bright); }
.cti i { position: absolute; top: 0; left: -4.5px; width: 9px; height: 6px; background: var(--blue-bright); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); }

/* -------------------------------------------------------------- the buy button (Apple's pill with a blue chevron) */
.buy {
  --h: 56px;
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: var(--h); padding: 0 8px 0 26px; border-radius: 999px;
  background: var(--fill); color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; text-decoration: none;
  transition: background .25s var(--ease-apple), transform .35s var(--ease-back), box-shadow .35s var(--ease-apple);
}
.buy.big { --h: 64px; font-size: 19px; padding-left: 30px; gap: 14px; }
.buy-p { font-weight: 500; color: var(--ink-3); }
.buy-go { position: relative; flex: 0 0 auto; width: calc(var(--h) - 16px); height: calc(var(--h) - 16px); border-radius: 50%; background: var(--blue); display: grid; place-items: center; overflow: hidden; transition: transform .4s var(--ease-back), background .25s; }
.buy-go svg { width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease-out); }
.buy:hover { background: var(--fill-hover); }
.buy:hover .buy-go { transform: scale(1.07); background: var(--blue-hover); }
.buy:hover .buy-go svg { animation: chev .7s var(--ease-out); }
@keyframes chev { 0% { transform: translateX(0); } 45% { transform: translateX(130%); opacity: 1; } 46% { transform: translateX(-130%); opacity: 0; } 47% { opacity: 1; } 100% { transform: translateX(0); } }
.buy:active { transform: scale(.975); }
.buy.on-dark { background: var(--dk-fill); color: var(--dk-ink); }
.buy.on-dark:hover { background: var(--dk-fill-hover); }
.buy.on-dark .buy-p { color: var(--dk-ink-2); }
.buy.on-dark .buy-go { background: var(--blue); }

/* the phones' buy bar */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .6s var(--ease-out); pointer-events: none;
}
.dock.on { transform: none; pointer-events: auto; }
.dock.on.away { transform: translateY(110%); pointer-events: none; }
.dock-in { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto; }
.dock-t { flex: 1; display: grid; line-height: 1.2; }
.dock-t b { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.dock-t span { font-size: 13px; color: var(--ink-3); }
.dock-buy { height: 38px; padding: 0 20px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; transition: transform .3s var(--ease-back), background .2s; }
.dock-buy:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .dock { display: none; } }

/* -------------------------------------------------------------- THE CARDS (js/cards.js; phones first)
   Each card is a sticky stage in a tall pin: the first scroll (FTS) plays while it sticks, then the next card - pulled up
   one screen - rises over it like AE's white banner (BA). It is all the page's own scroll. Black and white alternate. */
@font-face { font-family: "Hero Articulat"; src: local("ArticulatCF-DemiBold"), local("Articulat CF Demi Bold"); font-weight: 600; font-display: block; }
.card {
  --hero-font: "articulat-cf", "Hero Articulat", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --card-bg: #000000;        /* a black card */
  --hero-title: #FFFFFF;     /* TL (AE: the title's fill) */
  --hero-sub: #A4A4A4;       /* TS (AE: the sub's grey) */
  --hero-sub-hi: #FFFFFF;    /* TS's highlighted words (AE: "morphs your text") */
  position: relative; color: var(--dk-ink);
}
.card.light {                /* a white card: the same, inverted */
  --card-bg: #FFFFFF;
  --hero-title: #1D1D1F;
  --hero-sub: #6E6E73;
  --hero-sub-hi: #1D1D1F;
  color: var(--ink);
}
.card + .card, .sec.rise { margin-top: -100vh; margin-top: -100svh; }        /* the next card starts one screen early: it rises over this one */
.card-pin { position: relative; height: calc(100vh + var(--run, 200vh)); height: calc(100svh + var(--run, 200svh)); }   /* (js/cards.js sets --run) */
.card-stage {
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--card-bg);
  border-radius: var(--r, 0px) var(--r, 0px) 0 0;              /* its top corners show only while it rises (BA) */
  box-shadow: var(--ba-shadow, none);                           /* AE's Drop Shadow on the banner (cast upwards) */
  transform: translateZ(0); isolation: isolate;                 /* (its own layer: WebKit then clips the corners with a smooth, antialiased edge) */
}
.sec.rise { transform: translateZ(0); isolation: isolate; }     /* (its rounded top corners and its shadow while it rises: js/cards.js sets them on it) */
section.card { scroll-margin-top: 0; }                      /* (a link to a card lands it square, full screen) */
.sec { z-index: 20; }                                           /* the plain page after the cards */
.card.dark { background: none; }                            /* (the stage paints the card: a section colour would fill its rounded corners) */
/* a card's layers, bottom to top - each may pass over the ones below it, never under: TL + TS (1), the feature (2),
   its SE (3). The next card rises over all of them. */
.card-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }   /* card 1's sky (js/stars.js), under everything */
.card-main { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 50% 50%; will-change: transform; z-index: 2; }
.card-se { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 var(--pad); z-index: 3; }
.card-se .hint { margin: 0; }
/* a card with no first scroll (js/cards.js TUNE.cards fts: false): TL + TS, the feature and its SE in one box, so the banner
   shrinks and lifts the whole card as one piece. Its layers keep their order inside it */
.card-body { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; }
/* SE ride just under their feature through the first scroll and fade in on AE's curve - js/cards.js sets them every frame */
.se { opacity: 0; pointer-events: none; }
.se.on { pointer-events: auto; }
.card-main.masked { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* TL + TS: laid out in AE's own 1920 x 1080 comp pixels inside .hero-top, which js/cards.js scales to the screen.
   The type is AE's: Articulat CF Demi Bold. On this Mac it comes from the fonts Adobe Fonts has switched on ("Hero Articulat" above);
   on the live site an Adobe Fonts web project provides it as "articulat-cf" (first in --hero-font). */
/* (memory: these boxes are 0 x 0 - their text hangs out of them - and none of them is a GPU layer of its own: 2D transforms,
   no will-change, no mask at rest. An iPhone keeps a picture of every GPU layer at 3x its OWN size, however small it shows:
   a 1920 x 1080 box shrunk to a phone was ~71 MB, its mask as much again, and a fast scroll through the cards piled up
   3.3 GB until iOS closed the tab and Safari reloaded the page. Now they are painted straight into their card) */
.hero-top, .hero-stats { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: none; }
.hero-layer, .hero-inner { position: absolute; inset: 0; transform-origin: 0 0; }
.hero-h1, .hero-sub { position: absolute; margin: 0; font-family: var(--hero-font); font-weight: 600; font-stretch: normal; white-space: pre; font-kerning: normal; }
/* a feature's number (the features page): a small round badge above its TL, like Things to Know's arrows. js/cards.js TUNE.badge
   sizes it and centres its number; its colours: .feats --badge-bg / --badge-ink */
.card-badge {
  position: relative; display: grid; place-items: center; border-radius: 50%;
  background: var(--badge-bg); color: var(--badge-ink); pointer-events: none; -webkit-user-select: none; user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Twin Sans", "Helvetica Neue", system-ui, sans-serif; font-weight: 600;
  line-height: 1; letter-spacing: 0;
}
.card-badge span { display: block; }
.hero-h1 { color: var(--hero-title); pointer-events: auto; }
.hero-h1 .c { position: absolute; top: 0; }
.hero-sub { color: var(--hero-sub); text-align: center; pointer-events: auto; }
.hero-sub b { font-weight: inherit; color: var(--hero-sub-hi); }
.hero-sub .ln { position: absolute; left: 0; right: 0; }
.hero-h1.anim .c, .hero-sub.anim .ln { will-change: transform, opacity, filter; }   /* (only while they arrive) */
.hero-top { z-index: 1; }
.hero-stats { z-index: 3; }
.js .hero-h1, .js .hero-sub, .js .stat, .js .card-main, .js .card-se, .js .card-video, .js .card-badge { visibility: hidden; }        /* until js/cards.js has laid them out */
.card-ready .hero-h1, .card-ready .hero-sub, .card-ready .stat, .card-ready .card-main, .card-ready .card-se, .card-ready .card-video, .card-ready .card-badge { visibility: visible; }

/* the two numbers (AE: Pre-comp Comp, Pre-comp 4): a keyline, a small line, the number, a small line, a keyline.
   They ride just under the R through the first scroll and arrive like Apple's stats: a short rise and fade, on AE's keys. */
.stat { position: absolute; }
.stat .st-in { position: absolute; inset: 0; opacity: 0; }                                      /* (js/cards.js: they ride under the R, fade on AE's keys) */
.stat .kl { position: absolute; left: 0; right: 0; height: var(--kl, 1.4px); background: #8D8D8D; }
.stat .st-cap, .stat .st-num { position: absolute; white-space: pre; line-height: 1; }
.stat .st-cap { font: 600 var(--cap, 18.6px) var(--hero-font); color: #757579; letter-spacing: -.01em; }
.stat .st-num { font: 500 var(--num, 58.5px) -apple-system, BlinkMacSystemFont, "SF Pro Display", "Twin Sans", system-ui, sans-serif; color: #fff; letter-spacing: -.02em; }

/* the scroll cue under the R (Comp 2's three chevrons, js/cards.js): it blinks down before the first scroll, then goes */
.cue { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 2; pointer-events: none; will-change: transform, opacity; }
.cue svg { position: absolute; display: block; overflow: visible; }
.cue path { fill: none; stroke: var(--blue-bright); stroke-linecap: round; stroke-linejoin: round; }

/* each card's feature and its supporting elements */
#revealSheet canvas, .prox-stage canvas { width: 100%; height: 100%; }
/* the variable-fonts card's video plate, under its SE (js/cards.js TUNE.cards.axes.video places + sizes it): as wide as the
   plate above, the video's own black, its middle showing (the word sits in the middle of the frame) */
.card .card-video {
  position: absolute; left: 16px; right: 16px; top: 0; max-width: 640px; margin: 0 auto; z-index: 2;
  border-radius: var(--radius); overflow: hidden; background: #000; isolation: isolate;
}
.card-video video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); pointer-events: none; }
/* the Reveal card: the signature is written on a page of a notebook (the first website's page, a little whiter).
   js/pen.js sets the ruled lines' spacing and puts one under the word (TUNE.page there) */
.rv-paper {
  --rv-margin: 22px;         /* the red margin line, from the page's left edge */
  --rv-paper: #ffffff;       /* the paper: barely warm */
  position: absolute; top: 0; bottom: 0; left: 16px; right: 16px; max-width: 640px; margin: 0 auto; border-radius: 6px; overflow: hidden;
  background-color: var(--rv-paper);
  background-image: linear-gradient(90deg, transparent var(--rv-margin), rgba(255, 80, 80, .28) var(--rv-margin) calc(var(--rv-margin) + 1.5px), transparent calc(var(--rv-margin) + 1.5px)),
    linear-gradient(var(--rv-paper), var(--rv-paper)),                          /* (plain paper over the lines under the name's strip) */
    linear-gradient(180deg, rgba(40, 110, 200, .16) 0 1px, transparent 1px);   /* the ruled lines */
  background-repeat: no-repeat, no-repeat, repeat-y; background-size: 100% 100%, 100% 0px, 100% 28px; background-position: 0 0, 0 100%, 0 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 12px 30px -12px rgba(60, 50, 30, .25);
}
.prox-stage canvas { touch-action: pan-y; }
.card .rv-foot { padding: 0; }
.card.light .replay { background: rgba(0, 0, 0, .06); }
.card.light .replay:hover { background: rgba(0, 0, 0, .1); }
.card.light .replay svg { stroke: #1D1D1F; }
.card.light .pen-null { border-color: var(--blue); }
.card.light .pen-null::after { background: var(--blue); }
.motion-main { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 var(--pad); }
.card .motion-word { width: 100%; max-width: 640px; }
.card .ae-window { max-width: 760px; margin: 0 auto; }
.card .motion-word { background: #161617; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); flex: 0 0 auto; overflow: hidden; }   /* (its plate, matching the graph's) */
.card .motion-word canvas { height: 100%; min-height: 0; }
.card .graph-card { background: #161617; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); flex: 0 0 auto; }
/* on a white card (Oct 1: only the R and the panel cards stay black): the word's plate turns the light grey of the
   variable-fonts card's, its ink black (js/ease.js reads the card); the graph stays After Effects' own dark graph editor,
   lifted off the page like the AE window on the output card */
.card.light .motion-word { background: #F5F5F7; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.card.light .graph-card { box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .12); }
.dark .chip { background: rgba(255, 255, 255, .1); color: var(--dk-ink); }
.dark .chip:hover { background: rgba(255, 255, 255, .16); }
.dark .chip.on { background: var(--dk-ink); color: #000; }
.card .presets { justify-content: center; }
.card .ae { margin: 0; max-width: none; padding: 0 var(--pad); }
.card .pills { margin: 0; gap: 7px; }
.card .pills li { padding: 8px 13px; font-size: 13px; }
.card .ae-row { height: 21px; }                  /* (a phone-sized AE window: slimmer layer rows and viewer margin) */
.card .ae-viewer { padding: 10px; }
.card .ae-tl-head { height: 24px; }
.panel-main { display: flex; justify-content: center; }
.panel-mount { position: relative; transform-origin: 50% 0; }
/* the panel card's Full screen button (its SE), and the full screen itself (js/cards.js TUNE.full) */
.pfs-open, .pfs-close {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px 0 16px; border-radius: 999px;
  background: #FFFFFF; color: #000; font-size: 15px; font-weight: 600; letter-spacing: -.01em;      /* (a white pill: it has to be seen under the panel) */
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  transition: background .25s, transform .35s var(--ease-back);
}
.pfs-open:hover, .pfs-close:hover { background: #F2F2F7; }
.pfs-open:active, .pfs-close:active { transform: scale(.95); }
.pfs-open svg, .pfs-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .pfs-open { display: none; } }   /* (a mouse works the panel where it is) */
/* phones: the panel flies out of its place into the browser's top layer (a popover: above everything, without leaving its
   card) while one black backdrop fades over the whole page - the page itself never changes. Only opacity and transforms
   move, so it all runs on the GPU. (In its card the popover is an ordinary box) */
.panel-mount[popover] { display: block; position: relative; inset: auto; width: 390px; margin: 0; padding: 0; border: 0; overflow: visible; background: none; color: inherit; }
.panel-mount:popover-open { position: fixed; left: 0; top: 0; }
.panel-mount .mp-catch { display: none; position: absolute; inset: 0; z-index: 10001; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.panel-mount .mp-catch.on { display: block; }               /* (phones, in the card: a tap on the panel asks to go full screen) */
.pfs-back {
  position: fixed; inset: 0; z-index: 89; background: #000; opacity: 0; visibility: hidden; pointer-events: none; touch-action: none;
  transition: opacity var(--pfs-out, .34s) var(--ease-apple), visibility 0s linear var(--pfs-out, .34s);
}
html.pfs-on .pfs-back { opacity: var(--pfs-black, 1); visibility: visible; pointer-events: auto; transition: opacity var(--pfs-in, .4s) var(--ease-apple), visibility 0s; }
html.pfs-on .panel-mount .mp-page { overscroll-behavior: contain; }   /* (a list scrolled to its end never moves the page) */
.panel-mount .mp .mp-page, .panel-mount .mp .mp-chips, .panel-mount .mp .mp-status, .panel-mount .mp .mp-pmenu, .panel-mount .mp .mp-settings-body {
  overscroll-behavior: contain;                               /* (laptop: the wheel over the panel is the panel's, end to end) */
}
/* (browsers without the top layer - iOS 16 and older: it zooms inside its card; TL, TS, the button and the nav fade round it) */
html.pfs-inplace .pfs-back { display: none; }
html.pfs-inplace .card[data-card="panel"] .card-top { transition: opacity .3s var(--ease-apple); }
html.pfs-inplace .card.pfs-on .card-top, html.pfs-inplace .card.pfs-on .pfs-open { opacity: 0; pointer-events: none; transition: opacity .22s var(--ease-apple); }
html.pfs-inplace .card.pfs-top .card-main { z-index: 4; }
html.pfs-inplace.pfs-on .nav { opacity: 0; pointer-events: none; }
html.pfs-inplace.pfs-lock, html.pfs-inplace.pfs-lock body { overflow: hidden; }
.pfs-room {               /* where the panel goes: the screen less its safe areas, a side gap and the Close bar (measured, never seen) */
  position: fixed; visibility: hidden; pointer-events: none;
  left: calc(var(--pfs-side, 8px) + env(safe-area-inset-left)); right: calc(var(--pfs-side, 8px) + env(safe-area-inset-right));
  top: calc(var(--pfs-side, 8px) + env(safe-area-inset-top)); bottom: calc(68px + env(safe-area-inset-bottom));
}
.pfs-bar {
  position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90; display: flex; justify-content: center;
  pointer-events: none; visibility: hidden; opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .2s var(--ease-apple), transform .35s var(--ease-out), visibility 0s linear .35s;
}
html.pfs-on .pfs-bar { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease-apple) .16s, transform .5s var(--ease-out) .16s, visibility 0s; }
html.pfs-on .pfs-close { pointer-events: auto; }
/* phones: "Enter Full Screen?" - asked when the panel is tapped in its card (js/cards.js openAsk): an iOS 26 alert, dark. Liquid
   Glass (the page shows through it, blurred, under a light rim), its words left aligned (iOS 26's alerts), two capsule buttons -
   grey glass Cancel, Enter in iOS 26's dark-mode blue. The rule of corners: the card's radius is a button's radius plus the
   buttons' margin from the card's edge, so every corner turns round the same centre */
.pask {
  --pask-w: 316px;            /* the card's width (at most the screen less 24 px on each side) */
  --pask-btn: 50px;           /* the buttons' height (their radius: half of it - capsules) */
  --pask-in: 14px;            /* the buttons' margin from the card's sides and bottom, and between them less 4 px */
  --pask-pad: 22px;           /* the words' margin from the card's sides and top */
  --pask-blue: #0091FF;       /* Enter: iOS 26's blue, dark mode */
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; touch-action: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Twin Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.pask[hidden] { display: none; }
.pask-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); opacity: 0; transition: opacity .3s var(--ease-apple); }
.pask-box {
  position: relative; width: min(var(--pask-w), 100%); padding: var(--pask-pad) var(--pask-pad) 0; text-align: left; color: #FFFFFF;
  border-radius: calc(var(--pask-btn) / 2 + var(--pask-in));                       /* (the rule of corners: 25 + 14 = 39 px) */
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%), rgba(30, 30, 32, .8);
  -webkit-backdrop-filter: blur(36px) saturate(1.8); backdrop-filter: blur(36px) saturate(1.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 30px 80px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(1.08);
  transition: opacity .18s var(--ease-apple), transform .2s var(--ease-apple);         /* (going: a quick fade) */
}
/* the glass's rim: a hairline of light, brightest where the light falls (top left), fading round the card */
.pask-box::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .1) 28%, rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pask.on .pask-back { opacity: 1; }
.pask.on .pask-box { opacity: 1; transform: none; transition: opacity .22s var(--ease-apple), transform .5s cubic-bezier(.2, 1.15, .35, 1); }   /* (coming: a soft spring) */
.pask h3 { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.024em; }
.pask p { margin: 5px 0 0; font-size: 15px; line-height: 20px; font-weight: 400; letter-spacing: -.016em; color: rgba(235, 235, 245, .62); }
.pask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pask-in) - 4px); margin: 22px calc(var(--pask-in) - var(--pask-pad)) 0; padding-bottom: var(--pask-in); }
.pask-btns button {
  position: relative; height: var(--pask-btn); border-radius: 999px; font-size: 17px; font-weight: 600; letter-spacing: -.024em; color: #FFFFFF;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), filter .2s, background-color .2s; -webkit-tap-highlight-color: transparent;
}
.pask-cancel { background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 .5px rgba(255, 255, 255, .06); }
.pask-enter {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--pask-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 .5px rgba(255, 255, 255, .1);
}
.pask-btns button:active { transform: scale(.965); filter: brightness(1.12); }
@media (hover: hover) { .pask-cancel:hover { background-color: rgba(255, 255, 255, .16); } .pask-enter:hover { filter: brightness(1.06); } }
.pask-btns button:focus { outline: none; }
.pask-btns button:focus-visible { box-shadow: 0 0 0 3px rgba(0, 145, 255, .55); }

/* -------------------------------------------------------------- THE FEATURES PAGE (js/cards.js: "the features page")
   It rises over card 1 (the site's one banner) as a white page with "Featuring / Morpheus 2.0" on it, like apple.com's iPhone Duo
   page. The page then holds still while your scroll flies a camera into the words and through the eye of the "e"; the white turns
   black on the way through (js/cards.js TUNE.intro, TUNE.fly, TUNE.black, TUNE.first). Then one plain scrolling page, apple.com's
   way: each feature's title (TL) and line (TS), left aligned, its number above them, then its main element (ME) and its
   supporting elements (SE). Every size and gap is here. */
.feats {
  --feat-col: 720px;                          /* the column on a wide screen (a phone: the screen less --pad on each side) */
  --feat-gap: clamp(120px, 28vw, 220px);      /* space above each feature */
  --feat-eyebrow: clamp(19px, 4.9vw, 28px);   /* "Featuring" (apple.com's small line over a headline) */
  --feat-name: clamp(46px, 12.8vw, 112px);    /* "Morpheus 2.0" (50 px on a 390 px phone, apple.com's headline size) */
  /* ---- a feature's TL and TS: card 1's own title and line as they are before its first scroll, on every screen (left aligned).
     js/cards.js (layoutFeats) sets these from card 1 itself as the page lays out - its size, tracking and leading, the gap
     between the two and the TS's line length; the values here only show until then */
  --feat-tl: clamp(28.5px, 3.63vw, 70px);     /* TL's size (card 1's TL: 28.56 px on a phone, 52.3 px on a 1440 x 900 laptop) */
  --feat-ts: clamp(12.6px, 1.12vw, 21.5px);   /* TS's size (card 1's TS: 12.6 px on a phone, 16.2 px on a 1440 x 900 laptop) */
  --feat-tl-lh: .86;                          /* TL's leading (card 1's, from AE) */
  --feat-tl-ls: -.032em;                      /* TL's tracking */
  --feat-ts-lh: .947;                         /* TS's leading */
  --feat-ts-ls: -.02em;                       /* TS's tracking */
  --feat-ts-gap: 12px;                        /* TL's last line to TS's first (js: card 1's baseline to baseline) */
  --feat-ts-w: 19.5em;                        /* TS's longest line (card 1's) */
  /* ---- THE STAGE: every feature's main element (ME) sits on the same tile - the column's full width (its edges line up with
     the TL's), the same corners, the same grey and hairline edge. What it shows sits in it with the same margin all round (the
     notebook, the speed graph's word and graph, the AE window, the panel). Under it, always in the same place: its controls (one
     dark switch track) and one caption line saying what to do */
  --stage-h: clamp(176px, 27vh, 260px);       /* the tile's height for Reveal, Proximity, Variable fonts and the video */
  --stage-r: clamp(20px, 5.6vw, 28px);        /* its corners (22 px on a phone, 28 px on a laptop) */
  --stage-pad: clamp(14px, 4.2vw, 28px);      /* its margin round what sits in it (16 px on a phone, 28 px on a laptop) */
  --stage-bg: #161617;                        /* its grey */
  --stage-line: rgba(255, 255, 255, .08);     /* its hairline edge */
  --feat-me-gap: clamp(28px, 7vw, 44px);      /* TS to the stage (or to Things to Know above it) */
  --feat-se-gap: 20px;                        /* the stage to its controls (and Things to Know to the stage) */
  --mword-h: clamp(96px, 13vh, 130px);        /* the speed graph's word, at the top of its stage (a wider screen: below) */
  --ek: 1.08;                                 /* the speed graph's Easing box: the panel's own sizes x this (1 = the panel's
                                                 12 px type; a wider screen: below) */
  --ease-w: 480px;                            /* ...and on a wider screen, its width (centred under the word) */
  --plate: var(--stage-bg);
  --badge-bg: #2C2C2E;                        /* the number badge's circle (js/cards.js TUNE.badge) ... */
  --badge-ink: #F5F5F7;                       /* ...and its number */
  --hero-font: "articulat-cf", "Hero Articulat", "Mona Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 0 0 var(--sec); color: var(--dk-ink);
}
/* the fly-through: .feat-hold is the stretch of page the camera flies through (js/cards.js sets its height: TUNE.fly), .feat-stage
   the screen held there (sticky). Its white (.feat-white) and the words' canvas (.feat-fly) reach the tallest the screen gets
   (100lvh: an iPhone with its bars tucked away), so no strip is ever left uncovered; the words are centred in that room too (under
   the nav, down to 100lvh: the screen as it is while you scroll - Android's address bar slides away) */
.feat-hold { position: relative; z-index: 1; height: 100vh; height: 100svh; border-radius: inherit; }
.feat-stage { position: sticky; top: 0; height: 100vh; height: 100svh; border-radius: inherit; }
.feat-white { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; background: #FFFFFF; border-radius: inherit; pointer-events: none; }
.feat-fly { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; letter-spacing: 0; }   /* (letter-spacing 0: canvas text would inherit the page's) */
/* (an iPhone - js/cards.js TUNE.fmt.phone.engine 'safari': the same words, each line on its own canvas in a box Safari moves; the
   whole of it shows exactly where .feat-fly does. .ff-track: the stretch of page the boxes move along - invisible, takes no room) */
.ff-fly { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; pointer-events: none; letter-spacing: 0; }
.ff-fly > div { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; will-change: transform; }
.ff-fly canvas { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; }
.ff-track { position: absolute; left: 0; width: 1px; visibility: hidden; pointer-events: none; }
/* the words themselves: drawn on .feat-fly with these exact styles (js/cards.js reads them); the text is kept for screen readers */
.feat-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.feat-eyebrow { margin: 0; font: 600 var(--feat-eyebrow)/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Twin Sans", "Helvetica Neue", system-ui, sans-serif; letter-spacing: .004em; color: #1D1D1F; }
.feat-name { margin: .1em 0 0; font: 700 var(--feat-name)/1.05 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Twin Sans", "Helvetica Neue", system-ui, sans-serif; letter-spacing: -.025em; color: #1D1D1F; }
/* a feature */
.feat { position: relative; z-index: 1; width: 100%; max-width: calc(var(--feat-col) + 2 * var(--pad)); margin: 0 auto; padding: var(--feat-gap) var(--pad) 0; }
.feat-list { position: relative; z-index: 1; }
/* the first feature: placed by js/cards.js (TUNE.first, buildFirst + firstLayout + paintFirst) - after the hole it comes up small in
   the middle of the screen and grows to its full size as you scroll, then scrolls on with the page: .ff-pin holds it in place
   (sticky, for the stretch of page its .feat-first-room makes), .ff-zoom scales it round the camera's aim */
.feat-first { position: relative; }
.ff-pin { position: sticky; }
.ff-zoom { will-change: transform; }
.feat-first .feat { padding-top: 0; }
.feat.feat-wait { visibility: hidden; }                      /* (the first feature, until the camera is through the "e") */
/* a feature's TL + TS (and number) come in like everything on the site: Apple's reveal (js/arrive.js - the 30 px rise and the fade,
   lines that start together one after another, quicker when the page is scrolled fast). js/cards.js starts each line once, as its
   own top scrolls in past the site's line (js/arrive.js TUNE.at) */
.feat-head { text-align: left; }
.feat-head > * { opacity: 0; transform: translate3d(0, var(--arrive-y, 30px), 0); }
.feat-head > .in { opacity: 1; transform: none; transition: opacity var(--arrive-fade, .9s) var(--arrive-ease, ease), transform var(--arrive-rise, .7s) var(--arrive-ease, ease); }
.feat-tl { margin: 0; font: 600 var(--feat-tl)/var(--feat-tl-lh) var(--hero-font); letter-spacing: var(--feat-tl-ls); color: #FFFFFF; text-wrap: balance; }
.feat-ts { margin: var(--feat-ts-gap) 0 0; max-width: var(--feat-ts-w); font: 600 var(--feat-ts)/var(--feat-ts-lh) var(--hero-font); letter-spacing: var(--feat-ts-ls); color: #A4A4A4; text-wrap: pretty; }
.feat-ts b { font-weight: inherit; color: #FFFFFF; }
/* a TS with its own line break (index.html: .brk and a <br> where the line should end - the first line longer than the second,
   the same on every screen and in every font): its lines are as long as their words, not card 1's line length */
.feat-ts.brk { max-width: none; }
.feat-ts.brk.fit { max-width: var(--feat-ts-w); }   /* (a screen too small for one of its lines: it wraps as before - js/cards.js) */
.feat-ts.brk.fit br { display: none; }
.feat-head .card-badge { margin-bottom: 18px; }
.feat-me { position: relative; margin-top: var(--feat-me-gap); }
.feat-me.masked { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.feat-me.feat-pre { visibility: hidden; }                    /* (until its opening plays: js/cards.js) */
/* (the panel shuts the site's styles out with `all: initial` (panel/panel.css .mp), which resets its visibility too - so the hidden
   state above never reached it: it showed, fully bright, at the bottom of the screen before its opening, then vanished into the
   opening's first frame and opened again. Opacity reaches everything inside it, whatever it sets for itself - and until then
   nothing in it takes a touch or a click: a tap on a panel not yet shown never asks to go full screen) */
.feat-me.feat-pre .panel-mount { opacity: 0; pointer-events: none; }
.feat-me.feat-pre .panel-mount .mp { pointer-events: none; }
.feat-se { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: var(--feat-se-gap); }
.feat-head + .feat-se { margin-top: var(--feat-me-gap); }    /* (an SE right under TS) */
.feat .feat-se + .feat-me { margin-top: var(--feat-se-gap); }   /* (...and a stage under such an SE) */
.feat .hint { margin: 0; font-size: 14px; }
/* THE STAGE (see the knobs above) */
.feat .feat-me { margin-top: var(--feat-me-gap); border-radius: var(--stage-r); background: var(--stage-bg); box-shadow: inset 0 0 0 1px var(--stage-line); }   /* (its gap under TS set here: a module's own rule - .ae's 44 px - never wins) */
/* the controls: one dark switch track for every choice (Reveal's looks, the axes, the speed graph's presets) */
.feats .seg { background: rgba(255, 255, 255, .08); }        /* (the switches on black: .seg-dark's look) */
.feats .seg button { color: var(--dk-ink-2); }
.feats .seg button:hover, .feats .seg button[aria-selected="true"] { color: #fff; }
.feats .seg .seg-pill { background: rgba(255, 255, 255, .16); box-shadow: none; }
/* 1 Reveal: the notebook page lies in its stage; its replay button sits in the page's corner (a media control on its media) */
/* THE FONT'S NAME ("Spanish Signature" - the variable fonts video's line) has a strip of its own at the bottom of the page: from the
   page's bottom-most ruled line to the page's edge is exactly one line spacing, the name in its middle - as much space above it as
   below it. The page is --rv-name-room taller for it (about one line) and the word is fitted to the page above it. The ruled lines are
   the page's own, the same for every look (js/pen.js TUNE.page: 9 lines, the strip one spacing) - the word sits on one of them */
.feat #revealSheet {
  height: calc(var(--stage-h) + var(--rv-name-room));
  --rv-name-room: clamp(22px, 6.6vw, 30px);   /* PHONES: how much taller the page is - about one of its line spacings (26.5 px on a
                                402 px iPhone).  More = a taller page (the 9 lines a little wider apart), less = shorter.  0 = no strip */
  --rv-name-color: #6E6E73;  /* the name's colour, phone and laptop.  Now #6E6E73 (was #86868B).  Darker: #515154, #3A3A3C.  Lighter: #86868B */
  --rv-name-track: .00em;   /* the names' letter spacing (all four looks' font names), phone and laptop.  Now -.01em (was .01em).
                                Tighter: -.02em.  Looser: 0, .01em */
}
/* LAPTOPS: the same, from the page's height (32.8 px at 1440 x 900, 29 px at 1280 x 800) */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .feat #revealSheet { --rv-name-room: clamp(24px, calc(var(--stage-h) * .135), 34px); } }
.rv-name { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; white-space: nowrap; transform: translateX(-50%); font-size: 13px; line-height: 16px;
  font-weight: 500; letter-spacing: var(--rv-name-track, .01em); color: var(--rv-name-color, #6E6E73); pointer-events: none; }
.rv-name:not(.on) { visibility: hidden; }   /* (until js/pen.js has placed it - and once placed it only inherits: never "visible", which would
                                               show it through the feature's own hidden states, .feat-wait / .feat-pre) */
.feat .rv-paper { inset: var(--stage-pad); max-width: none; margin: 0; border-radius: max(6px, calc(var(--stage-r) - var(--stage-pad))); box-shadow: none; }
.feat .rv-paper .replay { position: absolute; right: 10px; bottom: calc(10px + var(--rv-name-room)); z-index: 1; width: 34px; height: 34px; background: rgba(0, 0, 0, .06); }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .feat .rv-paper .replay { bottom: 10px; } }   /* (phones: it keeps its place on the page, over the name's strip; laptops: in the page's corner as before) */
.feat .rv-paper .replay:hover { background: rgba(0, 0, 0, .1); }
.feat .rv-paper .replay svg { width: 16px; height: 16px; stroke: #1D1D1F; }
/* (while it arrives - js/cards.js TUNE.paperOpen: a plain white sheet lies over the page's own colour, under the ink, and gives way
   as the page comes in - all of it at once (--pm-a), or under the opening's own strip (--pm-img) - so while it is dim it is only
   black and white mixed, pure greys, never a dimmed warm page) */
.feat #revealSheet.paper-open .rv-paper { isolation: isolate; }
.feat #revealSheet.paper-open .rv-paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #FFFFFF; pointer-events: none; opacity: var(--pm-a, 1);
  -webkit-mask-image: var(--pm-img); mask-image: var(--pm-img); -webkit-mask-size: var(--pm-size); mask-size: var(--pm-size);
  -webkit-mask-position: var(--pm-pos); mask-position: var(--pm-pos); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.feat .rv-foot { padding: 0; }
.feat .rv-foot .seg { grid-auto-columns: auto; max-width: 100%; }
.feat .rv-foot .seg button { padding: 0 12px; font-size: 14px; }
@media (max-width: 380px) { .feat .rv-foot .seg button { padding: 0 9px; font-size: 13.5px; } }   /* (small phones: the four looks still fit) */
@media (max-width: 340px) { .feat .rv-foot .seg button { padding: 0 7px; font-size: 12px; } }
/* 2 Proximity: the buy window's Proximity slide, white letters, on the stage's grey tile (js/prox.js keeps the radar's whole circle off its edges) */
.feat .prox-stage { height: var(--stage-h); overflow: hidden; -webkit-user-select: none; user-select: none; }   /* (the stages' own grey tile; a radar carried to the edge: its circle cut at the tile's rounded edge) */
/* 3 Variable fonts: the same R in two square windows side by side - After Effects' way on the left, the plugin's on the right
   (js/stretch.js, its TUNE: the slider's ends, the letter's size, where the cut starts) - each its own stage tile, a small grey caption
   under each; under them the axis tabs, then the one slider that drives both windows, then the hint. In the plugin's window, Height
   and Width show the Slice cut as blue lines while the letter changes (drawn in its canvas). On Slant (the same in both) "Same"
   sits between the windows. The video is a stage of its own under the controls */
.feat .axes-cmp {
  --ax-gap: clamp(10px, 2.8vw, 18px);   /* between the two windows (11 px on a phone, 18 px on a laptop).  Try 8px - 24px */
  --ax-cap-gap: 10px;                   /* a window to its caption.  Try 6px - 14px */
  --ax-cap: #86868B;                    /* the captions' grey (the video's "Articulat CF Medium" line's).  Darker: #6E6E73 */
  --ax-st-w: 36px;                      /* the Slice switch: its track's width ... */
  --ax-st-h: 22px;                      /* ...and height (its knob: 4 px smaller).  iOS's own: 51 x 31 */
  --ax-st-on: var(--blue-bright);       /* its track while Slice is on (the cut's blue) */
  --ax-st-off: rgba(255, 255, 255, .16);   /* ...and while it is off */
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--ax-gap); row-gap: var(--ax-cap-gap);
  background: none; box-shadow: none; border-radius: 0;   /* (the windows are the tiles, not this) */
}
/* (every piece placed by hand: the Slice switch on row 1 over the plugin's window, the windows on row 2, their captions on row 3,
   "Same" over both windows' row - the switch as far above its window as the caption is under it) */
.axes-cmp > :nth-child(1) { grid-area: 2 / 1; } .axes-cmp > :nth-child(2) { grid-area: 2 / 2; }
.axes-cmp > :nth-child(3) { grid-area: 3 / 1; } .axes-cmp > :nth-child(4) { grid-area: 3 / 2; }
.ax-box { position: relative; aspect-ratio: 1 / 1; border-radius: var(--stage-r); background: var(--stage-bg); box-shadow: inset 0 0 0 1px var(--stage-line); overflow: hidden; }
@supports not (aspect-ratio: 1 / 1) { .ax-box::before { content: ""; display: block; padding-top: 100%; } }   /* (older Safari: square all the same) */
.ax-box canvas { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.ax-cap { position: relative; height: 16px; margin: 0; text-align: center; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .01em; color: var(--ax-cap); }
/* (its words: each on a layer of its own - js/stretch.js rolls the old ones up and out and the new ones up into place, like card 1's "99%") */
.ax-cap-w { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; transform-origin: 50% 66%; will-change: transform, opacity, filter; }
/* "Same" (Slant: After Effects' Skew and the plugin's Slant are the same lean): a small pill over the gap, halfway down the windows,
   with a ring of the page's black round it so it reads as sitting between them */
.ax-same { grid-area: 2 / 1 / 3 / 3; align-self: center; justify-self: center; z-index: 1; padding: 5px 11px; border-radius: 999px;
  background: #2C2C2E; box-shadow: 0 0 0 5px #000; color: #F5F5F7; font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: .01em;
  opacity: 0; transform: scale(.86); transition: opacity .3s var(--ease-out), transform .45s var(--ease-out); pointer-events: none; }
.ax-same.on { opacity: 1; transform: none; }
/* the slider: as wide as the tabs above it, its middle = 100 %; the blue runs from the middle to the knob */
.ax-slider { position: relative; width: min(calc(100% - 2 * var(--pad)), 440px); height: 44px; touch-action: pan-y; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ax-rail { position: absolute; left: 14px; right: 14px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.ax-fill { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; background: var(--blue-bright); transform-origin: 0 50%; transform: scaleX(0); }
.ax-mid { position: absolute; left: 50%; top: 50%; width: 2px; height: 10px; margin: -5px 0 0 -1px; border-radius: 1px; background: rgba(255, 255, 255, .32); }
.ax-knob { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 .5px 4px rgba(0, 0, 0, .12), 0 6px 13px rgba(0, 0, 0, .12); touch-action: none; will-change: transform; }
/* the Slice switch (Height and Width): an on / off switch with its name, over the plugin's window on its right edge - blue and to the
   right while Slice is on, grey and to the left when off (js/stretch.js: .lit, aria-checked); it shows on those two tabs only (.on),
   and keeps its row on the other two so nothing moves between tabs */
.ax-st { grid-area: 1 / 2; justify-self: end; align-self: end; position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: var(--ax-st-h); margin: 0; padding: 0; border: 0; background: none; color: var(--ax-cap); font: inherit; font-size: 13px; line-height: 16px;
  font-weight: 500; letter-spacing: .01em; -webkit-tap-highlight-color: transparent; cursor: pointer; opacity: 0; visibility: hidden;
  transition: color .2s, opacity .3s var(--ease-out), visibility 0s .3s; }
.ax-st.on { opacity: 1; visibility: inherit; transition: color .2s, opacity .3s var(--ease-out), visibility 0s; }
.ax-st-t { position: relative; flex: none; width: var(--ax-st-w); height: var(--ax-st-h); border-radius: 999px; background: var(--ax-st-off);
  transition: background-color .25s var(--ease-out); }
/* (its knob: white, 2 px in from the track's edge; a press stretches it a little towards the middle, as iOS's does) */
.ax-st-t::before { content: ""; position: absolute; left: 2px; top: 2px; width: calc(var(--ax-st-h) - 4px); height: calc(var(--ax-st-h) - 4px);
  border-radius: 999px; background: #FFFFFF; box-shadow: 0 .5px 1.5px rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, .2);
  transition: transform .32s cubic-bezier(.3, .7, .25, 1.1), width .2s var(--ease-out); }
.ax-st.lit .ax-st-t { background: var(--ax-st-on); }
.ax-st.lit .ax-st-t::before { transform: translateX(calc(var(--ax-st-w) - var(--ax-st-h))); }
.ax-st:active .ax-st-t::before { width: calc(var(--ax-st-h) + 2px); }
.ax-st.lit:active .ax-st-t::before { transform: translateX(calc(var(--ax-st-w) - var(--ax-st-h) - 6px)); }
.ax-st:focus { outline: none; }
.ax-st:focus-visible .ax-st-t { box-shadow: 0 0 0 3px rgba(41, 151, 255, .55); }
@media (hover: hover) { .ax-st:hover { color: #F5F5F7; } }
.ax-st::after { content: ""; position: absolute; inset: -11px -8px; }   /* (a finger-sized place to tap: 44 px tall) */
.ax-slider:focus-visible .ax-knob { box-shadow: 0 .5px 4px rgba(0, 0, 0, .12), 0 6px 13px rgba(0, 0, 0, .12), 0 0 0 4px rgba(41, 151, 255, .55); }
/* (small phones, under 380 px: the four tabs need the column's whole width to fit - the slider stays as wide as them) */
@media (max-width: 379px) { .feat #axesSeg, .feat .ax-slider { width: 100%; } .feat #axesSeg button { padding: 0 6px; } }
.feat-video { position: relative; height: var(--stage-h); margin-top: var(--feat-me-gap); border-radius: var(--stage-r); overflow: hidden; background: var(--stage-bg); isolation: isolate; }
.feat-video::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--stage-line); pointer-events: none; }
/* (the video's black lifted to exactly the stage's grey and its white kept: v -> g + (1 - g) v with g = 22/255, the same as a
   "screen" blend over the grey, without a blend) */
.feat-video video { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; filter: contrast(.841) brightness(1.086); }
/* (js/stretch.js layoutVideo places and sizes the video - EVERY DAY as wide at its widest as ELASTIC gets in Weight - and the
   line under it: the word's whole extent over the loop and this line, one group, centred in the tile) */
.feat-video-cap { position: absolute; left: 0; right: 0; top: 0; margin: 0; text-align: center; font-size: 13px; line-height: 16px; font-weight: 500;
  letter-spacing: .01em; color: #86868B; pointer-events: none; }
/* 4 Motion: one stage - the word on top, then the panel's own Easing box (Motion > Easing, js/ease.js): the square graph in its
   black well, and beside it the easing presets, Overshoot, Anticipation and Safety Clamp - the panel's colours, sizes and rows,
   scaled by --ek. The rule of corners: on a phone the box runs edge to edge 8 px inside the stage, so its corners are the stage's
   less 8 px; on a wider screen it sits centred under the word, with the panel's own corners. The presets below stay one track */
.feat .motion-main { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.feat .motion-word { width: 100%; height: var(--mword-h); flex: 0 0 auto; border-radius: var(--stage-r) var(--stage-r) 0 0; background: none; box-shadow: none; overflow: hidden; }
.feat .motion-word canvas { height: 100%; min-height: 0; }
.feat .ease-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(8px * var(--ek)); padding: calc(8px * var(--ek));
  margin: 0 8px 8px; border-radius: calc(var(--stage-r) - 8px); background: #1C1C1E;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Twin Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
.feat .ease-well canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: calc(10px * var(--ek)); background: #111113; touch-action: none; cursor: crosshair; }
.feat .ease-side { display: flex; flex-direction: column; min-width: 0; }
/* the easing presets: the panel's segmented control (white piece under the chosen one) */
.feat .ease-seg { flex: 0 0 auto; display: flex; height: calc(24px * var(--ek)); margin-bottom: calc(8px * var(--ek)); padding: calc(2px * var(--ek)); border-radius: calc(12px * var(--ek)); background: #2A2A2C; }
.feat .ease-seg button { flex: 1 1 0; min-width: 0; height: 100%; border-radius: calc(10px * var(--ek)); display: grid; place-items: center; color: #FFFFFF; position: relative; transition: background-color .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.feat .ease-seg button svg { width: calc(13px * var(--ek)); height: calc(13px * var(--ek)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.feat .ease-seg button.on { background: #FFFFFF; color: #48484A; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
@media (hover: hover) { .feat .ease-seg button:not(.on):hover { background: rgba(255, 255, 255, .08); } }
/* the three rows share out the rest of the graph's height, the last ending level with it; hairlines between them */
.feat .ease-row { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 0 calc(4px * var(--ek)); font-size: calc(12px * var(--ek)); line-height: 1.2; color: #FFFFFF; }
.feat .ease-row::before { content: ""; position: absolute; top: 0; left: calc(4px * var(--ek)); right: calc(4px * var(--ek)); height: 1px; background: rgba(84, 84, 88, .65); transform: scaleY(.5); transform-origin: 0 0; }
.feat .ease-l { flex: 0 1 auto; min-width: 0; white-space: normal; }   /* (a name that doesn't fit wraps, as in the panel) */
.feat .ease-v { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.feat .ease-v b { font-weight: 400; color: #FFFFFF; }
.feat .ease-v i { font-style: normal; margin-left: .3em; color: rgba(235, 235, 245, .6); }
/* Safety Clamp: the panel's iOS 26 switch, on (as the panel opens it) */
.feat .ease-tgl { position: relative; flex: 0 0 auto; margin-left: auto; width: calc(41.04px * var(--ek)); height: calc(18px * var(--ek)); border-radius: calc(9px * var(--ek)); background: rgb(48, 209, 88); }
.feat .ease-tgl::after { content: ""; position: absolute; top: calc(1.08px * var(--ek)); left: calc(15.66px * var(--ek)); width: calc(23.94px * var(--ek)); height: calc(15.84px * var(--ek)); border-radius: calc(7.92px * var(--ek)); background: #FFFFFF; box-shadow: 0 1.5px 14px rgba(0, 0, 0, .16); }
.feats .presets { justify-content: center; gap: 0; padding: 3px; max-width: 100%; border-radius: 21px; background: rgba(255, 255, 255, .08); }
.feats .presets .chip { height: 36px; padding: 0 13px; border-radius: 999px; background: transparent; color: var(--dk-ink-2); font-size: 14px; font-weight: 550; transition: background .3s, color .3s; }
.feats .presets .chip:hover { background: transparent; color: #fff; }
.feats .presets .chip.on { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 350px) { .feats { --ek: 1; } }                    /* (the smallest phones: the panel's own size) */
@media (min-width: 700px) {
  .feats { --mword-h: clamp(140px, 19vh, 190px); --ek: 1.25; }     /* (wider: a taller word; the box centred under it) */
  .feat .ease-card { width: min(100% - 2 * var(--stage-pad), var(--ease-w)); margin: 0 auto var(--stage-pad); border-radius: calc(14px * var(--ek)); }
}
/* 5 Output: the AE window in its stage and its caption (Things to Know has its own section now: "9b Things to Know") */
.feat .ae { margin-left: 0; margin-right: 0; max-width: none; padding: var(--stage-pad); }   /* (its top: the stages' gaps above) */
.feat .ae-window { max-width: none; margin: 0; border-radius: max(8px, calc(var(--stage-r) - var(--stage-pad))); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.feat .ae-row { height: 21px; }                  /* (a phone-sized AE window: slimmer layer rows and viewer margin) */
.feat .ae-viewer { padding: 10px; }
.feat .ae-tl-head { height: 24px; }
/* 6 The panel: in its stage, as big as the screen lets it be (js/cards.js layoutFeats takes the stage's margin off) */
.feat .panel-main { padding: var(--stage-pad); }
/* the note under it - what this demo is. Laptops (the panel's laptop look: a mouse and 900 px or more, as js/cards.js WIDE) add
   the Undo / Redo shortcuts; phones can't type them. (js/cards.js fits the panel to the screen with its Full screen button only,
   so the note never makes the panel smaller) */
.feat .panel-note { margin: 0; max-width: 30em; text-align: center; font-size: 13px; line-height: 1.45; font-weight: 500; letter-spacing: .005em; color: #86868B; text-wrap: balance; }
.feat .panel-note .pn-keys { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .feat .panel-note { max-width: 40em; } .feat .panel-note .pn-keys { display: inline; } }
/* (no top layer - iOS 16 and older: the panel zooms in its place; its TL, TS, button and note fade round it) */
html.pfs-inplace .feat[data-feat="panel"] .feat-head, html.pfs-inplace .feat[data-feat="panel"] .panel-note { transition: opacity .3s var(--ease-apple); }
html.pfs-inplace .feat.pfs-on .feat-head, html.pfs-inplace .feat.pfs-on .pfs-open, html.pfs-inplace .feat.pfs-on .panel-note { opacity: 0; pointer-events: none; transition: opacity .22s var(--ease-apple); }
html.pfs-inplace .feat.pfs-top .feat-me { z-index: 4; }
html.pfs-inplace.pfs-on .feats { z-index: 30; }

/* -------------------------------------------------------------- 2 proximity */
/* (the canvas fills the card's main box - see THE CARDS) */

/* -------------------------------------------------------------- 3 advanced controls */
.seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--fill);
  width: min(calc(100% - 2 * var(--pad)), 440px);
}
.seg button { position: relative; z-index: 1; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 550; color: var(--ink-2); transition: color .3s; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { color: var(--ink); }
.seg-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 4); border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 3px 10px rgba(0, 0, 0, .07); transition: transform var(--seg-time) var(--seg-ease), width var(--seg-time) var(--seg-ease);
}
.seg-dark { background: rgba(255, 255, 255, .08); }
.seg-dark button { color: var(--dk-ink-2); }
.seg-dark button:hover, .seg-dark button[aria-selected="true"] { color: #fff; }
.seg-dark .seg-pill { background: rgba(255, 255, 255, .16); box-shadow: none; }

/* -------------------------------------------------------------- 4 reveal (plays by itself) */
.rv-foot { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px 22px; flex-wrap: wrap; }
.rv-foot .seg { width: auto; }
.rv-foot .seg button { padding: 0 16px; font-size: 13.5px; }
.replay { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; transition: background .25s, transform .4s var(--ease-back); }
.replay:hover { background: rgba(255, 255, 255, .15); }
.replay:hover svg { transform: rotate(-200deg); }
.replay:active { transform: scale(.92); }
.replay svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .7s var(--ease-out); }
.pen-null { position: absolute; left: 0; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border: 1.6px solid var(--blue-bright); opacity: 0; transition: opacity .25s; pointer-events: none; will-change: transform; }
.pen-null::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px; border-radius: 50%; background: var(--blue-bright); }
.pen-null.on { opacity: 1; }

/* -------------------------------------------------------------- 5 motion */
.motion-stage { margin-top: 44px; display: grid; gap: 16px; }
.motion-word { border-radius: var(--radius); background: var(--card-alt); overflow: hidden; }
.motion-word canvas { width: 100%; height: clamp(160px, 38vw, 360px); }
.motion-controls { display: grid; grid-template-columns: 1fr; gap: 14px; }
.graph-card { position: relative; border-radius: var(--radius); background: #1D1D1F; overflow: hidden; aspect-ratio: 1.35; }
.graph-card canvas { width: 100%; height: 100%; touch-action: none; }
.graph-label { position: absolute; left: 18px; bottom: 16px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .45); pointer-events: none; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.chip {
  height: 36px; padding: 0 16px; border-radius: 999px; background: var(--card-alt); font-size: 14px; font-weight: 550; color: var(--ink);
  transition: background .25s, color .25s, transform .4s var(--ease-back);
}
.chip:hover { background: var(--fill); }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--ink); color: #fff; }
@media (min-width: 900px) {
  .motion-stage { grid-template-columns: 1.5fr 1fr; align-items: stretch; }
  .motion-word canvas { height: 100%; min-height: 440px; }
  .motion-controls { grid-template-rows: auto 1fr; }
}

/* -------------------------------------------------------------- 6 output (an AE window) */
.ae { margin-top: 44px; max-width: 1080px; }
@media (min-width: 900px) { .ae { margin-left: auto; margin-right: auto; } }
.ae-window { border-radius: 18px; overflow: hidden; background: #232323; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .12); color: #BDBDBD; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.ae-bar { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #2E2E2E; border-bottom: 1px solid #1A1A1A; }
.ae-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.ae-bar i:nth-child(2) { background: #FEBC2E; } .ae-bar i:nth-child(3) { background: #28C840; }
.ae-bar span { margin-left: 8px; font: 500 11px/1 var(--mono); color: #8C8C8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-viewer { background: #161616; padding: 14px; }
.ae-viewer canvas { width: 100%; aspect-ratio: 16 / 6; background: #fff; border-radius: 2px; }
.ae-timeline { position: relative; background: #1E1E1E; border-top: 1px solid #111; font: 500 11px/1 var(--mono); }
.ae-tl-head { display: flex; height: 28px; border-bottom: 1px solid #111; }
.ae-tc { flex: 0 0 38%; display: flex; align-items: center; padding-left: 12px; color: #3FA7FF; font-variant-numeric: tabular-nums; }
.ae-tl-ruler { position: relative; flex: 1; }
.ae-tl-ruler i { position: absolute; bottom: 0; width: 1px; height: 5px; background: #555; }
.ae-rows { position: relative; }
.ae-row { display: flex; height: 26px; border-bottom: 1px solid #191919; }
.ae-name { flex: 0 0 38%; display: flex; align-items: center; gap: 8px; padding-left: 12px; color: #D0D0D0; white-space: nowrap; overflow: hidden; }
.ae-name .sw { width: 9px; height: 9px; border-radius: 2px; background: #7C9CF4; flex: 0 0 auto; }
.ae-name .star { color: #E8B84A; }
.ae-name b { color: #fff; font-weight: 600; }
.ae-name em { font-style: normal; color: #777; }
.ae-track { position: relative; flex: 1; }
.ae-kf { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #C8C8C8; transform: rotate(45deg) scale(0); transition: transform .5s var(--ease-back); }
.ae-kf.on { transform: rotate(45deg) scale(1); }
.ae-bar-span { position: absolute; top: 9px; bottom: 9px; background: rgba(124, 156, 244, .22); border-radius: 2px; transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease-out); }
.ae-bar-span.on { transform: scaleX(1); }
.ae-cti { position: absolute; top: 0; bottom: 0; width: 1px; background: #3FA7FF; pointer-events: none; will-change: transform; }
/* its head, as After Effects draws its playhead: a blue tab in the time ruler with a point at the bottom, on the line (the nav
   ruler's playhead is the same shape, smaller) */
.ae-cti::before { content: ""; position: absolute; top: 3px; left: -5px; width: 11px; height: 14px; background: #3FA7FF; clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); }
.pills { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pills li { padding: 9px 16px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 550; color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: background .25s, color .25s, transform .45s var(--ease-back); cursor: default; }
.pills li:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

/* -------------------------------------------------------------- 7 the panel (black) */
.shots { margin-top: 48px; display: flex; gap: 18px; padding: 8px var(--pad) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.shots::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 auto; margin: 0; scroll-snap-align: center; width: min(76vw, 340px); }
.shot img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.shot figcaption { margin-top: 14px; font-size: 14px; line-height: 1.35; color: var(--dk-ink-2); }
.shot figcaption b { color: var(--dk-ink); font-weight: 600; }
.shots-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.round { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; transition: background .25s, transform .4s var(--ease-back), opacity .25s; }
.round:hover { background: rgba(255, 255, 255, .18); }
.round:active { transform: scale(.92); }
.round:disabled { opacity: .3; cursor: default; }
.round svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .shots { padding-left: max(var(--pad), calc((100vw - 1280px) / 2 + var(--pad))); } }

/* -------------------------------------------------------------- "So, ready to animate?" (js/ready.js - every control is in its TUNE)
   After the last feature, the screen holds still (.rd-stage, sticky, held for the stretch .rd-hold makes) and the words sweep through
   it with your scroll, then the page turns white and the buy window comes up. js/ready.js sets the section's colour, the letters'
   size and places, the hold's length and where it starts (it reaches up over the end of the features page: a margin on .rd-hold) */
.ready { position: relative; z-index: 20; display: flow-root; background: #000; color: #fff; }   /* (flow-root: .rd-hold's margin stays inside) */
/* (pointer-events none: the hold reaches up over the end of the panel feature - the panel's bottom, its Full screen button and
   note stay under the finger and the mouse; nothing in this section takes a tap) */
.rd-hold { position: relative; height: 100vh; height: 100svh; pointer-events: none; }
/* the stage reaches the tallest the screen gets (100lvh: a phone's bars tucked away), so a letter is never cut off on the screen */
.rd-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; pointer-events: none; }
.rd-line {
  position: absolute; left: 0; top: 40%; width: max-content; margin: 0; display: flex; white-space: nowrap;
  font: 500 250px/.8 var(--font); font-stretch: 100%; letter-spacing: -.04em; color: #fff;
  -webkit-user-select: none; user-select: none;
}
.rd-line span { display: inline-block; flex: none; }
.rd-on .rd-l { visibility: hidden; }                         /* (js/ready.js shows each letter while it is on the screen) */
.rd-track { position: absolute; left: 0; top: 0; width: 1px; pointer-events: none; }   /* (phones: the words' view timeline - js/ready.js css()) */
.rd-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* -------------------------------------------------------------- 9 Documentations, Things to Know, Refund Policy
   Three sections in a row, each the same: its heading, its line, then an Apple quick start card (the MacBook Air's: 1.6 wide
   per 1 tall, its corners 5.5 % of its width) - a cover, then one page per thing, turned by the round buttons in the bottom
   corners. The buttons sit concentric in the corners: their centre is the corner's centre. Phones and laptops alike. */
.docs {
  --doc-max: 520px;          /* the widest the card gets (iPads); on a phone it is as wide as the text column */
  --w: min(100cqw, var(--doc-max));   /* (the card's width: every size below follows it) */
  --doc-ratio: 1.6;          /* its shape: width / height (Apple's card measures 1.6) */
  --doc-corner: .055;        /* corner radius, a share of the card's width (Apple's card: .055 = 19 px on a 346 px card) */
  --doc-btn: .075;           /* the round buttons' size, a share of the width (26 px on a 346 px card). Their gap to the
                                edges follows from the corner: radius - half the button (concentric) */
  --doc-pad-x: .056;         /* the text's margin left and right, a share of the width (Apple's card) */
  --doc-pad-y: .064;         /* ...and above the first line */
  --doc-h: clamp(14.5px, calc(var(--w) * .048), 23px);    /* a page's title: SF Pro Semibold (16.6 px on a 346 px card) */
  --doc-p: clamp(12.5px, calc(var(--w) * .041), 19px);    /* its text (14.2 px on a 346 px card) */
  --doc-cover: clamp(18px, calc(var(--w) * .054), 28px);  /* "Morpheus 2.0" on the cover: SF Pro Display Semibold */
  --doc-turn: .55s;          /* how long a page takes to turn */
  --doc-paper: #FFFFFF;
  --doc-ink: #1D1D1F;        /* titles and the cover */
  --doc-ink-2: #515154;      /* the text: Apple's printed grey */
  --doc-ink-3: #A1A1A6;      /* the page number */
  --doc-btn-bg: #E8E8ED;     /* the buttons (Apple's paddle grey) ... */
  --doc-btn-ink: #1D1D1F;    /* ...and their chevrons */
  --doc-off: .32;            /* a button with nowhere to go (the left one on the cover, the right one on the last page) */
  --doc-ico: clamp(22px, calc(var(--w) * .088), 40px);  /* a page's icon tile (30 px on a 346 px card), above its title */
  container-type: inline-size;
  margin-top: 44px;
}
.card-se .docs { width: 100%; margin-top: 0; }   /* (Things to Know in card 6: between TS and the AE window - js/cards.js seAbove) */
.doc-card {
  position: relative; width: var(--w); aspect-ratio: var(--doc-ratio); margin: 0 auto; overflow: hidden;
  border-radius: calc(var(--w) * var(--doc-corner)); background: var(--doc-paper);
  box-shadow: 0 .5px 1px rgba(0, 0, 0, .06), 0 14px 34px -14px rgba(0, 0, 0, .2);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Twin Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  letter-spacing: normal; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.doc-strip { display: flex; height: 100%; transition: transform var(--doc-turn) cubic-bezier(.32, .72, 0, 1); will-change: transform; }
.doc-page { flex: 0 0 100%; position: relative; height: 100%; padding: calc(var(--w) * var(--doc-pad-y)) calc(var(--w) * var(--doc-pad-x)) 0; }
.doc-ico { width: var(--doc-ico); height: var(--doc-ico); border-radius: calc(var(--doc-ico) * .3); display: grid; place-items: center; background: rgba(0, 113, 227, .08); margin-bottom: calc(var(--w) * .03); }
.doc-ico svg { width: 50%; height: 50%; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doc-page h3 { margin: 0; font-size: var(--doc-h); line-height: 1.25; font-weight: 600; color: var(--doc-ink); }
.doc-page p { margin: .4em 0 0; font-size: var(--doc-p); line-height: 1.38; color: var(--doc-ink-2); text-wrap: pretty; }
/* a page's list (the Refund Policy's points): the text's size and grey, a small dot in the icons' blue before each point */
.doc-list { margin: .4em 0 0; padding: 0; list-style: none; display: grid; gap: .2em; font-size: var(--doc-p); }   /* (its em = the text's) */
.doc-list li { position: relative; padding-left: 1em; line-height: 1.38; color: var(--doc-ink-2); text-wrap: pretty; }
.doc-list li::before { content: ""; position: absolute; left: .12em; top: .52em; width: .34em; height: .34em; border-radius: 50%; background: var(--blue); }
.doc-cover { display: grid; place-items: center; padding: 0; }
.doc-cover h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Twin Sans", "Helvetica Neue", system-ui, sans-serif; font-size: var(--doc-cover); font-weight: 600; letter-spacing: -.012em; }
.doc-no { position: absolute; left: 0; right: 0; bottom: calc(var(--w) * var(--doc-corner)); transform: translateY(50%); text-align: center; font-size: 11px; line-height: 1; color: var(--doc-ink-3); font-variant-numeric: tabular-nums; }
.doc-btn {
  --gap: calc(var(--w) * (var(--doc-corner) - var(--doc-btn) / 2));
  position: absolute; bottom: var(--gap); z-index: 1; width: calc(var(--w) * var(--doc-btn)); height: calc(var(--w) * var(--doc-btn));
  border-radius: 50%; display: grid; place-items: center; background: var(--doc-btn-bg); color: var(--doc-btn-ink);
  transition: opacity .25s, scale .2s var(--ease-out), background-color .2s;
}
.doc-prev { left: var(--gap); }
.doc-next { right: var(--gap); }
.doc-btn::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }   /* a finger-sized target round the small button */
.doc-btn svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.doc-btn:active:not(:disabled) { scale: .86; background: #DDDDE3; }
.doc-btn:disabled { opacity: var(--doc-off); cursor: default; }
.doc-btn:focus-visible { outline-offset: 2px; border-radius: 50%; }
@media (hover: hover) { .doc-btn:hover:not(:disabled) { background: #DDDDE3; } }


/* -------------------------------------------------------------- 9b the three in a row
   Things to Know and the Refund Policy follow Documentations on the same grey, so each starts one section gap under the card
   before it, not two: the same beat from one to the next. Phones and laptops alike: each heading, its line and its card centred,
   every heading on one line */
#things, #refunds { padding-top: 0; }
/* TL and TS = Apple's section title with its line under it (apple.com/iphone-duo, measured Oct 6 2026: the title "Power coupled."
   and its line; Apple's titles over its boxes, "Get the highlights.", are the same size). TL in SF Pro Display Semibold, TS in SF
   Regular in Apple's grey, at Apple's three sizes by window width: phones (up to 734 px) 32 / 17 px, tablets and small windows
   (735 - 1068 px) 40 / 19 px, laptops (1069 px up) 48 / 21 px. Apple's letter spacing is written for the SF it downloads; the
   device's own SF spaces its letters by itself, so "Apple's look" below is measured: our titles and lines come out exactly as wide
   as Apple draws the same words. The two spacing knobs add to that */
#fineprint, #things, #refunds {
  --cards-tl-size: 1;        /* TL's size ("Documentations." ...), share of Apple's (32 px phones, 40 px tablets, 48 px laptops).
                                On a phone too narrow for "Refunds, made clear." on one line (under ~343 px wide) all three are drawn
                                just small enough to fit.  Try .8 - 1.3 */
  --cards-ts-size: 1;        /* TS's size (the line under it), share of Apple's (17 / 19 / 21 px).  Try .85 - 1.2 */
  --cards-tl-track: -.01em;  /* TL's letter spacing on top of Apple's look: 0 = exactly Apple's, less = tighter. -.01em = a little
                                tighter than Apple.  Try -.025em - .01em */
  --cards-ts-track: -.007em; /* TS's letter spacing on top of Apple's look, the same way. -.007em = a little tighter than Apple.
                                Try -.02em - .01em */
  --cards-gap: 1;            /* the space from TL to TS, share of Apple's (13.6 / 15.2 / 16.8 px between their lines).  Try .5 - 2 */
  --cards-box: 1;            /* the space from TS to the card, share of Apple's (its title to its boxes: 32 / 40 / 48 px).
                                Try .6 - 1.6 */
  /* (Apple's numbers on each screen - not knobs. *-apple = the letter spacing that gives Apple's width with the device's own SF) */
  --c-tl: 32px; --c-tl-lh: 1.125; --c-tl-apple: -.0099em; --c-ts: 17px; --c-ts-lh: 1.4706; --c-ts-apple: .0034em; --c-gap: 13.6px; --c-box: 32px;
  container-type: inline-size;   /* (100cqi below = the section's width, a scrollbar left out) */
}
@media (min-width: 735px) {
  #fineprint, #things, #refunds { --c-tl: 40px; --c-tl-lh: 1.1; --c-tl-apple: -.0104em; --c-ts: 19px; --c-ts-lh: 1.4211; --c-ts-apple: -.0207em; --c-gap: 15.2px; --c-box: 40px; }
}
@media (min-width: 1069px) {
  #fineprint, #things, #refunds { --c-tl: 48px; --c-tl-lh: 1.0833; --c-tl-apple: -.0115em; --c-ts: 21px; --c-ts-lh: 1.381; --c-ts-apple: -.0101em; --c-gap: 16.8px; --c-box: 48px; }
}
#fineprint .head, #things .head, #refunds .head { text-align: center; }
#fineprint .h2, #things .h2, #refunds .h2 {
  max-width: none; margin-left: auto; margin-right: auto;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Twin Sans", "Helvetica Neue", system-ui, sans-serif; font-weight: 600;
  /* (the fit: "Refunds, made clear." is at most 9.3 x its size wide, at Apple's letter spacing or tighter) */
  font-size: min(calc(var(--c-tl) * var(--cards-tl-size)), calc((100cqi - 2 * var(--pad)) / 9.3));
  line-height: var(--c-tl-lh); letter-spacing: calc(var(--c-tl-apple) + var(--cards-tl-track));
}
#fineprint .sub, #things .sub, #refunds .sub {
  max-width: none; margin: calc(var(--c-gap) * var(--cards-gap)) auto 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Twin Sans", "Helvetica Neue", system-ui, sans-serif; font-weight: 400;
  font-size: calc(var(--c-ts) * var(--cards-ts-size)); line-height: var(--c-ts-lh);
  letter-spacing: calc(var(--c-ts-apple) + var(--cards-ts-track)); color: #6E6E73; text-wrap: balance;
}
#fineprint .docs, #things .docs, #refunds .docs { margin-top: calc(var(--c-box) * var(--cards-box)); }
#fineprint .doc-card, #things .doc-card, #refunds .doc-card { margin: 0 auto; }

/* -------------------------------------------------------------- 8b buy (index.html #pricing; js/buy.js the gallery)
   Apple's buy page (apple.com/shop/buy-mac, measured): the title and its price line; a grey gallery with Apple's control under it;
   beside it (laptops, from 960 px) or under it (phones) the price with the one Get button. Words in Apple's own system font, at
   Apple's sizes and greys */
.bw {
  --bw-rail: clamp(320px, 30vw, 400px);   /* laptops: the right column's width */
  --bw-gap: clamp(40px, 4vw, 64px);       /* laptops: between the gallery and the right column */
  --bw-r: 18px;                           /* the gallery's corners (Apple: 18) */
  /* the gallery's size (the grey box): its width and its height, each on its own. Its corners, the feature's name, the arrows and
     the dots keep their own size and their distances from its edges; the animations grow and shrink with its width (After Effects'
     framing: the comp's width = the gallery's width) and keep clear of the name and the arrows (js/buy.js TUNE.clear) */
  --bw-w: 1;                              /* PHONES (and tablets up to 960 px): its width, share of the page's width. It sits in the
                                             middle. 1 = the whole width.  Try .8 - 1 */
  --bw-h: 0.9;                               /* PHONES: its height, share of the height it first had (3/4 of the page's width; that shape
                                             was 4:3). 1 = that.  Try .7 - 1.2 */
  --bw-w-wide: .85;                       /* LAPTOPS: its width, share of the room left of the right column (the right column follows
                                             it, --bw-gap away). 1 = all of that room.  Try .7 - 1 */
  --bw-h-wide: .8;                       /* LAPTOPS: its height, share of the height it first had (4/5 of that room; that shape was
                                             5:4). 1 = that.  Try .7 - 1.1. (It is never taller than the screen under the bar) */
  --bw-min: 264px;                        /* it is never narrower than this (the arrows and the dots need 224 px) */
  --bw-min-h: 190px;                      /* ...nor lower than this (the name, the arrows and some room for the animation) */
  --bw-top: .6;                           /* space above the title, share of the usual section gap (it follows the white page of "So, ready to animate?") */
  --bw-gray: #F5F5F7;                     /* the gallery */
  --bw-ink-2: #6E6E73;                    /* grey lines */
  --bw-ink-3: #86868B;                    /* the grey half of a heading */
  --bw-blue: #0071E3;                     /* the Get button */
  --bw-buy-h: 44px;                       /* the Get button's height (its corners stay 12 px). Was 53px.  Try 40px - 53px */
  /* "Get Morpheus 2.0": Apple's own heading (SF Pro Display Semibold, like apple.com's buy page) */
  --bw-title-size: 1.2;                     /* its size on phones and tablets, share of the site's title size (28 px on a phone, growing
                                             with the screen up to 80 px). 1 = that.  Try .8 - 1.2 */
  --bw-title-size-wide: 1;                /* ...on laptops, from 960 px (1 = the site's 70 - 80 px).  Try .7 - 1.1 */
  --bw-title-y: 5.5px;                      /* its height on the page, phones and tablets: px down (+) or up (-) from its place. Only the
                                             title moves (the price line under it stays).  Try -10px - 10px */
  --bw-title-y-wide: 0px;                 /* ...on laptops.  Try -20px - 20px */
  --bw-title-weight: 600;                 /* its weight: 600 = Semibold, one step thinner than the site's titles (700) */
  --bw-title-track: -.005em;               /* its letter spacing on phones and tablets (Apple at 28 px: .007em; the site's titles: -.035em).
                                             More = airier.  Try -.01em - .02em */
  --bw-title-track-wide: -.015em;         /* ...on laptops, from 960 px (Apple at 80 px: -.015em).  Try -.03em - 0 */
  --bw-sum-track: .00em;                 /* "Your Morpheus 2.0 awaits. Make it yours.": its letter spacing (Apple: .009em; less = tighter) */
  --bw-price-track: -.02em;               /* "$29.99" under it: its letter spacing.  Now -.02em (Apple's +.007em spread the digits).
                                             Try -.03em (tighter) - 0 */
  /* PHONES and tablets only (under 960 px). Laptops keep the title, the arrows, the pill and "Your Morpheus 2.0 awaits." beside the
     gallery. On phones "Your / Morpheus 2.0 awaits. / Make it yours." sits on top in place of the title and its price line, and
     "One-license seat for Morpheus 2.0" over the price */
  --bw-top-size: 38px;                    /* "Your / Morpheus 2.0 awaits. / Make it yours." on top: its size - Apple's iPhone buy page
                                             ("Your new / iPhone 18 Pro Max. / Just the way you want it."): 38px on every phone. On a phone
                                             too narrow for "Morpheus 2.0 awaits." on one line at this size (under ~415 px wide) it is
                                             drawn just small enough to fit, so it stays three lines (402 px: 36.5px).  Try 32px - 44px */
  --bw-top-track: -.0068em;               /* ...its letter spacing. -.0068em = exactly Apple's look (measured: "iPhone 18 Pro Max." 319.8 px
                                             wide at 38px on both sites). Apple writes .004em for its own downloaded SF Pro Display; the
                                             phone's built-in SF already spreads 38 px letters .41 px apart. Its line height is Apple's
                                             too (46px at 38px). (The shrink-to-fit below, 10.2cqi, is worked out for this spacing) */
  --bw-dots-y: 0px;                       /* the five dots in the gallery: px down (+) or up (-) from their place.  Try -12px - 12px */
  --bw-gap-phone: 14.7px;                 /* from the gallery's bottom edge to "One-license seat..." (was 44px). 14.7px = the same space
                                             as from that line to "$29.99" under it (the edge to the top of its capitals = its baseline
                                             to the top of the digits: 20.7 px each, Apple's spacing there).  More = lower */
  --bw-pay-size: 17px;                    /* "One-license seat for Morpheus 2.0" over the price: its size (Apple: 17px). Its letter spacing
                                             = --bw-sum-track, the same as "Your Morpheus 2.0 awaits."  Try 14px - 20px */
  --bw-pay-y: 0px;                        /* ...its height on the page: px down (+) or up (-) from its place. Only it moves (the price
                                             stays).  Try -10px - 10px */
  --bw-price-track-phone: .0034em;        /* "$29.99" and "One-time payment" under it: their letter spacing. .0034em = exactly Apple's
                                             look (measured: "One-time payment" 143.4 px wide on both sites). Apple writes -.022em because it
                                             downloads its own SF Pro Text; the phone's built-in SF already pulls 17 px letters .43 px
                                             together, so -.022em here came out 5 % tighter.  More = airier.  Try -.01em - .015em */
  --bw-link: #0066CC;                     /* links */
  --bw-sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Twin Sans", "Helvetica Neue", system-ui, sans-serif;
  --bw-sfd: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Twin Sans", "Helvetica Neue", system-ui, sans-serif;
  padding-top: calc(var(--sec) * var(--bw-top));
}
.bw-head .h2 {
  max-width: none; font-family: var(--bw-sfd); font-weight: var(--bw-title-weight); letter-spacing: var(--bw-title-track);
  font-size: calc(var(--h2) * var(--bw-title-size)); position: relative; top: var(--bw-title-y);
}
.bw-head .sub { margin-top: 14px; }
.bw-grid { margin-top: 36px; display: grid; gap: 44px; }
/* the gallery: five slides side by side on a strip that slides (js/buy.js turns it); each slide its canvas and its feature's name top
   left; Apple's control at the bottom */
.bw-gallery {
  --bw-turn: .55s;                        /* how long a slide takes to slide in (= the Documentations card's page turn) */
  position: relative; margin: 0; border-radius: var(--bw-r); background: var(--bw-gray); overflow: hidden;
  /* (its height from its width: --bw-h of 3/4 of the whole width, whatever share of it --bw-w takes) */
  width: min(100%, max(var(--bw-min), calc(100% * var(--bw-w)))); aspect-ratio: calc(var(--bw-w) * 4) / calc(var(--bw-h) * 3);
  min-height: var(--bw-min-h); justify-self: center;
  touch-action: pan-y; overscroll-behavior-x: contain; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.bw-gallery:focus { outline: none; }
.bw-strip { display: flex; height: 100%; transition: transform var(--bw-turn) cubic-bezier(.32, .72, 0, 1); }
.bw-slide { position: relative; flex: 0 0 100%; height: 100%; }
.bw-slide canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bw-cap { position: absolute; left: 24px; top: 22px; right: 24px; margin: 0; font: 600 14px/1.2857 var(--bw-sf); letter-spacing: -.016em; color: var(--bw-ink-2); }
/* Proximity's radar: a finger-sized area rides on its middle (js/buy.js proxGrab; the features page's Proximity stage too) - it takes
   the finger itself, so carrying the radar never scrolls the page or turns the slide */
.bw-grab { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bw-grab.held { cursor: grabbing; }
/* ...and a mouse over the box IS the radar (as in the plugin's preview): no cursor of its own there */
.radar-cursor, .radar-cursor * { cursor: none !important; }
.bw-nav { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.bw-arrow {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(210, 210, 215, .64); color: rgba(0, 0, 0, .56); transition: background .2s, color .2s, opacity .2s, scale .2s var(--ease-out);
}
.bw-arrow::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }   /* (a finger-sized target) */
.bw-arrow svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bw-arrow:active:not(:disabled) { scale: .9; }
.bw-arrow:disabled { opacity: .42; cursor: default; }          /* (Apple: an arrow with nowhere to go) */
.bw-dots { display: flex; align-items: center; height: 38px; padding: 0 11px; border-radius: 19px; background: rgba(210, 210, 215, .56); }
.bw-dots button { display: grid; place-items: center; height: 38px; padding: 0 4px; }
/* a dot (Apple: 8 px, the active one darker) - always a dot (the gallery never turns by itself, so there is no capsule) */
.bw-dots i { display: block; width: 8px; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .42); transition: background .3s; }
.bw-dots .on i { background: rgba(0, 0, 0, .8); }
/* the right column */
.bw-rail { display: grid; align-content: start; gap: 44px; font-family: var(--bw-sf); color: #1D1D1F; }
.bw-h { margin: 0; font: 600 clamp(21px, 6.4vw, 24px)/1.1667 var(--bw-sfd); letter-spacing: var(--bw-sum-track); text-wrap: pretty; }   /* (Apple: 24, 21 on small phones) */
.bw-h span { color: var(--bw-ink-3); }
.bw-sum .bw-h span { display: block; }               /* (Apple: "Make it yours." on a line of its own) */
.bw-price { margin: 18px 0 0; font: 600 28px/1.143 var(--bw-sfd); letter-spacing: var(--bw-price-track); }
.bw-tax { margin: 6px 0 0; font-size: 14px; line-height: 1.43; letter-spacing: -.016em; color: var(--bw-ink-2); }
.bw-tax span { display: block; }                    /* (a line each) */
.bw-buy {
  display: flex; align-items: center; justify-content: center; width: 100%; height: var(--bw-buy-h); margin-top: 22px; padding: 0 28px;
  border-radius: 12px; background: var(--bw-blue); color: #fff;
  font: 400 17px/1.235 var(--bw-sf); letter-spacing: -.022em; text-align: center; transition: background .2s var(--ease-apple);
}
.bw-buy:hover { background: #0077ED; }
.bw-buy:active { background: #006EDB; }
.bw-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.bw-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.43; letter-spacing: -.016em; color: #1D1D1F; }
.bw-facts svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #1D1D1F; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bw-facts b { font-weight: 600; }
.bw-facts a { color: var(--bw-link); text-decoration: none; }
.bw-facts a b { font-weight: 400; }
.bw-facts a:hover { text-decoration: underline; }
/* phones and tablets (under 960 px): "Your Morpheus 2.0 awaits. Make it yours." on top in place of the title and its price line (the
   very same heading); no feature names in the gallery; no arrows and no grey pill - the dots stay where they were (--bw-dots-y); "One-license seat for Morpheus 2.0"
   over the price (Apple's buy page) */
.bw-h-top, .bw-pay, .bw-once { display: none; }
.bw-h-top { color: #1D1D1F; }
.bw-h-top span { display: block; }
.bw-pay { position: relative; top: var(--bw-pay-y); margin: 0; font: 600 var(--bw-pay-size)/1.4706 var(--bw-sfd); letter-spacing: var(--bw-sum-track);
  text-wrap: balance; }                   /* (if it ever needs two lines - a 320 px phone, a bigger size - two even halves) */
@media (max-width: 959.98px) {
  .bw-title { display: none; }
  .bw-cap { display: none; }                /* (no feature names in the gallery's corner) */
  .bw-grid { gap: var(--bw-gap-phone); }
  .bw-h-top { display: block; }
  /* (Apple's summary heading: Semibold 38/46, Apple's spacing, the second part #86868B. 10.2cqi = the size at which "Morpheus 2.0
      awaits." fills the heading's width, less 2.6 % to spare - js-free, the same in every browser) */
  .bw-head { container-type: inline-size; }
  .bw-h-top { font-size: min(var(--bw-top-size), 10.2cqi); line-height: 1.2105; letter-spacing: var(--bw-top-track); }
  .bw-sum .bw-h { display: none; }
  .bw-pay { display: block; }
  /* (the price as on Apple's iPhone buy page - "iPhone 18 Pro Max 1TB Burgundy / $1,899.00 / One-time payment": all 17 px on 25 px
      lines, the price and "One-time payment" Regular (Apple's -.022em = --bw-price-track-phone here), 8 px under the seat line; no tax lines; the Get button 38 px under
      it, as Apple's Add to Bag sits once its Apple Card line is cut) */
  .bw-price { margin-top: 8px; font: 400 17px/1.4706 var(--bw-sf); letter-spacing: var(--bw-price-track-phone); }
  .bw-once { display: block; margin: 0; font: 400 17px/1.4706 var(--bw-sf); letter-spacing: var(--bw-price-track-phone); }
  .bw-tax { display: none; }
  .bw-buy { margin-top: 38px; }
  .bw-arrow { display: none; }
  .bw-dots { background: none; }
  /* (the row is only as tall as the dots now, so the animations keep clear of the dots themselves (js/buy.js measures it), not of the
      pill that was there; same place as before - their middle 37 px over the bottom - and the same finger-sized target, 38 px tall) */
  .bw-nav { bottom: calc(33px - var(--bw-dots-y)); }
  .bw-dots, .bw-dots button { height: 8px; }
  .bw-dots button { position: relative; }
  .bw-dots button::before { content: ""; position: absolute; inset: -15px 0; }
}
@media (hover: hover) { .bw-arrow:hover:not(:disabled) { background: rgba(223, 223, 227, .7); color: rgba(0, 0, 0, .64); } }
@media (min-width: 960px) {
  .bw-head .h2 { letter-spacing: var(--bw-title-track-wide); font-size: calc(var(--h2) * var(--bw-title-size-wide)); top: var(--bw-title-y-wide); }
  .bw-head .sub { max-width: none; }
  /* (the gallery's column: --bw-w-wide of the room the right column leaves; the right column right after it) */
  .bw-grid {
    margin-top: 48px; gap: var(--bw-gap); align-items: start;
    grid-template-columns: max(var(--bw-min), calc((100% - var(--bw-rail) - var(--bw-gap)) * var(--bw-w-wide))) var(--bw-rail);
  }
  /* (it stays in view while the right column scrolls by, never taller than the screen under the bar) */
  .bw-gallery {
    --bw-stick: calc(var(--nav-h) + var(--ruler-h) + env(safe-area-inset-top) + 24px);
    width: 100%; aspect-ratio: calc(var(--bw-w-wide) * 5) / calc(var(--bw-h-wide) * 4);
    position: sticky; top: var(--bw-stick); max-height: calc(100vh - var(--bw-stick) - 24px);
  }
  .bw-cap { left: 30px; top: 28px; }
  .bw-nav { bottom: 24px; }
}

/* -------------------------------------------------------------- 12 FAQ */
.qa { margin-top: 40px; border-top: 1px solid var(--line); }
.q { border-bottom: 1px solid var(--line); }
.q button { width: 100%; display: flex; align-items: center; gap: 16px; justify-content: space-between; text-align: left; padding: 24px 0; font-size: clamp(18px, 4.4vw, 23px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; transition: color .25s; }
.q button:hover { color: var(--blue); }
.q .pm { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--card-alt); transition: background .3s, transform .5s var(--ease-back); }
.q .pm::before, .q .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform .45s var(--ease-out), background .3s; }
.q .pm::after { transform: rotate(90deg); }
.q.open .pm { background: var(--blue); transform: rotate(180deg); }
.q.open .pm::before, .q.open .pm::after { background: #fff; }
.q.open .pm::after { transform: rotate(0deg); }
.q .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.q.open .a { grid-template-rows: 1fr; }
.q .a > div { overflow: hidden; }
.q .a p { margin: 0 0 24px; max-width: 64ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.faq .h2 { max-width: 11ch; }

/* -------------------------------------------------------------- 13 end (black) + toy box */
.end { padding-bottom: 0; }
.end-copy { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.end-copy .h2 { margin: 0 auto; }
.toybox { position: relative; margin-top: 40px; height: clamp(300px, 70vw, 540px); }
.toybox canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.toy-hint { position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; white-space: nowrap; }

/* -------------------------------------------------------------- footer */
.foot { background: var(--bg-alt); color: var(--ink-2); padding: 40px 0 calc(100px + env(safe-area-inset-bottom)); font-size: 13px; }
.foot .brand { color: var(--ink); font-size: 18px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.foot-by { margin: 8px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { text-decoration: none; color: var(--ink); transition: color .2s; }
.foot-links a:hover { color: var(--blue); }
.foot-legal p { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); max-width: 90ch; }
@media (min-width: 900px) { .foot { padding-bottom: 40px; } }

/* -------------------------------------------------------------- checkout placeholder */
.checkout { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.checkout[hidden] { display: none; }
.checkout-card { width: min(100%, 420px); padding: 32px 28px 26px; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); animation: pop .5s var(--ease-back); }
.checkout-card h3 { margin: 0; font-size: 26px; letter-spacing: -.03em; line-height: 1.1; }
.checkout-card p { color: var(--ink-2); }
.co-close { height: 44px; padding: 0 22px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* -------------------------------------------------------------- soft arrivals
   Apple's reveal (js/arrive.js: every control is in its TUNE - it sets these --arrive-* values, and gives each arriving thing its own
   length, quicker when the page is scrolled fast) */
.arrive { opacity: 0; transform: translateY(var(--arrive-y, 30px)); transition: opacity var(--arrive-fade, .9s) var(--arrive-ease, ease), transform var(--arrive-rise, .7s) var(--arrive-ease, ease); }
.arrive.in { opacity: 1; transform: none; }

/* -------------------------------------------------------------- hover (mouse only) */
@media (hover: hover) and (pointer: fine) {
  .shot img { transition: transform .6s var(--ease-out); transform-origin: 50% 50%; will-change: transform; }
  .ae-window:hover { transform: translateY(-4px); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .12); }
}

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