/* ═══════════════════════════════════════════
   Billy — warm California design system
   ═══════════════════════════════════════════ */

:root {
  --bg: #eeebe6;
  --bg-soft: #f4f2ee;
  --ink: #1a1f2b;
  --ink-soft: #565b66;
  --muted: #8a8f98;
  --card: #ffffff;
  --line: rgba(26, 31, 43, 0.08);
  --dark: #2b2b28;
  --dark-hover: #1c1c1a;
  --blue: #0a84ff;
  --grey-bubble: #e9e9eb;
  --radius-card: 24px;
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: rgba(10, 132, 255, 0.2); }

/* ═══════════ TYPE ═══════════ */

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-align: center;
}
.display .soft { color: var(--ink-soft); }
.display em { font-style: italic; font-weight: 500; }
.display.xl { font-size: clamp(44px, 6.4vw, 84px); }
.fn {
  font-size: 0.36em;
  vertical-align: super;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
}
.lede {
  max-width: 560px;
  margin: 22px auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

/* ═══════════ BUTTONS ═══════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.25s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-dark {
  background: var(--dark);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -10px rgba(26,31,43,.5);
}
.btn-dark:hover { background: var(--dark-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 32px -12px rgba(26,31,43,.55); }
.btn-light {
  background: linear-gradient(180deg, #ffffff, #f1efeb);
  color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px -10px rgba(26,31,43,.28), 0 0 0 1px var(--line);
}
.btn-sm { padding: 9px 18px; font-size: 14px; }
/* reference-style CTA: white pill, iMessage glyph + label, ring + soft shadow */
.btn-imsg {
  gap: 8px;
  padding: 10px 18px 10px 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(26,31,43,.10), 0 2px 8px rgba(26,31,43,.06);
}
.btn-imsg:hover { box-shadow: 0 0 0 1px rgba(26,31,43,.10), 0 4px 16px rgba(26,31,43,.10); }
.imsg-icon { width: 20px; height: 20px; display: block; }
.btn-xs { padding: 6px 14px; font-size: 13px; }
.btn-full { width: 100%; margin-top: auto; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 1.5px solid transparent;
  transition: gap .3s var(--ease-out);
}
.textlink:hover { gap: 10px; }
.chev, .caret { width: 11px; height: 11px; }

/* ═══════════ LOADER ═══════════ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.loader-boomerang { width: 56px; height: 56px; color: var(--ink); animation: boomspin 1.4s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes boomspin {
  0%   { transform: rotate(0deg)   translateY(0); }
  50%  { transform: rotate(180deg) translateY(-14px); }
  100% { transform: rotate(360deg) translateY(0); }
}
.loader-word { display: flex; font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.loader-word span { opacity: 0; transform: translateY(14px); animation: raise .6s var(--ease-out) forwards; }
.loader-word span:nth-child(1) { animation-delay: .08s; }
.loader-word span:nth-child(2) { animation-delay: .16s; }
.loader-word span:nth-child(3) { animation-delay: .24s; }
.loader-word span:nth-child(4) { animation-delay: .32s; }
.loader-word span:nth-child(5) { animation-delay: .40s; }
@keyframes raise { to { opacity: 1; transform: translateY(0); } }

/* ═══════════ NAV ═══════════ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  transition: transform .5s var(--ease-out), background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
.nav.scrolled {
  background: rgba(238, 235, 230, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
}
.nav.hidden { transform: translateY(-100%); }
.nav-logo .logo-img { width: 38px; height: 38px; display: block; transition: transform .6s var(--ease-out); }
.nav-logo:hover .logo-img { transform: rotate(-135deg); }
.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  transition: background .25s ease;
}
.nav-link:hover { background: rgba(26, 31, 43, 0.06); }
.nav-right { display: flex; align-items: center; gap: 10px; }

/* ═══════════ HERO ═══════════ */

.hero {
  position: relative;
  padding: calc(var(--nav-h) + 56px) 24px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s ease .3s;
}
.hero-bg.on { opacity: 1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.hero-bg-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(238,235,230,.75) 14%, rgba(238,235,230,0) 42%, rgba(238,235,230,0) 72%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, rgba(238,235,230,0) 18%, rgba(238,235,230,0) 82%, var(--bg) 100%);
}

