/* Paper and ink: the site printed in one navy ink on porcelain paper, with engraved
   illustrations. Shared by every page. Loaded after landing.css, so removing
   the "manual" class from <html> returns a page to the dark theme. */
@property --icon-tint {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:root.manual {
  /* Paper stock, from the page itself to lighter cards and darker panels. */
  --paper: #eef1f4;
  --paper-light: #f8fafb;
  --paper-tint: #f2f4f7;
  --paper-mid: #e7ebf0;
  --paper-deep: #dfe4ea;
  --panel: #fcfdfe;
  --ink: #1c3150;
  --ink-2: #44567a;
  --ink-3: #6b7890;
  --ink-green: #2c6e51;
  --line: #1c315029;
  --serif: "Newsreader", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
.manual body {
  background: var(--paper);
}
.manual ::selection {
  background: #1c315026;
}
.manual button:focus-visible,
.manual a:focus-visible,
.manual [tabindex]:focus-visible {
  outline-color: var(--ink);
}
.manual code,
.manual .mono {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: 0;
}

/* Header and footer, reprinted in ink. */
.manual .site-header {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}
.manual .brand-ai {
  color: var(--ink-3);
}
.manual .nav-links {
  color: var(--ink-2);
}
.manual .nav-links a:hover,
.manual .nav-links a[aria-current="page"] {
  color: var(--ink);
}
.manual .nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.manual .button-nav,
.manual .button-primary {
  background: var(--ink);
  color: var(--paper-light);
  box-shadow: none;
}
.manual .button-nav:hover,
.manual .button-primary:hover {
  background: #10223d;
}
.manual .menu-toggle {
  color: var(--ink);
}
.manual .footer-top > p,
.manual .footer-bottom {
  color: var(--ink-3);
}
.manual .footer-top > .text-link {
  color: var(--ink-2);
}
.manual .footer-bottom a:hover {
  color: var(--ink);
}

/* Type: Newsreader for reading, Archivo for spec-plate labels. */
.manual main {
  font-family: var(--serif);
  font-optical-sizing: auto;
}
.manual main .button,
.manual main .text-link {
  font-family: "Manrope", sans-serif;
}
.manual .section-kicker {
  color: var(--ink-2);
  letter-spacing: 0.18em;
}
.manual .section-heading h2,
.manual .gallery-intro h2,
.manual .faq-section h2,
.manual .closing-content h2,
.spec-copy h2,
.hood-closing h2 {
  font-family: var(--serif);
  font-stretch: normal;
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.manual .section-heading > p,
.spec-copy > p:last-child {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 380px;
}


/* An engraved plate: the canvas drawn by engraving.js, or a static copy
   without JavaScript. */
.plate {
  margin: 0;
  color: var(--ink);
}
.plate canvas,
.plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1300 / 540;
}
html:not(.js) .plate canvas {
  display: none;
}
.manual main {
  overflow-x: clip;
}

/* ── Landing page ─────────────────────────────────────────────────────── */

/* Product UI and brand wordmarks keep the sans face; the page reads in serif. */
.manual .product-stage,
.manual .marketplace-names,
.manual .demo-caption,
.manual .conversation-art,
.manual .cost-legend,
.manual .screenshot-title {
  font-family: "Manrope", sans-serif;
}
.manual .availability,
.manual .cost-art > span,
.manual .step-number {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.manual .status-dot {
  background: var(--ink-green);
  box-shadow: 0 0 0 4px #2c6e5121;
}

/* Hero: copy on the left, the engraved car bleeding off the right edge. */
.manual .hero {
  padding-top: 52px;
}
.manual .hero-heading {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 36px;
  margin-bottom: 60px;
}
.manual .hero h1 {
  font-family: var(--serif);
  font-stretch: normal;
  font-size: min(92px, 15.6cqi);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.manual .hero-search {
  font-style: italic;
  color: var(--ink-3);
}
.manual .hero-intro {
  max-width: 470px;
  padding: 0;
  margin-top: 28px;
}
.manual .hero-intro > p:first-child {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: none;
}
.manual .hero-actions {
  margin-top: 28px;
}
.manual .install-note {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-3);
}
.hero-plate {
  margin-right: calc((min(1200px, 100vw - 80px) - 100vw) / 2);
}

/* The demo sits on the page like a mounted print. */
.manual .product-stage {
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--paper-light);
  box-shadow: 0 30px 60px -42px #1c315080;
}
.manual .browser-bar {
  background: var(--paper-deep);
  color: var(--ink-2);
  border-bottom-color: #1c315033;
}
.manual .browser-bar::after {
  content: none;
}
.manual .browser-dots i {
  background: #9aa3b1;
}
.manual .browser-tab {
  background: var(--paper-light);
  color: var(--ink);
}
.manual .browser-label {
  color: var(--ink-3);
}
.manual .browser-plus {
  color: var(--ink-2);
}
.manual .listing-preview {
  background: var(--paper-mid);
}
.manual .listing-details {
  background: var(--paper-light);
}
.manual .listing-bottom {
  background: var(--paper);
  border-top-color: var(--line);
}
.manual .demo-caption {
  color: var(--ink-3);
}
.manual .demo-caption > span:first-child {
  color: var(--ink-2);
}
.manual .replay-demo {
  background: var(--paper-light);
  border-color: #1c315059;
  color: var(--ink);
}
.manual .replay-demo.is-playing {
  color: var(--ink-green);
  border-color: var(--ink-green);
}
@media (hover: hover) and (pointer: fine) {
  .manual .replay-demo:hover {
    background: var(--paper-deep);
  }
}
.manual .marketplaces > p {
  font-size: 15px;
  font-style: italic;
  color: var(--ink-3);
}
.manual .marketplace-names {
  color: var(--ink-2);
}
.manual .marketplace-names .marketplace-more {
  color: var(--ink-3);
}

/* Features: on the same paper, cards printed on lighter stock. */
.manual .intelligence-section {
  background: transparent;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.manual .feature-story-chat {
  background: var(--paper-deep);
}
.manual .feature-story-repairs {
  background: var(--paper-light);
  border-color: #1c315033;
}
.manual .feature-icon {
  color: var(--ink);
}
.manual .feature-story h3 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.manual .feature-story-copy p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 380px;
}
.manual .context-chip,
.manual .art-caption {
  color: var(--ink-3);
}
.manual .art-user {
  background: var(--ink);
  color: var(--paper-light);
}
.manual .art-answer {
  background: var(--paper-light);
  border-color: #1c315026;
  box-shadow: 0 8px 22px -14px #1c315059;
}
.manual .art-answer > svg {
  color: var(--ink);
}
.manual .art-answer p {
  color: var(--ink-2);
}
.manual .cost-amount {
  font-family: var(--serif);
  font-stretch: normal;
  font-size: clamp(44px, 4.6vw, 64px);
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.manual .cost-amount > span {
  color: var(--ink-3);
  font-size: 0.7em;
}
.manual .cost-bar span:first-child,
.manual .cost-legend i {
  background: var(--ink);
}
.manual .cost-bar span:last-child,
.manual .cost-legend > span:nth-child(2) i {
  background: #b9bfc8;
}
.manual .cost-legend,
.manual .cost-legend small {
  color: var(--ink-3);
}
.manual .feature-footnotes {
  border-top-color: var(--line);
}
.manual .feature-footnotes svg {
  color: var(--ink);
}
.manual .feature-footnotes h3 {
  font-size: 19px;
  font-weight: 500;
}
.manual .feature-footnotes p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* How it works: the route in ink. */
.manual .workflow-section {
  border-top: 1px solid var(--line);
}
.manual .workflow-section .section-heading > .text-link {
  color: var(--ink);
}
.manual .workflow li::before {
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink-3) 0 14px,
    transparent 14px 24px
  );
}
.manual .workflow li::after {
  background: var(--paper);
  border: 1px solid var(--ink);
  top: -4.5px;
}
.manual .workflow li:last-child::after {
  background: var(--ink-green);
  border-color: var(--ink-green);
  box-shadow: 0 0 0 4px #2c6e5121;
}
.manual .step-number {
  color: var(--ink-3);
  padding-top: 5px;
}
.manual .workflow h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.manual .workflow p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 300px;
}

