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

html { -webkit-text-size-adjust: 100%; }

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;
  overflow-x: hidden;
}

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

.footer__top img { width: 153px; }

.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;
  }
}

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

@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; }

/* -------------------------------------------------------------- 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 put a 7.5px layer blur over the Enterprise list and its button.
   The plan is not live, so the column is a teaser rather than a claim — which
   is also why the comp's list repeats itself. Blurred text is still read aloud,
   so the markup hides this half from assistive tech instead of announcing
   features nobody has committed to. */
.enterprise__features,
.enterprise .btn { filter: blur(3.75px); }

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