/* ==========================================================================
   FocusCap v2 landing
   Values below are lifted from the Figma file "focuscap v2" (node 82:204)
   rather than eyeballed: the palette comes from the file's solid fills and
   the type scale from its text styles.
   ========================================================================== */

:root {
  --bg: #010201;
  --accent: #b4fe00;
  --accent-dim: #9dd600;
  --accent-deep: #91ca06;

  --text: #ffffff;
  --text-soft: #eae7e5;
  --text-muted: #d9d9d9;
  --text-dim: #5e5e5e;

  --surface: #1f1f1f;
  --surface-card: #191919;
  --surface-raised: #232323;
  --surface-sunken: #141313;
  --border: #363636;
  --border-soft: #252525;
  --border-strong: #333333;

  --text-quiet: #8c8c8c;
  --text-faint: #666666;

  --radius-card: 16px;
  --radius-control: 8px;

  /* The design sets everything on a 1440 frame; content clusters sit in a
     600px centred column and only the product mockups run wider. */
  --col: 600px;
  --col-wide: 1280px;

  --step-nav: 0.875rem;    /* 14px */
  --step-body: 0.8125rem;  /* 13px */
  --step-lead: 1.5rem;     /* 24px */
  --step-head: 1.875rem;   /* 30px */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The accent ellipse Figma paints behind the hero and behind the pricing
     table. One definition, because it is one thing in the design. */
  --glow: radial-gradient(
    ellipse at center,
    rgb(180 254 0 / 0.34) 0%,
    rgb(157 214 0 / 0.19) 36%,
    rgb(145 202 6 / 0.09) 58%,
    rgb(120 168 4 / 0.03) 74%,
    transparent 86%
  );
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Smooth scrolling is here for the contents list on /security, which is CSS-only
   because that page runs script-src 'none'. The reduced-motion block below turns
   it back into a jump. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The decorative ellipses behind the hero and the pricing block are wider than
   the viewport at mid widths — 980px and 1520px, both centred — so they push the
   scrollable area out past the right edge.

   The clip goes here, on main, and the choice of element and of keyword are both
   load-bearing. `clip` rather than `hidden` because hidden would make this a
   scroll container, and a scroll container between the viewport and a
   position:sticky element is what the sticky element then sticks inside — the
   contents list on /security stopped sticking entirely and scrolled away with
   the page. `main` rather than html because overflow on the root propagates to
   the viewport instead of applying here, which does not contain these ellipses;
   and rather than .hero or .pricing because those boxes are 600px and 1113px
   wide, so clipping there would cut visible gradient on any wide screen.

   main spans the viewport, so the clip lands exactly where the eye already ends.
   Verified against the previous rendering: 29 scrolled frames across both pages
   at 390, 768, 1280 and 1440 differ by at most 1/255 — the clipped region was
   genuinely never visible. */
main { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-nav);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #000;
  padding: 0.75rem 1.25rem;
  z-index: 10;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* The apex used to serve the app, and its PWA manifest declared start_url "/".
   An installed shortcut therefore still opens this page — in standalone mode,
   where there is no address bar to type a way out of. This is the way out. It
   cannot be a redirect: the page ships no JavaScript, and a redirect would be
   wrong for everyone else anyway. */
.installed-app-note {
  display: none;
  padding: 0.875rem 1.25rem;
  background: var(--accent-dim);
  color: #000;
  font-size: var(--step-nav);
  font-weight: 500;
  text-align: center;
}

@media (display-mode: standalone) {
  .installed-app-note { display: block; }
}

/* The italic serif carries the design's voice. PP Editorial New is a licensed
   Pangram Pangram face we do not ship, so Instrument Serif stands in — same
   high-contrast editorial italic, swap the stack when the licence lands. */
.em {
  font-family: "Instrument Serif", "PP Editorial New", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.accent { color: var(--accent); }

.shell {
  width: min(100% - 2.5rem, var(--col));
  margin-inline: auto;
}

.shell-wide {
  width: min(100% - 2.5rem, var(--col-wide));
  margin-inline: auto;
}

/* --------------------------------------------------------------- nav ---- */

.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 5.25rem;
}

.nav__logo img { width: 153px; }

.nav__links {
  display: flex;
  gap: 1.75rem;
  font-weight: 500;
}

.nav__links a { color: var(--text-dim); transition: color 0.2s var(--ease); }
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--text); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--step-nav);
  font-weight: 500;
  padding: 0.5rem 1.125rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.btn--light { background: var(--text); color: #000; }
.btn--light:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgb(255 255 255 / 0.16); }