/* Gallery: the extension screenshots as mounted plates. */
.manual .gallery-intro h2 {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.08;
}
.manual .gallery-intro > .extension-logo {
  background: var(--ink);
  color: var(--paper-light);
}
.manual .gallery-intro p:last-child {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 300px;
}
.manual .screenshot-card {
  background: var(--paper-light);
  border-color: #1c315040;
  color: var(--ink);
  box-shadow: 0 24px 50px -36px #1c315080;
}
.manual .screenshot-card:hover {
  border-color: var(--ink);
}
.manual .screenshot-title {
  font-size: 12px;
  border-bottom-color: var(--line);
}

/* FAQ in ink. */
.manual .faq-section > div > p:last-child {
  font-size: 17px;
  font-style: italic;
  color: var(--ink-2);
}
.manual .faq-list summary {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}
.manual .faq-list summary > span {
  color: var(--ink-2);
}
.manual .faq-list details p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 620px;
}
.manual .faq-list details a {
  color: var(--ink);
}

/* Closing: the gauge printed as a dial, with a vermilion needle. */
.manual .closing-section {
  background: transparent;
  border-top: 1px solid var(--line);
}
.manual .gauge-minor {
  stroke: var(--ink);
  stroke-opacity: 0.35;
}
.manual .gauge-major {
  stroke: var(--ink);
  stroke-opacity: 0.9;
}
.manual .gauge-range {
  stroke: var(--ink);
  opacity: 0.12;
}
.manual .gauge-trail {
  stroke: var(--ink-green);
  filter: none;
}
.manual .gauge-needle {
  fill: #b8432c;
  filter: none;
}
.manual .closing-content h2 {
  font-size: clamp(38px, 4.4vw, 58px);
}
.manual .closing-content > p {
  font-size: 18px;
  font-style: italic;
  color: var(--ink-2);
}
.manual .button-light {
  background: var(--ink);
  color: var(--paper-light);
}
.manual .button-light:hover {
  background: #10223d;
}
.manual .closing-note {
  font-size: 13px;
  color: var(--ink-3);
}

