:root {
  --color-bg: #fdfdfd; /* paper white */
  --color-text: #1a1a1a; /* ink black */
  --color-accent: #f7d64b; /* loom yellow */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Hebrew", "Arial Hebrew", Helvetica, Arial, sans-serif;

  /* Layer order, all in the root stacking context (.content must never get a
     z-index of its own, or the header is trapped under Loom again):
     copy (auto) < Loom stage + hit area < sticky header < motion toggle < intro. */
  --z-field: 0;
  --z-mascot: 50;
  --z-header: 100;
  --z-toggle: 150;
  --z-intro: 200;
  --z-tip: 300;

  /* Liquid glass material. Every panel reads the same tokens, so a single
     element can retint the glass without redefining the recipe. */
  --glass-blur: 22px;
  --glass-saturate: 180%;
  --glass-tint-top: rgba(255, 255, 255, 0.62);
  --glass-tint-bottom: rgba(255, 255, 255, 0.36);
  --glass-edge: rgba(26, 26, 26, 0.1);
  --glass-rim: rgba(255, 255, 255, 0.8);
  --glass-rim-bottom: rgba(255, 255, 255, 0.32);
  --glass-specular: rgba(255, 255, 255, 0.92);
  --glass-specular-opacity: 0.8;
  --glass-specular-size: 120% 68%;
  --glass-lift: 0 18px 44px rgba(26, 26, 26, 0.07), 0 2px 8px rgba(26, 26, 26, 0.04);
  --glass-lift-hover: 0 28px 64px rgba(26, 26, 26, 0.1), 0 3px 10px rgba(26, 26, 26, 0.05);
  --glass-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.05'/></svg>");
}

html {
  overflow-x: hidden;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  /* clip, not hidden: hidden would make body a scroll container and kill the
     sticky glass bar. The root element still blocks horizontal scrolling. */
  overflow-x: clip;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  /* No touch-action here: a page-wide pan-y disables pinch-zoom for everyone.
     Only Loom's own hit area (.loom-hit) opts out of browser gestures. */
}

/* Pastel field: the thing the glass actually refracts. Fixed, behind Loom. */
body::before { display: none !important; content: none !important; }

body.is-dragging-loom,
body.is-dragging-loom * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing;
}

/* Live Loom stage. inset:0 (not 100vw) keeps it inside the scrollbar. It only
   exists visually once app.js sets html.loom-live. */
#canvas-container {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-mascot);
  /* layout + paint only. contain:size collapses the stage to 0×0. */
  contain: layout paint;
  pointer-events: none;
}
.loom-live #canvas-container {
  display: block;
}
/* v1 draws one full-stage svg; scoped to the direct child so it never sizes
   the v2 rig's own svgs (body, eyes, glasses). */
#canvas-container > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* v2 rig (site/loom/dom/renderer.js): a zero-size anchor moved by one
   compositor transform; everything inside is placed by transforms and never
   takes layout from the page. It ignores the pointer, except for the grab
   handle, which rides inside it so it follows the drawn body for free. */