/* Full-width, squared variants — what a card's call to action wants. */
.btn--block {
  display: block;
  width: 100%;
  /* .btn centres through flex; block layout has to say so itself. */
  text-align: center;
  border-radius: var(--radius-control);
  /* 10.5px + 21px line box + the 1px borders .btn already carries = the
     comp's 44px control. */
  padding-block: 0.65625rem;
}

.btn--muted { background: var(--border-strong); color: var(--text); }
.btn--accent { background: var(--accent-dim); color: #000; }
.btn--muted:hover,
.btn--accent:hover { filter: brightness(1.15); }

.btn[aria-disabled="true"] {
  background: var(--surface-card);
  color: var(--text);
  pointer-events: none;
  cursor: default;
}

/* A bordered box: the shape every card and panel on the site starts from. */
.surface {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

/* -------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  text-align: center;
  padding-bottom: 4rem;
  isolation: isolate;
}

/* The 815x725 ellipse behind the hero in the Figma file. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3rem;
  left: 50%;
  width: min(980px, 148vw);
  aspect-ratio: 980 / 900;
  transform: translateX(-50%);
  background: var(--glow);
  filter: blur(14px);
  pointer-events: none;
}

.hero__mock {
  width: min(370px, 82vw);
  margin: 3.5rem auto 0.5rem;
}

.hero__title {
  font-size: var(--step-head);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 auto 1.75rem;
  max-width: 34ch;
}

.hero__title .em { color: var(--accent); }

/* ---------------------------------------------------------- sections ---- */

.section {
  position: relative;
  text-align: center;
  padding-block: 6.5rem;
}

.section__title {
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 3rem;
}

.section__title .em { color: var(--accent); }

.section__figure { margin: 0; }
.section__figure img { margin-inline: auto; }

.section__caption {
  font-size: var(--step-lead);
  line-height: 1.35;
  color: var(--text-muted);
  max-width: 420px;
  margin: 2rem auto 0;
}

.pill {
  width: min(326px, 80vw);
  margin: 2.5rem auto 0;
}

/* --------------------------------------------------- transcript block ---- */

/* Rebuilt as live text rather than exported flat, so the copy stays
   selectable and indexable. The Figma comp uses lorem here — see README. */
.transcript {
  position: relative;
  max-width: 864px;
  margin-inline: auto;
  font-size: clamp(1rem, 2.4vw, 1.75rem);
  line-height: 1.5;
  color: #6a6a6a;
  text-align: left;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 34%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 34%, transparent 78%);
  user-select: none;
}

.transcript mark {
  background: var(--accent);
  color: #0b0f00;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  padding: 0 0.25em;
}

/* ------------------------------------------------------------ meeting ---- */

.meeting__eyebrow {
  font-size: var(--step-lead);
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.meeting__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 857px;
  margin: 2.5rem auto 3.5rem;
}

.meeting__grid h3 {
  font-size: var(--step-nav);
  font-weight: 500;
  margin: 0 0 0.375rem;
}

.meeting__grid p {
  font-size: var(--step-nav);
  color: var(--text-dim);
  margin: 0;
  line-height: 1.45;
}

/* ------------------------------------------------------------- footer ---- */

.footer {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 13rem;
  isolation: isolate;
  overflow: hidden;
}

/* The 1440x569 gradient wash that closes the page. */
.footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: -6%;
  bottom: -3.5rem;
  height: 26rem;
  background: radial-gradient(
    ellipse 58% 86% at 50% 104%,
    rgb(224 255 140 / 1) 0%,
    rgb(196 255 40 / 0.94) 20%,
    rgb(180 254 0 / 0.74) 38%,
    rgb(157 214 0 / 0.40) 56%,
    rgb(120 168 4 / 0.14) 72%,
    transparent 86%
  );
  filter: blur(22px);
  pointer-events: none;
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* The copyright belongs with the button, not centred in the gap between the
   logo and it, so the logo absorbs the free space instead of space-between
   splitting it three ways. */
.footer__top img { width: 153px; margin-inline-end: auto; }

.footer__copyright {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.footer__blurb {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 2.25rem 0 3rem;
  max-width: 52ch;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

.footer__cols li { white-space: nowrap; }

.footer__cols h2 {
  font-size: var(--step-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 1.25rem;
}

.footer__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.footer__cols a { color: var(--text-soft); transition: color 0.2s var(--ease); }
.footer__cols a:hover { color: var(--accent); }

.soon {
  color: var(--text-dim);
  margin-left: 0.375rem;
  font-size: 0.75rem;
}

/* -------------------------------------------------- the mobile bar ------- */

/* Two bars live in the markup and only one is ever rendered, because the
   mobile comp is a different object rather than a reflow of the desktop one:
   the mark without the wordmark, and the links folded behind a hamburger. */

.shell-m { display: none; }

.nav-m {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
}

.nav-m__logo,
.menu__button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
}

.nav-m__logo img { width: 20px; height: 20px; }

.menu { position: static; }

.menu__button {
  cursor: pointer;
  list-style: none;
}
.menu__button::-webkit-details-marker { display: none; }

/* Three 13px rules, per the comp — folded into an X once the menu is open. */
.burger,
.burger::before,
.burger::after {
  content: "";
  display: block;
  width: 13px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.burger { position: relative; }
.burger::before { position: absolute; top: -4.5px; }
.burger::after { position: absolute; top: 4.5px; }

.menu[open] .burger { background: transparent; }
.menu[open] .burger::before { top: 0; transform: rotate(45deg); }
.menu[open] .burger::after { top: 0; transform: rotate(-45deg); }

.menu__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0b0b0b;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.6);
}

.menu__panel a {
  padding: 0.75rem 0.625rem;
  border-radius: 8px;
  font-weight: 500;
  color: var(--text-soft);
}
.menu__panel a:hover { background: var(--surface); color: var(--text); }

/* .menu__panel a outranks .btn--light, which left the button's label white on a
   white button. Restate the pair here rather than weakening the panel rule. */
.menu__panel .btn--light,
.menu__panel .btn--light:hover { background: var(--text); color: #000; }

.menu__cta { margin-top: 0.5rem; justify-content: center; }

/* ---------------------------------------------------------- responsive ---- */

@media (max-width: 700px) {
  :root {
    /* The mobile comp keeps the 30px headings and 24px captions of the desktop
       one — at 360 wide they simply read much larger. Shrinking them here,
       which is the reflex, is what pulled the page away from the comp. */
    --step-head: 1.875rem;
    --step-lead: 1.5rem;
  }

  .shell,
  .shell-wide,
  .shell-m { width: min(100% - 2rem, 34rem); margin-inline: auto; }

  /* Every mobile comp draws the bar in a 100px band: 24 above, 52 of bar,
     24 below. Only the top half was here, so each page started 22px high. */
  .shell-m { display: block; padding-block: 1.5rem; }
  .shell-d { display: none; }

  .hero { padding-bottom: 4rem; }
  /* The comp puts this ellipse 220px below the frame top, which is 144px below
     where the hero itself starts once the bar is accounted for. */
  .hero::before { top: 9rem; width: min(677px, 188vw); aspect-ratio: 677 / 482; }
  .hero__mock { width: 100%; margin: 1.5rem auto 0.75rem; }
  .hero__title { line-height: 1.34; max-width: none; margin-bottom: 1.5rem; }

  .section { padding-block: 2.75rem; }

  /* The comp hand-sizes each heading's text box, which lands most of them on
     two lines. Capping the measure and letting the browser balance gets the
     same shape without pinning a width per section. */
  .section__title {
    margin-bottom: 1.75rem;
    line-height: 1.2;
    max-width: 18rem;
    margin-inline: auto;
    text-wrap: balance;
  }

  .section__caption { max-width: 20rem; font-size: var(--step-lead); }

  .pill { width: 212px; margin-top: 1.75rem; }

  .transcript {
    font-size: 1.125rem;
    line-height: 1.12;
    -webkit-mask-image: radial-gradient(ellipse 74% 54% at 50% 50%, #000 22%, transparent 76%);
    mask-image: radial-gradient(ellipse 74% 54% at 50% 50%, #000 22%, transparent 76%);
  }

  /* The three meeting points become a divided list. Rules sit between the
     items only — the comp has none above the first or below the last. */
  .meeting__grid {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
    margin: 1.75rem auto 2.25rem;
  }
  .meeting__grid > div { padding: 1.125rem 0; }
  .meeting__grid > div + div { border-top: 1px solid var(--border-soft); }
  .meeting__grid p { max-width: 17.5rem; margin-inline: auto; }

  /* Footer order in the comp is logo, blurb, a full-width button, the link
     table, then the copyright. display:contents lets the three items inside
     .footer__top take their own places in that column. */
  /* The comp ends the page just under the copyright, with the wash behind it
     rather than below it. */
  .footer { padding-top: 3rem; padding-bottom: 4rem; }
  .footer::after { bottom: -6rem; height: 18rem; }
  .footer .shell { display: flex; flex-direction: column; }
  .footer__top { display: contents; }
  .footer__top img { order: 1; margin-inline: auto; }
  .footer__blurb {
    order: 2;
    text-align: center;
    margin: 1.5rem 0 1.75rem;
    max-width: none;
  }
  /* Full width, and squared off — the comp's footer button is a rounded
     rectangle, not the pill the hero uses. */
  .footer__top .btn {
    order: 3;
    width: 100%;
    border-radius: 10px;
    padding-block: 0.5rem;
  }
  .footer__cols { order: 4; grid-template-columns: 1fr; gap: 0; margin-top: 1.5rem; }
  .footer__cols > div {
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    align-items: start;
    padding: 0.625rem 0;
  }
  .footer__cols h2 { margin: 0.125rem 0 0; }
  .footer__cols ul { gap: 0.875rem; }
  .footer__copyright { order: 5; text-align: center; margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* A smooth scroll is an animation too, and a long one. Someone who asked the
     system to stop moving things should get the jump. */
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Inner pages — /about, /help, /privacy, /blog
   Same tokens as the landing; these only add the reading and list layouts
   the marketing pages need.
   ========================================================================== */

.page {
  width: min(100% - 2.5rem, 860px);
  margin-inline: auto;
  padding-block: 4rem 6rem;
}

.page--narrow { max-width: 760px; }

.page__head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.page__title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.page__intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 46ch;
  margin-inline: auto;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-dim);
  font-size: var(--step-nav);
  margin-bottom: 2.5rem;
  transition: color 0.2s var(--ease);
}
.back:hover { color: var(--text); }
.back svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------- feature grid -- */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 4rem;
}

.card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #101010, #0a0a0a);
}

.card__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgb(180 254 0 / 0.10);
  color: var(--accent);
}
.card__icon svg { width: 1.125rem; height: 1.125rem; }

.card h3 { font-size: var(--step-nav); font-weight: 500; margin: 0 0 0.25rem; }
.card p { font-size: 0.8125rem; line-height: 1.5; color: var(--text-dim); margin: 0; }

/* ---------------------------------------------------------------- steps -- */

.panel {
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #101010, #0a0a0a);
  padding: 2rem;
  margin-bottom: 4rem;
}

.panel h2 {
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  margin: 0 0 1.75rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: center;
}

.steps__n {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgb(180 254 0 / 0.10);
  color: var(--accent);
  font-weight: 500;
}

.steps p { font-size: 0.8125rem; line-height: 1.55; color: var(--text-dim); margin: 0; }

.shots { display: grid; gap: 1.5rem; margin-bottom: 3.5rem; }
.shots img { border: 1px solid var(--border-soft); border-radius: 0.75rem; }

.center { text-align: center; }

.note {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
  margin: 3rem 0 0;
  line-height: 1.7;
}
.note a { color: var(--text-muted); }
.note a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ FAQ -- */

/* <details> rather than a scripted accordion — the marketing site ships no
   JavaScript and its CSP says script-src 'none'. */

.faq { margin-bottom: 3rem; }

.faq__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 500;
}

.faq__head .card__icon { width: 2rem; height: 2rem; }

.faq details {
  border-bottom: 1px solid var(--border-soft);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9375rem 2rem 0.9375rem 0;
  position: relative;
  font-size: 0.9375rem;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s var(--ease);
  opacity: 0.55;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq details > p {
  margin: 0;
  padding: 0 2rem 1.125rem 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ----------------------------------------------------------- legal prose -- */

.prose h2 {
  font-size: 1.375rem;
  font-weight: 500;
  margin: 3rem 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border-soft);
}

.prose h3 {
  font-size: 1rem;
  font-weight: 500;
  margin: 2rem 0 0.625rem;
}

.prose p,
.prose li {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1.25rem; padding-left: 1.125rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--text); font-weight: 500; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose section:last-child p { color: var(--text-dim); font-size: 0.8125rem; }

/* ------------------------------------------------------- /security ------ */

/* The page is long enough that a reader arrives looking for one section — the
   backup window, or which company sees their audio. A contents list is the
   difference between finding it and scrolling. Everything here is CSS: the page
   runs script-src 'none', so a scripted scroll-spy was never an option, and it
   turns out not to be needed. */

.page--doc {
  width: min(100% - 2.5rem, 1140px);
  display: grid;
  grid-template-columns: 13rem minmax(0, 46rem);
  justify-content: center;
  gap: 0 4rem;
  align-items: start;
}

/* The back link and the title belong to the page, not to either column. */
.page--doc > .back,
.page--doc > .page__head { grid-column: 1 / -1; }

.toc {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.toc__title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-quiet);
  margin: 0 0 0.875rem;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.125rem;
}

.toc a {
  display: block;
  padding: 0.4375rem 0.75rem;
  border-left: 2px solid var(--border-soft);
  font-size: var(--step-body);
  line-height: 1.4;
  color: var(--text-quiet);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.toc a:hover { color: var(--text); border-left-color: var(--border-strong); }

/* Active state without script. Clicking a contents link puts its section in
   :target, and :has lets the link that points there respond — the one pairing
   CSS can express between two elements that are not related in the tree.
   It marks where the reader jumped to, which is what they asked the list for.
   It does not follow free scrolling; that needs a scroll-driven timeline and
   is worth adding only once every engine we care about ships it. */
.page--doc:has(#data-flow:target) .toc a[href="#data-flow"],
.page--doc:has(#encryption:target) .toc a[href="#encryption"],
.page--doc:has(#network:target) .toc a[href="#network"],
.page--doc:has(#authentication:target) .toc a[href="#authentication"],
.page--doc:has(#ai:target) .toc a[href="#ai"],
.page--doc:has(#deletion:target) .toc a[href="#deletion"],
.page--doc:has(#sub-processors:target) .toc a[href="#sub-processors"],
.page--doc:has(#consent:target) .toc a[href="#consent"],
.page--doc:has(#rights:target) .toc a[href="#rights"],
.page--doc:has(#incident:target) .toc a[href="#incident"],
.page--doc:has(#gaps:target) .toc a[href="#gaps"] {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Land the heading clear of the viewport edge rather than flush against it. */
.prose section[id] { scroll-margin-top: 2rem; }

/* Below the two-column breakpoint the list becomes a rail under the bar: same
   markup, same links, laid out sideways because there is no left to sit on. */
@media (max-width: 1023px) {
  .page--doc {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .toc {
    position: sticky;
    top: 0;
    z-index: 4;
    max-height: none;
    overflow: visible;
    margin: 0 -1.25rem 2rem;
    padding: 0.75rem 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border-soft);
  }

  .toc__title { display: none; }

  .toc ul {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 1.25rem;
  }

  .toc ul::-webkit-scrollbar { display: none; }

  .toc a {
    border-left: 0;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    padding: 0.375rem 0.75rem;
    white-space: nowrap;
  }

  .toc a:hover { border-color: var(--border-strong); }

  .page--doc:has(:target) .toc a[href]:is(
    [href="#data-flow"], [href="#encryption"], [href="#network"],
    [href="#authentication"], [href="#ai"], [href="#deletion"],
    [href="#sub-processors"], [href="#consent"], [href="#rights"],
    [href="#incident"], [href="#gaps"]
  ) { border-left: 1px solid var(--border-soft); }

  .prose section[id] { scroll-margin-top: 4.5rem; }
}

/* The date under the title is load-bearing content, not a byline: an undated
   security page is a list of assertions with no way to tell how old they are.
   Quiet, but never hidden. */
.verified {
  font-size: var(--step-body);
  color: var(--text-quiet);
  margin: 1.25rem 0 0;
}

/* The encryption and sub-processor tables are the two places a reader checks
   a specific fact, so they stay tables rather than collapsing into prose on a
   phone. They scroll inside their own box instead — the page body must never
   scroll sideways. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-control);
}

.prose table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--step-body);
  line-height: 1.6;
}

.prose th,
.prose td {
  padding: 0.75rem 0.875rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}

.prose thead th {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface-sunken);
}

.prose tbody th {
  color: var(--text-soft);
  font-weight: 500;
  white-space: nowrap;
}

.prose td { color: var(--text-muted); }
.prose tbody tr:last-child th,
.prose tbody tr:last-child td { border-bottom: 0; }

/* The response-header block is quoted verbatim so a reader can compare it with
   what curl gives them. Wrapping it would break that comparison, so it scrolls. */
.prose pre {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  padding: 1rem 1.125rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-control);
}

.prose pre code {
  display: block;
  white-space: pre;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.prose :not(pre) > code {
  padding: 0.125em 0.375em;
  border-radius: 4px;
  background: var(--surface-sunken);
  font-size: 0.8125em;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .panel { padding: 1.5rem; }
}

/* ==========================================================================
   /pricing — Figma frame 122:222
   Layout only. Colour, radius, buttons and the bordered box come from the
   tokens and components above; this section adds none of its own.
   ========================================================================== */

.pricing {
  position: relative;
  isolation: isolate;
  width: min(100% - 2.5rem, 1113px);
  margin-inline: auto;
  padding-block: 3.5rem 6rem;
}

/* The same ellipse as the hero's, centred on the frame and reaching down
   behind the plans. Figma blurs it by 572px, which spreads it far wider and
   far fainter than the hero's 14px one — hence the size and the opacity, both
   fitted to the comp's own pixels rather than guessed. The mobile comp drops
   the ellipse entirely, so the media query does too. */
.pricing::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 42rem;
  left: 50%;
  width: min(1520px, 190vw);
  aspect-ratio: 1520 / 1350;
  transform: translate(-50%, -50%);
  background: var(--glow);
  opacity: 0.55;
  filter: blur(14px);
  pointer-events: none;
}

.pricing__head { text-align: center; margin-bottom: 2.5rem; }

/* Both comps set this heading in Archivo Regular on a 40px line — not the 500
   the frame's parent style claims; the per-character overrides say 400. */
.pricing__title {
  font-size: var(--step-head);
  font-weight: 400;
  line-height: 1.3333;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.pricing__title .em { color: var(--accent); }

.pricing__sub {
  font-size: var(--step-lead);
  line-height: 1.35;
  color: var(--text-quiet);
  max-width: 23rem;
  margin: 0 auto 3.25rem;
}

/* ------------------------------------------------------ period switch ---- */

/* A radio pair rather than a script, so the page keeps script-src 'none'.
   The inputs sit ahead of the plans in the DOM because the prices below are
   swapped with a sibling selector. */

.period__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.period {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  box-shadow: inset 0 0 0 1px var(--surface);
  border-radius: 12px;
}

.period label {
  padding: 0.5rem 0.75rem;
  line-height: 1rem;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
  font-size: var(--step-body);
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.period label:hover { color: var(--text-soft); }

#p-monthly:checked ~ .pricing__head .period label[for="p-monthly"],
#p-yearly:checked ~ .pricing__head .period label[for="p-yearly"] {
  background: var(--surface);
  color: var(--text);
}

/* Keyboard focus lands on the hidden input, so show it on the label. */
.period__input:focus-visible ~ .pricing__head .period label[for="p-monthly"],
.period__input:focus-visible ~ .pricing__head .period label[for="p-yearly"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* The checkout link has to carry the period that was on screen when it was
   clicked, and no stylesheet can rewrite an href — so each paid plan ships both
   links and this shows one. Not `revert`: these are .btn--block, and reverting
   an anchor's display would drop it back to inline. */
.cta--yearly { display: none; }
#p-yearly:checked ~ .plans .cta--monthly { display: none; }
#p-yearly:checked ~ .plans .cta--yearly { display: block; }

/* -------------------------------------------------------------- plans ---- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 5px;
}

/* .plan carries the .surface class in the markup; this only lays it out. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

/* Three columns that agree on where every row starts, at any width. The comp
   puts the price, the rule and the features at fixed offsets down the card,
   which only holds while every description wraps to the same number of lines —
   below 1150px they do not, and a min-height guess would just move the problem.
   Subgrid makes the three cards share one set of rows instead. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 701px) {
    /* .plans sets one gap for both axes; with seven rows instead of one that
       would open a 5px seam between every row of every card. */
    .plans { grid-template-rows: repeat(7, auto); row-gap: 0; }

    .plan {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
    }

    /* The list keeps its own height inside the shared row rather than being
       stretched to it, so the rule above it and the button below it stay put. */
    .plan__features { align-self: start; }
    .plan__desc { min-height: 0; }
  }
}

/* The middle plan is lifted a shade, not outlined in the accent. */
.plan--featured {
  background: var(--surface-raised);
  border-color: var(--border-strong);
}

.plan__name { font-size: 1.25rem; font-weight: 400; line-height: 1.2; margin: 0 0 1rem; }

.plan__desc {
  font-size: var(--step-nav);
  line-height: 1.4;
  color: rgb(255 255 255 / 0.6);
  margin: 0 0 2rem;
  min-height: 2.5rem;
}

.plan__label {
  font-size: var(--step-body);
  line-height: 1.2;
  color: rgb(255 255 255 / 0.6);
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.plan__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.plan__amount { font-size: 2.5rem; line-height: 1.2; }

.plan__per {
  font-size: var(--step-body);
  color: var(--text-faint);
  text-transform: uppercase;
}

.plan__rule { border: 0; border-top: 1px solid var(--border-soft); margin: 0 -1.75rem 1.5rem; }
.plan--featured .plan__rule { border-color: var(--border-strong); }

.plan__features,
.enterprise__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.plan__features {
  margin-bottom: 2.5rem;
  flex: 1;
  align-content: start;
}

.plan__features li,
.enterprise__features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step-nav);
  line-height: 1.25rem;
}

.plan__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  background: rgb(157 214 0 / 0.10);
  color: var(--accent-dim);
  font-size: var(--step-body);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------- enterprise ---- */

.enterprise {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 3.5rem;
  align-items: start;
  padding: 1.75rem;
  background: var(--surface-sunken);
  border-color: var(--border-strong);
}

.enterprise h2 { font-size: 1.25rem; font-weight: 400; line-height: 1.2; margin: 0 0 1rem; }

.enterprise__desc {
  font-size: var(--step-nav);
  color: rgb(255 255 255 / 0.6);
  margin: 0 0 3rem;
}

.enterprise__soon { font-size: var(--step-head); line-height: 1.2; color: var(--text-quiet); margin: 0; }

.enterprise__features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* Both comps blur this column at 7.5px, and that was right while the list was
   the comp's own placeholder repeating itself. It is the product's real feature
   list now — SSO, team workspace, shared gallery — read from the same config
   the app uses. Blurring that hides information a buyer came for, so it is
   shown, and the button below it opens a conversation rather than pretending
   to be a checkout. */

/* The desktop comp splits the panel in two and needs no divider; the mobile one
   stacks it into a card and draws one, exactly like a plan. */
.enterprise .plan__rule { display: none; }

/* ---------------------------------------------------------- responsive ----
   Figma frame 141:2558. One breakpoint, the same 700px the rest of the site
   turns at — the two the pricing block used to carry (900 and 560) were its
   own invention and made this page change shape where no other page did.
   The gutter comes from the .shell rule up in the mobile block, not from here. */

@media (max-width: 700px) {
  .pricing::before { display: none; }

  /* Same gutter the .shell rule above gives every other page. */
  .pricing {
    width: min(100% - 2rem, 34rem);
    padding-block: 2.5rem 4rem;
  }

  /* 328px of measure, so the caption wraps to the comp's two lines. */
  .pricing__sub { max-width: none; line-height: 1.5; }

  /* The comp stacks the plans and still draws all three the same height, so the
     calls to action line up down the page. grid-auto-rows does that without
     pinning the 663px the Figma frame happens to be. */
  .plans {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  .plan,
  .enterprise { padding: 1.25rem; }
  .plan__rule { margin-inline: -1.25rem; }
  /* the mobile comp leaves 28px above the call to action, the desktop one 40 */
  .plan__features { margin-bottom: 1.75rem; }

  /* Held at two lines so the price starts at the same height in every card,
     which is what the comp does with a fixed text box. */
  .plan__desc { min-height: 2.5rem; margin-bottom: 2.4375rem; }

  .enterprise {
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--surface-sunken);
  }
  .enterprise .plan__rule { display: block; }
  .enterprise__desc { margin-bottom: 2.5rem; }
  .enterprise__soon { margin-bottom: 1.5rem; }
  .enterprise__features { grid-template-columns: 1fr; margin-bottom: 1.75rem; }
}