/* Hero examples use the existing site tokens and controls. */
.hero-scene-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--space-6); margin-top:var(--space-6); }
.hero-scene-card { display:grid; grid-template-rows:subgrid; grid-row:span 5; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius); min-width:0; }
.hero-scene-card-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2); }
.hero-scene-card-heading h3 { margin:0; }
.hero-scene-badge { padding:var(--space-1) var(--space-2); border-radius:var(--radius); background:var(--surface-active); color:var(--green); font-size:var(--font-small); }
.hero-scene-stage { display:grid; place-items:center; width:100%; height:240px; padding:0; border:0; border-radius:var(--radius); background:var(--surface-subtle); cursor:zoom-in; }
.hero-scene-stage .hero-scene-image { display:block; width:min(100%,calc(240px * var(--scene-ratio))); }
.hero-scene-stage:focus-visible { outline:1px solid var(--text-muted); outline-offset:var(--space-1); }
.hero-scene-languages.tabs { margin:0; flex-wrap:wrap; align-self:start; }
.hero-scene-languages.tabs button { flex:none; min-width:0; padding:var(--space-2) var(--space-4); }
.hero-scene-copy-row { align-self:end; }
.hero-scene-copy-row .ai-prompt-copy { background:var(--surface-active); }
.hero-scene-figure { margin:0; }
.hero-scene-image { margin-inline:auto; }
.hero-reference-image { position:relative; overflow:hidden; border-radius:var(--radius); background:var(--surface-subtle); }
.hero-reference-image img { position:absolute; display:block; max-width:none; height:auto; }
.hero-scene-figure figcaption { margin-top:var(--space-4); }
.hero-scene-meta { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); margin-bottom:var(--space-2); font-weight:600; }
.hero-example-note { margin-top:var(--space-4); color:var(--text-muted); }
.hero-example-details { margin-top:var(--space-6); border-block:1px solid var(--divider); }
.hero-example-details summary { cursor:pointer; padding:var(--space-4) 0; font-weight:600; color:var(--ink); }
.hero-example-details summary:focus-visible { outline:1px solid var(--text-muted); outline-offset:var(--space-1); }
.hero-example-details-body { padding:0 0 var(--space-4); }
.hero-example-prompt { height:240px; min-height:240px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius); white-space:pre-wrap; overflow-wrap:anywhere; }
.hero-example-prompt:focus-visible { outline:1px solid var(--text-muted); outline-offset:var(--space-1); }
#hero-scene-viewer { width:min(1040px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:var(--space-4); overflow:hidden; }
.hero-scene-viewer-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); }
.hero-scene-viewer-heading h3 { margin:0; }
.hero-scene-viewer-body { display:grid; place-items:center; height:min(640px,calc(100dvh - 144px)); }
.hero-scene-viewer-body .hero-reference-image { max-width:100%; }
.hero-example-tools { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.hero-example-tools h3 { margin:0 var(--space-1) 0 0; }
.hero-example-tools .ai-prompt-copy { background:var(--surface-active); }
.hero-example-error { margin-top:var(--space-3); color:var(--status-error); }
.hero-layout-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin-top:var(--space-6); margin-bottom:var(--space-3); }
.hero-layout-measurement { --hero-safe-left:12.1172647%; --hero-safe-width:75%; --hero-safe-right:calc(100% - var(--hero-safe-left) - var(--hero-safe-width)); display:grid; grid-template-columns:minmax(0,1fr) var(--space-12); grid-template-rows:auto auto; gap:var(--space-2); }
/* The supplied raster's content begins 186px into its 1535px crop. */
.hero-width-ruler { grid-column:1; display:grid; grid-template-columns:minmax(0,var(--hero-safe-left)) minmax(0,var(--hero-safe-width)) minmax(0,var(--hero-safe-right)); gap:0; min-width:0; }
.hero-dimension { position:relative; display:grid; place-items:center; min-height:var(--space-6); padding-bottom:var(--space-1); border-bottom:1px solid var(--border); color:var(--text-muted); font-size:var(--font-small); line-height:1.6; text-align:center; }
.hero-dimension::before,.hero-dimension::after { content:""; position:absolute; bottom:0; height:var(--space-2); border-left:1px solid var(--border); }
.hero-dimension::before { left:0; }
.hero-dimension::after { right:0; }
.hero-content-dimension { background:var(--surface-active); color:var(--green); border-color:var(--green); border-radius:var(--radius) var(--radius) 0 0; }
.hero-content-dimension::before,.hero-content-dimension::after { border-color:var(--green); }
.hero-layout-measurement #hero-layout-image { grid-column:1; grid-row:2; min-width:0; }
.hero-height-ruler { grid-column:2; grid-row:2; display:grid; grid-template-rows:9.72222% 80.55556% 9.72222%; font-size:var(--font-small); line-height:1.6; color:var(--text-muted); }
.hero-height-dimension { position:relative; display:grid; place-items:center; border-left:1px solid var(--border); }
.hero-height-dimension::before,.hero-height-dimension::after { content:""; position:absolute; left:0; width:var(--space-2); border-top:1px solid var(--border); }
.hero-height-dimension::before { top:0; }
.hero-height-dimension::after { bottom:0; }
.hero-height-content { display:grid; place-items:center; width:var(--space-6); padding-block:var(--space-2); border-left:1px dashed var(--green); background:var(--surface-subtle); color:var(--green); writing-mode:vertical-rl; justify-self:start; }
.hero-safe-choice { display:flex; align-items:center; gap:var(--space-2); min-height:var(--control-height); cursor:pointer; }
.hero-safe-choice input,.hero-delivery-checks input { accent-color:var(--green); width:16px; height:16px; flex:none; margin:0; }
.hero-layout-measurement { --hero-mask:color-mix(in srgb,var(--surface) 65%,transparent); }
.hero-safe-overlay { position:absolute; inset:9.72222% var(--hero-safe-right) 9.72222% var(--hero-safe-left); border:1px dashed var(--green); box-shadow:0 0 0 100vmax var(--hero-mask); pointer-events:none; }
.hero-safe-overlay span { position:absolute; top:0; left:0; padding:var(--space-1) var(--space-2); background:var(--surface-active); color:var(--green); font-size:var(--font-small); }
.hero-layout-measurement [data-hero-margin] { appearance:none; padding:0; margin:0; background:transparent; font:inherit; font-size:var(--font-small); color:var(--text-muted); border:0; border-radius:0; cursor:pointer; }
.hero-width-ruler [data-hero-margin] { min-height:var(--control-height); border-bottom:1px solid var(--border); }
.hero-height-ruler [data-hero-margin] { min-height:0; border-left:1px solid var(--border); }
.hero-layout-measurement [data-hero-margin][data-active] { color:var(--green); background:transparent; }
.hero-layout-measurement [data-hero-margin]:focus-visible { outline:1px solid var(--text-muted); outline-offset:var(--space-1); }
.hero-margin-overlay { position:absolute; pointer-events:none; background:var(--hero-mask); border:1px dashed var(--green); }
.hero-margin-overlay[data-region=left] { inset:0 auto 0 0; width:var(--hero-safe-left); }
.hero-margin-overlay[data-region=right] { inset:0 0 0 auto; width:var(--hero-safe-right); }
.hero-margin-overlay[data-region=top] { inset:0 0 auto; height:9.72222%; }
.hero-margin-overlay[data-region=bottom] { inset:auto 0 0; height:9.72222%; }
.hero-design-basis { margin-top:var(--space-6); }
.hero-design-basis ul { margin:var(--space-3) 0 0; padding-left:var(--space-6); color:var(--text-secondary); line-height:1.75; }
.hero-design-basis li + li { margin-top:var(--space-2); }
.hero-design-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-3) var(--space-6); padding:var(--space-6) 0; margin:var(--space-6) 0; border-block:1px solid var(--divider); list-style:none; }
.hero-design-steps li { display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0; }
.hero-step-heading { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1); }
.hero-step-heading span { color:var(--text-muted); font-size:var(--font-small); }
.hero-step-heading h3 { margin:0; color:var(--ink); }
.hero-design-steps li > p:not(.hero-step-output) { color:var(--text-secondary); }
.hero-step-output { display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-3) var(--space-4); margin-top:var(--space-1); background:var(--surface-subtle); border-radius:var(--radius); }
.hero-step-output span { color:var(--text-muted); font-size:var(--font-small); }
.hero-step-output strong { color:var(--ink); font-size:var(--font-body); font-weight:600; }
.hero-check-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.hero-check-heading h3 { margin:0; }
.hero-check-heading output { color:var(--text-muted); }
.hero-delivery-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-6); padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius); }
.hero-delivery-checks label { display:flex; align-items:center; gap:var(--space-3); min-height:var(--control-height); color:var(--text-secondary); cursor:pointer; }
.hero-trouble-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
.hero-trouble-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.hero-trouble-table th,.hero-trouble-table td { padding:var(--space-4); text-align:left; vertical-align:top; font-size:var(--font-body); line-height:1.75; overflow-wrap:anywhere; }
.hero-trouble-table thead th { background:var(--surface-active); color:var(--green); font-size:var(--font-card); font-weight:600; }
.hero-trouble-table tbody th { font-weight:600; }
.hero-trouble-table tbody tr + tr { border-top:1px solid var(--divider); }
.hero-trouble-table td { color:var(--text-secondary); }
@media(max-width:1100px) { .hero-design-steps { grid-template-columns:minmax(0,1fr); gap:var(--space-6); } .hero-design-steps li { grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto auto; grid-row:auto; gap:var(--space-3) var(--space-4); } .hero-step-heading { grid-row:span 2; } .hero-step-output { grid-column:2; margin-top:0; } }
@media(max-width:760px) { .hero-delivery-checks { grid-template-columns:minmax(0,1fr); } .hero-trouble-table { min-width:640px; } .hero-safe-overlay span { padding:var(--space-1); } }
@media(max-width:1100px) {
  .hero-scene-grid { grid-template-columns:minmax(0,1fr); }
  .hero-scene-card { display:flex; flex-direction:column; grid-row:auto; }
}