.loom-rig {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.loom-rig svg {
  display: block;
  overflow: visible;
}
.loom-rig .loom-hit {
  position: absolute;
  pointer-events: auto;
}
/* FX layer (Zzz glyphs, confetti): decoration only, above the rig, never a target. */
.loom-fx {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

/* Loom's grab handle: the only element on the page that opts out of browser
   touch gestures, sized to the drawn body and moved with it by loom-mascot.js.
   It sits on Loom's layer, under the header, and turns itself off whenever it
   overlaps a link or button so those always win the press. */
.loom-hit {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-mascot);
  border-radius: 9999px;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
html.loom-live body.is-intro-done .loom-hit {
  display: block;
}
body.is-dragging-loom .loom-hit {
  cursor: grabbing;
}

/* Static Loom: the default render. Shown without JS, when the mascot cannot
   load, under reduced motion and while motion is paused. Absolutely placed in
   the hero's top padding, so swapping it for the live mascot shifts nothing. */
.static-mark {
  position: absolute;
  top: 28px; /* px, like the seat around it: Loom's size does not follow the text size */
  left: 50%;
  width: 150px;
  margin-left: -75px;
  line-height: 0;
  pointer-events: none;
}
.static-mark svg {
  display: block;
  width: 100%;
  height: auto;
}
.loom-live .static-mark {
  visibility: hidden;
}

.content {
  position: relative;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content h1, .content h2, .content h3, .content p, .content .logo, .content footer, .glass {
  pointer-events: auto;
}
.cta-button {
  pointer-events: auto;
  cursor: pointer;
}

/* ------------------------------------------------------------------ glass */
/* One material, shared by panels, pills and the tip bubble. */
.glass,
.cta-button,
.loom-tip {
  position: relative;
  background-image: linear-gradient(175deg, var(--glass-tint-top), var(--glass-tint-bottom));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  box-shadow:
    var(--glass-lift),
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 var(--glass-rim-bottom);
}

/* Specular: a broad top-left light plus a soft bounce off the bottom edge.
   Negative z-index keeps it above the tint and below the text. */
.glass::before,
.cta-button::before,
.loom-tip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glass-specular-opacity);
  background-image:
    radial-gradient(var(--glass-specular-size) at 2% -20%, var(--glass-specular), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 38%),
    radial-gradient(90% 55% at 100% 114%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
    var(--glass-noise);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 160px 160px;
  transition: opacity 0.35s ease;
}

/* Hairline: a lit rim that fades around the panel, drawn as a 1px
   gradient ring via a two-layer mask. */
.glass::after,
.cta-button::after,
.loom-tip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    140deg,
    var(--glass-rim),
    rgba(255, 255, 255, 0.2) 26%,
    rgba(255, 255, 255, 0) 52%,
    var(--glass-rim-bottom)
  );
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
}

/* header.glass, not header: the shared material sets position: relative.
   The bar's frame (width, padding, gap, the nav pill's padding) is in px, not
   rem: only the text grows with a larger text setting, so at 200% text the
   sticky bar stays compact instead of doubling every inset around the copy. */
header.glass {
  position: sticky;
  top: 14px;
  z-index: var(--z-header);
  width: calc(100% - 32px);
  max-width: 1200px;
  margin-top: 14px;
  padding-block: 16px;
  padding-inline: 28px 24px;
  border-radius: 26px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
  --glass-tint-top: rgba(255, 255, 255, 0.68);
  --glass-tint-bottom: rgba(255, 255, 255, 0.44);
  /* A wide bar wants a compact corner glint, not a panel-wide wash. */
  --glass-specular-size: 380px 150%;
  --glass-noise: none;
}

.logo {
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  color: #ffffff;
  padding: 1.1rem 2.2rem;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.125rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  --glass-blur: 14px;
  --glass-tint-top: rgba(26, 26, 26, 0.94);
  --glass-tint-bottom: rgba(26, 26, 26, 0.8);
  --glass-edge: rgba(255, 255, 255, 0.22);
  --glass-rim: rgba(255, 255, 255, 0.34);
  --glass-rim-bottom: rgba(255, 255, 255, 0.12);
  --glass-specular: rgba(255, 255, 255, 0.5);
  --glass-specular-opacity: 0.7;
  --glass-noise: none;
}

.cta-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    var(--glass-lift-hover),
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 var(--glass-rim-bottom);
  --glass-tint-top: rgba(26, 26, 26, 0.9);
  --glass-tint-bottom: rgba(26, 26, 26, 0.76);
}
.cta-button:hover::before {
  opacity: 1;
}

.cta-button.primary-cta {
  color: var(--color-text);
  --glass-tint-top: rgba(247, 214, 75, 0.94);
  --glass-tint-bottom: rgba(247, 214, 75, 0.7);
  --glass-edge: rgba(255, 255, 255, 0.5);
  --glass-rim: rgba(255, 255, 255, 0.8);
  --glass-rim-bottom: rgba(255, 255, 255, 0.32);
  --glass-specular: rgba(255, 255, 255, 0.85);
  --glass-specular-opacity: 0.8;
}
.cta-button.primary-cta:hover {
  --glass-tint-top: rgba(247, 214, 75, 0.86);
  --glass-tint-bottom: rgba(247, 214, 75, 0.64);
}