.hero-content { text-align: center; max-width: 820px; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 14px -8px rgba(26,31,43,.25);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.hero-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(26,31,43,.3); }
.hero-pill-badge {
  background: #e8e5df;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 13px;
}
.hero-pill .chev { color: var(--muted); }

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-top: 34px;
}
.hero-title .line { display: block; }
.hero-title em { font-weight: 500; }
.hero-sub {
  margin-top: 22px;
  font-size: 18px;
  color: var(--ink-soft);
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

/* intro animation initial states (JS animates in) */
[data-intro] { opacity: 0; transform: translateY(30px); filter: blur(6px); }

.hero-media {
  width: min(1060px, 100%);
  margin-top: 72px;
  perspective: 1200px;
}
.hero-media-frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6),
    0 30px 80px -30px rgba(26,31,43,.45),
    0 8px 24px -12px rgba(26,31,43,.3);
  background: #dfe6ea;
}
.hero-media-frame video,
.hero-media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* fine film grain overlay (SVG turbulence, self-contained) */
.hero-media-frame::after,
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
/* iMessage bubbles (used inside deck cards) */
.imsg { display: flex; flex-direction: column; gap: 8px; }
.imsg-row { display: flex; }
.imsg-row.to { justify-content: flex-end; }
.bubble {
  max-width: 82%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.4;
  text-align: left;
}
.bubble.grey { background: var(--grey-bubble); color: var(--ink); border-bottom-left-radius: 5px; }
.bubble.blue { background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }

/* ═══════════ ANIMATED PHONE (bphone) ═══════════ */
/* Real titanium iPhone render (transparent-center PNG) overlaid on a
   DOM screen — the same technique as the reference site. Screen inset + aspect
   ratio are taken directly from the frame asset (2.5% / 5.33%). */

.bphone {
  position: relative;
  aspect-ratio: 450 / 920;
  filter: drop-shadow(0 14cqw 24cqw rgba(26, 31, 43, .32));
}
.bphone-hero {
  position: absolute;
  left: 50%;
  bottom: -14%;
  transform: translateX(-50%);
  width: clamp(280px, 40%, 400px);
  container-type: inline-size;
}
.bphone-row { width: 310px; container-type: inline-size; }

/* the photoreal frame sits on top of everything */
.bphone-frame {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* screen shows through the frame's transparent aperture */
.bphone-screen {
  container-type: inline-size;
  position: absolute;
  inset: 2.5% 5.33%;
  border-radius: 16cqw;
  background: #fff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-body);
  /* iOS toolbar tokens — exact values from the reference stylesheet */
  --ios-glass: #f7f7f7f2;
  --ios-overlay: #0000000d;
  --ios-icon: #404040;
  --ios-placeholder: #d9d9d9;
  --ios-secondary: #3c3c4399;
  --ios-bubble-received: #e9e9ea;
}
.bp-chip-shadow {
  box-shadow: 0 0 0 0.12cqw rgba(0,0,0,.04), 0 .5cqw 1.5cqw -.25cqw rgba(0,0,0,.05);
}

/* status bar — floats at the top, padded around the Dynamic Island
   (the reference: px-[12cqw] pt-[6.2cqw] pb-[4.7cqw], time font-[590] 4.23cqw) */
.bphone-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6.2cqw 12cqw 4.7cqw;
  font-size: 4.23cqw;
  font-weight: 590;
  color: #000;
}
.bp-status-icons { display: inline-flex; align-items: center; gap: 1.74cqw; color: #000; }
.bp-status-icons svg { width: auto; display: block; }
.bp-wifi { height: 3.07cqw; }
.bp-batt { height: 3.23cqw; }

/* floating header — matches the reference iOS toolbar. Floats over the
   message area (z-10) so the thread scrolls behind it and dissolves.
   top:9% clears the Dynamic Island (island bottom ≈ 12.5cqw). */
.bphone-header {
  position: absolute;
  top: 9%; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 3.98cqw;
}
.bp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ios-glass);
  color: var(--ios-icon);
  box-shadow: 0 0 0 0.12cqw rgba(0,0,0,.04), 0 .5cqw 1.5cqw -.25cqw rgba(0,0,0,.05);
}
.bp-back { height: 10.95cqw; gap: 1cqw; padding: 0 2cqw; }
.bp-back svg { width: 4.23cqw; height: 4.23cqw; }
.bp-cam { width: 10.95cqw; height: 10.95cqw; }
.bp-cam svg { width: 4.98cqw; height: 4.98cqw; }
.bp-badge {
  display: grid;
  place-items: center;
  width: 5.22cqw;
  height: 5.22cqw;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 2.99cqw;
  font-weight: 590;
}
/* the reference: avatar block is ABSOLUTE-centered to the screen (left-1/2,
   -translate-x-1/2) so the wider back chip can't push it off-axis */
