/* Plasmole marketing site draft: Round 2a system (Journal type, sharp, purple actions) */

:root {
  --paper: #FFFFFF;
  --card: #F7F7F5;
  --tint: #EEEEF6;
  --ink: #121316;
  --ink-2: #3C3F44;
  --muted: #5E6167;
  --rule: #E4E4E0;
  --bar-muted: #C9CAD2;
  --purple: #5561C8;
  --purple-hover: #4450B5;
  --teal: #1C484B;
  --teal-rule: #353A7A;
  --orange: #E99A61;
  --cream: #F7F7F5;
  --accent: var(--purple);
  --band: #1F2250;
  --mark: var(--purple);

  /* Type picked by the founder 2026-10-01 in the Theme lab: Inter Tight headlines, IBM Plex Sans body,
     Hanken Grotesk labels. Sequences and tool names keep --code. */
  --display: 'Inter Tight', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'Hanken Grotesk', system-ui, sans-serif;
  /* Sequences, alignments and tool names stay fixed-width whatever the Labels font is (Theme lab). */
  --code: 'IBM Plex Mono', ui-monospace, monospace;

  --r: 2px;
  --wrap: 1312px;
  --gutter: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Fluid, after transfyr.ai and albertinvent.com (measured 2026-10-02): neither
   caps its container at any width. The gutter steps with the breakpoint and the
   width of a text block is set on the block, not on the page. */
.wrap { width: 100%; padding: 0 var(--gutter); }

/* Type */
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; color: inherit; }
.h1 { font-size: 76px; line-height: 1.02; letter-spacing: -0.02em; max-width: 20ch; }
.h2 { font-size: 46px; line-height: 1.08; letter-spacing: -0.015em; max-width: 22ch; }
.h3 { font-size: 27px; line-height: 1.15; letter-spacing: -0.015em; }
.lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.lede-s { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.text-s { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 68ch; }
.mono { font-family: var(--mono); }
.label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--accent { color: var(--accent); }
.spec { font-family: var(--mono); font-size: 14px; color: var(--muted); }

/* Buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--purple); border-color: var(--purple); color: #fff; font-weight: 500; }
.btn--primary:hover { background: var(--purple-hover); border-color: var(--purple-hover); color: #fff; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn--cream { background: var(--cream); border-color: var(--cream); color: var(--ink); font-weight: 500; }
.btn--cream:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn--ghost-cream { border-color: rgba(246, 242, 233, .6); color: var(--cream); }
.btn--ghost-cream:hover { background: var(--cream); color: var(--ink); }
.link { color: var(--purple); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { color: var(--purple-hover); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.nav__inner { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.nav__left { display: flex; align-items: center; gap: 36px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand span { font-family: 'Plus Jakarta Sans', var(--body); font-size: 23px; font-weight: 500; letter-spacing: -0.025em; }
.nav__links { display: flex; align-items: center; }
.nav__links > li { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 72px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink); text-decoration: none;
}
.nav__link svg { transition: transform .15s; }
.has-menu:hover .nav__link svg,
.has-menu:focus-within .nav__link svg { transform: rotate(180deg); }
.nav__right { display: flex; align-items: center; gap: 12px; }
.nav__signin { font-size: 15px; text-decoration: none; padding: 0 12px; }

.menu {
  position: absolute; top: 72px; left: -12px;
  display: none;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r);
}
.has-menu:hover .menu,
.has-menu:focus-within .menu { display: grid; }
.menu--product { grid-template-columns: 470px 210px; }
.menu--solutions { grid-template-columns: 300px; }
.menu__group { display: flex; flex-direction: column; }
.menu__group .label { margin-bottom: 6px; }
.menu__col { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.menu__col + .menu__col { border-left: 1px solid var(--rule); }
.menu__col--side { background: var(--card); gap: 0; }
.menu__col--side .label { margin-bottom: 6px; }
.menu__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.menu__item { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; margin: 0 -12px; border-radius: var(--r); color: var(--ink); text-decoration: none; }
.menu__item:hover { background: var(--tint); }
.menu__item strong { display: block; font-size: 15.5px; font-weight: 500; }
.menu__foot { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: var(--r);
  font-family: var(--mono); font-size: 12px; color: var(--ink); text-decoration: none;
  background: var(--paper);
}
.chip i { width: 8px; height: 8px; display: block; }
a.chip:hover { border-color: var(--ink); }
.menu__feature { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
/* Product menu, featured card (10-08): a two-row slice of the Sanger alignment, one mismatch in orange. */
.menu__feature .mini-aln { display: grid; grid-template-columns: 44px repeat(14, minmax(0, 1fr)); gap: 2px 1px; align-items: center; font-family: var(--mono); font-size: 10.5px; color: var(--ink); }
.menu__feature .mini-aln span { font-size: 9.5px; color: var(--muted); }
.menu__feature .mini-aln i { font-style: normal; text-align: center; line-height: 16px; }
.menu__feature .mini-aln i.o { color: var(--orange); background: #F6D9BE; border-radius: 2px; }
.menu__feature .mini-plate { display: grid; grid-template-columns: repeat(12, 12px); gap: 3px; }
.menu__feature .mini-plate b { width: 12px; height: 12px; display: block; background: var(--purple); border-radius: 50%; }
.menu__feature .mini-plate b.l { background: #B9BEEA; }
.menu__feature .mini-plate b.o { background: var(--orange); }

/* Hero */
.hero { padding: 88px 0 72px; }
.hero__grid { display: grid; grid-template-columns: 580px minmax(0, 1fr); column-gap: 72px; align-items: start; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow i { width: 8px; height: 8px; display: block; background: var(--mark); }
.hero h1 { margin-top: 28px; }
.hero .lede { margin-top: 28px; max-width: 540px; }
.hero__ctas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { margin-top: 18px; }
.hero__tools { margin-top: 72px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
.hero__tools .mono { font-size: 14px; }

.figure { margin: 0; }
.map { width: 100%; max-width: 620px; height: auto; display: block; }
.map text { font-family: var(--mono); fill: var(--ink); }
.map .t-muted { fill: var(--muted); }
.map .t-name { font-family: var(--display); font-size: 44px; letter-spacing: -0.015em; }
.figcap { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12.5px; color: var(--muted); max-width: 620px; }

/* Logos */
.logos { border-top: 1px solid var(--rule); }
.logos__inner { min-height: 136px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 64px; padding-top: 24px; padding-bottom: 24px; }
.logos__inner .label { width: 200px; }
.logos img { height: 30px; width: auto; filter: grayscale(1); opacity: .85; mix-blend-mode: multiply; }
.logos img.tall { height: 36px; }
.logos img.short { height: 28px; }
.logos__inner--center { justify-content: center; gap: 32px 72px; }
.logos__intro { font-size: 14px; line-height: 1.5; color: var(--ink-2); white-space: nowrap; }
.logos img.logos__uconn { filter: brightness(0); }
@media (max-width: 700px) {
  .logos__inner--center { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 28px 24px; }
  .logos__inner--center img { max-width: 100%; object-fit: contain; }
  .logos__intro { grid-column: 1 / -1; text-align: center; }
}
.logos__inner--split { justify-content: space-between; gap: 24px 40px; }
.logos__group { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.logos__rule { width: 1px; height: 40px; background: var(--bar-muted); }
/* Stand-in for a logo file we don't have yet: dashed so it can't pass for final art */
.logo-ph { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px dashed var(--bar-muted); border-radius: var(--r); font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #6E7076; white-space: nowrap; }

/* Sections */
.section { border-top: 1px solid var(--rule); padding: 80px 0 88px; } /* was 104/112; 10-08, the page ran 9 screens */
.section__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: 52px; }
.section__head > :first-child { grid-column: 1 / 7; }
.section__head > :last-child { grid-column: 8 / 12; }
/* A head with one child matches both rules, and the second would push it into
   the right-hand columns. */
.section__head > :only-child { grid-column: 1 / 8; }
.section__head .label { display: block; margin-bottom: 16px; }
.section__head p { max-width: 540px; }

.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.col { display: flex; flex-direction: column; gap: 14px; padding-left: 24px; border-left: 1px solid var(--rule); }
.col .label { color: var(--accent); }
#solutions .solution-heading { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
#solutions .solution-heading .label { display: flex; align-items: center; gap: 8px; }
#solutions .solution-heading__arrow { font-size: 18px; line-height: 1; letter-spacing: 0; }
#solutions .solution-heading:hover .h3 { color: var(--accent); }

/* What it does: three rows, a short text column beside one large figure.
   Replaced the 3x2 tile grid on 2026-10-02. The old grid spent 419 words and
   held its figures to 366px; Benchling runs the same argument in ~118 words
   against 500px screenshots, and Stripe in ~30 against 800px ones. The figure
   is the evidence, so the figure gets the room. */
.rows { display: flex; flex-direction: column; gap: 80px; }
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
.row__text { display: flex; flex-direction: column; gap: 12px; }
.row__letter { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.row__text .h3 { margin-top: 2px; }
.row__specs { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.row__specs li { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.row__specs li:last-child { border-bottom: 0; }

.figcard { border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.figcard__title { font-size: 19px; font-weight: 500; }
.figcard__cap { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
/* The tool log runs across the top; its result and the gel it produced sit
   underneath, so the pane reads as one run rather than two pictures. */
.figcard__out { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 32px; align-items: center; padding-top: 18px; border-top: 1px solid var(--rule); }
.figcard__outtext { display: flex; flex-direction: column; gap: 10px; }
.figcard--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.figcard__half { display: flex; flex-direction: column; gap: 16px; }
.plate--lg { max-width: 560px; }
/* The cost of not switching, priced in the reader's own units (recovered from the v1 features page). */
.worth { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); font-family: var(--mono); font-size: 15px; color: var(--accent); }
.tile { border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.tile__title { font-size: 21px; font-weight: 500; }
.tile__fig { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
.tile__cap { margin-top: 10px; font-family: var(--mono); font-size: 14px; color: var(--muted); }

.log { display: flex; flex-direction: column; gap: 0; font-family: var(--mono); font-size: 12.5px; }
.log__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.log__row span:first-child { color: var(--muted); }
.log__row b { font-weight: 500; color: var(--ink); }
.log__ok { color: #2E7D32; }
.log__result { padding-top: 10px; font-family: var(--body); font-size: 14px; color: var(--accent); }

.gel { width: 100%; height: auto; display: block; }
.gel text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }

.plate { max-width: 300px; display: grid; grid-template-columns: 14px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.plate span { text-align: center; }
.plate b { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--purple); }
.plate b.l { background: #B9BEEA; }
.plate b.o { background: var(--orange); }
.legend { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

.flow { display: flex; flex-direction: column; align-items: stretch; }
.flow__node { border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); padding: 10px 12px; }
.flow__node .label { font-size: 10px; }
.flow__node strong { display: block; font-size: 14px; font-weight: 500; }
.flow__node span { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.flow__edge { width: 1px; height: 14px; background: var(--ink); margin-left: 24px; }

.entry { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.entry strong { font-size: 14.5px; font-weight: 500; }

.versions { display: flex; flex-direction: column; font-size: 13.5px; }
.versions li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 9px 0; border-bottom: 1px dashed var(--rule); }
.versions li:last-child { border-bottom: 0; }
.versions .v { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.versions small { grid-column: 2; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Memory */
.memory { display: grid; grid-template-columns: 580px minmax(0, 1fr); column-gap: 72px; align-items: start; }
.memory .lede { margin-top: 24px; max-width: 520px; }
.memcard { border: 1px solid var(--ink); border-radius: var(--r); background: var(--card); }
.memcard__head { padding: 14px 20px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; }
.memcard li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px; gap: 16px; align-items: baseline; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.memcard li:last-child { border-bottom: 0; }
.memcard li .label { color: var(--accent); }
.memcard li p { font-size: 16px; }
.memcard li .spec { text-align: right; }
.memuse { padding: 18px 20px 20px; border-top: 1px solid var(--ink); background: var(--paper); }
.memuse__q { font-size: 15.5px; color: var(--ink-2); }
.memuse__q::before { content: '\201C'; }
.memuse__q::after { content: '\201D'; }
.memuse__a { margin-top: 10px; font-size: 16px; color: var(--ink); }
.memuse .spec { display: inline-block; margin-top: 12px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); }

/* Two ways in */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.way { border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.way .label { color: var(--accent); }
.way__shot { margin-top: 12px; border: 1px solid var(--ink); border-radius: var(--r); overflow: hidden; background: #111417; height: 300px; }
.way__shot img { height: 300px; width: auto; max-width: none; }
.chat { margin-top: 12px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 300px; }
.chat__clients { display: flex; gap: 8px; }
.chat__user { align-self: flex-end; max-width: 80%; background: var(--tint); border-radius: var(--r); padding: 10px 14px; font-size: 14.5px; }
.chat__tool { display: flex; align-items: center; gap: 10px; font-family: var(--code); font-size: 12px; color: var(--ink-2); padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); }
.chat__tool i { width: 8px; height: 8px; display: block; background: var(--purple); }
.chat__answer { font-size: 14.5px; }
.way__points { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.way__points strong { display: block; font-size: 15px; font-weight: 500; }

/* Integrations */
/* align-items: start so a short column stops at its last row instead of
   trailing a rule down past it. */
.integrations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.col__n { float: right; font-family: var(--mono); color: var(--muted); }
.integrations .col ul { display: flex; flex-direction: column; }
.integrations .col li { padding: 8px 0; border-bottom: 1px dashed var(--rule); font-size: 16px; display: flex; justify-content: space-between; }
.integrations .col li:last-child { border-bottom: 0; }
.integrations .col li .spec { font-size: 12.5px; }
.pf-int { border-top: 1px solid var(--rule); }

/* Security */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.sec { border-top: 1px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sec h3 { font-family: var(--body); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.sec__foot { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }

/* Changing over: the five answers to "what happens to my lab if we switch". */
.swo { border-top: 1px solid var(--ink); }
.swo li { display: grid; grid-template-columns: 44px minmax(0, 360px) minmax(0, 1fr); column-gap: 32px; row-gap: 8px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.swo li:last-child { border-bottom: 1px solid var(--ink); }
.swo__n { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.swo h3 { margin: 0; font-family: var(--display); font-size: 23px; font-weight: 500; letter-spacing: -0.01em; }
.swo p { margin: 0; }
.swo .spec { display: block; margin-top: 10px; color: var(--muted); }
.section--switching { padding: 72px 0; }
.section--switching .section__head { margin-bottom: 32px; }
.swo--compact { padding: 0; }
.swo--compact li { padding: 18px 0; }

/* Closing + footer */
.closing { background: var(--band); color: var(--cream); }
.closing__inner { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.closing__inner > :first-child { grid-column: 1 / 7; }
.closing__inner > :last-child { grid-column: 8 / 12; }
/* A head with one child matches both rules, and the second would push it into
   the right-hand columns. */
.closing__inner > :only-child { grid-column: 1 / 8; }
.closing .lede { color: rgba(246, 242, 233, .82); margin-top: 20px; max-width: 520px; }
.closing__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

.footer { background: var(--band); color: var(--cream); border-top: 1px solid var(--teal-rule); }
.footer__grid { padding-top: 56px; padding-bottom: 40px; display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer .brand { color: var(--cream); }
.footer .brand img { filter: invert(1) brightness(1.1); }
.footer p { margin-top: 14px; font-size: 15.5px; color: rgba(246, 242, 233, .78); max-width: 300px; }
.footer .label { color: rgba(246, 242, 233, .6); display: block; margin-bottom: 14px; }
.footer li { padding: 4px 0; }
.footer li a { font-size: 15.5px; color: var(--cream); text-decoration: none; }
.footer li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__bottom { padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--teal-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 13px; color: rgba(246, 242, 233, .7); }
.footer__bottom nav { display: flex; gap: 20px; }
/* Footer wordmark (option H): dots of the logo word, pUC19 bases under the cursor. Drawn by footer-wordmark.js */
.footer__mark { padding-top: 8px; padding-bottom: 20px; overflow: hidden; }
.footer__mark canvas { display: block; width: 100%; }
.footer__hint { opacity: .75; }
.footer__bottom a { color: inherit; text-decoration: none; }
/* External footer links carry a ↗ like Transfyr's Social column; it nudges up-right on hover. */
.footer .ext { display: inline-flex; align-items: center; gap: 6px; }
.footer .ext__arrow { flex: none; transition: transform .15s; }
.footer .ext:hover .ext__arrow { transform: translate(1px, -1px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.footer__bottom a:hover { color: var(--cream); }

/* Hero demo: Legora-style step list + Invertix-style auto-playing "film" */
.demo { padding: 0 0 96px; }
.demo__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-top: 20px; border-top: 1px solid var(--ink); margin-bottom: 28px; }
.demo__head .h2 { font-size: 36px; margin-top: 10px; }
.demo__ctrl { height: 34px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font-family: var(--mono); font-size: 13px; cursor: pointer; }
.demo__ctrl:hover { border-color: var(--ink); }
/* A product shot has a natural best size: past about 1180px the app mock is
   bigger than any real screen and its panes drift apart. Cap it, and centre the
   pair in the now full-width section. */
/* The scenario picker sits above the app, after the live site's demo, and the
   app takes the full width under it. */
.demo__grid { display: block; max-width: 1560px; margin: 0 auto; }
.demo__note { margin-top: 16px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.step { position: relative; display: inline-flex; align-items: center; gap: 0; padding: 11px 22px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--muted); font: inherit; cursor: pointer; overflow: hidden; transition: color .2s, border-color .2s; }
.step:hover { color: var(--ink); border-color: var(--ink); }
.step.is-active { border-color: var(--ink); color: var(--ink); }
.step__title { font-family: var(--body); font-size: 17px; line-height: 1.2; letter-spacing: 0; color: inherit; }
.step__bar { position: absolute; left: 0; right: 0; bottom: 0; display: block; height: 2px; background: none; }
.step__bar span { display: block; width: 0; height: 100%; background: var(--purple); }
.step:hover .step__title { color: var(--ink); }
.step.is-active .step__num { color: var(--accent); }
.step.is-active .step__title { color: var(--ink); }
.step.is-active .step__prompt,
.step.is-active .step__bar { display: block; }

.app { max-width: 1180px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.app__bar { height: 42px; display: flex; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); background: var(--card); }
.app__bar .app__tab { flex: none; white-space: nowrap; }
.app__tab { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-right: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.app__tab i { width: 7px; height: 7px; display: block; background: var(--rule); }
.app__tab.is-active { background: var(--paper); color: var(--ink); box-shadow: inset 0 -2px 0 var(--purple); }
.app__tab.is-active i { background: var(--purple); }
.app__brand { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.app__brand img { width: 18px; height: 18px; }
.app__body { position: relative; height: 520px; display: grid; grid-template-columns: 48px 360px minmax(0, 1fr); }
.app__view { position: relative; }
.app__agent { position: relative; display: flex; order: -1; border-left: 0; border-right: 1px solid var(--rule); flex-direction: column; min-height: 0; border-left: 1px solid var(--rule); background: var(--card); }

/* Editor stage (view 1), after the live site's app preview: the map beside the
   sequence, both strands and a feature track, with a status bar on the frame. */

.app__rail { order: -2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-right: 1px solid var(--rule); background: var(--card); }
.app__railmark { width: 26px; height: 26px; margin-bottom: 8px; }
.app__railmark img { width: 100%; height: 100%; object-fit: contain; opacity: .85; }
.app__ws { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 8px; background: var(--band); color: #fff; font-family: var(--mono); font-size: 11px; }
.app__railitem--foot { margin-top: auto; }
.pane { display: flex; flex-direction: column; min-width: 0; }
.pane__tabs { display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 8px; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--muted); }
.pane__tabs b { font-weight: 400; padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.pane__tabs b.is-on { background: var(--card); color: var(--ink); }
.pane__tabs i { width: 1px; height: 14px; margin: 0 5px; background: var(--rule); }
.pane__acts { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.pane__acts em { font-style: normal; font-size: 12px; }
.pane__lock { color: #C0392B; }
.app__railitem { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); color: var(--muted); }
.app__railitem svg { width: 16px; height: 16px; }
.app__railitem.is-on { background: var(--paper); color: var(--purple); border: 1px solid var(--rule); }
.app__railuser { margin-top: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); font-family: var(--mono); font-size: 11px; color: var(--purple); }

.app__tab em { font-style: normal; }
.app__tab b { font-weight: 400; color: var(--muted); opacity: 0; margin-left: 2px; }
.app__tab.is-active b { opacity: .7; }



.chat__top { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--rule); }
.chat__chats { padding: 4px 10px; border: 1px solid var(--rule); border-radius: 8px; font-size: 13px; color: var(--ink-2); }
.chat__title { font-size: 14px; color: var(--ink); }
.chat__acts { margin-left: auto; display: inline-flex; gap: 12px; color: var(--muted); font-size: 14px; }
.chat__acts em { font-style: normal; }

/* A finished turn folds its steps behind one line (TurnActivity.tsx). */
.turn { margin-top: 14px; }
.turn__sum { display: none; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.turn__sum svg { width: 14px; height: 14px; }
.turn__mark { width: 14px; height: 14px; border: 1.5px solid var(--purple); border-radius: 50%; }
.turn.is-done .turn__sum { display: inline-flex; }
.turn.is-done .turn__steps { display: none; }
.turn__steps { display: flex; flex-direction: column; gap: 9px; margin: 2px 0 0; }
.turn__step { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; color: var(--muted); }
.turn__step svg { width: 13px; height: 13px; margin-top: 3px; flex: none; }
.turn .msg-answer { margin-top: 14px; }

.app__ask { margin: auto 14px 14px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); font-size: 15px; color: var(--muted); }
.app__askrow { display: flex; align-items: center; gap: 10px; }
.app__askrow b { font-weight: 400; color: var(--muted); }
.app__agentpick { padding: 3px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; }
.app__send { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--purple); color: #fff; }
.app__ask > span:first-child { display: block; }
.app.is-typing .app__ask { border-color: var(--ink); }
.app.is-typing .app__ask span { color: var(--ink); }
.app.is-typing .app__ask span::after { content: ''; display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--purple); animation: dmcaret 1s steps(1) infinite; }
@keyframes dmcaret { 50% { opacity: 0; } }
.app__ask b { font-weight: 400; }
.app__send { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--card); color: var(--muted); }

.view.view--doc, .view.view--board { padding: 28px 32px; align-items: stretch; justify-content: flex-start; }
.chipx { padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); }
.chipx--status { border-color: var(--ink); color: var(--ink); }
.chipx--add { color: var(--muted); border-style: dashed; }

.lab { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.lab__top { display: flex; align-items: center; gap: 12px; }
.lab__top h3 { font-family: var(--display); font-size: 24px; font-weight: 400; }
.lab__seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; font-size: 13px; }
.lab__seg b { padding: 4px 10px; font-weight: 400; color: var(--muted); }
.lab__seg b.is-on { background: var(--card); color: var(--ink); }
.lab__search { margin-left: auto; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 8px; font-size: 13px; color: var(--muted); }
.lab__new { padding: 5px 12px; border-radius: 8px; background: var(--purple); color: #fff; font-size: 13px; }
.lab__attn { padding: 8px 12px; border: 1px solid #E8D27A; border-radius: 8px; background: #FDF8E6; font-size: 13.5px; color: #6B5A14; }
.board2 { display: grid; grid-template-columns: repeat(3, minmax(0, 256px)); gap: 14px; }
.board2__col { display: flex; flex-direction: column; gap: 8px; }
.board2__h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.board2__h i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.board2__h i.is-todo { background: #3B82F6; }
.board2__h i.is-doing { background: #F59E0B; }
.board2__h i.is-done { background: #10B981; }
.board2__h em { font-style: normal; color: var(--muted); }
.board2__card { padding: 11px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); display: flex; flex-direction: column; gap: 7px; }
.board2__card b { font-size: 15px; font-weight: 500; }
.board2__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.board2__chips i { font-style: normal; padding: 2px 7px; border: 1px solid var(--rule); border-radius: 5px; font-size: 11.5px; color: var(--ink-2); }
.board2__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.board2__meta em { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); font-size: 10px; color: var(--purple); }
.board2__meta u { text-decoration: none; padding: 1px 6px; border-radius: 4px; background: var(--card); font-size: 11px; }

.app__status { display: flex; align-items: center; gap: 18px; padding: 0 16px; height: 32px; border-top: 1px solid var(--rule); background: var(--card); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.app__status-ok { color: #2E7D32; }
.app__status-right { margin-left: auto; }
.app__status-name { color: var(--ink); font-weight: 500; }
.view--ed { padding: 0; align-items: stretch; justify-content: stretch; }
.ed { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); height: 100%; }
.ed .pane:first-child { border-right: 1px solid var(--rule); }
.ed__map { flex: 1; display: grid; place-items: center; padding: 16px; }
.ed__map .demo-map { width: 100%; max-width: 300px; height: auto; }
/* The map renders about 230px wide here, so viewBox text needs to be large in
   user units to read at ~9px on screen. */
.ed__map .demo-map text { font-size: 13px; }
.ed__map .demo-map .t-name { font-size: 24px; }
.ed__map .demo-map .t-muted { font-size: 12px; }
.ed__seq { flex: 1; padding: 12px 14px; overflow: hidden; }
.ed__seqhead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.ed__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; align-items: start; margin-bottom: 10px; }
.ed__num { font-family: var(--mono); font-size: 10px; color: var(--muted); line-height: 1.5; }
.ed__bases { position: relative; min-width: 0; }
.ed__top, .ed__bot { display: block; font-family: var(--code); font-size: 9.5px; letter-spacing: 0; line-height: 1.55; white-space: nowrap; }
.ed__top { color: var(--ink); }
.ed__bot { color: var(--muted); }
.ed__track { position: relative; display: block; height: 13px; margin-top: 4px; }
.ed__feat { position: absolute; top: 0; height: 13px; padding-right: 7px; background: #4CAF50; color: #fff; font-family: var(--mono); font-size: 9px; line-height: 13px; text-align: center; white-space: nowrap; overflow: hidden; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
.ed__feat--rev { padding: 0 0 0 7px; clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%); }
.ed__ruler { position: relative; display: block; height: 11px; }
.ed__ruler i { position: absolute; top: 4px; width: 1px; height: 4px; background: var(--rule); }
.ed__ruler b { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-family: var(--mono); font-size: 8.5px; font-weight: 400; color: var(--muted); }
@media (max-width: 1279px) and (min-width: 901px) { :root { --gutter: 40px; } }
@media (max-width: 1180px) {
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed__map { border-right: 0; border-bottom: 1px solid var(--rule); }
  /* Stacked, the sequence pane has room for two rows; a third would be cut
     mid-row and read as a rendering fault. */
  .ed__row:nth-of-type(n+3) { display: none; }
}


.chat__body { position: relative; flex: 1; min-height: 0; }
.view, .convo { position: absolute; inset: 0; visibility: hidden; }
.view.is-active, .convo.is-active { visibility: visible; }
.view { padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.convo { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.convo__head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }

.reveal { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.is-active .reveal { opacity: 1; transform: none; }
.is-active .d1 { transition-delay: .15s; }
.is-active .d2 { transition-delay: .9s; }
.is-active .d3 { transition-delay: 1.6s; }
.is-active .d4 { transition-delay: 2.3s; }
.is-active .d5 { transition-delay: 3.0s; }
.is-active .d6 { transition-delay: 3.7s; }

.msg-user { align-self: flex-end; max-width: 85%; padding: 10px 14px; background: #F1F2F4; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.msg-tool { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); font-family: var(--code); font-size: 11.5px; color: var(--ink-2); }
.msg-tool b { font-weight: 500; color: var(--ink); }
.msg-tool .ok { color: #2E7D32; }
.msg-answer { font-size: 14px; line-height: 1.5; color: var(--ink); }

.demo-map { width: 100%; max-width: 440px; height: auto; }
.demo-map text { font-family: var(--mono); font-size: 10.5px; fill: var(--ink); }
.demo-map .t-muted { fill: var(--muted); }
.demo-map .t-name { font-family: var(--display); font-size: 26px; letter-spacing: -0.01em; }
.demo-map .arc { opacity: 0; transition: opacity .5s ease; }
.is-active .demo-map .arc { opacity: 1; }
.demo-map .ring { stroke: #C9CBD2; stroke-width: 1; }
.demo-map .tick { font-size: 10px; fill: var(--muted); }
.demo-map .cut { stroke: #FF0000; stroke-width: 1.2; }
.demo-map .cutlab { font-size: 10px; fill: var(--ink-2); }
.is-active .demo-map .a1 { transition-delay: .9s; }
.is-active .demo-map .a2 { transition-delay: 1.3s; }
.is-active .demo-map .a3 { transition-delay: 1.7s; }
.is-active .demo-map .a4 { transition-delay: 2.1s; }
.is-active .demo-map .a5 { transition-delay: 2.5s; }

/* Four steps side by side left 45px per node in the 317px stage, so every line
   wrapped one word at a time. Two across, two down: each node gets ~140px. */
.hflow { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; align-items: stretch; }
.hflow .flow__node { position: relative; display: flex; flex-direction: column; justify-content: center; }
.hflow .flow__node:nth-child(odd)::after { content: ''; position: absolute; top: 50%; right: -31px; width: 30px; height: 1px; background: var(--ink); }
.primers { width: 100%; margin-top: 28px; border-collapse: collapse; font-family: var(--code); font-size: 12px; }
.primers th { text-align: left; font-weight: 400; color: var(--muted); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--ink); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.primers td { padding: 8px 12px 8px 0; border-bottom: 1px dashed var(--rule); color: var(--ink); white-space: nowrap; }

.demo-plate { width: 100%; max-width: 440px; }
.demo-plate .plate { max-width: none; gap: 6px; font-size: 10px; }
.demo-plate .plate b { background: transparent; border: 1px solid var(--rule); transition: background-color .2s, border-color .2s; }
.is-active .demo-plate .plate b { background: var(--purple); border-color: var(--purple); }
.is-active .demo-plate .plate b.o { background: var(--orange); border-color: var(--orange); }

.demo-record { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }

/* Page hero (About, Security) */
.page-hero { padding: 96px 0 80px; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); column-gap: 72px; align-items: end; }
.page-hero .h1 { font-size: 68px; margin-top: 20px; }
.page-hero .lede { margin-top: 28px; max-width: 640px; }

/* About */
.fig-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
.fig-tools__box { border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.fig-tools__box strong { font-size: 15px; font-weight: 500; }
.fig-tools__drop { height: 44px; border-left: 1px dashed var(--muted); margin-left: 50%; }
.fig-tools__one { border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); padding: 18px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.fig-tools__one strong { font-family: var(--display); font-size: 24px; font-weight: 400; }
.letter-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 72px; }
.letter { max-width: 700px; }
.letter p { margin: 0 0 24px; font-family: var(--display); font-size: 23px; line-height: 1.5; color: var(--ink); }
.letter .sign { margin-top: 8px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
#story .letter-wrap { display: block; text-align: center; }
#story .letter-wrap > div:first-child { margin-bottom: 28px; }
#story .letter { margin-inline: auto; }
.awards li { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.awards li:first-child { border-top: 1px solid var(--ink); }
.awards strong { font-family: var(--display); font-size: 22px; font-weight: 400; }
.awards__name { display: flex; align-items: center; gap: 24px; min-width: 0; }
.awards__name img { width: 88px; height: 40px; flex: 0 0 88px; object-fit: contain; }
.awards__name img[src$="logo-nsf.svg"] { height: 48px; }
@media (max-width: 700px) {
  .awards__name { gap: 16px; }
  .awards__name img { width: 64px; flex-basis: 64px; }
  .awards li > .spec { margin-left: 80px; }
}

/* Security */
.glance { border: 1px solid var(--ink); border-radius: var(--r); background: var(--card); }
.glance li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: 15px; align-items: baseline; }
.glance li:last-child { border-bottom: 0; }
.glance__head { padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pillar { padding: 26px 28px 30px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.pillar:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--rule); }
.pillar__n { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .08em; }
.pillar h3 { font-size: 25px; }
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 72px; }
.toc { position: sticky; top: 104px; align-self: start; display: flex; flex-direction: column; }
.toc .label { margin-bottom: 12px; }
.toc a { padding: 6px 0 6px 14px; border-left: 1px solid var(--rule); color: var(--ink-2); font-size: 15px; text-decoration: none; }
.toc a:hover { border-left-color: var(--ink); color: var(--ink); }
.doc__body > section { padding-bottom: 64px; scroll-margin-top: 96px; }
.doc__body .label { display: block; margin-bottom: 10px; }
.doc__body h2 { font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 20px; }
.doc__body p { max-width: 720px; margin-bottom: 14px; color: var(--ink-2); }
.doc__body p strong { color: var(--ink); font-weight: 500; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--ink); text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
.table td:first-child { color: var(--ink); font-weight: 500; }
.status { display: inline-block; padding: 2px 8px; border: 1px solid; border-radius: var(--r); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; font-weight: 400; }
.status--today { color: #2E6B31; border-color: #A9CFAB; }
.status--progress { color: #8E5319; border-color: #E8C29F; }
.status--roadmap { color: var(--muted); border-color: var(--rule); }
.faq details { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--ink); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin-top: 12px; max-width: 720px; color: var(--ink-2); }

/* Security: isolation figure and the folded review rows */
.iso { margin: 0; padding: 24px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--card); display: flex; flex-direction: column; gap: 18px; }
.iso__pair { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; }
.iso__ws { padding: 14px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); display: flex; flex-direction: column; gap: 10px; }
.iso__ws ul, .iso__cross ul { display: flex; flex-wrap: wrap; gap: 6px; }
.iso__ws li, .iso__cross li { padding: 3px 8px; border: 1px solid var(--rule); border-radius: var(--r); font-size: 13px; background: var(--paper); }
.iso__gap { display: grid; place-items: center; position: relative; }
.iso__gap::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 50%; border-left: 1px dashed var(--bar-muted); }
.iso__gap span { position: relative; padding: 4px 0; background: var(--card); font-family: var(--mono); font-size: 10px; line-height: 1.3; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.iso__cross { padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.iso__cross li { border-color: var(--accent); color: var(--accent); }
.iso figcaption { font-size: 12.5px; line-height: 1.5; }
.sec-hero { align-items: center; }
.review .faq details p + p { margin-top: 10px; }
.review .faq details .table-scroll { margin-top: 14px; }
.review .faq details .table { margin-bottom: 14px; }
.review .faq details .table + p, .review .faq details .table-scroll + p { margin-top: 14px; }

/* Product page */
.pf-hero { padding-bottom: 0; }
.pf-hero .h1 { max-width: 900px; }
.pf-jump { margin-top: 64px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.pf-jump a { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 22px 0; color: var(--ink); font-size: 15.5px; line-height: 1.3; text-decoration: none; }
.pf-jump a + a { padding-left: 16px; border-left: 1px solid var(--rule); }
.pf-jump a span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.pf-jump a:hover, .pf-jump a:hover span { color: var(--purple); }
.pf-group { border-top: 1px solid var(--ink); }
.pf-group__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-top: 18px; padding-bottom: 18px; }
.pf-group + .pf-sec { border-top: 0; padding-top: 40px; }
.pf-sec { padding: 72px 0 80px; scroll-margin-top: 72px; }
.pf-sec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: center; }
.pf-sec--flip .pf-sec__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pf-sec--flip .pf-sec__text { order: 2; }
.pf-sec__text .label { display: block; margin-bottom: 16px; }
.pf-sec__text .lede-s { margin-top: 20px; max-width: 500px; }
.pf-list { margin-top: 28px; border-top: 1px solid var(--rule); }
.pf-list li { position: relative; padding: 10px 0 10px 20px; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pf-list li::before { content: ''; position: absolute; left: 0; top: calc(10px + .75em); width: 8px; height: 1px; background: var(--ink); }
.demo-shot, .pf-fig { margin: 0; min-width: 0; }
/* The stage under a product figure: the same lilac glass tile the walkthroughs (01, 04, 07) draw
   in product-demos.css, so 03 and 06 sit on the same ground. Founder 10-08. */
.pf-stage { --p-glint: light-dark(#ffffffce, #ffffff12); --p-glass: light-dark(#e9eafa, #25263d); --p-glass-dark: light-dark(#c8cce9, #171824); --p-shadow: light-dark(#24264a29, #00000066);
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: 24px 18px; border: 1px solid light-dark(#d9dcf2, #393c57); border-radius: 20px;
  background: linear-gradient(125deg, var(--p-glint) 0%, transparent 30%), linear-gradient(150deg, var(--p-glass) 25%, var(--p-glass-dark) 100%); }
.pf-stage::before { content: ''; position: absolute; inset: -50% 40% -80% 32%; width: 75px; background: var(--p-glint); transform: rotate(32deg); z-index: -1; opacity: .65; }
.pf-stage > .vf__win, .pf-stage .pf-ai__win { box-shadow: 0 18px 35px var(--p-shadow); }
.demo-shot .pf-stage img { display: block; border-radius: 8px; border: 1px solid var(--rule); box-shadow: 0 18px 35px var(--p-shadow); }
.pf-stage > .vf__win { border-radius: 8px; }
@media (max-width: 700px) { .pf-stage { padding: 12px; border-radius: 16px; } }
.demo-shot img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); }
.demo-shot .figcap, .pf-fig .figcap { max-width: none; }
/* Verify: Sanger run, the segment pages' .seqaln figure scoped here so the -legora drafts keep theirs */
.pf-sanger { border: 1px solid var(--ink); border-radius: var(--r); background: var(--card); overflow: hidden; }
.pf-sanger__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.pf-sanger .seqaln { padding: 14px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); font-family: var(--code); font-size: 12.5px; }
.pf-sanger .seqaln__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); white-space: pre; line-height: 1.85; overflow: hidden; }
.pf-sanger .seqaln__row span:first-child { color: var(--muted); }
.pf-sanger .seqaln__row span:last-child { letter-spacing: .06em; color: var(--muted); }
.pf-sanger .seqaln__ref span:last-child { color: var(--ink); }
.pf-sanger .seqaln mark { background: var(--orange); color: var(--ink); }
.pf-sanger__sum { padding: 4px 16px 8px; font-family: var(--mono); font-size: 12px; }
.pf-sanger__sum li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--rule); }
.pf-sanger__sum li:last-child { border-bottom: 0; }
.pf-sanger__sum span { color: var(--ink-2); }
.pf-sanger__sum b { font-weight: 400; color: var(--muted); }
.pf-sanger__sum b.is-flag { font-weight: 500; color: var(--ink); }
.pf-sanger__sum b.is-flag::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--orange); }
/* Analyze: 4PL dose-response fit */
.pf-chart { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); padding: 20px 16px 12px; }
/* The 4PL chart used to be black strokes and monospace labels sitting next to a
   purple plate: two design languages in one figure. It now reads in the same
   accent family as the plate, with the body face on the labels and mono kept
   for the small spec readouts only. Axes are hairlines like every other rule on
   the site rather than full-weight ink. */
.pf-4pl { width: 100%; height: auto; display: block; }
.pf-4pl text { font-family: var(--body); font-size: 11.5px; fill: var(--muted); }
.pf-4pl__grid line { stroke: var(--rule); stroke-width: 1; }
.pf-4pl__axis { fill: none; stroke: var(--rule); stroke-width: 1; }
.pf-4pl__guide { fill: none; stroke: var(--purple); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.pf-4pl__fit { fill: none; stroke: var(--purple); stroke-width: 2; stroke-linecap: round; }
.pf-4pl__pt circle { fill: var(--paper); stroke: var(--purple); stroke-width: 1.6; }
.pf-4pl__ic50 { fill: var(--purple); }
.pf-4pl .pf-4pl__label { font-family: var(--body); font-size: 12.5px; font-weight: 500; fill: var(--ink); }
.pf-4pl__tick text { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
/* Run the lab: board figure. Plasmid chips use the CDS green from featureColors.ts, as on the homepage. */
.board { --fig-plasmid: #4CAF50; border: 1px solid var(--ink); border-radius: var(--r); background: var(--card); overflow: hidden; }
.board__attn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); font-size: 13.5px; color: var(--ink-2); }
.board__attn .label { color: var(--ink); }
.board__attn .label::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--orange); }
.board__attn b { font-weight: 500; color: var(--ink); }
.board__lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board__lane { min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.board__lane + .board__lane { border-left: 1px solid var(--rule); }
.board__head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 2px 4px; }
.board__card { min-width: 0; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.board__card strong { font-size: 14px; font-weight: 500; line-height: 1.35; }
.board__card.is-late { border-color: var(--orange); }
.board__card.is-done strong { color: var(--ink-2); }
.board__meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.board__card.is-late .board__meta span:last-child { color: var(--ink); }
.board__who { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: var(--r); font-size: 10px; color: var(--ink); }
.board .chip { max-width: 100%; height: 26px; padding: 0 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 24px; }
.board .chip i { display: inline-block; margin-right: 6px; vertical-align: 0; }
.board .chip i.is-plasmid { background: var(--fig-plasmid); }
.board .chip i.is-workflow { background: var(--purple); }
.board .chip i.is-entry { background: var(--bar-muted); }
/* Trust strip and reference */
.pf-trust-sec { border-top: 1px solid var(--rule); padding: 56px 0 64px; }
.pf-trust__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; font-size: 15px; }
.pf-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pf-trust a { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 4px 0; color: var(--ink); text-decoration: none; }
.pf-trust a + a { padding-left: 20px; border-left: 1px solid var(--rule); }
.pf-trust strong { font-size: 16px; font-weight: 500; }
.pf-trust span { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pf-trust a:hover strong { color: var(--purple); }
.pf-ref-sec { padding: 56px 0 72px; }
.pf-ref { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 72px; align-items: start; }
.pf-ref > div > .label { display: block; margin-bottom: 12px; }
.pf-ref__list { margin: 0; border-top: 1px solid var(--ink); }
.pf-ref__list div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pf-ref__list dd { margin: 0; font-size: 16px; color: var(--ink); }

/* Pricing */
.pricing__meta { text-align: right; line-height: 1.7; }
.pricing { padding: 0 0 72px; }
.pricing__foot { margin-top: 22px; font-size: 14px; color: var(--muted); max-width: 70ch; }
.pricing-faq .faq details p { max-width: none; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.plan { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.plan:first-child { padding-left: 0; }
.plan + .plan { border-left: 1px solid var(--rule); }
.plan__price { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.plan__price b { font-family: var(--display); font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.plan__price span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.plan__desc { font-size: 16px; color: var(--ink-2); min-height: 46px; }
.plan .btn { justify-content: center; }
.plan__note { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.plan__list { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.plan__list li { padding-left: 18px; position: relative; }
.plan__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--ink); }
.plan__list li.plan__lead { padding-left: 0; color: var(--muted); font-size: 14.5px; }
.plan__list li.plan__lead::before { display: none; }
.pricing__segments { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; font-size: 16px; }
/* A comparison table reads worst when its columns are far apart, so it keeps a
   best width now that the page is fluid. */
.table-scroll { overflow-x: auto; max-width: 1400px; }
.table--plans { min-width: 640px; }
/* Comparison matrix. Group rows break the table into sections so a reader can
   find their question instead of reading 12 rows; the first column stays the
   widest because the row label is what people scan. */
.table--compare { min-width: 1000px; }
/* The matrix is a scanning surface, not a reading measure, so it ignores the
   1400px cap the other tables keep and uses the full column width. */
.table-scroll--full { max-width: none; }
.table--compare th:not(:first-child), .table--compare td:not(:first-child) { width: 21%; }
.table--compare td { font-size: 14.5px; line-height: 1.5; }
.table--compare td .spec { display: block; margin-top: 6px; }
.table__group td { padding: 26px 0 8px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.table--compare tbody tr:first-child td { padding-top: 10px; }
.table--plans th:not(:first-child), .table--plans td:not(:first-child) { width: 18%; }

/* Booking: a short invitation followed directly by the scheduler. */
.book { padding: 56px 0 64px; }
.book .wrap { max-width: 1120px; margin-inline: auto; }
.book__intro { text-wrap: pretty; text-align: center; }
.book .h1 { max-width: none; }
.book .lede { max-width: none; margin: 16px auto 0; }
.book__mail { margin-top: 16px; font-size: 14px; color: var(--muted); }
.book__cal { margin-top: 32px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.book__cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--card); }
.book__cal-open { font-size: 14.5px; }
/* Full width so Cal.com uses its compact three-column layout (it stacks below ~800px wide) */
.book__cal iframe { display: block; width: 100%; height: 540px; border: 0; }

/* Standards band: each standard carries its own status; a dashed seal means not held yet */
.standards { background: var(--band); color: var(--cream); }
.standards__inner { padding-top: 96px; padding-bottom: 72px; }
.standards__head { display: grid; grid-template-columns: 580px minmax(0, 1fr); column-gap: 72px; align-items: start; margin-bottom: 56px; }
.standards .label { color: rgba(233, 234, 255, .62); display: block; margin-bottom: 16px; }
.standards .h2 { color: #fff; }
.standards__head p { color: rgba(246, 242, 233, .82); max-width: 540px; font-size: 17px; line-height: 1.55; }
.standards__head .link { display: inline-block; margin-top: 18px; color: #fff; font-size: 15px; }
.standards__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(233, 234, 255, .22); border-bottom: 1px solid rgba(233, 234, 255, .22); }
.std { padding: 28px 24px 30px; display: flex; flex-direction: column; gap: 12px; }
.std:first-child { padding-left: 0; }
.std + .std { border-left: 1px solid rgba(233, 234, 255, .22); }
.std h3 { font-family: var(--body); font-size: 17px; font-weight: 500; letter-spacing: 0; color: #fff; }
.std p { font-size: 15px; line-height: 1.55; color: rgba(246, 242, 233, .7); }
.std .status { align-self: flex-start; }
.standards .status--today { color: #A8DCAB; border-color: rgba(168, 220, 171, .45); }
.standards .status--progress { color: #F2C497; border-color: rgba(242, 196, 151, .5); }
.standards .status--roadmap { color: rgba(233, 234, 255, .7); border-color: rgba(233, 234, 255, .3); }
.seal { margin-top: auto; padding-top: 18px; }
.seal span {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(233, 234, 255, .5);
  box-shadow: inset 0 0 0 4px var(--band), inset 0 0 0 5px rgba(233, 234, 255, .22);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(233, 234, 255, .75);
}
.seal--pending span { border-style: dashed; color: rgba(233, 234, 255, .5); }
.standards__note { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 13px; color: rgba(233, 234, 255, .6); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .demo-map .arc, .demo-plate .plate b { transition: none !important; }
}

/* Responsive */
@media (max-width: 1180px) {
  .demo__grid, .page-hero__grid, .letter-wrap, .doc { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  /* The workspace rail is chrome: it costs a column and shows nothing on a phone. */
  .app__rail { display: none; }
  .app__body { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--rule); }
  .standards__head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .logos__rule { display: none; }
  .logos__inner--split { justify-content: flex-start; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan + .plan { border-left: 0; }
  .plan:nth-child(2n) { border-left: 1px solid var(--rule); }
  .plan:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .plan:nth-child(3) { padding-left: 0; }
  .pricing__meta { text-align: left; }
  .standards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .std:nth-child(n+3) { border-top: 1px solid rgba(233, 234, 255, .22); }
  .std:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .hero__grid, .section__head, .memory, .closing__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  /* The 12-column spans would create implicit columns once the grid is one
     column wide, so they are cleared with it. */
  .section__head > :first-child, .section__head > :last-child,
  .closing__inner > :first-child, .closing__inner > :last-child { grid-column: auto; }
  .closing__ctas { justify-content: flex-start; }
  /* Below 1180px the text column and its figure stack, and the two-up panes
     inside a figure go to one column with them. */
  .rows { gap: 56px; }
  .row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .figcard--split, .figcard__out { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .figcard__out .gel { max-width: 420px; }
  .swo li { grid-template-columns: 44px minmax(0, 1fr); }
  .swo li > p { grid-column: 2; }
  .integrations, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .nav__links .nav__link { padding: 0 8px; }
  .book .h1 { font-size: 56px; }
  .pf-sec__grid, .pf-sec--flip .pf-sec__grid { column-gap: 40px; }
  .pf-jump { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-jump a:nth-child(4n+1) { padding-left: 0; border-left: 0; }
  .pf-jump a:nth-child(n+5) { border-top: 1px solid var(--rule); }
  .pf-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-trust a:nth-child(3) { padding-left: 0; border-left: 0; }
  .pf-trust a:nth-child(n+3) { border-top: 1px solid var(--rule); padding-top: 18px; }
  .pf-trust a { padding-bottom: 18px; }
  .pf-ref { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .board__lane { padding: 8px; }
  .board__card { padding: 10px; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .nav__links, .nav__signin, .nav__demo { display: none; }
  .h1 { font-size: 50px; }
  .h2 { font-size: 34px; }
  .h3 { font-size: 24px; }
  .hero { padding-top: 56px; }
  .cols-3, .ways, .integrations, .grid-4, .way__points { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .memcard li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .memcard li .spec { text-align: left; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 64px 0 72px; }
  .app__body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .app__view { height: 420px; }
  .app__agent { height: 360px; border-left: 0; border-top: 1px solid var(--rule); }
  .app__tab:not(.is-active) { display: none; }
  .hflow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .page-hero .h1 { font-size: 46px; }
  .fig-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .fig-tools__drop { display: none; }
  .fig-tools__one { margin-top: 12px; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar:nth-child(2n) { padding-left: 0; border-left: 0; }
  .standards__inner { padding-top: 64px; padding-bottom: 56px; }
  .logos__group { gap: 20px 32px; }
  .footer__hint { display: none; }
  .logos__inner--split { row-gap: 28px; padding-top: 32px; padding-bottom: 32px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan, .plan:nth-child(3) { padding: 24px 0 28px; }
  .plan:nth-child(2n) { border-left: 0; }
  .plan + .plan { border-top: 1px solid var(--rule); }
  .plan__desc { min-height: 0; }
  .standards__head { margin-bottom: 36px; }
  .standards__grid { grid-template-columns: minmax(0, 1fr); }
  .std, .std:nth-child(n+3) { grid-column: auto; padding: 22px 0 24px; }
  .std + .std { border-left: 0; border-top: 1px solid rgba(233, 234, 255, .22); }
  .std { position: relative; }
  .std h3, .std .status { margin-right: 72px; }
  .seal { position: absolute; top: 20px; right: 0; margin: 0; padding: 0; }
  .awards li, .glance li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .table { font-size: 14px; }
  .book { padding-top: 56px; padding-bottom: 64px; }
  .book .h1 { font-size: 46px; }
  .book__cal { margin-top: 40px; }
  .book__cal iframe { height: 720px; }
  .pf-jump { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-jump a, .pf-jump a + a, .pf-jump a:nth-child(4n+1) { padding: 14px 12px 16px 0; border-left: 0; }
  .pf-jump a:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--rule); }
  .pf-jump a:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .pf-sec { padding: 56px 0 64px; }
  .pf-group + .pf-sec { padding-top: 32px; }
  .pf-sec__grid, .pf-sec--flip .pf-sec__grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .pf-sec--flip .pf-sec__text { order: 0; }
  .pf-sanger .seqaln { font-size: 11px; padding: 12px; }
  .pf-sanger .seqaln__row { grid-template-columns: 56px minmax(0, 1fr); }
  .pf-sanger .seqaln__row span:last-child { letter-spacing: 0; }
  .pf-chart { padding: 12px 8px 8px; }
  .board__lanes { grid-template-columns: minmax(0, 1fr); }
  .board__lane + .board__lane { border-left: 0; border-top: 1px solid var(--rule); }
  .pf-trust-sec { padding: 48px 0 56px; }
  .pf-trust { grid-template-columns: minmax(0, 1fr); }
  .pf-trust a, .pf-trust a + a, .pf-trust a:nth-child(3) { padding: 16px 0; border-left: 0; }
  .pf-trust a + a { border-top: 1px solid var(--rule); }
  .pf-ref__list div { grid-template-columns: 72px minmax(0, 1fr); }
}

/* ---- Shared top bar and hero card ---- */
.nav2 {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1), transform .38s cubic-bezier(.22, 1, .36, 1), opacity .38s cubic-bezier(.22, 1, .36, 1);
}
/* Like Transfyr: see-through at the very top, solid once scrolled, slides away on the way down and back on the way up. */
.nav2.is-solid { background: var(--paper); }
.nav2.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.nav2__word, .nav2__signin, .nav2__btn, .nav2__brand img { transition: color .3s, border-color .3s, filter .3s; }
.nav2.is-on-dark .nav2__word, .nav2.is-on-dark .nav2__signin, .nav2.is-on-dark .nav2__pill { color: #F5F4F0; }
.nav2.is-on-dark .nav2__pill:hover, .nav2.is-on-dark .has-menu:focus-within > .nav2__pill { color: #fff; }
.nav2.is-on-dark .nav2__brand img { filter: invert(1); }
.nav2.is-on-dark .nav2__btn:not(.nav2__btn--primary) { border-color: rgba(245, 244, 240, .75); color: #F5F4F0; }
body.has-nav2 { padding-top: 80px; }
html:has(> body.has-nav2) { scroll-padding-top: 92px; }
.nav2__inner { height: 80px; padding: 0 43px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.nav2__left { display: flex; align-items: center; gap: 45px; }
.nav2__word { font-family: 'Plus Jakarta Sans', var(--body); font-size: 23px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); text-decoration: none; }
.nav2__links { display: flex; align-items: center; gap: 45px; }
.nav2__links > li { position: relative; height: 80px; display: flex; align-items: center; }
.nav2__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0;
  border: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: color .15s;
}
.nav2__pill:hover, .has-menu:hover > .nav2__pill, .has-menu:focus-within > .nav2__pill { color: var(--accent); }
.nav2__pill[aria-current="page"] { color: var(--accent); font-weight: 500; }
.nav2__pill:focus-visible, .nav2__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
.nav2__row[aria-current="page"] { font-weight: 600; }
.nav2__pill svg { transition: transform .15s; }
.has-menu:hover > .nav2__pill svg, .has-menu:focus-within > .nav2__pill svg { transform: rotate(180deg); }
.nav2 .has-menu.is-closed .menu { display: none; }
.nav2 .has-menu.is-closed > .nav2__pill svg { transform: none; }
.nav2 .menu { top: calc(100% - 10px); left: 0; border-color: var(--rule); border-radius: 14px; box-shadow: 0 16px 40px rgba(18, 19, 22, .08); overflow: hidden; }
.nav2__brand { display: flex; flex-shrink: 0; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
/* Compensate for the PNG's transparent padding, keeping the full outer ring visible. */
.nav2__brand-mark { position: relative; display: block; width: 32px; height: 32px; overflow: visible; }
.nav2__brand img { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; max-width: none; object-fit: contain; transform: translate(-50%, -50%); }
.nav2__right { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.nav2__signin { padding: 0 10px; font-size: 15px; color: var(--ink); text-decoration: none; }
.nav2__signin:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav2__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 22px;
  border: 1px solid var(--ink); border-radius: 999px;
  color: var(--ink); font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.nav2__btn:hover { background: var(--ink); color: var(--paper); }
/* Like Albert's Login: the outline fills with the accent on hover. */
.nav2 .nav2__btn--login:hover, .nav2.is-on-dark .nav2__btn--login:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.nav2__btn--primary { background: var(--purple); border-color: var(--purple); color: var(--on-accent, #fff); font-weight: 500; }
.nav2__btn--primary:hover { background: var(--purple-hover); border-color: var(--purple-hover); color: var(--on-accent, #fff); }
.nav2__burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.nav2__burger path { stroke: currentColor; stroke-width: 1.5; fill: none; transform-origin: 9px 9px; transition: transform .2s; }
.nav2__burger[aria-expanded="true"] .l1 { transform: translateY(3px) rotate(45deg); }
.nav2__burger[aria-expanded="true"] .l2 { transform: translateY(-3px) rotate(-45deg); }
.nav2__sheet { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 4px 20px 32px; background: var(--paper); border-top: 1px solid var(--rule); }
.nav2__sheet[hidden] { display: none; }
.nav2__group summary, .nav2__row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; border-bottom: 1px solid var(--rule);
  font-size: 18px; color: var(--ink); text-decoration: none; list-style: none; cursor: pointer;
}
.nav2__group summary::-webkit-details-marker { display: none; }
.nav2__group summary svg { display: block; width: 12px; height: 12px; transform-origin: 50% 50%; transition: transform .15s; }
.nav2__group[open] summary svg { transform: rotate(180deg); }
.nav2__group a { display: block; padding: 10px 0 10px 12px; font-size: 16px; color: var(--ink-2); text-decoration: none; }
.nav2__group[open] { border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.nav2__group[open] summary { border-bottom: 0; }
.nav2__sheet-actions { margin-top: 24px; display: grid; gap: 10px; }
.nav2__sheet-actions .nav2__btn { height: 48px; font-size: 16px; }
html.nav2-open { overflow: hidden; }

/* The frame spans the full width; the 20px side margin and the corners are a clip that opens to full bleed as you scroll (site.js sets --g). */
.hero-card { padding: 0 0 20px; }
.hero-card__frame {
  position: relative; overflow: hidden;
  height: calc(100svh - 80px - 20px); min-height: 640px; max-height: 900px;
  --im: 20px; --rm: 12px;
  clip-path: inset(0 calc(var(--im) * (1 - var(--g, 0))) round calc(var(--rm) * (1 - var(--g, 0))));
  background: var(--band); color: #F5F4F0;
  --map-y: .45; --map-rh: .30;
}
.hero-card__map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-card__text { position: absolute; left: 76px; bottom: 104px; max-width: 560px; }
.hero-card__lead { opacity: .5; }
.hero-card__text .label { color: inherit; opacity: .72; }
.hero-card h1 {
  margin-top: 20px;
  font-family: var(--display); font-weight: var(--display-weight, 400); letter-spacing: var(--display-tracking, -0.02em);
  font-size: 72px; line-height: 1.02;
}
.hero-card__lede { margin-top: 22px; max-width: 500px; font-size: 18px; line-height: 1.55; opacity: .86; }
.hero-card__strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  min-height: 56px; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid rgba(245, 244, 240, .16);
  font-family: var(--mono); font-size: 13.5px;
}
.hero-card__now { margin-left: auto; }
.hero-card__step { opacity: .72; white-space: nowrap; }
.hero-card__now { display: flex; align-items: center; gap: 16px; }
.hero-card__pause {
  height: 26px; padding: 0 12px; border: 1px solid rgba(245, 244, 240, .35); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer;
}
.hero-card__pause:hover { background: rgba(245, 244, 240, .12); }
.hero-card__pause[hidden] { display: none; }

/* Film treatment is confined to the homepage; text stays outside the video. */
.hero-card--film .hero-card__frame { max-height: none; }
.hero-card--film .hero-card__media { position: absolute; inset: 0; overflow: hidden; }
.hero-card--film .hero-card__poster { position: absolute; inset: 0; display: block; }
.hero-card--film .hero-card__poster img,
.hero-card--film .hero-card__video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.hero-card--film .hero-card__video { position: absolute; inset: 0; opacity: 0; }
.hero-card--film .hero-card__video.is-ready { opacity: 1; }
.hero-card--film .hero-card__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 17, 40, .88), rgba(14, 17, 40, .52) 46%, rgba(14, 17, 40, .12) 78%),
              linear-gradient(0deg, rgba(14, 17, 40, .48), transparent 55%);
}
.hero-card--film .hero-card__text,
.hero-card--film .hero-card__strip { z-index: 1; }
.hero-card--film .hero-card__lead { opacity: .76; }
/* The film hero carries only the label and the headline, pinned bottom left;
   its explanation runs under the film (.hero-note), as albertinvent.com does. */
.hero-card--film .hero-card__text { bottom: 96px; }
.hero-note { padding: 44px 0 40px; }
.hero-note p { max-width: 34ch; font-size: 32px; line-height: 1.3; color: var(--ink); }
@media (max-width: 900px) { .hero-note { padding: 28px 0 48px; } .hero-note p { font-size: 24px; max-width: none; } }

@media (min-width: 1260px) { .nav2__sheet { display: none !important; } }
@media (max-width: 1259px) {
  .nav2__inner { height: 64px; padding: 0 16px; gap: 12px; }
  .nav2__left { gap: 10px; }
  .nav2__word { font-size: 20px; }
  .nav2__brand-mark { width: 28px; height: 28px; }
  .nav2__brand img { width: 48px; height: 48px; }
  body.has-nav2 { padding-top: 64px; }
  .nav2__links, .nav2__signin, .nav2__right .nav2__btn:not(.nav2__btn--primary) { display: none; }
  .nav2__burger { display: inline-flex; }
  .hero-card__frame { height: calc(100svh - 64px - 20px); }
  .hero-card__text { left: 60px; max-width: 460px; }
  .hero-card h1 { font-size: 56px; }
}
@media (max-width: 380px) {
  .nav2__left { gap: 8px; }
  .nav2__word { font-size: 18px; }
  .nav2__brand-mark { width: 24px; height: 24px; }
  .nav2__brand img { width: 42px; height: 42px; }
  .nav2__btn { padding: 0 14px; }
}
@media (max-width: 900px) {
  .hero-card { padding: 0 0 12px; }
  .hero-card__frame { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; --im: 12px; --rm: 12px; --map-x: .5; --map-y: .5; --map-rw: .34; --map-rh: .36; }
  .hero-card__map { position: relative; inset: auto; height: auto; aspect-ratio: 1 / .9; }
  .hero-card__text { position: static; max-width: none; padding: 0 32px 28px; }
  .hero-card h1 { margin-top: 14px; font-size: 44px; }
  .hero-card__lede { font-size: 17px; }
  .hero-card__strip { position: static; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 32px; }
  .hero-card__step { white-space: normal; }
  .hero-card--film .hero-card__media { position: relative; inset: auto; width: 100%; aspect-ratio: 10 / 9; }
  .hero-card--film .hero-card__media::after { background: rgba(14, 17, 40, .08); }
  .hero-card--film .hero-card__text { padding-top: 28px; }
}

/* Cards, v2 trial (2026-09-30): like Transfyr's "Join us" card and footer, the closing band and the
   footer sit on the page as cards with the hero's 20px margin and 12px corners. The footer is off-white. */
.has-nav2 .closing { margin: 0 20px; border-radius: 12px; overflow: hidden; }
.has-nav2 .footer { margin: 16px 20px 20px; border-radius: 12px; border-top: 0; background: var(--card); color: var(--ink); --wm-rest: .26; --wm-hot: var(--accent); }
.has-nav2 .footer .brand { color: var(--ink); }
.has-nav2 .footer .brand img { filter: none; }
.has-nav2 .footer p { color: var(--ink-2); }
.has-nav2 .footer .label { color: var(--muted); }
.has-nav2 .footer li a { color: var(--ink); }
.has-nav2 .footer__bottom { border-top-color: var(--rule); color: var(--muted); }
.has-nav2 .footer__bottom a:hover { color: var(--ink); }
/* Shared footer: a centred closing message, two actions and the pUC19-dot wordmark
   on a paper-to-periwinkle wash. Navigation and the legal row finish the page below it.
   The dots are white on the wash; under the cursor the bases turn navy. */
.footer--end { padding: 0; overflow: hidden; }
.footer--end .footer__links { padding-top: 44px; padding-bottom: 24px; display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 24px; }
.footer--end .footer__links .label { margin-bottom: 10px; }
.footer--end .footer__links li { padding: 3px 0; }
.footer--end .footer__links li a { font-size: 14.5px; }
.footer--end .footer__bottom { padding-top: 16px; padding-bottom: 18px; }
.footer__end { position: relative; margin-top: 0; padding-top: 92px; text-align: center; background: linear-gradient(180deg, var(--card) 0%, #EEF0FB 26%, #CBD2F6 66%, #AEB6F0 100%); --wm-rest: .62; --wm-hot: var(--band); }
.footer__end-inner { display: flex; flex-direction: column; align-items: center; }
.footer__end .h2 { max-width: 18ch; margin: 0 auto; font-size: 46px; color: var(--ink); }
.footer__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.footer__end .footer__mark { margin-top: 64px; padding: 0; aspect-ratio: 100 / 14.4; overflow: hidden; }
.footer__end .footer__mark-inner { width: 100%; }
.footer__end canvas { display: block; width: 100%; color: #fff; }
@media (max-width: 900px) {
  .footer--end .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .footer--end .footer__links > :first-child { grid-column: 1 / -1; }
  .footer__end { padding-top: 64px; }
  .footer__end .h2 { font-size: 32px; }
  .footer__end .footer__mark { margin-top: 44px; }
}
@media (max-width: 900px) {
  .has-nav2 .closing { margin: 0 12px; }
  .has-nav2 .footer { margin: 12px 12px 12px; }
}

/* Scroll behaviour, v2 trial (2026-09-30), after Transfyr:
   blocks fade up 24px as they come into view (site.js adds .js-rv and .is-in).
   The demo used to pin and step on scroll; removed 10-07, the steps must not touch the page scroll. */
.js-rv .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--rv-i, 0) * 90ms); }
.js-rv .rv.is-in { opacity: 1; transform: none; }
@media print { .js-rv .rv { opacity: 1; transform: none; } .nav2 { position: static; } body.has-nav2 { padding-top: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav2 { transition: background-color .3s; }
  .js-rv .rv { opacity: 1; transform: none; transition: none; }
}

/* ---- Plasmole AI page (ai.html): A → B → C → FAQ, picked 2026-10-01 ---- */

/* A. Hero: six layers underneath, one workspace on top. Here the frame grows with its content
   instead of holding one screen's height, and the strip sits under it. */
.hero-card--ai .hero-card__frame { height: auto; min-height: calc(100svh - 80px - 20px); max-height: none; display: flex; flex-direction: column; }
.hero-card--ai .hero-card__strip { position: static; margin-top: auto; }
.hero-card--ai .hero-card__lead { display: block; }
.hero-card--ai h1 { font-size: 64px; }
.ai-hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 56px; align-items: center; padding: 56px 76px 40px; }
.ai-hero__text { max-width: 640px; }
.ai-hero__text .label { color: inherit; opacity: .72; }
.ai-layers { margin-top: 28px; display: grid; gap: 6px; justify-items: start; }
.ai-layers button { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 15px; border: 0; border-radius: 999px; background: rgba(245, 244, 240, .1); color: inherit; font: inherit; font-size: 15px; cursor: pointer; transition: background-color .2s, color .2s; }
.ai-layers button:hover { background: rgba(245, 244, 240, .18); }
.ai-layers button:focus-visible { outline: 2px solid #9AA3F2; outline-offset: 2px; }
.ai-layers b { font-weight: 500; }
.ai-layers i { font-style: normal; font-family: var(--mono); font-size: 12px; opacity: .6; }
.ai-layers li.is-on button { background: var(--cream); color: var(--ink); }
.ai-layers p { margin: 8px 0 8px 15px; max-width: 48ch; font-size: 15.5px; line-height: 1.5; opacity: .82; }
.ai-stack { position: relative; height: 560px; display: grid; place-items: center; }
.ai-stack__plates { position: relative; width: 290px; height: 290px; transform: translateY(80px) rotateX(58deg) rotateZ(-45deg); transform-style: preserve-3d; }
.ai-plate {
  position: absolute; inset: 0; border-radius: 18px; transform: translateZ(calc(var(--z) * 48px)); transform-style: preserve-3d;
  display: grid; place-items: end start; padding: 0 0 10px 16px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(245, 244, 240, .3); box-shadow: -10px 14px 28px rgba(5, 6, 25, .35);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s, background-color .3s, border-color .3s;
}
.ai-plate span { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: rgba(245, 244, 240, .85); }
.ai-stack.has-pick .ai-plate:not(.is-picked) { opacity: .35; }
.ai-plate.is-picked { transform: translateZ(calc(var(--z) * 48px + 22px)); background: var(--accent); border-color: #9AA3F2; }
.ai-plate.is-picked span { color: #fff; }
.ai-plate--top { background: #fff; border-color: #fff; place-items: stretch; padding: 16px; box-shadow: -14px 18px 36px rgba(5, 6, 25, .45); }
.ai-plate--top.is-picked { background: #fff; border-color: #9AA3F2; box-shadow: 0 0 0 3px #9AA3F2, -14px 18px 36px rgba(5, 6, 25, .45); }
.ai-stack.is-building .ai-plate { animation: ai-rise .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--z) * 140ms); }
@keyframes ai-rise { from { opacity: 0; transform: translateZ(calc(var(--z) * 48px + 90px)); } }
.ai-ws { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 8px; width: 100%; height: 100%; }
.ai-ws__bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; font-family: 'Plus Jakarta Sans', var(--body); font-size: 13px; color: var(--ink); }
.ai-ws__bar small { font-family: var(--mono); font-size: 9px; color: var(--muted); }
.ai-ws__map, .ai-ws__note, .ai-ws__chat, .ai-ws__canvas { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); }
.ai-ws__map::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 5px solid var(--purple); border-right-color: var(--orange); border-bottom-color: #4CAF50; }
.ai-ws__note::before, .ai-ws__note::after { content: ''; position: absolute; left: 10px; right: 18px; top: 14px; height: 5px; border-radius: 3px; background: #D9DBE6; box-shadow: 0 12px 0 #D9DBE6, 0 24px 0 #D9DBE6; }
.ai-ws__note::after { top: 52px; right: 34px; box-shadow: none; }
.ai-ws__chat::before { content: ''; position: absolute; right: 8px; top: 10px; width: 60%; height: 14px; border-radius: 8px; background: #E9EBFA; }
.ai-ws__chat::after { content: ''; position: absolute; left: 8px; top: 32px; width: 72%; height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--rule); }
.ai-ws__canvas::before { content: ''; position: absolute; left: 10px; top: 12px; width: 26px; height: 16px; border-radius: 4px; background: var(--band); box-shadow: 40px 18px 0 var(--purple), 80px 0 0 var(--band); }

/* B. Where the time goes: two lanes on the same days. site.js lights a day at a time. */
.ai-race { display: grid; gap: 14px; }
.ai-race__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.ai-play { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--band); color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ai-play:hover { background: var(--purple); }
.ai-play:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ai-play svg { width: 14px; height: 14px; }
.ai-play__stop, .ai-race.is-playing .ai-play__go { display: none; }
.ai-race.is-playing .ai-play__stop { display: block; }
.ai-play[hidden] { display: none; }
.ai-days, .ai-lane { display: grid; grid-template-columns: 112px minmax(0, 1.35fr) repeat(8, minmax(0, 1fr)); gap: 4px; }
.ai-days { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ai-lane__name { display: grid; align-content: center; gap: 2px; font-size: 15px; font-weight: 600; }
.ai-lane__name small { font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--muted); }
.ai-cell { display: grid; gap: 4px; align-content: start; min-height: 104px; padding: 10px 10px 11px; border-radius: 6px; border: 1px solid #E2E2DC; background: #F2F2EE; color: var(--ink-2); font-size: 13.5px; line-height: 1.3; transition: opacity .3s; }
.ai-cell b { font-weight: 600; color: var(--ink); }
.ai-cell small { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ai-cell--wait { background: repeating-linear-gradient(135deg, var(--card) 0 7px, #EDEDE8 7px 14px); border-style: dashed; }
.ai-cell--desk { background: var(--paper); border-color: #CFCFC8; }
.ai-cell--pm { background: var(--band); border-color: var(--band); color: var(--cream); }
.ai-cell--pm b { color: #fff; }
.ai-cell--fail { background: #FFF1E8; border-color: #E3A27A; color: #8A3B12; }
.ai-cell--fail b { color: #8A3B12; }
.ai-cell--done { background: #EAF6EE; border-color: #8FC7A0; color: #1F5A33; }
.ai-cell--done b { color: #1F5A33; }
.ai-handled { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.ai-handled i { white-space: nowrap; font-style: normal; font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(245, 244, 240, .14); color: #E9EBFA; }
.ai-handled i.ai-handled__mem { background: #9AA3F2; color: #15173A; }
.ai-back { grid-column: 8 / 11; display: grid; place-items: center; align-content: center; padding: 6px; border: 1.5px dashed #2E7D4F; border-radius: 8px; color: #1F5A33; font-size: 14px; font-weight: 600; text-align: center; }
.ai-back em { display: block; font-style: normal; font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: #2E7D4F; }
.ai-src { font-family: var(--mono); font-size: 10.5px; line-height: 0; }
.ai-src a { color: var(--purple); text-decoration: none; }
.ai-cell--pm .ai-src a { color: #9AA3F2; }
.ai-race.is-playing .ai-cell, .ai-race.is-playing .ai-back { opacity: .14; }
.ai-race.is-playing .is-lit { opacity: 1; }
.ai-race.is-playing .ai-cell--fail.is-lit { animation: ai-jolt .45s ease; }
@keyframes ai-jolt { 0%, 100% { transform: none; } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
.ai-sooner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: center; margin-top: 4px; padding: 18px 22px; border-radius: 10px; background: #EAF6EE; }
.ai-sooner b { grid-row: span 2; font-family: var(--display); font-weight: 400; font-size: 64px; line-height: 1; color: #1F5A33; }
.ai-sooner span { font-size: 17px; font-weight: 500; color: #1F5A33; }
.ai-sooner em { font-style: normal; font-family: var(--mono); font-size: 12px; color: #2E7D4F; }
.ai-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 40px; border-top: 1px solid var(--ink); }
.ai-why > div { display: grid; gap: 6px; align-content: start; padding: 18px 24px 4px 0; }
.ai-why > div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.ai-why b { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.05; color: var(--band); }
.ai-why span { font-size: 16px; color: var(--ink-2); max-width: 56ch; }
.ai-why em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ai-srcs { margin: 40px 0 0; padding: 14px 0 0 20px; list-style: decimal; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ai-srcs li { padding-left: 4px; max-width: 110ch; scroll-margin-top: 96px; }
.ai-srcs li:target { color: var(--ink); }

/* C. How it works, after Albert's tabbed AI section: an off-white card, pill tabs, and a chat
   that plays out on a purple stage. site.js plays each tab, then moves to the next. */
.ai-how { margin: 0 20px; border-radius: 12px; background: var(--card); scroll-margin-top: 80px; }
.ai-how__inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 88px var(--gutter) 64px; }
.ai-how__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; text-align: center; }
.ai-how__bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; width: 100%; margin-top: 12px; }
.ai-tabs { display: flex; gap: 4px; min-width: 0; max-width: 100%; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: #EAEAE5; }
.ai-tab { position: relative; isolation: isolate; overflow: hidden; flex: none; padding: 11px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 16px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .2s; }
.ai-tab:hover { color: var(--ink); }
.ai-tab:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ai-tab[aria-selected="true"] { background: var(--band); color: #fff; }
.ai-tab__fill { position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--purple); }
.ai-tab:not([aria-selected="true"]) .ai-tab__fill { width: 0 !important; transition: none !important; }
.ai-tab__n { margin-right: 6px; font-family: var(--mono); font-size: 12px; opacity: .7; }
.ai-how__pause { padding: 6px 4px; border: 0; background: none; color: var(--muted); font-family: var(--mono); font-size: 12.5px; cursor: pointer; }
.ai-how__pause:hover { color: var(--purple); }
.ai-how__pause:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ai-how__pause[hidden] { display: none; }
.ai-how__body { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); column-gap: 56px; align-items: center; margin-top: 48px; }
.ai-copy { display: grid; gap: 14px; }
.ai-copy[hidden] { display: none; }
.ai-copy__h { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.08; letter-spacing: -0.015em; }
.ai-copy p { max-width: 32ch; font-size: 18px; color: var(--muted); }
.ai-tag { width: fit-content; padding: 3px 10px; border-radius: 999px; background: #EAEAE5; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.ai-tag--real { background: #EAF6EE; color: #1F5A33; }
.ai-stage { position: relative; isolation: isolate; overflow: hidden; padding: 28px; border-radius: 16px; background: var(--band); }
.ai-orb { position: absolute; z-index: -1; border-radius: 50%; opacity: .9; background: radial-gradient(circle at 34% 30%, #B7BDF7 0%, #6F79DA 38%, #4450B8 62%, rgba(68, 80, 184, 0) 72%); animation: ai-drift 16s ease-in-out infinite alternate; }
.ai-orb:nth-child(1) { width: 200px; height: 200px; left: -50px; top: -44px; }
.ai-orb:nth-child(2) { width: 120px; height: 120px; right: 8%; top: -36px; animation-duration: 19s; animation-delay: -4s; }
.ai-orb:nth-child(3) { width: 240px; height: 240px; right: -70px; bottom: -84px; animation-duration: 22s; animation-delay: -9s; }
.ai-orb:nth-child(4) { width: 90px; height: 90px; left: 12%; bottom: -20px; opacity: .7; animation-duration: 14s; animation-delay: -2s; }
.ai-orb:nth-child(5) { width: 60px; height: 60px; left: 46%; top: 8px; opacity: .55; animation-duration: 12s; }
@keyframes ai-drift { from { transform: translate(0, 0); } to { transform: translate(26px, 18px); } }
/* The chat, in Albert's card pattern with Plasmole's real chat parts: the question in a glass bubble
   with an avatar; the turn in a dark glass panel with the status line ("Finished in N steps · Ns"),
   the steps and their chips, the answer, and the record it ends on. The three chats share one grid
   cell, so the stage is as tall as the longest and nothing clips. */
.ai-chatcard { display: grid; min-height: 400px; }
.ai-chat { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; }
.ai-chat.is-off { visibility: hidden; }
.ai-chat__q { justify-self: end; display: flex; align-items: center; gap: 10px; max-width: 90%; padding: 9px 16px 9px 9px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 15.5px; line-height: 1.35; }
.ai-chat__av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #E9EBFA; color: var(--band); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.ai-chat__qt { min-height: 1.35em; }
.ai-chat__qt.is-typing::after { content: ''; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #fff; animation: ai-caret .8s steps(1) infinite; }
@keyframes ai-caret { 50% { opacity: 0; } }
.ai-chat__turn { display: grid; gap: 12px; padding: 16px 18px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 12, 38, .58); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--cream); }
.ai-chat__status { display: flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(245, 244, 240, .92); }
.ai-chat__mark { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff url("/logo-black.png") center / 18px no-repeat; }
.ai-chat__turn.is-working .ai-chat__mark { animation: ai-pulse 1.1s ease-in-out infinite; }
@keyframes ai-pulse { 50% { transform: scale(.86); opacity: .7; } }
.ai-chat__chev { width: 12px; height: 12px; opacity: .6; }
.ai-chat__steps { display: grid; gap: 7px; margin: 0 0 0 11px; padding: 2px 0 2px 14px; border-left: 2px solid rgba(154, 163, 242, .5); }
.ai-chat__st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: rgba(245, 244, 240, .72); }
.ai-chat__sl { display: inline-flex; align-items: center; gap: 8px; }
.ai-chat__st i { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); border-top-color: #9AA3F2; animation: ai-spin .8s linear infinite; }
.ai-chat__st.is-done i, .ai-diff .ai-chat__st i { animation: none; border: 0; background: rgba(143, 214, 148, .18); }
.ai-chat__st.is-done i::after, .ai-diff .ai-chat__st i::after { content: '\2713'; font-style: normal; font-size: 10px; line-height: 1; color: #8FD694; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 25px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); font-size: 12.5px; color: #fff; white-space: nowrap; }
.ai-chip--computed { border-style: dashed; }
.ai-chip svg { flex: none; width: 12px; height: 12px; opacity: .75; }
.ai-chip em { font-style: normal; color: rgba(245, 244, 240, .58); }
.ai-chat__a { font-size: 15.5px; line-height: 1.5; color: #fff; }
.ai-chat__a u, .ai-draft u { text-decoration: none; padding: 0 2px; border-radius: 3px; background: rgba(154, 163, 242, .28); }
.ai-rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: #0E1030; }
.ai-rec--computed { border-style: dashed; border-color: rgba(255, 255, 255, .26); }
.ai-rec__kind { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: rgba(245, 244, 240, .6); }
.ai-rec__kind svg { width: 12px; height: 12px; }
.ai-rec__open { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--purple); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.ai-rec--computed .ai-rec__open { background: transparent; border: 1px solid rgba(255, 255, 255, .35); }
.ai-rec__open svg { width: 12px; height: 12px; }
.ai-rec b { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 500; color: #fff; }
.ai-rec b svg { flex: none; width: 15px; height: 15px; opacity: .75; }
.ai-rec__seq { grid-column: 1 / -1; font-family: var(--code); font-size: 12px; color: #C9CCF5; word-break: break-all; }
.ai-rec__seq--text { word-break: normal; }
.ai-rec__facts { grid-column: 1 / -1; font-size: 13px; color: rgba(245, 244, 240, .65); }
.ai-chat__quote { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--orange); display: grid; gap: 6px; }
.ai-chat__quote p { font-family: var(--code); font-size: 13px; line-height: 1.5; color: #FFD9BF; }
.ai-chat__note { font-size: 13px; line-height: 1.5; color: rgba(245, 244, 240, .62); }
.ai-chat__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ai-chat__table th { padding: 6px 10px 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); text-align: left; font-weight: 500; color: rgba(245, 244, 240, .65); }
.ai-chat__table td { padding: 7px 10px 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-variant-numeric: tabular-nums; }
.ai-chat__table td:first-child { font-family: var(--code); font-size: 12.5px; color: #C9CCF5; }
.ai-verdict { overflow: hidden; border: 1px solid #E3A27A; border-radius: 8px; background: #FFF6EE; }
.ai-verdict__head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px dashed #E3A27A; font-family: var(--mono); font-size: 12.5px; color: #8A3B12; }
.ai-verdict__head b { padding: 2px 8px; border-radius: 999px; background: #8A3B12; color: #FFF6EE; font-weight: 500; }
.ai-verdict p { padding: 9px 12px 0; font-family: var(--mono); font-size: 13px; color: #5A2A10; }
.ai-verdict p:last-child { padding-bottom: 11px; }
.ai-verdict p.ai-verdict__warn { color: #8A5A10; }
.ai-how.is-live .ai-verdict.is-in b { animation: ai-jolt .45s ease .1s; }
.ai-how.is-paused .ai-orb { animation-play-state: paused; }
.ai-how.is-live .ai-chat [data-at] { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.ai-how.is-live .ai-chat [data-at].is-in { opacity: 1; transform: none; }
.ai-how__cap { margin-top: 20px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-align: right; }
.ai-how + .section { border-top: 0; }

/* 03 Two ways to use it: two cards, each a small window on the purple stage. */
.ai-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ai-way { display: grid; gap: 10px; align-content: start; color: inherit; text-decoration: none; }
.ai-way__stage { display: grid; place-items: center; min-height: 340px; padding: 32px; }
.ai-way .h3 { margin-top: 12px; }
.ai-way .text-s { max-width: 54ch; }
.ai-way:hover .link { color: var(--purple-hover); }
.ai-way:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 16px; }
.ai-win { width: 100%; max-width: 460px; overflow: hidden; border-radius: 10px; background: #fff; color: var(--ink); font-size: 12.5px; box-shadow: 0 20px 44px -18px rgba(5, 6, 25, .65); }
.ai-win__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--rule); font-family: 'Plus Jakarta Sans', var(--body); font-size: 12.5px; }
.ai-win__bar i { width: 8px; height: 8px; border-radius: 50%; background: #D3D6DE; }
.ai-win__bar span { margin-left: 6px; font-weight: 500; }
.ai-win__bar small { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.ai-win__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 200px; }
.ai-win__map { position: relative; border-right: 1px solid var(--rule); }
.ai-win__map::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); border-radius: 50%; border: 6px solid var(--purple); border-right-color: var(--orange); border-bottom-color: #4CAF50; }
.ai-win__chat, .ai-win__thread { display: grid; gap: 8px; align-content: start; padding: 12px; }
.ai-win__chat { background: var(--card); }
.ai-win__q { justify-self: end; max-width: 92%; padding: 6px 9px; border-radius: 8px; background: var(--tint); line-height: 1.35; }
.ai-win__st { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.ai-win__st i { flex: none; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #E6F3EA; }
.ai-win__st i::after { content: '\2713'; font-style: normal; font-size: 8.5px; line-height: 1; color: #2E7D4F; }
.ai-win__a { line-height: 1.45; }
.ai-win__fin { font-size: 11.5px; color: var(--muted); }
.ai-win__tool { display: inline-flex; align-items: center; width: fit-content; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--rule); font-family: var(--code); font-size: 11.5px; color: var(--ink-2); }
.ai-win__btn { width: fit-content; padding: 5px 12px; border-radius: 999px; background: var(--purple); color: #fff; font-size: 12px; font-weight: 500; }

/* 04 What's different: an accordion with one row open, and its picture on the stage beside it. */
.ai-diff { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head side" "list side"; column-gap: 72px; row-gap: 36px; align-items: start; }
.ai-diff__head { grid-area: head; }
.ai-diff__head .label { display: block; margin-bottom: 16px; }
.ai-diff__list { grid-area: list; border-top: 1px solid var(--rule); }
.ai-diff__side { grid-area: side; }
.ai-diff__item { border-bottom: 1px solid var(--rule); }
.ai-diff__item h3 { margin: 0; font: inherit; }
.ai-diff__item button { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; padding: 18px 0; border: 0; background: none; color: var(--muted); font-family: var(--body); font-size: 19px; font-weight: 500; text-align: left; cursor: pointer; transition: color .2s; }
.ai-diff__item button::after { content: '+'; font-family: var(--mono); font-size: 16px; }
.ai-diff__item button:hover { color: var(--ink); }
.ai-diff__item button:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ai-diff__item.is-open button { padding-bottom: 8px; color: var(--purple); }
.ai-diff__item.is-open button::after { content: '\2212'; }
.ai-diff__body p { padding-bottom: 20px; max-width: 46ch; font-size: 16.5px; color: var(--ink-2); }
.ai-diff__stage { padding: 32px; }
.ai-diff__pics { display: grid; min-height: 380px; }
.ai-diff__vis { grid-area: 1 / 1; display: grid; gap: 14px; align-content: center; transition: opacity .35s ease, visibility .35s; }
.ai-diff__vis.is-off { opacity: 0; visibility: hidden; }
.ai-diff__cap { margin-top: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.ai-draft__toggle { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 13px; color: rgba(245, 244, 240, .65); }
.ai-draft { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); font-size: 14px; line-height: 1.5; color: rgba(245, 244, 240, .6); }
.ai-appr { display: grid; gap: 8px; padding: 16px; border-radius: 10px; background: #fff; color: var(--ink); }
.ai-appr b { font-size: 16px; font-weight: 600; }
.ai-appr p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ai-appr__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--card); }
.ai-appr__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--code); font-size: 12.5px; color: var(--ink-2); }
.ai-appr__row em { flex: none; font-style: normal; font-size: 12.5px; color: var(--muted); }
.ai-appr__btns { display: flex; gap: 8px; margin-top: 4px; }
.ai-appr__btns span { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--rule); font-size: 13.5px; font-weight: 500; }
.ai-appr__btns .ai-appr__go { border-color: var(--purple); background: var(--purple); color: #fff; }
.ai-appr__reply { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--rule); font-size: 13px; color: var(--muted); }

/* FAQ */
.ai-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
.ai-faq .label { display: block; margin-bottom: 16px; }
.ai-faq .text-s { margin-top: 20px; }

@media (max-width: 1259px) {
  .ai-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 32px; padding: 48px 56px 36px; }
  .hero-card--ai h1 { font-size: 52px; }
  .ai-stack { height: 480px; }
  .ai-stack__plates { width: 240px; height: 240px; }
  .ai-plate { transform: translateZ(calc(var(--z) * 40px)); }
  .ai-plate.is-picked { transform: translateZ(calc(var(--z) * 40px + 18px)); }
  .ai-days, .ai-lane { grid-template-columns: 96px minmax(0, 1.5fr) repeat(8, minmax(0, 1fr)); }
  .ai-cell { padding: 8px 8px 9px; font-size: 12.5px; }
  .ai-cell small { font-size: 10.5px; }
  .ai-how__body { column-gap: 36px; }
  .ai-copy__h { font-size: 34px; }
  .ai-faq, .ai-diff { column-gap: 40px; }
}
@media (max-width: 900px) {
  .hero-card--ai .hero-card__frame { min-height: 0; }
  .ai-hero { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 40px 32px 24px; }
  .hero-card--ai h1 { font-size: 42px; }
  .ai-stack { height: 360px; }
  .ai-stack__plates { width: 200px; height: 200px; transform: translateY(60px) rotateX(58deg) rotateZ(-45deg); }
  .ai-plate { transform: translateZ(calc(var(--z) * 30px)); padding: 0 0 8px 12px; }
  .ai-plate.is-picked { transform: translateZ(calc(var(--z) * 30px + 14px)); }
  .ai-plate span { font-size: 11px; }
  .ai-plate--top { padding: 10px; }
  .ai-days { display: none; }
  .ai-lane { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ai-lane + .ai-lane { margin-top: 18px; }
  .ai-lane__name { padding-bottom: 4px; }
  .ai-cell { min-height: 0; font-size: 14px; }
  .ai-back { grid-column: auto; padding: 10px; }
  .ai-sooner { grid-template-columns: minmax(0, 1fr); }
  .ai-sooner b { grid-row: auto; font-size: 52px; }
  .ai-why { grid-template-columns: minmax(0, 1fr); }
  .ai-why > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
  .ai-how { margin: 0 12px; }
  .ai-how__inner { padding: 56px 20px 40px; }
  .ai-tab { padding: 9px 13px; font-size: 14px; }
  .ai-tab__n { display: none; }
  .ai-how__body { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 32px; }
  .ai-copy__h { font-size: 30px; }
  .ai-copy p { max-width: none; font-size: 17px; }
  .ai-stage { padding: 14px; }
  .ai-chatcard { min-height: 0; }
  .ai-chat__q, .ai-chat__a { font-size: 14.5px; }
  .ai-chat__turn { padding: 14px; }
  .ai-rec { grid-template-columns: minmax(0, 1fr); }
  .ai-rec__open { grid-row: auto; justify-self: start; order: 9; margin-top: 6px; }
  .ai-ways { grid-template-columns: minmax(0, 1fr); }
  .ai-way__stage { min-height: 0; padding: 18px; }
  .ai-diff { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "list"; row-gap: 24px; }
  .ai-diff__stage { padding: 16px; }
  .ai-diff__pics { min-height: 0; }
  .ai-how__cap { text-align: left; }
  .ai-faq { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-plate, .ai-cell { transition: none; }
  .ai-stack.is-building .ai-plate { animation: none; }
  .ai-orb, .ai-chat__st i, .ai-chat__qt.is-typing::after, .ai-chat__mark, .ai-verdict b, .ai-race .ai-cell--fail { animation: none !important; }
  .ai-how .ai-chat [data-at], .ai-tab__fill, .ai-diff__vis { transition: none !important; }
}

/* Product walkthroughs drive themselves (product-autoplay.js), so the play and
   replay controls come off. The status line beside them stays: it says what the
   demo is doing, and in the sequence demo it is still an instruction, because
   clicking a feature works whether or not the animation ran. Under
   prefers-reduced-motion the class is never applied and the buttons remain. */
/* product-demos.css loads after this file and sets .play-demo to inline-flex at
   the same specificity, so these selectors carry the extra class to outrank it
   rather than reaching for !important. */
.plasmole-product-demo.demo--selfplay .play-demo,
.plasmole-product-demo.demo--selfplay .lab-tour,
.plasmole-product-demo.demo--selfplay .lab-reset,
.plasmole-product-demo.demo--selfplay .scene-nav,
.plasmole-product-demo.demo--selfplay .lab-view-tiles { display: none; }
.plasmole-product-demo.demo--selfplay .lab-demo-controls > div:empty { display: none; }
/* The line that used to be a button label sits under the paragraph, not inside
   its last sentence. */
.pf-sec__text .lede-s .spec { display: block; margin-top: 10px; }


/* Section 03 · Verify. Same window chrome as the rest of the page, and the rows
   the app actually draws (SangerInlineAlignment.tsx): reference bases, a match
   row where | is a match and a coloured dot a mismatch, the read itself, and a
   per-base quality bar row built from the peak map. Deliberately NOT a
   chromatogram: we do not render traces, so drawing one would be a picture of a
   feature we do not have. */
.vf__win { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.vf__tabs { display: flex; gap: 2px; padding: 8px 10px 0; background: var(--card); border-bottom: 1px solid var(--rule); }
.vf__tab { padding: 6px 12px; border-radius: 8px 8px 0 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.vf__tab.is-on { background: var(--paper); color: var(--ink); font-weight: 500; }
.vf__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.vf__head strong { font-weight: 500; color: var(--ink); }

.vf__aln { padding: 16px; font-family: var(--mono); font-size: 13px; overflow-x: auto; }
.vf__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 3px 0; }
.vf__name { color: var(--muted); font-size: 11.5px; }
/* Every row is the same 36-column grid, one base per cell, so the match row,
   the read and the quality bars all sit under the base they belong to. Letter
   spacing would break that, which is why the cells carry the rhythm instead. */
.vf__seq { display: grid; grid-template-columns: repeat(36, minmax(0, 1fr)); align-items: end; }
.vf__seq > i { font-style: normal; text-align: center; }
.vf__row--ref .vf__seq { color: var(--ink); }
.vf__row--match .vf__seq { color: #B9BEC4; }
.vf__mis { font-style: normal; color: var(--orange); }
.vf__aln mark { background: #F6D9BE; color: var(--ink); padding: 0 1px; border-radius: 2px; }
.vf__bars { align-items: end; height: 26px; column-gap: 1px; }
.vf__q { display: block; width: 100%; background: var(--purple); opacity: .5; border-radius: 1px 1px 0 0; }
.vf__q--low { background: var(--orange); opacity: .75; }

.vf__sum { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.vf__sum li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 16px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 12.5px; }
.vf__sum li:last-child { border-bottom: 0; }
.vf__sum b { font-weight: 400; }
.vf__sum .is-ok { color: var(--muted); }
.vf__sum .is-flag { color: var(--orange); }


/* Section 05 · Analyze — the workspace, at the 723px the figure column actually
   gives it. Type and radii follow the Record and Run-the-lab demos rather than
   the site's own tokens, because this is a picture of the app: Inter, 4px
   toolbar buttons, 5px actions, 8px windows and cards, 7px tabs. No app rail;
   those demos do not show one either, and at this width it costs the grid more
   than it explains. */
.az { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
/* Every pane below sets an explicit display, which beats [hidden]'s UA rule and
   left the plan and the result on screen together. */
.az [hidden] { display: none !important; }
.az-stage { padding: 12px; background: var(--tint); border-radius: 20px; }
.az-win { display: grid; grid-template-columns: 258px minmax(0, 1fr); height: 502px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); overflow: hidden; }
.az svg { display: block; width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.az-side { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--rule); }
.az-side__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.az-side__head strong { font-size: 12.5px; font-weight: 600; }
.az-side__head span { font-size: 11px; color: var(--muted); }
.az-side__body { flex: 1; min-height: 0; padding: 13px; display: flex; flex-direction: column; gap: 11px; overflow: hidden; }
.az-ask { display: flex; gap: 8px; align-items: flex-start; }
.az-ask p { margin: 0; font-size: 13px; line-height: 1.5; }
.az-av { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--band); font-size: 9.5px; }

.az-plan { border: 1px solid var(--rule); border-radius: 8px; background: var(--card); overflow: hidden; }
.az-plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.az-plan__head strong { font-size: 13.5px; font-weight: 600; }
.az-plan__head span { font-size: 10.5px; color: var(--muted); }
.az-plan dl { margin: 0; padding: 11px 12px; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 5px 9px; font-size: 11.5px; }
.az-plan dt { color: var(--muted); }
.az-plan dd { margin: 0; }
.az-plan__acts { display: flex; gap: 6px; padding: 0 12px 12px; }
.az-btn { height: 29px; padding: 0 13px; border: 0; border-radius: 5px; font: inherit; font-size: 12px; cursor: pointer; }
.az-btn--go { display: inline-flex; align-items: center; gap: 6px; background: var(--purple); color: #fff; }
.az-btn--go svg { width: 11px; height: 11px; }
.az-btn--line { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.az-btn--bare { background: transparent; color: var(--muted); }

.az-done { border: 1px solid var(--rule); border-radius: 8px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; }
.az-done__head { display: flex; align-items: center; gap: 8px; }
.az-done__head strong { font-size: 13px; font-weight: 600; }
.az-done__head i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #E3F0E4; color: #2E6B31; font-style: normal; font-size: 10px; }
.az-done p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.az-done__foot { color: var(--muted) !important; }

.az-comp { margin-top: auto; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 9px; display: flex; flex-direction: column; gap: 7px; }
.az-comp > span { font-size: 11.5px; color: #9A9DA3; }
.az-comp > div { display: flex; align-items: center; gap: 6px; }
.az-comp button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.az-send { margin-left: auto; background: var(--purple) !important; color: #fff !important; border-radius: 5px !important; }
.az-send svg { width: 12px; height: 12px; }

.az-main { display: flex; flex-direction: column; min-width: 0; position: relative; }
.az-tabs { display: flex; gap: 2px; padding: 7px 9px 0; background: var(--card); border-bottom: 1px solid var(--rule); }
.az-tab { padding: 6px 11px; border-radius: 7px 7px 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.az-tab.is-on { background: var(--paper); color: var(--ink); font-weight: 600; }
.az-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.az-tb { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.az-tb--menu[aria-expanded="true"] { background: var(--purple); color: #fff; }
.az-tb svg { width: 11px; height: 11px; }
.az-sep { width: 1px; height: 15px; margin: 0 5px; background: var(--rule); }
.az-stat { margin-left: auto; font-size: 11px; color: var(--muted); }

.az-sheet { flex: 1; min-height: 0; overflow: hidden; }
.az-grid { display: grid; grid-template-columns: 30px repeat(3, minmax(0, 1fr)); }
.az-hd { padding: 4px 8px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); font-size: 10px; color: var(--muted); text-align: center; }
.az-c { padding: 5px 8px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--code); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.az-c--head { background: var(--card); font-weight: 500; }

.az-menu { position: absolute; top: 74px; right: 12px; width: 330px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); box-shadow: 0 14px 40px rgba(18, 19, 22, .14); overflow: hidden; z-index: 2; }
.az-chip { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-align: left; font: inherit; cursor: pointer; }
.az-chip:last-child { border-bottom: 0; background: var(--card); }
.az-chip svg { margin-top: 2px; color: var(--purple); width: 14px; height: 14px; }
.az-chip b { display: block; font-size: 12px; font-weight: 600; }
.az-chip small { display: block; margin-top: 1px; font-size: 10px; color: var(--muted); line-height: 1.35; }

.az-chart { flex: 1; min-height: 0; padding: 18px 18px 4px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 9px; }
.az-yax { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--muted); text-align: right; padding-bottom: 26px; }
.az-plot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; align-items: end; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0 20px; }
.az-bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.az-fill { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--purple); }
.az-bar--ctrl .az-fill { background: var(--bar-muted); }
.az-err { position: absolute; left: 50%; width: 1px; margin-left: -.5px; background: var(--ink-2); }
/* :not(.az-fill) too — without it the bar itself was styled as a 5px dot. */
.az-bar > i:not(.az-err):not(.az-fill) { position: absolute; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--band); opacity: .5; }
.az-bar b { position: absolute; width: 100%; text-align: center; font-size: 10px; font-weight: 500; color: var(--ink-2); }
.az-bar > span { position: absolute; bottom: -20px; width: 100%; text-align: center; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.az-note { margin: 0; padding: 18px 18px 10px; font-size: 11px; color: var(--muted); }
.az-foot { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-top: 1px solid var(--rule); background: var(--card); font-size: 10.5px; color: var(--muted); }
.az-foot span:last-child { margin-left: auto; }

@media (max-width: 1180px) {
  .az-win { grid-template-columns: minmax(0, 1fr); height: auto; }
  .az-side { border-right: 0; border-bottom: 1px solid var(--rule); }
  .az-chart { height: 300px; }
  .az-menu { right: 10px; width: auto; left: 10px; }
}

/* The supplied BYOBB header has generous margins around its mark. */
.awards__logo-crop { display: flex; align-items: center; justify-content: center; width: 88px; height: 40px; flex: 0 0 88px; overflow: hidden; }
.awards__logo-crop img { transform: scale(2); }
@media (max-width: 700px) { .awards__logo-crop { width: 64px; flex-basis: 64px; } }

.awards__logo-invert { filter: invert(1); }

.awards__logos { display: flex; align-items: center; gap: 12px; width: 124px; flex: 0 0 124px; }
.awards__logos img { width: 40px; height: 48px; flex: 0 0 40px; }
.awards__logos img + img { width: 72px; flex-basis: 72px; }
@media (max-width: 700px) {
  .awards__logos { width: 96px; flex-basis: 96px; gap: 8px; }
  .awards__logos img { width: 32px; flex-basis: 32px; }
  .awards__logos img + img { width: 56px; flex-basis: 56px; }
  .awards li:has(.awards__logos) > .spec { margin-left: 112px; }
}


/* About, founders' story as a lilac glass card (founder 10-10, option C on the backgrounds canvas):
   the site's glass tile and an indigo opening quote mark, signed as before (no founder chips). */
#story .story-card { position: relative; isolation: isolate; overflow: hidden; max-width: 980px; margin: 0 auto; padding: 52px 64px 56px; box-sizing: border-box;
  border: 1px solid #d9dcf2; border-radius: 20px;
  background: linear-gradient(125deg, #ffffffce 0%, transparent 30%), linear-gradient(150deg, #e9eafa 25%, #c8cce9 100%); }
#story .story-card::before { content: ''; position: absolute; z-index: -1; top: -60%; left: 6%; width: 84px; height: 220%; background: #fff; opacity: .6; transform: rotate(-32deg); }
#story .story-card p { max-width: 760px; margin-left: auto; margin-right: auto; }
#story .story-card .sign { margin: 4px auto 0; }
.story-card__mark { display: block; margin: -10px auto 4px; font-family: var(--display); font-size: 88px; line-height: 1; color: var(--accent); }
@media (max-width: 700px) { #story .story-card { padding: 36px 22px 40px; border-radius: 16px; } .story-card__mark { font-size: 64px; } }

/* Audit fixes (10-10). FAQ: the padding sits on the summary, so the whole question row is the tap target
   (it was a 26px line inside a padded details). */
.faq details { padding: 0; }
.faq summary { padding: 18px 0; min-height: 44px; align-items: center; }
.faq details[open] { padding-bottom: 18px; }
.faq details > p:first-of-type { margin-top: 0; }

/* Comparison and plan tables on a phone: each row becomes a card, the row label on top and every column
   named beside its value, instead of a 1000px table cut off at the screen edge. */
@media (max-width: 700px) {
  .table-scroll .table--compare, .table-scroll .table--plans { min-width: 0; }
  .table--compare thead, .table--plans thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--compare, .table--compare tbody, .table--compare tr, .table--compare td,
  .table--plans, .table--plans tbody, .table--plans tr, .table--plans td { display: block; width: auto !important; }
  .table--compare tr, .table--plans tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .table--compare td, .table--plans td { padding: 0; border: 0; }
  .table--compare td.table__rowhead, .table--plans td.table__rowhead { margin-bottom: 8px; font-size: 16px; }
  .table--compare td[data-label], .table--plans td[data-label] { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; padding: 4px 0; }
  .table--compare td[data-label]::before, .table--plans td[data-label]::before { content: attr(data-label); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
  .table--compare td[data-label="Plasmole"] { color: var(--ink); font-weight: 500; }
  .table--compare td[data-label] > *, .table--plans td[data-label] > * { grid-column: 2; }
  .table--compare td[data-label] .spec { margin-top: 4px; font-weight: 400; }
  .table--compare tr.table__group { padding: 0; border: 0; }
  .table--compare tr.table__group td { padding: 26px 0 8px; border-bottom: 1px solid var(--ink); }
  .table--compare tbody tr:first-child td { padding-top: 0; }
}

/* Booking: the header names the fallback, so a calendar that never loads is not a dead end. */
.book__cal-alt { font-size: 14.5px; color: var(--muted); text-align: right; }
.book__cal-head { flex-wrap: wrap; row-gap: 4px; }
.book__cal-head .label { white-space: nowrap; }
@media (max-width: 700px) { .book__cal-alt { text-align: left; } }

/* Audit fix (10-10): browsers balance headline line breaks, so no headline ends on one word. */
.h1, .h2, .h3, h1, h2, h3 { text-wrap: balance; }