/* The extension inside the demo, printed in the same ink: a quiet header,
   ink tabs, and chat messages with clear voices for you and the assistant. */
.manual .extension-preview {
  --tint: var(--paper-tint);
  --rule-soft: #1c31501f;
  background: var(--panel);
  border-left-color: var(--rule-soft);
}
.manual .extension-header {
  padding: 18px 22px 16px;
}
.manual .extension-logo {
  background: var(--tint);
  border: 1px solid var(--rule-soft);
}
.manual .extension-header strong {
  font-size: 13.5px;
  letter-spacing: -0.2px;
}
.manual .extension-header > div > span {
  font-size: 10px;
  color: var(--ink-3);
}
.manual .ai-badge {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: transparent;
  border-color: #1c315059;
  padding: 4px 6px;
}
.manual .demo-tabs {
  border-color: var(--rule-soft);
}
.manual .demo-tabs button {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  min-height: 48px;
  transition: color 160ms ease;
}
/* Tab icons: one outline set at the labels' weight. The selected tab's icon
   takes a soft ink fill, so the state reads without relying on color alone. */
.manual .demo-tabs button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  transition: --icon-tint 160ms ease;
}
.manual .demo-tabs button[aria-selected="true"] {
  color: var(--ink);
}
.manual .demo-tabs button[aria-selected="true"] svg {
  --icon-tint: 0.16;
}
.manual .demo-tabs button:hover {
  background: transparent;
  color: var(--ink);
}
.manual.js .demo-tabs::after {
  background: var(--ink);
}
html.manual:not(.js) .demo-tabs button[aria-selected="true"] {
  border-color: var(--ink);
}