.nav-cta {
  padding: 12.8px 25.6px;
  font-size: 1rem;
  white-space: nowrap;
}

main {
  width: 100%;
  max-width: 960px;
  padding: 0 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10vh; /* Shorter landing breathing room */
  margin-top: 10vh;
  margin-bottom: 20vh;
}

section {
  position: relative;
}

h1 {
  font-size: 5.5rem;
  line-height: 1.05;
  letter-spacing: -0.05em;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

h2 {
  font-size: 3.5rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 2rem;
}

h2::before {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  background-color: var(--color-accent);
  margin-bottom: 1.5rem;
  border-radius: 3px;
}

.hero h2::before, .final-cta h2::before {
  display: none;
}

p {
  font-size: 1.4rem;
  line-height: 1.65;
  opacity: 0.85;
  max-width: 680px;
}

.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero p {
  margin-bottom: 3.5rem;
  font-size: 1.6rem;
  max-width: 750px;
  font-weight: 400;
}

.meet, .final-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.meet h2::before {
  margin-inline: auto;
}

/* Nicer final CTA */
.final-cta {
  border-radius: 36px;
  padding: 5rem 3rem;
  max-width: 800px;
  margin: 0 auto;
  pointer-events: auto;
  --glass-blur: 26px;
  --glass-tint-top: rgba(255, 255, 255, 0.66);
  --glass-tint-bottom: rgba(255, 255, 255, 0.38);
}
.final-cta::before {
  animation: specular-breathe 19s ease-in-out infinite alternate;
}
.final-cta h2 {
  font-size: 4rem;
  margin-bottom: 3rem;
}

@keyframes specular-breathe {
  from { opacity: 0.62; }
  to { opacity: 0.95; }
}

footer {
  box-sizing: border-box;
  padding: 4rem 2rem;
  text-align: center;
  opacity: 0.5;
  font-size: 1rem;
  width: 100%;
}

/* ------------------------------------------------------- Loom tip bubble */
/* Built by loom-mascot.js and parked on its own layer so no glass panel can
   bury it. Position is driven by JS transforms in viewport coordinates. */
.loom-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-tip);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: min(78vw, 320px);
  padding: 0.6rem 0.7rem 0.6rem 1rem;
  border-radius: 18px;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  transition: opacity 0.3s ease;
  will-change: transform;
  --glass-blur: 18px;
  --glass-tint-top: rgba(255, 255, 255, 0.74);
  --glass-tint-bottom: rgba(255, 255, 255, 0.5);
  --glass-noise: none;
}

.loom-tip__close {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0.25rem;
  font-size: 1.125rem;
  line-height: 1;
  color: rgba(26, 26, 26, 0.45);
  cursor: pointer;
  transition: color 0.2s ease;
}
.loom-tip__close:hover {
  color: var(--color-text);
}

/* Mobile adjustments */
.cta-button {
  max-width: 100%;
}
@media (max-width: 768px) {
  /* Cheaper blur on phones. Panels that set their own blur re-set it here. */
  :root { --glass-blur: 16px; }
  .final-cta { --glass-blur: 18px; }
  .loom-tip { --glass-blur: 14px; }
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }
  p { font-size: 1.2rem; }
  main { gap: 10vh; margin-top: 8vh; margin-bottom: 12vh; }
  header { width: calc(100% - 1.5rem); padding-block: 0.75rem; padding-inline: 1.25rem 1rem; border-radius: 22px; }
  .logo { font-size: 1.4rem; }
  .nav-cta { padding: 11.2px 19.2px; font-size: 0.9375rem; }
  .final-cta { padding: 3rem 1.5rem; border-radius: 28px; }
  .final-cta h2 { font-size: 2.5rem; }
}

