/* Homepage presentation only. Shared guides and information pages use site.css. */
body.home-page .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding-block: 16px;
  align-items: center;
}
body.home-page .hero-copy { padding-block: 0; }
body.home-page .hero h1 {
  font-size: clamp(76px, 7.8vw, 112px);
  line-height: .98;
  letter-spacing: -.075em;
  margin-bottom: 12px;
}
body.home-page .hero-copy > .hero-description {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 16px;
}
body.home-page .app-hero-art {
  --hero-panel-height: 600px;
  height: var(--hero-panel-height);
  margin-top: 0;
  align-self: center;
  min-height: 0;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.home-page .figma-hero-phone {
  width: calc((var(--hero-panel-height) - 56px - 16px) * 1125 / 2436 + 16px);
  height: auto;
  display: block;
  border-width: 6px;
  border-radius: 38px;
  box-shadow: none;
  max-width: 88%;
  position: relative;
  transform: none;
  inset: auto;
}
body.home-page .hero-benefits { max-width: none; gap: 12px 20px; margin-bottom: 16px; }
body.home-page .hero-downloads { padding-block: 0; margin-bottom: 8px; }
body.home-page .hero-copy > .hero-purchase-note { margin-bottom: 8px; }
body.home-page .iphone-design-frame img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: auto 375 / 812;
  object-fit: contain;
  transform: none;
}
body.home-page .figma-hero-phone img { aspect-ratio: auto 375 / 812; height: auto; }
body.home-page .color-ribbon { height: 12px; }
/* Adjacent48px section boundaries produce96px between major content groups. */
body.home-page .section { padding-block: 48px; }
body.home-page .section-heading,
body.home-page .app-story-section > .section-heading { margin-bottom: 48px; }
body.home-page .app-story-section > .visual-info { margin: 24px 0 0; }
body.home-page .playground-section > .section-top { margin-bottom: 18px; }
body.home-page .download-intro { font-size: 20px; line-height: 1.4; margin: 0 0 24px; }
/* Verified sRGB samples from the unchanged camera photograph; provenance in footer-photo-samples.json. */
body.home-page .download-symbol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: auto;
  align-self: center;
  transform: none;
}
body.home-page .download-section { padding-block: 48px; }
body.home-page .download-section { padding-block: 64px; }
body.home-page .download-grid {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: repeat(4, auto);
  gap: 24px 48px;
  align-items: start;
  padding-top: 0;
}
body.home-page .download-grid > div:first-child { display: contents; }
body.home-page .download-grid .download-intro { grid-column: 1; grid-row: 1; }
body.home-page .download-grid h2 { grid-column: 1; grid-row: 2; }
body.home-page .download-grid .store-buttons { grid-column: 1; grid-row: 3; }
body.home-page .download-grid .download-fine { grid-column: 1; grid-row: 4; }
body.home-page .download-grid h2 { font-size: 48px; line-height: 1.02; margin: 0; }
body.home-page .download-grid .download-intro { font-size: 16px; line-height: 24px; margin: 0; }
body.home-page .download-grid .store-buttons { padding: 0; margin: 0; }
body.home-page .download-grid .download-fine { font-size: 13px; line-height: 20px; margin: 0; }
body.home-page .download-grid .download-symbol {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: stretch;
  margin-top: 0;
}
body.home-page h2 { letter-spacing: -.035em; }
body.home-page .app-screen-note {
  margin: 24px 0;
  padding-block: 20px;
  border-block: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
body.home-page .app-screen-note h4 { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
body.home-page .app-screen-note p { margin: 0; max-width: 1000px; }
body.home-page .app-screen-note .app-screen-sources { margin-top: 8px; }
/* The supplied partner content forms one compact row immediately below. */
body.home-page .app-story-section > .ral-partner {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 48px;
  padding: 0;
  margin: 40px 0 0;
}
body.home-page .app-story-section > .ral-partner .ral-logo-panel {
  min-height: 0;
  padding: 12px;
}
body.home-page .app-story-section > .ral-partner h2 { margin-bottom: 12px; }
body.home-page .app-story-section { padding-bottom: 40px; }
body.home-page .app-story-section > .ral-partner p { margin-bottom: 8px; }
/* Keep all nineteen questions in source order across the full-width grid. */
body.home-page .seo-faq { display: block; padding-inline: var(--gutter); }
body.home-page .seo-faq .section-heading { margin-bottom: 48px; }
body.home-page .seo-faq h2 { font-size: 48px; line-height: 1.08; }
body.home-page .seo-faq .faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  min-width: 0;
  max-width: none;
  border: 0;
}
body.home-page .seo-faq .faq-list details { min-width: 0; border-color: #d9dad2; }
body.home-page .seo-faq .faq-list summary {
  font-size: 16px;
  line-height: 24px;
  min-height: 56px;
  gap: 20px;
  padding-block: 16px;
}

body.home-page .ral-logo-panel img {
  display: block;
  width: 113px;
  height: 120px;
  object-fit: contain;
  opacity: 1;
}
/* Existing semantic steps and guide links form compact, unfilled directories. */
body.home-page .how-steps { counter-reset: home-step; }
body.home-page .how-visual li {
  counter-increment: home-step;
  position: relative;
  border-top: 0;
}
body.home-page .how-visual li::before {
  content: counter(home-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--muted);
}
body.home-page .how-visual li > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 20px 0 20px 36px;
  background: transparent;
}
body.home-page .how-visual .home-card-icon { width: 24px; height: 24px; }
body.home-page .how-visual h3 { font-size: 24px; flex: 1; margin: 0; }
body.home-page .how-visual a > span { position: static; font-size: 20px; }
body.home-page .seo-guides .guide-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
body.home-page .seo-guides .guide-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
body.home-page .seo-guides .guide-card .home-card-icon { width: 24px; height: 24px; }
body.home-page .seo-guides .guide-card h3 { flex: 1; font-size: 20px; line-height: 1.3; margin: 0; }
/* RAL,How and Guides share one48px heading system and80px content boundaries. */
body.home-page .app-story-section > .ral-partner h2,
body.home-page .how-section h2,
body.home-page .seo-guides h2 { font-size: 48px; line-height: 1.08; }
body.home-page .how-section,
body.home-page .seo-guides,
body.home-page .seo-faq { padding-block: 40px; }
body.home-page .how-section .section-heading,
body.home-page .seo-guides .section-heading,
body.home-page .seo-faq .section-heading { margin-bottom: 32px; }
body.home-page .how-section .section-heading,
body.home-page .seo-guides .section-heading { margin-bottom: 32px; }
body.home-page .how-visual li > a { min-height: 64px; padding-block: 12px; }
/* At1440px the512px hero panel makes the natural576px device54%ofitswidth. */
@media (min-width: 1200px) {
  body.home-page .hero-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 1050px) {
  body.home-page .hero-grid { gap: 32px; }
  body.home-page .hero h1 { font-size: clamp(64px, 8vw, 84px); }
  body.home-page .app-hero-art { --hero-panel-height: 600px; }
}
@media (max-width: 760px) {
  body.home-page .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 32px; }
  body.home-page .hero-copy { padding: 0; }
  body.home-page .hero h1 { font-size: clamp(64px, 16vw, 90px); }
  body.home-page .hero-copy > .hero-description { font-size: 18px; }
  body.home-page .hero-benefits { display: flex; }
  body.home-page .app-hero-art { --hero-panel-height: 560px; margin-top: 0; }
  body.home-page .section { padding-block: 24px; }
  body.home-page .section-heading,
  body.home-page .app-story-section > .section-heading,
  body.home-page .how-section .section-heading,
  body.home-page .seo-guides .section-heading,
  body.home-page .seo-faq .section-heading { margin-bottom: 24px; }
  body.home-page .download-section { padding-block: 24px; }
  body.home-page .app-story-section > .ral-partner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.home-page .seo-faq .faq-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  body.home-page .how-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.home-page .seo-guides .guide-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.home-page .seo-guides .guide-card-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body.home-page .download-symbol { max-width: 100%; height: 120px; justify-self: start; }
}
@media (max-width: 760px) {
  body.home-page .seo-faq { padding-inline: var(--gutter); }
}
@media (max-width: 760px) {
  body.home-page .download-section { padding-block: 32px; }
  body.home-page .download-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 24px; }
  body.home-page .download-grid :is(.download-intro, h2, .store-buttons, .download-fine, .download-symbol) { grid-column: 1; grid-row: auto; }
  body.home-page .download-grid .download-symbol { height: 120px; margin-top: 0; }
}
/* Tool actions are controls, while destination links retain their arrow cues. */
body.home-page .edit-mark { display: none; }
body.home-page .convert-submit { flex-basis: 76px; font-size: 14px; font-weight: 600; }
body.home-page :is(.meta, .tag, .fine-print, .field-hint, .field-error, .field, .copy-button, .photo-instruction, .playground-footnote) { font-size: 12px; }
body.home-page :is(.feature-index .tag, .section-top .tag, .tool-tabs [role="tab"] > .meta, .palette-swatch .meta, .palette-swatch .swatch-code, .saved-count, .photo-stage .photo-instruction, .photo-selection .meta, .photo-toolbar .text-link, .footer-bottom) { font-size: 12px; }
body.home-page .tool-tabs [role="tab"] { white-space: normal; overflow-wrap: anywhere; }
body.home-page .value-row { gap: 12px; }
body.home-page .value-row output { min-width: 0; overflow-wrap: anywhere; }
body.home-page .value-row .copy-button { flex-shrink: 0; }
body.home-page #playground .section-top .tag,
body.home-page #photo-swatch > .meta,
body.home-page #photo-instruction {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  padding: 0;
  background: transparent;
}
body.home-page #photo-instruction {
  padding: 12px 0;
  background: var(--paper);
  color: var(--muted);
  text-transform: lowercase;
}
body.home-page #photo-instruction::first-letter { text-transform: uppercase; }
/* Existing SEO markup forms a contained band without changing its renderer. */
body.home-page .how-section {
  position: relative;
  isolation: isolate;
  margin-block: 40px;
  padding: 32px var(--gutter);
}
body.home-page .how-section::before { content: ""; position: absolute; inset: 0 var(--gutter); background: transparent; border-block: 1px solid var(--line); z-index: -1; }
body.home-page .how-section .section-heading { margin-bottom: 48px; }
body.home-page .seo-guides .section-heading,
body.home-page .seo-faq .section-heading { margin-bottom: 40px; }
body.home-page .how-visual li::before { font-size: 28px; line-height: 1; }
body.home-page .how-visual li > a { min-height: 64px; padding-left: 48px; }
body.home-page .how-visual h3 { min-width: 0; font-size: 20px; }
body.home-page .how-visual a > span { flex: none; }
@media (max-width: 760px) {
  body.home-page .how-section { padding: 24px var(--gutter); }
  body.home-page .how-section .section-heading,
  body.home-page .seo-guides .section-heading,
  body.home-page .seo-faq .section-heading { margin-bottom: 24px; }
  body.home-page .how-visual li > a { padding-left: 48px; }
  body.home-page .how-visual h3 { font-size: 20px; }
}
@media (max-width: 360px) {
  body.home-page .app-hero-art { --hero-panel-height: 512px; }
}
/* Topic headings remain open; only each existing answer has a disclosure. */
body.home-page .seo-faq .faq-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
body.home-page .seo-faq .faq-group { min-width: 0; }
body.home-page .seo-faq .faq-group h3 { margin: 0 0 23px; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
body.home-page .seo-faq .faq-list { display: block; }
body.home-page .seo-faq .faq-list summary { display: block; position: relative; min-height: 64px; padding: 20px 40px 20px 0; font-size: 18px; line-height: 24px; }


body.home-page .seo-faq .faq-answer { padding-right: 0; }
@media (max-width: 1100px) {
  body.home-page .seo-faq .faq-groups { grid-template-columns: minmax(0, 1fr); }
}

/* Tool typography and flow apply to all three real runtime panels. */
body.home-page #playground :is(.value-row output, .swatch-code, #color-input, #sample-hex, #photo-hex, .photo-image-code) {
  font-family: "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}
body.home-page #playground :is(button, .upload-label) { font-size: 14px; font-weight: 600; }
body.home-page #playground :is(.meta, .fine-print, .field-hint, .field-error, .field, .photo-instruction, .palette-base, .scheme-label, .sample-edit, .photo-file-note, .saved-count, .saved-row small, .playground-footnote) { font-size: 13px; }
body.home-page #playground :is(.field input, .field select, .scheme-label select, .save-controls input) { font-size: 16px; }
body.home-page #playground .value-row { min-height: 56px; padding-block: 10px; }
body.home-page #playground :is(.photo-workspace, .converter-grid) { align-items: start; }
body.home-page #playground .palette-swatch .swatch-code { writing-mode: horizontal-tb; white-space: nowrap; }
body.home-page #playground .palette-toolbar { flex-wrap: wrap; font-size: 13px; }
body.home-page #playground .input-row { flex-wrap: wrap; }
body.home-page #playground .palette-swatch { min-height: 180px; }
/*32px adjoining boundaries create64px visible separation, without duplicate margins. */
body.home-page :is(.how-section, .seo-guides, .seo-faq) { margin-block: 0; padding-block: 32px; }
body.home-page :is(.how-section, .seo-guides, .seo-faq) .section-heading { margin-bottom: 32px; }
body.home-page .seo-guides .guide-card { min-height: 72px; padding-block: 12px; }
body.home-page .seo-guides .guide-card h3 { position: relative; padding-right: 32px; }
body.home-page .seo-guides .guide-card h3 > span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 760px) {
  body.home-page #playground .palette-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home-page #playground .palette-swatch { padding: 16px 12px; min-height: 150px; }
  body.home-page #playground .save-controls { flex-wrap: wrap; }
  body.home-page #playground .save-controls input { flex-basis: 160px; }
  body.home-page #playground .convert-submit { min-height: 48px; }
}

