/* FocusCap — implemented from Figma (focuscap / Section 2)
   Fonts: Archivo (Google Fonts) for UI text, Instrument Serif italic as the
   closest free stand-in for PP Editorial New Italic, system SF Pro for the
   in-app recorder mockup. */

:root {
  --bg: #010201;
  --green: #9dd600;
  --green-bright: #c3f407;
  --green-highlight: #b4fe00;
  --text-dim: #8c8c8c;
  --text-soft: rgba(255, 255, 255, 0.6);
  --font-ui: "Archivo", sans-serif;
  --font-serif: "Instrument Serif", "PP Editorial New", serif;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: #fff;
  font-family: var(--font-ui);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img { display: block; }

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--green);
}

/* ---------- Section heading / caption ---------- */

.section-title {
  font-size: 30px;
  line-height: 40px;
  letter-spacing: -0.6px;
  font-weight: 400;
  text-align: center;
  color: #fff;
}

.section-caption {
  font-size: 24.4px;
  line-height: 31.3px;
  letter-spacing: -0.28px;
  color: var(--text-dim);
  text-align: center;
}

/* ---------- Nav ---------- */

.nav {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
}

/* logo left, links pulled right next to the Login button */
.nav .nav-links { margin-left: auto; }
.nav > .btn-light { margin-left: 24px; }

.nav-logo img { height: 40px; width: auto; }

.nav-links {
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14px;
  line-height: 24px;
  color: #f0f0f0;
}

.nav-links a { font-weight: 500; opacity: 0.65; transition: opacity 0.15s; }
.nav-links a:hover, .nav-links a.active { opacity: 1; }

.btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  background: #f0f0f0;
  color: #000;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14px;
  line-height: 24px;
  backdrop-filter: blur(25px);
  transition: background 0.15s;
}
.btn-light { transition: background 0.15s, transform 0.15s; }
.btn-light:hover { background: #fff; transform: translateY(-1px); }

/* Mobile header + menu */
.mobile-header { display: none; }
.mobile-menu { display: none; }

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  z-index: 2;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* glow is allowed to bleed into the next section so the hero doesn't end
     with a hard edge; body clips the horizontal overflow */
  pointer-events: none;
}
.hero a, .hero button { pointer-events: auto; }
.hero button.recorder-cta { pointer-events: none; }

.hero-inner {
  position: relative;
  z-index: 1;
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.hero-glow {
  position: absolute;
  left: 50%;
  top: 436px;
  transform: translateX(-50%);
  width: 815px;
  height: 725px;
  pointer-events: none;
  z-index: 0;
}
.hero-glow img {
  position: absolute;
  inset: -78.93% -70.21%;
  width: 240.42%;
  height: 257.86%;
  max-width: none;
  /* soft fade instead of a hard clip at the hero boundary */
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 72%);
}

.hero-body {
  display: flex;
  flex-direction: column;
  gap: 27px;
  align-items: center;
}

.hero-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

/* App icon */
.app-icon {
  position: relative;
  width: 91px;
  height: 91px;
}
.app-icon .app-icon-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-icon .app-icon-glow {
  position: absolute;
  left: 15px; top: 15px;
  width: 34px; height: 34px;
  mix-blend-mode: screen;
  overflow: visible;
}
.app-icon .app-icon-glow img {
  position: absolute; inset: -111%;
  width: 322%; height: 322%; max-width: none;
}
.app-icon .app-icon-mark {
  position: absolute;
  left: 21.5px; top: 23px;
  width: 49px; height: 49px;
}

