/* The pages for search (crates/tally-web/src/guides): "… for <industry>", the
   integrations, the comparisons, the why page and the hubs. They sit over tokens.css and
   app.css (the brand, the skip link, buttons, the theme menu's colours) and take the
   landing's manual look: a sticky, numbered contents column beside numbered sections,
   mono labels, hairlines, quiet space, and the product's own renders on pastel mats.
   An industry page also loads the stylesheet of the page its figure comes from. Every
   class here is guide-…, so neither app.css nor landing.css reaches into these pages
   (tally-web's stylesheets test checks). No motion beyond hovers; no inline style. */

:root {
  --guide-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --guide-masthead: 60px;
  --guide-mat-a: #e2eeff;
  --guide-mat-b: #ece5ff;
  --guide-mat-shadow: 0 1px 2px rgba(11, 13, 18, .05), 0 22px 44px -26px rgba(11, 13, 18, .28);
  --guide-limit: #fff6e5;
  --guide-limit-line: #f3dfb4;
}

:root[data-theme="dark"] {
  --guide-mat-a: #0e1828;
  --guide-mat-b: #191230;
  --guide-mat-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 24px 48px -24px rgba(0, 0, 0, .8);
  --guide-limit: #1f1907;
  --guide-limit-line: #3a2f12;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --guide-mat-a: #0e1828;
    --guide-mat-b: #191230;
    --guide-mat-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 24px 48px -24px rgba(0, 0, 0, .8);
    --guide-limit: #1f1907;
    --guide-limit-line: #3a2f12;
  }
}