/* Every tab shares one height, so switching tabs never moves the page. */
.manual .demo-panel {
  min-height: 512px;
}
.manual #panel-chat {
  height: 512px;
  min-height: 512px;
}

/* Analysis */
.manual .report-kicker {
  color: var(--ink-2);
}
.manual .good-badge {
  color: var(--ink-green);
  background: #e5eee7;
  border-color: #2c6e5133;
}
.manual .demo-panel h3 {
  color: var(--ink);
  font-size: 22px;
}
.manual .report-summary {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}
.manual .price-estimate {
  background: var(--tint);
  border-color: var(--rule-soft);
}
.manual .price-estimate > div > span,
.manual .price-labels span {
  color: var(--ink-3);
}
.manual .price-estimate strong {
  color: var(--ink);
}
.manual .price-estimate strong span {
  color: var(--ink-3);
}
.manual .price-meter i {
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--tint);
}
.manual .insight-line p {
  color: var(--ink-2);
}
.manual .next-question {
  background: transparent;
  border-color: #1c315059;
  color: var(--ink);
  border-radius: 999px;
  padding-inline: 16px;
  font-size: 12px;
  transition:
    background 160ms ease,
    color 160ms ease;
}
.manual .demo-disclaimer {
  background: transparent;
  border-top-color: var(--rule-soft);
  color: var(--ink-3);
}
.manual .demo-disclaimer .tiny-dot {
  background: var(--ink-green);
}

/* Ask AI */
.manual .chat-context {
  border-bottom-color: var(--rule-soft);
  color: var(--ink);
  font-size: 11.5px;
  min-height: 46px;
}
.manual .context-dot {
  background: var(--ink-green);
  box-shadow: 0 0 0 3px #2c6e5121;
}
.manual .context-price {
  color: var(--ink-3);
  font-weight: 500;
}
.manual .chat-reset {
  color: var(--ink-3);
}
.manual .chat-thread {
  scrollbar-color: #1c315033 transparent;
  padding-top: 18px;
}
.manual .chat-message {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}
.manual .chat-message + .chat-message {
  margin-top: 14px;
}
.manual .chat-user {
  max-width: 82%;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--paper-light);
  border-radius: 16px 16px 4px 16px;
}
.manual .chat-assistant {
  gap: 10px;
  max-width: 94%;
}
.manual .chat-avatar {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-color: var(--rule-soft);
  background: #fff;
}
.manual .chat-message-content {
  background: var(--tint);
  border: 1px solid var(--rule-soft);
  border-radius: 4px 16px 16px 16px;
  padding: 9px 14px 11px;
}
.manual .chat-author {
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
}
.manual .chat-message strong {
  color: var(--ink);
}
.manual .chat-typing i {
  background: var(--ink-3);
}
.manual .suggested-questions {
  gap: 8px;
}
.manual .suggested-questions button {
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-color: #1c315047;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
}
.manual .suggested-questions button > span {
  color: var(--ink-3);
}
.manual .chat-composer {
  border-color: #1c315038;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.manual .chat-composer:focus-within {
  border-color: var(--ink);
  outline-color: #1c315026;
}
.manual .chat-composer textarea {
  color: var(--ink);
  font-size: 13px;
}
.manual .chat-composer textarea::placeholder {
  color: var(--ink-3);
}
.manual .chat-send {
  background: var(--ink);
  color: var(--paper-light);
}
.manual .chat-send:disabled {
  background: var(--paper-deep);
  color: #9aa3b1;
}
.manual .chat-demo-note {
  color: var(--ink-3);
  font-size: 10px;
}