.bp-contact {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 14.93cqw;
  height: 14.93cqw;
  display: block;
}
.bp-avatar {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #3a4150, #14161c 70%);
  display: grid;
  place-items: center;
  box-shadow: 0 0.6cqw 0.5cqw rgba(0,0,0,.1);
}
.bp-avatar svg { width: 8cqw; color: #f2efe9; }
.bp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* the reference: pill hangs at 91.67% of the avatar, h 7.96cqw, pl 3.48 / pr 1.74 */
.bp-name {
  position: absolute;
  left: 50%;
  top: 91.67%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  height: 7.96cqw;
  white-space: nowrap;
  font-size: 4.23cqw;
  font-weight: 700;
  color: #000;
  background: var(--ios-glass);
  backdrop-filter: blur(5cqw);
  -webkit-backdrop-filter: blur(5cqw);
  border-radius: 999px;
  padding: 0 1.74cqw 0 3.48cqw;
  box-shadow: 0 0 0 0.12cqw rgba(0,0,0,.04), 0 .5cqw 1.5cqw -.25cqw rgba(0,0,0,.05);
}
.bp-name i { font-style: normal; color: var(--ios-secondary); font-weight: 500; }

/* day stamp — pinned inside the scroll viewport (the reference's top:16% label). It
   does NOT scroll with the column, and sits BEHIND the messages (DOM order:
   before .bphone-track) so they cover it as they scroll up; visible at rest. */
.bphone-daystamp {
  position: absolute;
  top: 51cqw;   /* generous gap below the name pill (pill bottom ≈ 43cqw), like the reference */
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  font-size: 2.74cqw;
  line-height: 1;
  color: var(--ios-secondary);
}
.bphone-daystamp .bp-day { font-weight: 510; }

/* stream: full-height clip viewport spanning from behind the floating
   header down to the input bar. Messages scroll up behind the header
   and dissolve through the generous top fade mask — the the reference approach. */
.bphone-stream {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 17cqw;
  z-index: 0;
  overflow: hidden;
  padding: 0 4.4cqw;
  /* fade covers the status-bar + header band so the thread dissolves cleanly */
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 25%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 3%, #000 25%, #000 100%);
}
.bphone-track {
  position: absolute;
  left: 4.4cqw;
  right: 4.4cqw;
  top: 0;
  /* thread starts below the fixed daystamp and builds downward
     (the reference's top-[19%]); it only ever translates UP once it fills the screen */
  padding-top: 60cqw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1cqw;   /* tight base gap within a same-sender run (the reference gap-[1cqw]) */
  will-change: transform;
  transform: translateY(0);
  transition: transform .55s cubic-bezier(.33, 1, .68, 1);
}
/* three spacing tiers (real iMessage): base gap-1cqw within a same-sender run,
   more on a sender change, most at an authored pause */
.bp-msg.newsender { margin-top: 3.5cqw; }
.bp-msg.turn { margin-top: 7.5cqw; }

/* composer / input bar — iOS 18 style (plus + up-arrow send). Floats at
   the bottom over the message area with an opaque white base. */
.bphone-inputbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2.99cqw;
  padding: 1cqw 6.97cqw 6.97cqw;
  background: linear-gradient(to top, #fff 72%, rgba(255,255,255,0));
}
.bp-plus {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 9.95cqw;
  height: 9.95cqw;
  border-radius: 50%;
  background: var(--ios-glass);
  color: var(--ios-icon);
  box-shadow: 0 0 0 0.12cqw rgba(0,0,0,.04), 0 .5cqw 1.5cqw -.25cqw rgba(0,0,0,.05);
}
.bp-plus svg { width: 4.98cqw; height: 4.98cqw; }
.bp-inputpill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.99cqw;
  height: 9.95cqw;
  border-radius: 999px;
  background: var(--ios-glass);
  padding: 0 2.49cqw 0 4.48cqw;
  box-shadow: 0 0 0 0.12cqw rgba(0,0,0,.04), 0 .5cqw 1.5cqw -.25cqw rgba(0,0,0,.05);
}
.bp-input { font-size: 4.23cqw; font-weight: 500; color: var(--ios-placeholder); }
.bp-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 5.47cqw;
  height: 5.47cqw;
  border-radius: 50%;
  background: var(--ios-overlay);
  color: var(--ios-icon);
}
.bp-send svg { width: 3cqw; height: 3cqw; }