/* Each figure's pair of pastels, as on the landing. */
[data-figure="path"] { --guide-mat-a: #ffe8dc; --guide-mat-b: #ffe2ea; }
[data-figure="ltv"] { --guide-mat-a: #fff2cc; --guide-mat-b: #ffe8dc; }
[data-figure="peak"] { --guide-mat-a: #fff2cc; --guide-mat-b: #ffe8dc; }
[data-figure="reading"] { --guide-mat-a: #dcf4e8; --guide-mat-b: #e2eeff; }
[data-figure="visitors"] { --guide-mat-a: #e2eeff; --guide-mat-b: #ece5ff; }

:where(:root[data-theme="dark"]) [data-figure="path"] { --guide-mat-a: #22140d; --guide-mat-b: #251019; }
:where(:root[data-theme="dark"]) [data-figure="ltv"] { --guide-mat-a: #1f1907; --guide-mat-b: #22140d; }
:where(:root[data-theme="dark"]) [data-figure="peak"] { --guide-mat-a: #1f1907; --guide-mat-b: #22140d; }
:where(:root[data-theme="dark"]) [data-figure="reading"] { --guide-mat-a: #0b1d15; --guide-mat-b: #0e1828; }
:where(:root[data-theme="dark"]) [data-figure="visitors"] { --guide-mat-a: #0e1828; --guide-mat-b: #191230; }

@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) [data-figure="path"] { --guide-mat-a: #22140d; --guide-mat-b: #251019; }
  :where(:root:not([data-theme="light"])) [data-figure="ltv"] { --guide-mat-a: #1f1907; --guide-mat-b: #22140d; }
  :where(:root:not([data-theme="light"])) [data-figure="peak"] { --guide-mat-a: #1f1907; --guide-mat-b: #22140d; }
  :where(:root:not([data-theme="light"])) [data-figure="reading"] { --guide-mat-a: #0b1d15; --guide-mat-b: #0e1828; }
  :where(:root:not([data-theme="light"])) [data-figure="visitors"] { --guide-mat-a: #0e1828; --guide-mat-b: #191230; }
}

html {
  scroll-padding-top: calc(var(--guide-masthead) + 20px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

[data-page="guide"] ::selection {
  background: var(--brand-tint);
  color: var(--ink);
}

.guide-masthead-inner,
.guide-wrap,
.guide-colophon-inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ------------------------------------------------------------------ Masthead */

.guide-masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--paper) 86%, transparent);
  background-image: var(--chrome);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}

.guide-masthead-inner {
  min-height: var(--guide-masthead);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
}

.guide-nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-size: 14px;
}

.guide-nav a {
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}

.guide-nav a:hover {
  color: var(--ink);
}

.guide-nav a[aria-current="page"] {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.guide-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.guide-signin {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 560;
  text-decoration: none;
  white-space: nowrap;
}

.guide-signin:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-cta-top {
  flex: none;
}

/* ------------------------------------------------------------------ The head */

.guide-main {
  flex: 1;
}

.guide-head {
  max-width: 860px;
  padding-top: 40px;
}

.guide-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  list-style: none;
  padding: 0;
  color: var(--faint);
  font-family: var(--guide-mono);
  font-size: 12.5px;
}

.guide-crumbs li + li::before {
  content: "/";
  padding: 0 8px;
  color: var(--faint);
}

.guide-crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.guide-crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.guide-crumbs [aria-current="page"] {
  color: var(--ink-2);
}

.guide-kicker {
  margin-top: 34px;
  color: var(--faint);
  font-family: var(--guide-mono);
  font-size: 12.5px;
}

.guide-title {
  margin-top: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.03;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}

.guide-lede {
  max-width: 62ch;
  margin-top: 22px;
  color: var(--muted);
  font-size: 18.5px;
  line-height: 1.58;
}

/* A provider's own rule for how it's named, said once under the lede. */
.guide-notice {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.guide-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 28px;
}

.guide-cta-note {
  color: var(--muted);
  font-size: 14px;
}

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

/* Two columns: the contents (sticky, through the whole page) and the sections. */
.guide-doc {
  display: grid;
  grid-template-columns: 210px minmax(0, 800px);
  column-gap: 72px;
  align-items: start;
  margin-top: 64px;
}

.guide-contents {
  position: sticky;
  top: calc(var(--guide-masthead) + 28px);
  max-height: calc(100vh - var(--guide-masthead) - 56px);
  overflow-y: auto;
}

.guide-contents-title {
  margin-bottom: 12px;
  color: var(--faint);
  font-family: var(--guide-mono);
  font-size: 12.5px;
}

.guide-contents-list {
  display: grid;
  gap: 2px;
  list-style: none;
  padding: 0;
}

.guide-contents-link {
  display: flex;
  gap: 12px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.guide-contents-link:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.guide-contents-n {
  flex: none;
  width: 1.6em;
  padding-top: 1px;
  color: var(--faint);
  font-family: var(--guide-mono);
  font-size: 12px;
}

.guide-contents-cta {
  margin-top: 20px;
}

.guide-contents-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.guide-section {
  scroll-margin-top: calc(var(--guide-masthead) + 24px);
  padding-bottom: 56px;
}

.guide-section + .guide-section {
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.guide-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.5vw, 31px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.guide-number {
  flex: none;
  color: var(--faint);
  font-family: var(--guide-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.guide-sub {
  margin-top: 30px;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.3;
}

.guide-p {
  max-width: 68ch;
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.66;
}

.guide-quiet {
  color: var(--muted);
  font-size: 14.5px;
}

.guide-sections a:not([class]),
.guide-p a {
  color: var(--ink);
  text-decoration-color: var(--faint);
}

.guide-sections a:not([class]):hover,
.guide-p a:hover {
  text-decoration-color: var(--ink);
}

.guide-sections strong {
  color: var(--ink);
  font-weight: 650;
}

/* Lists with a dashed rule before each item. */
.guide-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}

.guide-list li {
  position: relative;
  max-width: 68ch;
  padding-left: 22px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.62;
}

.guide-list li::before {
  content: "";
  position: absolute;
  top: .86em;
  left: 2px;
  width: 10px;
  border-top: 1.5px dashed var(--faint);
}

/* Items with a mono tag: how they sell, providers, sources, methods. */
.guide-items {
  display: grid;
  margin-top: 20px;
  list-style: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.guide-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 20px;
  padding: 16px 20px;
}

.guide-item + .guide-item {
  border-top: 1px solid var(--line-2);
}

.guide-tag {
  align-self: start;
  justify-self: start;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-bar);
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--guide-mono);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.guide-tag-link {
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease;
}

.guide-tag-link:hover {
  border-color: var(--ink);
}

.guide-tag-source {
  border-color: var(--visitors-bar);
  background: var(--visitors-bar);
}

.guide-item-text {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

/* What isn't read: a pale amber card. */
.guide-limits {
  margin-top: 22px;
  padding: 4px 20px 18px;
  border: 1px solid var(--guide-limit-line);
  border-radius: var(--radius-panel);
  background: var(--guide-limit);
}

.guide-limits .guide-sub {
  margin-top: 14px;
}

.guide-limits .guide-list {
  margin-top: 10px;
}

/* The questions it answers, numbered. */
.guide-answers {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  list-style: none;
  padding: 0;
}

.guide-answer {
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.guide-answer-q {
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
}

.guide-answer .guide-p {
  margin-top: 8px;
  font-size: 15.5px;
}

.guide-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--guide-mono);
  font-size: 12.5px;
  text-decoration: none;
}

.guide-go:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.guide-go-arrow {
  width: 14px;
  border-top: 1.5px dashed currentColor;
  position: relative;
}

.guide-go-arrow::after {
  content: "";
  position: absolute;
  top: -4.5px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Numbers worth watching, and every view on the why page. */
.guide-numbers {
  display: grid;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.guide-number-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 6px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--guide-masthead) + 24px);
}

.guide-number-row dt {
  color: var(--ink);
  font-weight: 650;
  font-size: 15.5px;
  line-height: 1.45;
}

.guide-number-row dd {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.guide-number-row .guide-go {
  margin-top: 0;
}

.guide-number-row:target dt {
  color: var(--brand);
}

/* Setup notes, numbered. */
.guide-steps {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  list-style: none;
  padding: 0;
  counter-reset: guide-step;
}

.guide-step {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding-left: 40px;
  counter-increment: guide-step;
}

.guide-step::before {
  content: counter(guide-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-control);
  background: var(--button-bg);
  color: var(--button-ink);
  font-family: var(--guide-mono);
  font-size: 12.5px;
}

.guide-step .guide-item-text {
  flex: 1 1 320px;
}

.guide-code {
  margin-top: 14px;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: var(--radius-control);
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--guide-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}

/* The block is the frame: its code isn't marked line by line, as inline code is. */
.guide-code code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  overflow-wrap: normal;
}

/* ------------------------------------------------------------- The figure */

.guide-figure {
  margin-top: 24px;
}

.guide-mat {
  padding: 30px 28px 26px;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--guide-mat-a) 0%, var(--guide-mat-b) 100%);
}

.guide-frame {
  position: relative;
  min-width: 0;
}

/* The tag sits on the panel's top edge, like a label on a drawing. */
.guide-example {
  position: absolute;
  z-index: 2;
  top: -10px;
  right: 18px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-bar);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--guide-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
}

.guide-frame-body {
  min-width: 0;
  border-radius: var(--radius-panel);
  box-shadow: var(--guide-mat-shadow);
}

.guide-frame-body > section {
  margin-top: 0;
}

.guide-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.guide-caption {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.guide-caption-n {
  flex: none;
  padding-top: 1px;
  color: var(--faint);
  font-family: var(--guide-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

/* ------------------------------------------------------------- Questions */

.guide-questions {
  margin-top: 16px;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}

.guide-question {
  border-bottom: 1px solid var(--line);
}

.guide-question-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 620;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.guide-question-summary::-webkit-details-marker {
  display: none;
}

.guide-question-sign {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}

.guide-question-sign::before,
.guide-question-sign::after {
  content: "";
  position: absolute;
  top: 5.25px;
  left: 0;
  width: 12px;
  border-top: 1.5px solid var(--muted);
  transition: transform .2s ease;
}

.guide-question-sign::after {
  transform: rotate(90deg);
}

.guide-question[open] .guide-question-sign::after {
  transform: rotate(0deg);
}

.guide-question-answer {
  max-width: 68ch;
  padding-bottom: 18px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.66;
}

/* ------------------------------------------------------------- Link cards */

.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 20px;
  list-style: none;
  padding: 0;
}

.guide-card-link {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}

.guide-card-link:hover {
  border-color: var(--faint);
}

@media (prefers-reduced-motion: no-preference) {
  .guide-card-link:hover {
    transform: translateY(-1px);
  }
}

.guide-card-name {
  color: var(--ink);
  font-weight: 650;
  font-size: 15.5px;
  line-height: 1.3;
}

.guide-card-line {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.guide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 14px;
  list-style: none;
  padding: 0;
}

.guide-chips a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13.5px;
  text-decoration: none;
}

.guide-chips a:hover {
  border-color: var(--faint);
  color: var(--ink);
}

/* ---------------------------------------------- Related, Outpost and sources */

.guide-related {
  margin-top: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.guide-related-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.02em;
}

.guide-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
  font-size: 14.5px;
}

.guide-more a {
  color: var(--ink);
  text-decoration-color: var(--faint);
}

.guide-outpost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 36px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface-2);
}

.guide-outpost-text {
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.guide-outpost-link {
  color: var(--ink);
  font-weight: 650;
  font-size: 15px;
  text-decoration-color: var(--faint);
}

.guide-sources {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-left: 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.guide-sources li {
  scroll-margin-top: calc(var(--guide-masthead) + 24px);
  overflow-wrap: anywhere;
}

.guide-sources li:target {
  color: var(--ink);
}

.guide-sources a {
  color: var(--ink);
  text-decoration-color: var(--faint);
}

.guide-source-host {
  margin-left: 8px;
  color: var(--faint);
  font-family: var(--guide-mono);
  font-size: 12px;
}

.guide-ref {
  color: var(--muted);
  font-family: var(--guide-mono);
  font-size: 11.5px;
  text-decoration: none;
  white-space: nowrap;
}

.guide-ref:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Tables: ruled, on a card. On narrow screens each row becomes a short block. */
.guide-table-wrap {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}

.guide-table th,
.guide-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--line-2);
  text-align: left;
  vertical-align: top;
}

.guide-table thead th {
  border-top: 0;
  background: var(--surface-2);
  color: var(--faint);
  font-family: var(--guide-mono);
  font-size: 12px;
  font-weight: 500;
}

.guide-table tbody th {
  min-width: 8em;
  color: var(--ink);
  font-weight: 600;
}

.guide-table td {
  color: var(--ink-2);
}

.guide-compare td {
  width: 40%;
}

/* ------------------------------------------------------------------ Colophon */

.guide-colophon {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}

.guide-colophon-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-top: 22px;
  padding-bottom: 32px;
}

.guide-colophon-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guide-colophon-mark svg {
  width: 22px;
  height: 19px;
}

.guide-colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  padding: 0;
}

.guide-colophon-links a {
  color: var(--muted);
  text-decoration: none;
}

.guide-colophon-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ------------------------------------------------------------ Narrower screens */

@media (max-width: 1180px) {
  .guide-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-bottom: 10px;
    overflow-x: auto;
  }

  .guide-actions {
    margin-left: auto;
  }

  .guide-doc {
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 44px;
  }
}

/* One column: the head, then the contents as a list in a card, then the sections. */
@media (max-width: 960px) {
  .guide-doc {
    display: block;
    margin-top: 40px;
  }

  .guide-contents {
    position: static;
    max-height: none;
    margin-bottom: 40px;
    padding: 16px 14px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
  }

  .guide-contents-title {
    padding: 0 10px;
  }

  .guide-contents-cta,
  .guide-contents-note {
    display: none;
  }
}

@media (max-width: 640px) {
  .guide-masthead-inner,
  .guide-wrap,
  .guide-colophon-inner {
    padding: 0 16px;
  }

  .guide-masthead-inner {
    gap: 8px 12px;
    padding-top: 8px;
  }

  .guide-actions {
    gap: 10px;
  }

  .guide-nav {
    gap: 16px;
  }

  .guide-lede {
    font-size: 17px;
  }

  .guide-p,
  .guide-list li {
    font-size: 15.5px;
  }

  .guide-item,
  .guide-number-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-item {
    padding: 14px 16px;
  }

  .guide-mat {
    padding: 22px 12px 14px;
    border-radius: 16px;
  }

  .guide-frame-body {
    overflow-x: auto;
  }

  .guide-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .guide-table,
  .guide-table tbody,
  .guide-table tr,
  .guide-table th,
  .guide-table td {
    display: block;
  }

  .guide-table tr {
    padding: 12px 0;
    border-top: 1px solid var(--line-2);
  }

  .guide-table tbody tr:first-child {
    border-top: 0;
  }

  .guide-table th,
  .guide-table td {
    width: auto;
    padding: 2px 16px;
    border-top: 0;
  }

  .guide-table tbody th {
    min-width: 0;
    padding-bottom: 4px;
  }

  .guide-compare td::before {
    content: attr(data-label);
    display: block;
    color: var(--faint);
    font-family: var(--guide-mono);
    font-size: 11.5px;
  }
}

@media (max-width: 460px) {
  .guide-brand-by,
  .guide-signin {
    display: none;
  }
}