/* Repairs and Safety */
.manual .repair-estimate {
  background: var(--tint);
  border-color: var(--rule-soft);
}
.manual .repair-title {
  border-bottom-color: var(--rule-soft);
}
.manual .repair-title > span,
.manual .panel-footnote {
  color: var(--ink-3);
}
.manual .repair-row {
  color: var(--ink-2);
}
.manual .repair-row strong,
.manual .repair-total {
  color: var(--ink);
}
.manual .repair-total {
  border-top-color: var(--rule-soft);
}
.manual .safety-item {
  border-bottom-color: var(--rule-soft);
}
.manual .safety-item > svg {
  color: var(--ink);
}
.manual .safety-item p {
  color: var(--ink-2);
}
.manual .listing-type,
.manual .listing-topline,
.manual .listing-details p,
.manual .asking-price > span,
.manual .listing-bottom {
  color: var(--ink-3);
}
@media (hover: hover) and (pointer: fine) {
  .manual .next-question:hover,
  .manual .suggested-questions button:hover:not(:disabled) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper-light);
  }
  .manual .suggested-questions button:hover:not(:disabled) > span {
    color: inherit;
  }
  .manual .chat-reset:hover {
    color: var(--ink);
    background: var(--tint);
  }
  .manual .chat-send:hover:not(:disabled) {
    background: #10223d;
  }
}

/* Denser demo panel: tabs as switch tiles with a lit tile that slides to the
   active tab, a deal gauge in Analysis, and tiles for Repairs and Safety. */
.manual .extension-header {
  padding: 16px 18px 10px;
}
.manual .demo-tabs {
  --tab-gap: 4px;
  gap: var(--tab-gap);
  margin: 4px 14px 2px;
  padding: 4px;
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  background: var(--tint);
}
.manual .demo-tabs button {
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 6px;
  min-height: 62px;
  padding: 8px 4px;
  border: 0;
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.manual .demo-tabs button svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}
.manual .demo-tabs button[aria-selected="true"],
.manual .demo-tabs button[aria-selected="true"]:hover {
  color: var(--paper-light);
}
.manual .demo-tabs button[aria-selected="true"] svg {
  --icon-tint: 0.22;
}
html.manual:not(.js) .demo-tabs button[aria-selected="true"] {
  background: var(--ink);
}
.manual.js .demo-tabs::after {
  top: 4px;
  bottom: 4px;
  left: 4px;
  height: auto;
  width: calc((100% - 8px - 3 * var(--tab-gap)) / 4);
  border-radius: 10px;
  background: var(--ink);
  box-shadow: 0 8px 18px -10px #1c3150b3;
  z-index: 0;
}
.manual .demo-tabs:has(#tab-chat[aria-selected="true"])::after {
  transform: translateX(calc(100% + var(--tab-gap)));
}
.manual .demo-tabs:has(#tab-repairs[aria-selected="true"])::after {
  transform: translateX(calc(200% + 2 * var(--tab-gap)));
}
.manual .demo-tabs:has(#tab-safety[aria-selected="true"])::after {
  transform: translateX(calc(300% + 3 * var(--tab-gap)));
}
.manual .demo-panel {
  padding-top: 18px;
}