/* stream items */
.bp-msg { display: flex; max-width: 100%; opacity: 0; }
.bp-msg.me { justify-content: flex-end; transform-origin: bottom right; }
.bp-msg.billy { justify-content: flex-start; transform-origin: bottom left; }
.bp-msg.in { animation: bp-in .5s cubic-bezier(.34, 1.45, .5, 1) forwards; }
@keyframes bp-in {
  from { opacity: 0; transform: translateY(3.5cqw) scale(.88); filter: blur(0.9cqw); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.bp-bubble {
  position: relative;
  max-width: 69.65cqw;
  padding: 2.24cqw 2.99cqw;
  border-radius: 4.98cqw;
  font-size: 4.23cqw;
  line-height: 1.295;
  letter-spacing: -0.005em;
  white-space: pre-wrap;
}
/* exact iMessage blues from the reference's stylesheet: bubbles use #0088ff */
.bp-msg.me .bp-bubble { background: #0088ff; color: #fff; }
.bp-msg.billy .bp-bubble { background: var(--ios-bubble-received); color: #000; }

/* iMessage bubble tail (the "real iMessage" pointer at the bottom corner) */
.bp-tail {
  position: absolute;
  bottom: -1.73cqw;
  width: 4.23cqw;
  height: 4.46cqw;
  pointer-events: none;
}
.bp-tail svg { display: block; width: 100%; height: 100%; }
.bp-tail-me { right: 1.75cqw; color: #0088ff; }
.bp-tail-billy { left: 1.75cqw; color: var(--ios-bubble-received); }
.bp-tail-billy svg { transform: scaleX(-1); }

/* photo attachment — the reference: aspect-[4/5] w-[54cqw] rounded-[4.98cqw],
   shadow 0 0.5cqw 2cqw rgba(8,21,46,0.28), row gets mb-[3cqw] */
.bp-photo {
  width: 54cqw;
  aspect-ratio: 4 / 5;
  border-radius: 4.98cqw;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0.5cqw 2cqw rgba(8, 21, 46, 0.28);
}
.bp-msg:has(.bp-photo) { margin-bottom: 3cqw; }

/* fanned photo stack (multiple photos) — the reference's exact offsets/rotations */
.bp-photostack { position: relative; width: 71cqw; height: 67.5cqw; }
.bp-photostack .bp-photo { position: absolute; top: 0; left: 0; transform-origin: center; }
.bp-photostack .bp-photo:nth-child(1) { z-index: 3; transform: translate(0, 0) rotate(0deg); }
.bp-photostack .bp-photo:nth-child(2) { z-index: 2; transform: translate(8.5cqw, 0.8cqw) rotate(2deg); }
.bp-photostack .bp-photo:nth-child(3) { z-index: 1; transform: translate(17cqw, 1.6cqw) rotate(4deg); }
.bp-msg:has(.bp-photostack) { margin-bottom: 3cqw; }

/* typing indicator — sized to a real iPhone: compact pill (~12cqw × ~7.7cqw)
   with ~2cqw dots that PULSE in place (scale+fade, no bounce/overshoot). */
.bp-typing { display: inline-flex; align-items: center; gap: 1cqw; padding: 2.9cqw 3cqw; }
.bp-typing i {
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  background: #8e8e93;
  animation: bp-dot 1.4s ease-in-out infinite both;
}
.bp-typing i:nth-child(1) { animation-delay: 0s; }
.bp-typing i:nth-child(2) { animation-delay: .18s; }
.bp-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes bp-dot {
  0%        { transform: scale(.72); opacity: .5; }
  28%       { transform: scale(1); opacity: 1; }
  55%, 100% { transform: scale(.72); opacity: .5; }
}

/* rich link card */
.bp-card {
  width: 68cqw;
  border-radius: 5cqw;
  overflow: hidden;
  background: #e9e9eb;
  box-shadow: 0 1.4cqw 4cqw rgba(0,0,0,.12);
}
.bp-card-img { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.bp-card-body { padding: 2.4cqw 3.6cqw 3cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.bp-card-title { font-size: 3.9cqw; font-weight: 700; color: #0b0b0d; line-height: 1.25; }
.bp-card-domain { font-size: 3.2cqw; color: #8a8f98; margin-top: .6cqw; }
.bp-card-chev { color: #b7bcc4; font-size: 4.6cqw; }

/* voice memo bubble */
.bp-voice { display: inline-flex; align-items: center; gap: 2.4cqw; width: 60cqw; }
.bp-voice-play {
  width: 0; height: 0;
  border-left: 2.7cqw solid #fff;
  border-top: 1.7cqw solid transparent;
  border-bottom: 1.7cqw solid transparent;
  flex: 0 0 auto;
}
/* STATIC waveform — real iMessage voice notes don't animate at rest; the bars
   are fixed audio amplitude (heights set inline per bar in JS). */
.bp-voice-wave { display: flex; align-items: center; gap: .8cqw; flex: 1; height: 5cqw; }
.bp-voice-wave i { flex: 1; border-radius: 1cqw; background: rgba(255,255,255,.9); }
.bp-voice-time { font-size: 3.5cqw; font-weight: 600; color: rgba(255,255,255,.95); }
.bp-delivered {
  text-align: right;
  font-size: 3cqw;
  font-weight: 600;
  color: #8a8f98;
  padding-right: 1cqw;
  margin-top: -0.6cqw;
}

/* whole-thread fade before the loop restarts */
.bphone-track.fade { opacity: 0; transition: opacity .45s ease; }

/* ═══════════ FEATURES INTRO ═══════════ */

.features-intro { padding: 130px 24px 60px; }

/* ═══════════ DECK (pinned cards) ═══════════ */

.deck-section { position: relative; }
.deck-pin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 40px 24px;
}
.deck {
  position: relative;
  width: min(620px, 92vw);
  height: 400px;
}
.deck-card {
  position: absolute;
  inset: 0;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px rgba(26,31,43,.35);
  transform-origin: center top;
}
.deck-card-head { display: flex; gap: 16px; align-items: flex-start; }
.deck-card-head h3 { font-size: 20px; font-weight: 800; }
.deck-card-head p { color: var(--ink-soft); font-size: 14.5px; margin-top: 3px; max-width: 380px; }
.appicon {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
}
.appicon svg { width: 27px; height: 27px; }
.appicon.notion { background: linear-gradient(160deg, #3b3b3b, #111); }
.appicon.oura { background: linear-gradient(160deg, #4a5568, #1a202c); }
.appicon.gmail { background: linear-gradient(160deg, #ea4335, #c5221f); }
.deck-chat {
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.deck-foot { display: flex; align-items: center; justify-content: space-between; }
.deck-team { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.deck-dots { display: flex; gap: 8px; }
.deck-dots .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(26,31,43,.18);
  transition: background .3s, transform .3s;
}
.deck-dots .dot.active { background: var(--ink); transform: scale(1.25); }

/* ═══════════ FEATURE ROWS ═══════════ */

.rows {
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 130px;
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.row.flip .row-copy { order: 2; }
.row.flip .row-media { order: 1; }
.row-num {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(26,31,43,.05);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.row-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.row-title em { font-weight: 500; }
.row-copy p { margin-top: 14px; color: var(--ink-soft); max-width: 400px; }
.row-copy .textlink { margin-top: 18px; }
.row-media { display: flex; justify-content: center; }

/* ═══════════ REFERENCE-STYLE FEATURE MODAL ═══════════ */

.connect-section { padding-top: 30px; padding-bottom: 10px; }

.row-list { list-style: none; margin-top: 20px; max-width: 400px; }
.row-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-soft);
}
.row-list li:last-child { border-bottom: none; }
.row-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26, 31, 43, 0.35);
  flex: 0 0 auto;
}

/* card: photo bg + dark tint + floating layer (the reference formula, 540x440) */
.omodal {
  position: relative;
  width: min(540px, 100%);
  aspect-ratio: 540 / 440;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 30px 70px -30px rgba(26, 31, 43, 0.45);
}
.omodal-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.omodal-tint { position: absolute; inset: 0; background: rgba(26, 31, 43, 0.32); }
.omodal-tint-soft { background: rgba(26, 31, 43, 0.18); }
.omodal-layer { position: absolute; inset: 0; }

/* center product chip (68px white, 50px dark tile inside — the reference metrics) */
.oc-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  opacity: 0;
}
.oc-center-tile {
  width: 50px; height: 50px;
  border-radius: 13px;
  background: radial-gradient(circle at 32% 28%, #3a4150, #14161c 70%);
  color: #f2efe9;
  display: grid;
  place-items: center;
}
.oc-center-tile svg { width: 30px; height: 30px; }
.oc-center-tile img { width: 34px; height: 34px; object-fit: contain; }

/* provider chips (white rounded-14, the reference sizes/positions via vars) */
.oc-chip {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  transform: translate(-50%, -50%);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  display: grid;
  place-items: center;
  opacity: 0;
}
.oc-chip svg { width: 54%; height: 54%; }

/* entrance: center first, chips staggered (spring pop) */
.omodal.on .oc-center { animation: oc-pop .6s cubic-bezier(.34, 1.45, .5, 1) both; }
.omodal.on .oc-chip {
  animation: oc-pop .55s cubic-bezier(.34, 1.45, .5, 1) both;
  animation-delay: calc(180ms + var(--i) * 95ms);
}
@keyframes oc-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── habits modal: blue habit bubbles (the reference metrics, cqw of the card) ── */
.omodal { container-type: inline-size; }
.hb-bubble {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) scale(.82);
  max-width: 36cqw;
  padding: 1.5cqw 2.6cqw;
  border-radius: 3.4cqw;
  background: #0a84ff;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 2.7cqw;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(10, 132, 255, 0.4);
  opacity: 0;
  transition: opacity 450ms ease, transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hb-bubble.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hb-tail {
  position: absolute;
  bottom: -1.1cqw; right: 1.5cqw;
  width: 3.1cqw; height: 3.3cqw;
  color: #0a84ff;
  pointer-events: none;
}
.hb-tail svg { display: block; width: 100%; height: 100%; }

/* ── admin modal: tilted app icons with counting badges ── */
.ad-icon {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r));
  width: 64px; height: 64px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  display: grid;
  place-items: center;
}
.ad-icon svg { width: 34px; height: 34px; }
.ad-badge {
  position: absolute;
  top: -12px; right: -14px;
  min-width: 24px;
  padding: 2.5px 7px;
  border-radius: 100px;
  background: #ff383c;
  color: #fff;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* recipe card */
.recipe-card {
  width: min(400px, 100%);
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -28px rgba(26,31,43,.35);
}
.recipe-head { display: flex; gap: 14px; align-items: center; }
.recipe-emoji {
  width: 46px; height: 46px;
  background: var(--bg);
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 22px;
}
.recipe-head strong { display: block; font-size: 16.5px; }
.recipe-meta { color: var(--muted); font-size: 13px; }
.recipe-steps { list-style: none; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.recipe-steps li {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
}
.step-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 4px rgba(52,199,89,.15);
}
.recipe-foot { display: flex; gap: 8px; }
.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(26,31,43,.06);
  color: var(--ink-soft);
}
.pill-tag.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }


/* composer */
.composer {
  width: min(440px, 100%);
  background: var(--card);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -28px rgba(26,31,43,.35);
}
.composer-input {
  min-height: 58px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}
.composer-caret {
  width: 2px; height: 22px;
  background: var(--blue);
  animation: blink 1.05s steps(1) infinite;
  margin-top: 2px;
}
@keyframes blink { 50% { opacity: 0; } }
.composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.composer-actions { display: inline-flex; align-items: center; gap: 6px; }
kbd {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 3px 7px;
  box-shadow: inset 0 -1px 0 rgba(26,31,43,.12), 0 0 0 1px var(--line);
}

/* kitchen code card */
.kitchen {
  width: min(460px, 100%);
  background: #16181d;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(26,31,43,.6);
}
.kitchen-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: #1d2026;
}
.kitchen-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3f47; }
.kitchen-bar i:nth-child(1) { background: #ff5f57; }
.kitchen-bar i:nth-child(2) { background: #febc2e; }
.kitchen-bar i:nth-child(3) { background: #28c840; }
.kitchen-bar span { margin-left: 8px; color: #7d8590; font-size: 12.5px; font-weight: 700; }
.kitchen pre {
  padding: 20px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #c9d1d9;
  overflow-x: auto;
}
.c-kw { color: #ff7b72; }
.c-fn { color: #d2a8ff; }
.c-key { color: #79c0ff; }
.c-str { color: #a5d6ff; }

/* ═══════════ PRICING ═══════════ */

.pricing { padding: 150px 24px 60px; }

.billing-toggle {
  position: relative;
  margin: 38px auto 0;
  width: max-content;
  display: flex;
  background: rgba(26,31,43,.06);
  border-radius: 999px;
  padding: 4px;
}
.toggle-opt {
  position: relative;
  z-index: 2;
  padding: 9px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink-soft);
  transition: color .3s;
}
.toggle-opt.active { color: var(--ink); }
.toggle-thumb {
  position: absolute;
  z-index: 1;
  top: 4px; bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(26,31,43,.3);
  transition: transform .45s var(--ease-out);
}
.billing-toggle.yearly .toggle-thumb { transform: translateX(100%); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 48px auto 0;
  align-items: stretch;
}
.plan {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px var(--line), 0 18px 44px -24px rgba(26,31,43,.25);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--line), 0 34px 70px -28px rgba(26,31,43,.4);
}
.plan.featured {
  background: linear-gradient(180deg, #2e2e2b, #1e1e1c);
  color: #f2f0ec;
  box-shadow: 0 30px 70px -24px rgba(26,31,43,.55);
}
.plan.featured .plan-desc, .plan.featured .billed, .plan.featured .per { color: rgba(242,240,236,.65); }
.plan.featured ul li { color: rgba(242,240,236,.85); }
.plan.featured ul li::before { color: #8bd08b; }
.plan h3 { font-size: 21px; font-weight: 800; }
.plan-desc { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; min-height: 44px; }
.price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 22px;
  font-family: var(--font-display);
}
.price .currency { font-size: 26px; font-weight: 600; }
.price .amount {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-flex;
  overflow: hidden;
}
.price .amount .digit { display: inline-block; }
.price .per { color: var(--muted); font-family: var(--font-body); font-size: 14px; margin-left: 6px; }
.billed { margin-top: 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.includes { margin-top: 22px; font-size: 13.5px; font-weight: 800; }
.plan ul { list-style: none; margin: 12px 0 26px; display: flex; flex-direction: column; gap: 10px; }
.plan ul li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.plan ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 800;
  color: #34a853;
}

/* ═══════════ COMMUNITY ═══════════ */

.community { padding: 150px 0 80px; overflow: clip; }
.community .display { margin-bottom: 52px; }
.marquee {
  --gap: 16px;
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--gap);
  padding-right: var(--gap);
  width: max-content;
  animation: scroll-left 56s linear infinite;
}
.marquee[data-dir="right"] .marquee-track { animation-name: scroll-right; animation-duration: 62s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-left  { to { transform: translateX(-50%); } }
@keyframes scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.tcard {
  width: 340px;
  flex: 0 0 auto;
  background: var(--card);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px -18px rgba(26,31,43,.25);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.tcard:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 0 0 1px var(--line), 0 22px 44px -20px rgba(26,31,43,.35); }
.tcard-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.tcard-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex: 0 0 auto;
}
.tcard-name { font-weight: 800; font-size: 14.5px; line-height: 1.2; }
.tcard-handle { color: var(--muted); font-size: 13px; }
.tcard-body { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.tcard-body b { color: var(--ink); font-weight: 800; }
.community-cta { text-align: center; margin-top: 46px; }

/* ═══════════ CTA ═══════════ */

.cta {
  position: relative;
  margin: 90px 20px 20px;
  border-radius: 32px;
  overflow: hidden;
  /* grows taller as the screen widens so the photo never crops too flat
     (which was slicing the faces off); never below 560, never above 720 */
  min-height: max(560px, 38vw);
  max-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-bg { position: absolute; inset: 0; }
/* bias the crop toward the top so the faces stay in frame on wide/short screens */
.cta-bg img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 22%; }
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* soft dark pool behind the centered text so white type stays legible over the photo */
  background:
    radial-gradient(62% 54% at 50% 46%, rgba(0,0,0,.42), rgba(0,0,0,0) 78%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.04) 42%, rgba(0,0,0,.28));
}
.cta-inner { position: relative; text-align: center; padding: 80px 24px; }
.cta .display { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); }
.cta .display em { color: #fff; }
.cta .hero-ctas { margin-top: 36px; }
/* Explanatory line under the CTA heading, on the dark photographic background. */
.cta-note {
  position: relative;
  max-width: 34ch;
  margin: 20px auto 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

/* ═══════════ FOOTER ═══════════ */

.footer { padding: 90px 40px 30px; }
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
  max-width: 1160px;
  margin: 0 auto;
}
.footer-brand .logo-img { width: 46px; height: 46px; display: block; }
.footer-brand p { margin-top: 14px; color: var(--muted); font-size: 14.5px; font-style: italic; font-family: var(--font-display); }
.footer-cols { display: flex; gap: 70px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.footer-col a { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(72px, 22vw, 320px);
  line-height: .9;
  letter-spacing: -0.04em;
  text-align: center;
  margin-top: 60px;
  background: linear-gradient(180deg, rgba(26,31,43,.16), rgba(26,31,43,.02));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  user-select: none;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  max-width: 1160px;
  margin: 30px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}

/* ═══════════ REVEAL DEFAULTS ═══════════ */

[data-reveal] { opacity: 0; transform: translateY(44px); filter: blur(8px); will-change: transform, opacity, filter; }
html.no-js [data-reveal], html.no-js [data-intro] { opacity: 1; transform: none; filter: none; }
/* The loader is dismissed by the GSAP intro timeline. If GSAP never loads, main.js sets .no-js and
   returns — without this rule the fixed, full-screen loader would trap the page behind a blank
   overlay. (An inline timeout in index.html covers the case where main.js itself fails to load.) */
html.no-js .loader { display: none; }

/* ═══════════ FOCUS ═══════════ */

/* Keyboard focus was invisible sitewide. :focus-visible keeps the ring for keyboard users only,
   and currentColor keeps it legible on both the light and dark surfaces. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════ UNAVAILABLE CTA ═══════════ */

/* Applied by the inline failsafe in index.html to a [data-cta="start"] button while no Billy
   number is configured — reads as deliberately unavailable rather than silently dead. Issue #4. */
.btn.is-soon {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width: 900px) {
  /* The launch nav is two short links (Product, Pricing), so they fit on mobile — no hamburger
     needed, and mobile users keep the navigation they previously lost entirely to display:none.
     If the parked destinations return (#3), build a real menu here instead. */
  .nav-center { display: flex; gap: 14px; }
  .nav-center .nav-link { font-size: 13px; }
  .row { grid-template-columns: 1fr; gap: 36px; }
  .row.flip .row-copy { order: 1; }
  .row.flip .row-media { order: 2; }
  .plans { grid-template-columns: 1fr; max-width: 440px; }
  .deck { height: 460px; }
  .hero-media-frame { aspect-ratio: 3 / 4; }
  .footer-top { flex-direction: column; }
}

/* ═══════════ LOCK-SCREEN PHONE (lockscreen-style, our chassis) ═══════════ */

/* crop: only the top of the phone matters here - fade the rest away
   (measured formula: fixed-height crop + mask solid→transparent) */
.bplock-crop {
  width: min(340px, 88%);
  height: 460px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.82) 76%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.82) 76%, transparent 97%);
}
.bplock-crop .bphone-row { width: 100%; filter: none; }

.bplock {
  /* measured formula: golden sun glow low, white bloom top-left, blue-to-cream ramp */
  background:
    radial-gradient(90% 68% at 50% 92%, rgba(255,196,83,.72) 0%, rgba(255,211,128,.44) 22%, rgba(255,232,190,.24) 44%, rgba(255,255,255,0) 72%),
    radial-gradient(58% 42% at 18% 16%, rgba(255,255,255,.85), rgba(255,255,255,.28) 28%, transparent 62%),
    linear-gradient(180deg, #bfe7ff 0%, #d8effb 35%, #f8eed7 72%, #fcfbf8 100%);
}
.bplock::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 43%),
    linear-gradient(180deg, rgba(9,53,71,.04), rgba(255,255,255,.03) 52%, rgba(255,244,226,.26));
  pointer-events: none;
}

/* clock block - iOS lock screen metrics (1pt = 0.256cqw of screen) */
.bplock-head {
  position: absolute;
  top: 18.5cqw;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1d3247;
  text-shadow: 0 1px 18px rgba(255,255,255,.62);
}
.bplock-lockicon { width: 3.8cqw; height: 3.8cqw; opacity: .34; margin-bottom: 3.8cqw; }
.bplock-clock {
  font-size: 18.5cqw;
  font-weight: 720;
  line-height: .92;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bplock-date { font-size: 4.35cqw; font-weight: 700; color: rgba(29,50,71,.62); margin-top: 3.3cqw; }

/* notification stack - newest on top, older slide down */
.bplock-stack { position: absolute; top: 67cqw; left: 3.8cqw; right: 3.8cqw; }
.bplock-notif {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 2.7cqw;
  padding: 3.3cqw 3.8cqw 3.5cqw;
  border-radius: 4.9cqw;
  background: rgba(255, 255, 255, .74);
  border: .5px solid rgba(255, 255, 255, .76);
  backdrop-filter: blur(30px) saturate(1.28);
  -webkit-backdrop-filter: blur(30px) saturate(1.28);
  box-shadow: 0 4.9cqw 12cqw rgba(15, 53, 71, .16), inset 0 1px 0 rgba(255,255,255,.72);
  transition: transform .55s cubic-bezier(.33,1,.68,1), opacity .45s ease, filter .45s ease;
}
.bplock-notif.in { animation: bplock-in .55s cubic-bezier(.34,1.45,.5,1) both; }
@keyframes bplock-in {
  from { opacity: 0; transform: translateY(-7cqw) scale(.9); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.bplock-notif.bye { opacity: 0; filter: blur(4px); }
.bplock-avatar {
  flex: none;
  width: 10.3cqw; height: 10.3cqw;
  border-radius: 50%;
  background: #f4ecd3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15,53,71,.08), 0 1cqw 3.3cqw rgba(15,53,71,.1);
}
.bplock-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bplock-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bplock-meta { display: flex; align-items: center; justify-content: space-between; gap: 2.7cqw; margin-bottom: .8cqw; }
.bplock-app { font-size: 3.26cqw; font-weight: 760; color: rgba(29,50,71,.52); line-height: 1; }
.bplock-when { font-size: 3cqw; font-weight: 650; color: rgba(29,50,71,.34); line-height: 1; }
.bplock-title { font-size: 3.8cqw; font-weight: 760; color: #16283b; line-height: 1.16; }
.bplock-text { font-size: 3.4cqw; font-weight: 560; color: rgba(29,50,71,.68); line-height: 1.24; margin-top: .55cqw; }

/* flashlight / camera + home indicator */
.bplock-quick {
  position: absolute;
  bottom: 7cqw;
  width: 11.8cqw; height: 11.8cqw;
  border-radius: 50%;
  background: rgba(30, 42, 56, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.bplock-torch { left: 8cqw; }
.bplock-cam { right: 8cqw; }
.bplock-quick svg { width: 5.4cqw; height: 5.4cqw; color: #22374a; }
.bplock-homebar {
  position: absolute;
  bottom: 2.2cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 34cqw; height: 1.3cqw;
  border-radius: 999px;
  background: rgba(16, 23, 32, .8);
}

/* ═══════════ LEGAL PAGES (/terms, /privacy) ═══════════ */
/* legal prose, measured spec: 640px column (720 ≥712px), h1 26/36px
   stepped, 56px spacer, uniform 24px column gap, 14px/500/1.5/-0.01em body
   in #66645f, bold black inline labels, underline links at 25%→45% ink */

.legal {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 96px) 24px 168px;
}
.legal h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
  margin-bottom: 56px;
}
.legal h1 em { font-weight: 500; }
@media (min-width: 712px) {
  .legal { max-width: 720px; }
  .legal h1 { font-size: 36px; letter-spacing: -0.02em; }
}
.legal-date,
.legal p,
.legal li {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #66645f;
}
.legal-date { font-style: italic; }
.legal h2 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* uniform 24px rhythm - no tighter label spacing */
.legal h2,
.legal p,
.legal ul { margin-top: 24px; }
.legal ul { padding-left: 20px; }
.legal li + li { margin-top: 8px; }
/* Justified body copy on the legal pages. Hyphenation goes with it: justifying a 640px measure at
   14px without it opens visible rivers of whitespace between words. Headings and the date line keep
   their own alignment. */
.legal p:not(.legal-date),
.legal li {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Below this width there are too few words per line for justification to hold: the spacing stretches
   instead of settling. Left-align and stop hyphenating. */
@media (max-width: 560px) {
  .legal p:not(.legal-date),
  .legal li {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
  /* Two labels side-by-side collide on a phone and wrap mid-phrase ("Synka Labs / Inc.").
     Stack them so each gets the full width on one line. */
  .footer-bottom { flex-direction: column; gap: 6px; }
}
.legal li strong, .legal p strong { color: var(--ink); }
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 31, 43, 0.25);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease-out;
}
.legal a:hover { text-decoration-color: rgba(26, 31, 43, 0.45); }