/* Supporting headings wrap naturally; the hero retains its dominant scale. */
body.home-page :is(#playground-title, #app-title, .seo-guides h2, .seo-faq h2) { font-size: 48px; line-height: 1.05; }
body.home-page :is(.playground-section, .app-story-section) > .section-heading { margin-bottom: 32px; }
/* Readable source-derived specimen, vertically centered with the full CTA copy. */
body.home-page .download-grid { grid-template-rows: auto; align-items: center; }
body.home-page .download-grid > div:first-child { display: block; }
body.home-page .download-grid .download-intro,
body.home-page .download-grid h2,
body.home-page .download-grid .store-buttons { margin: 0 0 24px; }
body.home-page .download-grid .download-fine { margin: 0; }
body.home-page .download-grid .download-symbol {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  max-width: 480px;
  margin: 0;
  height: auto;
  gap: 4px;
}
body.home-page .download-symbol .footer-color { display: grid; grid-template-rows: 64px 20px; gap: 8px; min-width: 0; background: transparent; border-radius: 0; transform: none; }
body.home-page .download-symbol .footer-color i { background: var(--sample-color); border-radius: 0; }
body.home-page .download-symbol code { font: 12px/20px "Courier New", monospace; letter-spacing: -.2px; white-space: nowrap; }
@media (max-width: 760px) {
  body.home-page .download-grid .download-symbol { grid-column: 1; grid-row: auto; justify-self: start; height: auto; }
  body.home-page :is(#playground-title, #app-title, .seo-guides h2, .seo-faq h2) { font-size: 44px; }
}
@media (min-width: 1200px) {
  body.home-page .hero-grid { grid-template-columns: minmax(0, 1fr) 464px; gap: 80px; }
  body.home-page .app-hero-art { --hero-panel-height: 650px; width: 464px; justify-self: end; }
  body.home-page .figma-hero-phone { width: 280px; }
}
/* Only the process list receives tint; Guides and the rest of the section remain paper. */
body.home-page .how-section .how-steps { background: #f5edc8; padding: 12px 20px; gap: 24px; }
body.home-page .how-section::before { border: 0; }
body.home-page .seo-faq { border-top: 1px solid var(--line); }
body.home-page .seo-faq .faq-groups { gap: 32px; }
body.home-page .seo-faq .faq-list summary { padding: 20px 40px 20px 0; }
@media (max-width: 760px) {
  body.home-page .how-section .how-steps { padding: 12px 16px; gap: 0; }
}
/* Category headings and individual questions remain simultaneously discoverable. */
body.home-page .seo-faq .faq-groups { column-gap: 20px; }
body.home-page .seo-faq .faq-group h3 { font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: .03em; }
body.home-page .seo-faq .faq-list summary { font-size: 16px; line-height: 1.45; padding: 20px 40px 20px 0; }
/* The real canvas owns the marker coordinate system inside an uncropped fit frame. */
body.home-page .photo-fit-frame { height: 360px; width: 100%; background: #e7e6df; display: flex; align-items: center; justify-content: center; }
body.home-page #photo-stage { display: inline-flex; flex: none; flex-direction: column; width: fit-content; height: fit-content; max-width: 100%; min-height: 0; position: relative; align-items: center; justify-content: center; overflow: visible; background: transparent; }
body.home-page #photo-canvas,
body.home-page #photo-placeholder { display: block; width: auto; height: auto; max-width: 100%; max-height: 360px; object-fit: contain; }
body.home-page .photo-main-frame { height: 360px; display: grid; grid-template-rows: auto 100px minmax(168px, 1fr); gap: 16px; }
body.home-page .photo-main-frame .photo-panel-heading { margin: 0; }
body.home-page .photo-main-frame #photo-swatch { height: 100px; min-height: 0; }
body.home-page .photo-main-frame .photo-values { margin: 0; display: grid; grid-template-rows: repeat(3, minmax(56px, 1fr)); }
body.home-page #playground .photo-main-frame .value-row { padding-block: 10px; }
body.home-page .photo-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 12px; }
body.home-page .photo-toolbar .upload-label { min-width: 0; padding: 12px 16px; }
body.home-page #reset-photo { min-width: 0; white-space: normal; }
body.home-page #use-photo-color { margin-top: 16px; }
@media (max-width: 760px) {
  body.home-page .photo-main-frame { height: auto; min-height: 360px; }
}
/* Intrinsic source geometry fills the default column; uploaded portraits shrinkwrap without rails. */
body.home-page #photo-picker .photo-workspace { gap: 30px; }
body.home-page .photo-fit-frame { width: fit-content; max-width: 100%; height: auto; background: transparent; display: block; }
body.home-page #photo-stage { width: fit-content; max-width: 100%; height: auto; display: block; }
body.home-page #photo-canvas,
body.home-page #photo-placeholder { width: auto; height: auto; max-width: 100%; max-height: 640px; }
body.home-page .photo-main-frame { display: block; height: auto; min-height: 0; }
body.home-page #photo-picker .tool-panel-intro,
body.home-page .photo-main-frame .photo-panel-heading { margin-bottom: 23px; }
body.home-page #photo-picker .tool-panel-intro h3,
body.home-page .photo-panel-heading h3 { font-size: 20px; line-height: 26px; font-weight: 500; margin: 0; }
body.home-page .photo-main-frame .photo-values { margin-top: 17px; display: block; }
/* Compact original partner artwork and centered copy retain their existing words and destination. */
body.home-page .app-story-section > .ral-partner { grid-template-columns: 112px minmax(0, 1fr); gap: 32px; padding-block: 24px; align-items: center; }
body.home-page .app-story-section > .ral-partner .ral-logo-panel { width: 112px; height: 112px; padding: 0; }
body.home-page .app-story-section > .ral-partner .ral-logo-panel img { width: 112px; height: 112px; object-fit: contain; }
body.home-page .app-story-section > .ral-partner h2 { font-size: 36px; line-height: 1.05; }
@media (max-width: 760px) {
  body.home-page .app-story-section > .ral-partner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.home-page .app-story-section > .ral-partner h2 { font-size: 32px; }
}
body.home-page .feature-story:has(.material-paint) { --feature-material: url('materials/paint.jpg'); --feature-tint: #f1eee8; }
body.home-page .feature-story:has(.material-photo-paper) { --feature-material: url('materials/photo-paper.jpg'); --feature-tint: #eeeee8; }
body.home-page .feature-story:has(.material-print-paper) { --feature-material: url('materials/print-paper.jpg'); --feature-tint: #eeedf0; }
body.home-page .feature-story:has(.material-fabric) { --feature-material: url('materials/fabric.jpg'); --feature-tint: #edf0e8; }
body.home-page .feature-story:has(.material-cardboard) { --feature-material: url('materials/cardboard.jpg'); --feature-tint: #f1eee5; }
/* Existing lower-section rhythm remains64px; its supporting hierarchy is quieter. */
body.home-page #how-it-works h2,
body.home-page #guides h2,
body.home-page #faq h2 { font-size: 40px; line-height: 1.05; }
body.home-page .how-visual h3,
body.home-page .seo-guides .guide-card h3 { font-size: 18px; line-height: 24px; }

/* All original accuracy copy and partner content share one compact support boundary. */
body.home-page .app-support { margin-top: 24px; border-top: 1px solid var(--line); }
body.home-page .app-support .app-screen-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin: 0; padding: 16px 0; border: 0; }
body.home-page .app-support .app-screen-note h4 { grid-column: 1 / -1; margin: 0; }
body.home-page .app-support .app-screen-note p { margin: 0; }
body.home-page .app-support .ral-partner { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 32px; align-items: center; min-height: 0; margin: 0; padding: 16px 0; border: 0; }
body.home-page .app-support .ral-logo-panel { width: 112px; height: 112px; min-height: 0; padding: 0; }
body.home-page .app-support .ral-logo-panel img { width: 112px; height: 112px; object-fit: contain; }
body.home-page .app-support .ral-partner-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
body.home-page .app-support .ral-partner h2 { font-size: 36px; line-height: 1.05; margin: 0 0 8px; }
body.home-page .app-support .ral-partner p { font-size: 20px; line-height: 24px; margin: 0 0 4px; }
body.home-page .app-support .ral-partner .text-link { min-height: 44px; }
@media (max-width: 760px) {
  body.home-page .app-support .app-screen-note { grid-template-columns: minmax(0, 1fr); }
  body.home-page .app-support .ral-partner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.home-page .app-support .ral-partner h2 { font-size: 32px; }
}
body.home-page .figma-hero-phone { border-width: calc(6px * 280 / 220); border-radius: calc(38px * 280 / 220); box-shadow: none; }
/* Measurable wrapping question and fixed plus slots retain the native summary interaction. */
body.home-page .seo-faq .faq-list summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; column-gap: 20px; min-height: 72px; padding: 24px 0; font-size: 16px; line-height: 24px; }
body.home-page .seo-faq .faq-question { font: inherit; letter-spacing: inherit; display: block; min-width: 0; position: static; margin: 0; padding: 0; width: auto; transform: none; }
body.home-page .seo-faq .faq-toggle { display: flex; align-items: center; justify-content: center; position: static; width: 24px; height: 24px; margin: 0; padding: 0; transform: none; font-size: 26px; }
body.home-page .seo-faq .faq-symbol { display: inline-block; line-height: 24px; }
body.home-page .seo-faq details[open] .faq-symbol { transform: rotate(45deg); }

/* Native photo and result stack use the same top datum, with natural mobile growth. */
body.home-page #photo-picker .photo-workspace { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 30px; }
body.home-page .photo-main-frame #photo-swatch { height: 168px; min-height: 0; }
body.home-page #playground .photo-main-frame #photo-hex { font-size: 28px; line-height: 34px; }
body.home-page .photo-main-frame .photo-values { margin-top: 16px; }
body.home-page #playground .photo-main-frame .value-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 52px; column-gap: 16px; min-height: 56px; padding-block: 5px; }
body.home-page #playground .photo-main-frame .value-row > .meta { width: 50px; font-size: 14px; }
body.home-page #playground .photo-main-frame .value-row .copy-button { width: 52px; justify-content: flex-end; }
body.home-page #use-photo-color { min-height: 52px; padding: 12px 20px; margin-top: 24px; }
body.home-page #photo-source { min-height: 20px; margin: 16px 0 0; }
body.home-page :is(.app-screen-note p, .feature-caption, #photo-source, .photo-file-note) { font-size: 13px; line-height: 19px; color: var(--muted); }
body.home-page .seo-guides .guide-card h3 { font-size: 18px; line-height: 26px; }
@media (max-width: 760px) {
  body.home-page #photo-picker .photo-workspace { grid-template-columns: minmax(0, 1fr); }
}

/* Source qualifications remain together beneath the complete catalogue. */
body.home-page .app-support { border-top: 0; }
body.home-page .app-support .annotation-strip { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 24px 0; border-top: 1px solid var(--line); }
body.home-page .annotation-strip :is(.accuracy-copy, .source-attribution) { min-width: 0; }
body.home-page #app .annotation-strip h4 { margin: 0 0 8px; font-size: 14px; line-height: 21px; font-weight: 600; }
body.home-page #app .annotation-strip p { margin: 0; font-size: 14px; line-height: 21px; }
body.home-page #app .annotation-strip #compare-screen-caption { margin-top: 8px; }
/* The original partner destination occupies a separate right-hand track. */
body.home-page .app-support .ral-partner { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.home-page .app-support .ral-partner > .text-link { justify-self: end; }
/* Navigation state uses a fixed inset rule without changing control geometry. */
body.home-page #use-photo-color { background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
/* Adjoining lower boundaries total80px, including the native FAQ top rule. */
body.home-page .app-story-section { padding-bottom: 40px; }
body.home-page :is(.how-section, .seo-guides, .seo-faq) { padding-block: 40px; }
body.home-page #faq { padding-top: 39px; }
body.home-page #faq h2 { font-size: 36px; }
body.home-page #faq .faq-group h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
@media (max-width: 760px) {
  body.home-page .app-support .annotation-strip { grid-template-columns: minmax(0, 1fr); }
  body.home-page .app-support .ral-partner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.home-page .app-support .ral-partner > .text-link { justify-self: start; }
}
/* A quiet full-width source note retains every original source sentence. */
body.home-page .app-support .annotation-strip { display: block; padding: 24px 0; border-block: 1px solid var(--line); }
body.home-page #app .annotation-strip h4 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0 0 8px; }
body.home-page #app .annotation-strip .accuracy-copy > p { max-width: 1040px; font-size: 14px; line-height: 21px; margin: 0; }
body.home-page .annotation-strip .source-attribution { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 16px; }
body.home-page #app .annotation-strip .source-attribution > p { font-size: 13px; line-height: 20px; margin: 0; }
@media (max-width: 760px) {
  body.home-page .annotation-strip .source-attribution { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* The existing process links form an open three-step instrument on paper. */
body.home-page .how-section .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; background: transparent; }
body.home-page .how-section .how-visual li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 32px 24px; border: 0; }
body.home-page .how-section .how-visual li + li { border-left: 1px solid var(--line); }
body.home-page .how-section .how-visual li::before { position: static; transform: none; font-size: 32px; line-height: 36px; }
body.home-page .how-section .how-visual li > a { min-height: 44px; min-width: 0; padding: 0; gap: 8px; border: 0; }
body.home-page .how-section .how-visual .home-card-icon { width: 18px; height: 18px; flex: none; }
body.home-page .how-section .how-visual h3 { min-width: 0; font-size: 18px; line-height: 24px; }
body.home-page .how-section .how-visual a > span { flex: none; }
@media (max-width: 760px) {
  body.home-page .how-section .how-steps { grid-template-columns: minmax(0, 1fr); }
  body.home-page .how-section .how-visual li { padding-block: 24px; }
  body.home-page .how-section .how-visual li + li { border-left: 0; border-top: 1px solid var(--line); }
}


/* Editorial catalogue: genuine product evidence, open paper and rules. */
@media (min-width: 768px) and (max-width: 1099px) {
  body.home-page { --gutter: 32px; }
}
@media (max-width: 767px) {
  body.home-page { --gutter: 20px; }
}
/* Functional browser instrument: strong selected state and naturally wrapping values. */
body.home-page #use-photo-color { background: var(--ink); color: #fff; }
body.home-page #playground .value-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) 52px; gap: 16px; min-height: 56px; padding-block: 5px; }
body.home-page #playground .value-row > .meta { width: 50px; font-size: 14px; }
body.home-page #playground .value-row .copy-button { width: 52px; min-height: 44px; justify-content: flex-end; }
body.home-page #playground :is(#photo-picker, #converter) .value-row output { min-width: 0; font: 18px/24px "Courier New", monospace; white-space: normal; overflow-wrap: anywhere; }
body.home-page #playground #palette-swatches .swatch-code { font-size: 18px; line-height: 24px; }

/* Iteration45: common neutral plates frame authentic functional evidence. */
@media (max-width: 767px) {
}

/* Iteration46: honest evidence scale, its own intro flow and compact process rhythm. */
body.home-page #how-it-works .section-heading { margin-bottom: 24px; }
body.home-page #how-it-works { padding-bottom: 32px; }
body.home-page #guides { padding-top: 32px; }
body.home-page .how-section .how-visual li { padding: 24px; column-gap: 20px; }
body.home-page .how-section .how-visual li::before { font-size: 30px; line-height: 32px; }
body.home-page .how-section .how-visual h3 { font-size: 16px; line-height: 22px; }
body.home-page .how-section .how-visual a > span { display: none; }
body.home-page .how-section .how-visual li > a { position: static; }
body.home-page .how-section .how-visual li > a::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 767px) {

  body.home-page #how-it-works { padding-bottom: 24px; }
  body.home-page #guides { padding-top: 24px; }
  body.home-page .how-section .how-steps { grid-template-columns: minmax(0, 1fr); }
  body.home-page .how-section .how-visual li { padding: 20px 16px; }
  body.home-page .how-section .how-visual li + li { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 1099px) {

}

/* Iteration48: image-left Capture panels and the requested FAQ hierarchy only. */
body.home-page .seo-faq .faq-groups { column-gap: 32px; }
body.home-page #faq .faq-group h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
body.home-page .seo-faq .faq-list summary { min-height: 72px; padding-block: 18px; font-size: 16px; line-height: 23px; }
@media (max-width: 767px) {
}

/* New Capture panels follow source order; discard the obsolete mobile vertical-card row. */

/* Iteration49: paired Utility, fixed Capture copy offset and media-first Exploration. */
@media (max-width: 767px) {
}

/* Iteration50: source-aware oversized evidence and quiet transition into the free tool. */
body.home-page #app { padding-bottom: 32px; }
body.home-page #playground { padding-top: 32px; }
body.home-page #playground > .section-top { justify-content: flex-start; border-top: 0; padding-top: 0; margin-bottom: 12px; }
body.home-page #playground > .section-top .tag { font: 500 12px/18px Arial, Helvetica, sans-serif; letter-spacing: normal; text-transform: none; border: 0; padding: 0; }

/* Visible53: complete control evidence, room context and shared natural rows. */
@media (max-width: 1159px) {
}
@media (max-width: 767px) {
}

/* A clean original photograph makes the five measured source samples inspectable. */
body.home-page .download-grid .download-symbol { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 480px; height: auto; gap: 12px; }
body.home-page .download-symbol .footer-photo { position: relative; width: 100%; aspect-ratio: 3; overflow: hidden; background: transparent; border-radius: 0; transform: none; }
body.home-page .download-symbol .footer-photo img { display: block; position: absolute; left: -62.962962962963%; top: -346.666666666667%; width: 166.666666666667%; max-width: none; height: auto; border: 0; border-radius: 0; transform: none; filter: none; box-shadow: none; }
body.home-page .download-symbol .footer-samples { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; min-width: 0; background: transparent; border-radius: 0; transform: none; }
body.home-page .download-symbol .footer-color i { display: block; width: 100%; height: 64px; background: var(--sample-color); }

/* Three equal native tab controls: quiet baseline, selected underline and separate keyboard focus. */
body.home-page #playground .tool-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 0; background: transparent; }
body.home-page #playground .tool-tabs [role="tab"] { display: flex; position: relative; align-items: center; justify-content: flex-start; min-width: 0; min-height: 56px; width: 100%; margin: 0; padding: 16px 24px; border: 0; border-bottom: 1px solid #d8d7d2; background: transparent; color: #62635d; font-size: 16px; line-height: 24px; font-weight: 400; white-space: normal; overflow-wrap: anywhere; box-shadow: none; }
body.home-page #playground .tool-tabs [role="tab"][aria-selected="true"] { background: transparent; color: #191a16; font-weight: 500; box-shadow: none; }
body.home-page #playground .tool-tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #191a16; pointer-events: none; }
body.home-page #playground .tool-tabs [role="tab"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }

/* Visible57: unchanged native evidence in flat ivory mounts; independent content flow. */
@media (max-width: 1199px) {
}
@media (max-width: 767px) {
}
/* Five honest raw-photo samples tie the two graphic ribbons to the closing specimen. */
body.home-page .color-ribbon { height: 10px; }
body.home-page .hero-dot { background: #4198a3; }
body.home-page .download-dot { color: #1a395b; }
body.home-page #cta { padding-block: 24px; }
body.home-page #cta .download-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: auto; gap: 40px; align-items: center; }
body.home-page #cta .download-symbol { grid-column: auto; grid-row: auto; width: 100%; max-width: none; height: auto; }
body.home-page #cta .footer-photo { aspect-ratio: 8 / 5; }
body.home-page #cta .footer-photo img { left: -3.90625%; top: -53.75%; width: 109.375%; }
body.home-page #cta .footer-samples { gap: 0; }
body.home-page #cta .footer-color { grid-template-rows: 64px 16px; gap: 8px; }
body.home-page #cta .footer-color code { font-size: 11px; line-height: 16px; }
body.home-page .site-footer { margin-top: 0; padding-top: 56px; }
@media (max-width: 760px) { body.home-page #cta .download-grid { grid-template-columns: minmax(0, 1fr); } }

/* Every description/action now follows its own actual content; no reserved body tracks. */

/* Exactly12% ivory on the material background; HTML screenshot pixels remain untouched above it. */
body.home-page .catalogue-grid .material-paint { background-image: linear-gradient(rgba(246,244,238,.12),rgba(246,244,238,.12)),url('/assets/materials/paint.jpg'); }
body.home-page .catalogue-grid .material-photo-paper { background-image: linear-gradient(rgba(246,244,238,.12),rgba(246,244,238,.12)),url('/assets/materials/photo-paper.jpg'); }
body.home-page .catalogue-grid .material-print-paper { background-image: linear-gradient(rgba(246,244,238,.12),rgba(246,244,238,.12)),url('/assets/materials/print-paper.jpg'); }
body.home-page .catalogue-grid .material-fabric { background-image: linear-gradient(rgba(246,244,238,.12),rgba(246,244,238,.12)),url('/assets/materials/fabric.jpg'); }
body.home-page .catalogue-grid .material-cardboard { background-image: linear-gradient(rgba(246,244,238,.12),rgba(246,244,238,.12)),url('/assets/materials/cardboard.jpg'); }
/* Lower utility typography and measurable touch/reading geometry, homepage only. */
body.home-page .how-section .how-visual li { grid-template-columns: 48px minmax(0,1fr); column-gap: 24px; align-items: center; min-height: 96px; padding: 24px; }
body.home-page .how-section .how-visual li::before { font-size: 36px; line-height: 40px; font-weight: 400; }
body.home-page .how-section .how-visual li > a { align-items: center; min-height: 44px; gap: 10px; }
body.home-page .how-section .how-visual .home-card-icon { width: 18px; height: 18px; }
body.home-page .how-section .how-visual h3 { font-size: 16px; line-height: 24px; }
body.home-page .seo-guides .guide-card { min-height: 72px; height: auto; align-items: center; gap: 12px; padding: 12px 0; }
body.home-page .seo-guides .guide-card .home-card-icon { width: 20px; height: 20px; }
body.home-page .seo-guides .guide-card h3 { min-width: 0; font-size: 16px; line-height: 24px; padding-right: 32px; }
body.home-page .seo-guides .guide-card h3 > span { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; font-size: 20px; line-height: 20px; transform: translateY(-50%); }
body.home-page .seo-guides .all-guides-link > span { font-size: 20px; line-height: 20px; }
body.home-page .seo-faq .faq-groups { column-gap: 32px; }
body.home-page #faq .faq-group h3 { margin: 0 0 24px; font-size: 13px; line-height: 18px; font-weight: 600; }
body.home-page .seo-faq .faq-list summary { min-height: 72px; padding: 20px 0; font-size: 16px; line-height: 24px; column-gap: 16px; }
@media (max-width: 480px) {
  body.home-page #playground .tool-tabs [role="tab"] { min-height: 56px; padding: 16px 8px; font-size: 14px; line-height: 20px; white-space: nowrap; overflow-wrap: normal; }
}

/* Outer11 + mount13 equals the original24px image inset, preserving genuine display size. */
/* The intro gets its own natural row, so the photograph starts exactly at the headline. */
body.home-page #cta .download-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto; gap: 24px 40px; align-items: start; }
body.home-page #cta .download-grid > div:first-child { display: contents; }
body.home-page #cta .download-intro { grid-column: 1; grid-row: 1; margin: 0; }
body.home-page #cta .download-copy-main { grid-column: 1; grid-row: 2; min-width: 0; }
body.home-page #cta .download-symbol { grid-column: 2; grid-row: 2; align-self: start; }
body.home-page #cta .footer-color code { font-size: 12px; }
@media (max-width: 760px) {
  body.home-page #cta .download-grid { grid-template-columns: minmax(0, 1fr); }
  body.home-page #cta .download-symbol { grid-column: 1; grid-row: 3; }
}

/* Visible58: one large-board catalogue. Source ROI geometry and material pixels are unchanged. */
body.home-page .catalogue-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 40px; padding-top: 32px; border-top: 1px solid var(--line); }
body.home-page .catalogue-grid .feature-band { display: contents; }
body.home-page .catalogue-grid .feature-band > article { display: flex; gap: 0; flex-direction: column; align-items: stretch; align-self: start; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
body.home-page .catalogue-grid :is(.module-copy,.feature-body) { display: contents; }
body.home-page .catalogue-grid .feature-heading { display: block; margin: 20px 0 0; padding: 0; }
body.home-page .catalogue-grid .feature-heading h3 { min-height: 60px; margin: 0; font-size: 28px; line-height: 30px; font-weight: 500; letter-spacing: -.025em; }
body.home-page .catalogue-grid .feature-description { min-width: 0; margin: 16px 0 0; padding: 0; }
body.home-page .catalogue-grid .feature-benefits { min-width: 0; min-height: 72px; margin: 0; padding: 0; }
body.home-page .catalogue-grid .use-case-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(var(--benefit-rows),auto); grid-auto-flow: column; gap: 0 24px; align-content: start; margin: 0; padding: 0; list-style: none; }
body.home-page .catalogue-grid .use-case-list :is(li,a) { display: block; min-height: 0; margin: 0; padding: 0; border: 0; }
body.home-page .catalogue-grid .use-case-list h4 { margin: 0; font: 400 16px/24px Arial,Helvetica,sans-serif; }
body.home-page .catalogue-grid .feature-link-slot { display: flex; align-items: flex-start; min-height: 44px; margin: 24px 0 0; padding: 0; }
body.home-page .catalogue-grid .feature-link-slot:empty { display: block; min-height: 24px; }
body.home-page .catalogue-grid .camera-download { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: 600 16px/24px Arial,Helvetica,sans-serif; white-space: normal; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 6px; }
body.home-page .catalogue-grid .camera-download > span { flex: none; font-size: 16px; }
body.home-page .catalogue-grid .feature-band .feature-media { display: flex; container-type: inline-size; align-items: center; justify-content: center; position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; min-width: 0; min-height: 0; margin: 0; padding: 24px; gap: 0; border: 0; border-radius: 0; background-color: var(--paper); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: visible; box-shadow: none; order: initial; }
body.home-page .catalogue-grid .feature-media img { display: block; max-width: none; border: 0; border-radius: 0; box-shadow: none; filter: none; transform: none; }
body.home-page .catalogue-grid .specimen-frame { --board-inner-height: calc((100cqw + 48px) * .5625 - 48px); display: flex; align-items: center; justify-content: center; flex: none; min-width: 0; max-width: 100%; width: min(100%,calc((var(--board-inner-height) - 2px) * var(--frame-aspect) + 2px),calc(var(--frame-native-width) + 2px)); padding: 1px; border: 0; border-radius: 0; outline: 1px solid #c8c3b8; outline-offset: -1px; background: transparent; box-shadow: none; }
body.home-page .catalogue-grid .feature-crop { position: relative; aspect-ratio: var(--crop-aspect); flex: none; overflow: hidden; }
body.home-page .catalogue-grid .specimen-frame > .feature-crop { width: 100%; }
/* Keep the HTML width/height aspect hint before lazy images decode. */
body.home-page .catalogue-grid .feature-crop img { position: absolute; height: auto; }
body.home-page .catalogue-grid .room-mount { width: min(100%,max(180px,calc((var(--board-inner-height) - 30px) * 4 / 3 + 2px))); }
body.home-page .catalogue-grid .room-composition { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
body.home-page .catalogue-grid .ar-room { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: transparent; }
body.home-page .catalogue-grid .ar-room .ar-room-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
body.home-page .catalogue-grid .ar-room::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 45%; background: #8b9b7d; mix-blend-mode: multiply; opacity: .12; pointer-events: none; }
body.home-page .catalogue-grid .ar-color-chip { position: static; display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 0; background: var(--paper); color: var(--ink); font: 12px/16px Arial,Helvetica,sans-serif; }
body.home-page .catalogue-grid .ar-color-chip i { width: 14px; height: 14px; flex: none; background: #8b9b7d; }
body.home-page .catalogue-grid .ar-source-caption { display: block; margin: 0; padding: 0; font: 400 16px/24px Arial,Helvetica,sans-serif; color: var(--muted); letter-spacing: 0; }
body.home-page .catalogue-grid .concept-preview-label { display: flex; align-items: center; width: fit-content; margin: 12px 0 0; padding: 2px 6px; border: 1px solid var(--muted); background: transparent; color: var(--muted); font: 12px/16px Arial,Helvetica,sans-serif; letter-spacing: 0; text-transform: none; }
body.home-page .catalogue-grid .comparison-explanation { margin: 16px 0 0; padding: 0; color: #66645f; font: 14px/20px Arial,Helvetica,sans-serif; }
body.home-page .catalogue-grid .comparison-caption { margin: 8px 0 0; padding: 0; color: #66645f; font: 13px/18px Arial,Helvetica,sans-serif; }
@media (max-width: 899px) { body.home-page .catalogue-grid { grid-template-columns: minmax(0,1fr); } }
/* A compact four-track How band; native links retain their full-cell hit pseudo. */
body.home-page #how-it-works { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(3,minmax(0,1fr)); gap: 24px; align-items: center; padding-block: 32px; }
body.home-page #how-it-works .section-heading { display: block; grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
body.home-page #how-it-works h2 { font-size: 32px; line-height: 36px; margin: 0; }
body.home-page #how-it-works .how-steps { display: grid; grid-column: 2 / -1; grid-row: 1; grid-template-columns: subgrid; column-gap: 24px; row-gap: 0; padding: 0; margin: 0; }
body.home-page #how-it-works .how-visual li { display: grid; grid-template-columns: 32px minmax(0,1fr); column-gap: 12px; align-items: center; min-height: 80px; padding: 0 16px; border: 0; border-left: 1px solid var(--line); }
body.home-page #how-it-works .how-visual li::before { position: static; transform: none; font-size: 28px; line-height: 32px; font-weight: 400; }
body.home-page #how-it-works .how-visual li > a { min-height: 44px; min-width: 0; padding: 0; gap: 10px; }
body.home-page #how-it-works .how-visual h3 { min-width: 0; font-size: 16px; line-height: 22px; }
body.home-page #guides { padding-top: 64px; }
@media (max-width: 899px) {
  body.home-page #how-it-works { grid-template-columns: minmax(0,1fr); row-gap: 24px; }
  body.home-page #how-it-works .section-heading { grid-column: 1; grid-row: 1; }
  body.home-page #how-it-works .how-steps { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0,1fr); }
  body.home-page #how-it-works .how-visual li { min-height: 64px; border: 0; border-bottom: 1px solid var(--line); }
}

/* Short mobile boards keep the full-size legend on one line while the genuine photo fits independently. */
body.home-page .catalogue-grid .room-mount .ar-room { align-self: center; width: min(100%,calc((var(--board-inner-height) - 30px) * 4 / 3)); }
body.home-page .catalogue-grid .room-mount .ar-color-chip { white-space: nowrap; }

/* Visible59: wrapping paper specimens on the existing material boards. */
body.home-page .catalogue-grid .specimen-sheet { --sheet-height: min(320px,calc((100cqw + 48px) * .5625 - 54px)); width: min(480px,calc(100% - 6px),calc((var(--sheet-height) - 20px) * var(--frame-aspect) + 20px),calc(var(--frame-native-width) + 20px)); max-width: calc(100% - 6px); padding: 10px; outline: 0; background: #f7f5ef; box-shadow: 6px 6px 0 rgba(0,0,0,.16); transform: translate(-3px,-3px); }
body.home-page .catalogue-grid .room-mount { width: min(480px,calc(100% - 6px),max(180px,calc((var(--sheet-height) - 48px) * 4 / 3 + 20px))); }
body.home-page .catalogue-grid .room-mount .ar-room { width: min(100%,calc((var(--sheet-height) - 48px) * 4 / 3)); }
body.home-page .catalogue-grid .use-case-list { width: 100%; max-width: 404px; grid-template-columns: repeat(2,minmax(0,190px)); }
/* Actual visible content sets the lower-page rhythm in every active tool state. */
body.home-page #playground { padding-bottom: 0; }
body.home-page #how-it-works { display: block; padding-top: 80px; padding-bottom: 0; margin-block: 0; }
body.home-page #how-it-works .section-heading { margin: 0 0 24px; }
body.home-page #how-it-works .how-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
body.home-page #how-it-works .how-visual li { grid-template-columns: minmax(0,1fr); grid-template-rows: 52px auto; row-gap: 12px; min-height: 108px; align-content: start; align-items: start; padding: 0 16px; border: 0; border-left: 1px solid var(--line); }
body.home-page #how-it-works .how-visual li::before { font-size: 48px; line-height: 52px; }
body.home-page #how-it-works .how-visual h3 { font-size: 18px; line-height: 24px; }
body.home-page #guides { padding-top: 80px; padding-bottom: 0; }
body.home-page #guides h2, body.home-page #faq h2 { font-size: 40px; }
body.home-page #faq { padding-top: 79px; }
@media (max-width: 899px) {
  body.home-page #how-it-works .how-steps { grid-template-columns: minmax(0,1fr); }
  body.home-page #how-it-works .how-visual li { border-left: 0; border-bottom: 1px solid var(--line); }
}
/* The AR qualifier shares the same compact benefits measure as the seven lists. */
body.home-page .catalogue-grid .feature-benefits { width: 100%; max-width: 404px; }
/* Final bounded type rhythm and whole-group closing alignment. */
body.home-page .catalogue-grid .feature-heading { margin-top: 16px; }
body.home-page .catalogue-grid .feature-heading h3 { min-height: 0; line-height: 32px; }
body.home-page .catalogue-grid .feature-description { margin-top: 12px; }
body.home-page #cta .download-grid { grid-template-rows: auto; align-items: center; }
body.home-page #cta .download-grid > div:first-child { display: block; grid-column: 1; grid-row: 1; align-self: center; min-width: 0; }
body.home-page #cta .download-intro { margin: 0 0 24px; }
body.home-page #cta .download-symbol { grid-column: 2; grid-row: 1; align-self: center; }
@media (max-width: 760px) { body.home-page #cta .download-symbol { grid-column: 1; grid-row: 2; } }