/* Scroll landing page.
   Every scroll effect reads ONE custom property, --p (0 → 1), which
   js/main.js writes on each [data-scroll] element. Change the feel of an
   effect here; change when it runs in the script. */

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #000;
  --ink: #f4f4f5;
  --muted: #8e8e93;
  --faint: #2a2a2d;
  --line: rgba(255, 255, 255, .14);
  --panel: #111113;
  --sheen: linear-gradient(100deg, #fff 0%, #9a9aa0 45%, #e9e9ec 80%);
  --rose: #ff5c7a; --amber: #ffb340; --mint: #4ade9b; --sky: #5ab0ff;
  --gutter: clamp(16px, 4vw, 48px);
  --header: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --p: 0;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --ink: #151516;
  --muted: #6e6e73;
  --faint: #e3e3e6;
  --line: rgba(0, 0, 0, .12);
  --panel: #f5f5f7;
  --sheen: linear-gradient(100deg, #151516 0%, #7b7b82 50%, #2b2b2e 85%);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2 { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(44px, 9vw, 128px); }
h2 { font-size: clamp(32px, 5.6vw, 76px); }
.sheen { background: var(--sheen); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sprite { position: absolute; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  border: 1px solid var(--line); font-weight: 600; font-size: 16px;
  transition: transform .25s var(--ease), background .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--ink); }
.btn-solid { background: var(--ink); color: var(--bg); border-color: transparent; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header);
  display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.header.is-stuck { border-bottom-color: var(--line); }
.brand { margin-right: auto; font-weight: 700; font-size: 20px; letter-spacing: -.03em; }
/* The header's lockup: the brand's own vector, in the page's text colour (light and dark). */
.brand { display: flex; align-items: center; }
.brand-logo { display: block; height: 40px; width: auto; color: var(--ink); }

.nav { display: flex; align-items: center; gap: 24px; font-size: 15px; color: var(--muted); } /* links level with the Download pill's text */
.nav a:hover { color: var(--ink); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: inherit; font-size: 16px; cursor: pointer;
  display: grid; place-items: center; flex: none;
}
.menu-btn { display: none; gap: 4px; align-content: center; }
.menu-btn span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ---------- 1. hero ---------- */
/* Just the headline and the way to download, in the middle of the first screen. */
.hero {
  min-height: 100svh; position: relative;
  display: grid; align-content: center; justify-items: center; gap: 2.4vh;
  padding: var(--header) var(--gutter) 0;
}
.hero-title { text-align: center; font-size: clamp(48px, 8.4vw, 120px); }
/* The hero's ground, all centred on the bottom edge of the screen and black at the top — tuned in
   the glow editor (open the page with ?edit, js/glow-editor.js; its defaults are these values):
     {"glowColor":"#0d156e","glowStrength":0.6,"glowW":76,"glowH":94,"glowFalloff":2.7,"lift":-2,
      "dotOpacity":0.1,"dotSize":0.75,"dotGap":27,"stagger":true,"dotW":90,"dotH":90,"dotFalloff":2.4,
      "grain":0,"blend":30}
   - an indigo glow on .hero-run (76% of the width, 94% of the height);
   - a staggered dot grid (1px, rows 27px apart, every second row shifted half a step) on .hero,
     under its own fade (90% / 90%); the grain layer is kept but set to 0.
   The layers are FIXED to the screen (centre 2% below its bottom edge) and stay put while the
   page scrolls: the hero is see-through, and everything after it has a solid background, so the
   next section slides up over the glow like a curtain. Nothing here may create a stacking context
   (isolation, z-index, transform) — that would lift the layers above those black sections.
   Light: black dots, no glow. */
.hero-run { --dot: rgba(255, 255, 255, 0.1); --lift: rgba(13, 21, 110, 0.60); --grain: 0;
  --glow-shape: radial-gradient(ellipse 76% 94% at 50% 102%, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,0.981) 8.3%, rgba(0,0,0,0.927) 16.7%, rgba(0,0,0,0.840) 25.0%, rgba(0,0,0,0.728) 33.3%, rgba(0,0,0,0.598) 41.7%, rgba(0,0,0,0.460) 50.0%, rgba(0,0,0,0.325) 58.3%, rgba(0,0,0,0.205) 66.7%, rgba(0,0,0,0.107) 75.0%, rgba(0,0,0,0.041) 83.3%, rgba(0,0,0,0.007) 91.7%, rgba(0,0,0,0.000) 100.0%);
  --dot-shape: radial-gradient(ellipse 90% 90% at 50% 102%, rgba(0,0,0,1.000) 0.0%, rgba(0,0,0,0.983) 8.3%, rgba(0,0,0,0.935) 16.7%, rgba(0,0,0,0.857) 25.0%, rgba(0,0,0,0.754) 33.3%, rgba(0,0,0,0.633) 41.7%, rgba(0,0,0,0.501) 50.0%, rgba(0,0,0,0.369) 58.3%, rgba(0,0,0,0.244) 66.7%, rgba(0,0,0,0.138) 75.0%, rgba(0,0,0,0.058) 83.3%, rgba(0,0,0,0.012) 91.7%, rgba(0,0,0,0.000) 100.0%);
}
:root[data-theme="light"] .hero-run { --dot: rgba(0, 0, 0, .14); --lift: transparent; --grain: .03; }
.hero-run::before, .hero::before, .hero::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.hero-run::before { background: var(--lift); -webkit-mask-image: var(--glow-shape); mask-image: var(--glow-shape); }
.hero::before, .hero::after { -webkit-mask-image: var(--dot-shape); mask-image: var(--dot-shape); }
/* the curtain: everything after the hero is opaque, so it covers the fixed glow as it scrolls up.
   Its leading edge is soft: the first section fades from clear to solid over 45% of a screen. */
.hero-run ~ *, .footer { background: var(--bg); }
.hero-run + * { background: linear-gradient(transparent, var(--bg) 45vh); }
.hero::before {
  /* --dot-r is the dot's radius, --gap the row spacing, --shift how far every second row moves
     (half the gap for diagonals, 0 for a square grid); the glow editor (js/glow-editor.js) sets them */
  --dot-r: .75px; --gap: 27px; --shift: 13.5px;
  background:
    radial-gradient(circle, var(--dot) 0 var(--dot-r), transparent calc(var(--dot-r) + .4px)) 0 0 / var(--gap) calc(var(--gap) * 2),
    radial-gradient(circle, var(--dot) 0 var(--dot-r), transparent calc(var(--dot-r) + .4px)) var(--shift) var(--gap) / var(--gap) calc(var(--gap) * 2);
}
.hero::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; opacity: var(--grain); }
:root[data-theme="light"] .hero::after { filter: invert(1); }
/* Second in the hierarchy, after the headline and before the buttons: the page's own ink, not muted. */
.hero-sub { margin: -1vh 0 1.4vh; text-align: center; color: var(--ink); font-size: clamp(19px, 2.1vw, 28px); font-weight: 500; line-height: 1.3; text-wrap: balance; }
.hero-get { display: grid; justify-items: center; gap: 14px; margin-top: 4.5vh; }
.hero-all { color: var(--muted); font-size: 14px; }
/* Three badges in one row, one height: Apple's and Google's own artwork unchanged, and the desktop one
   drawn to match them. The height is whatever lets all three fit the screen, capped at 56px, so the row
   shrinks on a phone rather than wraps (3 badges at 430:140 + 2 gaps). */
