/* /instagram — paid-social landing. Loads after the promoted homepage's stylesheets
   and only adds what this page owns: the support ticker, the Bondi Scan hero
   (replacing the homepage Hero + "One little update" section), the Mom moment
   and a sticky bar driven by this page's own script. */

:root {
  /* No top bar by default (the homepage shares this file); a page that has
     the offer bar (.ig-offer-bar) sets the height below. */
  --ig-ticker-h: 0px;
  --ig-nav-h: 48px;
}

/* ── Support ticker ─────────────────────────────────────────────── */
/* The ticker stays pinned at the very top while scrolling, with the nav bar
   pinned right under it (see .landing-nav below). */
.ig-ticker {
  position: sticky;
  top: 0;
  z-index: 46;
  display: block;
  width: 100%;
  height: var(--ig-ticker-h);
  padding: 0;
  overflow: hidden;
  color: #fbf4ea;
  background: var(--landing-ink);
  border: 0;
  cursor: pointer;
  font: 500 12.5px/var(--ig-ticker-h) var(--body, "DM Sans", sans-serif);
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.ig-ticker:focus-visible { outline: 3px solid var(--landing-coral); outline-offset: -3px; }
.ig-page .landing-nav { top: var(--ig-ticker-h); }
/* Anchor jumps land below both pinned bars. */
html:has(.ig-page) { scroll-padding-top: calc(var(--ig-ticker-h) + var(--ig-nav-h)); }
@media (min-width: 960px) {
  :root { --ig-nav-h: 60px; }
}
.ig-ticker-track {
  display: flex;
  width: max-content;
  animation: ig-ticker 46s linear infinite;
}
.ig-ticker:hover .ig-ticker-track,
.ig-ticker:focus-visible .ig-ticker-track { animation-play-state: paused; }
.ig-ticker-group { display: flex; flex: none; align-items: center; }
.ig-ticker-item { display: inline-block; white-space: nowrap; }
.ig-ticker-item b { font-weight: 700; color: #fff; }
.ig-ticker-item u { text-decoration: underline; text-decoration-color: rgba(232, 137, 106, .9); text-underline-offset: 3px; }
.ig-ticker-heart { display: inline-block; margin: 0 16px; color: var(--landing-coral); font-size: 12px; }
@keyframes ig-ticker { to { transform: translateX(-50%); } }

/* ── Offer bar (Founder Edition only) ──────────────────────────── */
/* The ticker's pinned slot. Phones: three short lines in one grid cell, one
   at a time, each fading out fully before the next fades in (no overlap), so
   every line reads whole. Desktop: the same lines as a marquee. The whole
   bar opens checkout. Timing lives in the inline script after the bar. */
html:has(.ig-offer-bar) { --ig-ticker-h: 34px; }
.ig-offer-bar.ig-ticker { display: grid; place-items: center; font-size: 13px; }
.ig-offer-line {
  grid-area: 1 / 1;
  padding: 0 16px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
}
.ig-offer-line.is-on { opacity: 1; }
.ig-offer-line b { font-weight: 700; color: #fff; }
.ig-offer-line em { font-style: normal; font-weight: 700; color: var(--landing-coral); }
.ig-offer-dot { margin: 0 8px; opacity: .55; }
.ig-offer-bar .ig-ticker-track { display: none; }
@media (min-width: 960px) {
  html:has(.ig-offer-bar) { --ig-ticker-h: 38px; }
  .ig-offer-bar.ig-ticker { display: block; font-size: 14px; }
  .ig-offer-bar > .ig-offer-line { display: none; }
  .ig-offer-bar .ig-ticker-track { display: flex; animation-duration: 36s; }
  .ig-offer-bar .ig-ticker-track .ig-offer-line { opacity: 1; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-offer-line { transition: none; }
}

/* ── Hero ───────────────────────────────────────────────────────── */
/* Phones: headline, then the scene edge to edge (one fixed shot of Mom and the
   frame), then the cue. The sticky bar waits for the next section. */
.ig-hero {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-areas: "copy" "stage" "cue";
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  color: var(--landing-ink);
  background: var(--landing-paper);
  font-family: var(--body, "DM Sans", sans-serif);
  scroll-margin-top: 72px;
}
.ig-hero * { box-sizing: border-box; }

.ig-copy { position: relative; z-index: 1; grid-area: copy; margin-top: 6px; text-align: center; }
/* The shot is 990×960 of the photo (SHOT in ig-landing.js); its top and bottom
   edges fade into the page. The top fade is long and eased so the room melts
   up into the headline instead of stopping on a line. */
.ig-hero > .ig-stage {
  --ig-fade: linear-gradient(180deg, transparent 0, rgba(0,0,0,.08) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.58) 17%, rgba(0,0,0,.84) 23%, #000 29%, #000 72%, rgba(0,0,0,.78) 80%, rgba(0,0,0,.45) 88%, rgba(0,0,0,.16) 95%, transparent);
  margin: 14px -20px 0;
  aspect-ratio: 990 / 960;
  -webkit-mask-image: var(--ig-fade);
  mask-image: var(--ig-fade);
}

/* Same scale as every homepage section heading (.wire-section h2). */
.ig-hero h1,
.ig-moment h2 {
  margin: 0 auto;
  color: var(--landing-ink);
  font: 400 clamp(34px, 9.4vw, 46px)/1.02 var(--display, "Newsreader", serif);
  letter-spacing: -.038em;
  text-wrap: balance;
}
.ig-sub { max-width: 30ch; margin: 10px auto 0; color: var(--landing-muted); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.ig-hero h1 span { display: block; }
.ig-hero h1 em { display: block; margin-top: 2px; color: #c9694b; font-style: normal; }

/* Stage: Mom's kitchen-table scene (1448×1086), one fixed shot of her smile and
   the frame. Edge to edge under the headline on phones; a card beside it on
   desktop. */
.ig-stage { grid-area: stage; position: relative; }
.ig-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* No-JS fallback: roughly the same shot as SHOT. */
  background: #d8cbb9 url("/founder-edition/assets/mom-frame-scene-1448.webp") 62% 50% / cover no-repeat;
}

/* The scan layer works in the scene photo's pixels: ig-landing.js matches the
   background's cover crop by setting --ig-k (scale) and --ig-ox/--ig-oy
   (offset), and the layer stays hidden until it has. */
.ig-world { position: absolute; top: 0; left: 0; width: 1448px; height: 1086px; transform-origin: 0 0; transform: translate(var(--ig-ox, 0), var(--ig-oy, 0)) scale(var(--ig-k, 1)); visibility: hidden; pointer-events: none; }
.ig-scene-img { position: absolute; top: 0; left: 0; display: block; width: 1448px; height: 1086px; }
.ig-scene.is-sized .ig-world { visibility: visible; }

/* Quiet "keep going" links: the hero into Mom's moment, her moment into the offer. */
.ig-cue {
  position: relative;
  z-index: 1;
  grid-area: cue;
  display: flex;
  width: max-content;
  min-height: 44px;
  margin: 4px auto 0;
  align-items: center;
  gap: 6px;
  color: var(--landing-muted);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ig-cue span { display: inline-block; animation: ig-cue-nudge 1.8s ease-in-out infinite; }
.ig-cue:hover { color: var(--landing-ink); }
.ig-cue:focus-visible { outline: 2px solid var(--landing-coral); outline-offset: 4px; border-radius: 6px; }
.ig-moment .ig-cue { margin-top: 18px; }
@keyframes ig-cue-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .ig-cue span { animation: none; } }
/* Every scan overlay (chalk, notes, Bondi) was drawn on the old frame photo,
   1384×1136. This homography projects that photo's screen corners onto the
   screen in the scene, measured from the scene photo:
   (1021.7, 532.5) (1327.8, 564.5) (1286.7, 806.7) (983.5, 745.5). */
.ig-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1384px;
  height: 1136px;
  transform-origin: 0 0;
  transform: matrix3d(0.23477475, -0.027285898, 0, -8.0414258e-05, -0.039592372, 0.36721853, 0, 1.5639468e-06, 0, 0, 1, 0, 951.26832, 421.82607, 0, 1);
}
/* The old frame's photo on the scene's screen: the chalk was drawn on it, and
   it is sharper than the scene's own screen. */
.ig-frame-img { display: block; width: 100%; height: 100%; clip-path: polygon(18.79% 25.62%, 82.59% 29.31%, 79.99% 82.57%, 15.61% 76.14%); }
.ig-screen {
  position: absolute;
  inset: 0;
  clip-path: polygon(18.79% 25.62%, 82.59% 29.31%, 79.99% 82.57%, 15.61% 76.14%);
  pointer-events: none;
}
.ig-screen-dim { position: absolute; inset: 0; background: rgba(30, 20, 14, .28); opacity: 0; }

/* The frame's light strip spills a little light onto the top of the photo. */
.ig-lamp-spill { position: absolute; inset: 0; background: linear-gradient(176deg, rgba(255, 222, 170, .42), rgba(255, 222, 170, 0) 20%); mix-blend-mode: screen; }

/* Bondi's perception field: a dot lattice that blooms out of Bondi itself. */
.ig-field {
  --r: 0%;
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 236, 222, .9) 0 .8px, transparent 1.3px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(circle at 75% 76%, #000 0, #000 calc(var(--r) - 14%), rgba(0,0,0,.35) calc(var(--r) - 4%), transparent var(--r));
  mask-image: radial-gradient(circle at 75% 76%, #000 0, #000 calc(var(--r) - 14%), rgba(0,0,0,.35) calc(var(--r) - 4%), transparent var(--r));
  opacity: 0;
}
.ig-field-ring {
  --r: 0%;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 76%, transparent calc(var(--r) - 5%), rgba(242, 163, 132, .55) calc(var(--r) - 1%), transparent var(--r));
  opacity: 0;
}





/* The story, captioned on the screen like film subtitles. Sized in container
   units so it scales with the frame; sits above Bondi, never under it. */
/* Hand-drawn chalk: loops around what Bondi noticed, never a box on a face. */
.ig-chalk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ig-chalk path { fill: none; stroke: #fffaf0; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

.ig-scribble {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  color: #fffaf0;
  /* In the old frame photo's pixels: about 12px on a phone. */
  font: 400 84px/1 var(--landing-handwritten);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(20, 12, 8, .75), 0 0 10px rgba(20, 12, 8, .35);
  opacity: 0;
  /* Centred and tilted by ig-landing.js (hidden until then). */
}
.ig-scribble.is-stacked { line-height: 1.05; text-align: center; }


/* Bondi, the agent: soft coral clay with a face, parked bottom-right of the screen. */
/* Bondi always stays inside the screen quad (see .ig-screen), hops included. */
.ig-agent {
  position: absolute;
  z-index: 5;
  left: 73.5%;
  top: 72.8%;
  width: 11.5%;
  aspect-ratio: 1.3;
  transform: translate(-50%, -50%);
}
.ig-agent-body {
  position: absolute;
  inset: 0;
  border-radius: 32% / 40%;
  background: #ec8a6b;
  /* Bondi is drawn through the screen's perspective transform, which leaves a
     hard, stair-stepped edge; a hairline of its own colour feathers it. */
  box-shadow: 0 0 1.5px 1px rgba(236, 138, 107, .55), 0 3px 8px rgba(40, 20, 10, .22);
  transform-origin: 50% 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Flat, not sculpted: the only texture is a fine grain, like risograph paper. */
.ig-agent-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.12  0 0 0 0 0.05  0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  border-radius: inherit;
  opacity: .5;
}
.ig-agent svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ig-face { opacity: 0; }
.ig-agent[data-face="open"] .ig-face-open,
.ig-agent[data-face="squint"] .ig-face-squint,
.ig-agent[data-face="happy"] .ig-face-happy,
.ig-agent[data-face="sleepy"] .ig-face-sleepy,
.ig-agent[data-face="wow"] .ig-face-wow,
.ig-agent[data-face="love"] .ig-face-love,
.ig-agent[data-face="wink"] .ig-face-wink { opacity: 1; }
.ig-face path { fill: none; stroke: #fffdf9; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ig-face rect,
.ig-face circle,
.ig-face .fill { fill: #fffdf9; stroke: none; }

/* Offer card fine print on phones: "Secure checkout with Stripe" stays on one
   line, "Reservation FAQs" drops below it instead of both squeezing into
   three ragged lines. */
@media (max-width: 959px) {
  .ig-page .ea-fine { flex-wrap: wrap; row-gap: 4px; }
  .ig-page .ea-fine > * { flex: none; white-space: nowrap; }
  .ig-page .ea-fine > span[aria-hidden] { display: none; }
  .ig-page .ea-fine > a[href="#faq"] { flex-basis: 100%; text-align: center; }
}

/* Instagram offer: keep founding perks secondary to the frame and membership. */
.ig-page .ea-offer-card { position: relative; }
.ig-page #offerTitle { color: var(--landing-coral); }
.ig-page .ea-offer-heading { padding-top: 20px; }
.ig-page .ea-offer-subtitle { position: absolute; top: 16px; right: 16px; }
.ig-page .ea-perk { align-items: flex-start; }
.ig-page .ea-perk > b { margin-top: 1px; }
.ig-page .ea-perk > span { min-width: 0; }
.ig-page .ea-perks { gap: 16px; }
.ig-page .ea-perk small {
  display: block;
  margin-top: 3px;
  color: var(--landing-tert);
  font-size: 13px;
  line-height: 21px;
}
.ig-page .ea-deposit,
.ig-page .ea-perk > span {
  font: 400 14px/1.5 var(--body, "DM Sans", sans-serif);
}
.ig-page .ea-deposit::before,
.ig-page .ea-perk > b {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #fffdf9;
  background: var(--landing-coral);
  font: 700 11px/1 var(--body, "DM Sans", sans-serif);
}
@media (min-width: 960px) {
  .ig-page .ea-deposit,
  .ig-page .ea-perk > span { font-size: 15px; }
}
.ig-page .ea-perk .ig-offer-device-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}
/* Right under $9.90: how today's amount relates to the $299 device payment. */
.ig-page .ig-price-relation { order: 2; margin: 2px 0 4px; color: var(--landing-muted); font-size: 13px; line-height: 1.45; text-align: center; text-wrap: pretty; }
@media (min-width: 960px) { .ig-page .ig-price-relation { margin: 4px 0 10px; text-align: left; } }
/* Phones: today's $9.90 and the Nov $299 as two rows, right before the button. */
.ig-page .ig-pay-rows { order: 5; display: block; width: 100%; margin: 20px 0 0; padding: 0; border-top: 1px solid rgba(43, 38, 34, .1); }
.ig-page .ig-pay-rows > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(43, 38, 34, .1); }
.ig-page .ig-pay-rows dt { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--landing-ink); font-size: 15px; line-height: 1.35; text-align: left; }
.ig-page .ig-pay-rows dt small { display: block; margin-bottom: 2px; color: var(--landing-tert); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ig-page .ig-pay-rows dd { flex: 0 1 auto; max-width: 48%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 6px; margin: 0; color: var(--landing-ink); text-align: right; white-space: nowrap; }
.ig-page .ig-pay-rows dd strong { font-size: 20px; font-weight: 700; }
.ig-page .ig-pay-rows > div:first-child dd strong { font-size: 26px; }
.ig-page .ig-pay-rows dd s { color: var(--landing-tert); font-size: 14px; }
.ig-page .ea-offer-card .ig-offer-cancel.ig-m { font-size: 12px; text-wrap: balance; }
.ig-page .ig-pay-rows .ig-offer-save { padding: 3px 8px; color: #b85f42; background: rgba(232, 137, 106, .16); border-radius: 999px; font: 700 11px/1.3 var(--body, "DM Sans", sans-serif); font-style: normal; }
/* Under the pay button: the reassurance, before the Stripe line. */
.ig-page .ig-offer-cancel { order: 6; margin: 10px 0 2px; color: var(--landing-ink); font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; }
.ig-page .ig-offer-device-price s { color: var(--landing-tert); }
.ig-page .ig-offer-device-price strong { font-size: 16px; font-weight: 700; }
.ig-page .ig-offer-meta {
  margin: 0;
  padding-left: 30px;
  color: var(--landing-tert);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 959px) {
  .ig-page .ea-perks { margin-top: 16px; }
  .ig-page .ea-deposit {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    text-align: left;
    line-height: 1.5;
  }
}

/* ── Mom moment ─────────────────────────────────────────────────── */
.ig-moment { padding: 44px 20px 20px; text-align: center; }
.ig-page .wire-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.ig-moment h2 { margin-bottom: 10px; }
.ig-moment-sub { max-width: 32ch; margin: 0 auto 20px; color: var(--landing-muted); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.ig-moment h2 span { display: block; color: var(--landing-tert); }
.ig-moment figure { position: relative; margin: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 50px rgba(58, 42, 30, .16); }
.ig-moment video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #e9e1d6; }

/* The homepage lifts the press strip into its Hero on phones; here it sits in flow. */
.ig-page .press-shell { position: static; top: auto; }

/* Desktop has the top bar's Reserve button, so the sticky bar is phones only.
   It belongs to ig-landing.js, not the shared script. */
@media (min-width: 960px) {
  .ig-page .sticky-reserve { display: none !important; }
}
.ig-page .sticky-reserve-cta b { font-variant-numeric: tabular-nums; }
.ig-page .sticky-price-line strong { white-space: nowrap; }
.ig-page .sticky-limit { color: var(--landing-ink); font-weight: 600; }
/* "Only 500 · Fully refundable" always stays on one line. On narrower
   phones (under 340px) the button drops "now" to make room. */
.ig-page .sticky-sub { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 339px) {
  .ig-page .sticky-cta-now { display: none; }
}

@media (min-width: 521px) {
  .ig-hero { box-shadow: 0 34px 90px rgba(58, 48, 40, .13); }
}

@media (min-width: 960px) {
  /* Desktop mirrors mobile: one centred column, the whole first screen
     centred in the viewport. */
  .ig-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100svh - var(--ig-ticker-h) - 72px);
    padding: 40px max(40px, calc((100vw - 1200px) / 2)) 112px;
    box-shadow: none;
  }
  .ig-copy { margin: 0; }
  .ig-hero h1,
  .ig-moment h2 { font-size: clamp(42px, 4vw, 58px); line-height: 1; }
  .ig-sub { margin: 16px auto 0; max-width: 46ch; font-size: 17px; }
  /* Desktop: headline left, the scene as a portrait card on the right. */
  .ig-hero {
    display: grid;
    grid-template-areas: "copy stage" "cue stage";
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: center;
  }
  .ig-copy { align-self: end; text-align: left; }
  .ig-hero h1 { margin: 0; }
  .ig-hero .ig-sub { margin: 16px 0 0; max-width: 34ch; }
  .ig-hero > .ig-stage { height: min(66svh, 600px); margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 60px rgba(76, 51, 34, .18); -webkit-mask-image: none; mask-image: none; }
  .ig-hero > .ig-cue { align-self: start; margin: 18px 0 0; }
  .ig-moment { padding: 88px max(40px, calc((100vw - 1200px) / 2)) 40px; text-align: center; }
  .ig-moment h2 { margin: 0 auto 14px; }
  .ig-moment-sub { max-width: 44ch; margin: 0 auto 36px; font-size: 17px; }
  /* The source video is 960×720: keep it near 1:1 on retina so it stays sharp. */
  .ig-moment figure { max-width: 520px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-ticker-track { animation: none; }
}


/* ── Draft: How it works, card 1 — the child's iPhone. The bezel image is
   511×968 with the screen at (59, 58), 393×852; everything inside is sized in
   cqw of the phone so it scales with the card. The phone rises from the
   bottom edge and is cropped there. ── */
/* No box of its own: the phone sits straight on the card, running out to the
   card's sides and bottom edge, which crop it (the card has overflow hidden). */
.ig-phone-visual { display: flex; width: calc(100% + 28px); aspect-ratio: 4 / 3.4; margin: 0 -14px -14px; overflow: visible; justify-content: center; background: none; border-radius: 0; }
@media (min-width: 960px) {
  .ig-phone-visual { width: calc(100% + 44px); margin: 0 -22px -22px; }
}
.ig-phone { position: absolute; top: -2%; left: 50%; width: 84%; aspect-ratio: 511 / 968; container-type: inline-size; transform: translateX(-50%); filter: drop-shadow(0 14px 18px rgba(58, 48, 40, .18)); }
.ig-phone-bezel { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.ig-phone-screen { position: absolute; z-index: 1; top: 5.99%; left: 11.55%; width: 76.9%; height: 88.02%; overflow: hidden; background: #fbf8f4; border-radius: 8.2cqw; }
.ig-phone-status { position: relative; z-index: 2; background: #fbf8f4; display: flex; height: 9.5cqw; align-items: center; justify-content: space-between; padding: 1.6cqw 6.5cqw 0 7cqw; color: #050505; font: 600 2.9cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.ig-phone-status img { width: 15.5cqw; height: auto; }
/* App header, as in the HeyBondi app: close, Bondi, name. */
.ig-app-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 2.2cqw; padding: .6cqw 4.5cqw 2.4cqw; background: #fbf8f4; border-bottom: 1px solid rgba(58, 48, 40, .1); }
.ig-app-x { color: var(--landing-ink); font: 300 5.4cqw/1 var(--body, "DM Sans", sans-serif); }
.ig-app-head b { color: var(--landing-ink); font: 700 4cqw/1 var(--body, "DM Sans", sans-serif); }
/* Bondi's app avatar: a coral tile with two dark eyes. */
.ig-app-avatar { display: inline-flex; flex: none; width: 7.4cqw; height: 6cqw; align-items: center; justify-content: center; gap: 1.2cqw; background: #ec8a6b; border-radius: 1.8cqw; }
.ig-app-avatar i { width: 1cqw; height: 1.8cqw; background: #3a2d25; border-radius: 1cqw; }
/* Chat: the photo just sent on the right, Bondi's reply on the left. */
.ig-app-chat { display: flex; flex-direction: column; gap: 3.4cqw; padding: 1.8cqw 3.4cqw 0; }
.ig-app-sent { width: 60cqw; margin-left: auto; }
.ig-app-reply { display: flex; align-items: flex-end; gap: 1.2cqw; }
.ig-app-reply .ig-app-avatar { width: 6cqw; height: 4.8cqw; gap: 1cqw; border-radius: 1.5cqw; }
.ig-app-reply .ig-app-avatar i { width: .8cqw; height: 1.5cqw; }
/* Bondi's turn: its thinking (what it read), then what it says. The chat
   scrolls up under the header to make room (ig-landing.js). */
.ig-app-bubbles { display: flex; min-width: 0; flex-direction: column; gap: 1.2cqw; }
.ig-app-bubble { max-width: 74cqw; padding: 1.4cqw 1.8cqw; background: #fffdf9; border-radius: 3cqw 3cqw 3cqw 1cqw; box-shadow: 0 .4cqw 1.2cqw rgba(58, 48, 40, .06); }
.ig-app-thinking { display: flex; align-items: center; min-height: 6.2cqw; background: #f3ebe2; box-shadow: none; }
.ig-app-msg p { margin: 0; color: var(--landing-ink); font: 400 max(8.5px, 2.7cqw)/1.38 var(--body, "DM Sans", sans-serif); }
/* Typing dots while Bondi reads the photo. Without JS they stay hidden and the
   context shows. */
.ig-app-typing { display: none; gap: 1cqw; padding: .8cqw .4cqw; }
.ig-app-typing i { width: 1.4cqw; height: 1.4cqw; background: rgba(58, 48, 40, .35); border-radius: 50%; animation: ig-typing 1s ease-in-out infinite; }
.ig-app-typing i:nth-child(2) { animation-delay: .15s; }
.ig-app-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ig-typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-.8cqw); opacity: 1; } }
.ig-anim-ready .ig-app-typing { display: inline-flex; }
/* What Bondi read from the photo, as chips. */
.ig-app-context { display: flex; flex-wrap: wrap; gap: 1cqw; margin: 0; padding: 0; list-style: none; }
/* With JS the thoughts flash one at a time in the same spot (stacked in one
   grid cell); without it they simply wrap. */
.ig-anim-ready .ig-app-context { display: grid; }
.ig-anim-ready .ig-app-context li { grid-area: 1 / 1; justify-self: start; }
.ig-app-context li { padding: .3cqw .4cqw; color: var(--landing-ink); background: none; border-radius: 999px; font: 500 max(7px, 2.3cqw)/1.25 var(--body, "DM Sans", sans-serif); white-space: nowrap; }
/* The app's input bar and the home indicator, pinned to the bottom of the
   screen; only seen once the whole phone is in view. */
.ig-app-input { position: absolute; right: 3.6cqw; bottom: 7cqw; left: 3.6cqw; display: flex; align-items: center; gap: 2cqw; }
.ig-app-plus,
.ig-app-mic { display: inline-flex; flex: none; width: 8.4cqw; height: 8.4cqw; align-items: center; justify-content: center; color: rgba(58, 48, 40, .55); border: 1px solid rgba(58, 48, 40, .16); border-radius: 50%; font: 300 5cqw/1 var(--body, "DM Sans", sans-serif); }
.ig-app-mic svg { width: 4.6cqw; height: 4.6cqw; fill: none; stroke: rgba(58, 48, 40, .6); stroke-width: 1.8; stroke-linecap: round; }
.ig-app-field { flex: 1; height: 8.4cqw; padding: 0 3cqw; color: rgba(58, 48, 40, .4); border: 1.5px solid var(--landing-ink); border-radius: 999px; font: 400 3cqw/8.1cqw var(--body, "DM Sans", sans-serif); }
.ig-app-home { position: absolute; bottom: 1.8cqw; left: 50%; width: 30cqw; height: 1.1cqw; background: #111; border-radius: 1cqw; transform: translateX(-50%); }

/* The camera: the far view is scale 1; ig-landing.js starts close on the photo. */
.ig-phone-cam { position: absolute; inset: 0; transform-origin: 50% 34%; will-change: transform; }
.ig-phone-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3.6cqw; background: #2a211b; }
/* The hero's scan layer, flattened onto the phone's photo: this homography
   takes the old frame photo's screen corners to a 1600×1000 rectangle, and
   --ig-k2 (set in ig-landing.js) scales that to the photo's width. */
.ig-card-scan .ig-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1384px;
  height: 1136px;
  transform-origin: 0 0;
  transform: scale(var(--ig-k2, .1)) matrix3d(1.9438688, -0.085231421, 0, 5.9943759e-05, 0.14906939, 1.7953611, 0, 2.4476991e-05, 0, 0, 1, 0, -548.89571, -500.36289, 0, 1);
}
.ig-card-scan .ig-frame-img { opacity: 1; }
/* Notes about 9px on a phone, in the old photo's pixels. */
.ig-card-scan .ig-scribble { font-size: 50px; }
.ig-phone-visual .scan-tag b { font-size: max(8px, 2.5cqw); }
/* Labels sit beside their circles, so none covers another subject or gets
   clipped by the photo's edge. */
.ig-phone-visual .scan-tag b { top: 50%; bottom: auto; transform: translateY(-50%); }
.ig-phone-visual .ig-tag-right b { left: calc(50% + max(12px, 3.6cqw)); }
.ig-phone-visual .ig-tag-left b { right: calc(50% + max(12px, 3.6cqw)); left: auto; }
.ig-phone-visual .scan-tag i { width: max(18px, 5.4cqw); height: max(18px, 5.4cqw); margin: min(-9px, -2.7cqw) 0 0 min(-9px, -2.7cqw); }

/* ── Draft: 03 Benefits — one still of Mom with her frame for both tabs
   (4:3 source in the 16:9 slot; keep her face and the frame in view). ── */
.ig-page .sides-section .home-visual img { object-position: 50% 35%; }
/* Benefits: titles only, no dividers between them. */
/* One even rhythm: every line, wrapped or new item, sits the same 30px
   apart (no padding between items; lines wrap naturally). */
.ig-page .sides-section .audience-col > div { align-items: flex-start; padding: 0; border-bottom: 0; }
/* Same type as the Founder Edition card's body lines (.ea-perk): DM Sans
   regular, 14px on phones, 15px on desktop. */
.ig-page .sides-section .audience-col b { font-size: 14px; font-weight: 400; line-height: 30px; }
.ig-page .sides-section .benefit-check { margin-top: 4.5px; }
@media (min-width: 960px) {
  .ig-page .sides-section .audience-col b { font-size: 15px; }
  /* Desktop: the photo sits centred under the headline, and the two
     audiences sit side by side below it (them | you), each a list of four. */
  .ig-page .sides-section {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: max(min(120px, 8vw), calc((100vw - 1200px) / 2));
  }
  /* Photo and the two columns share one width, so their edges line up. */
  .ig-page .sides-section { --sides-w: min(100%, 960px); }
  .ig-page .sides-section .home-media-column { grid-column: 1; grid-row: 3; justify-self: center; width: var(--sides-w); }
  .ig-page .sides-section .audience-cols { grid-column: 1; grid-row: 4; justify-self: center; width: var(--sides-w); margin-top: 36px; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 0 clamp(48px, 6vw, 96px); }
  /* Each list is only as wide as its words, and the pair is centred on the
     page's axis, like the headline, photo and trust line above. */
  .ig-page .sides-section .trust-line { display: flex; justify-content: center; gap: 32px; margin-top: 16px; font-size: 14px; }
  .ig-page .sides-section > h2 { margin-bottom: 20px; }
  /* A wider, shorter crop (21:9) so both lists come up under the photo on a
     laptop screen. The band kept runs from Mom's hair to the foot of the
     frame; Bondi's seat (the frame's top edge) moves to match. */
  .ig-page .sides-section .home-visual { aspect-ratio: 21 / 9; border-radius: 24px; }
  .ig-page .sides-section .home-visual img { object-position: 50% 25%; }
  .ig-page .sides-section .home-visual .ig-prod-bondi { --y: 52.2% !important; }
  /* Group titles: a plain serif line in the audience colour (no pill),
     matching the section headline. */
  .ig-page .sides-section .audience-col h3,
  .ig-page .sides-section .audience-col[data-audience-panel] h3 { margin: 0 0 8px; padding: 0; color: #c96f52; background: none; border-radius: 0; font: 400 28px/1.15 var(--display, "Newsreader", serif); letter-spacing: -.02em; text-transform: none; }
  .ig-page .sides-section .audience-col[data-audience-panel="family"] h3 { color: var(--landing-family-ink); }
  .ig-page .sides-section .audience-col h3::before { content: none; }
  /* Each group: a drawn icon (same ink line as the Meet Bondi frames) and
     its headline. No cards, no shadows. */
  .ig-page .sides-section .audience-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ig-page .sides-section .audience-col h3 { grid-column: 1 / -1; justify-self: center; }
  .ig-page .sides-section .audience-col > div { flex-direction: row; align-items: center; gap: 16px; padding: 0; }
  /* Same words as the phone list (H5): the headline only, no second line. */
  .ig-page .sides-section .audience-col span { justify-content: center; align-self: stretch; }
  .ig-page .sides-section .audience-col .benefit-check,
  .ig-page .sides-section .audience-col .benefit-long { display: none; }
  .ig-page .sides-section .audience-cols .audience-col .benefit-icon { width: 56px; height: 56px; }
  .ig-page .sides-section .audience-cols .audience-col > div { gap: 16px; }
  .ig-page .sides-section .audience-col .benefit-short { display: block; color: var(--landing-ink); font: 400 18px/1.35 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; text-wrap: balance; }
}
/* Phones keep the full sentences with checks; the icons are desktop only. */
/* Hand-drawn, like Mom's frame on the Meet Bondi cards: clean ink lines,
   cream paper fills, a dark screen where there is one, light hatching,
   and a soft patch of the audience colour set off behind. */
.ig-page .sides-section .audience-col { --ic-soft: var(--landing-family-soft); --ic-accent: var(--landing-family); }
.ig-page .sides-section .audience-col[data-audience-panel="parents"] { --ic-soft: var(--landing-coral-soft); --ic-accent: var(--landing-coral); }
.ig-page .sides-section .audience-col .benefit-icon { display: block; flex: none; width: 40px; height: 40px; }
.ig-page .sides-section .benefit-icon svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #1f1b18; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ig-page .sides-section .benefit-icon .b { fill: var(--ic-soft); stroke: none; }
.ig-page .sides-section .benefit-icon .c { fill: #f6f1e7; }
.ig-page .sides-section .benefit-icon .s { fill: #2b2622; }
.ig-page .sides-section .benefit-icon .w { stroke: #f6efe4; }
.ig-page .sides-section .benefit-icon .a { stroke: var(--ic-accent); stroke-width: 3; }
.ig-page .sides-section .benefit-icon .f { fill: var(--ic-accent); stroke-width: 1.8; }
.ig-page .sides-section .benefit-icon .h { stroke-width: 1.6; opacity: .4; }
/* Phones show the same drawn icons in place of the checks (the full sentence
   sits beside each); desktop shows the same words via .benefit-short. */
.ig-page .sides-section .audience-col .benefit-check,
.ig-page .sides-section .benefit-short { display: none; }
.ig-page .sides-section .audience-col > div { align-items: center; gap: 12px; }
.ig-page .sides-section .audience-col b.benefit-long { line-height: 1.35; padding-block: 6px; }
/* Benefit checks: a drawn check (not a font glyph) in the audience color on
   a soft tint of it. */
.ig-page .sides-section .benefit-check,
.ig-page .sides-section .audience-col[data-audience-panel] .benefit-check { width: 21px; height: 21px; background: var(--landing-family-soft); background-image: none; }
.ig-page .sides-section .audience-col[data-audience-panel="parents"] .benefit-check { background: var(--landing-coral-soft); }
.ig-page .sides-section .benefit-check::before { content: ""; width: 13px; height: 13px; background: var(--landing-family-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ig-page .sides-section .audience-col[data-audience-panel="parents"] .benefit-check::before { background: #c96f52; }
/* Audience switch (phones): one compact segmented pill sized to its labels,
   centered; the chosen side fills, the other is plain text. */
.ig-page .sides-section .audience-tabs { width: max-content; margin: 14px auto 0; padding: 4px; grid-template-columns: auto auto; gap: 2px; background: rgba(58, 48, 40, .06); border-radius: 999px; }
.ig-page .sides-section .audience-tab,
.ig-page .sides-section .audience-tab[data-audience-tab] { min-height: 38px; padding: 8px 20px; color: #6b625a; background: transparent; border: 0; box-shadow: none; font: 600 14px/1.2 var(--body, "DM Sans", sans-serif); }
.ig-page .sides-section .audience-tab::before { content: none; }
.ig-page .sides-section .audience-tab[data-audience-tab="family"].is-active { color: #fffdf9; background: var(--landing-family); }
.ig-page .sides-section .audience-tab[data-audience-tab="parents"].is-active { color: #fffdf9; background: var(--landing-coral); }
.ig-page .sides-section .audience-tab:not(.is-active):hover { color: #2b2622; }

/* ── Draft: 04 What happens next (reservation & gift timeline) ── */
.ig-next-section { background: var(--landing-section-warm); }
/* Text-only timeline: a thin rail with a dot per step — today filled, the
   rest hollow — so the dates carry the order. Vertical on phones, four
   columns across on desktop. */
.ig-timeline { position: relative; display: flex; flex-direction: column; gap: 26px; width: 100%; max-width: 640px; margin: 8px auto 0; padding: 0; list-style: none; }
.ig-timeline::before { content: ""; position: absolute; top: 10px; bottom: 34px; left: 6px; border-left: 1.5px solid rgba(232, 137, 106, .35); }
.ig-step { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 18px; }
.ig-step-num { position: relative; width: 14px; height: 14px; margin-top: 4px; overflow: hidden; color: transparent; font-size: 0; background: var(--landing-section-warm); border: 2px solid var(--landing-coral); border-radius: 50%; }
.ig-step:first-child .ig-step-num { background: var(--landing-coral); box-shadow: 0 0 0 4px rgba(232, 137, 106, .18); }
/* Each step: when it happens is the headline; what happens sits under it,
   always visible, and taps open the detail (shared .glance-details script). */
.ig-step-main { min-width: 0; }
.ig-step-date { margin: 0 0 3px; color: var(--landing-ink); font: 700 17px/1.3 var(--body, "DM Sans", sans-serif); letter-spacing: -.005em; }
.ig-step-body > summary { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; color: var(--landing-muted); font-size: 15px; font-weight: 400; line-height: 1.4; cursor: pointer; list-style: none; }
.ig-step-body > summary::-webkit-details-marker { display: none; }
.ig-step-body > summary::after { flex: none; color: var(--landing-coral); }
.ig-step-body > p { padding: 4px 0 2px; }
.ig-step-body p { margin: 0; color: var(--landing-muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; }

/* A plain text disclosure, the same as "View product details": the shared
   .glance-details summary style, the notes laid out like the spec table. */
.ig-notes { width: 100%; max-width: 640px; margin: 0 auto; padding-left: 32px; }
.ig-notes dl { display: flex; flex-direction: column; margin: 12px 0 0; }
.ig-notes dl > div { display: grid; grid-template-columns: 34% 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--landing-line); }
.ig-notes dt { margin: 0; color: var(--landing-tert); font-size: 12px; font-weight: 600; line-height: 1.45; }
.ig-notes dd { margin: 0; color: var(--landing-ink); font-size: 12px; line-height: 1.45; }

/* ── Draft: 05 Offer subheadline ── */
.ig-page .ig-offer-sub { margin: 0; color: var(--landing-muted); font-size: 15px; line-height: 1.4; }

/* ── Draft: Product — the key specs fold into "View product details" with the
   full spec table, so the section is headline + photos. ── */
/* The three specs that stay out: one line, dot-separated. */
.ig-product-keyline { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 4px 0 0; color: var(--landing-ink); font-size: 15px; line-height: 1.4; }
.ig-product-keyline span + span::before { content: "·"; margin: 0 10px; color: var(--landing-coral); font-weight: 700; }
/* Centred like the headline, photos and keyline above. */
#product > .glance-details > summary { display: flex; justify-content: center; }
#product > .fine-print { text-align: center; }
.ig-product-specs { padding-top: 4px; }
.ig-product-specs .glance-specs { margin-top: 6px; }


/* Phones: the head wrapper steps aside, so the heading, the timeline and
   then the notes stack as before. */
.ig-next-head { display: contents; }
.ig-next-section .ig-timeline { order: 1; }
.ig-next-section .ig-notes { order: 2; }
/* Desktop only: the "You're here" marker and the drawn gift. */
.ig-here,
.ig-step-gift { display: none; }

/* Desktop: an editorial split. Left, the heading and the notes hold still
   while the four steps scroll past on the right: each a row with its date
   set large in serif, the step's headline and its line, all open. Today
   carries the "You're here" marker; the path ends on a drawn gift. */
@media (min-width: 960px) {
  .ig-next-section { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(56px, 7vw, 120px); align-items: start; }
  .ig-next-head { position: sticky; top: calc(var(--ig-ticker-h, 0px) + var(--ig-nav-h, 60px) + 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .ig-next-head > h2 { margin: 0; text-align: left; }
  .ig-next-section .ig-timeline { grid-column: 2; flex-direction: column; gap: 0; max-width: none; margin: 0; }
  .ig-timeline::before,
  .ig-step-num { display: none; }
  .ig-step { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; column-gap: 32px; align-items: start; padding: 34px 0; border-top: 1px solid rgba(58, 48, 40, .12); }
  .ig-step:last-child { border-bottom: 1px solid rgba(58, 48, 40, .12); }
  .ig-step-main { display: contents; }
  .ig-step-date { grid-column: 1; margin: 0; color: var(--landing-ink); font: 400 32px/1.08 var(--display, "Newsreader", serif); letter-spacing: -.02em; text-transform: none; }
  .ig-step:first-child .ig-step-date { color: #c96f52; }
  .ig-here { display: table; margin: 12px 0 0; padding: 5px 10px; color: #b85f42; background: rgba(232, 137, 106, .14); border-radius: 999px; font: 700 12px/1.2 var(--body, "DM Sans", sans-serif); }
  /* The step's headline in the page's DM Sans (the shared styles ask for
     Inter, which this page never loads); the detail stays folded under it. */
  .ig-next-section .ig-timeline,
  .ig-next-section .ig-notes { font-family: var(--body, "DM Sans", sans-serif); }
  .ig-step-body { grid-column: 2; }
  .ig-step-body > summary { padding-top: 6px; color: var(--landing-ink); font: 600 20px/1.35 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; }
  .ig-step-body > p { padding-top: 10px; }
  .ig-step-body p { color: #6b625a; font: 400 16px/1.55 var(--body, "DM Sans", sans-serif); }
  .ig-step-gift { grid-column: 3; display: block; width: 64px; height: 64px; margin-top: -4px; }
  .ig-step-gift svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #1f1b18; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .ig-step-gift .b { fill: var(--landing-coral-soft); stroke: none; }
  .ig-step-gift .c { fill: #f6f1e7; }
  .ig-step-gift .f { fill: var(--landing-coral); stroke-width: 2; }
  .ig-step-gift .h { stroke-width: 1.6; opacity: .4; }
  /* The notes sit under the heading, on the same left edge. */
  .ig-next-section .ig-notes { max-width: none; margin: 0; padding-left: 0; }
  .ig-notes dl { max-width: 420px; }
  .ig-notes dt, .ig-notes dd { font-size: 14px; }
}
/* ── Founder offer card ──────────────────────────────────────────
   Phones keep the original card; the pieces marked .ig-m show there only,
   the reworked desktop pieces (.ig-d) on desktop only. */
@media (max-width: 959px) {
  .ig-page .ea-offer-card .ig-d { display: none !important; }
}
@media (min-width: 960px) {
  .ig-page .ea-offer-card .ig-m { display: none !important; }
  .ig-page .ea-offer-heading { padding-top: 0; }
  .ig-page .ig-offer-price { display: flex; flex-wrap: wrap; align-items: baseline; }
  .ig-page .ig-offer-price span { font: 500 15px/1.2 var(--body, "DM Sans", sans-serif); }
  .ig-page .ig-offer-price s { font: 500 15px/1 var(--body, "DM Sans", sans-serif); }
  .ig-page .ig-offer-price strong { font: 700 22px/1 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .ig-page .ig-offer-save { align-self: center; padding: 5px 10px; border-radius: 999px; font: 700 12px/1 var(--body, "DM Sans", sans-serif); font-style: normal; }
  .ig-page .ig-due-label { color: #b85f42; font: 700 11px/1.2 var(--body, "DM Sans", sans-serif); letter-spacing: .1em; text-transform: uppercase; }
  .ig-page .ea-offer-card .ig-offer-cancel { text-wrap: balance; }
}

/* Desktop: a coral field with the deal on the left and a cream "receipt"
   on the right. The cream panel gives the fine print real contrast and the
   button its own colour (coral on cream). */
@media (min-width: 960px) {
  .ig-page .ea-offer-card { align-items: center; }
  .ig-page .ea-offer-col-a { gap: 0; padding: 0; }
  .ig-page .ea-offer-heading { align-items: flex-start; }
  .ig-page .ea-offer-card h2#offerTitle { color: #fff; font-size: 56px; line-height: 1.04; }
  .ig-page .ea-offer-card .ig-offer-sub { margin-top: 12px; color: #fffdf9; font-size: 18px; opacity: 1; }
  .ig-page .ig-offer-price { justify-content: flex-start; gap: 8px 12px; margin-top: 30px; color: #fffdf9; }
  .ig-page .ig-offer-price span { font-size: 18px; }
  .ig-page .ig-offer-price s { color: rgba(255, 253, 249, .8); font-size: 18px; }
  .ig-page .ig-offer-price strong { font-size: 26px; }
  .ig-page .ig-offer-save { padding: 7px 12px; color: #b85f42; background: #fffdf9; font-size: 13px; }
  .ig-page .ea-offer-card .ea-perks { gap: 14px; margin-top: 32px; }
  .ig-page .ea-offer-card .ea-perk > b { color: var(--landing-coral); background: #fffdf9; }
  .ig-page .ea-offer-card .ea-perk > span { color: #fffdf9; font-size: 17px; }
  .ig-page .ea-offer-card .ea-perk small { margin-top: 4px; color: #fffdf9; font-size: 15px; opacity: .9; }

  .ig-page .ea-offer-card .ea-offer-col-b { gap: 0; padding: 36px; color: var(--landing-ink); background: #fffdf9; border: 0; border-radius: 22px; }
  .ig-page .ea-offer-card .ig-due-label { margin: 0 0 6px; text-align: left; }
  .ig-page .ea-offer-card .ea-price-row { justify-content: flex-start; }
  .ig-page .ea-offer-card .ea-price-now,
  .ig-page .ea-offer-card .ea-price-cur { color: var(--landing-ink); }
  .ig-page .ea-offer-card .ea-price-now { font-size: 72px; }
  .ig-page .ea-offer-card .ea-price-cur { font-size: 30px; }
  .ig-page .ea-offer-card .ea-offer-cta,
  .ig-page .ea-offer-card .ea-offer-cta:hover { order: 4; margin-top: 24px; color: #fff; background: var(--landing-coral); }
  .ig-page .ea-offer-card .ea-offer-cta:hover { background: #d97a5a; }
  .ig-page .ea-offer-card .ig-offer-cancel { order: 5; margin: 14px 0 0; color: var(--landing-ink); font-size: 14px; white-space: nowrap; }
  /* The reassurance stays on one line: a little less side padding, and a
     size down on narrower desktops. */
  .ig-page .ea-offer-card .ea-offer-col-b { padding-inline: 30px; }
  .ig-page .ea-offer-card .ea-fine { order: 6; margin-top: 10px; color: #8a7f74; font-size: 13px; }
  .ig-page .ea-offer-card .ea-fine a { color: #8a7f74; }
}

/* ── Card 3: Bondi's family map ──────────────────────────────────
   Bondi in the middle, the family around it, linked by dotted lines, each
   with what Bondi has come to know (two words max). Sized in container
   units so it scales with the card. */
.ig-memory-map {
  container-type: inline-size;
  background:
    radial-gradient(circle at 50% 52%, rgba(236, 138, 107, .16) 0, rgba(236, 138, 107, 0) 46%),
    var(--landing-cream);
}
.ig-memory-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(232, 137, 106, .34) 0 1px, transparent 1.6px);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 0, rgba(0, 0, 0, .45) 32%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 52%, #000 0, rgba(0, 0, 0, .45) 32%, transparent 62%);
}
.ig-map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ig-map-lines path { fill: none; stroke: rgba(232, 137, 106, .7); stroke-width: .5; stroke-dasharray: 1.4 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ig-memory-map .ig-map-lines path { stroke-width: 1.6; stroke-dasharray: 3 5; }

/* Bondi: the homepage agent, a little larger here. */
.ig-map-bondi {
  position: absolute;
  left: 50%;
  top: 52%;
  display: flex;
  width: 22cqw;
  aspect-ratio: 1.3;
  align-items: center;
  justify-content: center;
  padding-bottom: 1cqw;
  background: #ec8a6b;
  border-radius: 32% / 40%;
  box-shadow: 0 2cqw 5cqw rgba(196, 98, 66, .28), 0 0 0 2.4cqw rgba(236, 138, 107, .14);
  transform: translate(-50%, -50%);
}
.ig-map-bondi i { width: 2.1cqw; height: 4.6cqw; background: #fffdf9; border-radius: 2cqw; animation: ig-map-blink 4s infinite; }

.ig-map-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  margin: 0;
  transform: translate(-50%, -50%);
}
.ig-map-face {
  display: block;
  width: 17cqw;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  border: .9cqw solid #fffdf9;
  border-radius: 50%;
  box-shadow: 0 1.2cqw 3cqw rgba(58, 42, 30, .18);
}
.ig-map-node[data-who="ben"] .ig-map-face { background-image: url("/preview/landing/assets/generated/family-memory-lily-leo-ben-waterfront-1672.webp"); background-size: 796%; background-position: 33.2% 11.6%; }
.ig-map-node[data-who="mia"] .ig-map-face { background-image: url("/preview/landing/assets/generated/family-memory-lily-leo-ben-waterfront-1672.webp"); background-size: 1286%; background-position: 47.5% 56.7%; }
.ig-map-node[data-who="noah"] .ig-map-face { background-image: url("/preview/landing/assets/generated/family-memory-lily-leo-ben-waterfront-1672.webp"); background-size: 1286%; background-position: 54.9% 57.3%; }
.ig-map-node[data-who="grandma"] .ig-map-face { background-image: url("/founder-edition/assets/mom-frame-scene-1448.webp"); background-size: 439%; background-position: 30% 17.9%; }
.ig-map-node figcaption {
  width: 34cqw;
  color: var(--landing-ink);
  font: 600 max(10px, 3.6cqw)/1.15 var(--body, "DM Sans", sans-serif);
  text-align: center;
  text-wrap: balance;
}

/* Motion (ig-landing.js arms it, then plays it once the card is in view):
   the family pops in one by one, each line and note following its person. */
.ig-memory-map.is-armed .ig-map-node { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.ig-memory-map.is-armed .ig-map-node figcaption { opacity: 0; transform: translateY(4px); }
.ig-memory-map.is-armed .ig-map-lines path { opacity: 0; }
.ig-memory-map.is-armed .ig-map-bondi { transform: translate(-50%, -50%) scale(.8); }
.ig-memory-map.is-in .ig-map-bondi { transform: translate(-50%, -50%) scale(1); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ig-memory-map.is-in .ig-map-node { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .3s ease calc(.3s + var(--d)), transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(.3s + var(--d)); }
.ig-memory-map.is-in .ig-map-node figcaption { opacity: 1; transform: none; transition: opacity .3s ease calc(.6s + var(--d)), transform .3s ease calc(.6s + var(--d)); }
.ig-memory-map.is-in .ig-map-lines path { opacity: 1; transition: opacity .4s ease .2s; }
.ig-memory-map.is-in .ig-map-lines path:nth-child(2) { transition-delay: .55s; }
.ig-memory-map.is-in .ig-map-lines path:nth-child(3) { transition-delay: .9s; }
.ig-memory-map.is-in .ig-map-lines path:nth-child(4) { transition-delay: 1.25s; }
@keyframes ig-map-blink { 0%, 46%, 54%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) {
  .ig-map-bondi i { animation: none; }
}

/* Each note rotates through what Bondi knows about that person (name first).
   All facts share one grid cell, so the pill keeps its widest size and the
   swap is a quiet cross-fade, not a jump. */
.ig-map-node figcaption { display: grid; justify-items: center; }
.ig-map-node figcaption > span { grid-area: 1 / 1; opacity: 0; transform: translateY(35%); transition: opacity .35s ease, transform .35s ease; }
.ig-map-node figcaption > span.is-on { opacity: 1; transform: none; }
.ig-map-node figcaption > span.is-out { opacity: 0; transform: translateY(-35%); }

/* Bondi is the one reading the family: its eyes (and a little lean of its
   body) turn to each person in turn, and that person's note changes as it
   looks. ig-landing.js sets --lx / --ly / --tilt. */
.ig-map-bondi { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.ig-memory-map.is-in .ig-map-bondi { transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.ig-map-eyes { display: flex; gap: 4.6cqw; transform: translate(var(--lx, 0), var(--ly, 0)); transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }
.ig-map-node figcaption > span { transform: translateY(60%); filter: blur(2px); transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), filter .25s ease; }
.ig-map-node figcaption > span.is-on { transform: none; filter: none; }
.ig-map-node figcaption > span.is-out { transform: translateY(-60%); filter: blur(2px); }
.ig-map-node.is-looked .ig-map-face { transform: scale(1.06); }
.ig-map-face { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }

/* ── Draft Agent: 01 Knows Mom + 02 Agency. Warm tech: oat and stone, oak,
   frosted glass, hairlines, small mono labels; coral only for Bondi. Each
   stage is UI, not a photo: your side is an iPhone, Mom's side her Bondi
   frame, plus an email card or a memory strip. Sized in cqw of the stage;
   ig-landing.js (AGENT_SCENES) drives the is-* classes on .ig-ag. ── */
.ig-page { --ag-oat: #efe8de; --ag-ink: #2b2622; --ag-glass: rgba(251, 248, 243, .82); --ag-hair: rgba(43, 38, 34, .1); --ag-sage: #6fa47e; --ag-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.ig-agency-section { padding: 56px 20px 64px; background: var(--ag-oat); }
.ig-knows-section { background: #f6f1ea; }
.ig-agency-section .update-copy { gap: 10px; }
.ig-agency-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; max-width: 560px; margin: 20px auto 0; }
.ig-agency-card { flex: none; width: 100%; padding: 12px 12px 14px; background: rgba(255, 253, 249, .72); border: 1px solid var(--ag-hair); border-radius: 22px; box-shadow: none; }
.ig-agency-card .card-title { padding: 4px 4px 0; color: var(--ag-ink); }
.ig-agency-card .card-description { min-height: 0; padding: 0 4px 6px; }
.ig-agency-value { display: flex; align-items: center; gap: 8px; margin: 6px 4px 0; color: var(--ag-ink); font: 600 11px/1.3 var(--ag-mono); letter-spacing: .08em; text-transform: uppercase; }
.ig-agency-value::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--landing-coral); border-radius: 50%; box-shadow: 0 0 0 3px rgba(232, 137, 106, .18); }
.ig-agency-card.is-aux { background: rgba(255, 253, 249, .5); }
.ig-aux-copy { display: flex; flex-direction: column; gap: 7px; }
.ig-agency-card.is-aux .ig-agency-value { margin-bottom: 6px; }
@media (min-width: 960px) {
  .ig-agency-section { padding: 104px 40px; }
  .ig-agency-cards { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); max-width: calc(var(--cols, 2) * 380px); gap: 20px; margin-top: 32px; }
  .ig-agency-card { padding: 16px 16px 18px; }
  .ig-agency-card.is-aux { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 32px; padding: 16px 16px 16px 28px; }
  .ig-agency-card.is-aux .card-title { font-size: 22px; }
  .ig-agency-value { font-size: 12px; }
}

/* The stage: oat light from above and a faint dot grid. */
.ig-ag { aspect-ratio: 20 / 19; container-type: inline-size; background: radial-gradient(120% 90% at 50% 0%, #faf6ef 0%, #ede5d9 62%, #e2d7c8 100%); border-radius: 16px; }
.ig-ag::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(43, 38, 34, .11) 1px, transparent 1.3px) 0 0 / 4cqw 4cqw; -webkit-mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent); mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent); }
.ig-ag-glass { background: var(--ag-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px var(--ag-hair), 0 2.4cqw 6cqw rgba(43, 30, 20, .16); }
.ig-ag-mono { font: 600 2.4cqw/1 var(--ag-mono); letter-spacing: .1em; text-transform: uppercase; }

/* Mom's Bondi frame: the real walnut frame (bondi-frame-front.webp, 916×674,
   screen cut out at 114,113 → 809,557; light bar at y 60–87) over the screen.
   Its light bar glows when Bondi is with Mom, brightest when it speaks first. */
.ig-ag-device { position: absolute; z-index: 2; left: 50%; top: 5cqw; width: 82cqw; aspect-ratio: 916 / 674; transform: translateX(-50%); transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .7s ease, opacity .7s ease; }
.ig-ag.is-armed:not(.is-device) .ig-ag-device { opacity: .4; filter: blur(1.5px) saturate(.7); transform: translateX(-50%) translateY(3cqw) scale(.9); }
.ig-ag-bezel { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; filter: drop-shadow(0 2.4cqw 3cqw rgba(60, 38, 20, .22)) drop-shadow(0 .5cqw .8cqw rgba(60, 38, 20, .14)); pointer-events: none; user-select: none; }
.ig-ag-logo { display: none; }
.ig-ag-bar { position: absolute; z-index: 3; left: 6.6%; top: 8.7%; width: 86.8%; height: 4.4%; clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); background: linear-gradient(90deg, #ffbf7a, #ff9a45 30%, #ffa95a 70%, #ffbf7a); opacity: 0; transition: opacity .6s ease; }
.ig-ag-bloom { position: absolute; z-index: 1; left: 4%; right: 4%; top: -6%; height: 28%; background: radial-gradient(60% 70% at 50% 60%, rgba(255, 160, 80, .45), transparent 70%); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ig-ag.is-sense .ig-ag-bar { opacity: .55; }
.ig-ag.is-first .ig-ag-bar { opacity: 1; animation: ig-ag-bar 1s ease-in-out 2; }
.ig-ag.is-first .ig-ag-bloom { opacity: 1; }
@keyframes ig-ag-bar { 50% { opacity: .55; } }
/* "Bondi speaks first": a tag above the frame while its light comes on. */
.ig-ag-firsttag { position: absolute; z-index: 7; top: 1.4cqw; left: 50%; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.5cqw 2.8cqw 1.5cqw 2.2cqw; color: var(--ag-ink); border-radius: 999px; white-space: nowrap; opacity: 0; transform: translate(-50%, -1.4cqw); transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.ig-ag-firsttag i { width: 1.6cqw; height: 1.6cqw; background: #ff9a45; border-radius: 50%; box-shadow: 0 0 0 .8cqw rgba(255, 154, 69, .25); }
.ig-ag.is-firsttag .ig-ag-firsttag { opacity: 1; transform: translate(-50%, 0); }
.ig-ag-screen { position: absolute; z-index: 1; left: 12.1%; top: 16.4%; width: 76.4%; height: 66.6%; display: flex; flex-direction: column; overflow: hidden; padding: 2.4cqw 2.8cqw; background: #faf6f0; }
.ig-ag-screen.is-photo { padding: 0; }
.ig-ag-screen.is-photo .ig-ag-photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.ig-ag-screen.is-photo .ig-ag-head { position: absolute; z-index: 2; top: 1.8cqw; left: 1.8cqw; padding: 1cqw 2cqw 1cqw 1.2cqw; background: rgba(251, 248, 243, .86); border-radius: 999px; }
.ig-ag-screen.is-photo .ig-ag-body { margin: 0; }
.ig-ag-head { display: flex; align-items: center; gap: 1.6cqw; }
.ig-ag-screen .ig-app-avatar { width: 5.4cqw; height: 4.4cqw; gap: .9cqw; border-radius: 1.3cqw; }
.ig-ag-screen .ig-app-avatar i { width: .75cqw; height: 1.35cqw; animation: ig-ag-blink 4s infinite; }
@keyframes ig-ag-blink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.15); } }
.ig-ag-head b { flex: 1; min-width: 0; overflow: hidden; color: rgba(43, 38, 34, .7); font: 600 2.4cqw/1 var(--ag-mono); letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ig-ag-prog { display: inline-flex; flex: none; gap: .8cqw; }
.ig-ag-prog i { width: 3.6cqw; height: .7cqw; background: rgba(43, 38, 34, .14); border-radius: 1cqw; transition: background .4s ease; }
.ig-ag-prog i.is-on { background: var(--landing-coral); }
.ig-ag-body { margin: auto 0; }
.ig-ag-body.is-swap { animation: ig-ag-swap .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes ig-ag-swap { from { opacity: 0; transform: translateY(1.6cqw); filter: blur(2px); } }
.ig-ag-row { display: flex; align-items: center; gap: 2.6cqw; }
.ig-ag-icon { display: inline-flex; flex: none; width: 11.5cqw; height: 11.5cqw; align-items: center; justify-content: center; color: var(--landing-coral); background: rgba(232, 137, 106, .12); border-radius: 2.8cqw; font-size: 6.6cqw; font-variation-settings: "wght" 300; }
.ig-ag-icon.is-ok { color: var(--ag-sage); background: rgba(111, 164, 126, .16); font-variation-settings: "wght" 300, "FILL" 1; }
.ig-ag-text { margin: 0; color: var(--ag-ink); font: 500 3.6cqw/1.3 var(--body, "DM Sans", sans-serif); text-wrap: pretty; }
.ig-ag-text b { font-weight: 700; }
.ig-ag-appt { display: flex; min-width: 0; flex-direction: column; gap: 1cqw; margin: 0; color: var(--ag-ink); font: 400 3.2cqw/1.2 var(--body, "DM Sans", sans-serif); }
.ig-ag-appt b { font-size: 3.5cqw; font-weight: 700; }
.ig-ag-appt s { color: rgba(43, 38, 34, .5); text-decoration-color: #d9584d; text-decoration-thickness: 1.5px; }
.ig-ag-appt em { font-style: normal; font-weight: 600; }
.ig-ag-appt em::before { content: "→ "; color: var(--landing-coral); }
.ig-ag-steps { display: flex; flex-direction: column; gap: 1.8cqw; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.ig-ag-steps li { display: flex; align-items: center; gap: 2cqw; color: var(--ag-ink); font: 500 3.3cqw/1.3 var(--body, "DM Sans", sans-serif); counter-increment: s; }
.ig-ag-steps li::before { content: counter(s); display: inline-flex; flex: none; width: 5cqw; height: 5cqw; align-items: center; justify-content: center; color: var(--landing-coral); border: 1px solid rgba(232, 137, 106, .5); border-radius: 50%; font: 600 2.6cqw/1 var(--ag-mono); }
.ig-ag-btns { display: flex; gap: 1.8cqw; }
.ig-ag-btns:empty { display: none; }
.ig-ag-btn { position: relative; flex: 1; padding: 2.1cqw 1cqw; overflow: hidden; text-align: center; border-radius: 999px; font: 600 3cqw/1 var(--body, "DM Sans", sans-serif); white-space: nowrap; transition: transform .2s ease; }
.ig-ag-btn:first-child { color: #fbf8f3; background: var(--ag-ink); }
.ig-ag-btn + .ig-ag-btn { color: var(--ag-ink); box-shadow: inset 0 0 0 1px rgba(43, 38, 34, .2); }
.ig-ag-btn.is-tap { transform: scale(.95); }
.ig-ag-btn.is-tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; background: rgba(232, 137, 106, .5); border-radius: 50%; animation: ig-ag-tap .6s ease-out forwards; }
@keyframes ig-ag-tap { to { transform: scale(7); opacity: 0; } }

/* Photos: real crops, or a placeholder naming the shot still to be made. */
.ig-ag-photo { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #cfc4b6 center / cover no-repeat; border-radius: 2cqw; }
.ig-ag-thumb { flex: none; width: 11.5cqw; height: 11.5cqw; background: #cfc4b6 center / cover no-repeat; border-radius: 2.8cqw; }
[data-ph] { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #ece4d8 0 6px, #e4dace 6px 12px) !important; box-shadow: inset 0 0 0 1px rgba(43, 38, 34, .14); }
[data-ph]::after { content: "IMG · " attr(data-ph); max-width: 86%; padding: 3px 7px; color: rgba(43, 38, 34, .72); background: rgba(250, 246, 240, .9); border-radius: 4px; font: 600 8px/1.3 var(--ag-mono); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
[data-pic="dinner"] { background-image: url("/preview/landing/assets/generated/family-memory-sarah-daniel-pine-cedar-2026-900.webp"); background-position: 50% 45%; }
[data-pic="bike"] { background-image: url("/preview/landing/assets/generated/family-memory-lily-leo-ben-waterfront-1672.webp"); background-position: 40% 50%; }
[data-pic="kids"] { background-image: url("/preview/landing/assets/generated/family-memory-lily-leo-ben-waterfront-1672.webp"); background-size: 600% auto; background-position: 50.3% 63.5%; }
[data-pic="mom"] { background-image: url("/founder-edition/assets/mom-frame-scene-1448.webp"); background-size: 640% auto; background-position: 29.2% 19.4%; }
[data-pic="gkids"] { background-image: url("/preview/landing/assets/generated/role-grandkids-american-casual-beige-frame-gaze-v3-256.webp"); }
[data-pic="dad"] { background-image: url("/preview/landing/assets/generated/role-dad-american-casual-beige-frame-gaze-v3-256.webp"); }
[data-pic="sis"] { background-image: url("/preview/landing/assets/generated/role-sister-american-casual-beige-frame-gaze-v3-256.webp"); }
.ig-ag-photo-cap { position: absolute; z-index: 2; left: 1.8cqw; bottom: 1.8cqw; display: inline-flex; align-items: center; gap: 1cqw; padding: 1.2cqw 2cqw; color: var(--ag-ink); background: rgba(251, 248, 243, .9); border-radius: 999px; font: 600 2.7cqw/1 var(--body, "DM Sans", sans-serif); animation: ig-ag-swap .55s cubic-bezier(.2, .8, .2, 1); }
.ig-ag-photo-cap .material-symbols-outlined { color: var(--landing-coral); font-size: 3.4cqw; }

/* Your iPhone: rises from the bottom edge (cropped there), sized in its own cqw. */
.ig-ag-iphone { position: absolute; z-index: 5; top: 5cqw; left: 50%; width: 50cqw; aspect-ratio: 511 / 968; container-type: inline-size; filter: drop-shadow(0 3cqw 4cqw rgba(43, 30, 20, .25)); transform: translate(-50%, 92cqw); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.ig-ag.is-phone .ig-ag-iphone { transform: translate(-50%, 0); }
.ig-ag-iphone > img { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.ig-ag-iscreen { position: absolute; z-index: 1; top: 5.99%; left: 11.55%; width: 76.9%; height: 88.02%; overflow: hidden; background: #fbf8f4; border-radius: 9cqw; }
.ig-ag-status { display: flex; height: 11cqw; align-items: center; justify-content: space-between; padding: 2cqw 7cqw 0 8cqw; color: #111; font: 600 3.4cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.ig-ag-status img { width: 17cqw; height: auto; }
.ig-ag-iscreen .ig-app-head { padding: 1cqw 5cqw 3cqw; gap: 2.4cqw; }
.ig-ag-iscreen .ig-app-head b { font-size: 4.4cqw; }
.ig-ag-ichat { display: flex; flex-direction: column; align-items: flex-end; gap: 2.4cqw; padding: 4cqw 4cqw 0; }
.ig-ag-ichat .ig-ag-photo { width: 66cqw; border-radius: 4cqw 4cqw 1.2cqw 4cqw; animation: ig-ag-pop .6s cubic-bezier(.2, .8, .2, 1) .3s both; }
.ig-ag-ichat .ig-ag-bubble { padding: 2.4cqw 3.6cqw; color: #fff; background: var(--landing-coral); border-radius: 4cqw 4cqw 1.2cqw 4cqw; font: 500 4cqw/1.3 var(--body, "DM Sans", sans-serif); animation: ig-ag-pop .5s cubic-bezier(.2, .8, .2, 1) .8s both; }
.ig-ag-delivered { display: inline-flex; align-items: center; gap: 1cqw; color: rgba(43, 38, 34, .55); font: 600 3cqw/1 var(--ag-mono); letter-spacing: .06em; text-transform: uppercase; animation: ig-ag-pop .5s ease 1.5s both; }
.ig-ag-delivered .material-symbols-outlined { color: var(--landing-coral); font-size: 4.2cqw; }
@keyframes ig-ag-pop { from { opacity: 0; transform: translateY(3cqw) scale(.94); } }
/* Incoming call. */
.ig-ag-iscreen.is-call { color: #fff; background: radial-gradient(120% 70% at 50% 20%, #8a6a52, #3a2b20 70%, #241a13); }
.ig-ag-iscreen.is-call .ig-ag-status { color: #fff; }
.ig-ag-iscreen.is-call .ig-ag-status img { filter: invert(1); }
.ig-ag-callwrap { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; padding-top: 10cqw; text-align: center; }
.ig-ag-callwrap small { color: rgba(255, 255, 255, .7); font: 500 3.6cqw/1 var(--body, "DM Sans", sans-serif); }
.ig-ag-callwrap b { font: 500 9cqw/1 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; }
.ig-ag-callface { width: 30cqw; height: 30cqw; margin-top: 6cqw; border-radius: 50%; box-shadow: 0 0 0 1.4cqw rgba(255, 255, 255, .12); animation: ig-ag-callring 1.4s ease-out infinite; }
@keyframes ig-ag-callring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 100% { box-shadow: 0 0 0 6cqw rgba(255, 255, 255, 0); } }
.ig-ag-callbtns { display: flex; width: 100%; justify-content: space-around; margin-top: 14cqw; }
.ig-ag-callbtns > span { display: inline-flex; width: 17cqw; height: 17cqw; align-items: center; justify-content: center; border-radius: 50%; }
.ig-ag-callbtns .material-symbols-outlined { font-size: 8.5cqw; }
.ig-ag-callbtns .is-decline { background: #e5483f; }
.ig-ag-callbtns .is-accept { background: #3cba5a; }

/* An email card (Mom's inbox, with her permission). It flies into the frame
   once Bondi has read it. */
.ig-ag-mailcard { position: absolute; z-index: 4; top: 10cqw; left: 50%; width: 76cqw; padding: 3cqw 3.4cqw 3.4cqw; border-radius: 3.6cqw; opacity: 0; transform: translate(-50%, 6cqw) scale(.96); transition: opacity .55s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ig-ag.is-card .ig-ag-mailcard { opacity: 1; transform: translate(-50%, 0); }
.ig-ag.is-absorb .ig-ag-mailcard { opacity: 0; transform: translate(-50%, 16cqw) scale(.35); transition-duration: .5s, .7s; }
.ig-ag-mailtop { display: flex; align-items: center; justify-content: space-between; color: rgba(43, 38, 34, .6); }
.ig-ag-mailtop i { width: 1.6cqw; height: 1.6cqw; background: var(--landing-coral); border-radius: 50%; animation: ig-ag-pulse 1.6s ease-in-out infinite; }
@keyframes ig-ag-pulse { 50% { opacity: .3; } }
.ig-ag-from { display: flex; align-items: center; gap: 2.2cqw; margin: 2.6cqw 0 2cqw; }
.ig-ag-from-av { display: inline-flex; flex: none; width: 7.4cqw; height: 7.4cqw; align-items: center; justify-content: center; color: #fff; background: #8aa3b8; border-radius: 50%; font: 700 3.4cqw/1 var(--body, "DM Sans", sans-serif); }
.ig-ag-from b { display: block; color: var(--ag-ink); font: 700 3.4cqw/1.2 var(--body, "DM Sans", sans-serif); }
.ig-ag-from small { display: block; color: rgba(43, 38, 34, .55); font: 500 2.5cqw/1.3 var(--ag-mono); }
.ig-ag-mailcard p { margin: 0; color: var(--ag-ink); font: 400 3.4cqw/1.42 var(--body, "DM Sans", sans-serif); }
.ig-ag-mailcard p + p { margin-top: 1.4cqw; }
.ig-ag-mailcard p.is-subject { font-weight: 700; }
.ig-ag-mailcard mark { color: inherit; background: none; text-decoration: underline wavy transparent; text-decoration-thickness: 1.5px; text-underline-offset: .8cqw; transition: text-decoration-color .5s ease, color .5s ease; }
.ig-ag-mailcard mark.is-link { color: #4f6f8f; }
.ig-ag.is-flag .ig-ag-mailcard mark { color: #b5463c; text-decoration-color: #d9584d; }
.ig-ag-flags { display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: 2.4cqw; }
.ig-ag-flags > span { display: inline-flex; align-items: center; gap: .8cqw; padding: 1.1cqw 1.8cqw; color: #b5463c; background: rgba(217, 88, 77, .1); border-radius: 999px; font: 600 2.4cqw/1 var(--ag-mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(1cqw); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.ig-ag-flags > span:nth-child(2) { transition-delay: .25s; }
.ig-ag.is-flag .ig-ag-flags > span { opacity: 1; transform: none; }

/* The family's memory: a strip of photos sliding under the frame until
   Bondi lands on the one Mom asked for. */
.ig-ag-strip { position: absolute; z-index: 3; top: 68cqw; left: 0; right: 0; height: 11cqw; overflow: hidden; opacity: 0; transition: opacity .5s ease; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.ig-ag.is-strip .ig-ag-strip { opacity: 1; }
.ig-ag-strip-track { display: flex; gap: 2cqw; height: 100%; padding-left: 43cqw; transition: transform 1.6s cubic-bezier(.45, 0, .15, 1); }
.ig-ag-strip-track > span { flex: none; width: 14cqw; height: 100%; background-color: #cfc4b6; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 1.6cqw; transition: transform .4s ease, box-shadow .4s ease; }
.ig-ag-strip-track > span[data-ph]::after { content: none; }
.ig-ag-strip-track > span.is-hit { box-shadow: 0 0 0 .5cqw var(--landing-coral); transform: scale(1.06); }

/* Signal chip (where Bondi's context came from, or a time jump). */
.ig-ag-chip { position: absolute; z-index: 6; top: 2.6cqw; left: 3cqw; display: inline-flex; max-width: 94%; align-items: center; gap: 1.6cqw; padding: 1.7cqw 2.8cqw 1.7cqw 2.2cqw; color: var(--ag-ink); border-radius: 999px; opacity: 0; transform: translateY(-1.6cqw); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.ig-ag.is-chip .ig-ag-chip { opacity: 1; transform: none; }
.ig-ag-chip .material-symbols-outlined { color: var(--landing-coral); font-size: 3.8cqw; }
.ig-ag-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-ag-chip-pulse { flex: none; width: 1.4cqw; height: 1.4cqw; background: var(--landing-coral); border-radius: 50%; animation: ig-ag-pulse 1.6s ease-in-out infinite; }

/* Subtitles under the frame, at most two lines. */
.ig-ag-sub { position: absolute; z-index: 6; right: 5cqw; bottom: 3.2cqw; left: 5cqw; margin: 0; color: var(--ag-ink); font: 500 3.6cqw/1.36 var(--body, "DM Sans", sans-serif); text-align: center; text-wrap: balance; transition: opacity .4s ease; }
.ig-ag-who { margin-right: .6cqw; color: var(--landing-coral); font: 700 2.6cqw/1 var(--ag-mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: .25cqw; }
.ig-ag.is-armed:not(.is-sub) .ig-ag-sub { opacity: 0; }

/* The payoff, from your side. */
.ig-ag-end { position: absolute; z-index: 7; top: 50cqw; left: 50%; display: inline-flex; max-width: 92%; align-items: center; gap: 1.4cqw; padding: 2cqw 3.4cqw 2cqw 2.4cqw; color: var(--ag-ink); border-radius: 999px; font: 600 3.2cqw/1.1 var(--body, "DM Sans", sans-serif); white-space: nowrap; opacity: 0; transform: translate(-50%, 2cqw) scale(.96); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.ig-ag-end .material-symbols-outlined { color: var(--ag-sage); font-size: 4.4cqw; font-variation-settings: "FILL" 1; }
.ig-ag.is-end .ig-ag-end { opacity: 1; transform: translate(-50%, 0); }

/* Mom, present: her portrait at the frame's corner while she talks or taps. */
.ig-ag-mom { position: absolute; z-index: 6; left: 4cqw; top: 52cqw; display: flex; align-items: center; gap: 1.6cqw; opacity: 0; transform: translateY(2cqw) scale(.9); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.ig-ag.is-mom .ig-ag-mom { opacity: 1; transform: none; }
.ig-ag-mom > span { width: 13cqw; height: 13cqw; border-radius: 50%; box-shadow: 0 0 0 .7cqw #fbf8f3, 0 1.6cqw 3cqw rgba(43, 30, 20, .25); }
.ig-ag-mom > b { display: inline-flex; align-items: center; gap: .6cqw; height: 5cqw; padding: 0 1.8cqw; background: #fbf8f3; border-radius: 999px; box-shadow: 0 1cqw 2.4cqw rgba(43, 30, 20, .14); }
.ig-ag-mom > b i { width: .7cqw; height: 2.4cqw; background: var(--ag-ink); border-radius: 1cqw; animation: ig-ag-wave .7s ease-in-out infinite; }
.ig-ag-mom > b i:nth-child(2) { animation-delay: .12s; }
.ig-ag-mom > b i:nth-child(3) { animation-delay: .24s; }
.ig-ag-mom > b i:nth-child(4) { animation-delay: .36s; }
@keyframes ig-ag-wave { 50% { transform: scaleY(.35); } }
.ig-ag.is-mom-tap .ig-ag-mom > b { display: none; }

/* Bondi reading a photo: chalk loops and notes, as in the hero scan. */
.ig-ag-note { position: absolute; z-index: 2; left: var(--x); top: var(--y); opacity: 0; transform: scale(.7); transition: opacity .35s ease var(--d), transform .45s cubic-bezier(.34, 1.4, .64, 1) var(--d); }
.ig-ag.is-scan .ig-ag-note { opacity: 1; transform: none; }
.ig-ag-note i { position: absolute; left: 0; top: 0; width: var(--w, 13cqw); height: var(--h, 13cqw); border: 1.5px solid #fffaf0; border-radius: 50% 46% 52% 48% / 48% 54% 46% 52%; transform: translate(-50%, -50%) rotate(-6deg); box-shadow: 0 0 6px rgba(0, 0, 0, .25); }
.ig-ag-note b { position: absolute; left: calc(var(--w, 13cqw) / 2 + 1cqw); top: 0; color: #fffaf0; font: 400 3.4cqw/1 var(--landing-handwritten); white-space: nowrap; text-shadow: 0 1px 2px rgba(20, 12, 8, .8), 0 0 8px rgba(20, 12, 8, .4); transform: translateY(-50%) rotate(-4deg); }
.ig-ag-note.is-left b { left: auto; right: calc(var(--w, 13cqw) / 2 + 1cqw); }
.ig-ag-screen.is-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20, 12, 8, 0); transition: background .4s ease; pointer-events: none; }
.ig-ag.is-scan .ig-ag-screen.is-photo::after { background: rgba(20, 12, 8, .18); }

/* A word Bondi picks up from a message: a chalk loop drawn around it. */
.ig-ag-hl { position: relative; }
.ig-ag-hl::after { content: ""; position: absolute; inset: -1.6cqw -2.4cqw; border: 2px solid #fffaf0; border-radius: 50% 46% 52% 48% / 48% 54% 46% 52%; transform: rotate(-4deg) scale(.6); opacity: 0; transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.ig-ag-iscreen.is-circle .ig-ag-hl::after { opacity: 1; transform: rotate(-4deg); }

[data-pic="baking"] { background-image: url("/founder-edition/assets/photo-baking.webp"); background-position: 50% 40%; }

/* A room of Mom's home behind the frame (shallow depth of field, Mom in the
   mid-ground). data-scene names the room; until its photo exists, a
   placeholder says which shot goes here. Add a photo with
   .ig-ag-bg[data-scene="…"] { background-image: url(…); } and drop its
   label with .ig-ag-bg[data-scene="…"]::before { content: none; }. */
.ig-ag-bg { position: absolute; inset: 0; z-index: 0; background: #d9cdbd repeating-linear-gradient(135deg, #ddd2c3 0 8px, #d5c9b9 8px 16px); background-position: center; background-size: cover; }
.ig-ag-bg::before { content: "SCENE · " attr(data-scene); position: absolute; top: 3cqw; right: 3cqw; padding: 3px 7px; color: rgba(43, 38, 34, .7); background: rgba(250, 246, 240, .85); border-radius: 4px; font: 600 8px/1.3 var(--ag-mono); letter-spacing: .06em; text-transform: uppercase; }
.ig-ag-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 20, 14, .62), rgba(28, 20, 14, .12) 34%, transparent 55%); }
.ig-ag::before { display: none; }
.ig-ag-device { top: 10cqw; }
/* Subtitles now sit on the scene: light text over its dark foot. */
.ig-ag-sub { color: #fdf9f3; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.ig-ag-who { color: #ffc9ad; }
/* The memory strip runs above the frame. */
.ig-ag-strip { top: 1.6cqw; height: 9.6cqw; }
.ig-ag-strip-track > span.is-hit { box-shadow: 0 0 0 .5cqw #ffb066; }
/* Today card: the day's confirmed plans as a short agenda. */
.ig-ag-today { display: flex; flex-direction: column; gap: 1.4cqw; }
.ig-ag-today > span { display: flex; align-items: baseline; gap: 2.6cqw; padding: 1.8cqw 2.2cqw; color: var(--ag-ink); background: #f2ebe1; border-radius: 1.6cqw; font: 500 3.4cqw/1.2 var(--body, "DM Sans", sans-serif); }
.ig-ag-today > span.is-done { color: rgba(43, 38, 34, .45); text-decoration: line-through; }
.ig-ag-today b { flex: none; min-width: 14cqw; font: 700 2.8cqw/1.2 var(--ag-mono); letter-spacing: .02em; }
.ig-ag-today > span.is-next { box-shadow: inset .7cqw 0 0 var(--landing-coral); }
/* Clinic details after Review: time, place, source. */
.ig-ag-detail { display: grid; grid-template-columns: auto 1fr; gap: 1.2cqw 2.4cqw; margin: 0; color: var(--ag-ink); font: 500 3.2cqw/1.25 var(--body, "DM Sans", sans-serif); }
.ig-ag-detail dt { color: rgba(43, 38, 34, .5); font: 600 2.3cqw/1.5 var(--ag-mono); letter-spacing: .08em; text-transform: uppercase; }
.ig-ag-detail dd { margin: 0; }
.ig-ag-detail s { color: rgba(43, 38, 34, .45); text-decoration-color: #d9584d; }
.ig-ag-mom { top: 60cqw; }

/* Scene photos as they arrive. */
.ig-ag-bg[data-scene="Evening kitchen"] { background-image: url("/founder-edition/assets/scene-evening-kitchen.webp"); }
.ig-ag-bg[data-scene="Evening kitchen"]::before { content: none; }

/* Camera: wide (the frame smaller on the counter at right, Mom in view on
   the left) when the frame first comes in and at the payoff; in close (the
   frame centred and large) while Bondi and Mom use it. */
.ig-ag.is-device.is-wide .ig-ag-device { transform: translateX(-50%) translate(21cqw, 13cqw) scale(.6); }

/* ── Bondi, the agent, lives on Mom's screen: the homepage character (coral
   clay, the hero's faces), peeking up from the screen's bottom edge. Its eyes
   follow what it attends to (--lx/--ly, −1…1); its body breathes, hops when
   it speaks first, bobs while it talks, tilts to listen (--tilt). Bottom-right
   on UI screens, bottom-left over photos. ig-landing.js drives it. ── */
.ig-ag-bondi { position: absolute; z-index: 3; right: 3%; bottom: -1.4cqw; width: 13cqw; aspect-ratio: 1.3; pointer-events: none; transform: translateY(var(--rise, 0%)); transition: transform .6s cubic-bezier(.34, 1.5, .64, 1), left .5s ease, right .5s ease; }
.ig-ag-screen.is-photo .ig-ag-bondi { right: auto; left: 3%; }
.ig-ag.is-armed:not(.is-device) .ig-ag-bondi { --rise: 70%; }
.ig-ag-bondi-body { position: absolute; inset: 0; background: #ec8a6b; border-radius: 32% / 40%; box-shadow: inset 0 -.8cqw 1.4cqw rgba(170, 70, 40, .22), inset 0 .6cqw 1cqw rgba(255, 220, 200, .35), 0 1cqw 2cqw rgba(60, 25, 10, .25); transform-origin: 50% 100%; transform: rotate(var(--tilt, 0deg)); transition: transform .45s cubic-bezier(.34, 1.5, .64, 1); animation: ig-ag-breathe 3.2s ease-in-out infinite; }
@keyframes ig-ag-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.025 .97; } }
.ig-ag-bondi svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ig-ag-bondi .ig-eyes { transform: translate(calc(var(--lx, 0) * 4px), calc(var(--ly, 0) * 3px)); transition: transform .3s cubic-bezier(.34, 1.5, .64, 1); }
.ig-ag-bondi[data-face="open"] .ig-face-open,
.ig-ag-bondi[data-face="squint"] .ig-face-squint,
.ig-ag-bondi[data-face="happy"] .ig-face-happy,
.ig-ag-bondi[data-face="wow"] .ig-face-wow,
.ig-ag-bondi[data-face="love"] .ig-face-love,
.ig-ag-bondi[data-face="wink"] .ig-face-wink { opacity: 1; }
.ig-ag-bondi .ig-face-open rect { transform-box: fill-box; transform-origin: center; animation: ig-ag-eyeblink 3.6s infinite; }
@keyframes ig-ag-eyeblink { 0%, 90%, 100% { transform: none; } 94% { transform: scaleY(.12); } }
.ig-ag-blush ellipse { fill: #ff9f8e; opacity: 0; transition: opacity .3s ease; }
.ig-ag-bondi[data-face="happy"] .ig-ag-blush ellipse,
.ig-ag-bondi[data-face="love"] .ig-ag-blush ellipse,
.ig-ag-bondi[data-face="wink"] .ig-ag-blush ellipse { opacity: .7; }
/* Talking: a quick bob while the subtitle types. */
.ig-ag-bondi.is-talk .ig-ag-bondi-body { animation: ig-ag-talk .32s ease-in-out infinite alternate; }
@keyframes ig-ag-talk { from { scale: 1 1; } to { scale: 1.04 .94; } }
/* Hop: up, a stretch, then a squash on landing. */
.ig-ag-bondi.is-hop .ig-ag-bondi-body { animation: ig-ag-hop .6s cubic-bezier(.3, .7, .4, 1); }
@keyframes ig-ag-hop { 0% { translate: 0 0; scale: 1 1; } 18% { translate: 0 0; scale: 1.1 .86; } 45% { translate: 0 -55%; scale: .92 1.1; } 75% { translate: 0 0; scale: 1.12 .86; } 100% { translate: 0 0; scale: 1 1; } }
.ig-ag-bondi.is-hop2 .ig-ag-bondi-body { animation: ig-ag-hop .5s cubic-bezier(.3, .7, .4, 1) 2; }
/* Nod: a small yes. */
.ig-ag-bondi.is-nod .ig-ag-bondi-body { animation: ig-ag-nod .45s ease-in-out; }
@keyframes ig-ag-nod { 40% { translate: 0 8%; scale: 1.05 .93; } }
/* A sparkle when it notices something. */
.ig-ag-bondi::after { content: "✦"; position: absolute; right: -6%; top: -34%; color: #ffc98a; font-size: 4.4cqw; line-height: 1; opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .25s ease, transform .4s cubic-bezier(.34, 1.6, .64, 1); text-shadow: 0 0 6px rgba(255, 190, 120, .8); }
.ig-ag-bondi[data-face="wow"]::after { opacity: 1; transform: none; }
/* Buttons leave room for Bondi in the corner. */
.ig-ag-btns { margin-right: 14cqw; }
/* The tiny header tile is gone now that Bondi is on screen. */
.ig-ag-screen .ig-ag-head .ig-app-avatar { display: none; }

/* ── Layout with JS: the screen is lifted out of the frame (a stage child) so
   it can either sit exactly in the frame's cut-out (photos; numbers are the
   frame's screen at close: device 82cqw wide at 9cqw,10cqw → screen
   18.92,19.9 · 62.65×40.19cqw, origin at the device centre) or float above the
   frame as a glass card (actions: .is-float), with the camera wide so Mom and
   her frame stay in view. ── */
.ig-ag.is-device.is-wide .ig-ag-device { transform: translateX(-50%) translate(21.5cqw, 18cqw) scale(.52); }
.ig-ag.is-armed > .ig-ag-screen { z-index: 1; left: 18.92cqw; top: 19.9cqw; width: 62.65cqw; height: 40.19cqw; transform-origin: 31.08cqw 20.27cqw; transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .7s ease, filter .7s ease, left .8s cubic-bezier(.2, .8, .2, 1), top .8s cubic-bezier(.2, .8, .2, 1), width .8s cubic-bezier(.2, .8, .2, 1), height .8s cubic-bezier(.2, .8, .2, 1), border-radius .6s ease, box-shadow .6s ease; }
.ig-ag.is-armed:not(.is-device) > .ig-ag-screen { opacity: .4; filter: blur(1.5px) saturate(.7); transform: translateY(3cqw) scale(.9); }
.ig-ag.is-device.is-wide:not(.is-float) > .ig-ag-screen { transform: translate(21.5cqw, 18cqw) scale(.52); }
/* Floating: a glass card above the frame on the counter. */
.ig-ag.is-device.is-float > .ig-ag-screen { z-index: 5; left: 34cqw; top: 11cqw; width: 63cqw; height: 31cqw; padding: 2.4cqw 3cqw; overflow: visible; background: rgba(251, 248, 243, .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 3cqw; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 3cqw 7cqw rgba(43, 30, 20, .22); }
/* While the card floats, the frame's own screen shows a small version of it. */
.ig-ag-mini { position: absolute; z-index: 1; left: 12.1%; top: 16.4%; width: 76.4%; height: 66.6%; background: linear-gradient(#e7ddd0, #e7ddd0) 12% 30% / 46% 7% no-repeat, linear-gradient(#efe7dc, #efe7dc) 12% 50% / 70% 9% no-repeat, linear-gradient(#efe7dc, #efe7dc) 12% 66% / 56% 9% no-repeat, linear-gradient(var(--ag-ink), var(--ag-ink)) 12% 86% / 26% 10% no-repeat, radial-gradient(circle at 86% 84%, #ec8a6b 0 9%, transparent 9.5%), #faf6f0; }
/* Bondi perches on the floating card's top edge, peeking over it. */
.ig-ag.is-float .ig-ag-bondi { top: -10.6cqw; bottom: auto; left: 2.6cqw; right: auto; width: 18.5cqw; }
.ig-ag.is-float .ig-ag-firsttag { top: 4cqw; left: 73cqw; }
.ig-ag.is-float .ig-ag-btns { margin-right: 0; }
.ig-ag-end { top: 74cqw; }
.ig-ag.is-float .ig-ag-head { padding-left: 21cqw; min-height: 4.4cqw; }
.ig-ag:not(.is-float) .ig-ag-mini { opacity: 0; }
.ig-ag-mini { transition: opacity .4s ease; }

/* ── Draft Agent UI, v2: one family. Sans only (tabular figures for times),
   one headline per card, warm white surfaces with soft depth, buttons in the
   brand's deep brown with a tinted secondary, soft gradient icon badges, and
   every floating label the same small pill. Overrides the first pass above. ── */
.ig-page { --ag-brown: #4f473d; --ag-tint: #f1ebe3; --ag-muted: rgba(43, 38, 34, .56); }

/* Card surface (floating) and screen (in the frame). */
.ig-ag.is-device.is-float > .ig-ag-screen { padding: 3cqw 3.4cqw 3.2cqw; background: linear-gradient(#fffdfa, #fbf7f1); border-radius: 4.2cqw; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(80, 55, 35, .06), 0 1.4cqw 3cqw rgba(60, 35, 20, .1), 0 5cqw 10cqw rgba(60, 35, 20, .16); }
.ig-ag-screen { padding: 3cqw 3.4cqw; background: #fdfaf6; }

/* Context line: small, warm grey, sentence case. */
.ig-ag-head b { color: var(--ag-muted); font: 600 2.8cqw/1.2 var(--body, "DM Sans", sans-serif); letter-spacing: 0; text-transform: none; }
.ig-ag-prog { gap: .7cqw; }
.ig-ag-prog i { width: 4.2cqw; height: .9cqw; background: rgba(79, 71, 61, .14); }
.ig-ag-prog i.is-on { background: var(--landing-coral); }

/* Headline: the one thing Mom needs to read. */
.ig-ag-body { margin: 1.6cqw 0 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ig-ag-row { gap: 2.8cqw; }
.ig-ag-text { color: var(--ag-ink); font: 600 4.2cqw/1.22 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; }
.ig-ag-text b { font-weight: 700; color: var(--ag-brown); }
/* Icon badge: a soft warm gradient circle. */
.ig-ag-icon { width: 10.5cqw; height: 10.5cqw; color: #fff; background: radial-gradient(120% 120% at 30% 20%, #ffc2a6, #ec8a6b 70%); border-radius: 50%; box-shadow: 0 1cqw 2.4cqw rgba(236, 138, 107, .35), inset 0 .5cqw .8cqw rgba(255, 255, 255, .35); font-size: 5.6cqw; font-variation-settings: "wght" 400, "FILL" 1; }
.ig-ag-icon.is-ok { color: #fff; background: radial-gradient(120% 120% at 30% 20%, #b7e0c2, #6fa47e 70%); box-shadow: 0 1cqw 2.4cqw rgba(111, 164, 126, .35), inset 0 .5cqw .8cqw rgba(255, 255, 255, .35); font-variation-settings: "wght" 500, "FILL" 1; }
.ig-ag-thumb { width: 10.5cqw; height: 10.5cqw; border-radius: 50%; box-shadow: 0 0 0 .5cqw #fff, 0 1cqw 2cqw rgba(60, 35, 20, .18); }

/* Buttons: deep brown primary, tinted secondary, generous. */
.ig-ag-btns { gap: 1.6cqw; margin-top: 2.4cqw; }
.ig-ag-btn { padding: 2.4cqw 1.6cqw; font: 600 3.1cqw/1 var(--body, "DM Sans", sans-serif); }
.ig-ag-btn:first-child { color: #fffaf3; background: var(--ag-brown); box-shadow: 0 .8cqw 1.6cqw rgba(79, 71, 61, .25); }
.ig-ag-btn + .ig-ag-btn { color: var(--ag-brown); background: var(--ag-tint); box-shadow: none; }
.ig-ag-btn.is-tap::after { background: rgba(255, 255, 255, .45); }
.ig-ag-btn + .ig-ag-btn.is-tap::after { background: rgba(236, 138, 107, .35); }

/* Today: a short timeline; the next item gets the coral dot. */
.ig-ag-today { position: relative; gap: 1.8cqw; padding-left: 3.4cqw; }
.ig-ag-today::before { content: ""; position: absolute; left: .7cqw; top: 2cqw; bottom: 2cqw; width: 1.5px; background: rgba(79, 71, 61, .15); }
.ig-ag-today > span { position: relative; align-items: center; gap: 2.4cqw; padding: 0; background: none; border-radius: 0; color: var(--ag-ink); font: 600 3.8cqw/1.25 var(--body, "DM Sans", sans-serif); box-shadow: none !important; }
.ig-ag-today > span::before { content: ""; position: absolute; left: -3.4cqw; top: 50%; width: 1.6cqw; height: 1.6cqw; margin-top: -.8cqw; background: #d9cfc3; border-radius: 50%; box-shadow: 0 0 0 .6cqw #fdfaf6; }
.ig-ag-today > span.is-next::before { background: var(--landing-coral); box-shadow: 0 0 0 .6cqw #fdfaf6, 0 0 0 1.3cqw rgba(236, 138, 107, .25); }
.ig-ag-today b { min-width: 15cqw; color: var(--ag-muted); font: 600 3cqw/1.2 var(--body, "DM Sans", sans-serif); font-variant-numeric: tabular-nums; }
.ig-ag-today > span.is-next b { color: var(--landing-coral); }

/* Clinic details: icon + text rows. */
.ig-ag-detail { display: flex; flex-direction: column; gap: 1.5cqw; }
.ig-ag-detail > div { display: flex; align-items: center; gap: 2cqw; color: var(--ag-ink); font: 600 3.4cqw/1.2 var(--body, "DM Sans", sans-serif); }
.ig-ag-detail .material-symbols-outlined { flex: none; width: 5.6cqw; height: 5.6cqw; display: inline-flex; align-items: center; justify-content: center; color: var(--landing-coral); background: rgba(236, 138, 107, .12); border-radius: 50%; font-size: 3.6cqw; }
.ig-ag-detail small { color: var(--ag-muted); font-weight: 500; }
.ig-ag-detail s { color: var(--ag-muted); font-weight: 500; text-decoration-color: rgba(217, 88, 77, .7); }
.ig-ag-appt { font: 500 3.3cqw/1.25 var(--body, "DM Sans", sans-serif); }
.ig-ag-appt b { font: 700 3.9cqw/1.2 var(--body, "DM Sans", sans-serif); }

/* Numbered steps (scam check). */
.ig-ag-steps { gap: 1.8cqw; }
.ig-ag-steps li { gap: 2.2cqw; font: 600 3.7cqw/1.25 var(--body, "DM Sans", sans-serif); }
.ig-ag-steps li::before { width: 5.4cqw; height: 5.4cqw; color: #fff; background: var(--ag-brown); border: 0; font: 700 2.8cqw/1 var(--body, "DM Sans", sans-serif); }

/* Photo header pill on the frame. */
.ig-ag-screen.is-photo .ig-ag-head { top: 2cqw; left: 2cqw; padding: 1.2cqw 2.4cqw; background: rgba(255, 253, 250, .9); box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .15); }
.ig-ag-screen.is-photo .ig-ag-head b { color: var(--ag-ink); }
.ig-ag-photo-cap { padding: 1.3cqw 2.4cqw; font: 600 3cqw/1 var(--body, "DM Sans", sans-serif); }

/* Floating labels: one pill style everywhere. */
.ig-ag-chip,
.ig-ag-firsttag,
.ig-ag-end { padding: 1.7cqw 3.2cqw 1.7cqw 2.4cqw; color: var(--ag-ink); background: rgba(255, 253, 250, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0; border-radius: 999px; box-shadow: 0 0 0 1px rgba(80, 55, 35, .06), 0 1.2cqw 3cqw rgba(40, 25, 15, .18); font: 600 3cqw/1.1 var(--body, "DM Sans", sans-serif); letter-spacing: 0; text-transform: none; }
.ig-ag-chip .material-symbols-outlined { color: var(--landing-coral); font-size: 3.8cqw; font-variation-settings: "FILL" 1; }
.ig-ag-firsttag i { background: #ff9a45; box-shadow: 0 0 0 .7cqw rgba(255, 154, 69, .22), 0 0 1.6cqw #ffb066; }
.ig-ag-end .material-symbols-outlined { color: #6fa47e; }

/* Subtitles: speaker in sans, not a code label. */
.ig-ag-who { font: 700 3.2cqw/1 var(--body, "DM Sans", sans-serif); letter-spacing: 0; text-transform: none; vertical-align: 0; }
.ig-ag-who::after { content: " ·"; color: rgba(255, 220, 200, .6); }

/* Email card: same type family. */
.ig-ag-mailcard { padding: 3.2cqw 3.6cqw 3.6cqw; background: linear-gradient(#fffdfa, #fbf7f1); border-radius: 4.2cqw; box-shadow: 0 0 0 1px rgba(80, 55, 35, .06), 0 5cqw 10cqw rgba(60, 35, 20, .18); }
.ig-ag-mailtop { color: var(--ag-muted); font: 600 2.8cqw/1 var(--body, "DM Sans", sans-serif); letter-spacing: 0; text-transform: none; }
.ig-ag-from small { font: 500 2.6cqw/1.3 var(--body, "DM Sans", sans-serif); }
.ig-ag-mailcard p.is-subject { font-size: 3.8cqw; }
.ig-ag-flags > span { padding: 1.2cqw 2.2cqw; font: 600 2.7cqw/1 var(--body, "DM Sans", sans-serif); letter-spacing: 0; text-transform: none; }
.ig-ag-flags .material-symbols-outlined { font-size: 3.4cqw; font-variation-settings: "FILL" 1; }
.ig-agency-card.ig-hiw-card { padding: 14px; overflow: hidden; }
@media (min-width: 960px) { .ig-agency-card.ig-hiw-card { padding: 22px; } }

/* Phones: each section's cards swipe sideways, the next one peeking in, with
   dots under the track. Desktop keeps the grid. */
@media (max-width: 959px) {
  .ig-agency-cards { display: flex; width: calc(100% + 40px); max-width: none; margin: 20px -20px 0; padding: 4px 20px 6px; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  .ig-agency-cards::-webkit-scrollbar { display: none; }
  .ig-agency-card { flex: 0 0 86%; scroll-snap-align: start; }
}

/* ── The frame is part of the scene. Everything Mom's room holds sits in
   .ig-ag-world in the scene photo's own coordinates (1287×1222 → 100×95cqw,
   1cqw = 12.87px): the frame at 700,552 → 1220,935, its screen at 765,616 →
   1159,868. A scene with data-baked has the frame in the photo itself; other
   scenes get the frame image laid in the same spot. The UI is mapped onto the
   screen (.ig-ag-slot: the 62.65×40.19cqw design scaled to fit), the camera
   moves by zooming the world, and .ig-ag-float is the same UI lifted out,
   large, for reading while the camera stays wide. ── */
.ig-ag-world { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter .7s ease; }
.ig-ag.is-device:not(.is-wide) .ig-ag-world { transform: translate(-99.49cqw, -75.3cqw) scale(2); }
.ig-ag.is-armed:not(.is-device) .ig-ag-world { filter: blur(3px) brightness(.9); }
.ig-ag-world .ig-ag-device { left: 54.39cqw; top: 42.89cqw; width: 40.4cqw; transform: none !important; opacity: 1 !important; filter: none !important; }
.ig-ag-world .ig-ag-bezel { filter: drop-shadow(0 1.2cqw 1.4cqw rgba(30, 15, 5, .35)); }
.ig-ag[data-baked] .ig-ag-world .ig-ag-bezel { visibility: hidden; }
.ig-ag-slot { position: absolute; z-index: 1; left: 59.44cqw; top: 47.86cqw; width: 30.61cqw; height: 19.58cqw; overflow: hidden; background: #fdfaf6; }
.ig-ag-slot > .ig-ag-screen { left: 0; top: 0; width: 62.65cqw; height: 40.19cqw; transform: scale(.4886); transform-origin: 0 0; }
/* The slot's own Bondi and layout stay put while the lifted card floats. */
.ig-ag.is-float .ig-ag-slot .ig-ag-bondi { top: auto; bottom: -1.4cqw; left: auto; right: 3%; width: 13cqw; }
.ig-ag.is-float .ig-ag-slot .ig-ag-head { padding-left: 0; }
.ig-ag.is-float .ig-ag-slot .ig-ag-btns { margin-right: 14cqw; }
/* The lifted card: rises out of the frame, reads at full size. */
.ig-ag.is-armed > .ig-ag-screen.ig-ag-float { z-index: 5; left: 34cqw; top: 11cqw; width: 63cqw; height: 31cqw; padding: 3cqw 3.4cqw 3.2cqw; overflow: visible; background: linear-gradient(#fffdfa, #fbf7f1); border-radius: 4.2cqw; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(80, 55, 35, .06), 0 1.4cqw 3cqw rgba(60, 35, 20, .1), 0 5cqw 10cqw rgba(60, 35, 20, .16); transform-origin: 65% 125%; transition: opacity .45s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.ig-ag.is-armed:not(.is-float) > .ig-ag-screen.ig-ag-float { opacity: 0; transform: translateY(8cqw) scale(.5); filter: none; pointer-events: none; }
.ig-ag.is-armed.is-float > .ig-ag-screen.ig-ag-float { opacity: 1; transform: none; filter: none; }
.ig-ag[data-baked] .ig-ag-mom { display: none; }
.ig-ag[data-baked] .ig-ag-bg[data-scene="Evening kitchen"] { background-image: url("/founder-edition/assets/scene-evening-kitchen-frame.webp"); }

/* ── Per the card brief: the UI lives on the frame. The screen has a wall (the
   photo the frame shows when idle) and a pane (the UI). Over a wall the pane
   is a small card that rises over the photo; with no wall it fills the
   screen. Bondi stays tucked below the screen's edge until it has something
   to say (.is-bondi), so its arrival reads as the proactive moment. ── */
.ig-ag-wall { position: absolute; inset: 0; z-index: 0; background-color: #cfc4b6; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity .6s ease; }
.ig-ag-screen.has-wall .ig-ag-wall { opacity: 1; }
.ig-ag-pane { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; min-height: 0; transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.ig-ag-screen.has-wall { padding: 0; }
.ig-ag-screen.has-wall .ig-ag-pane { position: absolute; left: 4%; bottom: 7%; width: 72%; flex: none; padding: 2.8cqw 3.2cqw 3cqw; background: rgba(255, 253, 250, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 3.4cqw; box-shadow: 0 1cqw 3cqw rgba(20, 10, 5, .22), 0 0 0 1px rgba(255, 255, 255, .5); }
.ig-ag-screen.has-wall .ig-ag-body { margin-top: 1.2cqw; }
.ig-ag-screen.has-wall .ig-ag-btns { margin-right: 0; }
.ig-ag-screen.no-pane .ig-ag-pane { opacity: 0; transform: translateY(24%) scale(.96); }
/* Bondi: tucked away until it steps in. */
.ig-ag.is-armed:not(.is-bondi) .ig-ag-slot .ig-ag-bondi { --rise: 120%; }
/* Old → new time: the old one is struck, the new one slides in. */
.ig-ag-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6cqw 2cqw; }
.ig-ag-change b { color: var(--ag-ink); font: 700 5cqw/1.1 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; animation: ig-ag-newtime .6s cubic-bezier(.2, .8, .2, 1) .5s both; }
.ig-ag-change s { color: var(--ag-muted); font: 500 3cqw/1.2 var(--body, "DM Sans", sans-serif); text-decoration-color: rgba(217, 88, 77, .8); text-decoration-thickness: 2px; }
@keyframes ig-ag-newtime { from { opacity: 0; transform: translateX(-2cqw); } }
.ig-ag-facts { display: flex; gap: 2.4cqw; margin-top: 1.6cqw; color: var(--ag-muted); font: 600 2.8cqw/1.2 var(--body, "DM Sans", sans-serif); }
.ig-ag-facts span { display: inline-flex; align-items: center; gap: .8cqw; }
.ig-ag-facts .material-symbols-outlined { color: var(--landing-coral); font-size: 3.4cqw; font-variation-settings: "FILL" 1; }
/* Worth a second look: two plain points and a gentle line. */
.ig-ag-points { display: flex; flex-direction: column; gap: 1.2cqw; }
.ig-ag-points span { display: flex; align-items: center; gap: 1.6cqw; color: var(--ag-ink); font: 600 3.6cqw/1.2 var(--body, "DM Sans", sans-serif); }
.ig-ag-points span::before { content: ""; flex: none; width: 1.8cqw; height: 1.8cqw; background: #f0a33c; border-radius: 50%; box-shadow: 0 0 0 .7cqw rgba(240, 163, 60, .2); }
.ig-ag-points q { margin-top: .6cqw; color: var(--ag-muted); font: 500 3.2cqw/1.3 var(--body, "DM Sans", sans-serif); quotes: "“" "”"; }
/* Bondi beside the enlarged email, marking what's worth a look. */
.ig-ag.is-armed .ig-ag-mailcard .ig-ag-bondi { --rise: 0%; top: -9.5cqw; right: 3cqw; bottom: auto; left: auto; width: 16cqw; }
/* Buttons size to their labels, so "Remind me later" never clips. */
.ig-ag-slot .ig-ag-btn { flex: 1 1 auto; padding: 2.2cqw 2.6cqw; font-size: 2.9cqw; }

/* 02 Agency: Muse-style slider (.ig-tk). Title, a flat stage that plays
   one shot at a time, the description, then arrows. The next
   slide peeks in. Flat on purpose: no shadows, no boxes in the stage. */
.ig-tk { --tk-ink: #2b2622; --tk-muted: #6b625a; --tk-stage: #faf6f0; width: calc(100% + 40px); margin: 24px -20px 0; }
.ig-tk-track { display: flex; gap: 12px; padding: 0 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
.ig-tk-track::-webkit-scrollbar { display: none; }
.ig-tk-track::after { content: ""; flex: 0 0 1px; }
.ig-tk-slide { flex: 0 0 calc(100% - 8px); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.ig-tk .ig-tk-desc { margin: 40px 0 0; color: var(--tk-muted); font-size: 16px; line-height: 24px; letter-spacing: -.01em; text-wrap: pretty; }
/* Only the settled card speaks: the next one shows just a faint stage edge
   (a hint to swipe), with its text hidden. */
.ig-tk .ig-tk-desc { transition: opacity .25s ease; }
.ig-tk-slide:not(.is-active) .ig-tk-stage { opacity: .35; }
.ig-tk-slide:not(.is-active) .ig-tk-shot, .ig-tk-slide:not(.is-active) .ig-tk-desc { opacity: 0; }

.ig-tk-stage { display: flex; align-items: center; justify-content: center; height: min(360px, 96vw); padding: 20px; background: var(--tk-stage); border: 1px solid rgba(43, 38, 34, .07); border-radius: 24px; transition: opacity .35s ease; }

/* A shot: who, a small gray line, one serif line. */
.ig-tk-shot { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; transition: opacity .18s ease, transform .18s ease; }
.ig-tk-shot.is-out { opacity: 0; transform: translateY(-6px); }
.ig-tk-actor { display: flex; align-items: center; justify-content: center; height: 60px; }
.ig-tk-bondi { position: relative; width: 74px; height: 57px; }
.ig-tk-bondi .ig-ag-bondi { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
.ig-tk-bondi .ig-ag-bondi::after { display: none; }
.ig-tk-bondi .ig-ag-bondi-body { box-shadow: none; }
/* Mom: shoulders-up portrait (mom-avatar.webp, 256px square crop). */
.ig-tk-mom { display: block; width: 56px; height: 56px; background: #e9dfd3 url("/founder-edition/assets/mom-avatar.webp") center / cover no-repeat; border-radius: 50%; }
.ig-tk-emoji { font-size: 48px; line-height: 1; }
.ig-tk .ig-tk-label { margin: 14px 0 0; color: var(--tk-muted); font-size: 13px; font-weight: 500; line-height: 18px; }
.ig-tk .ig-tk-line { max-width: 280px; min-height: 0; margin: 6px 0 0; color: var(--tk-ink); font: 500 22px/29px var(--display, "Newsreader", serif); letter-spacing: -.01em; text-wrap: balance; }
.ig-tk .ig-tk-line:empty { display: none; }
.ig-tk-shot > * { animation: ig-tk-in .24s cubic-bezier(.22, 1, .36, 1) both; }
.ig-tk-shot > .ig-tk-label { animation-delay: .04s; }
.ig-tk-shot > .ig-tk-line, .ig-tk-shot > .ig-tk-ui { animation-delay: .08s; }
@keyframes ig-tk-in { from { opacity: 0; transform: translateY(6px); } }


/* Bondi: think, reading (eyes scan a line), and the "!" when something's off. */
.ig-ag-bondi[data-face="think"] .ig-face-think { opacity: 1; }
.ig-tk-bondi .ig-ag-bondi.is-reading .ig-eyes { animation: ig-tk-read 1.1s ease-in-out infinite alternate; }
@keyframes ig-tk-read { from { transform: translate(-4px, 3px); } to { transform: translate(4px, 3px); } }
.ig-tk-alert { position: absolute; top: -10px; right: -10px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #fff; background: #d9603f; border: 2px solid var(--tk-stage); border-radius: 50%; font: 800 13px/1 var(--body, "DM Sans", sans-serif); opacity: 0; transform: scale(.3); transition: opacity .2s ease .3s, transform .4s cubic-bezier(.34, 1.8, .64, 1) .3s; }
.ig-tk-shot.is-alert .ig-tk-alert { opacity: 1; transform: none; }

.ig-tk-nav { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding: 0 20px; }
.ig-tk-arrow { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; color: var(--tk-ink); background: rgba(255, 253, 249, .85); border: 1px solid rgba(43, 38, 34, .08); border-radius: 50%; cursor: pointer; transition: opacity .2s ease, transform .2s ease; }
.ig-tk-arrow:active { transform: scale(.94); }
.ig-tk-arrow:disabled { opacity: .35; cursor: default; }
.ig-tk-arrow:focus-visible { outline: 2px solid var(--landing-coral, #e8896a); outline-offset: 3px; }

@media (min-width: 960px) {
  .ig-tk { width: 100%; max-width: 480px; margin: 40px auto 0; }
  .ig-tk-track { padding: 0; scroll-padding-inline: 0; }
  .ig-tk-track::after { display: none; }
  .ig-tk-slide { flex-basis: 100%; }
  .ig-tk-nav { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-tk-shot, .ig-tk-shot > *, .ig-tk-bondi .ig-ag-bondi.is-reading .ig-eyes { animation: none; transition: none; }
}

/* Hierarchy: the action or result is the big serif line; labels are
   uppercase; lists, notes and the cause line stay sans. */
.ig-tk-shot.is-cause .ig-tk-line { font: 600 17px/24px var(--body, "DM Sans", sans-serif); letter-spacing: 0; }

/* Done: pink hearts float up beside Bondi. */
.ig-tk-hearts { position: absolute; top: -4px; right: -18px; width: 30px; height: 40px; pointer-events: none; }
.ig-tk-hearts i { position: absolute; bottom: 0; left: 50%; color: #f39bb4; font-size: 15px; font-style: normal; line-height: 1; opacity: 0; }
.ig-tk-hearts i:nth-child(2) { left: 10%; font-size: 11px; }
.ig-tk-hearts i:nth-child(3) { left: 80%; font-size: 12px; }
.ig-tk-shot.is-done .ig-tk-hearts i { animation: ig-tk-heart 1.8s ease-out .6s infinite; }
.ig-tk-shot.is-done .ig-tk-hearts i:nth-child(2) { animation-delay: 1s; }
.ig-tk-shot.is-done .ig-tk-hearts i:nth-child(3) { animation-delay: 1.4s; }
@keyframes ig-tk-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -38px) scale(1.1) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) {
  .ig-tk-shot.is-done .ig-tk-hearts i { animation: none; opacity: 1; }
  .ig-tk-shot.is-done .ig-tk-hearts i:nth-child(1) { transform: translateY(-14px); }
}

/* An arriving email, drawn like an inbox message (not a Bondi card). */
.ig-tk-mail { width: min(100%, 280px); margin-top: 12px; padding: 14px 16px; text-align: left; background: #fff; border: 1px solid rgba(43, 38, 34, .1); border-radius: 14px; }
.ig-tk-mail-head { display: flex; align-items: center; gap: 10px; }
.ig-tk-mail-av { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; color: #fff; background: var(--av); border-radius: 50%; font-size: 12px; font-weight: 700; }
.ig-tk-mail-head div { display: flex; flex-direction: column; min-width: 0; }
.ig-tk-mail-head b { overflow: hidden; color: var(--tk-ink); font-size: 13px; font-weight: 700; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.ig-tk-mail-head small { color: var(--tk-muted); font-size: 12px; line-height: 16px; }
.ig-tk .ig-tk-mail-subj { margin: 12px 0 0; color: var(--tk-ink); font-size: 15px; font-weight: 700; line-height: 20px; }
.ig-tk .ig-tk-mail-body { margin: 4px 0 0; color: #4f473d; font-size: 13px; line-height: 19px; }
.ig-tk-mail-body u { color: #2f6fb0; text-underline-offset: 2px; }
.ig-tk-shot > .ig-tk-mail { animation-delay: .08s; }
.ig-tk-shot.is-cause .ig-tk-emoji { font-size: 36px; }
.ig-tk-shot.is-cause .ig-tk-actor { height: 44px; }

/* Bondi's reply card (what shows on Mom's frame). One system, 8pt spacing:
   mono label with a status dot, a 12px gap, the title, a 20px gap, one
   detail block. Everything on one left edge. Coral only on the dot. */
.ig-tk-ui { width: 100%; max-width: 288px; margin-top: 16px; padding: 20px; text-align: left; background: #fff; border: 1px solid rgba(43, 38, 34, .08); border-radius: 20px; }
.ig-tk-ui :where(p, ol, ul, li) { margin: 0; padding: 0; list-style: none; }
.ig-tk .ig-tk-ui-label { display: flex; align-items: center; gap: 8px; color: #8a8178; font: 600 10.5px/14px var(--ag-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; }
.ig-tk-ui-label i { width: 6px; height: 6px; background: var(--landing-coral, #e8896a); border-radius: 50%; }
.ig-tk-ui.is-ok .ig-tk-ui-label i { background: #4f9a63; }
.ig-tk-ui.is-warn .ig-tk-ui-label i { background: #d9603f; }
.ig-tk .ig-tk-ui-title { margin-top: 12px; color: var(--tk-ink); font: 500 23px/28px var(--display, "Newsreader", serif); letter-spacing: -.015em; text-wrap: balance; }
.ig-tk .ig-tk-ui-keys, .ig-tk .ig-tk-ui-acts, .ig-tk .ig-tk-ui-flags, .ig-tk .ig-tk-ui-note { margin-top: 20px; }

/* Keys: remote buttons, mono, one highlighted in ink. */
.ig-tk .ig-tk-ui-keys { display: flex; align-items: center; gap: 8px; color: #b3aaa1; }
.ig-tk-ui-keys .material-symbols-outlined { font-size: 16px; }
.ig-tk-ui kbd { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; color: var(--tk-ink); background: #fff; border: 1px solid rgba(43, 38, 34, .14); border-bottom-width: 2px; border-radius: 8px; font: 600 11px/1 var(--ag-mono, ui-monospace, monospace); letter-spacing: .06em; }
.ig-tk-ui kbd.is-hot { color: #fff; background: var(--tk-ink); border-color: var(--tk-ink); }


/* Actions on the frame: primary in ink, secondary outlined. */
.ig-tk .ig-tk-ui-acts { display: flex; gap: 8px; }
.ig-tk-ui-acts span { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; color: var(--tk-ink); border: 1px solid rgba(43, 38, 34, .16); border-radius: 999px; font-size: 14px; font-weight: 600; }
.ig-tk-ui-acts span:first-child { color: #fff; background: var(--tk-ink); border-color: var(--tk-ink); }

/* Flags: one per line, a red tick on the left edge. */
.ig-tk .ig-tk-ui-flags { display: flex; flex-direction: column; gap: 10px; }
.ig-tk-ui-flags li { position: relative; padding-left: 14px; color: var(--tk-ink); font-size: 15px; font-weight: 500; line-height: 20px; }
.ig-tk-ui-flags li::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: #d9603f; border-radius: 1px; }

.ig-tk .ig-tk-ui-note { color: #8a8178; font-size: 14px; line-height: 20px; }
.ig-tk .ig-tk-ui-title + .ig-tk-ui-note { margin-top: 8px; }
.ig-tk-shot > .ig-tk-ui { animation-delay: .08s; }

/* Voice: a small wave by the speaker's name, moving while they talk. */
.ig-tk .ig-tk-label { display: inline-flex; align-items: center; gap: 8px; }
.ig-tk-wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.ig-tk-wave i { width: 2px; height: 100%; background: currentColor; border-radius: 1px; opacity: .45; transform: scaleY(.3); transition: opacity .2s ease; }
.ig-tk-shot.is-voice .ig-tk-wave { color: var(--landing-coral, #e8896a); }
.ig-tk-shot.is-voice .ig-tk-wave i { opacity: 1; animation: ig-tk-wave .42s ease-in-out infinite alternate; }
.ig-tk-shot.is-voice .ig-tk-wave i:nth-child(2) { animation-delay: .12s; }
.ig-tk-shot.is-voice .ig-tk-wave i:nth-child(3) { animation-delay: .24s; }
.ig-tk-shot.is-voice .ig-tk-wave i:nth-child(4) { animation-delay: .06s; }
@keyframes ig-tk-wave { to { transform: scaleY(1); } }

/* Meet Bondi: the face in the headline, then (after the cards) the line that
   follows the slider. */
.ig-tk-block { margin-top: 56px; }
.ig-nowrap { white-space: nowrap; }
.ig-tk-hero-bondi { display: inline-block; width: 1.18em; height: .9em; vertical-align: -.1em; }
.ig-tk-hero-face { display: block; width: 100%; height: 100%; background: var(--landing-coral, #e8896a); border-radius: 32% / 40%; }
.ig-tk-hero-face svg { display: block; width: 100%; height: 100%; }
.ig-tk-hero-face path { fill: none; stroke: #fffdf9; stroke-width: 2.8; stroke-linecap: round; }
.ig-tk-hero-face ellipse { fill: #ff9f8e; opacity: .7; }
.ig-agency-section .ig-tk-now { margin: 14px auto 0; color: var(--landing-coral-deep, #c8664a); font: italic 400 clamp(24px, 6.4vw, 32px)/1.2 var(--display, "Newsreader", serif); letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.ig-tk-now.is-swap { animation: ig-tk-now .28s cubic-bezier(.22, 1, .36, 1); }
@keyframes ig-tk-now { from { opacity: 0; transform: translateY(8px); } }
.ig-tk-now-emoji { font-style: normal; }
@media (prefers-reduced-motion: reduce) { .ig-tk-now.is-swap { animation: none; } }
.ig-agency-section .ig-tk { margin-top: 20px; }

/* 01 on phones: the same card treatment as 02. No outer card box; title,
   then the visual in 02's stage frame (same size, background, hairline,
   radius), then the description; arrows below; the next card is a faint
   edge with its text hidden. */
@media (max-width: 959px) {
  .ig-knows-section .ig-agency-cards { margin-top: 20px; padding: 0 20px; }
  .ig-knows-section .ig-agency-cards::after { content: ""; flex: 0 0 1px; }
  .ig-knows-section .ig-agency-card { display: flex; flex: 0 0 calc(100% - 8px); flex-direction: column; padding: 0; background: none; border: 0; border-radius: 0; scroll-snap-stop: always; }
  /* 01 keeps its headline inside the card: title and visual share one frame
     (02's stage look), the description sits below it. */
  .ig-knows-section .ig-card-frame { order: 1; display: flex; flex-direction: column; overflow: hidden; background: #faf6f0; border: 1px solid rgba(43, 38, 34, .07); border-radius: 24px; transition: opacity .35s ease; }
  .ig-knows-section .ig-agency-card .card-title { position: relative; z-index: 2; margin: 0; padding: 20px 20px 0; color: #2b2622; background: #faf6f0; font: 400 20px/28px var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; text-wrap: balance; }
  .ig-knows-section .ig-agency-card .story-visual { width: 100%; height: min(320px, 85vw); aspect-ratio: auto; margin: 0; overflow: hidden; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .ig-knows-section .ig-agency-card .story-visual video { width: 100%; height: 100%; object-fit: cover; }
  .ig-knows-section .ig-agency-card .card-description { position: relative; z-index: 2; min-height: 0; margin: 0; padding: 6px 20px 16px; color: #6b625a; background: #faf6f0; font-size: 15px; line-height: 22px; letter-spacing: -.01em; }
  .ig-knows-section .ig-agency-card .card-title, .ig-knows-section .ig-agency-card .card-description { transition: opacity .25s ease; }
  .ig-knows-section .ig-agency-card .story-visual > * { transition: opacity .25s ease; }
  .ig-knows-section .ig-agency-card:not(.is-active) .ig-card-frame { opacity: .35; }
  .ig-knows-section .ig-agency-card:not(.is-active) .story-visual > * { opacity: 0; }
  /* The phone was built to bleed past the old card's padding; in the stage
     it stays inside the frame, anchored at the top so the photo and Bondi's
     reply are both in view. Flat, like 02. */
  .ig-knows-section .ig-phone-visual { width: 100%; margin: 0; }
  .ig-knows-section .ig-phone { top: 12px; width: 74%; filter: none; }
  .ig-knows-section .ig-agency-card:not(.is-active) .card-title, .ig-knows-section .ig-agency-card:not(.is-active) .card-description { color: transparent; }
  /* The video keeps its own proportions (its captions are burned in), so
     nothing gets cropped. */
  .ig-knows-section .ig-agency-card .video-story-visual { height: auto; }
  .ig-knows-section .ig-agency-card .video-story-visual video { height: auto; object-fit: contain; }
}
@media (min-width: 960px) { .ig-cards-nav { display: none; } }

/* Press logos sit right under the hero photo, tucked into its faded edge,
   so they show on the first screen. */
.ig-hero { padding-bottom: 0; }
.ig-page .press-shell { position: relative; z-index: 1; top: -44px; margin-bottom: -44px; padding-top: 0; background: transparent; }
.ig-page .press-link { opacity: .82; }

/* Product photos: Bondi stands on the same surface as the frame, beside it,
   like a small object in the room: feet on the ground (--y is where it
   touches down, in % of the 4:3 crop), a soft contact shadow, a clay-like
   body. Alive but normal: open eyes that blink and glance, a breath, and
   now and then a little hop. */
.ig-prod-fig { position: relative; }
/* The product video takes the photos' 4:3 crop. */
.glance-gallery video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--landing-cream); }
.ig-prod-bondi { position: absolute; left: var(--x); bottom: calc(100% - var(--y)); width: var(--w); aspect-ratio: 1.3; }
/* Two shadows sell the contact: a tight dark one right under it, and a soft
   cast one pushed away from the photo's light (--sx). */
.ig-prod-shadow { position: absolute; left: 10%; right: 10%; bottom: -5%; height: 13%; background: rgba(48, 30, 18, .55); border-radius: 50%; filter: blur(1.5px); animation: ig-prod-shadow 6s ease-in-out infinite; }
.ig-prod-cast { position: absolute; left: 0; right: 0; bottom: -12%; height: 34%; background: radial-gradient(closest-side, rgba(48, 30, 18, .32), rgba(48, 30, 18, 0)); border-radius: 50%; transform: translateX(var(--sx, 15%)) skewX(-20deg); filter: blur(3px); animation: ig-prod-shadow 6s ease-in-out infinite; }
.ig-prod-body { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(110% 95% at var(--lx, 30%) 18%, #f8b296 0, #ec8a6b 42%, #cf6646 100%); border-radius: 34% / 42%; box-shadow: inset 0 -12% 0 rgba(140, 50, 25, .0), inset 0 -3px 5px rgba(130, 50, 25, .35), inset 0 2px 2px rgba(255, 230, 215, .5); filter: var(--tone, none); transform-origin: 50% 100%; animation: ig-prod-life 6s ease-in-out infinite; }
.ig-prod-eyes { display: flex; gap: 22%; width: 100%; justify-content: center; margin-top: -6%; animation: ig-prod-look 6s ease-in-out infinite; }
.ig-prod-eyes i { width: 10%; aspect-ratio: .45; background: #fffdf9; border-radius: 99px; animation: ig-prod-blink 6s infinite; }
/* Breath, then a small hop around 3.6s. */
/* Bondi keeps its shape: a gentle lift and a small hop, no squash. */
@keyframes ig-prod-life { 0%, 52%, 72%, 100% { transform: none; } 30% { transform: translateY(-2%); } 62% { transform: translateY(-14%); } }
@keyframes ig-prod-shadow { 0%, 56%, 70%, 100% { opacity: 1; transform: scaleX(1); } 62% { opacity: .5; transform: scaleX(.75); } }
/* Glances: toward the frame, back, a quick look the other way. */
/* Glances: mostly at the frame (--dir: 1 when the frame is to its right,
   -1 when to its left), a quick look away, and back. */
@keyframes ig-prod-look { 0%, 8%, 100% { transform: translate(calc(var(--dir, 1) * 16%), -4%); } 40%, 50% { transform: translate(calc(var(--dir, 1) * -8%), -2%); } 58%, 92% { transform: translate(calc(var(--dir, 1) * 16%), -4%); } }
@keyframes ig-prod-blink { 0%, 8%, 11%, 78%, 81%, 100% { transform: scaleY(1); } 9.5%, 79.5% { transform: scaleY(.12); } }
@media (prefers-reduced-motion: reduce) { .ig-prod-shadow, .ig-prod-cast, .ig-prod-body, .ig-prod-eyes, .ig-prod-eyes i { animation: none; } }

/* Product / Benefits photos: the same Bondi as the hero (flat #ec8a6b,
   32%/40% corners, white open eyes, fine grain), standing in the room with
   its contact shadows. Overrides the clay and plush looks above. */
.ig-prod-bondi { aspect-ratio: 1.3; }
.ig-prod-body { display: block; background: none; box-shadow: none; border-radius: 32% / 40%; filter: none; }
.ig-prod-fur { position: absolute; inset: 0; overflow: hidden; background: #ec8a6b; border-radius: 32% / 40%; box-shadow: 0 0 1.5px 1px rgba(236, 138, 107, .55); }
.ig-prod-fur::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.12  0 0 0 0 0.05  0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 60px 60px; opacity: .5; }
.ig-prod-fur::after { content: none; }
.ig-prod-eyes { position: absolute; inset: 0; display: block; margin: 0; }
.ig-prod-eyes i { position: absolute; top: 32.5%; width: 9.6%; height: 27.5%; aspect-ratio: auto; background: #fffdf9; border-radius: 99px; box-shadow: none; }
.ig-prod-eyes i:first-child { left: 32.7%; }
.ig-prod-eyes i:last-child { left: 57.7%; }
/* Phones: keep the three product facts on one line. */
@media (max-width: 959px) {
  .ig-product-keyline { flex-wrap: nowrap; font-size: clamp(12px, 3.6vw, 15px); letter-spacing: -.01em; white-space: nowrap; }
  .ig-product-keyline span + span::before { margin: 0 clamp(5px, 1.8vw, 10px); }
}

/* "Personal Agent" patch on the hero and product photos: a round
   embroidered patch in our palette. Cream woven ground, coral border, a
   stitched ring, the hero's Bondi on top and the name in walnut italic
   serif, set straight so it reads at a glance. */
.ig-patch { position: absolute; z-index: 6; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 84px; height: 84px; overflow: hidden; text-align: center; background: #efe2cc; border-radius: 50%; box-shadow: 0 0 0 3px #c9744f, 0 2px 3px rgba(60, 35, 20, .3), 0 6px 10px rgba(60, 35, 20, .12); pointer-events: none; }
.ig-patch::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(0deg, rgba(120, 80, 50, .1) 0 1px, transparent 1px 2.4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 2.4px); }
.ig-patch::after { content: ""; position: absolute; inset: 4px; border: 1.3px dashed rgba(201, 116, 79, .85); border-radius: 50%; }
.ig-patch-bondi { position: relative; flex: none; width: 26px; height: 20px; background: #e8856a; border-radius: 32% / 40%; }
.ig-patch-bondi i { position: absolute; top: 32%; width: 9.6%; height: 30%; background: #fbf3e6; border-radius: 99px; }
.ig-patch-bondi i:first-child { left: 33%; }
.ig-patch-bondi i:last-child { left: 58%; }
.ig-patch-text { position: relative; color: #5a3d2b; font: italic 600 11.5px/1.05 var(--display, "Newsreader", serif); letter-spacing: -.005em; }
/* Hero: on the wall, clear of Mom and the frame. */
.ig-patch.is-hero { top: 13%; right: 16px; }
/* The hero photo's fade lives on the scene itself, so the patch above it
   stays fully solid. */
.ig-hero > .ig-stage { -webkit-mask-image: none; mask-image: none; }
.ig-hero > .ig-stage > .ig-scene { -webkit-mask-image: var(--ig-fade); mask-image: var(--ig-fade); }
/* Hero: stuck on the frame's top-left corner like a new-product sticker,
   tied to the device instead of floating on the wall. Its centre sits on
   the corner (frame top-left ≈ 50% / 40% of the stage, a fixed shot). */
.ig-patch.is-hero { top: 40%; left: 50%; right: auto; width: 66px; height: 66px; gap: 3px; transform: translate(-50%, -50%) rotate(-8deg); }
.ig-patch.is-hero .ig-patch-bondi { width: 20px; height: 15px; }
@media (min-width: 960px) { .ig-hero > .ig-stage > .ig-scene { -webkit-mask-image: none; mask-image: none; } }
/* Product photos: the patch sits top-left, where the eye starts. */
.ig-prod-fig .ig-patch { right: auto; left: 10px; }

/* A text-only patch where Bondi itself is already in the shot. */
.ig-patch { gap: 0; }
.ig-prod-fig .ig-patch-text { font-size: 13px; }

/* Hero: Bondi on the table in front of the frame, in the same flat form as
   the product shots (no 3D shading), with the same floor shadows. */
#igScan { container-type: inline-size; }
.ig-stage > .ig-agent.is-table { z-index: 7; left: 46.5%; top: 78.5%; width: 15%; }
.ig-agent.is-table .ig-agent-body { box-shadow: 0 0 1.5px 1px rgba(236, 138, 107, .55); }
.ig-agent.is-table .ig-prod-shadow, .ig-agent.is-table .ig-prod-cast { animation: none; transition: opacity .25s ease; }
.ig-agent.is-table .ig-prod-cast { --sx: 16%; }
.is-in-patch .ig-agent.is-table .ig-prod-shadow, .is-in-patch .ig-agent.is-table .ig-prod-cast { opacity: 0; }
/* Its patch, stuck on the frame's top-left corner: Bondi rests in the slot at the top; when it hops
   out the slot closes and the name grows and settles with a little spring. */
.ig-patch.is-hero { top: 40%; left: 50%; right: auto; width: 19cqw; height: 19cqw; gap: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(1.04); transition: transform .45s cubic-bezier(.34, 1.6, .64, 1), gap .35s ease; }
.ig-patch.is-hero.has-bondi { gap: .8cqw; transform: translate(-50%, -50%) rotate(-6deg); }
.ig-patch-slot { display: block; flex: none; width: 5.8cqw; height: 0; transition: height .35s ease; }
.ig-patch.is-hero.has-bondi .ig-patch-slot { height: 4.4cqw; }
.ig-patch.is-hero .ig-patch-text { font-size: 3.4cqw; transition: font-size .35s ease; }
.ig-patch.is-hero.has-bondi .ig-patch-text { font-size: 2.9cqw; }

/* Product photos: Bondi hops between its spot by the frame and the patch's
   slot (offsets set by ig-landing.js). It moves without changing shape. */
.ig-prod-bondi { transition: transform .5s cubic-bezier(.45, 0, .3, 1); }
.ig-prod-bondi.is-in { transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--s, .3)); }
.ig-prod-bondi.is-in .ig-prod-shadow, .ig-prod-bondi.is-in .ig-prod-cast { opacity: 0; }
.ig-prod-bondi .ig-prod-shadow, .ig-prod-bondi .ig-prod-cast { transition: opacity .25s ease; }
.ig-prod-bondi.is-in .ig-prod-body { animation-play-state: paused; }
.ig-prod-bondi.is-hopping .ig-prod-fur, .ig-prod-bondi.is-hopping .ig-prod-eyes { animation: ig-prod-arc .5s ease-in-out; }
@keyframes ig-prod-arc { 50% { translate: 0 -38%; } }
.ig-prod-fig .ig-prod-bondi { z-index: 7; }
.ig-prod-fig .ig-patch { transition: transform .45s cubic-bezier(.34, 1.6, .64, 1), gap .35s ease; transform: rotate(-3deg) scale(1.04); }
.ig-prod-fig .ig-patch.has-bondi { gap: 4px; transform: rotate(-6deg); }
.ig-prod-fig .ig-patch-slot { width: 24px; height: 0; }
.ig-prod-fig .ig-patch.has-bondi .ig-patch-slot { height: 18px; }
.ig-prod-fig .ig-patch-text { transition: font-size .35s ease; }
.ig-prod-fig .ig-patch.has-bondi .ig-patch-text { font-size: 11.5px; }
.ig-prod-fig .no-anim, .ig-prod-fig .no-anim * { transition: none !important; }

/* Product photos 2 and 3: just the patch, with Bondi living in it. Its eyes
   glance around and blink (translate and scale run as separate tracks). */
.ig-prod-fig .ig-patch.is-static { transform: rotate(-6deg); }
.ig-patch.is-static .ig-patch-bondi { width: 26px; height: 20px; }
.ig-patch.is-static .ig-patch-bondi i { animation: ig-patch-look 4.8s ease-in-out infinite, ig-patch-blink 4.8s infinite; }
.ig-prod-fig:nth-child(3) .ig-patch.is-static .ig-patch-bondi i { animation-delay: -2.1s, -1.3s; }
@keyframes ig-patch-look { 0%, 14%, 100% { translate: 0 0; } 20%, 34% { translate: 70% -8%; } 42%, 54% { translate: -70% 0; } 62%, 76% { translate: 0 -18%; } 84%, 94% { translate: 40% 10%; } }
@keyframes ig-patch-blink { 0%, 26%, 30%, 70%, 73%, 76%, 100% { scale: 1 1; } 28%, 71.5%, 74.5% { scale: 1 .12; } }
@media (prefers-reduced-motion: reduce) { .ig-patch.is-static .ig-patch-bondi i { animation: none; } }
/* Photos 2 and 3: a smaller patch, on the same top-left corner and at the
   same tilt as photo 1's. */
.ig-prod-fig .ig-patch.is-static { top: 10px; left: 10px; width: 66px; height: 66px; gap: 3px; transform: rotate(-6deg); }
.ig-patch.is-static .ig-patch-bondi { width: 20px; height: 15px; }
.ig-prod-fig .ig-patch.is-static .ig-patch-text { font-size: 9.5px; }
.ig-patch.is-static::after { inset: 3px; }
/* Smaller patches everywhere. */
.ig-prod-fig .ig-patch { width: 66px; height: 66px; }
.ig-prod-fig .ig-patch-text { font-size: 10.5px; }
.ig-prod-fig .ig-patch.has-bondi { gap: 3px; }
.ig-prod-fig .ig-patch-slot { width: 20px; }
.ig-prod-fig .ig-patch.has-bondi .ig-patch-slot { height: 15px; }
.ig-prod-fig .ig-patch.has-bondi .ig-patch-text { font-size: 9px; }
.ig-prod-fig .ig-patch::after { inset: 3px; }
.ig-prod-fig .ig-patch.is-static { width: 56px; height: 56px; gap: 2px; }
.ig-patch.is-static .ig-patch-bondi { width: 17px; height: 13px; }
.ig-prod-fig .ig-patch.is-static .ig-patch-text { font-size: 8px; }
.ig-patch.is-hero { width: 16cqw; height: 16cqw; }
.ig-patch.is-hero.has-bondi { gap: .7cqw; }
.ig-patch.is-hero .ig-patch-slot { width: 4.8cqw; }
.ig-patch.is-hero.has-bondi .ig-patch-slot { height: 3.7cqw; }
.ig-patch.is-hero .ig-patch-text { font-size: 2.9cqw; }
.ig-patch.is-hero.has-bondi .ig-patch-text { font-size: 2.5cqw; }
.ig-patch.is-hero::after { inset: 3px; }

/* ── Membership: Free vs Membership (Founder price).
   Phones stack the two plans; desktop sets them side by side. ── */
.ig-member-section { background: var(--landing-cream); }
/* Desktop: the headline and its line sit centred over the plans. */
@media (min-width: 960px) {
  /* The shared motion styles turn every .section-intro into a two-column
     grid (.8fr / 1.2fr), squeezing these one-line intros into the narrow
     column; here they are plain paragraphs. */
  .ig-page .section-intro { display: block; }
  .ig-member-section > h2,
  .ig-member-section > .section-intro { align-self: center; margin-inline: auto; text-align: center; }
  .ig-member-section > .section-intro { max-width: 46ch; }
}
.ig-member-plans { display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 560px; margin: 8px auto 0; }
.ig-plan { position: relative; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; padding: 24px 20px 22px; background: var(--landing-paper-light); border: 1.5px solid var(--landing-ink); border-radius: 22px; }
.ig-plan.is-member { padding-top: 30px; border: 2px solid var(--landing-coral); }
.ig-plan-badge { position: absolute; top: -14px; left: 20px; padding: 5px 12px; color: #fffdf9; background: var(--landing-coral); border-radius: 999px; font: 700 12px/1.2 var(--body, "DM Sans", sans-serif); letter-spacing: .04em; text-transform: uppercase; }
.ig-plan-head { display: flex; flex-direction: column; gap: 6px; }
.ig-plan-head h3 { margin: 0; color: var(--landing-ink); font: 700 26px/1.1 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; }
.ig-plan-head p { margin: 0; color: var(--landing-muted); font-size: 15px; line-height: 1.45; }
.ig-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; color: var(--landing-ink); }
.ig-plan-price b { font: 700 44px/1 var(--body, "DM Sans", sans-serif); letter-spacing: -.02em; }
.ig-plan-price span { color: var(--landing-muted); font-size: 15px; }
.ig-plan-price s { color: var(--landing-tert); font-size: 15px; }
.ig-plan-included.is-free { color: #2f6640; background: #e5f1e7; }
.ig-plan-lock { margin: -6px 0 0; color: var(--landing-muted); font-size: 14px; line-height: 1.4; }
.ig-plan-lock b { color: var(--landing-ink); }
.ig-plan-included { align-self: flex-start; margin: 0; padding: 6px 12px; color: #8c3d22; background: #fdeee8; border-radius: 8px; font: 600 14px/1.3 var(--body, "DM Sans", sans-serif); }
.ig-plan.is-member .ig-plan-included { margin-bottom: 0; }
.ig-plan-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--landing-line); list-style: none; }
.ig-plan-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--landing-ink); font-size: 16px; line-height: 1.35; }
.ig-plan-list li > span:first-of-type { flex: 1; }
.ig-plan-check { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: #3f7a52; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ig-plan-tag { flex: none; padding: 3px 8px; color: #2f6640; background: #e5f1e7; border-radius: 999px; font: 600 12px/1.3 var(--body, "DM Sans", sans-serif); }
.ig-member-note { margin: 0; color: var(--landing-muted); font-size: 14px; line-height: 1.45; text-align: center; text-wrap: balance; }
.ig-member-note b { color: var(--landing-ink); }
.ig-plan-scope { margin: 0; color: var(--landing-muted); font-size: 13px; line-height: 1.45; }
/* Phones: the two plans are swipe cards. Each card is a little narrower
   than the screen so the next one peeks in; dots below show which is up
   (ig-landing.js, Membership plans). Desktop keeps them side by side. */
@media (max-width: 959px) {
  .ig-member-plans { flex-direction: row; align-items: flex-start; gap: 12px; width: calc(100% + 40px); max-width: none; margin: 8px -20px 0; padding: 16px 20px 4px; box-sizing: border-box; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  .ig-member-plans::-webkit-scrollbar { display: none; }
  .ig-member-plans::after { content: ""; flex: 0 0 1px; }
  .ig-plan { flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always; }
  .ig-member-dots { display: flex; justify-content: center; gap: 2px; width: max-content; margin: 0 auto; padding: 6px 10px; background: rgba(43, 38, 34, .06); border-radius: 999px; }
  .ig-member-section .ig-member-dots button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; cursor: pointer; }
  .ig-member-section .ig-member-dots button::before { content: none; }
  .ig-member-section .ig-member-dots button::after { content: ""; width: 8px; height: 8px; background: #b8aea3; border-radius: 99px; transition: width .3s ease, background .3s ease; }
  .ig-member-section .ig-member-dots button[aria-current="true"] { width: 44px; }
  .ig-member-section .ig-member-dots button[aria-current="true"]::after { width: 28px; background: #6b625a; }
  .ig-member-dots button:focus-visible { outline: 2px solid var(--landing-coral, #e8896a); outline-offset: 2px; border-radius: 99px; }
}
@media (min-width: 960px) { .ig-member-dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .ig-member-section .ig-member-dots button::after { transition: none; } }

@media (min-width: 960px) {
  .ig-member-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; max-width: 960px; margin-top: 20px; }
}

/* ── Desktop ── */
@media (min-width: 960px) {
  /* Nav: one line per link, tighter spacing; on narrower desktops the least
     needed links step aside (the hero is the top, What's next is linked from
     the offer card, Blog leaves the page). */
  .ig-page .landing-nav nav { gap: clamp(14px, 1.4vw, 28px); }
  .ig-page .landing-nav nav a { white-space: nowrap; }
  /* The links use the page's own sans (the shared nav asks for Inter, which
     this page never loads), a size up, and the section being read is marked:
     darker text and a short coral line under it (ig-landing.js, Nav). */
  .ig-page .landing-nav nav a { position: relative; padding: 6px 0; color: #6b625a; font: 500 14px/1.4 var(--body, "DM Sans", sans-serif); letter-spacing: -.005em; }
  .ig-page .landing-nav nav a:hover,
  .ig-page .landing-nav nav a[aria-current="true"] { color: var(--landing-ink); }
  .ig-page .landing-nav nav a::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 18px; height: 2px; margin-left: -9px; background: var(--landing-coral); border-radius: 2px; opacity: 0; transform: scaleX(.4); transition: opacity .2s ease, transform .25s ease; }
  .ig-page .landing-nav nav a[aria-current="true"]::after { opacity: 1; transform: none; }
  .ig-page .landing-nav-cta { font: 700 14px/1 var(--body, "DM Sans", sans-serif); }
  /* A wider bar (up to 1440px) than the 1200px page: nine links and the
     button fit with room to breathe, and the button stays inside the edge. */
  .ig-page .landing-nav { column-gap: 24px; padding-inline: max(40px, calc((100vw - 1440px) / 2)); }

  /* Meet Bondi: headline, the three cards, then the slider centred
     under its line. */
  .ig-tk-block { max-width: 520px; margin: 88px auto 0; }
  .ig-tk-block .ig-tk { margin-top: 28px; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .ig-page .landing-nav { grid-template-columns: 150px 1fr auto; column-gap: 16px; }
  .ig-page .landing-nav nav { gap: 12px; }
  .ig-page .landing-nav nav a { font-size: 13px; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .ig-page .ea-offer-card .ea-offer-col-b { padding-inline: 28px; }
  .ig-page .ea-offer-card .ig-offer-cancel { font-size: 13px; }
}
@media (min-width: 960px) and (max-width: 1319px) {
  .ig-page .landing-nav nav { gap: 14px; }
  .ig-page .landing-nav nav a[href="#bondi-scan"],
  .ig-page .landing-nav nav a[href="#what-happens-next"],
  .ig-page .landing-nav nav a[href="/blog/"] { display: none; }
}

/* Hero video (replaces the Bondi scan scene): full bleed behind the copy.
   A warm scrim darkens the side the copy sits on (bottom on phones, left on
   desktop) and leaves the rest of the shot clear. */
.ig-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100svh - var(--ig-ticker-h) - var(--ig-nav-h));
  padding: 32px 22px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #2b221b;
  isolation: isolate;
}
.ig-hero > .ig-hero-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  aspect-ratio: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.ig-hero-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.ig-hero-play {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  background: rgba(30, 22, 16, .85);
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.ig-hero-play[hidden] { display: none; }
.ig-hero-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Soft film grain over the video (under the scrim): fine, low contrast. */
.ig-hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .28;
  mix-blend-mode: soft-light;
}
.ig-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(30, 22, 16, .2) 0, rgba(30, 22, 16, 0) 14%),
    linear-gradient(0deg, rgba(30, 22, 16, .86) 0, rgba(30, 22, 16, .62) 22%, rgba(30, 22, 16, .18) 42%, rgba(30, 22, 16, 0) 54%);
}
.ig-hero .ig-copy { margin: 0; text-align: left; }
.ig-hero h1,
.ig-hero h1 span { color: #fff; text-shadow: 0 1px 18px rgba(30, 22, 16, .35); }
.ig-hero h1 em { color: #ffc2a8; }
.ig-hero .ig-sub { margin: 12px 0 0; color: rgba(255, 255, 255, .88); }
/* The press row no longer tucks into a faded photo edge. */
.ig-page .press-shell { top: 0; margin-bottom: 0; padding-top: 18px; }
@media (min-width: 960px) {
  .ig-hero {
    display: flex;
    justify-content: center;
    min-height: calc(100svh - var(--ig-ticker-h) - var(--ig-nav-h));
    padding: 64px max(40px, calc((100vw - 1200px) / 2));
  }
  .ig-hero .ig-copy { max-width: 560px; align-self: flex-start; }
  .ig-hero-video video { object-position: 50% 40%; }
  .ig-hero-video::after {
    background:
      linear-gradient(90deg, rgba(30, 22, 16, .78) 0, rgba(30, 22, 16, .52) 32%, rgba(30, 22, 16, .12) 58%, rgba(30, 22, 16, 0) 72%),
      linear-gradient(0deg, rgba(30, 22, 16, .3) 0, rgba(30, 22, 16, 0) 30%);
  }
}

/* Phones: the headline sits bottom-left with the CTA. Its size follows the
   screen width so every rotating phrase stays on one line (the longest,
   "🖼️ brings your photos into their day", is ~13.4em wide with its emoji);
   the phrase slot is then one line tall and the gap to the CTA never
   changes. text-wrap-mode, not white-space: the text-wrap: balance below
   would reset white-space's wrap mode. */
@media (max-width: 959px) {
  .ig-hero h1.ig-rebus { font-size: min(32px, calc((100vw - 44px) / 13.8)); line-height: 1.08; }
  .ig-hero h1.ig-rebus .ig-rebus-phrase { white-space: nowrap; }
  .ig-hero h1.ig-rebus .ig-rebus-phrase, .ig-hero h1.ig-rebus .ig-rebus-phrase[data-role] { text-wrap-mode: nowrap; }
}

/* Reservation terms, right under the headline. */
.ig-hero-promises {
  margin: 16px 0 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .9);
  font: 500 13px/1.2 var(--body, "DM Sans", sans-serif);
}
.ig-hero-promises-track { display: flex; width: max-content; }
.ig-hero-promises ul { display: flex; flex: none; gap: 22px; margin: 0; padding: 0 22px 0 0; list-style: none; }
.ig-hero-promises ul[aria-hidden] { display: none; }
.ig-hero-promises li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ig-hero-promises .material-symbols-outlined { font-size: 16px; opacity: .85; }
/* Phones: the three terms run as one line, scrolling, with soft edges. */
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
  .ig-hero-promises {
    margin-right: -22px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 82%, transparent);
  }
  .ig-hero-promises ul[aria-hidden] { display: flex; }
  .ig-hero-promises-track { animation: ig-promises 14s linear infinite; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .ig-hero-promises ul { flex-wrap: wrap; gap: 8px 16px; }
}
@keyframes ig-promises { to { transform: translateX(-50%); } }

/* The Reserve pill sits under the reservation terms on the first screen;
   the top bar's pill fades in only on the second screen, once the hero has
   scrolled away (ig-landing.js sets .ig-nav-cta-wait). */
.ig-hero-cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  margin-top: 18px;
  padding: 0 24px;
  color: #fff;
  background: var(--landing-coral);
  border-radius: 999px;
  font: 700 16px/1 var(--body, "DM Sans", sans-serif);
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.ig-hero-cta:hover { filter: brightness(1.06); }
.ig-hero-cta:active { transform: scale(.98); }
.ig-hero-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (min-width: 960px) {
  .ig-hero-cta { min-height: 48px; margin-top: 24px; padding: 0 26px; }
}
.ig-page .landing-nav-cta { transition: opacity .25s ease, visibility .25s; }
.ig-nav-cta-wait .ig-page .landing-nav-cta { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ig-hero-cta, .ig-page .landing-nav-cta { transition: none; }
}

/* Phones: a compact Reserve pill (it scrolls to the offer card, never to
   checkout) sits beside the menu button. The menu drops down under the bar. */
.ig-nav-toggle { display: none; }
.ig-page .landing-nav-brand .ig-logo-light { display: none; }
/* The site-wide button::before grain would paint a grey disc on this bare icon button. */
.ig-nav-toggle::before { content: none; }
.landing-nav .ig-nav-menu[hidden] { display: none; }
@media (max-width: 959px) {
  .ig-page .landing-nav-cta { min-height: 34px; margin-left: auto; padding: 0 14px; font-size: 13px; }
  .ig-nav-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-left: 6px;
    margin-right: -8px;
    padding: 0;
    color: var(--landing-ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
  .ig-nav-toggle .material-symbols-outlined { font-size: 24px; }
  .ig-nav-toggle:focus-visible { outline: 2px solid var(--landing-coral); outline-offset: 2px; }
  .landing-nav .ig-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 6px 16px 14px;
    background: rgba(248, 245, 240, .98);
    border-bottom: 1px solid var(--landing-line);
    box-shadow: 0 18px 30px rgba(58, 48, 40, .12);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .ig-nav-menu a {
    padding: 13px 4px;
    color: var(--landing-ink);
    border-bottom: 1px solid var(--landing-line);
    font: 600 16px var(--body, "DM Sans", sans-serif);
    text-decoration: none;
  }
  .ig-nav-menu a:last-child { border-bottom: 0; }
}
@media (min-width: 960px) { .landing-nav .ig-nav-menu { display: none !important; } }

/* A slimmer top bar: 48px on phones, 60px on desktop. */
.ig-page .landing-nav { min-height: var(--ig-nav-h); padding-top: 4px; padding-bottom: 4px; }
.ig-page .landing-nav-brand { width: 104px; height: 30px; }
.ig-page .landing-nav-brand img { width: 110px; height: 62px; }
@media (min-width: 960px) {
  .ig-page .landing-nav { padding-top: 8px; padding-bottom: 8px; }
  .ig-page .landing-nav-brand { width: 132px; height: 38px; }
  .ig-page .landing-nav-brand img { width: 140px; height: 79px; }
  .ig-page .landing-nav-cta { min-height: 38px; }
}

/* Hero rebus headline, copied from muse.ai: the coral lead stays; the white
   line rolls through what the frame does. ig-landing.js sets each word's
   enter/exit progress (0 to 1); words leave upward and arrive from below,
   0.3em of travel. All phrases share one grid cell, so the slot holds the
   longest one's height. The `.ig-hero h1 span` block rule is undone for the
   words, which sit inline. */
.ig-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ig-hero h1.ig-rebus .ig-sr { position: absolute; display: block; }
.ig-hero h1.ig-rebus .ig-rebus-lead { display: block; color: #ffc2a8; }
/* Bondi right after "HeyBondi": the Product section's plush, sized to the
   text, sitting on the baseline, with black eyes like the real one. */
.ig-hero h1.ig-rebus .ig-title-bondi { position: relative; left: auto; bottom: auto; display: inline-block; width: 1.05em; margin: 0 .04em 0 .16em; vertical-align: -.08em; }
/* Livelier eyes than the room Bondis: a white glint in each, glances that
   wander (left, right, up toward the photo), and a quick double blink. */
.ig-title-bondi .ig-prod-eyes { animation: ig-title-look 5.2s cubic-bezier(.5, 0, .2, 1) infinite; }
.ig-title-bondi .ig-prod-eyes i { overflow: hidden; background: #1f1b18; animation: ig-title-blink 5.2s infinite; }
.ig-title-bondi .ig-prod-eyes i { top: 30%; width: 12.5%; height: 33%; }
.ig-title-bondi .ig-prod-eyes i:first-child { left: 30%; }
.ig-title-bondi .ig-prod-eyes i:last-child { left: 57.5%; }
.ig-title-bondi .ig-prod-eyes i::after { content: ""; position: absolute; top: 14%; left: 22%; width: 52%; aspect-ratio: 1; background: #fffdf9; border-radius: 50%; }
@keyframes ig-title-look {
  0%, 10% { transform: translate(0, 0); }
  14%, 30% { transform: translate(18%, -6%); }
  34%, 44% { transform: translate(-16%, -2%); }
  48%, 62% { transform: translate(4%, -12%); }
  66%, 100% { transform: translate(0, 0); }
}
@keyframes ig-title-blink {
  0%, 21%, 25%, 70%, 73.5%, 76%, 79.5%, 100% { transform: scaleY(1); }
  23%, 71.8%, 77.8% { transform: scaleY(.1); }
  13%, 33%, 47% { transform: scaleY(.88) scaleX(1.12); }
  15%, 35%, 49% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .ig-title-bondi .ig-prod-eyes, .ig-title-bondi .ig-prod-eyes i { animation: none; } }
.ig-hero h1.ig-rebus .ig-rebus-slot { display: grid; margin-top: 2px; }
.ig-hero h1.ig-rebus .ig-rebus-phrase { --travel: .3em; display: block; grid-area: 1 / 1; justify-self: start; color: #fff; visibility: hidden; text-wrap: balance; }
.ig-hero h1.ig-rebus .ig-rebus-phrase.is-on, .ig-hero h1.ig-rebus .ig-rebus-phrase[data-role] { visibility: visible; }
.ig-hero h1.ig-rebus .ig-rebus-word { display: inline-block; color: inherit; }
/* The emoji that leads each phrase, a touch smaller than the words. */
.ig-hero h1.ig-rebus .ig-rebus-word:first-child { font-size: .86em; }
.ig-hero h1.ig-rebus .ig-rebus-phrase[data-role="outgoing"] .ig-rebus-word { opacity: calc(1 - var(--x, 0)); translate: 0 calc(-1 * var(--travel) * var(--x, 0)); }
.ig-hero h1.ig-rebus .ig-rebus-phrase[data-role="incoming"] .ig-rebus-word { opacity: var(--e, 0); translate: 0 calc(var(--travel) * (1 - var(--e, 0))); }

/* ── Pain point (#pain-calls): the adult child's iPhone Lock Screen with
   three calls from Mom, drawn after iOS 27's default look: clear Liquid Glass
   platters (light glass, dark text, large radius) gathered at the bottom
   above the flashlight and camera buttons. Same bezel and screen insets as
   the 01 phone card; inside, sizes are in cqw of the phone. ── */
.ig-pain-section { align-items: center; padding-bottom: 72px; }
/* The phone runs past the crop; its lower edge (buttons, home indicator) feathers out. */
.ig-pain-crop { flex: 0 0 auto; width: min(290px, 76vw); height: calc(min(290px, 76vw) * 1.63); overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent); mask-image: linear-gradient(180deg, #000 90%, transparent); }
.ig-pain-phone { position: relative; width: 100%; aspect-ratio: 511 / 968; container-type: inline-size; }
.ig-pain-screen { position: absolute; z-index: 1; top: 5.99%; left: 11.55%; width: 76.9%; height: 88.02%; display: flex; flex-direction: column; overflow: hidden; border-radius: 8.2cqw; color: #2b2622; background: url("/founder-edition/assets/lockscreen-cream.webp") center / cover, #f3eee5; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.ig-pain-status { display: flex; flex: 0 0 auto; height: 9.5cqw; align-items: center; justify-content: flex-end; padding: 1.6cqw 6.5cqw 0; }
.ig-pain-status img { width: 15.5cqw; height: auto; }
.ig-pain-clock { display: flex; flex-direction: column; align-items: center; margin-top: 1cqw; }
.ig-pain-clock span { font-size: 3.6cqw; font-weight: 600; opacity: .72; }
.ig-pain-clock b { font: 600 20cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Notifications sit at the bottom; iOS puts the newest on top. The markup
   stays in time order for screen readers. */
.ig-pain-list { display: flex; flex-direction: column-reverse; margin: auto 0 0; padding: 0 2.4cqw; list-style: none; }
.ig-pain-note { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1); }
.ig-pain-note-in { display: flex; align-items: center; min-height: 0; overflow: hidden; gap: 3cqw; margin-top: 1.8cqw; padding: 3.2cqw 3.6cqw 3.2cqw 3cqw; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(6px) saturate(1.4); backdrop-filter: blur(6px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 1cqw 3cqw rgba(43, 38, 34, .06); border-radius: 7cqw; transition: opacity .2s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
/* iOS communication notification: the caller's round photo with a small
   Phone app badge on its lower right. */
.ig-pain-avatar { position: relative; flex: 0 0 auto; width: 10.5cqw; height: 10.5cqw; }
.ig-pain-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ig-pain-badge { position: absolute; right: -1cqw; bottom: -1cqw; display: grid; width: 4.6cqw; height: 4.6cqw; place-items: center; background: linear-gradient(180deg, #5df27c, #23c043); border-radius: 1.2cqw; }
.ig-pain-badge svg { width: 3cqw; height: 3cqw; fill: #fff; }
.ig-pain-body { flex: 1; min-width: 0; }
.ig-pain-body p { margin: 0; }
.ig-pain-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; font-size: 3.7cqw; line-height: 1.25; }
.ig-pain-head b { font-weight: 600; }
.ig-pain-head time { flex: 0 0 auto; color: rgba(43, 38, 34, .5); font-size: 3.1cqw; }
.ig-pain-kind { color: rgba(43, 38, 34, .6); font-size: 3.2cqw; line-height: 1.3; }
.ig-pain-text { margin-top: .3cqw !important; font-size: 3.7cqw; line-height: 1.3; }
/* Flashlight and camera, then the home indicator. */
.ig-pain-dock { display: flex; flex: 0 0 auto; justify-content: space-between; padding: 4.5cqw 9cqw 0; }
.ig-pain-dock span { display: grid; width: 12.5cqw; height: 12.5cqw; place-items: center; background: rgba(43, 38, 34, .07); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(43, 38, 34, .06); border-radius: 50%; font-size: 5.6cqw; }
.ig-pain-home { display: block; flex: 0 0 auto; width: 34cqw; height: 1.3cqw; margin: 4cqw auto 2.4cqw; background: #2b2622; border-radius: 1cqw; }
/* JS arms the screen, then pops each call in (a small overshoot, like an
   iOS banner landing); .is-clearing fades the stack before the loop restarts. */
.ig-pain-phone.is-armed .ig-pain-note:not(.is-in) { grid-template-rows: 0fr; }
.ig-pain-phone.is-armed .ig-pain-note:not(.is-in) .ig-pain-note-in { margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; transform: translateY(-4cqw) scale(.88); }
.ig-pain-phone.is-clearing .ig-pain-list { opacity: 0; transition: opacity .4s ease; }

/* ── Meet Bondi cards: four swipe cards (Apple-style highlights). Title and
   body, then one visual framed its own way. Mom's frame is the walnut frame
   at a slight angle (bondi-frame-angle.webp, 864×682, screen cut out; the
   screen box below is that cutout's bounds, clipped to its slant) with
   Bondi sitting at its corner. Bondi's words are plain quotes, never
   bubbles. The cards stack top to bottom; ig-landing.js (Meet Bondi cards)
   tracks which one is on screen. ── */
.ig-mb { width: calc(100% + 40px); margin: 28px -20px 0; }
/* Narrow, short cards: each fits between the top bar and the reserve bar,
   so a card reads in one look. */
.ig-mb-track { display: flex; flex-direction: column; gap: 14px; width: min(100% - 64px, 340px); margin: 0 auto; }
.ig-mb-card { flex: none; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; padding: 24px 18px 22px; color: #2b2622; text-align: center; background: #fffdf9; border-radius: 28px; }
.ig-mb .ig-mb-title { margin: 0; font: 600 19px/1.25 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; text-wrap: balance; }
.ig-mb-visual { display: flex; flex-direction: column; align-items: center; margin-block: auto; padding-top: 16px; }

/* Mom's frame: the screen sits under the walnut frame; text scales with it. */
.ig-mb-device { position: relative; width: 100%; aspect-ratio: 864 / 682; }
.ig-mb-device.is-lg { width: min(100%, 290px); }
.ig-mb-screen { position: absolute; left: 12.04%; top: 15.69%; width: 73.96%; height: 66.71%; clip-path: polygon(4.07% 0, 100% .22%, 96.56% 100%, 0 92.75%); container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5% 6%; box-sizing: border-box; color: #f6efe4; text-align: center; background: #3a2f29; }
/* Spacing inside the screen is in cqw of the screen itself (its own padding
   and gap would resolve against the page, so they stay in %). */
.ig-mb-screen > * + * { margin-top: 3cqw; }
.ig-mb-screen .material-symbols-outlined { font-size: 15cqw; line-height: 1; }
.ig-mb-screen b { font: 500 12.5cqw/1.02 var(--display, "Newsreader", serif); letter-spacing: -.01em; }
.ig-mb-screen small { font-size: 7cqw; line-height: 1.3; opacity: .8; }
.ig-mb-frame { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(60, 38, 20, .18)); pointer-events: none; user-select: none; }
/* Card 2: the steps on her frame, her devices underneath. */
.ig-mb-kicker { font: 600 11px/1.2 var(--ag-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: #8a7f74; }
.ig-mb-screen .ig-mb-kicker { align-self: flex-start; font-size: 5cqw; color: #f6efe4; opacity: .65; }
.ig-mb-steps { display: flex; flex-direction: column; gap: 3.6cqw; align-self: stretch; margin: 1cqw 0 0; padding: 0; list-style: none; text-align: left; }
.ig-mb-steps li { display: flex; align-items: center; gap: 3cqw; font-size: 6.4cqw; line-height: 1.25; opacity: .55; }
.ig-mb-steps li.is-now { font-weight: 600; opacity: 1; }
.ig-mb-steps i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 8cqw; height: 8cqw; border: 1.5px solid currentColor; border-radius: 50%; font: 600 4.4cqw/1 var(--body, "DM Sans", sans-serif); font-style: normal; }
.ig-mb-steps li.is-now i { color: #3a2f29; background: #f6efe4; border-color: #f6efe4; }
.ig-mb-steps kbd { padding: .6cqw 1.8cqw; border: 1.5px solid currentColor; border-radius: 1.6cqw; font: 600 4.6cqw/1 var(--ag-mono, ui-monospace, monospace); }
.ig-mb-devices { display: flex; justify-content: space-between; align-self: stretch; margin: 30px 6px 0; padding: 0; list-style: none; }
.ig-mb-devices li { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #a39a90; font-size: 11px; font-weight: 500; }
.ig-mb-devices .material-symbols-outlined { font-size: 26px; }
.ig-mb-devices li.is-on { color: #2b2622; }

.ig-mb-tvflag { position: absolute; z-index: 3; top: 60px; left: 50%; display: none; width: 132px; margin-left: -66px; }
.ig-mb-tvflag img { display: block; width: 100%; height: auto; }
.ig-mb-tvflag svg { position: absolute; top: -10px; right: -12px; width: 38px; height: 38px; overflow: visible; }
.ig-mb-tvflag circle { fill: #c2410c; stroke: #1f1b18; stroke-width: 3; }
.ig-mb-tvflag path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ig-mb-tvhelp.is-gsap .ig-mb-tvflag { display: block; visibility: hidden; }

/* Cards 3 and 4: the flag (an envelope with a "!") pops over the frame
   first; it only shows while GSAP plays the card. */
.ig-mb-flag { position: absolute; z-index: 3; top: 64px; left: 50%; display: none; width: 72px; margin-left: -36px; }
.ig-mb-flagui.is-gsap .ig-mb-flag { display: block; visibility: hidden; }
.ig-mb-flag svg { display: block; width: 100%; height: auto; overflow: visible; }
.ig-mb-flag rect, .ig-mb-flag path { fill: none; stroke: #1f1b18; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ig-mb-flag rect { fill: #f6f1e7; }
.ig-mb-flag-hatch path { stroke-width: 2; opacity: .55; }
.ig-mb-flag .ig-mb-flag-dot { fill: #c2410c; stroke: #1f1b18; stroke-width: 4; }
.ig-mb-flag .ig-mb-flag-mark { stroke: #fff; stroke-width: 4.5; }

/* Bondi speaks: the Product section's Bondi beside a plain quote, never a
   bubble. */
.ig-mb .ig-mb-said { display: flex; align-items: center; gap: 12px; align-self: stretch; margin: 26px 4px 0; font: 500 17px/1.3 var(--display, "Newsreader", serif); text-align: left; }
.ig-mb-said .ig-prod-bondi { position: relative; left: auto; bottom: auto; flex: none; width: 48px; }

/* Desktop: the cards run side by side, edge to edge, and scroll sideways.
   The row starts in line with the page content; both edges feather into
   the section, so the next card peeks in without a hard cut. */
.ig-mb-nav { display: none; }
@media (min-width: 960px) {
  /* 1780px = five 340px cards and four 20px gaps: when the screen has room
     for all five, the row sits centred and the arrows go away. */
  .ig-mb { --mb-inset: max(96px, calc((100vw - 1780px) / 2)); --mb-fade: 96px; width: 100vw; margin: 48px 0 0 calc(50% - 50vw); }
  .ig-mb-track { flex-direction: row; align-items: stretch; gap: 20px; width: auto; margin: 0; padding: 4px var(--mb-inset) 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--mb-inset); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--mb-fade), #000 calc(100% - var(--mb-fade)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--mb-fade), #000 calc(100% - var(--mb-fade)), transparent 100%); }
  .ig-mb-track::-webkit-scrollbar { display: none; }
  .ig-mb-card { width: 340px; scroll-snap-align: start; }
  .ig-mb-nav { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
  .ig-mb-nav[hidden] { display: none; }
  .ig-mb-nav button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; color: #2b2622; background: #fffdf9; border: 1px solid rgba(43, 38, 34, .12); border-radius: 50%; box-shadow: none; cursor: pointer; transition: opacity .2s ease, background-color .2s ease; }
  .ig-mb-nav button:hover:not(:disabled) { background: #fff; }
  .ig-mb-nav button:disabled { opacity: .35; cursor: default; }
  .ig-mb-nav button:focus-visible { outline: 2px solid #2b2622; outline-offset: 3px; }
  .ig-mb-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) { .ig-mb-track { scroll-behavior: smooth; } }

/* Trust line under the cards: small and quiet. The lock leads the promise
   line; the detail sits beneath in lighter text. Centered, no box. */
.ig-mb .ig-mb-trust { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(100% - 64px, 340px); margin: 22px auto 0; color: #8a7f74; text-align: center; }
.ig-mb-trust b { display: inline-flex; align-items: center; gap: 5px; color: #4a423b; font: 600 13.5px/1.35 var(--body, "DM Sans", sans-serif); }
.ig-mb-trust svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--landing-coral, #e8896a); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ig-mb-trust span { font: 400 13px/1.4 var(--body, "DM Sans", sans-serif); }

/* A line break only on phones. */
@media (min-width: 960px) { .ig-br-phone { display: none; } }
.ig-mb .ig-prod-bondi { transition: none; }

/* Card 1: the product film fills a 9:16 card, its own shape (nothing crops). The small speaker button sits bottom right. */
.ig-mb-card.ig-mb-video { position: relative; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; background: #2b2622; }
.ig-mb-video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ig-mb .ig-mb-sound { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 0; min-height: 0; padding: 0; color: #fff; background: rgba(20, 14, 10, .45); border: 0; border-radius: 50%; box-shadow: none; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* A 44px tap target around the 36px dot. */
.ig-mb .ig-mb-sound::before { content: ""; position: absolute; inset: -4px; }
.ig-mb-sound .material-symbols-outlined { font-size: 20px; }
.ig-mb-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Cards 2-4: Mom's frame, hand-drawn and flat (the #igSketchFrame symbol in
   the page). Its screen is HTML laid over the symbol's dark screen rect
   (x20 y20 260x168 of 300x220); text sizes follow the screen's width. */
.ig-sf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ig-mb-sketch { position: relative; padding-top: 18px; }
.ig-mb-sketch .ig-mb-said { margin-top: 18px; }
.ig-sf { position: relative; align-self: stretch; aspect-ratio: 300 / 220; }
.ig-sf-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.ig-sf-screen { position: absolute; left: 6.67%; top: 9.09%; width: 86.67%; height: 76.36%; box-sizing: border-box; container-type: inline-size; overflow: hidden; color: #f6efe4; text-align: left; }
.ig-mb .ig-sf-screen :where(p) { margin: 0; }
.ig-mb .ig-sf-head { font: 500 14cqw/1.02 var(--display, "Newsreader", serif); letter-spacing: -.01em; }
.ig-sf-icon { display: block; fill: none; stroke: #f6efe4; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ig-sf-icon.is-tv { width: 24cqw; margin-bottom: 2.6cqw; }
.ig-sf-icon.is-tv text { fill: #f6efe4; stroke: none; font: 700 7.2px/1 var(--ag-mono, ui-monospace, monospace); letter-spacing: .04em; text-anchor: middle; }
.ig-sf-icon.is-warn, .ig-sf-icon.is-cal { width: 11cqw; margin-bottom: 1.6cqw; }
.ig-sf-icon.is-warn { stroke: #f39a7c; stroke-width: 3.4; }
.ig-sf-icon.is-cal { stroke-width: 3.2; }
.ig-mb .ig-sf-line { margin-top: 1.2cqw; color: #f6efe4; font-size: 7.4cqw; font-weight: 500; line-height: 1.2; }
/* The one fact she needs, biggest on the screen. */
.ig-mb .ig-sf-key { margin-top: .6cqw; color: #fff8ee; font: 700 15.5cqw/1.02 var(--body, "DM Sans", sans-serif); letter-spacing: -.02em; white-space: nowrap; }
.ig-mb .ig-sf-key + .ig-sf-line { margin-top: 1.8cqw; }
.ig-mb .ig-sf-step + .ig-sf-key { margin-top: 3cqw; }
.ig-sf-icon.is-check { width: 16cqw; margin-bottom: 2.4cqw; stroke: #9fd8a9; stroke-width: 3; }

/* Card 2: one page at a time, turned like a book page: the page that was up
   (.is-turn) folds away over its left edge, darkening as it goes, and shows
   the next page (.is-on) underneath. The pager marks the page. Without JS
   the first step shows. */
.ig-sf-screen.is-paging { perspective: 900px; }
.ig-sf-page { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8cqw 9cqw; text-align: center; background: #2b2622; visibility: hidden; transform-origin: 0 50%; backface-visibility: hidden; }
.ig-sf-page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); opacity: 0; pointer-events: none; }
.ig-sf-page.is-on { z-index: 1; visibility: visible; }
.ig-sf-page.is-turn { z-index: 2; visibility: visible; animation: igSfTurn .55s cubic-bezier(.45, .05, .35, 1) forwards; box-shadow: 6px 0 18px rgba(0, 0, 0, .45); }
.ig-sf-page.is-turn::after { animation: igSfShade .55s ease-in forwards; }
@keyframes igSfTurn { from { transform: rotateY(0); } to { transform: rotateY(-100deg); visibility: hidden; } }
@keyframes igSfShade { to { opacity: 1; } }
.ig-sf-screen:not(.is-paging) .ig-sf-page[data-page="1"] { visibility: visible; }
.ig-mb .ig-sf-step { display: flex; align-items: center; gap: 3cqw; font: 500 9cqw/1.1 var(--display, "Newsreader", serif); }
.ig-sf-step i { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 11cqw; height: 11cqw; color: #2b2622; background: #f6efe4; border-radius: 50%; font: 700 6.4cqw/1 var(--body, "DM Sans", sans-serif); font-style: normal; }
/* The button to press, biggest on the screen. */
.ig-sf-kbd { display: inline-block; margin-top: 3.6cqw; padding: 1.6cqw 6cqw 2cqw; color: #fff8ee; border: 1cqw solid currentColor; border-radius: 4cqw; font: 700 15cqw/1 var(--ag-mono, ui-monospace, monospace); letter-spacing: .02em; }
.ig-sf-pager { position: absolute; z-index: 3; left: 0; right: 0; bottom: 4.4cqw; display: flex; justify-content: center; gap: 1.6cqw; }
.ig-sf-pager i { width: 1.8cqw; height: 1.8cqw; background: rgba(246, 239, 228, .3); border-radius: 99px; transition: width .3s ease, background .3s ease; }
.ig-sf-pager i.is-on { width: 5.4cqw; background: #f6efe4; }
.ig-sf-screen:not(.is-paging) .ig-sf-pager i:nth-child(2) { width: 5.4cqw; background: #f6efe4; }

/* Cards 3 and 4: Bondi's own screen, only the key facts in big type: an
   icon, what happened, what to do or when, the outcome. Rows fill in one at a time while GSAP
   plays ([data-row] gains .is-in), then the outcome ([data-end]). */
.ig-sf-screen.is-ui { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4cqw 6cqw; text-align: center; }
/* cqw on the container itself resolves against the viewport (no outer
   container), so 4cqw 6cqw became ~58px 86px on a 1440px window and squeezed
   the screen's text to a third of its size. % padding resolves against .ig-sf,
   and the screen is 86.67% of it: 3.47% / 5.2% = 4cqw / 6cqw of the screen.
   Desktop only; phones keep their current look. */
@media (min-width: 960px) {
  .ig-sf-screen.is-ui { padding: 3.47% 5.2%; }
  /* Side by side, the three sketch cards centre frame + quote together, so a
     three-line quote or a one-line title shifted its frame. Reserve three
     quote lines and two title lines so the frames sit on one line. */
  .ig-mb-sketch .ig-mb-said { min-height: 3.9em; }
  .ig-mb-card:has(.ig-mb-sketch) .ig-mb-title { min-height: 2.5em; }
}
.ig-mb .ig-sf-done { display: flex; align-items: center; gap: 2cqw; margin-top: 3.4cqw; padding: 1.6cqw 4.2cqw 1.6cqw 3.2cqw; color: #1f2a22; background: #a6dcb0; border-radius: 99px; font-size: 6cqw; font-weight: 700; }
.ig-sf-done svg { width: 6.4cqw; height: 6.4cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ig-mb-flagui.is-gsap [data-row], .ig-mb-flagui.is-gsap [data-end] { opacity: 0; transform: translateY(1.6cqw); transition: opacity .3s ease, transform .35s ease; }
.ig-mb-flagui.is-gsap .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ig-sf-page.is-turn { display: none; } .ig-sf-pager i { transition: none; } }

/* Texture: a warm grain over the frame's paper body, and a fine light grain
   plus a soft sheen over the screen, so neither reads as flat fill. */
.ig-sf::before { content: ""; position: absolute; inset: 1.4% 1%; z-index: 0; border-radius: 5.2% / 7.1%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.24  0 0 0 0 0.14  0 0 0 1.3 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 120px 120px; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
.ig-sf-art { z-index: -1; }
.ig-sf { isolation: isolate; }
.ig-sf-screen { z-index: 1; border-radius: 2.3% / 3.5%; }
.ig-sf-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; mix-blend-mode: screen; background: radial-gradient(120% 90% at 18% 0%, rgba(255, 244, 228, .09), transparent 55%), url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .88  0 0 0 1.2 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: auto, 120px 120px; opacity: .55; pointer-events: none; }

/* Card 5 (Active Memory): Leo on one kitchen photo, marked in Bondi's chalk
   (like the Bondi scan) on Mom's hand-drawn frame (the photo fills the
   screen, cropped from the left), his card growing in three beats (GSAP,
   ig-landing.js): who's who, what matters to him, how his story grows; then
   Bondi uses it. Without GSAP it rests on step 3, fully marked. */
.ig-mb-memory { padding-top: 14px; }
.ig-mb-mem-stage { position: relative; display: block; align-self: stretch; }
.ig-mb-mem-frame { display: block; }
.ig-mb-mem-photo { display: block; }
.ig-mb-mem-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
/* Keep the grain light over the photo. */
.ig-mb-mem-photo::after { opacity: .3; }
.ig-mb-mem-chalk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ig-mb-mem-chalk path { fill: none; stroke: #fffaf0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Same hand as the hero and the Bondi scan (.ig-scribble). */
.ig-mb-mem-scribble { position: absolute; color: #fffaf0; font: 400 18px/1 var(--landing-handwritten); white-space: nowrap; text-shadow: 0 1px 2px rgba(20, 12, 8, .75), 0 0 10px rgba(20, 12, 8, .35); }
/* Positions live here, not inline: GSAP clears inline styles each round. */
.ig-mb-mem-scribble.is-small { font-size: 14px; }
.ig-mb-mem-scribble[data-scribble="sarah"] { left: 14%; top: 5%; rotate: -6deg; }
.ig-mb-mem-scribble[data-scribble="leo"] { left: 70%; top: 6%; rotate: -6deg; }
.ig-mb-mem-scribble[data-scribble="bowl"] { left: 43%; top: 66%; rotate: -6deg; }
.ig-mb-mem-scribble[data-scribble="time"] { left: 3%; top: 72%; rotate: -4deg; }
.ig-mb-mem-scribble[data-scribble="place"] { left: 3%; top: 84%; rotate: -4deg; }
.ig-mb-memory.is-gsap .ig-mb-mem-card { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 11px 12px 12px; text-align: left; background: #fff; border: 1px solid rgba(43, 38, 34, .1); border-radius: 14px; }
.ig-mb-mem-who { display: flex; align-items: center; gap: 10px; }
.ig-mb-mem-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(236, 138, 107, .5); }
.ig-mb-mem-who b { color: #2b2622; font-size: 16px; }
.ig-mb-mem-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ig-mb-mem-tags i { padding: 4px 9px; color: #9a4a2f; background: #fbeee8; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 600; }
/* Leo's photos, as photos: one at first, then more join. */
.ig-mb-mem-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ig-mb-mem-thumb { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 6px; object-fit: cover; }
.ig-mb-mem-count { color: #3f8f5a; font-style: normal; font-weight: 600; white-space: nowrap; }
.ig-mb-memory .ig-mb-said { margin-top: 16px; }

/* Section rhythm, like /instagram: after the dark hero, sections alternate
   warm cream and paper white so each one reads as its own block; the final
   CTA stays coral. */
.ig-page #knows-mom, .ig-page #product, .ig-page #what-happens-next, .ig-page #faq { background: #f5f0e8; }
.ig-page #for-family, .ig-page #founder-offer, .ig-page #membership { background: #fffdf9; }

/* ── Founder section: product, timeline and the Founder voucher in one ──
   Phones: one column, top to bottom. Desktop: the media and what's in the
   box hold still on the left while the steps, the voucher and the folds
   scroll on the right, like a product page. Everything is scoped to
   .fb-section; the voucher keeps .ea-offer-card for checkout tracking, so it
   resets the shared offer-card styles it would otherwise inherit. */
.fb-section { --fb-bg: var(--landing-section-light); gap: 0; padding-top: 64px; padding-bottom: 72px; background: var(--fb-bg); }
.fb-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.fb-eyebrow { margin: 0; color: var(--landing-coral); font: 700 12px/1.3 var(--body, "DM Sans", sans-serif); letter-spacing: .11em; text-transform: uppercase; }
.fb-section .fb-head > h2 { margin: 0; }
.fb-sub { max-width: 30em; margin: 0; color: var(--landing-muted); font-size: 16px; line-height: 1.5; text-wrap: balance; }
.fb-label { margin: 0 0 14px; color: var(--landing-tert); font: 700 12px/1.3 var(--body, "DM Sans", sans-serif); letter-spacing: .11em; text-transform: uppercase; }

.fb-media { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; scroll-margin-top: calc(var(--ig-ticker-h, 0px) + var(--ig-nav-h, 48px) + 16px); }
.fb-media .ig-product-keyline { margin-top: 2px; }

/* What's in the box: four small tiles; the family one is the point. */
.fb-box { margin-top: 24px; }
.fb-box-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fb-box-list li { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 10px 14px; color: var(--landing-ink); background: var(--landing-section-warm); border-radius: 14px; font-size: 14px; line-height: 1.35; }
.fb-box-list li.is-family { color: #a9563b; background: var(--landing-coral-soft); font-weight: 600; }
.fb-box-list small { margin-top: 3px; color: var(--landing-tert); font-size: 12px; font-weight: 400; }

/* From today to their door: a rail with a dot per step, today filled. */
.fb-steps { margin-top: 44px; scroll-margin-top: calc(var(--ig-ticker-h, 0px) + var(--ig-nav-h, 48px) + 16px); }
.fb-timeline { position: relative; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; list-style: none; }
.fb-timeline::before { content: ""; position: absolute; top: 8px; bottom: 30px; left: 6px; border-left: 1.5px solid rgba(232, 137, 106, .35); }
.fb-timeline li { position: relative; padding-left: 32px; }
.fb-timeline li::before { content: ""; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; box-sizing: border-box; background: var(--fb-bg); border: 2px solid var(--landing-coral); border-radius: 50%; }
.fb-timeline li.is-now::before { background: var(--landing-coral); box-shadow: 0 0 0 4px rgba(232, 137, 106, .18); }
.fb-timeline p { margin: 0; }
.fb-when { display: flex; align-items: center; gap: 8px; color: var(--landing-tert); font: 600 13px/1.4 var(--body, "DM Sans", sans-serif); }
.fb-timeline li.is-now .fb-when { color: #b85f42; }
.fb-here { padding: 3px 8px; color: #b85f42; background: var(--landing-coral-soft); border-radius: 999px; font-size: 11px; font-weight: 700; }
.fb-what { margin-top: 2px !important; color: var(--landing-ink); font: 700 17px/1.35 var(--body, "DM Sans", sans-serif); letter-spacing: -.005em; }
.fb-line { margin-top: 2px !important; color: var(--landing-muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; }

/* The Founder voucher: three stubs split by perforations with punched
   notches (circles in the section colour on the card's edges). */
.ig-page .fb-section .fb-voucher { position: relative; display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 520px; margin: 40px auto 0; padding: 0; overflow: visible; color: var(--landing-ink); background: #f3eadc; border: 1px solid rgba(58, 48, 40, .08); border-radius: 20px; box-shadow: none; scroll-margin-top: calc(var(--ig-ticker-h, 0px) + var(--ig-nav-h, 48px) + 16px); }
.ig-page .fb-section .fb-voucher::before { content: none; }
.fb-v-stub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; row-gap: 2px; padding: 22px 22px 18px; }
.fb-v-stub p { margin: 0; }
.ig-page .fb-voucher .fb-v-name { margin: 0; color: var(--landing-ink); font: 400 28px/1.05 var(--display, "Newsreader", serif); letter-spacing: -.03em; }
.fb-v-price { color: var(--landing-ink); font: 700 34px/1 var(--body, "DM Sans", sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.035em; text-align: right; }
.fb-v-meta { color: var(--landing-tert); font-size: 13px; line-height: 1.4; }
.fb-v-today { text-align: right; }
.fb-perf { position: relative; display: block; height: 0; margin: 0 18px; border-top: 1.5px dashed rgba(58, 48, 40, .22); }
.fb-perf::before,
.fb-perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; background: var(--fb-bg); border: 1px solid rgba(58, 48, 40, .08); border-radius: 50%; }
.fb-perf::before { left: -30px; clip-path: inset(0 0 0 50%); }
.fb-perf::after { right: -30px; clip-path: inset(0 50% 0 0); }
.fb-v-perks { padding: 18px 18px 16px; }
.fb-coupons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fb-coupons li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 72px; padding: 10px 6px; text-align: center; background: #fffdf9; border: 1.5px dashed rgba(232, 137, 106, .55); border-radius: 12px; }
.fb-coupons b { color: var(--landing-ink); font: 700 clamp(15px, 4.4vw, 18px)/1.15 var(--body, "DM Sans", sans-serif); letter-spacing: -.01em; white-space: nowrap; }
.fb-coupons span { color: var(--landing-muted); font-size: 12.5px; line-height: 1.3; }
.fb-v-relation { margin: 12px 0 0; color: var(--landing-muted); font-size: 14px; line-height: 1.4; text-align: center; }
.fb-v-relation s { color: var(--landing-tert); }
.fb-v-relation strong { color: var(--landing-ink); }
.fb-v-pay { display: flex; flex-direction: column; padding: 18px 22px 20px; }
.ig-page .fb-voucher .ea-offer-cta,
.ig-page .fb-voucher .ea-offer-cta:hover { order: 0; min-height: 54px; margin: 0; color: #fff; background: var(--landing-coral); }
.ig-page .fb-voucher .ea-offer-cta:hover { background: #d97a5a; }
.fb-v-note { margin: 10px 0 0; color: var(--landing-ink); font-size: 13px; line-height: 1.4; text-align: center; }
.ig-page .fb-voucher .ea-fine { order: 0; margin-top: 6px; color: var(--landing-tert); font-size: 12px; }
.ig-page .fb-voucher .ea-fine a { color: inherit; }

/* The two folds: plain rows under the voucher. */
.fb-folds { width: 100%; max-width: 520px; margin: 24px auto 0; border-bottom: 1px solid var(--landing-line); }
.fb-section .fb-fold { width: 100%; max-width: none; margin: 0; padding: 0; border-top: 1px solid var(--landing-line); }
.fb-section .fb-fold > summary { display: flex; justify-content: space-between; margin: 0; padding: 15px 0; color: var(--landing-ink); font-size: 15px; font-weight: 600; }
.fb-section .fb-fold > summary::after { color: var(--landing-coral); }
.fb-section .fb-fold dl { margin: 0 0 12px; }
.fb-section .fb-fold .glance-specs { margin-top: 0; }
.fb-section .fb-fold .fine-print { margin: 10px 0 14px; color: rgba(58, 48, 40, .44); font-size: 11px; line-height: 1.45; }

@media (min-width: 960px) {
  /* Two columns: media sticky on the left, the rest scrolls on the right. */
  .fb-section { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(48px, 5vw, 88px); align-items: start; padding-top: clamp(72px, 8vw, 112px); padding-bottom: clamp(72px, 8vw, 112px); }
  .fb-head,
  .fb-steps,
  .ig-page .fb-section .fb-voucher,
  .fb-folds { grid-column: 2; }
  .fb-head { align-items: flex-start; text-align: left; }
  .fb-section .fb-head > h2 { text-align: left; }
  .fb-sub { font-size: 18px; text-wrap: pretty; }
  .fb-media { grid-column: 1; grid-row: 1 / span 4; position: sticky; top: calc(var(--ig-ticker-h, 0px) + var(--ig-nav-h, 60px) + 32px); margin-top: 0; }
  .fb-media .ig-product-keyline { justify-content: flex-start; margin-top: 4px; font-size: 16px; }
  .fb-box { margin-top: 18px; }
  .fb-box-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fb-box-list li { min-height: 72px; font-size: 13px; }
  .fb-steps { margin-top: 44px; }
  .fb-what { font-size: 19px; }
  .fb-line { font-size: 15px; }
  .ig-page .fb-section .fb-voucher { max-width: none; margin: 44px 0 0; }
  .fb-v-stub { padding: 26px 28px 20px; }
  .ig-page .fb-voucher .fb-v-name { font-size: 32px; }
  .fb-v-price { font-size: 40px; }
  .fb-v-perks { padding: 20px 24px 18px; }
  .fb-coupons li { min-height: 84px; }
  .fb-coupons b { font-size: 20px; }
  .fb-coupons span { font-size: 13.5px; }
  .fb-v-pay { padding: 20px 28px 24px; }
  .ig-page .fb-voucher .ea-offer-cta { min-height: 58px; font-size: 16px; }
  .fb-folds { max-width: none; margin: 24px 0 0; }
  .fb-section .fb-fold dt,
  .fb-section .fb-fold dd { font-size: 14px; }
}
/* Section rhythm: the merged section sits on the warm tone between two light
   ones. Its parts reuse #product / #what-happens-next / #founder-offer, which
   the rhythm rule above paints, so they are reset here by id. */
.ig-page #bring-home { --fb-bg: #f5f0e8; background: var(--fb-bg); }
.ig-page #bring-home #product,
.ig-page #bring-home #what-happens-next { background: transparent; }
.ig-page #bring-home #founder-offer { background: #fffdf9; }
.ig-page #bring-home .fb-box-list li:not(.is-family) { background: #fffdf9; }
.ig-page #bring-home .fb-coupons li { background: #fbf4ec; }
.ig-page #bring-home .fb-v-name { color: var(--landing-coral); }
@media (min-width: 960px) {
  /* The old offer card centres its children on desktop; the voucher's stubs
     and perforations need the full width. */
  .ig-page #bring-home #founder-offer { align-items: stretch; }
}

/* Product gallery, Ato style: one main image (a full-width swipe row, one
   photo per snap) and a row of thumbnails under it that scrolls when there
   are more than fit. Same on desktop, inside the sticky left column. */
.fb-media .fb-stage,
.ig-page .fb-media .fb-stage { display: flex; gap: 0; width: 100%; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; border-radius: 20px; background: var(--landing-cream); }
.fb-media .fb-stage figure { flex: 0 0 100%; border-radius: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.fb-media .fb-stage figure > video,
.fb-media .fb-stage figure > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fb-thumbs { display: flex; gap: 8px; margin: 2px -20px 0; padding: 2px 20px 4px; overflow-x: auto; scrollbar-width: none; }
.fb-thumbs::-webkit-scrollbar { display: none; }
.fb-thumb { position: relative; flex: 0 0 72px; aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--landing-cream); border: 2px solid transparent; border-radius: 14px; cursor: pointer; opacity: .62; transition: opacity .2s, border-color .2s; }
.fb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-thumb.is-on { border-color: var(--landing-coral); opacity: 1; }
.fb-thumb:hover { opacity: 1; }
.fb-thumb:focus-visible { outline: 2px solid var(--landing-coral); outline-offset: 2px; }
.fb-thumb-play { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: rgba(58, 48, 40, .55); border-radius: 50%; }
.fb-thumb-play::before { content: ""; position: absolute; top: 7px; left: 9px; border-left: 8px solid #fffdf9; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
@media (min-width: 960px) {
  .fb-media .fb-stage,
  .ig-page .fb-media .fb-stage { display: flex; grid-template-columns: none; overflow-x: auto; }
  .fb-media .fb-stage figure { border-radius: 0; }
  .fb-thumbs { margin: 4px 0 0; padding: 2px 0 4px; }
  .fb-thumb { flex-basis: 84px; }
}

/* What's in the box, plain: a serif title and a simple list, no tiles. */
.fb-box-title { margin: 0 0 10px; color: var(--landing-ink); font: 400 24px/1.15 var(--display, "Newsreader", serif); letter-spacing: -.02em; }
.fb-box-list,
.ig-page #bring-home .fb-box-list { display: flex; flex-direction: column; gap: 6px; }
.fb-box-list li,
.ig-page #bring-home .fb-box-list li:not(.is-family),
.fb-box-list li.is-family { display: block; min-height: 0; padding: 0; color: var(--landing-ink); background: none; border-radius: 0; font-size: 15px; font-weight: 400; line-height: 1.5; }
.fb-box-list small { display: block; margin: 0; color: var(--landing-tert); font-size: 13px; }
@media (min-width: 960px) {
  .fb-box { margin-top: 24px; }
  .fb-box-title { font-size: 26px; }
  .fb-box-list,
  .ig-page #bring-home .fb-box-list { display: flex; }
  .fb-box-list li,
  .ig-page #bring-home .fb-box-list li:not(.is-family),
  .fb-box-list li.is-family { min-height: 0; font-size: 15px; }
}

/* ── Founder section: Ato's launch layout ─────────────────────────
   One markup for phones and desktop (the phone version came first, so the
   blocks below are written for it; desktop adds its two columns at the end). */
@media all {
  .fb-section .fb-d { display: none !important; }

  /* Title: left-aligned like Ato, a small Founder Edition tag, one status line. */
  .fb-head { align-items: flex-start; gap: 0; text-align: left; }
  .fb-section .fb-head > h2 { margin: 0; text-align: left; }
  .fb-tag { margin: 10px 0 0; padding: 4px 10px; color: #b85f42; background: var(--landing-coral-soft); border-radius: 8px; font: 700 12px/1.3 var(--body, "DM Sans", sans-serif); }
  .fb-status { margin: 10px 0 0; color: var(--landing-ink); font-size: 16px; line-height: 1.45; }
  .fb-media { margin-top: 22px; }

  /* Date track: today (reservations open) to December (ships). */
  .fb-steps { margin-top: 32px; }
  .fb-track p { display: flex; justify-content: space-between; margin: 0; }
  .fb-track-when b { color: var(--landing-ink); font: 700 16px/1.3 var(--body, "DM Sans", sans-serif); }
  .fb-track-line { position: relative; display: block; height: 14px; margin: 8px 7px; }
  .fb-track-line { background: linear-gradient(rgba(58, 48, 40, .2), rgba(58, 48, 40, .2)) 0 6px / 100% 1.5px no-repeat; }
  .fb-track-line::before { content: ""; position: absolute; top: 0; left: -7px; width: 14px; height: 14px; background: var(--landing-coral); border-radius: 50%; box-shadow: 0 0 0 4px rgba(232, 137, 106, .18); }
  .fb-track-line::after { content: ""; position: absolute; top: 0; right: -7px; width: 14px; height: 14px; box-sizing: border-box; background: var(--fb-bg); border: 2px solid rgba(58, 48, 40, .35); border-radius: 50%; }
  .fb-track-state span { color: var(--landing-tert); font-size: 14px; }
  .fb-track-state .is-open { color: #b85f42; }

  /* Steps: numbered, one line each. */
  .fb-steps-m { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: fb-step; }
  .fb-steps-m li { display: flex; align-items: center; gap: 12px; color: var(--landing-ink); font-size: 15px; line-height: 1.4; counter-increment: fb-step; }
  .fb-steps-m li::before { content: counter(fb-step); display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--landing-ink); border: 1px solid rgba(58, 48, 40, .3); border-radius: 50%; font: 600 12px/1 var(--body, "DM Sans", sans-serif); }

  /* The ticket: one deeper tan colour, perks on top, one perforation, pay below. */
  .ig-page #bring-home #founder-offer { margin-top: 28px; background: #ecdcc3; border-color: rgba(58, 48, 40, .1); }
  .fb-v-top { padding: 22px 22px 18px; }
  .fb-v-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; }
  .fb-v-head b { padding-top: 6px; color: var(--landing-ink); font: 700 18px/1.3 var(--body, "DM Sans", sans-serif); }
  .fb-v-price-m { display: flex; flex-direction: column; align-items: flex-end; color: var(--landing-ink); font: 700 36px/1 var(--body, "DM Sans", sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
  .fb-v-price-m small { margin-top: 4px; color: var(--landing-tert); font: 400 13px/1.2 var(--body, "DM Sans", sans-serif); letter-spacing: 0; }
  .fb-v-list,
  .fb-check-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
  .fb-v-list li,
  .fb-check-list li { display: flex; align-items: baseline; gap: 10px; color: var(--landing-ink); font-size: 15px; line-height: 1.4; }
  .fb-v-list li::before,
  .fb-check-list li::before { content: "✓"; flex: none; color: #b85f42; font-weight: 700; }
  .ig-page #bring-home .fb-perf::before,
  .ig-page #bring-home .fb-perf::after { border-color: rgba(58, 48, 40, .1); }
  .fb-perf { border-top-color: rgba(58, 48, 40, .28); }
  .fb-v-pay { padding: 18px 22px 20px; }
  .fb-v-note { color: var(--landing-ink); font-size: 12px; white-space: nowrap; }
  .ig-page .fb-voucher .ea-fine { flex-wrap: nowrap; gap: 8px; color: rgba(58, 48, 40, .7); }
  .ig-page .fb-voucher .ea-fine > span.fb-m { display: none !important; }
  .ig-page .fb-voucher .ea-fine > a.fb-pay-link { flex: none; display: inline !important; }

  /* After the ticket: what's in the box, then the specs, open. */
  .fb-after { margin-top: 40px; }
  .fb-after .fb-box-title { margin: 0; }
  .fb-specs-title { margin: 40px 0 0; color: var(--landing-ink); font: 400 32px/1.1 var(--display, "Newsreader", serif); letter-spacing: -.03em; }
  .fb-specs-m { margin: 12px 0 0; }
  .fb-specs-m > div { padding: 12px 0; border-bottom: 1px solid var(--landing-line); }
  .fb-specs-m dt { color: var(--landing-tert); font-size: 13px; font-weight: 600; }
  .fb-specs-m dd { margin: 2px 0 0; color: var(--landing-ink); font-size: 15px; line-height: 1.45; }
  .fb-specs-note { margin: 12px 0 0; color: rgba(58, 48, 40, .44); font-size: 11px; line-height: 1.45; }

  /* Payment notes stay as the one fold, at the end. */
  .fb-folds { margin-top: 28px; }
}
/* Very narrow phones: let the fine print wrap instead of spilling out. */
@media (max-width: 359px) {
  .fb-v-note { white-space: normal; text-wrap: balance; }
  .ig-page .fb-voucher .ea-fine { flex-wrap: wrap; row-gap: 4px; }
}

/* Phones: the steps as headline + caption on our own rail (a thin coral
   line, today's dot filled), replacing the numbered circles and the date track. */
@media all {
  .fb-steps-m { position: relative; gap: 20px; margin-top: 4px; counter-reset: none; }
  .fb-steps-m::before { content: ""; position: absolute; top: 8px; bottom: 26px; left: 6px; border-left: 1.5px solid rgba(232, 137, 106, .35); }
  .fb-steps-m li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-left: 30px; counter-increment: none; }
  .fb-steps-m li::before { content: ""; position: absolute; top: 4px; left: 0; width: 14px; height: 14px; box-sizing: border-box; background: var(--fb-bg); border: 2px solid var(--landing-coral); border-radius: 50%; }
  .fb-steps-m li.is-now::before { background: var(--landing-coral); box-shadow: 0 0 0 4px rgba(232, 137, 106, .18); }
  .fb-steps-m b { color: var(--landing-ink); font: 700 16px/1.35 var(--body, "DM Sans", sans-serif); }
  .fb-steps-m span { color: var(--landing-muted); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
}

/* Phones: Specifications folds; its serif title is the row you tap. */
@media all {
  .fb-specs-fold { margin-top: 32px; border-top: 1px solid var(--landing-line); border-bottom: 1px solid var(--landing-line); }
  .fb-section .fb-specs-fold > summary.fb-specs-title { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 14px 0; color: var(--landing-ink); font: 400 24px/1.15 var(--display, "Newsreader", serif); letter-spacing: -.02em; }
  .fb-section .fb-specs-fold > summary.fb-specs-title::after { color: var(--landing-coral); font: 400 18px/1 var(--body, "DM Sans", sans-serif); }
  .fb-specs-fold .fb-specs-m { margin-top: 0; }
  .fb-specs-fold .fb-specs-m > div:last-child { border-bottom: 0; }
  .fb-specs-fold .fb-specs-note { margin: 4px 0 14px; }
}
/* Phones: the payment notes fold sits right under Specifications, same row style. */
@media all {
  .fb-specs-fold { border-bottom: 0; }
  .fb-section .fb-folds { margin-top: 0; }
  .fb-section .fb-fold > summary { padding: 14px 0; font: 400 24px/1.15 var(--display, "Newsreader", serif); letter-spacing: -.02em; align-items: center; }
  .fb-section .fb-fold > summary::after { font: 400 18px/1 var(--body, "DM Sans", sans-serif); }
}
/* Phones: the section title is the plain name, Founder Edition. */
@media all {
  .fb-section .fb-head > h2 .fb-m { display: inline !important; }
  .fb-status { margin-top: 8px; color: var(--landing-muted); }
}
/* Phones: the voucher gets the page's grain (the same fine noise as the CTA button),
   and the fine print gets room under the button. */
@media all {
  .ig-page #bring-home #founder-offer { isolation: isolate; }
  .ig-page #bring-home #founder-offer::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='voucherNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23voucherNoise)'/%3E%3C/svg%3E"); background-size: 400px 400px; mix-blend-mode: overlay; opacity: .5; pointer-events: none; }
  .ig-page #bring-home #founder-offer > * { position: relative; z-index: 1; }
  .ig-page #bring-home #founder-offer > .fb-perf { position: relative; }
  .ig-page #bring-home .fb-v-pay .fb-v-note { margin: 14px 0 0; }
  .ig-page #bring-home .fb-v-pay .ea-fine { margin-top: 8px; }
}
/* The overlay grain lightens the card, so its base colour sits a step deeper. */
@media all { .ig-page #bring-home #founder-offer { background: #e3cfae; } }

/* ── Phones: voucher B, a stitched patch ──
   Same three parts; instead of ticket notches, a coral stitch runs round the
   inside of the card and across as the divider, and $9.90 sits in a round
   sewn patch on the top-right corner (the Personal Assistant patch language). */
@media all {
  .ig-page #bring-home #founder-offer { margin-top: 44px; }
  .ig-page #bring-home #founder-offer::after { content: ""; position: absolute; z-index: 2; inset: 7px; border: 1.5px dashed #d9785a; border-radius: 14px; pointer-events: none; }
  .ig-page #bring-home .fb-perf { margin: 0 24px; border-top: 1.5px dashed #d9785a; }
  .ig-page #bring-home .fb-perf::before,
  .ig-page #bring-home .fb-perf::after { content: none; }
  .fb-v-top { padding: 26px 26px 18px; }
  .fb-v-head b { padding-top: 0; }
  .fb-v-price-m { position: absolute; z-index: 3; top: -28px; right: -10px; justify-content: center; align-items: center; width: 92px; height: 92px; box-sizing: border-box; background: #f7f0e4; border: 3px solid var(--landing-coral); border-radius: 50%; font-size: 24px; transform: rotate(-7deg); box-shadow: 0 3px 0 rgba(58, 48, 40, .08); }
  .fb-v-price-m::before { content: ""; position: absolute; inset: 4px; border: 1.5px dashed #d9785a; border-radius: 50%; }
  .fb-v-price-m small { margin-top: 3px; font-size: 11px; }
  .fb-v-list { margin-top: 12px; }
  .fb-v-pay { padding: 18px 26px 24px; }
}
@media all {
  /* The patch is sewn on top: its stub sits above the card's stitch line. */
  .ig-page #bring-home #founder-offer > .fb-v-top { z-index: 3; }
  .fb-v-price-m { width: 98px; height: 98px; top: -30px; font-size: 22px; }
}
@media all {
  /* Hybrid: the stitched patch voucher keeps the ticket notches at the
     divider. The notches sit above the stitch, so they cut it like a tear. */
  .ig-page #bring-home #founder-offer > .fb-perf { z-index: 3; }
  .ig-page #bring-home .fb-perf::before,
  .ig-page #bring-home .fb-perf::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; box-sizing: border-box; background: var(--fb-bg); border: 1px solid rgba(58, 48, 40, .1); border-radius: 50%; }
  .ig-page #bring-home .fb-perf::before { left: -36px; clip-path: inset(0 0 0 50%); }
  .ig-page #bring-home .fb-perf::after { right: -36px; clip-path: inset(0 50% 0 0); }
}
/* Phones: no stitch round the card's edge; the stitch stays on the divider only. */
@media all { .ig-page #bring-home #founder-offer::after { content: none; } }
@media all {
  /* The total under the perks, like the receipt line on a voucher. */
  .fb-v-total { margin: 12px 0 0; color: var(--landing-muted); font-size: 13px; line-height: 1.4; }
  /* Specifications is the last fold on phones now, so it closes the list. */
  .fb-specs-fold { border-bottom: 1px solid var(--landing-line); }
}
@media all {
  .fb-v-list s { color: var(--landing-tert); }
  .fb-v-list strong { font-weight: 700; }
}
@media all { .ig-page #bring-home .fb-v-top .fb-v-total { margin: 14px 0 0; } }
/* Phones: the total row reads like Ato's: when on the left, the total on the right. */
@media all {
  .ig-page #bring-home .fb-v-top .fb-v-total { display: flex; justify-content: space-between; gap: 12px; color: var(--landing-ink); font-size: 14px; }
}
/* Phones: the total row moves under the tear, above the button: muted label
   on the left, the amount in ink on the right. */
@media all {
  .ig-page #bring-home .fb-v-pay .fb-v-total { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; color: var(--landing-tert); font-size: 13px; line-height: 1.4; }
  .ig-page #bring-home .fb-v-pay .fb-v-total b { color: var(--landing-ink); font-size: 15px; font-weight: 700; }
}

/* Desktop: the same content in two columns. The gallery holds still on the
   left; the title, steps, voucher, box and specs scroll on the right. */
@media (min-width: 960px) {
  .fb-section { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .fb-head,
  .fb-steps,
  .ig-page .fb-section .fb-voucher,
  .fb-after { grid-column: 2; }
  .fb-media { grid-column: 1; grid-row: 1 / span 4; margin-top: 0; }
  .fb-status { font-size: 18px; }
  .fb-steps { margin-top: 36px; }
  .fb-steps-m b { font-size: 18px; }
  .fb-steps-m span { font-size: 15px; }
  .ig-page #bring-home #founder-offer { max-width: none; margin: 56px 0 0; }
  .fb-v-top { padding: 30px 32px 20px; }
  .fb-v-pay { padding: 20px 32px 28px; }
  .ig-page #bring-home .fb-perf { margin: 0 32px; }
  .ig-page #bring-home .fb-perf::before { left: -44px; }
  .ig-page #bring-home .fb-perf::after { right: -44px; }
  .fb-v-head b { font-size: 20px; }
  .fb-v-list li { font-size: 16px; }
  .fb-v-price-m { width: 108px; height: 108px; top: -34px; right: -14px; font-size: 26px; }
  .ig-page #bring-home .fb-v-pay .fb-v-total { font-size: 14px; }
  .fb-v-note { font-size: 13px; }
  .fb-after { margin-top: 48px; }
  .fb-box-title,
  .fb-section .fb-specs-fold > summary.fb-specs-title { font-size: 28px; }
  .fb-check-list li { font-size: 16px; }
  .fb-specs-m dt { font-size: 13px; }
  .fb-specs-m dd { font-size: 15px; }
}

/* Desktop: what's in the box and the specs sit under the product photos
   (fb-after-d); phones keep them after the voucher (fb-after-m). The left
   column is now about as tall as the right one, so it scrolls normally. */
.fb-after-d { display: none; }
@media (min-width: 960px) {
  .fb-section .fb-after-m { display: none; }
  .fb-media .fb-after-d { display: block; margin-top: 36px; }
  .fb-media { position: static; grid-row: 1 / span 3; }
}

/* ── Phones, Ato-style top right ──
   No logo and no bar: a floating white capsule holds the Reserve pill and the
   menu button. While the pill waits (first screen, .ig-nav-cta-wait) and
   inside the Founder Edition section (.ig-in-founder, ig-landing.js), only
   the round menu button stays; after the section the pill is back. The bar no
   longer takes room above the hero, so the hero runs up under it. */
.ig-nav-end { display: contents; }
@media (max-width: 959px) {
  .ig-page .landing-nav {
    align-items: flex-start;
    justify-content: flex-end;
    height: 0;
    min-height: 0;
    padding: 0 12px;
    background: transparent;
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  .ig-page .landing-nav-brand { display: none; }
  .ig-nav-end {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0 auto;
    padding: 4px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(58, 48, 40, .16);
    pointer-events: auto;
  }
  .ig-page .ig-nav-end .landing-nav-cta { min-height: 40px; margin: 0; padding: 0 16px; font-size: 14px; }
  .ig-nav-cta-wait .ig-page .ig-nav-end .landing-nav-cta,
  .ig-in-founder .ig-page .ig-nav-end .landing-nav-cta { display: none; }
  .ig-nav-end .ig-nav-toggle { width: 40px; height: 40px; margin: 0; }
  .ig-page .landing-nav .ig-nav-menu {
    top: 64px;
    left: 12px;
    right: 12px;
    margin-top: 8px;
    border: 0;
    border-radius: 18px;
    pointer-events: auto;
  }
  .ig-page .ig-hero { min-height: calc(100svh - var(--ig-ticker-h)); }

  /* Hero: the Reserve pill sits right under the headline; the scrolling
     reservation terms go under the pill. */
  .ig-hero .ig-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .ig-hero .ig-hero-cta { order: 1; margin-top: 18px; }
  .ig-hero .ig-hero-promises { order: 2; align-self: stretch; margin-top: 16px; }
}

/* ── Phones: the voucher's head pinned to the bottom (Ato-style) ──
   Shown while the Founder Edition section scrolls by. Compact: the price is
   plain text (no patch) and the strip is short, so it never covers much of
   the page. When the real voucher reaches it, it fades into it
   (ig-landing.js sets left/width to the voucher's). */
.fb-dock { display: none; }
@media (max-width: 959px) {
  .ig-page .fb-dock {
    position: fixed;
    z-index: 44;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 520px;
    margin: 0 auto;
    padding: 12px 18px 11px;
    overflow: hidden;
    color: var(--landing-ink);
    background: #e3cfae;
    border: 1px solid rgba(58, 48, 40, .1);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(58, 48, 40, .16);
    font: inherit;
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    -webkit-tap-highlight-color: transparent;
  }
  /* The voucher's own grain and base colour. */
  .ig-page .fb-dock::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='voucherNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23voucherNoise)'/%3E%3C/svg%3E"); background-size: 400px 400px; mix-blend-mode: overlay; opacity: .5; pointer-events: none; }
  .ig-page .fb-dock.is-visible { opacity: 1; visibility: visible; transform: none; }
  /* Docking: a short fade in place, no slide. */
  .ig-page .fb-dock.is-docked { transform: none; transition: opacity .18s ease, visibility .18s; }
  .fb-dock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .fb-dock-row b { font: 700 16px/1.3 var(--body, "DM Sans", sans-serif); }
  .fb-dock-price { font: 700 22px/1.1 var(--body, "DM Sans", sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; }
  .fb-dock-price small { margin-right: 5px; color: var(--landing-tert); font: 400 12px/1 var(--body, "DM Sans", sans-serif); letter-spacing: 0; }
  .fb-dock-sub { color: var(--landing-tert); font-size: 13px; line-height: 1.35; white-space: nowrap; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .ig-page .fb-dock { transform: none; transition: none; }
}

/* ── Page grain ──
   One fixed paper grain over the whole page, top bars included: felt, not
   seen. The alpha row (0.6 0) keeps the noise as continuous light and dark
   ripples instead of separate specks; multiply sinks it into the colours
   underneath rather than laying a grey film on top. Fine scale (about one
   screen pixel). Under the checkout modal (z-index 70+); never takes taps. */
body.ig-page::after {
  content: "";
  position: fixed;
  z-index: 65;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .13 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  mix-blend-mode: multiply;
  opacity: .12;
  pointer-events: none;
}

/* ── Phones, first screen (Ato-style) ──
   Over the hero film the top bar is a frosted-glass capsule, full width: the
   logo in white on the left, the menu button in white on the right. Once the
   hero scrolls away (.ig-nav-cta-wait drops), it turns back into the white
   Reserve + menu capsule on the right. The negative margin keeps the hero
   where it was, so nothing shifts when the state changes. */
@media (max-width: 959px) {
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .landing-nav {
    align-items: center;
    justify-content: space-between;
    height: 56px;
    margin: 8px 12px -64px;
    padding: 0 6px 0 20px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    pointer-events: auto;
  }
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .landing-nav-brand { display: flex; width: 128px; height: 38px; }
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .landing-nav-brand img { width: 136px; height: 77px; }
  /* The logo keeps its own heart colours; only the grey type turns cream. */
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .landing-nav-brand img:not(.ig-logo-light) { display: none; }
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .landing-nav-brand .ig-logo-light { display: block; }
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .ig-nav-end { margin: 0; padding: 0; background: transparent; box-shadow: none; }
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .ig-nav-toggle { color: #fff; }
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .ig-nav-toggle .material-symbols-outlined { font-size: 28px; }
  .ig-nav-cta-wait:not(.ig-in-founder) .ig-page .landing-nav .ig-nav-menu { top: 64px; left: 0; right: 0; }
}

/* Phones: the Membership and On their terms headlines break at the full stop,
   one sentence a line; Membership's size steps down just enough for the
   longer line to fit at 360px. */
@media (max-width: 959px) {
  .ig-member-section h2 .ig-h-line, .ig-tt-section h2 .ig-h-line { display: block; white-space: nowrap; }
  .ig-page .ig-member-section h2 { font-size: min(36px, 9vw); }
}

/* ── Question box ──
   Bottom-right launcher that opens a small "Have a question?" card. Answers
   are written by a person and sent by email (Apps Script questions.submit),
   so the email field is required. Ink, not coral: it must never compete with
   the Reserve buttons. The launcher is an icon-only circle; on phones the card
   is a bottom sheet; while the Founder perks dock is showing, the
   launcher lifts above it (ask-box.js sets --ask-lift). Below the checkout
   modal (70+) and the page grain (65). */
.ask-box { --ask-ink: var(--landing-ink, #3a3028); --ask-paper: var(--landing-paper-light, #fffdf9); --ask-line: rgba(58, 48, 40, .16); --ask-lift: 0px; }
.ask-launcher {
  position: fixed;
  z-index: 45;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--ask-paper);
  background: var(--ask-ink);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(58, 48, 40, .22);
  font: 600 15px/1 "DM Sans", sans-serif;
  cursor: pointer;
  transform: translateY(calc(-1 * var(--ask-lift)));
  transition: transform .25s ease, box-shadow .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.ask-launcher svg { width: 24px; height: 24px; flex: none; }
/* Icon only: the question mark says it all; the label stays for screen readers. */
.ask-launcher-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ask-launcher:hover { box-shadow: 0 12px 32px rgba(58, 48, 40, .3); }
.ask-launcher:focus-visible,
.ask-panel :focus-visible { outline: 2px solid var(--landing-coral, #e8896a); outline-offset: 2px; }
.ask-box.is-open .ask-launcher { opacity: 0; pointer-events: none; }

/* Dims the page (top bar and its Reserve pill included) so the card reads as
   a layer; a tap on it closes the card. */
.ask-scrim {
  position: fixed;
  z-index: 59;
  inset: 0;
  background: rgba(30, 24, 19, .42);
  opacity: 0;
  transition: opacity .2s ease;
}
.ask-scrim[hidden] { display: none; }
.ask-box.is-open .ask-scrim { opacity: 1; }
.ask-panel {
  position: fixed;
  z-index: 60;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--ask-kb, 0px));
  width: 360px;
  max-height: calc(var(--ask-vh, 100dvh) - 120px);
  overflow: auto;
  padding: 22px 22px 18px;
  color: var(--ask-ink);
  background: var(--ask-paper);
  border: 1px solid rgba(58, 48, 40, .1);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(58, 48, 40, .22);
  font-family: "DM Sans", sans-serif;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}
.ask-panel[hidden] { display: none; }
/* The voucher's grain, on the card and the two ink buttons, so they sit in
   the page's paper finish instead of looking flat. */
/* The launcher is already fixed, which anchors its grain. */
.ask-send { position: relative; }
.ask-launcher, .ask-send, .ask-panel { isolation: isolate; }
.ask-launcher, .ask-send { overflow: hidden; }
.ask-panel::before,
.ask-launcher::before,
.ask-send::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='askNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23askNoise)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  mix-blend-mode: overlay;
  opacity: .5;
  pointer-events: none;
}
.ask-launcher::before, .ask-send::before { opacity: .35; }
/* Overlay grain all but vanishes on light paper; the card gets a warm ink
   speckle instead, multiplied in like the page grain. */
.ask-panel::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .19 0 0 0 0 .16 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 160px 160px; mix-blend-mode: multiply; opacity: .55; }
.ask-form textarea, .ask-form input[type="email"] { background: rgba(255, 255, 255, .72); }
.ask-box.is-open .ask-panel { opacity: 1; transform: none; }
.ask-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ask-head h2 { margin: 0; font: 500 24px/1.15 "Newsreader", Georgia, serif; letter-spacing: -.01em; }
.ask-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -12px 0 0;
  color: var(--landing-tert, rgba(58, 48, 40, .62));
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.ask-close:hover { color: var(--ask-ink); background: rgba(58, 48, 40, .06); }
.ask-close svg { width: 20px; height: 20px; }
.ask-lede { margin: 6px 0 16px; color: var(--landing-muted, rgba(58, 48, 40, .82)); font-size: 15px; line-height: 1.45; }
.ask-form { display: grid; gap: 6px; }
.ask-form label { margin-top: 6px; font-size: 14px; font-weight: 600; }
.ask-form textarea,
.ask-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  color: var(--ask-ink);
  background: #fff;
  border: 1px solid var(--ask-line);
  border-radius: 12px;
  font: 16px/1.4 "DM Sans", sans-serif;
}
.ask-form textarea { min-height: 104px; resize: vertical; }
.ask-form input::placeholder,
.ask-form textarea::placeholder { color: rgba(58, 48, 40, .45); }
/* The intro moved into the question placeholder; the title sits right on
   the first label. */
.ask-head + .ask-form > label:first-child { margin-top: 14px; }
.ask-form textarea:focus,
.ask-form input[type="email"]:focus { outline: none; border-color: var(--ask-ink); box-shadow: 0 0 0 3px rgba(58, 48, 40, .1); }
.ask-form [aria-invalid="true"] { border-color: #b4472c; }
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ask-error { margin: 4px 0 0; color: #b4472c; font-size: 14px; line-height: 1.4; }
.ask-error[hidden] { display: none; }
.ask-send {
  min-height: 48px;
  margin-top: 10px;
  color: var(--ask-paper);
  background: var(--ask-ink);
  border: 0;
  border-radius: 999px;
  font: 600 16px/1 "DM Sans", sans-serif;
  cursor: pointer;
}
.ask-send:disabled { opacity: .6; cursor: progress; }
.ask-done { padding: 4px 0 2px; }
.ask-done[hidden] { display: none; }
.ask-done p { margin: 6px 0 16px; color: var(--landing-muted, rgba(58, 48, 40, .82)); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ask-again { padding: 0; color: var(--ask-ink); background: none; border: 0; font: 600 15px/1.4 "DM Sans", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 959px) {
  .ask-launcher {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .ask-box.is-in-hero:not(.is-open) .ask-launcher { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s; }
  .ask-panel {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--ask-kb, 0px));
    width: auto;
    max-height: calc(var(--ask-vh, 100dvh) - 24px);
    padding: 20px 18px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ask-launcher, .ask-panel, .ask-scrim { transition: none; }
}

/* "Holds 1 of 500 spots and unlocks:" under the voucher title (the patch beside it says $9.90), and the
   ticket icon for the ticker's "$9.90 reserves your spot" (the local icon
   font is a subset, so this one is inline SVG). */
.ig-promise-svg { flex: none; width: 16px; height: 16px; opacity: .85; }
.ig-page #bring-home .fb-v-lead { margin: 12px 0 0; color: var(--landing-muted); font-size: 14px; line-height: 1.4; }
.ig-page #bring-home .fb-v-lead + .fb-v-list { margin-top: 10px; }
/* Desktop: the terms stay one static line; with four of them it runs a little
   past the headline column instead of being clipped. */
@media (min-width: 960px) {
  .ig-hero-promises { overflow: visible; }
  .ig-hero-promises ul { gap: 18px; padding-right: 0; }
}

/* On their terms: two hand-drawn frames (the Meet Bondi #igSketchFrame), one
   line headline and one line under each. Notes and the privacy button are
   drawn in the frame's own 300x220 units so they scale with it. Phones stack
   the two; desktop sets them side by side. .is-armed (JS) holds the start,
   .is-play loops the privacy press. */
.ig-tt-grid { display: grid; gap: 16px; width: 100%; max-width: 440px; margin: 40px auto 0; }
/* Each block is its own panel, headed by the worry it answers (the grown
   child's own question), so hardware and their personal space read as two
   separate things. */
.ig-tt-card { display: flex; flex-direction: column; margin: 0; padding: 22px 20px 28px; text-align: center; background: var(--landing-paper-light); border: 1px solid var(--landing-line); border-radius: 24px; }
.ig-tt-frame { width: 100%; margin-top: 64px; }
/* The grown child's worry is the card's headline; one answer line under
   the picture, regular weight, kept to one line: on phones the size steps
   down with the screen (card content is the width minus 80px; the longest
   answer is about 20.5x its font size). */
.ig-tt-card .ig-tt-q { margin: 0; color: var(--landing-ink); font: 500 23px/1.2 var(--display, "Newsreader", serif); letter-spacing: -.01em; text-wrap: balance; }
.ig-tt-a { margin: 22px 0 0; color: var(--landing-ink); font-size: min(16px, calc((100vw - 80px) / 20.5)); line-height: 1.5; white-space: nowrap; }
.ig-tt-a b { font-weight: 400; }

/* 1. No camera, one-touch privacy. The photo sits on the frame's screen; a
   press of the privacy button (on the outside top of the frame, centered, flush, drawn on the outline) dims the
   screen to off. */
.ig-tt-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ig-tt-off { position: absolute; inset: 0; background: #181512; opacity: 0; }
.ig-tt-notes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ig-tt-notes text { fill: var(--landing-coral); font: 400 18px/1 var(--landing-handwritten, "Kalam", cursive); }
.ig-tt-btn rect { fill: #e4dccd; stroke: #1f1b18; stroke-width: 1.8; }
.ig-tt-ring { fill: none; stroke: var(--landing-coral); stroke-width: 2; stroke-dasharray: 4 4; opacity: .9; transform-box: fill-box; transform-origin: center; }
.ig-tt-finger { fill: none; stroke: #1f1b18; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* One 6.4s loop: press (screen goes dark, button lit), hold, press again
   (screen back on), hold. Paused while off screen (.is-paused). */
.ig-tt-card.is-play .ig-tt-finger { animation: igTtPush 6.4s ease infinite; }
.ig-tt-card.is-play .ig-tt-btn rect { animation: igTtLit 6.4s ease infinite; }
.ig-tt-card.is-play .ig-tt-ring { animation: igTtRing 6.4s ease-out infinite; }
.ig-tt-card.is-play .ig-tt-off { animation: igTtOff 6.4s ease infinite; }
.ig-tt-card.is-paused * { animation-play-state: paused !important; }
@keyframes igTtPush { 0%, 8%, 16%, 58%, 66%, 100% { transform: none; } 12%, 62% { transform: translateY(5px); } }
@keyframes igTtLit { 0%, 11% { fill: #e4dccd; } 14%, 61% { fill: var(--landing-coral); } 64%, 100% { fill: #e4dccd; } }
@keyframes igTtRing { 0%, 11%, 24%, 61%, 74%, 100% { transform: scale(1); opacity: .9; } 17%, 67% { transform: scale(1.25); opacity: .35; } }
@keyframes igTtOff { 0%, 13% { opacity: 0; } 22%, 61% { opacity: 1; } 70%, 100% { opacity: 0; } }

/* 2. Their space, private by default: Bondi asks on Mom & Dad's frame; the
   update (a note card, never a photo: photos go
   from family to them) heads for your phone, stops at the lock between the
   two (marked "Not today."), shakes and goes back. 6s loop, paused off screen. Without the loop it
   rests at the lock. */
.ig-tt-scene { position: relative; aspect-ratio: 300 / 140; margin-top: 30px; }
.ig-tt-scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ig-tt-ask { fill: #f6efe4; font: 500 15px/1 var(--display, "Newsreader", serif); text-anchor: middle; }
.ig-tt-no { fill: var(--landing-coral); font: 400 13px/1 var(--landing-handwritten, "Kalam", cursive); text-anchor: middle; }
.ig-tt-phone { fill: #f6f1e7; stroke: #1f1b18; stroke-width: 3; }
.ig-tt-phone-screen { fill: #fffdf9; stroke: #1f1b18; stroke-width: 1.2; opacity: .9; }
.ig-tt-you { fill: var(--landing-tert); font: 400 16px/1 var(--landing-handwritten, "Kalam", cursive); text-anchor: middle; }
.ig-tt-wire { fill: none; stroke: #1f1b18; stroke-width: 1.8; stroke-dasharray: 4 5; stroke-linecap: round; opacity: .45; }
.ig-tt-upd { fill: #fffdf9; stroke: #1f1b18; stroke-width: 1.6; }
.ig-tt-upd-dot { fill: var(--landing-coral); }
.ig-tt-upd-line { fill: none; stroke: #1f1b18; stroke-width: 1.6; stroke-linecap: round; opacity: .45; }
.ig-tt-gate circle { fill: var(--landing-coral); }
.ig-tt-gate rect, .ig-tt-gate path { fill: none; stroke: #fffdf9; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ig-tt-gate { transform-box: fill-box; transform-origin: center; }
.ig-tt-try { transform: translate(151px, 71px); }
.ig-tt-card.is-play .ig-tt-try { animation: igTtTry 6s ease-in-out infinite; }
.ig-tt-card.is-play .ig-tt-gate { animation: igTtGate 6s ease infinite; }
@keyframes igTtTry {
  0% { opacity: 0; transform: translate(64px, 84px); }
  10% { opacity: 1; transform: translate(64px, 84px); }
  32% { opacity: 1; transform: translate(151px, 71px); }
  36% { transform: translate(145px, 71px); }
  40% { transform: translate(150px, 71px); }
  44%, 62% { opacity: 1; transform: translate(147px, 71px); }
  78%, 100% { opacity: 0; transform: translate(96px, 78px); }
}
@keyframes igTtGate { 0%, 30% { transform: none; } 36% { transform: scale(1.2); } 44%, 100% { transform: none; } }

@media (min-width: 960px) {
  .ig-tt-grid { grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin-top: 56px; }
  .ig-tt-card { padding: 28px 40px 36px; }
  /* Both questions hold two lines' height, so the pictures and answers
     of the two cards line up even when one question fits on one line. */
  .ig-tt-card .ig-tt-q { display: flex; align-items: center; justify-content: center; min-height: 2.4em; font-size: 26px; }
  .ig-tt-frame { margin-top: 96px; }
  /* Same bottom line as the privacy frame: its 96px plus the 80 units this
     scene is shorter (140 vs 220 of 300 wide). */
  .ig-tt-scene { margin-top: calc(96px + 26.667%); }
}