/* Meetio website. Written by hand, copied to web/style.css by build_pages.py. */

:root {
  --bg: #fbfbfd;
  --bg-alt: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --accent: #d12b00;
  --accent-2: #13b5b1;
  --accent-fill: #d12b00;   /* filled buttons and tags: white text passes in both themes */
  --grad: linear-gradient(100deg, #ff5a1f 0%, #f0306a 45%, #6a5cf0 75%, #13b5b1 100%);
  --nav-bg: rgba(251, 251, 253, .72);
  --dark: #000000;
  --dark-text: #f5f5f7;
  --dark-muted: #86868b;
  --radius-xl: 30px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-alt: #0d0d0f;
    --surface: #1c1c1e;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --line: #38383a;
    --accent: #ff6a3d;
    --accent-2: #2fd3cf;
    --nav-bg: rgba(22, 22, 23, .72);
    --dark: #0d0d0f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 56px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 0;
}
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
a { text-underline-offset: .18em; }
.text-link { display: inline-flex; gap: 4px; align-items: center; font-size: 19px; min-height: 44px; }
.chev { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- Navigation ---------------------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-nav.is-scrolled, body:not(:has(.home)) .site-nav { border-bottom-color: var(--line); }
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  height: 64px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); font-size: 19px; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 9px; width: 32px; height: 32px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35); }

/* Every pill is a different "event chip", like the tags in the app. SF Rounded where available,
   the face of the app's own labels. */