/* No backdrop-filter: fall back to near-solid panels so text stays legible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass,
  .cta-button,
  .loom-tip {
    --glass-tint-top: rgba(255, 255, 255, 0.96);
    --glass-tint-bottom: rgba(255, 255, 255, 0.92);
  }
  .cta-button {
    --glass-tint-top: rgba(26, 26, 26, 1);
    --glass-tint-bottom: rgba(26, 26, 26, 0.94);
  }
  .cta-button.primary-cta {
    --glass-tint-top: rgba(247, 214, 75, 1);
    --glass-tint-bottom: rgba(247, 214, 75, 0.94);
  }
}

@media (prefers-contrast: more) {
  .glass,
  .loom-tip {
    --glass-tint-top: rgba(255, 255, 255, 0.94);
    --glass-tint-bottom: rgba(255, 255, 255, 0.9);
    --glass-edge: rgba(26, 26, 26, 0.22);
  }
  .cta-button {
    --glass-tint-top: rgba(26, 26, 26, 1);
    --glass-tint-bottom: rgba(26, 26, 26, 1);
  }
  .cta-button.primary-cta {
    --glass-tint-top: rgba(247, 214, 75, 1);
    --glass-tint-bottom: rgba(247, 214, 75, 1);
  }
}

/* Reduced motion: soften the material. Motion itself is handled by the
   .motion-off block at the end of this file. */
@media (prefers-reduced-motion: reduce) {
  .glass,
  .cta-button,
  .loom-tip {
    --glass-blur: 7px;
    --glass-saturate: 120%;
    --glass-tint-top: rgba(255, 255, 255, 0.9);
    --glass-tint-bottom: rgba(255, 255, 255, 0.84);
    --glass-specular-opacity: 0.5;
  }
  .cta-button {
    --glass-tint-top: rgba(26, 26, 26, 0.98);
    --glass-tint-bottom: rgba(26, 26, 26, 0.94);
  }
  .cta-button.primary-cta {
    --glass-tint-top: rgba(247, 214, 75, 0.98);
    --glass-tint-bottom: rgba(247, 214, 75, 0.94);
  }
}

/* Scrolling lightens the glass for a mouse or trackpad only. On touch the glass
   is decided once, before first paint (the coarse-pointer block below), and
   body.is-scrolling carries no style at all: a class that restyles the page at
   the start and end of every flick (backdrop-filter, the panel's specular
   animation, transitions) costs the scroll's first frame on a phone. */
@media (hover: hover) and (pointer: fine) {
  body.is-scrolling {
    --glass-blur: 0px !important;
    --glass-saturate: 100% !important;
  }
  body.is-scrolling .glass,
  body.is-scrolling .final-cta,
  body.is-scrolling .loom-tip,
  body.is-scrolling .cta-button {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    --glass-tint-top: rgba(255, 255, 255, 0.92);
    --glass-tint-bottom: rgba(255, 255, 255, 0.88);
    transition: none !important;
  }
  body.is-scrolling .final-cta::before {
    animation: none !important;
  }
}

/* LOOM-LITE-PERF: mobile / weak devices — glass look without blur cost.
   .glass-lite is the same, added by the v2 governor when the device measurably
   cannot afford the blur (§7, §11 M5). */
.loom-lite,
.glass-lite {
  --glass-blur: 0px;
  --glass-saturate: 100%;
}
.loom-lite .glass,
.loom-lite .cta-button,
.loom-lite .final-cta,
.loom-lite .loom-tip,
.loom-lite header,
.glass-lite .glass,
.glass-lite .cta-button,
.glass-lite .final-cta,
.glass-lite .loom-tip,
.glass-lite header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.88) !important;
}


/* APPLE-CLEAN — quiet one-pager theme (2026-09-17 rebuild; direction-agnostic
   since HE-COPY-v2: logical properties only, the document sets dir). */
