/* 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%; }

/* ---------- 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; }

  .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). Nothing here changes a value the export set.
   ===================================================================== */

/* 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; }
}

/* 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;
}