.nav-pills { display: flex; align-items: center; gap: 12px; }
.pill {
 
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 700 14px/1 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pill:hover, .pill-menu[open] > .pill { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .35); }
.pill svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill-features { background: var(--accent-fill); color: #fff; }
.pill-privacy { background: #d3f4f2; color: #075c59; border-color: #a6e4e1; }
.pill-support { background: var(--surface); color: var(--text); border-color: var(--line); }
.pill-lang { background: #1d1d1f; color: #fff; }
.pill-cta { background: linear-gradient(135deg, #ff8a3d, #2fd3cf); color: #10201f; }
.pill[aria-current] { box-shadow: inset 0 0 0 2px currentColor, 0 4px 10px -4px rgba(0, 0, 0, .3); }
@media (prefers-color-scheme: dark) {
  .pill-privacy { background: #0d3a39; color: #a5f1ed; border-color: #1c5e5b; }
  .pill-lang { background: #f5f5f7; color: #1d1d1f; }
}

.pill-menu { position: relative; }
.pill-menu > summary { list-style: none; }
.pill-menu > summary::-webkit-details-marker { display: none; }
.pill-menu .caret { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.pill-menu[open] .caret { transform: rotate(180deg); }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 190px;
  padding: 6px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .35);
  display: grid;
  gap: 2px;
}
.menu-panel a { display: block; padding: 11px 14px; border-radius: 12px; color: var(--text); font-size: 15px; }
.menu-panel a:hover { background: var(--bg-alt); text-decoration: none; }
.menu-panel a[aria-current] { color: var(--accent); font-weight: 600; }
.nav-more { display: none; }

/* --- Store badges -------------------------------------------------------------------------- */

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 16px;
  border-radius: 14px;
  background: #000;
  color: #fff;
  text-align: left;
  border: 1px solid #3a3a3c;
}
@media (prefers-color-scheme: dark) { .badge { background: #fff; color: #000; border-color: #fff; } }
.badge:hover { text-decoration: none; transform: translateY(-1px); }
.badge svg { width: 26px; height: 26px; flex: none; }
.badge small { display: block; font-size: 11px; line-height: 1.1; opacity: .85; }
.badge b { display: block; font-size: 20px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.badge.is-soon { cursor: default; }
.badge em {
  position: absolute;
  top: -9px;
  right: -8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-fill);
  padding: 2px 8px;
  border-radius: 980px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* --- Devices ------------------------------------------------------------------------------- */

.phone {
  --w: 300px;
  width: var(--w);
  padding: calc(var(--w) * .035);
  border-radius: calc(var(--w) * .17);
  background: #1d1d1f;
  box-shadow:
    inset 0 0 0 2px #48484a,
    inset 0 0 0 5px #1d1d1f,
    0 50px 100px -30px rgba(0, 0, 0, .45),
    0 30px 60px -40px rgba(0, 0, 0, .5);
  flex: none;
}
.phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 2868;
  border-radius: calc(var(--w) * .135);
  overflow: hidden;
  background: #fff;
}
.phone-screen img { width: 100%; height: 100%; object-fit: contain; }

/* --- Hero ---------------------------------------------------------------------------------- */

.hero { text-align: center; padding: 72px 22px 0; overflow: hidden; }
.hero-copy { max-width: 900px; margin: 0 auto; }
.hero-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  border-radius: 22px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .28);
}
.hero-title { font-size: clamp(42px, 6.6vw, 84px); line-height: 1.04; font-weight: 700; }
.hero-sub {
  max-width: 640px;
  margin: 22px auto 34px;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.38;
  color: var(--muted);
  letter-spacing: -.01em;
}
.hero .text-link { margin-top: 26px; }
.hero-stage {
  --p: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: clamp(420px, 50vw, 580px);
  margin-top: 64px;
}
.hero-stage .phone { position: absolute; bottom: -80px; transition: transform .1s linear; }
.phone-main {
  --w: clamp(220px, 21vw, 280px);
  z-index: 2;
  transform: translateY(calc(var(--p) * -60px)) scale(calc(1 - var(--p) * .06));
}
.phone-side { --w: clamp(180px, 17vw, 230px); opacity: .95; }
.phone-left { transform: translateX(calc(-78% - var(--p) * 90px)) translateY(calc(40px - var(--p) * 30px)) rotate(-6deg); }
.phone-right { transform: translateX(calc(78% + var(--p) * 90px)) translateY(calc(40px - var(--p) * 30px)) rotate(6deg); }
.platforms {
  position: relative;
  z-index: 3;
  margin: 0 -22px;
  padding: 26px 22px 30px;
  font-size: 14px;
  color: var(--muted);
  background: var(--bg);
}

/* --- Pinned scroll section ----------------------------------------------------------------- */

.scrolly { position: relative; padding: 110px 22px 0; background: var(--bg); }
.scrolly-head { text-align: center; font-size: clamp(40px, 5.2vw, 64px); font-weight: 700; line-height: 1.06; }
.scrolly-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.scrolly-device {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.phone-sticky { --w: min(270px, 31vh); }
.screen-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.screen-layer.is-active { opacity: 1; transform: none; }
.dots { display: flex; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s, width .3s; }
.dots i.is-active { width: 24px; border-radius: 4px; background: var(--accent-fill); }
.step {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .22;
  transition: opacity .6s var(--ease);
}
.step.is-active { opacity: 1; }
.step-phone { display: none; }
.step h3 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.07; font-weight: 700; margin-bottom: 18px; }
.step p:last-child { font-size: 21px; line-height: 1.42; color: var(--muted); max-width: 440px; margin: 0; }

/* --- iPhone Duo: pinned while it unfolds -------------------------------------------------- */

/* The open inner screen is 2853×2007 (aspect 1.4215): one image, cut down the middle into the
   base (right half) and the back of the cover (left half), so the two halves meet exactly at the
   hinge. The cover's front carries the folded outer screen (1398×2034), whose corners are almost
   square on the hinge side and round on the other. --u goes 0 → 1 with the scroll. */
.duo { --u: 0; height: 320vh; background: var(--bg); }
.duo-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9vh;
  padding: 80px 22px 40px;
  overflow: hidden;
}
.duo-copy { text-align: center; max-width: 720px; }
.duo-copy h2 { font-size: clamp(38px, 5.4vw, 68px); font-weight: 700; line-height: 1.06; }
.duo-caps { display: grid; margin-top: 18px; }
.duo-cap {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--muted);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.duo-cap-open { opacity: 0; transform: translateY(10px); }
.duo.is-open .duo-cap-closed { opacity: 0; transform: translateY(-10px); }
.duo.is-open .duo-cap-open { opacity: 1; transform: none; }

.duo-stage {
  --h: min(52vh, calc((100vw - 44px) / 1.4215), 600px);
  --wh: calc(var(--h) * 0.7108);               /* one half: the open screen is 2853×2007 */
  --t: calc(var(--h) * 0.028);                 /* thickness of one half */
  --rim: max(1.5px, calc(var(--h) * 0.005));   /* thin metal band */
  --bz: calc(var(--h) * 0.012);                /* thin black border around the screen */
  --ro: calc(var(--h) * 0.075);                /* rounded corners */
  --ri: calc(var(--h) * 0.012);                /* hinge-side corners of the closed phone */
  --metal: #d8d2c6;                            /* natural titanium, slightly warm */
  --edge: linear-gradient(90deg, #a9a294, #ece7de 30%, #fbf8f2 50%, #e2dccf 70%, #a39c8d);
  position: relative;
  width: calc(var(--wh) * 2);
  height: var(--h);
  flex: none;
  /* Close camera, as in the real footage: the cover grows as it comes towards you and lands like
     a page, its outer edge nearer and taller than the hinge. */
  perspective: calc(var(--h) * 1.9);
}
.duo-device {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Folded, only the right half is there: keep it in the middle, then slide back as it opens. */
  transform: translateX(calc((1 - var(--open, 0)) * -25%));
}
.duo-base, .duo-cover {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
}
/* The right half sits one thickness back; the cover turns on the hinge line at that depth, so
   once open both halves of the big screen lie in the same plane. */
.duo-base { --r: 0 var(--ro) var(--ro) 0; transform: translateZ(calc(var(--t) * -1)); }
.duo-cover {
  --r: var(--ri) var(--ro) var(--ro) var(--ri);
  transform-origin: left center;
  transform: translateZ(calc(var(--t) * -1)) rotateY(calc(var(--open, 0) * -180deg)) translateZ(var(--t));
}

/* Thickness: stacked slices of the same rounded shape, so the sides follow the corners and stay
   attached to the phone from any angle. */
.duo-slice {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: var(--edge);
  transform: translateZ(calc(var(--t) * var(--i) / -7));
}

.duo-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r);
  border: var(--rim) solid var(--metal);
  padding: var(--bz);
  background: #0b0b0c;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.duo-glass img { display: block; max-width: none; }

/* The cover's own screens stay dark while it moves: the pictures are in the flat layer below. */
.duo-cover-front { position: absolute; }
.duo-camera {
  position: absolute;
  top: calc(var(--bz) + var(--wh) * 0.035);
  right: calc(var(--bz) + var(--wh) * 0.035);
  width: calc(var(--wh) * 0.062);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #2a2e38 0 16%, #050506 52%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}

/* The big screen: one image split at the hinge, no border on that side. Each half's picture sits
   in a pane with the screen's own rounded corners, so the black border runs round them too. */
/* Both halves reach 2px past the hinge so no hairline shows through when it's flat. */
.duo-base-glass { border-left: 0; padding: 0; left: -2px; }
.duo-cover-back {
  --r: var(--ro) 0 0 var(--ro);
  transform: rotateY(180deg) translateZ(var(--t));
  border-right: 0;
  padding: 0;
}
.duo-pane {
  position: absolute;
  top: var(--bz);
  bottom: var(--bz);
  overflow: hidden;
  background: #000;
}
.duo-base-glass .duo-pane { left: 0; right: var(--bz); border-radius: 0 calc(var(--ro) - var(--rim) - var(--bz)) calc(var(--ro) - var(--rim) - var(--bz)) 0; }
.duo-cover-back .duo-pane { left: var(--bz); right: 0; border-radius: calc(var(--ro) - var(--rim) - var(--bz)) 0 0 calc(var(--ro) - var(--rim) - var(--bz)); }
.duo-inner-right, .duo-inner-left {
  position: absolute;
  top: 0;
  width: calc(var(--wh) * 2 - 2 * (var(--rim) + var(--bz)));
  height: 100%;
  object-fit: cover;
}
.duo-inner-right {
  right: 0;
  /* The big screen comes on as the phone opens: in step with the angle, from blurred to sharp. */
  opacity: var(--inner, 1);
  filter: blur(calc((1 - var(--inner, 1)) * 16px));
}

/* The flat layer: same slide as the phone, but never turned, so what the screens show stays
   upright and facing you while the cover swings. It is drawn above the phone. */
.duo-flat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(calc((1 - var(--open, 0)) * -25%));
}
/* The left picture lies at the depth of the open screen, so it lines up with it (and its black
   border) exactly once flat. Both layers are clipped to the cover's screen by the script. */
.duo-flat-back { transform: translateX(calc((1 - var(--open, 0)) * -25%)) translateZ(calc(var(--t) * -1)); }
.duo-flat-closed, .duo-flat-left {
  position: absolute;
  top: calc(var(--rim) + var(--bz));
  bottom: calc(var(--rim) + var(--bz));
  overflow: hidden;
  background: #000;
}
.duo-flat img { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; }
/* Folded screen, exactly where the cover's front is when shut. */
.duo-flat-closed {
  left: calc(50% + var(--rim) + var(--bz));
  right: calc(var(--rim) + var(--bz));
  border-radius: calc(var(--ri) * 0.5) calc(var(--ro) - var(--rim) - var(--bz)) calc(var(--ro) - var(--rim) - var(--bz)) calc(var(--ri) * 0.5);
  opacity: calc(1 - var(--fadeout, 0));
}
.duo-flat-closed img {
  left: 0;
  width: 100%;
  filter: blur(calc(var(--dim, 0) * 24px)) brightness(calc(1 - var(--dim, 0) * 0.7));
}
/* Placed by the script on the turning cover; its centre is the point it is given. */
.duo-flat-front .duo-camera { right: auto; transform: translate(-50%, -50%); }
/* Left half of the big screen, exactly where the cover's back lands. */
.duo-flat-left {
  left: calc(var(--rim) + var(--bz));
  right: calc(50% - 2px);
  border-radius: calc(var(--ro) - var(--rim) - var(--bz)) 0 0 calc(var(--ro) - var(--rim) - var(--bz));
  opacity: var(--fadein, 0);
  /* The picture flows across the fold: lit from the hinge outwards as the phone opens. */
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--sweep, 1) * 100%), transparent calc(var(--sweep, 1) * 100% + 22%));
  mask-image: linear-gradient(to left, #000 calc(var(--sweep, 1) * 100%), transparent calc(var(--sweep, 1) * 100% + 22%));
}
.duo-flat-left img {
  left: 0;
  width: calc(var(--wh) * 2 - 2 * (var(--rim) + var(--bz)));
  filter: blur(calc((1 - var(--settle, 0)) * 24px)) brightness(calc(0.3 + var(--settle, 0) * 0.7));
}

/* Soft shadow on the floor, under the phone. */
.duo-stage::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: calc(var(--h) * -0.1);
  height: calc(var(--h) * 0.08);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .25), transparent);
  filter: blur(6px);
  z-index: -1;
}

