/* BleepFace mascot layer (2026-09-27). Loaded after the live site's own CSS.
   1) The retired two tone lockup (amber box around "Face") becomes one word,
      one colour, no box: the style App Review flagged under 2.3.1(a) is gone.
   2) The hoodie mascot appears small around the page as real 3D video clips
      (transparent WebM for Chrome/Firefox/Android, premultiplied HEVC for
      Safari and iOS). His still first frame is the poster, so he is visible
      without JavaScript, with reduced motion, or when animations are paused. */
.wordmark-small span { background: none; color: inherit; padding: 0; margin-left: 0; border-radius: 0; }

/* One brand, same as the app: amber is retired, the icon's sky blue is the
   only accent, and the canvas is the app's near black. His light falls from
   the top right behind the phones and eases into the dark with no edge,
   the same light the app home uses. */
:root { --amber: #36C5FF; --ink: #090B10; --paper: #F2F6F9; }
/* The light: an angled sky gradient in one layer behind the whole page top,
   feathered out vertically so it never ends on a line. */
html { background: #090B10; }
body { background: transparent !important; position: relative; }
body::before {
  content: ""; display: block !important; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 1150px; pointer-events: none;
  background: linear-gradient(208deg, #36C5FF 0%, #2AA8E4 10%, #1A7FB5 20%, #0F5580 30%, #09344F 40%, #061D2E 50%, #090B10 64%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.25) 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.25) 86%, transparent 100%);
}
.opening, .live-campaign { background: transparent; }
.action, .mode-tabs button[aria-selected="true"] { color: #001523; }
.action:hover { background: #fff; transform: none; }

.bf { position: absolute; z-index: 4; cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: filter .7s cubic-bezier(.4,0,.2,1), opacity .7s cubic-bezier(.4,0,.2,1); }
/* Tap him and he gets bleeped: he dissolves into a blur, then comes back. */
.bf.bleeped { filter: blur(22px); opacity: 0; transition-duration: .55s; }
@media (prefers-reduced-motion: reduce) { .bf, .bf.bleeped { filter: none; } }
.bf video { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; background: transparent; }

/* Hero phones: the black status strip over each screenshot had wide, flat
   corners (20% of its width by 20% of its short height), which stuck out
   past the phone frame's rounded corners once the sky light sat behind the
   phones. It now takes the screen's own corner: the screenshot's 7.4% of
   the width, and 3.55% of the screenshot's height, which is 50.3% of the
   strip's height. */
.campaign-phones .hero-native-status { border-radius: 7.4% 7.4% 0 0 / 50.3% 50.3% 0 0; }

/* Hero: he hangs off the top of the live camera phone. */
.campaign-phones .after .phone-hardware { position: relative; }
.bf--peek { top: 0.6%; left: 31%; width: 38%; aspect-ratio: 766 / 700; transform: translateY(-82.14%); }

/* Your footage: he sits on the word "footage", legs over the letters.
   Sized in em so he scales with the heading on every screen. */
.perch { position: relative; display: inline-block; }
.bf--sit { display: block; left: var(--perch-x, 0.38em); bottom: var(--perch-y, 0.46em); height: 1.6em; aspect-ratio: 460 / 700; }

/* Be in the moment: the record light ends the line in place of the full
   stop, a touch bigger than before, and scales with the heading. */
.live-copy h2 .record-light { width: .22em; height: .22em; margin: 0 0 0 .12em; }
/* The light never wraps onto a line of its own: it travels with "moment". */
.rec-word { white-space: nowrap; }
/* He stands on the "B" of "Be" and films straight across at her face,
   leaning in a touch and swaying as he holds the shot. Sized in the
   heading's own em, so his sneakers stay on the letter at every width:
   0.85em up from the foot of the line is the top of the B, and his feet
   centre on it. */
.bf--film { height: 1.3em; aspect-ratio: 448 / 600; left: -0.257em; bottom: 0.85em; }
/* The narrowest desktop column: "the moment" plus the light (6.06em) fits
   on one line, so the heading never stacks three deep. */
@media (min-width: 761px) and (max-width: 819px) {
  .live-copy h2 { font-size: calc((50vw - 70px) / 6.12); }
}
/* The photo is scaled down so the whole phone shows, from its top edge to
   the record button, and reads as the live camera rather than the editor.
   The frame runs from just above the phone to its foot (rows 340 to 1800
   of the 1800 row photo), pinned to the bottom, and the bottom fade starts
   right under the record button. */
.live-art { height: auto; }
.live-art img {
  display: block; width: min(100%, 585px); height: auto; aspect-ratio: 950 / 1460; object-position: 0 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 94.8%, rgba(0,0,0,.62) 96.6%, rgba(0,0,0,.26) 98.4%, transparent), linear-gradient(to right, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 94.8%, rgba(0,0,0,.62) 96.6%, rgba(0,0,0,.26) 98.4%, transparent), linear-gradient(to right, #000 72%, transparent);
}

/* On your phone: he lounges on top of the phone outline. */
.privacy-art { position: relative; }
.bf--lounge { left: 12%; width: 76%; aspect-ratio: 1054 / 700; top: -28.2%; }

/* Pricing: the inspector stands on the price line, just right of the
   headline. Sized in the headline's own em: its widest line, "Make it Pro.",
   is 5.66em wide, so he keeps the same small gap at every width. */
.price-grid { position: relative; }
.bf--inspect { font-size: clamp(45px, 5vw, 70px); left: 6.1em; bottom: calc(100% - 1px); height: clamp(120px, 10vw, 150px); aspect-ratio: 524 / 900; }

/* Footer: the bouncer on the door, beside the signature. */
.campaign-footer { position: relative; }
.bf--bouncer { right: var(--gutter, 32px); bottom: 38px; height: clamp(96px, 8.5vw, 130px); aspect-ratio: 704 / 1000; }

/* Small desktop: the headline is at its 45px minimum (255px wide), so the
   copy beside it stops short of the inspector standing next to it. */
@media (min-width: 761px) and (max-width: 900px) {
  .pricing-heading .section-copy { max-width: min(35ch, calc(100% - 360px)); }
}

@media (max-width: 760px) {
  .bf--peek { width: 44%; left: 28%; }
  /* phone: the photo sits below the heading, so on the B he turns to face
     into the page instead of off its edge */
  .bf--film { left: 0.036em; }
  .bf--film video { transform: scaleX(-1); }
  /* phone: "the moment" plus the light is 6.06em wide, so on the narrowest
     phones the heading eases down a few px and stays on two lines */
  .live-copy h2 { font-size: min(58px, calc((100vw - 2 * var(--gutter, 22px)) / 6.12)); }
  /* phone: the whole phone and its record button again, full width up to
     480px, with a little more room above the phone (rows 380 to 1800) */
  .live-art img {
    width: min(100%, 480px); margin-inline: auto; aspect-ratio: 950 / 1420;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 94.8%, rgba(0,0,0,.62) 96.6%, rgba(0,0,0,.26) 98.4%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 94.8%, rgba(0,0,0,.62) 96.6%, rgba(0,0,0,.26) 98.4%, transparent);
  }
  /* phone: the lock art sits below its copy, so he lies on the phone outline with room above */
  .privacy-art { margin-top: 70px; }
  .bf--lounge { top: -27%; }
  /* phone: the heading stacks, so he stands on the line right above $0 and
     the copy above him keeps clear of his head */
  .bf--inspect { left: auto; right: 0; height: 112px; }
  .pricing-heading .section-copy { padding-right: 78px; }
  /* phone: the bouncer stands beside the signature, not over the links */
  .campaign-footer .signature { padding-right: 90px; }
  .bf--bouncer { right: var(--gutter, 22px); bottom: 42px; top: auto; height: 96px; }
}
/* Wide screens: the column is wider than the photo, so it sits next to the
   copy instead of stranding a gap in the middle, and its outer edge (where
   the phone runs out of the frame) dissolves into the page too. */
@media (min-width: 1171px) {
  .live-art img {
    margin-left: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 94.8%, rgba(0,0,0,.62) 96.6%, rgba(0,0,0,.26) 98.4%, transparent), linear-gradient(to right, transparent, rgba(0,0,0,.35) 5%, rgba(0,0,0,.75) 10%, #000 15%, #000 72%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 94.8%, rgba(0,0,0,.62) 96.6%, rgba(0,0,0,.26) 98.4%, transparent), linear-gradient(to right, transparent, rgba(0,0,0,.35) 5%, rgba(0,0,0,.75) 10%, #000 15%, #000 72%, transparent);
  }
}
/* Wider phones and small tablets: the photo stops at 480px, centred, so its
   sides dissolve into the page as well. */
@media (min-width: 481px) and (max-width: 760px) {
  .live-art img {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 94.8%, rgba(0,0,0,.62) 96.6%, rgba(0,0,0,.26) 98.4%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 94.8%, rgba(0,0,0,.62) 96.6%, rgba(0,0,0,.26) 98.4%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
}

/* Round 6: plan names are h3 now (h2 then h3, no skipped level); same look as the old h4. */
.price-grid h3 { font-size: 17px; margin: 0; }

/* Footer: the motion toggle reads like its neighbours (no underline,
   same hover as the Support / Privacy / Terms links). */
.campaign-footer .motion-toggle { text-decoration: none; transition: color .2s ease; }
.campaign-footer .motion-toggle:hover { color: var(--paper); }

/* Launch day only: make_deploy_bundle.sh --app-id swaps the release line's
   "Coming to the App Store." for Apple's official badge. */
.release-line .store-badge { display: inline-block; line-height: 0; }
.release-line .store-badge img { height: 40px; width: auto; }

/* Tablet widths: five plans as three plus two, the two centred, instead of a lone Free row. */
@media (min-width: 900px) and (max-width: 1200px) {
  .price-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .price-grid > article,
  .price-grid .free-tier { grid-column: span 2; }
  /* Round 12: the second row's two plans sit centred under the first three,
     so no empty sixth cell is left at the end. */
  .price-grid > article:nth-of-type(4) { grid-column: 2 / span 2; }
  .price-grid > article:nth-of-type(5) { grid-column: 4 / span 2; }
}

/* Round 16: "less." reads sharp most of the time and blurs briefly, so the
   headline is legible on first load and between pulses (sharp about 5 of
   every 7 seconds). Reduced motion and the pause toggle still stop it. */
@media (prefers-reduced-motion: no-preference) {
  .blur-word { animation-name: word-blur-brief; animation-duration: 7s; }
  .motion-paused .blur-word { animation: none; }
}
@keyframes word-blur-brief {
  0%, 70%, 100% { filter: blur(0); }
  78%, 86% { filter: blur(.14em); }
}

/* App icon beside the wordmark, top left of the home page (Jordan 2026-10-01). */
.wordmark-small { display: inline-flex; align-items: center; gap: 0.42em; }
.wordmark-small .wordmark-icon { width: 1.45em; height: 1.45em; border-radius: 22.37%; flex: none; }