body.apple-clean {
  text-align: start;
  background: #fafafa !important;
  background-image: none !important;
  color: #1d1d1f;
  --color-bg: #fafafa;
  --color-text: #1d1d1f;
}
body.apple-clean::before,
body.apple-clean::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
body.apple-clean header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 8px 12px;
}
body.apple-clean .logo {
  margin-inline: 0 auto;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.apple-clean main {
  gap: 11vh;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}
body.apple-clean .hero {
  min-height: 58dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Top padding is Loom's seat: room for the body (live or static) between
     the sticky header and the eyebrow, so it never starts on top of the copy. */
  /* px, not rem: the seat holds Loom (whose size does not follow the text
     size), so a 200% text setting does not push the headline off the first screen. */
  padding-top: max(136px, calc(104px + env(safe-area-inset-top)));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
@media (max-width: 820px) {
  body.apple-clean .hero {
    padding-top: max(144px, calc(112px + env(safe-area-inset-top)));
    min-height: auto;
  }
}
/* Hebrew sets tighter than Latin at display sizes: ease the negative tracking. */
body.apple-clean h1,
body.apple-clean h2,
body.apple-clean h3 {
  letter-spacing: -0.015em;
}
body.apple-clean .hero h1 {
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 1rem;
  text-wrap: balance;
}
@media (max-width: 820px) {
  body.apple-clean .hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
  }
}
/* Phones, and any width once text is enlarged: pill padding follows the
   viewport, not the root font size, so a 200% text setting cannot push the
   buttons (and the final panel) past the column. */
@media (max-width: 480px) {
  body.apple-clean .cta-button {
    padding-inline: clamp(1rem, 6vw, 2.2rem);
  }
  body.apple-clean .nav-cta {
    padding-inline: clamp(12px, 3.5vw, 19.2px);
  }
  body.apple-clean .final-cta {
    padding-inline: 1rem;
  }
  body.apple-clean .logo {
    font-size: clamp(1.1rem, 5vw, 1.4rem);
  }
}
body.apple-clean .eyebrow {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  opacity: 1;
  color: #515154;
}
body.apple-clean .lead,
body.apple-clean .final-sub {
  font-size: 1.25rem;
  line-height: 1.5;
  opacity: 1;
  color: #515154;
  max-width: 36rem;
}
body.apple-clean .hero .lead {
  margin-bottom: 0;
}
body.apple-clean .hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
/* What the button really does, and where the product really is: small, but
   readable (4.5:1 on #fafafa) and next to the action, not in the footer. */
body.apple-clean .cta-hint,
body.apple-clean .hero-note,
body.apple-clean .group-note,
body.apple-clean .mail-line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 1;
  color: #5f5f63;
  max-width: 34rem;
}
body.apple-clean .hero-note {
  margin-top: 1.1rem;
}
body.apple-clean .mail-line {
  margin-top: 0.35rem;
}
body.apple-clean .mail-link {
  display: inline-block;
  padding: 0.55rem 0.25rem;
  color: #1d1d1f;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  pointer-events: auto;
}
body.apple-clean .cta-button {
  background: #1d1d1f !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.apple-clean .cta-button.primary-cta {
  background: #f7d64b !important;
  color: #1d1d1f !important;
}