/* --- Statement: words light up while it stays pinned -------------------------------------- */

.statement { height: 240vh; background: var(--dark); color: var(--dark-text); }
.statement-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
}
.statement p {
  max-width: 980px;
  margin: 0;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.03em;
}
.statement span { opacity: .26; transition: opacity .35s; }
.statement span.lit { opacity: 1; }

/* --- Mac ----------------------------------------------------------------------------------- */

.mac-section { background: var(--dark); color: var(--dark-text); padding: 40px 22px 140px; overflow: hidden; }
.mac-copy { text-align: center; max-width: 720px; margin: 0 auto 64px; padding-top: 60px; }
.mac-copy h2 { font-size: clamp(44px, 6.4vw, 80px); line-height: 1.05; font-weight: 700; }
.mac-copy p:last-child { font-size: clamp(19px, 2vw, 24px); color: var(--dark-muted); margin: 20px 0 0; line-height: 1.38; }
.mac-stage { --z: 1; perspective: 1600px; }
.mac-window img { width: 100%; aspect-ratio: 2560 / 1600; }
.mac-window {
  width: min(1100px, 100%);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 120px -30px rgba(0, 0, 0, .9);
  transform: rotateX(calc((1 - var(--z)) * 22deg)) scale(calc(.78 + var(--z) * .22));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* --- Bento --------------------------------------------------------------------------------- */

.bento-section { background: var(--bg-alt); padding: 130px 22px; }
.section-title { text-align: center; font-size: clamp(44px, 6vw, 80px); font-weight: 700; margin-bottom: 64px; }
.bento {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 20px;
}
.tile {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 34px;
}
.tile h3 { font-size: 30px; line-height: 1.12; font-weight: 700; }
.tile-copy p { margin: 8px 0 0; font-size: 19px; line-height: 1.35; color: var(--muted); }
.tile-small h3 { font-size: 21px; }
.tile-ipad { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; }
.tile-watch { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tile-android { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tile-small { grid-column: span 4; }
.tile-small:nth-last-child(-n+2) { grid-column: span 2; }
.ipad {
  margin: 34px auto -34px;
  width: 92%;
  border: 12px solid #1d1d1f;
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  overflow: hidden;
  flex: 1;
  max-height: 440px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .4);
}
.ipad img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.watch {
  margin: auto 0;
  width: 190px;
  padding: 14px;
  border-radius: 54px;
  background: linear-gradient(145deg, #3a3a3c, #0f0f10);
  box-shadow: inset 0 0 0 2px #5a5a5e, 0 30px 60px -20px rgba(0, 0, 0, .5);
}
.watch-screen { border-radius: 40px; overflow: hidden; background: #000; }
.android {
  margin: 30px auto -40px;
  width: 210px;
  padding: 8px;
  border-radius: 34px 34px 0 0;
  background: #1d1d1f;
  overflow: hidden;
  max-height: 380px;
}
.android img { border-radius: 26px 26px 0 0; }
.tile-head { display: flex; align-items: center; gap: 10px; }
.tile-icon { display: inline-flex; flex: none; }
.tile-icon svg { width: 26px; height: 26px; fill: var(--accent); }
.tile-text { font-size: 19px; line-height: 1.35; color: var(--muted); margin: 8px 0 0; }

/* --- Privacy ------------------------------------------------------------------------------- */

.privacy-section { padding: 140px 22px; background: var(--bg); }
.privacy-inner { max-width: 1040px; margin: 0 auto; text-align: center; }
.privacy-title { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.privacy-lock { display: inline-flex; }
.privacy-lock svg { width: 60px; height: 60px; fill: var(--accent); }
.privacy-inner h2 { font-size: clamp(44px, 6vw, 80px); font-weight: 700; }
.privacy-grid {
  list-style: none;
  padding: 0;
  margin: 64px 0 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: left;
}
.privacy-grid li { border-top: 1px solid var(--line); padding-top: 22px; }
.privacy-grid h3 { font-size: 21px; line-height: 1.2; margin-bottom: 8px; }
.privacy-grid p { margin: 0; color: var(--muted); font-size: 16px; }

/* --- Final call to action ------------------------------------------------------------------ */

.final { text-align: center; padding: 120px 22px 140px; background: var(--bg-alt); }
.final-icon { width: 120px; height: 120px; margin: 0 auto 30px; border-radius: 27px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .28); }
.final h2 { font-size: clamp(40px, 5.6vw, 72px); font-weight: 700; line-height: 1.06; }
.final p { color: var(--muted); font-size: 21px; margin: 16px 0 36px; }

/* --- Footer -------------------------------------------------------------------------------- */

.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.footer-inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 34px 22px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 30px;
  align-items: center;
}
.footer-brand { display: flex; gap: 12px; align-items: center; line-height: 1.4; }
.footer-brand img { border-radius: 8px; }
.footer-brand b { color: var(--text); }
.footer-links, .footer-langs { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-links { justify-content: flex-end; }
.footer-links a, .footer-langs a { color: var(--muted); }
.footer-links a[aria-current], .footer-langs a[aria-current] { color: var(--text); font-weight: 600; }
.footer-copy { margin: 0; text-align: right; }
.footer-copy a { color: var(--muted); }

/* --- Legal pages --------------------------------------------------------------------------- */

.doc .wrap { max-width: 640px; margin: 0 auto; padding: 72px 22px 96px; }
.doc h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; font-weight: 700; margin-bottom: 10px; }
.doc .updated { color: var(--muted); font-size: 15px; margin: 0 0 30px; }
.doc .intro { font-size: 21px; line-height: 1.45; margin: 0 0 36px; }
.doc h2 { font-size: 28px; margin: 48px 0 12px; }
.doc h3 { font-size: 19px; margin: 26px 0 6px; letter-spacing: -.02em; }
.doc p, .doc li { color: var(--text); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 8px 0; }

/* --- Scroll reveal ------------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(48px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .bento .reveal:nth-child(2) { transition-delay: .08s; }
.js .bento .reveal:nth-child(3) { transition-delay: .16s; }
.js .privacy-grid .reveal:nth-child(2) { transition-delay: .08s; }
.js .privacy-grid .reveal:nth-child(3) { transition-delay: .16s; }
.js .privacy-grid .reveal:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .screen-layer, .step, .statement span, .duo-cap { transition: none; }
  .duo { height: auto; }
  .duo-pin { position: static; height: auto; padding-block: 100px; }
  .js .reveal { opacity: 1; transform: none; }
  .mac-window { transform: none; }
}

/* --- Smaller screens ----------------------------------------------------------------------- */

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tile-ipad, .tile-small, .tile-small:nth-last-child(-n+2) { grid-column: span 2; grid-row: auto; }
  .tile-watch, .tile-android { grid-column: span 1; }
  .privacy-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-pills, .pill-cta { display: none; }
  .nav-more { display: block; }
  .nav-inner { gap: 10px; }
  .footer-links, .footer-langs { gap: 10px 22px; font-size: 14px; }
  .hero { padding-top: 48px; }
  .hero-stage { height: 440px; margin-top: 48px; }
  .phone-main { --w: 210px; }
  .phone-side { --w: 160px; }
  .phone-left { transform: translateX(calc(-62% - var(--p) * 50px)) translateY(50px) rotate(-6deg); }
  .phone-right { transform: translateX(calc(62% + var(--p) * 50px)) translateY(50px) rotate(6deg); }

  /* No pinning on phones: every step shows its own screenshot under the text. */
  .scrolly { padding-top: 80px; }
  .scrolly-grid { grid-template-columns: 1fr; gap: 0; }
  .scrolly-device { display: none; }
  .step { min-height: 0; opacity: 1; padding: 56px 0 24px; align-items: center; text-align: center; }
  .step p:last-child { margin: 0 auto; }
  .step-phone { display: block; --w: min(220px, 58vw); margin-top: 36px; }

  .bento { grid-template-columns: 1fr; }
  .tile-ipad, .tile-watch, .tile-android, .tile-small, .tile-small:nth-last-child(-n+2) { grid-column: auto; }
  .tile { padding: 28px; }
  .privacy-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-copy { text-align: left; }
}