/* Deal gauge: the needle marks where the asking price sits in the range. */
.manual .price-estimate {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px 18px 12px 14px;
  border-radius: 12px;
}
.deal-gauge {
  width: 150px;
  height: auto;
  overflow: visible;
}
.deal-ticks {
  stroke: var(--ink-3);
  stroke-width: 6;
  stroke-dasharray: 0.7 9.3;
  stroke-dashoffset: 0.35;
  stroke-linecap: butt;
}
.deal-band {
  stroke: url(#deal-range);
  stroke-width: 9;
  stroke-linecap: round;
}
.deal-needle {
  fill: #b8432c;
  stroke: none;
  transform-box: view-box;
  transform-origin: 80px 86px;
  transform: rotate(19.8deg);
}
.deal-hub {
  fill: var(--ink);
  stroke: var(--tint);
  stroke-width: 3;
}
.deal-end {
  fill: var(--ink-3);
  stroke: none;
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-anchor: middle;
  text-transform: uppercase;
}
.manual .price-estimate strong {
  font-size: 23px;
  margin-top: 6px;
}
.deal-asking {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.deal-asking i {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: #b8432c;
  flex-shrink: 0;
}
.is-scanning .deal-needle {
  animation: deal-sweep 1500ms cubic-bezier(0.3, 1.35, 0.5, 1) 1100ms both;
}
@keyframes deal-sweep {
  from {
    transform: rotate(-90deg);
  }
}

/* Repairs: the total leads, and a split bar shows parts against labor. */
.manual .repair-estimate {
  border-radius: 12px;
  padding: 16px 18px;
}
.repair-figure {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
}
.repair-figure span {
  font-size: 11px;
  color: var(--ink-2);
}
.repair-figure strong {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.repair-split {
  display: flex;
  gap: 3px;
  height: 10px;
  margin: 14px 0 6px;
  border-radius: 5px;
  overflow: hidden;
}
.repair-split i:first-child {
  flex: 0 0 56%;
  background: var(--ink);
}
.repair-split i:last-child {
  flex: 1;
  background: #b9bfc8;
}
.manual .repair-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.repair-key {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--ink);
}
.repair-key-labor {
  background: #b9bfc8;
}

/* Safety: two tiles, each marked with its source. */
.safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.manual .safety-item {
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  background: var(--tint);
}
.manual .safety-item > svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
}
.manual .safety-item strong {
  font-size: 13px;
}
.manual .safety-item p {
  font-size: 12px;
  line-height: 1.55;
}
.safety-source {
  margin-top: auto;
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vin-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px dashed #1c315047;
  border-radius: 12px;
}
.vin-plate {
  flex-shrink: 0;
  padding: 4px 6px 3px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper-light);
  font-family: var(--display);
  font-stretch: 125%;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.vin-callout p {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.vin-callout strong {
  color: var(--ink);
}
.vin-callout a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The panel's own width decides the layout, since it changes with the
   workspace grid rather than the viewport. */
.manual .demo-panel {
  container-type: inline-size;
}
@container (max-width: 420px) {
  .manual .price-estimate {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .deal-asking {
    justify-content: center;
  }
}
@container (max-width: 300px) {
  .safety-grid {
    grid-template-columns: 1fr;
  }
}

/* Enlarged screenshot dialog. */
.manual .screenshot-dialog {
  background: var(--paper-light);
  border-color: var(--ink);
  color: var(--ink);
}
.manual .screenshot-dialog::backdrop {
  background: #1c315073;
}
.manual .dialog-heading {
  background: var(--paper-light);
}
.manual .dialog-heading p {
  color: var(--ink-2);
}
.manual .dialog-close {
  background: var(--paper);
  border-color: #1c315059;
  color: var(--ink);
}

@media (min-width: 1500px) {
  .hero-plate {
    margin-right: calc((min(1280px, 100vw - 120px) - 100vw) / 2);
  }
}
@media (max-width: 1100px) {
  .hero-plate {
    margin-right: -24px;
  }
  .manual .feature-story h3 {
    font-size: 28px;
  }
}
@media (max-width: 900px) {
  .manual .hero-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-plate {
    margin-inline: -24px;
  }
}
@media (max-width: 760px) {
  .manual .section-heading h2,
  .manual .gallery-intro h2,
  .manual .faq-section h2,
  .manual .closing-content h2,
  .spec-copy h2,
  .hood-closing h2 {
    font-size: min(44px, 10.5vw);
  }
  .manual .gallery-intro h2 {
    font-size: min(34px, 8.4vw);
  }
  .manual .hero {
    padding-top: 36px;
  }
  .hero-plate {
    margin-inline: -18px;
  }
  .manual .hero-intro > p:first-child {
    font-size: 17px;
  }
  .manual .feature-story h3 {
    font-size: 27px;
  }
  .manual .cost-amount {
    font-size: 52px;
  }
  .manual .faq-list summary {
    font-size: 17.5px;
  }
  .manual .demo-panel {
    min-height: 604px;
  }
  .manual #panel-chat {
    height: 604px;
    min-height: 604px;
  }
}