/* Grouped copy: a titled block (examples / how it works) with its beats. */
body.apple-clean .group {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}
body.apple-clean .group-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  line-height: 1.2;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
body.apple-clean .group-head h2::before {
  display: none;
}
body.apple-clean .group-head p {
  margin: 0;
}
body.apple-clean .group-head p:not(.group-note),
body.apple-clean .beat p,
body.apple-clean .meet p {
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 1;
  color: #3a3a3c;
}
body.apple-clean .beat h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
body.apple-clean .beat h3::before {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin-bottom: 1.1rem;
  border-radius: 3px;
  background-color: var(--color-accent);
}
body.apple-clean .beat p {
  margin: 0;
}
body.apple-clean .meet h2 {
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
body.apple-clean .meet p {
  margin: 0;
}
body.apple-clean .final-cta h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
body.apple-clean .final-cta .final-sub {
  margin: 0 0 2rem;
}
body.apple-clean .final-cta .cta-hint {
  margin-top: 0.9rem;
}
/* Room for Loom on a phone (owner brief §4: the character never hides a
   heading, text, a link or the CTA). The column is as wide as the screen, so
   he rests in the gaps between blocks, and a gap before a heading or a button
   has to hold his body and his shadow below it (the shadow may lie on a
   paragraph, never on a heading or a CTA): with these, one such gap is on
   screen at every scroll position of a 390 × 664 phone. The group of beats
   keeps its tighter rhythm: their short headings leave him room beside them.
   px, like the hero seat: Loom's size does not follow the text size. Wider
   screens have that room beside short lines and in the margins. */
@media (max-width: 540px) {
  body.apple-clean main { gap: 200px; } /* between the sections (and scroll time for each line's prop) */
  body.apple-clean .hero-actions { margin-top: 150px; } /* above the hero CTA */
  body.apple-clean .final-cta .final-sub { margin-bottom: 150px; } /* above the final CTA */
  body.apple-clean #how.group { gap: 180px; } /* before a beat whose heading spans the column */
  body.apple-clean #values.group { gap: 150px; } /* each example gets its own stretch of scroll (its prop plays under it) */
}
body.apple-clean .glass {
  background: rgba(255,255,255,0.72) !important;
}
/* Without blur, 72% white lets the copy read straight through the sticky bar. */
body.apple-clean.loom-lite header.glass,
body.apple-clean.glass-lite header.glass {
  background: rgba(255, 255, 255, 0.94) !important;
}
@media (hover: hover) and (pointer: fine) {
  body.apple-clean.is-scrolling header.glass {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}
/* Touch: the glass is decided once per session, at first paint: the unblurred
   lite panels (the same computed style app.js's loom-lite gives a coarse
   pointer), so neither app.js, nor the governor's glass-lite, nor a scroll
   ever flips backdrop-filter on a phone. Keep in step with the .loom-lite rules. */
@media (pointer: coarse) {
  body {
    --glass-blur: 0px;
    --glass-saturate: 100%;
  }
  .glass,
  .cta-button,
  .final-cta,
  .loom-tip,
  header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.88) !important;
  }
  body.apple-clean header.glass {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.apple-clean header.glass {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}
body.apple-clean footer {
  text-align: center;
  opacity: 1;
  color: #5f5f63;
  padding: 2rem 1rem calc(4rem + env(safe-area-inset-bottom));
  font-size: 0.9rem;
}
body.apple-clean footer p {
  margin: 0 auto;
  font-size: inherit;
  opacity: 1;
}

/* Keyboard focus: visible on every surface (yellow pill, dark pill, glass). */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #1d1d1f;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}
h1, h2, h3, section, article {
  scroll-margin-top: 7rem;
}

/* Motion control: small, fixed, out of the copy's way. Insets and padding in
   px, so a larger text setting grows only its label, not the box over the copy. */
.motion-toggle {
  position: fixed;
  inset-block-end: calc(12px + env(safe-area-inset-bottom));
  inset-inline-start: calc(12px + env(safe-area-inset-left));
  z-index: var(--z-toggle);
  min-height: 44px;
  padding: 8px 15.2px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.94);
  color: #1d1d1f;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  pointer-events: auto;
}
.motion-toggle:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.3);
}

/* Intro: Loom is born on the header line. A tiny Loom pops up beside the
   wordmark, wakes and stays there, alive, until the visitor starts
   scrolling; then he startles, hops down to his seat and grows into the live
   Loom's size on the way (app.js drives it with Web Animations, transforms
   and opacity only). Every size here is the live Loom's own geometry ×
   --intro-k, so at rest the figure is drawn exactly like the first live frame
   and the handoff is a cut under an identical picture. Hidden until app.js
   places it. */
#intro-mark {
  --intro-k: 1;
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  pointer-events: none;
  background: transparent;
  visibility: hidden;
}
#intro-mark.is-placed {
  visibility: visible;
}
/* On the header line the figure lives inside the sticky header (app.js dock),
   so it moves with the wordmark; it returns to the fixed layer to hop out. */
