/* ============================================================================
   signal-read.css — the reading layout, on the Signal foundation.

   Source of truth: the Signal study's #/docs shell (styles.css .docs-shell,
   .docs-side, .docs-article, .docs-toc, .doc-cards) and #/map, which renders
   every long-form page of the site in that shell. Load it after
   signal-site.css on a `body.sg-page` long-form page; the page's own sheet (if
   any) comes after it.

   What lives here
     1. The reader's Light mode (the study's paper palette), chosen with the
        Light / Dark switch in the docs breadcrumb row (DocsLayout).
     2. The shell: DocsLayout (shell.jsx) = the page list on the left, the
        article column, "On this page" on the right; on a phone a bar with
        two panels (Browse docs / On this page) that sticks to the top.
     3. The article: prose type, links, code, tables, quotes, figures.
     4. The long-form parts the pages share (page-hero, install-section,
        perm rows, fact cards, question lists, bento cards, the closing call,
        comparison tables, screenshots and their lightbox, the handbook's
        cards and notes). They keep their existing class names so no page
        text or anchor moved; they are drawn here with the foundation's tokens.

   Colour: neutral grounds and text; violet only for the current page in the
   list, the current section, focus, text links and the one accent action.
   ========================================================================== */

:root { --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace; }

/* ── 1. Light reading mode (the study's paper palette) ─────────────────── */
html:has(.docs-layout[data-docs-theme="light"]) { background: #f6f5f1; color-scheme: light; }
body:has(.docs-layout[data-docs-theme="light"]) {
  --paper: #f6f5f1; --surface: #fff; --soft: #eeede8; --ink: #24242c; --muted: #66656e;
  --line: #dcdad5; --violet: #534de3; --violet-ink: #fff; --tint: #e9e7fb; --green: #30674f;
  --shadow: 0 20px 65px #28234413; --scroll-thumb: #bdbbb5; --scroll-hover: #8d8a99;
  color-scheme: light;
}
body:has(.docs-layout[data-docs-theme="light"]) .sg-btn--primary:hover { background: #000; border-color: #000; color: #fff; }
body:has(.docs-layout[data-docs-theme="light"]) .sg-btn--accent:hover { background: #4540c9; border-color: #4540c9; }
body:has(.docs-layout[data-docs-theme="light"]) .sg-text-link:hover { color: #3a35b0; }
body:has(.docs-layout[data-docs-theme="light"]) ::selection { background: #534de333; }

/* ── 2. The shell (DocsLayout) ─────────────────────────────────────────── */
.docs-layout {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 55px; max-width: 1400px; margin: 0 auto; padding: 38px 48px 100px; align-items: start;
}
.docs-layout.has-toc { grid-template-columns: 230px minmax(0, 1fr) 170px; }
.docs-sidebar {
  grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 24px; align-self: start;
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 20px 0;
}
.docs-bar, .docs-toc-panel { display: none; }
.docs-topic-group ul, .docs-topic-contents, .docs-toc-list, .docs-toc-panel-list { list-style: none; margin: 0; padding: 0; }
.docs-search-label { display: block; margin: 0 0 8px; font-size: 12px; color: var(--ink); }
.docs-search { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink); font: 400 12px/1.4 var(--sans); }
.docs-search::placeholder { color: var(--muted); }
.docs-search-count { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.docs-topic-group { margin-top: 29px; }
.docs-topic-group h2 { margin: 0 0 10px; font: 600 11px/1.3 var(--sans); letter-spacing: .03em; color: var(--ink); }
.docs-topic-group a { display: block; margin-left: -10px; padding: 7px 10px; border-radius: 5px; font-size: 12px; line-height: 1.4; color: var(--muted); text-decoration: none; }
.docs-topic-group a:hover { color: var(--ink); background: var(--surface); }
/* The current DOCUMENT: a filled row. It holds still while the reader scrolls. */
.docs-topic-group a[aria-current="page"] { color: var(--violet); background: var(--tint); font-weight: 550; }
/* A document's contents, nested under its row: quieter, drawn with a rule. */
.docs-topic-contents { margin: 2px 0 8px 2px; padding-left: 10px; border-left: 1px solid var(--line); }
.docs-topic-group .docs-topic-contents a { margin-left: -11px; padding: 5px 10px; border-left: 1px solid transparent; border-radius: 0; font-size: 11.5px; }
.docs-topic-group .docs-topic-contents a:hover { background: none; }
.docs-topic-group .docs-topic-contents a[aria-current="location"] { color: var(--ink); border-left-color: var(--violet); }
.docs-topic-parent { display: block; margin-bottom: 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.docs-breadcrumb { grid-column: 2; grid-row: 1; max-width: 730px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 16px 0 0; margin: 0 0 32px; font-size: 11px; color: var(--muted); }
.docs-breadcrumb-trail { display: flex; flex-wrap: wrap; gap: 8px; }
.docs-breadcrumb-trail a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.docs-theme-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 7px; }
.docs-theme-switch button { min-height: 28px; padding: 4px 10px; border: 0; border-radius: 5px; background: none; color: var(--muted); font: 500 11px/1 var(--sans); }
.docs-theme-switch button:hover { color: var(--ink); }
.docs-theme-switch button[aria-pressed="true"] { background: var(--soft); color: var(--ink); }
@media (max-width: 768px) { .docs-theme-switch button { min-height: 44px; padding-inline: 14px; } }

.docs-content { grid-column: 2; grid-row: 2; min-width: 0; max-width: 730px; overflow-wrap: anywhere; }
.docs-toc { display: none; }
@media (min-width: 1181px) {
  .docs-layout.has-toc .docs-toc {
    display: block; grid-column: 3; grid-row: 1 / span 2; position: sticky; top: 24px; align-self: start;
    max-height: calc(100dvh - 48px); overflow-y: auto; margin-top: 46px; padding-left: 18px;
    border-left: 1px solid var(--line); font-size: 11px; line-height: 1.45;
  }
  .docs-toc > span { display: block; margin-bottom: 9px; font-weight: 700; color: var(--ink); }
  .docs-toc a { display: block; padding: 7px 0; color: var(--muted); text-decoration: none; }
  .docs-toc a:hover { color: var(--ink); }
  .docs-toc a[aria-current="location"] { color: var(--violet); }
  /* The rail already lists this page's sections, so the tree does not
     repeat them under the current page (the links stay in the markup). */
  .docs-layout.has-toc .docs-topic-group a[aria-current="page"] + .docs-topic-contents { display: none; }
}
@media (max-width: 1180px) {
  .docs-layout, .docs-layout.has-toc { grid-template-columns: 200px minmax(0, 1fr); column-gap: 35px; padding: 32px; }
}
@media (max-width: 760px) {
  /* The phone: the tree and the section list live behind a bar that sticks to
     the top, so "Browse docs" and "On this page" stay in reach however far
     the reader has scrolled. One panel open at a time; a choice or Escape
     closes it. */
  .docs-layout, .docs-layout.has-toc { display: block; padding: 0 20px 56px; }
  .docs-sidebar { position: sticky; top: 0; z-index: 50; max-height: none; overflow: visible; margin: 0 -20px 4px; padding: 10px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .docs-bar { display: flex; gap: 8px; }
  .docs-menu-toggle, .docs-toc-toggle { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-align: left; }
  .docs-menu-toggle[aria-expanded="true"], .docs-toc-toggle[aria-expanded="true"] { border-color: var(--ink); }
  .docs-menu-toggle-text { display: grid; gap: 1px; min-width: 0; }
  .docs-menu-toggle-label { font-size: 10px; line-height: 1.3; color: var(--muted); }
  .docs-menu-toggle-current, .docs-toc-toggle-current { overflow: hidden; font-size: 13px; line-height: 1.35; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .docs-topics, .docs-toc-panel { display: none; max-height: min(70dvh, 560px); overflow-y: auto; overscroll-behavior: contain; margin: 10px -20px 0; padding: 4px 20px 18px; border-top: 1px solid var(--line); }
  .docs-topics.is-open, .docs-toc-panel.is-open { display: block; }
  .docs-topics .docs-search-label { margin-top: 12px; }
  .docs-search { min-height: 44px; font-size: 14px; }
  .docs-topic-group a { display: flex; align-items: center; min-height: 44px; margin-left: 0; font-size: 14px; }
  .docs-topic-group .docs-topic-contents a { min-height: 40px; margin-left: -11px; font-size: 13px; }
  .docs-toc-panel-list { margin-top: 8px; }
  .docs-toc-panel-list a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-left: 1px solid transparent; color: var(--muted); text-decoration: none; }
  .docs-toc-panel-list a[aria-current="location"] { color: var(--ink); border-left-color: var(--violet); }
  .docs-breadcrumb { margin: 18px 0 27px; padding: 0; }
  .docs-content { max-width: none; }
  /* A clicked anchor lands under the sticky bar (70px), not behind it. */
  .docs-content [id] { scroll-margin-top: 84px; }
}

/* ── 3. The article ────────────────────────────────────────────────────── */
/* :where() keeps these at element weight: any component class wins. */
:where(.sg-page) :is(h1, h2, h3, h4, h5) { color: var(--ink); }
:where(.docs-content) h1 { margin: 0 0 25px; font-size: 44px; line-height: 1.14; }
:where(.docs-content) h2 { margin: 45px 0 18px; font-size: 27px; line-height: 1.2; letter-spacing: -.04em; scroll-margin-top: 24px; }
:where(.docs-content) h3 { margin: 30px 0 15px; font-size: 20px; line-height: 1.25; letter-spacing: -.035em; }
:where(.docs-content) h4 { margin: 24px 0 10px; font-size: 16px; letter-spacing: -.02em; }
:where(.docs-content) :is(p, li) { font-size: 15px; line-height: 1.85; }
:where(.docs-content) p { margin: 14px 0; color: var(--muted); }
:where(.docs-content) :is(ul, ol) { padding-left: 22px; color: var(--muted); }
:where(.docs-content) strong { color: var(--ink); font-weight: 600; }
:where(.docs-content) :is(p, li, td, dd, figcaption, span, small) > a:not([class]),
:where(.docs-content) :is(p, li) a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
:where(.docs-content) blockquote { margin: 25px 0; padding: 20px; border-left: 3px solid var(--violet); border-radius: 0 8px 8px 0; background: var(--surface); font-size: 14px; color: var(--ink); }
:where(.docs-content) hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
:where(.sg-page) code { padding: 1px 5px; border-radius: 5px; background: var(--soft); color: var(--ink); font: .88em/1.5 var(--mono); }
:where(.sg-page) pre { overflow: auto; padding: 20px; border-radius: 8px; background: var(--soft); color: var(--ink); font: 12px/1.65 var(--mono); }
:where(.sg-page) pre code { padding: 0; background: none; font-size: inherit; }
:where(.sg-page) kbd { padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: 12px var(--mono); color: var(--ink); }
:where(.docs-content) table { border-collapse: collapse; font-size: 13px; }
:where(.docs-content) :is(th, td) { padding: 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
:where(.docs-content) th { color: var(--ink); font-weight: 600; }
:where(.docs-content) td { color: var(--muted); }
:where(.docs-content) :is(img, video) { max-width: 100%; height: auto; }
:where(.docs-content) figure { margin: 28px 0; }

/* ── 4. Shared long-form parts ─────────────────────────────────────────── */

/* Label (the study's .eyebrow): small caps, a violet dot. */
.eyebrow, .section-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font: 650 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.eyebrow::before, .section-eyebrow::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
/* Emphasis words in headings read as plain ink: no gradient, no colour. */
.grad, em.grad, h1 em, h2 em { font-style: normal; color: inherit; background: none; -webkit-text-fill-color: currentColor; }
h2:has(em.em) { color: var(--ink); }
.em { font-style: normal; }

/* Text roles some pages carry (t-display for a line in display type, t-read
   for a reading paragraph, t-label / t-mono for small labels). */
.t-display { font-family: var(--display); font-weight: 600; letter-spacing: -.045em; line-height: 1.1; color: var(--ink); text-wrap: balance; }
.t-display-md { font-size: clamp(22px, 2.4vw, 30px); }
.t-display-lg { font-size: clamp(34px, 4vw, 52px); }
.t-read { max-width: 68ch; font-size: 15px; line-height: 1.75; color: var(--muted); }
.t-read strong { color: var(--ink); }
.t-read-lg { font-size: 17px; line-height: 1.65; }
.t-label { font: 650 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.t-mono { font-family: var(--mono); font-size: .9em; }

/* Containers: the page's column outside the shell, the article inside it. */
.container, .container-narrow, .install-container {
  width: min(var(--wrap-max), calc(100% - 2 * var(--gutter))); margin-left: auto; margin-right: auto;
}
/* The narrow container keeps the page's left edge (the study aligns every
   section to one edge); its text keeps its own measure. */
.container-narrow > :is(p, .faq-list, .sec-head) { max-width: 820px; }
.docs-content :is(.container, .container-narrow, .install-container) { width: 100%; max-width: none; }

/* Page top (the study's .page-hero / docs-article h1 + lead). */
.page-hero { padding: 70px 0 46px; }
.page-hero h1 { max-width: 900px; margin: 0 0 22px; font-size: clamp(42px, 5vw, 68px); line-height: 1.08; }
.page-hero p { max-width: 680px; margin: 0 0 18px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.page-hero p a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.page-hero-compact { padding-block: 56px 36px; }
.hero-ctas, .cta-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.docs-content .page-hero { padding: 0 0 12px; }
.docs-content .page-hero h1 { max-width: none; font-size: 44px; line-height: 1.14; margin-bottom: 25px; }
.docs-content .page-hero p { font-size: 17px; line-height: 1.7; }
.docs-content .page-hero .eyebrow { margin-bottom: 20px; }

/* Sections. Outside the shell: the study's section rhythm and top rule.
   Inside the article: a rule and a reading-size heading. */
.install-section { padding: 72px 0; border-top: 1px solid var(--line); }
.install-section h2 { max-width: 820px; margin: 0 0 20px; font-size: clamp(30px, 3.6vw, 45px); line-height: 1.13; }
.install-section > p, .install-section .container > p { max-width: 68ch; margin: 0 0 20px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.install-section p a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.docs-content .install-section { padding: 45px 0 20px; border-top: 1px solid var(--line); }
.docs-content .page-hero + .install-section, .docs-content .install-section:first-child { border-top: 0; padding-top: 20px; }
.docs-content .install-section h2 { margin: 0 0 18px; font-size: 27px; line-height: 1.2; letter-spacing: -.04em; }
.docs-content .install-section > p, .docs-content .install-section .container > p { font-size: 15px; line-height: 1.85; }

/* A section heading with its lead (sec-head). */
.sec-head { max-width: 820px; margin: 0 0 32px; }
.sec-head h2 { margin: 0 0 14px; font-size: clamp(30px, 3.6vw, 45px); line-height: 1.13; }
.sec-head p { max-width: 62ch; margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.docs-content .sec-head h2 { font-size: 27px; line-height: 1.2; }

/* Rows: a term and its explanation, hairlines only (perm-list / perm-row). */
.perm-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.perm-row { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 14px; }
.perm-row:last-child { border-bottom: 0; }
.perm-row strong { font-weight: 600; color: var(--ink); }
.perm-row > span, .perm-row > div { line-height: 1.65; color: var(--muted); }
.perm-row a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.docs-content .perm-row { grid-template-columns: 170px 1fr; }

/* Fact cards (fact-grid / fact-card / label). */
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fact-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.fact-card .label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fact-card .label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.fact-card h4 { margin: 0 0 6px; font: 600 18px/1.25 var(--display); letter-spacing: -.03em; color: var(--ink); }
.fact-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.fact-card a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }

/* Questions and answers (faq-list / faq-entry; page-faqs.jsx). */
.faq-list { display: grid; max-width: 820px; }
.faq-entry { padding: 26px 0; border-bottom: 1px solid var(--line); }
.faq-entry:first-child { padding-top: 0; }
.faq-entry:last-child { border-bottom: 0; }
.faq-entry h2, .faq-entry h3 { max-width: none; margin: 0 0 10px; font-size: 20px; line-height: 1.3; letter-spacing: -.03em; }
.faq-entry p { max-width: 70ch; margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.faq-entry p:last-child { margin-bottom: 0; }
.faq-entry a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.faq-links { font-size: 13px; color: var(--muted); }
.faq-links a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.page-faqs .sec-head { margin-bottom: 28px; }
.page-faqs .sec-head h2 { max-width: none; }
.docs-content .faq-entry h2 { font-size: 19px; }

/* Cards in a grid (bento / bento-card / bento-tag). */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; }
.bento-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-3 { grid-column: span 3; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-6 { grid-column: span 6; }
.bento-card h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.25; letter-spacing: -.035em; }
.bento-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.bento-card p:last-child { margin-bottom: 0; }
.bento-card a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.bento-tag { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; font: 550 10px/1.4 var(--sans); letter-spacing: .04em; color: var(--muted); vertical-align: middle; text-transform: none; }
.docs-content .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.docs-content .bento-card.span-2, .docs-content .bento-card.span-3, .docs-content .bento-card.span-4 { grid-column: span 1; }
.docs-content .bento-card.span-6 { grid-column: 1 / -1; }

/* A tip inside a step or section. */
.install-tip { margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--surface); font-size: 14px; line-height: 1.6; color: var(--muted); }
.install-tip strong { color: var(--ink); }

/* The closing call (install-cta: text beside its actions; cta: centred band). */
.install-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; margin: 40px 0 72px; padding: 36px 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.install-cta-text h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); line-height: 1.13; }
.install-cta-text p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.install-cta > .sg-btn, .install-cta > div:last-child { justify-self: end; }
.cta { padding: 72px 0 88px; border-top: 1px solid var(--line); text-align: center; }
.cta h2 { max-width: 20ch; margin: 0 auto 16px; font-size: clamp(34px, 4.2vw, 50px); line-height: 1.1; }
.cta p { max-width: 560px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: var(--muted); }
.cta .cta-ctas { justify-content: center; }
.cta .cta-alt { margin: 20px auto 0; font-size: 13px; color: var(--muted); }
.cta .cta-alt a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.docs-content .cta { margin-top: 40px; padding: 40px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.docs-content .cta h2 { font-size: 32px; }
.docs-content .install-cta { grid-template-columns: 1fr; gap: 20px; margin-bottom: 0; padding: 28px 30px; }
.docs-content .install-cta > .sg-btn, .docs-content .install-cta > div:last-child { justify-self: start; }
.install-cta .sg-btn svg { width: 16px; height: 16px; }

/* Comparison table (compare / col-ergod / cell-ergod). */
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.compare table { width: 100%; border-collapse: collapse; }
.compare :is(th, td) { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 13.5px; line-height: 1.55; vertical-align: top; }
.compare th { background: var(--soft); color: var(--ink); font-weight: 600; font-size: 12.5px; }
.compare th.col-ergod { color: var(--ink); }
.compare td { color: var(--muted); }
.compare td:first-child { width: 30%; color: var(--ink); font-weight: 500; }
.compare td.cell-ergod { color: var(--ink); }
.compare tr:last-child :is(th, td) { border-bottom: 0; }

/* Screenshots (ShotFigure in shell.jsx) and the enlarged view. */
.shot-fig { margin: 28px 0; min-width: 0; }
.shot-btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: zoom-in; }
.shot-img, .act-shot { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.shot-fig figcaption { max-width: 62ch; margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.shot-fig figcaption b, .shot-fig figcaption strong { color: var(--ink); font-weight: 600; }
.shot-fig figcaption a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.shot-fig.is-phone .shot-btn { max-width: 320px; }
.shot-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 28px; }
.shot-pair .shot-fig { margin: 0; }
.shot-solo { max-width: 760px; margin-top: 28px; }
.lightbox { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(8, 9, 10, .88); opacity: 0; pointer-events: none; transition: opacity .2s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 90vh; border: 1px solid var(--line); border-radius: var(--radius-md); }
.lightbox-close { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }

/* ── The handbook's own parts (docs.html) ──────────────────────────────── */
.docs-intro { padding: 0 0 20px; }
.docs-intro h1 { max-width: none; margin: 0 0 25px; font-size: 44px; line-height: 1.14; }
.docs-intro p { max-width: 640px; margin: 0; font-size: 17px; line-height: 1.7; color: var(--muted); }
.docs-intro .eyebrow { margin-bottom: 20px; }
.docs-text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--violet); font-weight: 550; text-decoration: none; }
.docs-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The three first steps as the study's doc cards. */
.docs-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 35px 0 10px; }
.docs-path a { display: grid; align-content: start; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.docs-path a:hover { border-color: var(--violet); }
.docs-path b { font: 600 11px/1.3 var(--sans); letter-spacing: .06em; color: var(--muted); }
.docs-path strong { font: 600 18px/1.25 var(--display); letter-spacing: -.035em; }
.docs-path span { font-size: 13px; line-height: 1.5; color: var(--muted); }
.guide-result-figure, .docs-result-figure { width: 100%; max-width: 427px; }
.docs-article { padding: 10px 0 0; scroll-margin-top: 24px; }
.docs-article h2 { margin-top: 12px; }
.docs-section-number { display: block; margin-top: 35px; font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.docs-example { margin: 25px 0; padding: 18px 20px; border-left: 3px solid var(--violet); border-radius: 0 8px 8px 0; background: var(--surface); }
.docs-example > span { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.docs-example blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 15px; line-height: 1.7; color: var(--ink); }
.docs-steps { padding-left: 22px; }
.docs-steps li { margin: 0 0 14px; padding-left: 6px; color: var(--muted); }
.docs-note { margin: 24px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.docs-note p { margin: 0; font-size: 14px; line-height: 1.7; }
.docs-note summary { cursor: pointer; font-size: 14px; line-height: 1.6; color: var(--ink); }
.docs-note[open] summary { margin-bottom: 10px; }
@media (max-width: 768px) { .docs-note { padding-block: 5px; } .docs-note summary { padding-block: 11px; } .docs-note[open] { padding-bottom: 16px; } .docs-note[open] summary { margin-bottom: 0; } }
.docs-reference-list { border-top: 1px solid var(--line); }
.docs-reference-list a { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.docs-reference-list a:hover span { color: var(--ink); }
.docs-reference-list span { font-size: 14px; color: var(--muted); }
.docs-table-wrap { overflow-x: auto; margin: 24px 0; }
.docs-table-wrap table { width: 100%; }
.docs-table-wrap :is(th, td) { padding: 12px 14px; font-size: 13.5px; line-height: 1.6; }
.docs-table-wrap thead th { font-size: 12px; color: var(--muted); font-weight: 500; }
.docs-next { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 28px 0; }
.docs-next a { display: grid; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.docs-next a:hover { border-color: var(--violet); }
.docs-next strong { font: 600 17px/1.3 var(--display); letter-spacing: -.03em; }
.docs-next span { font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-card.span-2, .bento-card.span-3, .bento-card.span-4 { grid-column: span 1; }
  .bento-card.span-6 { grid-column: 1 / -1; }
  .install-cta { grid-template-columns: 1fr; }
  .install-cta > .sg-btn, .install-cta > div:last-child { justify-self: start; }
}
@media (max-width: 760px) {
  :where(.docs-content) h1, .docs-intro h1, .docs-content .page-hero h1 { font-size: 36px; }
  :where(.docs-content) h2, .docs-content .install-section h2, .docs-content .sec-head h2 { font-size: 26px; }
  :where(.docs-content) :is(p, li) { font-size: 14.5px; }
  .docs-path, .docs-next { grid-template-columns: 1fr; }
  .docs-reference-list a { grid-template-columns: 1fr; gap: 4px; }
  .docs-table-wrap table { min-width: 530px; }
}
@media (max-width: 640px) {
  .page-hero { padding: 40px 0 28px; }
  .page-hero h1 { font-size: 40px; }
  .page-hero p { font-size: 16px; }
  .hero-ctas .sg-btn, .cta-ctas .sg-btn { flex: 1 1 100%; }
  .install-section { padding: 48px 0; }
  .install-section h2, .sec-head h2 { font-size: 30px; }
  .perm-row, .docs-content .perm-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .fact-grid, .bento, .docs-content .bento { grid-template-columns: 1fr; }
  .bento-card.span-6 { grid-column: auto; }
  .fact-card { padding: 18px; }
  .install-cta, .docs-content .install-cta { margin-bottom: 48px; padding: 24px 20px; }
  .cta { padding: 48px 0 56px; }
  .cta h2 { font-size: 32px; }
  .shot-pair { grid-template-columns: 1fr; gap: 28px; }
  .lightbox { padding: 8px; }
  .faq-entry h2, .faq-entry h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .docs-path a { transition: none; }
}