/* Recorder widget */
.recorder {
  position: relative;
  width: 370px;
  height: 331px;
}
.recorder-panel-bg {
  position: absolute;
  left: 0; top: 0;
  width: 370px; height: 331px;
}
.recorder-panel-bg img { width: 103.14%; height: 103.35%; max-width: none; margin-left: -1.57%; }
.recorder-content {
  position: absolute;
  left: 16px; top: 30px;
  width: 338px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.recorder-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recorder-title img { height: 24px; width: auto; }
.recorder-titlebar-icons { display: flex; gap: 8px; align-items: center; }
.chip-icon {
  width: 28px; height: 28px;
  background: #2f3424;
  border: 1px solid #464646;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.chip-icon img { width: 20px; height: 20px; }
.recorder-close { width: 28px; height: 28px; }
.recorder-close img { width: 100%; height: 100%; }

.recorder-rows { display: flex; flex-direction: column; gap: 16px; }
.recorder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recorder-row-left { display: flex; gap: 8px; align-items: center; }
.row-icon {
  width: 32px; height: 32px;
  background: #343a25;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.row-icon img { width: 24px; height: 24px; }
.row-labels {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-system);
}
.row-labels .row-title { font-size: 14px; font-weight: 500; color: #fff; line-height: 1.2; }
.row-labels .row-sub { font-size: 12px; color: #a9a9a9; line-height: 1.2; }
.row-labels .row-sub.off { color: #6f6f6f; }
.row-right { display: flex; gap: 8px; align-items: center; }
.row-right .chevron { width: 14px; height: 14px; }
.row-right .toggle { width: 42px; height: 24px; }
.recorder-divider { width: 100%; height: 1px; }
.recorder-divider img { width: 100%; height: 1px; }

.recorder-cta-wrap { position: relative; width: 100%; }
.recorder-cta-glow {
  position: absolute;
  left: 12%; bottom: -12px;
  width: 76%; height: 26px;
  pointer-events: none;
}
.recorder-cta-glow img {
  position: absolute; inset: -154% -15.6%;
  width: 131%; height: 408%; max-width: none;
}
.recorder-cta {
  position: relative;
  width: 100%;
  height: 53px;
  display: flex; align-items: center; justify-content: center;
  border: 0.66px solid #b5e20f;
  border-radius: 12px;
  background: linear-gradient(to right, rgba(60, 75, 24, 0.5), rgba(76, 92, 25, 0.5) 50%, rgba(60, 75, 24, 0.5));
  color: var(--green-bright);
  font-family: var(--font-system);
  font-size: 18.5px;
  font-weight: 500;
  letter-spacing: -0.41px;
  /* decorative mockup button — not interactive */
  cursor: default;
  pointer-events: none;
}

/* Hero headline */
.hero-headline {
  font-size: 30px;
  line-height: 40px;
  letter-spacing: -0.6px;
  text-align: center;
  color: #fff;
  font-weight: 400;
}

.hero-cta-row { display: flex; flex-direction: column; gap: 24px; align-items: center; }

/* ---------- Generic section shell ---------- */

.section {
  position: relative;
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Full-width section visuals exported from Figma (visual separated from content) */
.band {
  display: block;
  width: min(1440px, 100vw);
  max-width: none;
  height: auto;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .m-only { display: none !important; }
}

/* ---------- Screen record section ---------- */

.screencast { gap: 0; }
.screencast .band-screencast { margin-top: max(-30px, -2.08vw); }
.screencast .browser-shot {
  width: 1101px;
  max-width: 100%;
  border: 1px solid #373737;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-top: 40px;
}
.screencast .browser-shot img { width: 100%; height: auto; }
.screencast .browser-shot.mobile-only { display: none; }

/* ---------- Edit smarter (transcribe) section ---------- */

.transcribe-stage {
  position: relative;
  width: min(1440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* overlap margins scale with the band (band width = min(1440px, 100vw)),
   so captions keep the same relative distance at any viewport */
.transcribe-stage .band-transcribe { margin-top: max(-105px, -7.29vw); }
.transcribe-stage + .feature-caption { margin-top: max(-80px, -5.56vw); }
.transcribe-stage .section-title {
  position: absolute;
  top: 27px;
  left: 0; right: 0;
  z-index: 3;
}
.transcribe-copy {
  width: 864px;
  max-width: 92%;
  font-size: 28px;
  line-height: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.transcribe-copy .hl {
  font-style: italic;
  color: #456d00;
  background: var(--green-highlight);
}
.transcribe-fade { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.transcribe-fade::before,
.transcribe-fade::after,
.transcribe-fade .fade-top,
.transcribe-fade .fade-bottom { content: ""; position: absolute; }
.transcribe-fade::before {
  left: 0; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(to right, #010201 0%, rgba(1, 2, 1, 0) 39.6%);
}
.transcribe-fade::after {
  right: 0; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(to left, #010201 0%, rgba(1, 2, 1, 0) 39.6%);
}
.transcribe-fade .fade-top {
  left: 0; right: 0; top: 0; height: 291px;
  background: linear-gradient(to bottom, #010201 0%, rgba(1, 2, 1, 0) 60.4%);
}
.transcribe-fade .fade-bottom {
  left: 0; right: 0; bottom: 0; height: 291px;
  background: linear-gradient(to top, #010201 0%, rgba(1, 2, 1, 0) 60.4%);
}
.transcribe-stage .feature-pill-wrap { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); z-index: 3; }
.feature-caption { margin-top: 27px; width: 420px; max-width: 100%; }

/* Supporting text, not a second heading.
   The under-illustration captions carried the Figma value straight through at
   24.4px and competed with the 30px section titles they sit below (#291).
   Scoped to .feature-caption on purpose: the same .section-caption class is the
   page-hero subtitle on help, blog, about, pricing, privacy and security, and
   those sit under a heading rather than a picture — Ayda's ask was the
   under-illustration ones. */
.feature-caption { font-size: 17px; line-height: 26px; letter-spacing: -0.1px; }

/* ---------- Feature pill (shared) ---------- */

.feature-pill-wrap { position: relative; }
.feature-pill-glow {
  position: absolute;
  left: 50%; bottom: -24px;
  transform: translateX(-50%);
  width: 189px; height: 40px;
  pointer-events: none;
}
.feature-pill-glow img {
  position: absolute; inset: -130% -28%;
  width: 156%; height: 360%; max-width: none;
}
.feature-pill {
  position: relative;
  width: 326px;
  height: 80px;
  border-radius: 70px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.4px solid #171717;
  backdrop-filter: blur(8.75px);
  display: flex; align-items: center; justify-content: center;
}
.feature-pill-inner {
  width: 312px;
  height: 66px;
  border-radius: 35px;
  border: 1.75px solid #000;
  background: linear-gradient(to bottom, #171717, #000);
  box-shadow: inset 3.5px 3.5px 7px rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
.feature-pill-inner img { width: 28px; height: 28px; }
.feature-pill-inner span {
  font-size: 24.5px;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Trim & Stitch section ---------- */

.trim-wrap {
  width: min(1440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trim-wrap .band-trim { margin-top: max(-105px, -7.29vw); margin-bottom: max(-150px, -10.42vw); }
.trim-wrap .band-trim + * + * + .feature-caption,
.trim-wrap .band-trim ~ .feature-caption { margin-top: 0; }
.trim-stage {
  position: relative;
  width: 740px;
  height: 352px;
  margin-top: 40px;
}
.trim-stage .trim-glow {
  position: absolute;
  left: 150px; top: 15px;
  width: 440px; height: 320px;
  pointer-events: none;
}
.trim-stage .trim-glow img { width: 100%; height: 100%; object-fit: contain; }
.trim-stage .clip-1 {
  position: absolute;
  left: 0; top: 53px;
  width: 408px; height: 231px;
}
.trim-stage .clip-1 img { width: 100%; height: 103.46%; max-width: none; margin-top: -1.73%; }
.trim-stage .clip-2 {
  position: absolute;
  left: 232px; top: 173px;
  width: 508px; height: 92px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
}
.trim-stage .clip-2-inner {
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  background: #111;
  border: 3px solid #1e1e1e;
  box-shadow: inset 0 0 30px 10px rgba(255, 255, 255, 0.05);
}
.trim-stage .clip-2-bars {
  position: absolute;
  left: 65px; top: 30px;
  width: 383px; height: 30px;
}
.trim-stage .clip-2-bars img { width: 103.14%; height: 140%; max-width: none; margin: -10% 0 0 -1.57%; }
.trim-wrap .feature-pill-wrap { margin-top: 26px; }

/* ---------- Auto-Dub section ---------- */

.dub-wrap {
  width: min(1440px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dub-wrap .band-dub { margin-top: max(-160px, -11.11vw); margin-bottom: max(-170px, -11.81vw); }
.dub-wrap .band-dub ~ .feature-caption { margin-top: 0; }
.dub-stage {
  position: relative;
  width: 778px;
  height: 240px;
  margin-top: 22px;
}
.dub-stage .dub-beam {
  position: absolute;
  left: 273px; top: 0;
  width: 442px; height: 227px;
}
.dub-stage .dub-beam img { width: 133%; height: 148.4%; max-width: none; margin: -24.2% 0 0 -16.5%; }
.dub-stage .waveform {
  position: absolute;
  left: 126px; top: 63px;
  width: 360px; height: 100px;
}
.dub-stage .waveform img { width: 100%; height: 100%; }
.dub-stage .dub-particles {
  position: absolute;
  left: 339px; top: 52px;
  width: 181px; height: 131px;
}
.dub-stage .dub-particles img { width: 100%; height: 100%; }
.dub-stage .dub-hi {
  position: absolute;
  left: 7px; top: 88px;
  font-size: 31px;
  background: linear-gradient(90deg, #97e401 0%, #6da501 74.5%, #010201 108%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.dub-stage .dub-es {
  position: absolute;
  left: 500px; top: 90px;
  font-size: 31px;
  background: linear-gradient(to right, #fff 10.8%, #080808 88.9%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.dub-wrap .feature-pill-wrap { margin-top: 40px; }

/* ---------- Meetings (coming soon) section ---------- */

.meetings { gap: 36px; }
.meetings-header { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.meetings-header .coming-soon {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--green);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.48px;
}
.meetings-features {
  display: flex;
  gap: 100px;
  justify-content: center;
}
.meetings-feature {
  width: 219px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  font-size: 14px;
  letter-spacing: -0.16px;
}
.meetings-feature h3 { font-size: 14px; font-weight: 400; line-height: 1; color: #fff; }
.meetings-feature p { color: var(--text-dim); line-height: 18px; }
.meetings-feature hr { display: none; }
.meetings .meeting-shot {
  width: 1101px;
  max-width: 100%;
  margin-top: 0;
}
.meetings .meeting-shot img { width: 100%; height: auto; }
.meetings .meeting-shot.mobile-only { display: none; }

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

.footer {
  position: relative;
  padding: 100px 80px;
  min-height: 730px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.footer-gradient {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 569px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 569' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.000013976 56.9 -214.66 0.000039082 720 0.0000045716)'><stop stop-color='rgba(0,0,0,0)' offset='0.3741'/><stop stop-color='rgba(39,54,0,0.25)' offset='0.48989'/><stop stop-color='rgba(79,107,0,0.5)' offset='0.60568'/><stop stop-color='rgba(118,161,0,0.75)' offset='0.72148'/><stop stop-color='rgba(157,214,0,1)' offset='0.83727'/><stop stop-color='rgba(162,217,13,1)' offset='0.84744'/><stop stop-color='rgba(168,219,26,1)' offset='0.85761'/><stop stop-color='rgba(178,224,52,1)' offset='0.87795'/><stop stop-color='rgba(189,229,78,1)' offset='0.89829'/><stop stop-color='rgba(200,235,104,1)' offset='0.91863'/><stop stop-color='rgba(221,245,155,1)' offset='0.95932'/><stop stop-color='rgba(242,255,207,1)' offset='1'/></radialGradient></defs></svg>");
  background-size: 100% 100%;
}
.footer-inner {
  position: relative;
  z-index: 1;
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 53px;
}
.footer-top { display: flex; flex-direction: column; gap: 20px; }
.footer-brand-row {
  display: flex;
  align-items: center;
}
/* logo left, copyright pulled right next to the Login button */
.footer-brand-row .footer-copyright { margin-left: auto; }
.footer-brand-row > .btn-light { margin-left: 24px; }
.footer-brand-row .footer-logo img { height: 40px; width: auto; }
.footer-copyright {
  font-size: 12px;
  line-height: 1.6;
  text-transform: uppercase;
  color: #fff;
  text-align: right;
}
.footer-tagline {
  font-size: 12px;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.footer-cols { display: flex; gap: 53px; }
.footer-col { display: flex; flex-direction: column; gap: 20px; }
.footer-col h4 {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.5;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  letter-spacing: 0.14px;
  line-height: 1.4;
}
.footer-col ul .soon { color: #666; }
.footer-col a { transition: color 0.15s; }
.footer-col a:hover { color: var(--green); }
.footer-col.col-company { width: 97px; }
.footer-col.col-resources { width: 103px; }
.footer-col.col-downloads { width: 158px; }
.footer-col.col-social { width: 63px; }
.footer-copyright-mobile { display: none; }

/* ---------- Pricing page ---------- */

.pricing-hero {
  position: relative;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  overflow: hidden;
}
.pricing-hero .nav { width: 600px; max-width: 100%; position: relative; z-index: 1; }
.pricing-hero .hero-glow { top: 436px; }

.pricing-body {
  position: relative;
  z-index: 1;
  width: 1113px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.pricing-header {
  display: flex;
  flex-direction: column;
  gap: 52px;
  align-items: center;
}
.pricing-header-copy { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.pricing-header-copy .section-caption { width: 367px; max-width: 100%; }

.billing-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
}
.billing-toggle button {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: #141313;
  color: #fff;
  opacity: 0.5;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.billing-toggle button:hover { opacity: 0.85; background: #1a1a1a; }
.billing-toggle button.active { background: #1e1e1e; opacity: 1; }

.plans {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
}
.plan-card {
  position: relative;
  width: 368px;
  min-height: 683px;
  background: #191919;
  border: 1px solid #1e1e1e;
  border-radius: 16px;
  padding: 27px;
  display: flex;
  flex-direction: column;
}
.plan-card.featured { background: #232323; border-color: #333; }
.plan-badge {
  position: absolute;
  top: 7px; right: 9px;
  padding: 7px;
  border: 1px solid rgba(157, 214, 0, 0.3);
  border-radius: 8px;
  background: rgba(157, 214, 0, 0.05);
  color: var(--green);
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
}
.plan-name { font-size: 20px; font-weight: 400; line-height: 1.2; letter-spacing: -0.2px; }
.plan-desc {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.14px;
  color: var(--text-soft);
  max-width: 310px;
  min-height: 40px;
}
.plan-starts {
  margin-top: 32px;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-soft);
}
.plan-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 12px;
  padding-bottom: 24px;
  border-bottom: 1px solid #333;
}
.plan-price { font-size: 40px; line-height: 1.2; letter-spacing: -0.4px; }
.plan-period { font-size: 13px; text-transform: uppercase; color: #666; line-height: 1.2; padding-bottom: 6px; }
.plan-features {
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plan-features li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.14px;
}
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 16px; height: 16px;
  background: url("../assets/pricing/icon-check.svg") no-repeat center / contain;
}
.plan-cta {
  margin-top: auto;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: #333;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.plan-cta:hover { background: #404040; transform: translateY(-1px); }
.plan-cta.primary { background: var(--green); color: #000; }
.plan-cta.primary:hover { background: var(--green-bright); }

/* Enterprise */
.enterprise {
  width: 100%;
  background: #141313;
  border: 1px solid #333;
  border-radius: 16px;
  padding: 28px 0 28px 28px;
  display: flex;
  gap: 54px;
}
.enterprise-left {
  width: 310px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 60px;
}
.enterprise-left .plan-desc { margin-top: 15px; min-height: 0; }
.enterprise-left .coming { font-size: 30px; line-height: 1.2; letter-spacing: -0.3px; color: #959595; }
.enterprise-right {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 720px;
  max-width: 100%;
}
.enterprise-features {
  display: flex;
  gap: 48px;
  filter: blur(3.75px);
}
.enterprise-features .plan-features { margin-top: 0; }
.enterprise .book-call {
  width: 692px;
  max-width: 95%;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: #191919;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.2;
  filter: blur(3.75px);
}

/* ---------- Content pages (Security / Support) ---------- */

.page-hero {
  position: relative;
  padding: 80px 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}
.page-hero .nav { width: 600px; max-width: 100%; position: relative; z-index: 1; }
.page-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.page-hero-copy .section-caption { max-width: 520px; }

.page-body {
  position: relative;
  z-index: 1;
  width: 1113px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 40px 0 120px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
.info-card {
  background: #191919;
  border: 1px solid #1e1e1e;
  border-radius: 16px;
  padding: 27px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.info-card:hover {
  border-color: #333;
  background: #1d1d1d;
  transform: translateY(-2px);
}
.info-card h3 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.info-card p {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.14px;
  color: var(--text-soft);
}
.info-card .card-label {
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--green);
}

/* wide highlight card */
.info-card.wide { grid-column: 1 / -1; flex-direction: row; gap: 0; align-items: stretch; background: #141313; border-color: #333; padding: 0; }
.info-card.wide > div { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.info-card.wide > div + div { border-left: 1px solid #1e1e1e; }
.info-card.wide:hover { transform: none; background: #141313; }

/* About page prose */
.prose {
  width: 640px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.prose p {
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.1px;
  color: rgba(255, 255, 255, 0.75);
}
.prose a { color: var(--green); }
.prose a:hover { color: var(--green-bright); }
.prose .prose-signoff {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--green);
  font-size: 20px;
}

/* Desktop app download page */
.download-hero { min-height: calc(100vh - 730px); }
.download-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 60px 0 140px;
}
.app-icon-scale {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-icon-scale .app-icon { transform: scale(1.75); transform-origin: center; }
.download-note {
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: -20px;
}

/* FAQ */
.faq {
  width: 740px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* group labels styled like the pricing eyebrows (STARTS AT / RECOMMENDED) */
.faq .section-title {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  color: var(--green);
  margin-bottom: 12px;
}
.faq .section-title:not(:first-child) { margin-top: 48px; }
.faq details {
  background: #141313;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color 0.2s, background 0.2s;
}
.faq details:hover { border-color: #333; }
.faq details[open] { background: #191919; border-color: #333; }
.faq summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--green);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.14px;
  color: var(--text-soft);
}

/* contact strip */
.contact-strip {
  width: 100%;
  background: #141313;
  border: 1px solid #333;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.contact-strip h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.2px; }
.contact-strip p { font-size: 14px; color: var(--text-soft); margin-top: 8px; }
.contact-strip .btn-light {
  background: var(--green);
  padding: 10px 24px;
  flex-shrink: 0;
}
.contact-strip .btn-light:hover { background: var(--green-bright); }

/* =====================================================================
   Mobile (Figma frames: Mobile - home 141:1400, Mobile Menu, Mobile - Pricing)
   ===================================================================== */

@media (max-width: 767px) {
  .desktop-only { display: none !important; }
  .desktop-shot { display: none !important; }

  /* Header */
  .nav { display: none; }
  .mobile-header {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding: 24px 16px 0;
  }
  .mobile-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
  }
  .mobile-header-bar .brand img { width: 40px; height: 40px; }
  .menu-btn {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #f0f0f0;
  }
  .menu-btn svg { width: 20px; height: 20px; }
  .menu-btn .icon-close { display: none; }
  .menu-btn img { width: 20px; height: 20px; }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 84px;
    left: 16px; right: 16px;
    z-index: 19;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(50px);
    padding: 23px 24px;
  }
  body.menu-open .mobile-menu { display: block; }
  body.menu-open .menu-btn .icon-burger { display: none; }
  body.menu-open .menu-btn .icon-close { display: block; }
  .mobile-menu nav { display: flex; flex-direction: column; }
  .mobile-menu nav a {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14px;
    line-height: 24px;
    color: #f0f0f0;
    opacity: 0.5;
  }
  .mobile-menu nav a { transition: opacity 0.15s; }
  .mobile-menu nav a:hover, .mobile-menu nav a.active { opacity: 1; }
  .menu-btn { transition: background 0.15s; }
  .menu-btn:hover { background: rgba(255, 255, 255, 0.12); }
  .mobile-menu .btn-light { width: 100%; height: 32px; margin-top: 16px; }

  /* Hero */
  .hero { padding: 124px 16px 80px; }
  .hero-inner { width: 100%; gap: 24px; }
  .hero-glow { top: 220px; width: 677px; height: 482px; }
  .app-icon { width: 80px; height: 80px; }
  .app-icon .app-icon-mark { left: 19px; top: 20px; width: 43px; height: 43px; }
  .recorder { width: 328px; max-width: 100%; height: 325px; }
  .recorder-panel-bg { width: 100%; height: 100%; }
  .recorder-content { width: 296px; top: 24px; }
  .hero-headline { font-size: 30px; }

  /* Sections */
  .section { padding: 80px 16px; }
  .section-title { font-size: 30px; line-height: 40px; }
  .section-caption { font-size: 22px; line-height: 30px; }
  /* Tracks the desktop reduction proportionally (#291). */
  .feature-caption { font-size: 15px; line-height: 23px; }

  .screencast .browser-shot.desktop-shot { display: none; }
  .screencast .browser-shot.mobile-only {
    display: block;
    border: none;
    box-shadow: none;
    width: 328px;
    margin-top: 20px;
  }

  .transcribe-stage { height: 460px; overflow: hidden; justify-content: center; }
  .transcribe-stage + .feature-caption { margin-top: 27px; }
  .transcribe-copy { font-size: 18px; }
  /* keep the heading readable: darken the copy behind it */
  .transcribe-fade .fade-top {
    height: 240px;
    background: linear-gradient(to bottom, #010201 35%, rgba(1, 2, 1, 0) 100%);
  }
  /* restore breathing room between pill and caption (desktop band rules zero it) */
  .trim-wrap .feature-caption,
  .dub-wrap .feature-caption { margin-top: 24px !important; }
  .transcribe-stage .feature-pill-wrap { bottom: 20px; }

  /* Feature pills scale down (Figma: 212x62, text 17px) */
  .feature-pill { width: 212px; height: 62px; }
  .feature-pill-inner { width: 200px; height: 50px; border-radius: 25px; gap: 10px; }
  .feature-pill-inner img { width: 20px; height: 20px; }
  .feature-pill-inner span { font-size: 17px; }
  .feature-pill-glow { width: 144px; height: 16px; bottom: -14px; }

  /* Trim + dub stages scale via transform */
  .trim-stage {
    transform: scale(0.44);
    transform-origin: top center;
    margin: 20px 0 -185px;
  }
  .trim-wrap { max-width: 100%; overflow: visible; }
  .dub-stage {
    transform: scale(0.44);
    transform-origin: top center;
    margin: 10px 0 -185px;
  }
  .dub-stage .dub-es { left: auto; right: 60px; }

  /* Meetings */
  .meetings-features { flex-direction: column; gap: 24px; align-items: center; }
  .meetings-feature { width: 100%; max-width: 328px; }
  .meetings-feature + .meetings-feature { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; }
  .meetings .meeting-shot.desktop-shot { display: none; }
  .meetings .meeting-shot.mobile-only { display: block; width: 333px; }

  /* Footer */
  .footer { padding: 80px 16px 24px; min-height: 0; }
  .footer-gradient { height: 169px; }
  .footer-inner { width: 100%; gap: 28px; }
  .footer-brand-row { flex-direction: column; gap: 12px; }
  .footer-brand-row .footer-copyright { display: none; }
  .footer-tagline { text-align: center; padding: 0 16px; }
  .footer-brand-row .btn-light { display: none; }
  .footer-login-mobile { display: flex; width: 100%; height: 32px; }
  .footer-cols { flex-direction: column; gap: 28px; }
  .footer-col { flex-direction: row; justify-content: space-between; width: 100% !important; }
  .footer-col h4 { width: 86px; }
  .footer-col ul { width: 158px; }
  .footer-copyright-mobile {
    display: block;
    margin-top: 60px;
    font-size: 12px;
    line-height: 1.6;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    position: relative;
    z-index: 1;
  }

  /* Content pages */
  .page-hero { padding: 124px 16px 24px; gap: 40px; }
  .page-body { padding: 16px 0 80px; gap: 48px; }
  .info-grid { grid-template-columns: 1fr; }
  .info-card.wide { flex-direction: column; align-items: stretch; gap: 0; }
  .info-card.wide > div + div { border-left: none; border-top: 1px solid #1e1e1e; }
  .contact-strip { flex-direction: column; align-items: stretch; text-align: center; }

  /* Pricing */
  .pricing-hero { padding: 124px 16px 60px; gap: 40px; }
  .plans { flex-direction: column; gap: 16px; }
  .plan-card { width: 100%; min-height: 0; }
  .plan-cta { margin-top: 28px; }
  .enterprise { flex-direction: column; padding: 28px 20px; gap: 32px; }
  .enterprise-left { width: 100%; gap: 32px; }
  .enterprise-features { flex-direction: column; gap: 16px; }
  .enterprise .book-call { width: 100%; max-width: 100%; }
}

@media (min-width: 768px) {
  .footer-login-mobile { display: none; }
}

/* Mid-width safety: scale down wide fixed stages */
@media (min-width: 768px) and (max-width: 1180px) {
  .screencast .browser-shot, .meetings .meeting-shot { width: 100%; }
  .transcribe-stage { width: 100%; }
  .plans { flex-wrap: wrap; justify-content: center; }
}

/* =====================================================================
   SITE ADDITIONS — everything above this line is the design export,
   byte for byte.
   =====================================================================

   The stylesheet above is `css/style.css` out of the Focuscap design export,
   copied unchanged so that the next export can be diffed against it instead of
   reconciled by hand. That is the whole point of the split: if a rule above
   ever disagrees with the export, the export wins and the fix is a re-copy.

   Below are only the things a published site needs and a design export has no
   reason to carry — an accessible skip link, a menu that opens without
   JavaScript, and styling for the three pages this site has that the export
   does not (blog, privacy, 404).

   Three blocks do change a value the export set, and each says so where it
   sits: the pricing page now sells four plans and the export drew three, so the
   fixed card width could not survive; Enterprise's blur is now owned by the
   config's `comingSoon` flag rather than being permanent; and the mobile header
   bar drops its blur while the menu is open, because that blur was stopping the
   menu's own. Everything else here leaves the export's numbers alone.
   ===================================================================== */

/* Skip link. Off-screen until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 8px 16px;
  background: #f0f0f0;
  color: #000;
  border-radius: 8px;
  font-size: 14px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* Mobile menu without JavaScript.
 *
 * The export opens the menu with `onclick="document.body.classList.toggle(...)"`
 * and a `body.menu-open` rule. These pages are served with `script-src 'none'`,
 * so that handler would be refused by the browser and the menu would simply not
 * open — a dead button, on the only navigation a phone gets.
 *
 * <details>/<summary> gives the same behaviour with no script, and unlike the
 * checkbox-and-label trick it is a real disclosure widget: keyboard-operable,
 * and announced with its expanded state by a screen reader. The export's
 * `.menu-btn` styling applies unchanged because the summary carries that class.
 */
.mobile-nav > summary {
  list-style: none;
}
.mobile-nav > summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 767px) {
  .mobile-nav[open] .mobile-menu { display: block; }
  .mobile-nav[open] .menu-btn .icon-burger { display: none; }
  .mobile-nav[open] .menu-btn .icon-close { display: block; }
}

/* The open menu's frosted glass, and where it sits.
 *
 * Both were broken by one property on an ancestor. The menu lives inside
 * `.mobile-header-bar`, and the bar's own `backdrop-filter: blur(2px)` makes it
 * the menu's backdrop root — the furthest the menu's `blur(50px)` can see — and
 * its containing block. So the glass blurred only the bar, which has nothing
 * below its own 54px, and showed the hero through it untouched: the app icon
 * behind "Home", the recorder behind "Login". And `top: 84px; left: 16px;
 * right: 16px`, which the design measures from the header, were measured from
 * the bar: the panel opened 24px lower and 16px narrower on each side than the
 * Figma frame (141:1961).
 *
 * In the design the panel is the bar's sibling, not its child. Dropping the
 * bar's blur while the menu is open leaves the panel no ancestor with a
 * backdrop-filter, so it blurs the page and is placed against the header. This
 * changes an export value, but only while open, and the bar's 2px blur sits
 * over the near-black top of the hero, where it was never visible.
 */
@media (max-width: 767px) {
  .mobile-header-bar:has(.mobile-nav[open]) { backdrop-filter: none; }
  /* Safari before 18 knows the property only by its prefixed name. */
  .mobile-menu { -webkit-backdrop-filter: blur(50px); }
}

/* A phone opened the page 1009px wide.
 *
 * The hero glow is drawn far wider than a phone on purpose — at 390px its image
 * runs out to x=1009 — and the export cuts it off with `body { overflow-x:
 * hidden }`. That rule is handed to the viewport, and a desktop browser honours
 * it. A phone's browser does not: it sizes the page to its content, so every
 * page with this glow opened 1009px wide, scrolled or zoomed out sideways.
 * /pricing never did, because .pricing-hero already clips with `overflow:
 * hidden`.
 *
 * `clip`, on the section and on the x axis only. The glow still bleeds down
 * into the next section, which is what the export's comment on .hero asks for
 * and why this is not `hidden`; and `clip` makes no scroll container, so
 * nothing inside loses `position: sticky`.
 */
.hero,
.page-hero { overflow-x: clip; }

/* Long-form pages the export does not cover: /privacy, /blog, /404.
 * They reuse .page-hero / .page-body / .prose; only the elements .prose has no
 * rule for are added here, at the export's own scale. */
.prose h2 {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #fff;
}
.prose h3 {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}
.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.1px;
  color: rgba(255, 255, 255, 0.75);
}
.prose li::marker { color: var(--green); }
.prose strong { font-weight: 500; color: #fff; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--green);
}
.prose .prose-meta {
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Reduced motion. The export sets `scroll-behavior: smooth` and transitions on
 * hover; both are preferences a visitor is allowed to turn off. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* /security is a technical document, not a marketing page, and the export has
 * no rules for the elements it needs: a contents list, tables, and blocks of
 * shipped configuration. What the page says is decided in another repository
 * (see scripts/check-security-page.mjs); this is only how it looks, and every
 * value below is taken from a card, a border or a colour the export already
 * uses. */
.prose--doc { width: 740px; }
.prose--doc > section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prose--doc h2 { margin-top: 0; }

.toc {
  background: #141313;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 20px 24px;
}
.toc__title {
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.toc ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-soft);
}
.toc a { transition: color 0.15s; }
.toc a:hover { color: var(--green); }

.table-scroll { overflow-x: auto; }
.prose--doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.14px;
  color: var(--text-soft);
  text-align: left;
}
.prose--doc th,
.prose--doc td {
  padding: 12px 16px;
  border: 1px solid #1e1e1e;
  vertical-align: top;
}
.prose--doc thead th {
  background: #191919;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.prose--doc tbody th {
  background: #141313;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

.prose--doc pre {
  overflow-x: auto;
  background: #141313;
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 20px 24px;
}
.prose--doc pre code {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
}

@media (max-width: 767px) {
  .toc ul { grid-template-columns: 1fr; }
}

/* /pricing — the billing period, without a click handler.
 *
 * The export toggles Monthly/Yearly with nine lines of JavaScript. This site is
 * served `script-src 'none'` on every page, and /security states that as a
 * fact, so the toggle is two radios and a sibling selector instead. Both prices
 * ship in the markup and CSS decides which is shown; the labels carry the
 * export's own button styling, restated here because the export block above is
 * kept byte-identical to what the design shipped.
 */
.period__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.billing-toggle label {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: #141313;
  color: #fff;
  opacity: 0.5;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.billing-toggle label:hover { opacity: 0.85; background: #1a1a1a; }

#p-monthly:checked ~ .pricing-header .billing-toggle label[for="p-monthly"],
#p-yearly:checked ~ .pricing-header .billing-toggle label[for="p-yearly"] {
  background: #1e1e1e;
  opacity: 1;
}
/* The radio is invisible, so its focus ring has to appear on the label. */
#p-monthly:focus-visible ~ .pricing-header .billing-toggle label[for="p-monthly"],
#p-yearly:focus-visible ~ .pricing-header .billing-toggle label[for="p-yearly"] {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* The plan calls to action are links, not the export's inert buttons, so they
 * need the centring a button gives for free.
 *
 * Declared before the period rules below, and matched by them at the same or
 * higher specificity. `a.plan-cta` is one element plus one class, so a bare
 * `.cta--yearly { display: none }` loses to it — which showed both prices at
 * once and made the pricing page 144px taller than the design on a phone. */
a.plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.price--yearly { display: none; }
a.cta--yearly { display: none; }
#p-yearly:checked ~ .plans .price--monthly { display: none; }
#p-yearly:checked ~ .plans .price--yearly { display: revert; }
#p-yearly:checked ~ .plans a.cta--monthly { display: none; }
#p-yearly:checked ~ .plans a.cta--yearly { display: flex; }

/* /help links a phrase to the pricing page. The export marks it with a style
 * attribute, which this site's CSP drops on the floor. */
.inline-link { color: var(--green); }
.inline-link:hover { color: var(--green-bright); }

/* Present to a screen reader and to a crawler, absent from the layout. Used
 * for the /desktop heading, which the design does not draw. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A fourth plan, where the export drew three.
 *
 * This is the one place below this line that changes a value the export set,
 * and it has to: `.pricing-body` is 1113px and `.plan-card` is a fixed 368px,
 * which is exactly three cards and four gaps. Team makes four, so either the
 * row overflows the page or the cards share it. They share it — the card keeps
 * its designed width wherever there is room for four of them, and shrinks
 * before the page ever scrolls sideways.
 *
 * Scoped to >= 768px on purpose. Below that the export stacks `.plans` into a
 * column, and a flex-basis in a column axis is a HEIGHT: an unscoped
 * `flex: 1 1 260px` would give every card on a phone a 260px basis and stretch
 * it, which is not a narrower card but a wrong one.
 */
@media (min-width: 768px) {
  .pricing-body { width: 1496px; }             /* 4 x 368 + 3 x 4 gap */
  .plans { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .plan-card { width: auto; flex: 1 1 calc(50% - 16px); max-width: 368px; }
}

/* Four across only once the row can hold four. Below this the cards pair off
 * two and two, which is the arrangement the wrap produces anyway — stating it
 * here is what stops the last card being stranded alone on a second row. */
@media (min-width: 1240px) {
  .plans { gap: 4px; }
  .plan-card { flex-basis: 260px; }
}

/* Team is priced per seat, and the qualifier belongs next to the number rather
 * than in the feature list. A team plan read as a flat fee is a surprise on the
 * first invoice, and the free viewer role is the reason per-seat is bearable —
 * both are worth a line above the fold of the card. */
.plan-seat-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.13px;
  color: #666;
}

/* Enterprise: the blur belongs to "coming soon", not to the band.
 *
 * The export blurs .enterprise-features unconditionally (above, in the export
 * region, left untouched). That was right while Enterprise was the only state
 * it had — the bullets describe the package at launch, so they are shown and
 * deliberately not readable yet.
 *
 * It is now the config that decides. functions/_lib/render-plans.js adds
 * .is-upcoming when the tier's `comingSoon` is true, exactly where it adds the
 * "Coming soon" label, so the two can never disagree. Without the flag this
 * cancels the export's filter rather than editing it: the export stays
 * byte-for-byte diffable, and the day Enterprise ships, clearing the flag in
 * the admin panel unblurs the list with no deploy.
 */
.enterprise-features:not(.is-upcoming) {
  filter: none;
}

/* =====================================================================
   HOME V2 — Figma "Home-V2" (484:1600) and "Mobile - home" (1138:13698)
   =====================================================================

   The home page was redesigned after the export above was taken, and the
   redesign arrived as Figma frames, not as a new export. So everything that
   changed lives here, read off the frames, and the export block stays
   diffable: when a V2 export lands, it replaces the rules above and this block
   shrinks to whatever the site still has to add.

   What changed: a new recorder popover in the hero, a new screen-recording
   picture, a new "Screenshot anything" section, a new meetings picture, and
   the three feature pills now open a picture of the feature in the editor
   (Figma 487:17078, 487:20465, 487:20458). On a desktop Transcribe, Trim and
   Dub keep the export's bands, which V2 did not redraw; on a phone V2 did, and
   they are pictures like the rest. Pictures are exported from the frames and
   listed in assets/home-v2/README.md.
   ===================================================================== */

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

/* Scoped to .hero: the glow is shared with every page's .page-hero. */
.hero .hero-glow { top: 308px; }
.hero-body { gap: 40px; }
.hero-stack { gap: 12px; }

/* The recorder popover (541:1169). Every length is a multiple of --u, because
   the phone frame draws the same popover at 326.346/472 of its desktop size —
   all of it, borders and blur included, except the two corner radii. */
.rec {
  --u: 1px;
  --rec-tallest: 518;   /* the Meetings pane, the tallest: 517.6 with the tippy and its margin */
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-ui);
}
.rec img { max-width: none; }
.rec picture { display: contents; }
.rec-tippy {
  position: relative;
  z-index: 2;
  width: calc(23.5 * var(--u));
  height: calc(10.712 * var(--u));
  margin-top: calc(1.288 * var(--u));
}
.rec-panel {
  width: calc(472 * var(--u));
  padding: calc(24 * var(--u)) 0;
  display: flex;
  justify-content: center;
  background: rgba(23, 23, 23, 0.8);
  /* #525252 in the frame, but its Glass effect lays down about 60% of that
     stroke: measured on the render, the edge sits at 41-48 over a 23 ground. */
  border: calc(1.276 * var(--u)) solid rgba(82, 82, 82, 0.6);
  border-radius: 20px;
  box-shadow: 0 calc(6.756 * var(--u)) calc(6.756 * var(--u)) rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(calc(12.762 * var(--u)));
  backdrop-filter: blur(calc(12.762 * var(--u)));
}
/* 431 inside 472 minus 24 a side does not fit; the frame centres it and lets
   it overhang, so the visible inset is 19.2 a side. Same here. */
.rec-inner {
  flex-shrink: 0;
  width: calc(431 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.rec-header { display: flex; align-items: center; justify-content: space-between; }
/* The logo's box is 138x24; its artwork overhangs it on three sides. */
.rec-logo {
  width: calc(139.628 * var(--u));
  height: calc(27.256 * var(--u));
  margin: calc(-1.831 * var(--u)) 0 calc(-1.425 * var(--u)) calc(-1.628 * var(--u));
}
.rec-header-icons { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.rec-icon-btn { display: flex; padding: calc(8 * var(--u)); }
.rec-icon-btn img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

.rec-modes {
  display: flex;
  gap: calc(6 * var(--u));
  padding: calc(6 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(23, 23, 23, 0.8);
}
.rec-mode {
  width: calc(135.667 * var(--u));
  height: calc(40 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(12 * var(--u));
}
/* The Glass effect draws a light edge on the control and on the chosen mode,
   brightest top-left; an inset highlight is the CSS for it. */
.rec-modes,
.rec-mode:has(input:checked) {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), inset -1px -1px 0 rgba(255, 255, 255, 0.025);
}
.rec-mode:has(input:checked) { background: rgba(23, 23, 23, 0.8); }
.rec-mode img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
/* The modes are radio buttons laid over each segment: a click, a tap or the
   arrow keys pick one, and the chosen segment shows its icon in lime. */
.rec-mode {
  position: relative;
  cursor: pointer;
  pointer-events: auto;     /* the hero is pointer-events: none */
  -webkit-tap-highlight-color: transparent;
}
.rec-mode input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rec-mode .rec-mode-on,
.rec-mode:has(input:checked) .rec-mode-off { display: none; }
.rec-mode:has(input:checked) .rec-mode-on { display: block; }
.rec-mode:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }

/* One pane per mode. The popover around them is as tall as its pane, as the
   frames draw it; .rec reserves the tallest so the page below never moves. */
.rec { min-height: calc(var(--rec-tallest) * var(--u)); justify-content: flex-start; }
.rec-pane { display: none; flex-direction: column; gap: calc(24 * var(--u)); }
.rec:has(input[value="record"]:checked) .rec-pane-record,
.rec:has(input[value="meetings"]:checked) .rec-pane-meetings,
.rec:has(input[value="screenshot"]:checked) .rec-pane-screenshot { display: flex; }

/* Meetings (1349:11825) */
.rec-upcoming { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.rec-kicker {
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  color: #a3a3a3;
  text-transform: uppercase;
}
.rec-row-sub.is-live { color: #baeb07; }
.rec-row-right.is-tight { gap: calc(4 * var(--u)); }
.rec-btn {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(36 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  color: #f5f5f5;
  white-space: nowrap;
}
.rec-btn img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.rec-btn.is-compact { padding: calc(8 * var(--u)); }
.rec-btn.is-primary { background: #baeb07; color: #171717; }
.rec-btn.is-disabled { color: #525252; }
.rec-btn.is-outline {
  border: calc(1 * var(--u)) solid #525252;
  background: rgba(23, 23, 23, 0.8);
  -webkit-backdrop-filter: blur(calc(15 * var(--u)));
  backdrop-filter: blur(calc(15 * var(--u)));
}
.rec-paste { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.rec-input,
.rec-icon-box {
  height: calc(40 * var(--u));
  display: flex;
  align-items: center;
  border: calc(1 * var(--u)) solid #525252;
  border-radius: calc(8 * var(--u));
  background: rgba(23, 23, 23, 0.8);
}
.rec-input {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u));
  font-size: calc(14 * var(--u));
  line-height: 1.3;
  color: #a3a3a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-icon-box {
  width: calc(40 * var(--u));
  flex-shrink: 0;
  justify-content: center;
  -webkit-backdrop-filter: blur(calc(15 * var(--u)));
  backdrop-filter: blur(calc(15 * var(--u)));
}
.rec-icon-box img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* Screenshot (1349:11951): the recent-shots mark is three rotated cards,
   25.45 square, drawn in CSS from the frame's boxes and angles. */
.rec-shots {
  position: relative;
  flex-shrink: 0;
  width: calc(39.79 * var(--u));
  height: calc(39.79 * var(--u));
  overflow: hidden;
}
.rec-shots i {
  position: absolute;
  width: calc(25.45 * var(--u));
  height: calc(25.45 * var(--u));
  border-radius: calc(5.09 * var(--u));
  transform: translate(-50%, -50%) rotate(var(--r));
}
.rec-shots i:nth-child(1) { left: calc(14.86 * var(--u)); top: calc(21.326 * var(--u)); --r: -10.66deg; background: linear-gradient(rgba(51, 70, 0, 0.8), rgba(28, 39, 0, 0.8)); }
.rec-shots i:nth-child(2) { left: calc(18.745 * var(--u)); top: calc(19.169 * var(--u)); --r: 5.7deg; background: linear-gradient(#9dd600, #496400); }
.rec-shots i:nth-child(3) {
  left: calc(23.442 * var(--u));
  top: calc(19.738 * var(--u));
  --r: 26.16deg;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#d4d4d4, #baeb07);
}
.rec-shots img { width: calc(11.4249 * var(--u)); height: calc(11.4249 * var(--u)); transform: rotate(0.41deg); }

.rec-rows { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.rec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8 * var(--u));
}
.rec-row-left { display: flex; align-items: center; gap: calc(10.21 * var(--u)); }
.rec-row-icon {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(8 * var(--u));
  background: rgba(23, 23, 23, 0.8);
}
.rec-row-icon img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.rec-row-labels {
  display: flex;
  flex-direction: column;
  gap: calc(2.552 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
}
.rec-row-title { font-size: calc(18 * var(--u)); color: #f5f5f5; }
.rec-row-sub { font-size: calc(16 * var(--u)); color: #a3a3a3; }
/* Each switch's row names its device while on and reads "Off" in the
   disabled grey once a visitor turns it off. */
.rec-row-sub.rec-when-off { display: none; color: #525252; }
.rec-row:has(.rec-switch input:not(:checked)) .rec-when-on { display: none; }
.rec-row:has(.rec-switch input:not(:checked)) .rec-when-off { display: block; }
.rec-row-right { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.rec-grabber {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.rec-grabber img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
/* The two switches are the only working part of the drawing: a checkbox each,
   so they need no script and work from the keyboard. Drawn from the frame's
   two variants (544:1486 off, 544:1487 on): a 54x30 track, #262626 or #baeb07,
   and a 20px knob, #f5f5f5 or white, 5 in from the end, with the frame's
   2.55/2.55 drop shadow. The knob slides; pressing it stretches it, as a
   switch does. */
.rec-switch {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: calc(54 * var(--u));
  height: calc(30 * var(--u));
  top: calc(-1 * var(--u)); /* the frame renders it a pixel above centre */
  pointer-events: auto;     /* the hero is pointer-events: none */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rec-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rec-switch-track {
  position: absolute;
  inset: 0;
  border-radius: calc(15 * var(--u));
  background: #262626;
  pointer-events: none;
  transition: background 0.2s ease;
}
.rec-switch-knob {
  position: absolute;
  left: calc(5 * var(--u));
  top: calc(5 * var(--u));
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #f5f5f5;
  box-shadow: 0 calc(2.552 * var(--u)) calc(5.105 * var(--u)) rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, width 0.15s ease, background 0.2s ease;
}
.rec-switch input:checked + .rec-switch-track { background: #baeb07; }
.rec-switch input:checked + .rec-switch-track .rec-switch-knob {
  background: #fff;
  transform: translateX(calc(24 * var(--u)));
}
.rec-switch input:active + .rec-switch-track .rec-switch-knob { width: calc(24 * var(--u)); }
.rec-switch input:checked:active + .rec-switch-track .rec-switch-knob {
  transform: translateX(calc(20 * var(--u)));
}
.rec-switch input:focus-visible + .rec-switch-track {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
/* A 1.5px rule centred on a zero-height row, as the frame draws it. */
.rec-divider {
  height: calc(1.5 * var(--u));
  margin: calc(-0.75 * var(--u)) 0;
  background: rgba(82, 82, 82, 0.5);
}

.rec-cta { position: relative; width: calc(430 * var(--u)); height: calc(68 * var(--u)); }
.rec-cta-glow {
  position: absolute;
  left: 0;
  top: calc(-20.31 * var(--u));
  width: calc(429.294 * var(--u));
  height: calc(135.279 * var(--u));
  pointer-events: none;
}
.rec-cta-btn {
  pointer-events: auto;     /* a link to sign-in; the hero is pointer-events: none */
  text-decoration: none;
  transition: filter 0.2s ease;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(1 * var(--u)) solid #baeb07;
  border-radius: 16px;
  background: linear-gradient(to right, rgba(80, 109, 0, 0.5), rgba(51, 70, 0, 0.5) 50%, rgba(80, 109, 0, 0.5));
  color: #baeb07;
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* Desktop draws the Design System's MenuBarPopover (Focuscap - Design Systems,
   1280:11419) instead: 351.209 wide, which is this 472 popover at 0.744086.
   Lengths below are that frame's, in --u. Phones keep the phone frame above. */
@media (min-width: 768px) {
  .rec { --u: 0.744086px; --rec-tallest: 512; }
  /* Its tippy has an outline, overlaps the panel by the frame's 1px, and is
     cut to the 8.929px frame it sits in. */
  .rec-tippy {
    width: calc(24.4602 * var(--u));
    height: calc(12 * var(--u));
    margin: 0 0 calc(-1.3439 * var(--u));
    object-fit: cover;
    object-position: top;
  }
  /* Figma's stroke does not take layout room; the border-box here does. */
  .rec-panel { padding: calc(22.724 * var(--u)); border-radius: calc(20 * var(--u)); }
  .rec-inner { width: calc(424 * var(--u)); }
  .rec-icon-btn { padding: calc(10.5594 * var(--u)); }
  .rec-icon-btn img { width: calc(14.8813 * var(--u)); height: calc(14.8813 * var(--u)); }
  .rec-mode { width: auto; flex: 1 0 0; }
  .rec-mode:has(input:checked) { background: #262623; }
  /* Rows are 431 wide in a 424 column and overhang it to the right; the
     rules between them stay column-wide. */
  .rec-row { width: calc(431 * var(--u)); }
  .rec-pane-record .rec-row { height: calc(61.5582 * var(--u)); }
  /* The code export gives 9.97 / 8.86 here, but the frame renders its text
     variables at 13 and 11.9 (measured off Figma's render against this page);
     the subtitle is therefore unchanged from the home frame's 16. */
  .rec-row-title { font-size: calc(17.4711 * var(--u)); }
  .rec-cta { width: calc(424 * var(--u)); height: calc(64.5087 * var(--u)); }
  .rec-cta-glow {
    left: calc(-0.7519 * var(--u));
    top: calc(-21.8921 * var(--u));
    width: calc(424.731 * var(--u));
    height: calc(133.575 * var(--u));
  }
  .rec-cta-btn { border-radius: calc(16 * var(--u)); }
}

.rec-cta-btn:hover { filter: brightness(1.2); }
.rec-cta-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Screen recording ---------- */

/* The band is the section's frame from y=170 down to the bottom of its glow
   at y=992, in a section 981 tall. Margins scale with the band, like the
   export's. */
/* The desktop picture is a cut-out product shot on a transparent ground, not a
   full-bleed band: the toolbar, webcam and finished clip overhang the screen
   inside the picture's own margin. Drawn so the screen is as wide as the old
   band's (~1101px), and scaled down with the page below that. */
.screencast .screencast-v3 {
  display: block;
  width: min(1152px, calc(100% - 48px));
  height: auto;
  margin-top: 48px;
}

/* ---------- Transcribe, Trim, Dub ---------- */

/* Same bands, placed where V2 places them: each sits a little lower under its
   heading than the export had it, and the caption rides up the band. Read off
   the frames: pill centres at 621.5 / 532.5 / 442.5, captions at 685 / 611 /
   531, sections 805 / 811 / 721 tall. */
.transcribe-stage .band-transcribe { margin-top: max(-100px, -6.9444vw); }
.transcribe-stage + .feature-caption { margin-top: max(-115px, -7.9861vw); }
.trim-wrap .band-trim { margin-top: max(-100px, -6.9444vw); margin-bottom: max(-200px, -13.8889vw); }
.trim-wrap { padding-bottom: 80px; }
.dub-wrap .band-dub { margin-top: max(-139px, -9.6528vw); margin-bottom: max(-191px, -13.2639vw); }
.dub-wrap { padding-bottom: 70px; }

/* V2 sets the captions at 16/20, a step under the 17/26 of #291, and lets each
   run as wide as its sentence. Positioned because the band above them now is
   (it holds the pill's button), and a positioned box paints over an unpositioned
   one whatever their order: the band's lower edge was covering the caption. */
.feature-caption {
  position: relative;
  width: auto;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0;
}

/* ---------- Feature pills open the feature ---------- */

/* The pill is part of the band's picture — on a phone too, where V2 redrew
   these three sections and they are exported like the rest — so a transparent
   button is laid over exactly where the picture draws it. On a desktop the
   wrapper carries the band's class, so the export's overlap margins apply to
   it unchanged. */
.band-pill { position: relative; }
.band-pill > img { display: block; width: 100%; height: auto; }
.pill-hit {
  position: absolute;
  left: 50%;
  width: 22.6389%;            /* 326 / 1440 */
  aspect-ratio: 326 / 80;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: transparent;
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s;
}
.pill-hit--transcribe { top: 77.6%; }   /* 620.8 / 800 */
.pill-hit--trim { top: 63.79%; }        /* 491.8 / 771 */
.pill-hit--dub { top: 61.28%; }         /* 441.8 / 721 */
/* Hover only where there is one: on a touch screen :hover sticks to the last
   thing tapped, and would leave the pill lit after its picture is closed. */
@media (hover: hover) {
  .pill-hit:hover {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 0 1px rgba(157, 214, 0, 0.35), 0 0 32px rgba(157, 214, 0, 0.2);
  }
}
.pill-hit:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

/* ---------- The feature pictures (popovers) ---------- */

.feature-modal {
  width: min(690px, calc(100vw - 32px));
  height: auto;
  aspect-ratio: 1;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #020302;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 80px rgba(0, 0, 0, 0.6);
}
.feature-modal:popover-open { animation: feature-modal-in 0.22s ease-out; }
.feature-modal::backdrop {
  background: rgba(1, 2, 1, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.feature-modal:popover-open::backdrop { animation: feature-modal-fade 0.22s ease-out; }
.feature-modal > img { width: 100%; height: 100%; }
/* The frame's close icon sits at (650,16); the button is a 40px target with
   the icon where the frame draws it. */
.feature-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}
@media (hover: hover) {
  .feature-modal-close:hover { background: rgba(255, 255, 255, 0.1); }
}
.feature-modal-close:focus-visible { outline: 2px solid var(--green); outline-offset: 0; }
.feature-modal-close img { width: 24px; height: 24px; }

@keyframes feature-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}
@keyframes feature-modal-fade {
  from { opacity: 0; }
}

/* ---------- Screenshot anything (1030:36182, hover 1030:36764) ---------- */

.shot-wrap {
  position: relative;
  width: min(1440px, 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The band runs 17px past the section's content, into its padding. */
  margin-bottom: max(-17px, -1.1806vw);
}
.shot-caption {
  margin-top: 16px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.28px;
  text-align: center;
  color: var(--text-dim);
}
.shot-stage {
  position: relative;
  width: 100%;
  margin-top: 18px;
}
.shot-library { width: 100%; height: auto; }
/* The hover frame lays a 60% scrim over the whole block, heading included
   (150,100 1140x789), and the editor window over that. */
.shot-dim {
  position: absolute;
  top: 0;
  left: 10.4167%;
  right: 10.4167%;
  bottom: min(17px, 1.1806vw);
  z-index: 2;
  background: rgba(1, 2, 1, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.shot-editor {
  position: absolute;
  left: 20.5556%;             /* 296 / 1440 */
  top: 7.3276%;               /* (261 - 210) / 696 */
  width: 58.8889%;            /* 848 / 1440 */
  height: auto;
  z-index: 3;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
}
/* What opens it is the new capture floating over the library — the frame's
   "screenshot/hover" card, 336x196 at (830,578), brackets included — not the
   whole library. A transparent button over the card, so a keyboard reaches it
   and a tap on a phone counts as hovering it. Once the editor is up it covers
   most of the card, so pointing at the editor keeps it open; it is invisible,
   and so cannot be pointed at, until then. */
.shot-hit {
  position: absolute;
  left: 57.6389%;             /* 830 / 1440 */
  top: 52.8736%;              /* (578 - 210) / 696 */
  width: 23.3333%;            /* 336 / 1440 */
  height: 28.1609%;           /* 196 / 696 */
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shot-hit:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.shot-wrap:has(.shot-hit:hover, .shot-hit:focus, .shot-editor:hover) .shot-dim { opacity: 1; }
.shot-stage:has(.shot-hit:hover, .shot-hit:focus, .shot-editor:hover) .shot-editor {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* ---------- Meetings ---------- */

/* V2 leaves 300px between the bottom of the picture and the footer's logo. */
.meetings { padding-bottom: 200px; }

/* The export carries 25px of the frame's glow on every side of the 1101px
   desktop, so it hangs that far outside its slot. */
.meetings .meetings-v2 {
  width: 1151px;
  max-width: calc(100% + 50px);
  height: auto;
  margin: -25px;
}

/* ---------- Phone ---------- */

@media (max-width: 767px) {
  .hero { padding-bottom: 40px; }
  .hero .hero-glow { top: 220px; }
  .hero-body { gap: 24px; }
  .hero-stack { gap: 4px; }
  .rec { --u: 0.69141px; }   /* 326.346 / 472 */

  /* The phone's pictures are the section frames cut below the heading, 360
     wide, so they are placed at 360 whatever the phone, like the frame. Their
     glow and shadow run past the frame's content, hence the negative margins. */
  .screencast-v2-m,
  .band-m,
  .meetings-v2-m { width: 360px; max-width: none; flex-shrink: 0; }
  .screencast-v2-m,
  .meetings-v2-m { height: auto; }
  .screencast-v2-m { margin: 42px 0 -7px; }     /* frame 202..597, shadow to 604 */

  /* V2 sets these headings narrower, so each breaks onto two lines. "Edit
     smarter, not" fits 288 in Chrome's serif and not in Figma's, so that one
     is a <br>. */
  .transcribe-stage { height: auto; overflow: visible; }
  .transcribe-stage .section-title { position: static; }
  .trim-wrap .section-title,
  .dub-wrap .section-title { width: 216px; }
  .trim-wrap .band-m,
  .dub-wrap .band-m { margin-top: 2px; }        /* headings are 82 tall there */
  .pill-hit { width: 58.8889%; aspect-ratio: 212 / 62; border-radius: 31px; }
  .pill-hit--transcribe-m { top: 85.714%; }     /* 330 / 385 */
  .pill-hit--trim-m { top: 84.012%; }           /* 289 / 344 */
  .pill-hit--dub-m { top: 80.144%; }            /* 222.8 / 278 */

  .feature-caption { font-size: 16px; line-height: 24px; }
  .transcribe-stage + .feature-caption { width: 232px; margin-top: 0; }
  .trim-wrap .feature-caption { width: 262px; }
  .dub-wrap .feature-caption { width: 224px; }
  .trim-wrap .feature-caption,
  .dub-wrap .feature-caption { margin-top: 0 !important; }   /* the export's is !important */
  .trim-wrap { padding-bottom: 0; }
  .dub-wrap { padding-bottom: 31px; }           /* section 599 tall */

  /* The phone frame bleeds the library off both edges, so the section does
     too; and the library's shadow hangs 108px into the next section. */
  .shot { padding-left: 0; padding-right: 0; }
  .shot-wrap { width: 100%; margin-bottom: -108.33px; }
  .shot-caption { font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .shot-stage { margin-top: 26px; }
  .shot-library-m { width: 100%; height: auto; }
  .shot-dim { left: 0; right: 0; bottom: 0; }
  .shot-editor {
    left: 4%;
    width: 92%;
    top: 46.8%;
    transform: translateY(-50%) scale(0.98);
  }
  .shot-stage:has(.shot-hit:hover, .shot-hit:focus, .shot-editor:hover) .shot-editor { transform: translateY(-50%); }
  /* The phone frame's card: 224x131 at (67.7,298.7) of the 360x517 picture. */
  .shot-hit { left: 18.8%; top: 57.74%; width: 62.22%; height: 25.32%; }

  .meetings { gap: 40px; padding-bottom: 80px; }
  .meetings-feature p { max-width: 219px; margin: 0 auto; }   /* the desktop column's width */
  .meetings-v2-m { margin-bottom: -58.33px; }   /* frame 554..1059, glow to 1117 */
}