#intro-mark.is-docked {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* One Loom at a time: while he is tiny in the header the hero mark stays out. */
body.has-mini-loom .static-mark {
  visibility: hidden;
}
html:not(.js) #intro-mark,
#intro-mark.is-done {
  visibility: hidden;
}
/* The travel: one box per axis (so each gets its own easing: an arc), then
   the growth about the figure's centre. All three are points; the face hangs
   from them. --intro-x / --intro-y: where he is born (the wordmark). */
.intro-x,
.intro-y,
.intro-grow {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.intro-x {
  left: var(--intro-x, 2.85rem);
  top: var(--intro-y, 2.4rem);
}
/* On the header line he is as tall as the wordmark's capitals (--intro-s,
   set with --intro-x/-y from the wordmark and kept on it); the hop grows him
   to scale(1). */
.intro-grow {
  transform: scale(var(--intro-s, 1));
}
/* The capsule (the static mark's rect, rx 44), squashed and stretched about
   its base, like a body standing on something. */
.intro-face {
  position: absolute;
  left: calc(-100px * var(--intro-k));
  top: calc(-55px * var(--intro-k));
  width: calc(200px * var(--intro-k));
  height: calc(110px * var(--intro-k));
  transform-origin: 50% 100%;
}
.intro-face svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* The eyes: the renderer's pills (stroke 16, ±14 long, centres at ±30). */
.intro-eyes {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}
.intro-eye {
  position: absolute;
  top: calc(-22px * var(--intro-k));
  left: calc(-38px * var(--intro-k));
  width: calc(16px * var(--intro-k));
  height: calc(44px * var(--intro-k));
  border-radius: calc(8px * var(--intro-k));
  background: #1a1a1a;
  transform-origin: 50% 58%;
}
.intro-eye + .intro-eye {
  left: calc(22px * var(--intro-k));
}
/* The ground shadow under the seat (the renderer's: 156 × 32, 104 below the
   centre). It only shows as he comes down to it. --intro-sx / --intro-sy: the seat. */
.intro-shadow {
  position: absolute;
  left: calc(var(--intro-sx, 50vw) - 78px * var(--intro-k));
  top: calc(var(--intro-sy, 30vh) + 88px * var(--intro-k));
  width: calc(156px * var(--intro-k));
  height: calc(32px * var(--intro-k));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  opacity: 0;
}
/* The live Loom brings his own shadow: for the few frames both are drawn,
   only one shadow (they are translucent and would add up). */
html.loom-live body.is-intro-handoff .intro-shadow {
  visibility: hidden;
}
/* While he is in the header or on his way the static mark stays out of the
   picture: one Loom at a time. If the intro ends without the live Loom (or
   motion is paused while he waits), it is back at once. */
#intro-mark.is-placed:not(.is-done) ~ .content .static-mark {
  visibility: hidden;
}
/* Handoff: the figure comes to rest on the seat, the stage is shown at once
   under it (the figure is on top and identical: same place, size and eyes),
   and a few frames later the figure goes. So there is never a moment with
   neither on screen, and never two Looms side by side. The copy is never
   hidden: the intro plays over a page that is already readable. */
.loom-live #canvas-container {
  opacity: 0;
}
.loom-live body.is-intro-handoff #canvas-container,
.loom-live body.is-intro-done #canvas-container {
  opacity: 1;
}

/* ------------------------------------------------------------- motion off */
/* One switch for "no continuous motion": set before first paint by the inline
   script when the system asks for reduced motion (or the visitor paused Loom),
   and toggled by the motion control. Without JS the media query does the same. */
.motion-off *,
.motion-off *::before,
.motion-off *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.motion-off .cta-button:hover {
  transform: none;
}
.motion-off #intro-mark {
  opacity: 0;
  visibility: hidden;
}
/* Paused: Loom sits tiny and still on the header line, beside the wordmark. */
.motion-off #intro-mark.is-parked,
#intro-mark.is-parked {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.js) *,
  html:not(.js) *::before,
  html:not(.js) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html:not(.js) .cta-button:hover {
    transform: none;
  }
}