.stores { --get-h: min(56px, calc((100vw - 2 * var(--gutter) - 2 * var(--gap)) / 9.3)); --gap: clamp(8px, 1.4vw, 14px);
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--gap); }
.store { display: block; overflow: hidden; border-radius: calc(var(--get-h) * .2); box-shadow: 0 0 0 2px #a6a6a6; transition: transform .2s var(--ease); }
.store:hover { transform: translateY(-2px); }
.store img { display: block; height: var(--get-h); width: auto; }
.store-desk { display: flex; align-items: center; gap: calc(var(--get-h) * .16); box-sizing: border-box;
  height: var(--get-h); width: calc(var(--get-h) * 430 / 140); padding-left: calc(var(--get-h) * .2);
  background: #fff; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.store-desk-icon { flex: none; width: calc(var(--get-h) * .68); height: auto; }
.store-desk-text { display: grid; line-height: 1; white-space: nowrap; }
.store-desk-text small { font-size: calc(var(--get-h) * .21); font-weight: 500; }
.store-desk-text b { margin-top: calc(var(--get-h) * .04); font-size: calc(var(--get-h) * .39); font-weight: 650; letter-spacing: -.02em; }
.hero-all:hover { color: var(--ink); }
.nav-get { padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--bg) !important; font-weight: 600; }

/* ---------- device mockups — screens left empty for real captures ---------- */
.devices { position: relative; z-index: 4; width: var(--dev-w, min(84vw, 900px)); padding-right: 9%; }
.mac { filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .35)); }
.mac-lid {
  position: relative; aspect-ratio: 16 / 10; padding: 2.4% 2.4% 3%;
  border-radius: clamp(10px, 2vw, 22px) clamp(10px, 2vw, 22px) 4px 4px;
  background: linear-gradient(160deg, #3b3b40, #101012);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.mac-lid::before { content: ""; position: absolute; top: 1%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #4a4a50; }
.mac-screen { height: 100%; border-radius: clamp(4px, .8vw, 9px); background: var(--panel); }
.mac-base {
  position: relative; height: clamp(8px, 1.5vw, 16px); margin: 0 -6%;
  border-radius: 2px 2px 14px 14px; background: linear-gradient(#5b5b61, #1d1d20);
}
.mac-base::after { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 40%; translate: -50%; border-radius: 0 0 6px 6px; background: rgba(0, 0, 0, .35); }
/* An iPhone 17 Pro: a thin black bezel inside a polished titanium rim, the side buttons on
   the rim (action button + volume left, side button right). */
.handset {
  position: absolute; right: 0; bottom: -4%; width: 23%; aspect-ratio: 9 / 19.5;
  border-radius: 19% / 8.8%;
  border: clamp(1.5px, .28vw, 3px) solid transparent;
  background:
    linear-gradient(#050506, #050506) padding-box,
    linear-gradient(150deg, #9a9aa0, #48484d 22%, #e4e4e8 46%, #5a5a60 62%, #2c2c30 80%, #8e8e94) border-box;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.handset::before, .handset::after {
  content: ""; position: absolute; width: clamp(1.5px, .28vw, 3px); border-radius: 2px;
  background: linear-gradient(90deg, #5a5a60, #c8c8cd 50%, #5a5a60);
}
/* left: the action button, then volume up and down (as three slices of one strip) */
.handset::before { right: 100%; margin-right: clamp(1.5px, .28vw, 3px); top: 17%; height: 25%;
  -webkit-mask: linear-gradient(#000 0 15%, transparent 15% 30%, #000 30% 62%, transparent 62% 70%, #000 70%);
          mask: linear-gradient(#000 0 15%, transparent 15% 30%, #000 30% 62%, transparent 62% 70%, #000 70%); }
.handset::after { left: 100%; margin-left: clamp(1.5px, .28vw, 3px); top: 26%; height: 15%; }
/* Inset, not padding: a % padding resolves against the parent's width, not the phone's.
   ~2% of the width on every side, as on the real phone. */
.handset-screen { position: absolute; inset: .95% 2.1%; border-radius: 17.5% / 8.1%; background: var(--panel); }
.handset-screen::before { content: ""; position: absolute; top: 2.1%; left: 50%; width: 31%; height: 3.6%; translate: -50%; border-radius: 99px; background: #000; }

/* ---------- 2. phone + mac ---------- */
/* Pinned. Its beats, all from --p (the runway's progress):
     0–.2     the devices arrive (--in): a phone inside Instagram playing a Reel, a Mac with a feed
              site, YouTube and a dock
     .24–.32  the block (--blk): a shield lands on the Reel, and on the Mac the feed site becomes the
              block page, the Shorts shelf folds away and the pulls in the Dock lock
     .34–.40  the Reel is gone (--gone): underneath is Instagram with no Reels
     .42–.52  the camera zooms straight onto the Reels tab (--z) …
     .52–.56  … a ring and a label point it out (--hl) …
     .60–.68  … and it folds away (--tab); the label says what did it
     .76–.86  zoom back out; then the caption
   Only the phone scales (the laptop is hidden): a zoom of both devices re-rendered the Mac, its
   frosted Dock and a video at 3.6x every frame and lagged. */
.duo-run { height: 300svh; }
.duo {
  --in: clamp(0, var(--p) / .18, 1);
  --sw: clamp(0, (var(--p) - .24) / .05, 1); /* the switch flips on … */
  --blk: clamp(0, (var(--p) - .3) / .12, 1); /* … and the block sweeps both screens */
  --gone: clamp(0, (var(--p) - .44) / .08, 1);
  --mo: 0; --f: 0; /* the laptop's exit and the old close-up: unused while the laptop is hidden */
  --z: 0; --hl: 0; /* no zoom and no pointer: the switch says what did it */
  --tab: clamp(0, (var(--p) - .5) / .1, 1);
  position: sticky; top: 0; height: 100svh;
  padding: calc(var(--header) + 5vh) var(--gutter) 4vh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  justify-items: center; align-items: center; gap: 3vh; text-align: center; overflow-x: clip;
}
.duo h2 { opacity: calc(1 - var(--z) * 2); }
.devices-duo [style*="--y"], .devices-duo [data-measure] { --lk: var(--blk); }
.devices-duo .ig-tab-reels { --lk: var(--tab); }
.devices-duo { --dev-w: min(88vw, 80svh, 860px); } /* the switch sits above: the row fits under it on a laptop screen */
.devices-duo .mac { transform: translateX(calc(var(--mo) * -75vw)) translateY(calc((1 - var(--in)) * 80px)) scale(calc(.94 + var(--in) * .06));
  opacity: calc((.3 + var(--in)) * (1 - var(--mo))); }
/* The close-up: to the middle of the stage, ~84% of its height (--fx, --fy, --fs: js/main.js, fitPhone). */
.devices-duo .handset { will-change: transform; opacity: calc(var(--in) * 1.5 - .2);
  transform: translateX(calc((1 - var(--in)) * 30vw)) translate(calc(var(--f) * var(--fx, 0px)), calc(var(--f) * var(--fy, 0px)))
    scale(calc(1 + var(--f) * var(--fs, .5))) rotate(calc((1 - var(--in)) * 10deg)); }
/* Laptop hidden (.no-mac on the row): it keeps its place in the layout but isn't drawn, and the
   phone rests in the middle of the row from the start (sideways only: the stage's centre is up in
   the heading on a short screen); only the close-up, with the heading faded, uses the stage's. */
.devices-duo.no-mac .mac { visibility: hidden; }
/* …and it is simply there when the section arrives: no slide-in, no tilt, no fade. Zoomed, it
   scales about its Reels tab, which travels to the middle of the stage. */
.devices-duo.no-mac .handset { opacity: 1; will-change: auto; transform-origin: var(--ox, 69%) var(--oy, 95%);
  transform: translate(calc(var(--fx, 0px) + var(--z) * var(--zx, 0px)), calc(var(--z) * var(--zy, 0px))) scale(calc(1 + var(--z) * var(--zs, 2))); }
.caption { color: var(--muted); font-size: 18px; }
.duo .caption { opacity: clamp(0, (var(--p) - .64) / .06, 1); }

/* The switch above the devices: the app's pill, Off → Blocking as --sw goes 0 → 1. */
.duo-switch { display: flex; align-items: center; gap: 22px; padding: 12px 12px 12px 26px; border-radius: 22px;
  background: #1f1f21; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 calc(var(--sw) * 1.5px) rgba(74, 222, 155, .7), 0 18px 50px rgba(0, 0, 0, .5);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #f2f2f2;
  transform: translateY(calc((1 - var(--in)) * 24px)); opacity: var(--in); }
.ds-name { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.ds-pill { position: relative; display: grid; width: 168px; height: 62px; border-radius: 14px; overflow: hidden; }
.ds-state { grid-area: 1 / 1; display: grid; grid-template-rows: 1fr auto; place-items: center; padding-top: 6px; font-size: 16px; font-weight: 600; }
.ds-state svg { display: none; }
.ds-state small { width: 100%; padding: 5px 0 6px; font-size: 11.5px; font-weight: 500; text-align: center; background: rgba(0, 0, 0, .14); }
.ds-off { background: #333336; color: #c9c9cc; opacity: calc(1 - var(--sw)); }
.ds-on { background: #8fbf9f; color: #0f2a1f; opacity: var(--sw); }
.ds-on small { background: #6fa384; color: #0f2a1f; }

/* The screens are drawn to look like the real thing: iOS and macOS chrome, made-up apps and
   sites, real photos. Text is sized in container units (cqw) so it scales with the device. */
.mac-screen, .handset-screen { overflow: hidden; container-type: inline-size; }
.mac-screen { position: relative; }
.handset-screen::before { z-index: 4; }
.desk, .home { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #fff; text-align: left; letter-spacing: 0; line-height: 1.25; }
.desk img, .home img { display: block; width: 100%; height: 100%; object-fit: cover; }
.desk svg, .home svg { overflow: visible; }

/* Apps: an iOS-style squircle with a glyph, a label below. A pull carries a red badge;
   locking drains its colour, drops the badge and pins a mint shield on it. */
.app { position: relative; display: grid; justify-items: center; align-content: start; gap: 5cqw; min-width: 0; }
.app .face { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 23%; color: var(--fg);
  background: var(--bg); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18), 0 1px 3px rgba(0, 0, 0, .35); }
.app .face > svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app .lbl { max-width: 130%; font-size: 3.1cqw; font-weight: 500; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.app .cal { display: grid; justify-items: center; color: #111; font-size: 7.6cqw; font-weight: 300; line-height: 1; }
.app .cal small { color: #ff3b30; font-size: 2.2cqw; font-weight: 600; letter-spacing: .02em; margin-bottom: .6cqw; }
.app.is-pull .face { filter: grayscale(var(--lk)) brightness(calc(1 - var(--lk) * .45)); opacity: calc(1 - var(--lk) * .25); }
.app.is-pull .lbl { opacity: calc(1 - var(--lk) * .45); }
.badge { position: absolute; top: -9%; right: -14%; z-index: 1; min-width: 34%; padding: 0 9%; border-radius: 99px; background: #ff3b30;
  font: 600 2.9cqw/1.6 -apple-system, system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25);
  opacity: calc(1 - var(--lk) * 2); scale: calc(1 - var(--lk) * .6); }
.app .lock { position: absolute; right: -12%; top: 50%; width: 46%; height: auto; aspect-ratio: 100 / 110; translate: 0 -40%;
  color: var(--mint); opacity: var(--lk); scale: calc(.5 + var(--lk) * .5); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6)) drop-shadow(0 0 4px var(--mint)); }

/* Phone: inside Instagram (generic layout, the name in plain text, never its logo or colours) */
.ig { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; text-align: left; line-height: 1.25; }
.ig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ig svg { overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.statusbar { display: flex; justify-content: space-between; align-items: center; padding: 0 3.5% 0 6%; font-size: 4.4cqw; font-weight: 600; }
.statusbar span { display: flex; gap: 2.2cqw; align-items: center; }
.statusbar svg { height: 3.3cqw; width: auto; fill: currentColor; stroke: none; }
.ig .statusbar { flex: none; height: 6.4%; }
.ig-top { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 1.5cqw 4.5cqw 2.5cqw; }
.ig-top b { font-size: 6.4cqw; font-weight: 700; letter-spacing: -.03em; }
.ig-top span { display: flex; gap: 4.5cqw; }
.ig-top svg { width: 6cqw; height: 6cqw; }
.ig-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3cqw; }
.ig-stories { display: flex; gap: 3.2cqw; padding: 0 3.5cqw; }
.ig-stories > span { display: grid; justify-items: center; gap: 1cqw; }
.ig-stories i { display: grid; place-items: center; width: 14cqw; aspect-ratio: 1; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 .7cqw #000, 0 0 0 1.2cqw rgba(255, 255, 255, .55); font: 700 5cqw/1 inherit; font-style: normal; }
.ig-stories small { font-size: 2.6cqw; color: rgba(255, 255, 255, .85); }
.ig-post { display: grid; gap: 1.6cqw; font-size: 3cqw; }
.ig-head { display: flex; align-items: center; gap: 2cqw; padding: 0 3cqw; }
.ig-head i { display: grid; place-items: center; width: 6.4cqw; aspect-ratio: 1; border-radius: 50%; background: var(--c); font: 700 3cqw/1 inherit; font-style: normal; }
.ig-head b { font-weight: 600; }
.ig-head small { margin-left: auto; font-size: inherit; }
.ig-post > img { aspect-ratio: 1; height: auto; }
.ig-acts { display: flex; gap: 3.6cqw; padding: 0 3cqw; }
.ig-acts svg { width: 5.6cqw; height: 5.6cqw; }
.ig-cap { display: grid; gap: .6cqw; padding: 0 3cqw; }
.ig-cap b { font-weight: 600; }
/* What "Hide Reels tab" takes away: the strip folds shut, the rest of the feed moves up into it. */
.ig-reels { flex: none; height: calc((1 - var(--lk)) * 62cqw); opacity: calc(1 - var(--lk)); overflow: hidden; padding: 0 3cqw; }
.ig-reels-h { display: flex; align-items: center; gap: 1.6cqw; margin-bottom: 2cqw; font-size: 3.4cqw; font-weight: 700; }
.ig-reels-h svg { width: 4.6cqw; height: 4.6cqw; }
.ig-reels > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.ig-reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 2cqw; animation: lure 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * -.6s); }
.ig-reel small { position: absolute; left: 1.6cqw; bottom: 1.4cqw; font-size: 2.6cqw; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.ig-tabs { flex: none; display: flex; justify-content: space-around; align-items: center; padding: 2.6cqw 3cqw 1.4cqw; border-top: .5px solid rgba(255, 255, 255, .15); background: #000; }
.ig-tab { display: grid; place-items: center; flex: 1 1 0; min-width: 0; overflow: hidden; }
.ig-tab svg { width: 6.4cqw; height: 6.4cqw; }
.ig-tab-reels { flex-grow: calc(1 - var(--lk)); opacity: calc(1 - var(--lk) * 1.4); }
.ig-tab-reels svg { scale: calc(1 - var(--lk) * .7); }
.ig-me { width: 6.4cqw; aspect-ratio: 1; border-radius: 50%; background: #e64980; box-shadow: 0 0 0 .5cqw #000, 0 0 0 .8cqw #fff; }
.ig .home-bar { align-self: center; flex: none; width: 36%; height: .9%; margin: 1.6% 0 2%; border-radius: 99px; background: rgba(255, 255, 255, .85); }
/* The Reel playing over Instagram until the sweep wipes it away from the top. */
.reel { position: absolute; inset: 0; z-index: 2; overflow: hidden; color: #fff; background: #0b1020;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; text-align: left; line-height: 1.25;
  opacity: calc(1 - var(--gone)); }
.reel > :not(.reel-block) { opacity: calc(1 - var(--blk) * .55); }
.reel { background: #000; }
.reel-block { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 3cqw;
  opacity: var(--blk); }
.reel-block svg { width: 26cqw; height: auto; aspect-ratio: 100 / 110; color: var(--mint); overflow: visible;
  scale: calc(.4 + var(--blk) * .6); filter: drop-shadow(0 0 4cqw var(--mint)); }
.reel-block b { font-size: 4.6cqw; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.reel-block i { position: absolute; left: 50%; top: 50%; width: 30cqw; aspect-ratio: 1; margin: -21cqw 0 0 -15cqw; border-radius: 50%;
  border: .6cqw solid var(--mint); opacity: calc((1 - var(--blk)) * 2 * var(--blk) * 2); scale: calc(.6 + var(--blk) * 1.6); }
.reel svg { overflow: visible; }
.reel .ig-tabs svg, .reel-title svg, .reel-rail svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the bottom of the reel darkens under its caption and the tab bar, as Instagram's does */
.reel::before { content: ""; position: absolute; inset: 45% 0 0; z-index: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); pointer-events: none; }
.reel > :not(.reel-video) { z-index: 1; }
.reel .statusbar { position: relative; height: 6.4%; }
.reel-title { position: absolute; left: 4.5cqw; top: 7.4%; display: flex; align-items: center; gap: 1cqw; font-size: 6.4cqw; font-weight: 700; }
.reel-title svg { width: 4.4cqw; height: 4.4cqw; }
.reel-meme { position: absolute; left: 6%; right: 6%; top: 20%; text-align: center; rotate: -3deg;
  font: 900 8.4cqw/1 Impact, "Arial Black", sans-serif; text-transform: uppercase; color: #fff;
  -webkit-text-stroke: .9cqw #000; paint-order: stroke fill; text-shadow: 0 1cqw 0 #000; animation: tung-pulse .46s ease-in-out infinite; }
.reel-meme em { font-style: normal; color: #ffe600; }
@keyframes tung-pulse { 50% { scale: 1.06; } }
.reel-rail { position: absolute; right: 3.5cqw; bottom: 22%; display: grid; justify-items: center; gap: 4cqw; }
.reel-rail > span { display: grid; justify-items: center; gap: .6cqw; }
.reel-rail svg { width: 7cqw; height: 7cqw; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.reel-rail small { font-size: 2.8cqw; font-weight: 600; }
.reel-disc { width: 7.5cqw; aspect-ratio: 1; border-radius: 2cqw; background: linear-gradient(135deg, #b57d47, #6b3f1c); box-shadow: 0 0 0 .6cqw #fff; }
.reel-info { position: absolute; left: 4cqw; right: 16cqw; bottom: 9.6%; display: grid; gap: 1.4cqw; font-size: 3cqw; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.reel-info > span:first-child { display: flex; align-items: center; gap: 2cqw; }
.reel-info i { display: grid; place-items: center; width: 7cqw; aspect-ratio: 1; border-radius: 50%; background: #b57d47; font: 700 3.4cqw/1 inherit; font-style: normal; }
.reel-info b { font-weight: 700; }
.reel-info em { padding: .5cqw 2cqw; border-radius: 1.6cqw; box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .7); font-style: normal; font-weight: 600; }
.reel-info small { font-size: 2.7cqw; opacity: .9; }
.reel-progress { position: absolute; left: 0; right: 0; bottom: 8.4%; height: .5cqw; background: rgba(255, 255, 255, .25); }
.reel-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; background: #fff; transform-origin: left; animation: reel-play 6s linear infinite; }
@keyframes reel-play { from { transform: scaleX(0); } }
.reel .ig-tabs { position: absolute; left: 0; right: 0; bottom: 3%; border-top: 0; background: transparent; }
.reel .ig-tab.is-on svg { stroke-width: 2.6; }
.reel .home-bar { position: absolute; left: 32%; bottom: 1.2%; width: 36%; height: .9%; border-radius: 99px; background: rgba(255, 255, 255, .85); }

/* Beside the phone, once the Reels are gone: the switch that did it, in the app's own words. */
/* The zoom, inside the phone: its Instagram screen scales up about the bottom middle, so the tab
   bar fills the width with search, add and Reels in view (Reels sits ~69% across). Scaling about a
   point on the screen keeps it covered; also moving that point to the middle uncovered the bottom,
   and 2.5x left one icon in view, with the tabs closing up off screen. */
.reels-pin { position: absolute; left: 68.8%; top: 95.1%; z-index: 4; width: 0; height: 0; pointer-events: none; }
.reels-pin i { position: absolute; left: -7cqw; top: -7cqw; width: 14cqw; height: 14cqw; border-radius: 50%;
  box-shadow: 0 0 0 .7cqw var(--mint), 0 0 4cqw var(--mint); opacity: calc(var(--hl) * (1 - var(--tab))); animation: pin-pulse 1.1s ease-in-out infinite; }
@keyframes pin-pulse { 50% { scale: 1.18; } }
.reels-pin b { position: absolute; bottom: 9cqw; left: 0; display: flex; align-items: center; gap: 1.6cqw; white-space: nowrap;
  padding: 1.6cqw 3.2cqw; border-radius: 99px; color: #fff; font: 700 4.4cqw/1 -apple-system, system-ui, sans-serif;
  translate: -50% 0; box-shadow: 0 1cqw 4cqw rgba(0, 0, 0, .5); }
/* a little tail pointing down at the tab */
.reels-pin b::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -1.4cqw; border: 1.4cqw solid transparent; border-top-color: inherit; }
.pin-what { background: #111; border-color: #111; box-shadow: 0 0 0 .5cqw var(--mint), 0 1cqw 4cqw rgba(0, 0, 0, .5) !important;
  opacity: calc(var(--hl) * (1 - var(--tab) * 2)); }
.pin-done { background: #0f2a1f; border-color: #0f2a1f; box-shadow: 0 0 0 .5cqw var(--mint), 0 1cqw 4cqw rgba(0, 0, 0, .5) !important;
  opacity: calc((var(--tab) - .5) * 2 * (1 - clamp(0, (var(--p) - .76) / .04, 1))); }
.pin-done svg { width: 4.4cqw; height: 4.8cqw; color: var(--mint); }

/* Mac: a desktop with a menu bar, a feed site, a video site and a dock */
.desk { position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 10% 20%, #5f3dc4 0, transparent 70%),
    radial-gradient(60% 60% at 90% 15%, #1971c2 0, transparent 70%),
    radial-gradient(80% 60% at 60% 100%, #c2255c 0, transparent 70%),
    linear-gradient(160deg, #1b1840, #120f24); }
.menubar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; gap: 1.7cqw; height: 3.6%; padding: 0 1.6cqw;
  background: rgba(20, 18, 40, .35); backdrop-filter: blur(12px); font-size: 1.15cqw; }
.menubar b { font-weight: 700; }
.mb-end { display: flex; align-items: center; gap: 1.2cqw; margin-left: auto; }
.mb-end svg { height: 1.1cqw; width: auto; fill: currentColor; }
.win { position: absolute; top: 7%; bottom: 17%; display: grid; grid-template-rows: 2.8cqw 1fr; overflow: hidden; border-radius: .9cqw;
  background: #18181b; box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .6), inset 0 0 0 .5px rgba(255, 255, 255, .14); }
.win-site { left: 3%; width: 44%; }
.win-video { left: 50%; width: 47%; top: 10%; bottom: 14%; }
.win-chrome { position: relative; display: flex; align-items: center; gap: .6cqw; padding: 0 1cqw; background: #2a2a2e; border-bottom: .5px solid rgba(0, 0, 0, .6); }
.win-chrome i { width: .95cqw; aspect-ratio: 1; border-radius: 50%; background: #ff5f57; }
.win-chrome i + i { background: #febc2e; } .win-chrome i + i + i { background: #28c840; }
.url { position: absolute; left: 50%; translate: -50%; display: flex; align-items: center; gap: .5cqw; width: 52%; justify-content: center;
  padding: .35cqw 0; border-radius: .6cqw; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); font-size: 1cqw; }
.url svg { width: .95cqw; height: .95cqw; fill: none; stroke: currentColor; stroke-width: 2.4; }
.site-feed, .site-block { grid-area: 2 / 1; min-height: 0; }

/* the feed site */
.site-feed { display: grid; align-content: start; gap: 1.6cqw; padding: 0 18% 0; overflow: hidden; background: #000; opacity: calc(1 - var(--lk)); }
.f-nav { display: flex; justify-content: space-between; align-items: center; margin: 0 -28%; padding: .9cqw 28%; border-bottom: .5px solid rgba(255, 255, 255, .14); }
.f-nav b { font-size: 1.7cqw; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(90deg, #ffb340, #ff3d6e, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-nav span, .facts { display: flex; gap: 1cqw; }
.f-nav svg, .facts svg { width: 1.5cqw; height: 1.5cqw; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.fpost { display: grid; gap: .6cqw; font-size: 1cqw; }
.fhead { display: flex; align-items: center; gap: .6cqw; }
.fhead i { display: grid; place-items: center; width: 2.2cqw; aspect-ratio: 1; border-radius: 50%; background: var(--c); font: 700 1cqw/1 inherit; font-style: normal;
  box-shadow: 0 0 0 .2cqw #000, 0 0 0 .35cqw #ff3d6e; }
.fhead small, .vmeta small { color: rgba(255, 255, 255, .55); font-size: inherit; }
.fimg { aspect-ratio: 1; height: auto !important; border-radius: .3cqw; }
.flikes { font-weight: 600; }
.fcap b { font-weight: 600; }

/* Locktin's block page, as the extension draws it (dark) */
.site-block { display: grid; align-content: center; justify-items: center; gap: 1.1cqw; padding: 0 12%; text-align: center;
  background: radial-gradient(80% 50% at 50% 0, rgba(139, 150, 212, .1), transparent), #14161c; color: #e6e7ec; opacity: var(--lk); }
.bp-logo { width: 9cqw; height: auto; aspect-ratio: 1084.5 / 412.72; color: #e6e8f2; margin-bottom: .6cqw; }
.bp-pill { display: flex; align-items: center; gap: .5cqw; padding: .3cqw .9cqw; border-radius: 99px; background: rgba(224, 138, 114, .16); color: #e08a72; font-size: 1cqw; font-weight: 600; }
.bp-pill svg { width: 1.1cqw; height: 1.1cqw; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bp-h { font-size: 2cqw; font-weight: 700; letter-spacing: -.02em; }
.bp-lead { color: #909e94; font-size: 1.05cqw; line-height: 1.45; }
.bp-url { display: grid; gap: .3cqw; width: 100%; margin-top: .4cqw; padding: .9cqw; border-radius: .7cqw; background: #1b1e28;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1); font-size: 1.1cqw; font-family: ui-monospace, Menlo, monospace; }
.bp-url small { color: #909e94; font: 600 .8cqw/1 -apple-system, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }

/* the video site: only its shelf of short clips goes */
.vs-main { display: flex; flex-direction: column; gap: 1.2cqw; padding: 0 1.6cqw; min-height: 0; overflow: hidden; background: #0f0f0f; }
.vs-top { display: flex; align-items: center; gap: 1.4cqw; margin: 0 -1.6cqw; padding: .8cqw 1.6cqw; }
.vs-logo { font-size: 1.5cqw; font-weight: 700; letter-spacing: -.04em; }
.vs-search { flex: 1; max-width: 45%; margin: 0 auto; padding: .45cqw 1cqw; border-radius: 99px; background: #121212; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .45); font-size: 1cqw; }
.vs-me { width: 1.8cqw; aspect-ratio: 1; border-radius: 50%; background: #e64980; }
.vs-shelf { flex: none; height: calc((1 - var(--lk)) * 42%); opacity: calc(1 - var(--lk)); overflow: hidden; }
.shelf-label { display: flex; align-items: center; gap: .5cqw; margin-bottom: .8cqw; font-size: 1.35cqw; font-weight: 700; }
.shelf-label svg { width: 1.4cqw; height: 1.4cqw; fill: #ff3d6e; }
.vs-shelf .shelf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8cqw; width: 72%; }
.short { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: .7cqw; animation: lure 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * -.5s); }
.short > span { position: absolute; inset: auto 0 0; display: grid; gap: .2cqw; padding: 2.2cqw .6cqw .6cqw; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); font-size: .85cqw; }
.short b { font-weight: 600; }
.short small { color: rgba(255, 255, 255, .75); font-size: inherit; }
/* the brainrot thumbnail: a shouted caption, one word in yellow, an emoji, a red mark */
.short img { filter: saturate(1.5) contrast(1.15); }
.meme { position: absolute; left: 4%; right: 4%; top: 12%; z-index: 1; text-align: center; text-transform: uppercase;
  font: 900 1.25cqw/1 Impact, "Arial Black", "Helvetica Neue", sans-serif; letter-spacing: .01em; color: #fff; rotate: -3deg;
  -webkit-text-stroke: .14cqw #000; paint-order: stroke fill; text-shadow: 0 .15cqw 0 #000, 0 0 .6cqw rgba(0, 0, 0, .6); }
.meme em { font-style: normal; color: #ffe600; }
.meme-emoji { position: absolute; right: 6%; top: 40%; z-index: 1; font-size: 2cqw; font-style: normal; rotate: 12deg; filter: drop-shadow(0 .15cqw .2cqw rgba(0, 0, 0, .6)); }
.meme-ring { position: absolute; left: 14%; top: 44%; z-index: 1; width: 52%; aspect-ratio: 1; border: .3cqw solid #ff1a1a; border-radius: 50%; rotate: -8deg;
  box-shadow: 0 0 .5cqw rgba(255, 0, 0, .7); }
.meme-arrow { position: absolute; left: 14%; top: 52%; z-index: 1; width: 44%; height: .45cqw; background: #ff1a1a; rotate: 35deg; border-radius: 99px; box-shadow: 0 0 .4cqw rgba(255, 0, 0, .7); }
.meme-arrow::after { content: ""; position: absolute; right: -.3cqw; top: 50%; translate: 0 -50%; border: .7cqw solid transparent; border-left: 1.1cqw solid #ff1a1a; border-right: 0; }
/* The pull: short clips breathe, the way they ask to be tapped. */
@keyframes lure { 50% { filter: brightness(1.15) saturate(1.15); scale: 1.03; } }
.vs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4cqw 1cqw; }
.thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .7cqw; }
.thumb small { position: absolute; right: .4cqw; bottom: .4cqw; padding: .05cqw .35cqw; border-radius: .3cqw; background: rgba(0, 0, 0, .8); font-size: .8cqw; font-weight: 600; }
.vmeta { display: flex; gap: .7cqw; margin-top: .6cqw; font-size: .95cqw; }
.vmeta > i { flex: none; width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--c); }
.vmeta > span { display: grid; gap: .15cqw; min-width: 0; }
.vmeta b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the Dock */
.dock { position: absolute; left: 50%; bottom: 2%; translate: -50%; display: grid; grid-template-columns: repeat(11, 4.1cqw); gap: .7cqw;
  padding: .7cqw; border-radius: 1.6cqw; background: rgba(255, 255, 255, .16); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 .6cqw 2cqw rgba(0, 0, 0, .3); }
.dock .app { gap: 0; }
.dock .app .face { border-radius: 24%; }
.dock .badge { font-size: .95cqw; top: -14%; right: -16%; }
.dock .app .lock { width: 50%; }
.dock .app .cal { font-size: 1.9cqw; } .dock .app .cal small { font-size: .65cqw; margin-bottom: .1cqw; }

/* The sweep: one mint line down both screens at the same moment, a faint wash behind it. */
.sweep {
  position: absolute; left: 0; right: 0; top: calc(var(--sw) * 100%); z-index: 3; height: 2px;
  background: var(--mint); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--mint) 70%, transparent);
  opacity: min(1, var(--sw) * 30, (1 - var(--sw)) * 12);
}
.sweep-shield { position: absolute; right: 4%; top: 50%; width: clamp(14px, 2.2vw, 26px); height: auto; aspect-ratio: 100 / 110; translate: 0 -50%; color: var(--mint); filter: drop-shadow(0 0 6px var(--mint)); overflow: visible; }
.handset .sweep-shield { width: clamp(12px, 3.4vw, 18px); right: 8%; }
.sweep::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, color-mix(in srgb, var(--mint) 16%, transparent)); }

/* ---------- 3. film ---------- */
.film { padding: 6vh 0 12vh; display: grid; justify-items: center; }
/* Scaled, never resized: animating width would change the frame's height and
   push every section below it around while the reader is scrolling. */
.film-frame {
  width: 96vw; max-width: 1500px; aspect-ratio: 16 / 9;
  transform: scale(calc(.6 + var(--p) * .4)); transform-origin: 50% 0;
  border-radius: calc(56px - var(--p) * 36px); overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 120% at 20% 10%, #2b2f4a, #0b0b10 60%);
  border: 1px solid var(--line); display: grid;
}
.film-frame video { width: 100%; height: 100%; object-fit: cover; }
.film-poster { display: grid; place-content: center; justify-items: center; gap: 16px; color: #f4f4f5; }
.play { width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: grid; place-items: center; transition: transform .3s var(--ease); }
.play::after { content: ""; border: 14px solid transparent; border-left: 22px solid #fff; margin-left: 12px; }
.film-frame:hover .play { transform: scale(1.08); }
.film-note { font-size: 14px; opacity: .6; }


/* ---------- 4. features ---------- */
.features { height: 525svh; } /* five cards */
.features-stage {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 1.4vh;
  padding: calc(var(--header) + 4vh) var(--gutter) 4vh;
}
.feat-count { font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.features-title { font-size: clamp(28px, 5vw, 64px); font-weight: 700; letter-spacing: -.03em; text-align: center; line-height: 1.1; text-wrap: balance; }
.features-lead { color: inherit; } /* one colour for the whole title, no highlighted half */
.features-title > span { display: inline-block; }
.features-title.is-swapping > span { animation: swap .45s var(--ease) backwards; }
.features-title.is-swapping > span + span { animation-delay: .07s; }
@keyframes swap { from { opacity: 0; transform: translateY(.5em); filter: blur(6px); } }
.deck { position: relative; width: 100%; display: grid; place-items: center; }
.card {
  grid-area: 1 / 1;
  opacity: 0; transform: translateX(60vw) rotate(8deg) scale(.9);
  transition: transform .8s var(--ease), opacity .5s;
}
.card.is-active { opacity: 1; transform: none; }
.card.is-past { opacity: 0; transform: translateX(-60vw) rotate(-8deg) scale(.9); }

/* Placeholder panels: shapes only, no claims. Replace each .ph with a capture. */
.ph {
  --accent: var(--mint);
  width: min(86vw, 560px, 72svh); aspect-ratio: 4 / 3;
  display: grid; align-content: center; gap: clamp(8px, 1.6vw, 14px); padding: 6% 7%;
  border-radius: 28px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
}
.ph[data-accent="rose"] { --accent: var(--rose); }
.ph[data-accent="amber"] { --accent: var(--amber); }
.ph[data-accent="sky"] { --accent: var(--sky); }
.ph b { display: block; height: 9px; width: var(--w, 60%); border-radius: 9px; background: var(--muted); opacity: .45; }
.glyph { width: 22px; height: 22px; color: var(--accent); }
.opt {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px;
  padding: clamp(10px, 1.8vw, 15px) clamp(12px, 2vw, 18px); border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

/* A card holding a film of the real apps (SceneSyncEpic: a dark stage whose edges fall
   to pure black). Far bigger than the drawn placeholders, since it shows the app's own
   type: its width is capped by the height the stage has left under the count and the
   title, at the film's 16:9. On the dark page it has no edge at all and the film melts
   into the black; on the light page it is a dark panel. */
.ph-media {
  width: min(96vw, 1320px, calc((100svh - var(--header) - 8vh - 190px) * 16 / 9));
  aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
  background: #000; border: 0; border-radius: 0; box-shadow: none;
}
/* The close-ups run to the frame's edge, so on the dark page the edges are feathered
   away: the film dissolves into the black instead of sitting in a rectangle. */
:root:not([data-theme="light"]) .ph-media {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
:root[data-theme="light"] .ph-media { border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.card-clip { display: block; width: 100%; height: 100%; object-fit: cover; }

/* sync — three devices passing the same state round */
.sync-art { width: 100%; overflow: visible; }
.links path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 9; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -30; } }
.dev rect, .dev path { fill: var(--bg); stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.dev .pill { fill: var(--accent); stroke: none; }
.dev .bar { fill: var(--faint); stroke: none; }
.pulse { fill: var(--accent); }

/* partner — a request and an answer */
.pp-people { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 2%; }
.av { width: clamp(40px, 7vw, 56px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--faint)); }
.av-2 { border-color: var(--muted); background: var(--faint); }
.pp-link { width: 18%; border-top: 3px dashed var(--accent); }
.bubble { width: 72%; display: grid; gap: 8px; padding: 4% 5%; border-radius: 18px 18px 18px 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.bubble-out { justify-self: end; border-radius: 18px 18px 6px 18px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pp-actions { display: flex; gap: 8px; margin-top: 4px; }
.pp-actions i { flex: 1; height: 26px; border-radius: 999px; border: 2px solid var(--muted); opacity: .6; }
.pp-actions i.is-ok { background: var(--accent); border-color: transparent; opacity: 1; }

/* turn it off — a running lock and the ways out of it */
@property --sweep { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.off-head { display: flex; align-items: center; gap: 16px; margin-bottom: 2%; }
.ring-timer {
  width: clamp(44px, 7vw, 58px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--panel) 80%, transparent 82%), conic-gradient(var(--accent) var(--sweep), var(--faint) 0);
  animation: sweep 6s linear infinite;
}
@keyframes sweep { to { --sweep: 100%; } }
.radio { width: 20px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--muted); }
.radio.is-on { border: 6px solid var(--accent); }
.dots { display: flex; gap: 8px; }
.dots i { width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--muted); opacity: .6; }

/* blocking conditions — a week strip and the conditions that switch it on */
.days { display: flex; gap: 6px; margin-bottom: 2%; }
.days i { flex: 1; height: 26px; border-radius: 9px; background: var(--faint); }
.days i.is-on { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.switch { position: relative; width: 40px; height: 24px; border-radius: 99px; background: var(--faint); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.switch.is-on { background: var(--accent); }
.switch.is-on::after { translate: 16px 0; }

/* ---------- 7. laptop ---------- */
.laptop-run { height: 240svh; }
.laptop-pin {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; align-content: center; justify-items: center; gap: 4vh;
  padding: var(--header) var(--gutter) 0; text-align: center;
}
.laptop { --open: min(1, calc(var(--p) * 1.5)); width: min(78vw, 760px); perspective: 1800px; }
.lid {
  aspect-ratio: 16 / 10; padding: 2.2%; border-radius: 18px 18px 4px 4px;
  background: linear-gradient(160deg, #3b3b40, #101012);
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--open)) * -88deg));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.screen { height: 100%; border-radius: 8px; overflow: hidden; background: var(--bg); padding: 4% 14% 0; opacity: calc(var(--open) * 1.6 - .6); }
.deck-base { height: 14px; margin: 0 -5%; border-radius: 2px 2px 14px 14px; background: linear-gradient(#55555b, #1d1d20); }

/* ---------- 8. reading ---------- */
/* One runway, its beats on --p: the steps (to .40), then the copy swap (.42-.50); the feed never stops. */
.reading { height: 400svh; position: relative;
  --a: clamp(0, (var(--p) - .42) / .05, 1); --b: clamp(0, (var(--p) - .45) / .05, 1); }
.reading-anchor { position: absolute; top: 48%; }
.reading-stage { position: sticky; top: 0; height: 100svh; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, auto) auto; justify-content: center; align-items: center; column-gap: clamp(32px, 5vw, 80px); }
.reading-copy { display: grid; align-items: center; width: 560px; max-width: 100%; } /* as wide as its longest line, so the phone sits close */
.copy-a, .copy-b { grid-area: 1 / 1; display: grid; gap: 6vh; }
.copy-a { opacity: calc(1 - var(--a)); transform: translateY(calc(var(--a) * -24px)); }
.copy-b { opacity: var(--b); transform: translateY(calc((1 - var(--b)) * 24px)); gap: 3.5vh; }
.copy-b, .copy-a { pointer-events: none; }
.h2-kicker { display: block; margin-bottom: .55em; color: var(--muted); font-size: clamp(17px, 1.7vw, 24px); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.copy-cap { max-width: 26em; color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; }
.reading-phone { display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px); }
.reading h2 { max-width: 12em; margin: 0; text-align: left; font-size: clamp(30px, 4.6vw, 66px); line-height: 1.12; }
.reading .w { color: var(--faint); transition: color .35s; }
.reading .w.is-lit { color: var(--ink); }
/* The cost in rose, glowing once it's lit; the comparison gets a hand-drawn underline
   that draws itself left to right. */
.reading .hot .w.is-lit { color: var(--rose); }
.reading .hot { transition: text-shadow .6s; }
.reading .hot.is-lit { text-shadow: 0 0 .5em color-mix(in srgb, var(--rose) 45%, transparent); }
.reading .mark, .hero .mark { position: relative; white-space: nowrap; }
.reading .mark::after, .hero .mark::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.02em; height: .18em;
  background: var(--mark-c, var(--rose));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 5 S 180 4, 198 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 5 S 180 4, 198 7' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease);
}
.reading .mark.is-lit::after { clip-path: inset(0 0 0 0); }
/* In the hero: mint under living, drawn in once as the page opens. */
.hero .mark { --mark-c: var(--mint); }
.hero .mark::after { bottom: -.17em; animation: mark-draw .9s .5s var(--ease) forwards; } /* under the g, not through it */
.hero-title:has(.mark) { padding-bottom: .2em; } /* and room for it above the subheading */
@keyframes mark-draw { to { clip-path: inset(0 0 0 0); } }
/* Where the number comes from: quiet, and only once the whole line has lit. */
/* The steps: stacked in one cell; the current one rises in, the one before leaves upward. */
.steps { display: grid; align-items: end; }
.reading .step { grid-area: 1 / 1; font-size: clamp(38px, 6.2vw, 92px); opacity: 0; transform: translateY(.5em);
  transition: opacity .5s, transform .7s var(--ease); }
.reading .step.is-on { opacity: 1; transform: none; }
.reading .step.is-past { transform: translateY(-.5em); }
.reading .step .hot { color: var(--rose); }
.steps-sub { margin-top: -3.4vh; color: var(--muted); font-size: clamp(18px, 1.9vw, 26px); font-weight: 500; }
/* The section's progress: a vertical bar to the right of the phone, as tall as it, filling downward
   over the whole runway, so it is full when "Reclaim it with Locktin" is done. */
.reading .progress { width: 3px; height: auto; margin: 0; }
.reading .progress span { height: 100%; transform-origin: top; transform: scaleY(var(--rp, 0)); }
/* The feed: the page's iPhone, standing in its column; each Reel a full screen stacked under
   the next, moved by js (translateY in screens). The status bar, "Reels" and the tab bar stay put. */
.reading .feed-phone { position: relative; right: auto; bottom: auto; width: auto; height: min(76svh, 740px); }
.feed { position: absolute; inset: 0; overflow: hidden; background: #000; }
.feed-strip { position: absolute; inset: 0; }
.feed-reel { --gone: 0; --blk: 0; will-change: transform; }
.feed-reel .reel-info i, .feed-reel .reel-disc { background: var(--c); }
.feed-chrome { --gone: 0; --blk: 0; z-index: 3; background: transparent; pointer-events: none; }
.feed-chrome::before { content: none; }
@media (max-width: 820px) {
  .reading-stage { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 3.5svh; }
  .reading-copy { gap: 2.4svh; }
  .reading h2 { font-size: clamp(26px, 7.4vw, 44px); }
  .reading .step { font-size: clamp(34px, 10vw, 54px); }
  .reading-phone { justify-self: center; }
  .reading .feed-phone { height: min(50svh, 560px); }
}
.progress { width: min(320px, 60vw); height: 3px; margin: 0 auto; border-radius: 3px; background: var(--faint); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--sp, var(--p))); }

/* ---------- 9. finale + footer ---------- */
.finale { padding: 14vh var(--gutter) 18vh; display: grid; justify-items: center; gap: 36px; text-align: center; }
.globe { position: relative; width: min(46vw, 260px); aspect-ratio: 1; color: var(--ink); transform: rotate(calc(var(--p) * 40deg - 20deg)) scale(calc(.7 + var(--p) * .3)); }
.globe svg { width: 100%; height: 100%; overflow: visible; }
.ring { position: absolute; inset: -6%; border-radius: 50%; border: 1px solid var(--ink); animation: ring 3.2s ease-out infinite; }
@keyframes ring { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }

.footer {
  display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px;
  padding: 64px var(--gutter) 48px; border-top: 1px solid var(--line); font-size: 15px;
}
.footer h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; }
.footer nav a { display: block; padding: 5px 0; color: var(--muted); }
.footer nav a:hover { color: var(--ink); }
.footer-id p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.footer-id .footer-credits { font-size: 12px; max-width: 46ch; }


/* ---------- small screens ---------- */
@media (max-width: 700px) {
  .menu-btn { display: grid; }
  .nav {
    position: fixed; inset: var(--header) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 20px; background: var(--bg); border-bottom: 1px solid var(--line);
    font-size: 20px; color: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .film-frame { transform: scale(calc(.86 + var(--p) * .14)); }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer-id { grid-column: 1 / -1; }
}

/* ---------- reduced motion: no pinning, no idle loops ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ring, .links path, .ring-timer, .short, .ig-reel, .reel-meme, .reel-progress::after, .reels-pin i { animation: none; }
  .pulse { display: none; }
  .duo-run, .features, .laptop-run, .reading { height: auto; }
  .duo, .features-stage, .laptop-pin, .reading-stage { position: static; height: auto; min-height: 80svh; }
  /* the tab-bar close-ups: their end state, Reels and Shorts gone and the rest spread out */
  .duo { --in: 1; --sw: 1; --blk: 1; --gone: 1; --tab: 1; }
  .duo .caption { opacity: 1; }
  .card, .card.is-past { position: static; opacity: 1; transform: none; grid-area: auto; margin: 3vh 0; }
}