/* Selections Guide pages (electrical first; plumbing, finishes etc. can reuse this).
   Uses the colors set in styles.css. */

/* Draft notice. Delete the <div class="draft-banner"> line in the page when it goes live. */
.draft-banner {
  background: var(--accent); color: var(--ink); text-align: center;
  font-weight: 600; font-size: 0.9375rem; padding: 8px 16px;
}

/* "On this page" links under the hero */
.guide-nav { background: var(--paper); border-bottom: 1px solid var(--line); }
.guide-nav .wrap { padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.guide-nav .eyebrow { margin-right: 4px; }
.guide-nav a { font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.guide-nav a:hover { text-decoration: underline; }

/* Each topic */
.guide-section { padding: 72px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 8px; }
.guide-section.paper { background: var(--paper); }
.guide-section h2 { margin-bottom: 18px; text-wrap: balance; }
.guide-intro { max-width: 720px; margin: 0 0 36px; font-size: 1.125rem; }
.prose { max-width: 720px; }
.prose p { margin: 0 0 14px; }
.guide-section h3 { font-weight: 800; font-size: 1.375rem; line-height: 1.2; margin: 0 0 12px; }
.guide-section .subhead { margin-top: 56px; }

/* Two or three columns of short topics */
.topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px 48px; }
.topics.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic { border-top: 1px solid var(--line); padding-top: 18px; min-width: 0; }
.topic h4 { font-family: 'Archivo', Helvetica, sans-serif; font-weight: 700; font-size: 1.125rem; margin: 0 0 6px; }
.topic p { margin: 0; color: var(--muted); }
.topic p + p { margin-top: 10px; }

/* Switch and outlet drawings */
.faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 28px 20px; margin: 0; padding: 0; list-style: none; }
.face { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.face svg { width: 84px; height: auto; }
.face strong { font-family: 'Archivo', Helvetica, sans-serif; font-size: 1rem; line-height: 1.2; }
.face span { font-size: 0.9375rem; color: var(--muted); line-height: 1.4; }

/* Shapes inside the drawings */
.sv-plate { fill: #FFFFFF; stroke: #8A90A0; stroke-width: 1.5; }
.sv-open { fill: #EEF1F6; stroke: #8A90A0; stroke-width: 1.2; }
.sv-dev { fill: #FFFFFF; stroke: #6B7180; stroke-width: 1.2; }
.sv-hole { fill: #4A4F5C; }
.sv-line { fill: none; stroke: #B5BBC7; stroke-width: 1; }
.sv-screw { fill: #FFFFFF; stroke: #8A90A0; stroke-width: 1; }
.sv-accent { fill: var(--accent); }
.sv-dim { fill: #D7DCE5; }
.sv-wood { fill: #E9D3AE; stroke: #B08A57; stroke-width: 1; }
.sv-drywall { fill: #F4F4F0; stroke: #A9AEB8; stroke-width: 1; }
.sv-metal { fill: #C9CED8; stroke: #6B7180; stroke-width: 1; }
.sv-bar { fill: #8C95A6; }
.sv-duct { fill: #E3E7EF; stroke: #8A90A0; stroke-width: 1; }
.sv-beam { fill: var(--accent-light); opacity: 0.55; }
.sv-wire { fill: none; stroke: #4A4F5C; stroke-width: 1.5; }
.sv-lead { fill: none; stroke: #6B7180; stroke-width: 1; }
.sv-label { fill: #4A4F5C; font-family: 'Source Sans 3', Helvetica, sans-serif; font-size: 11px; }

/* Device color chips */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 16px; margin: 0 0 14px; padding: 0; list-style: none; }
.chip { display: flex; flex-direction: column; gap: 8px; }
.chip i { display: block; height: 72px; border: 1px solid var(--line); }
.chip strong { font-family: 'Archivo', Helvetica, sans-serif; font-size: 0.9375rem; }
.chip span { font-size: 0.875rem; color: var(--muted); line-height: 1.35; }
.fine { font-size: 0.875rem; color: var(--muted); margin: 0; }

/* Recessed light drawings */
.cutaways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; margin-bottom: 40px; }
.cutaway { margin: 0; background: #FFFFFF; border: 1px solid var(--line); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.cutaway svg { width: 100%; height: auto; display: block; }
.cutaway figcaption strong { display: block; font-family: 'Archivo', Helvetica, sans-serif; font-size: 1.125rem; margin-bottom: 2px; }
.cutaway figcaption span { color: var(--muted); font-size: 0.9375rem; }

/* Comparison table */
.table-scroll { overflow-x: auto; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; background: #FFFFFF; font-size: 0.9875rem; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: 'Archivo', Helvetica, sans-serif; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.compare tbody th { font-weight: 600; width: 18%; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* Light appearance label, styled like the back of a bulb box */
.bulb-label { margin: 0 0 12px; max-width: 520px; background: #FFFFFF; border: 2px solid var(--ink); padding: 14px 18px 8px; color: var(--ink); }
.bl-title { font-family: 'Archivo', Helvetica, sans-serif; font-weight: 800; font-size: 1.375rem; line-height: 1.1; padding-bottom: 8px; border-bottom: 6px solid var(--ink); }
.bl-ends { display: flex; justify-content: space-between; margin-top: 12px; font-weight: 600; font-size: 0.875rem; }
.bl-scale { position: relative; height: 40px; margin: 4px 0 0; }
.bl-bar { height: 14px; border: 1px solid var(--ink); background: linear-gradient(90deg, #F2E3C6 0%, #F7F1E6 45%, #EDF1F7 75%, #E3EAF5 100%); }
.bl-tick { position: absolute; top: 14px; transform: translateX(-50%); padding-top: 9px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.bl-tick::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 7px; background: var(--ink); }
.bl-unit { font-size: 0.8125rem; color: var(--muted); padding-bottom: 8px; border-bottom: 3px solid var(--ink); }
.bl-rows { margin: 0; }
.bl-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ink); }
.bl-row:last-child { border-bottom: 0; }
.bl-row dt { font-family: 'Archivo', Helvetica, sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; }
.bl-row dd { margin: 0; }

/* Short callout */
.tip { margin-top: 28px; padding: 16px 20px; background: #FFFFFF; border: 1px solid var(--line); max-width: 760px; }
.guide-section.paper .tip { background: #FFFFFF; }
.tip strong { display: block; margin-bottom: 4px; font-family: 'Archivo', Helvetica, sans-serif; }
.tip p { margin: 0; }

/* Checklist borrowed from the Home Watch page, in two columns on wide screens */
.checklist.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 10px 40px; }

/* Quick answers */
.guide-section .faq h3 { font-size: 1.1875rem; }
.guide-section .faq p { color: var(--muted); }

@media (max-width: 760px) {
  .topics.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .guide-section { padding: 52px 0; }
  .guide-intro { font-size: 1.0625rem; }
}

/* ---------- Selections & Finishes contents page ---------- */
.toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 32px; }
.toc-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: #FFFFFF; border: 1px solid var(--line); min-width: 0; }
.toc-card h2 { font-size: 1.75rem; margin: 0; }
.toc-card h2 a { color: var(--ink); text-decoration: none; }
.toc-card h2 a:hover { color: var(--blue); text-decoration: underline; }
.toc-card > p { margin: 0; color: var(--muted); }
.toc-list { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 6px 20px; }
.toc-list a { font-weight: 600; text-decoration: none; }
.toc-list a:hover { text-decoration: underline; }
.toc-card .btn { align-self: flex-start; margin-top: 8px; }

/* Link back to the contents page, under the hero eyebrow */
.hero .eyebrow a { color: inherit; }

/* Brand note */
.brand-note { margin-top: 32px; font-size: 0.875rem; color: var(--muted); max-width: 760px; }

/* Product links */
.ext-link { font-weight: 600; }

/* Wall and window drawings on the siding page */
.drawings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px; margin: 0 0 40px; }
.sv-cavity { fill: #F7E9C3; stroke: #C9B27A; stroke-width: 1; }
.sv-foam { fill: #DCE5F4; stroke: #8A9BC0; stroke-width: 1; }
.sv-wrb { fill: var(--blue); }
.sv-glass { fill: #E8F0F8; stroke: #6B7180; stroke-width: 1; }
.sv-frame { fill: #FFFFFF; stroke: #4A4F5C; stroke-width: 1.4; }
.sv-ext { fill: #FFE4C2; stroke: #C98A3E; stroke-width: 1; }
.sv-gap { fill: #FFFFFF; }
.sv-arrow { fill: none; stroke: var(--blue); stroke-width: 1.4; }
.sv-side { fill: #E5D2B2; stroke: #9A7B4F; stroke-width: 1; }
.sv-label.small { font-size: 10px; }
.sv-label.strong { font-weight: 600; fill: #231F20; }

/* ---------- One-page Selections & Finishes ---------- */
/* Contents block at the top of the page */
.contents { padding: 56px 0 64px; border-bottom: 1px solid var(--line); }
.contents h2 { margin-bottom: 10px; }
.contents .guide-intro { margin-bottom: 32px; }
.contents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 28px 40px; }
.contents-group { border-top: 3px solid var(--accent); padding-top: 16px; min-width: 0; }
.contents-group h3 { font-weight: 800; font-size: 1.375rem; margin: 0 0 10px; }
.contents-group h3 a { color: var(--ink); text-decoration: none; }
.contents-group h3 a:hover { color: var(--blue); text-decoration: underline; }
.contents-group ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.contents-group li a { font-weight: 600; text-decoration: none; }
.contents-group li a:hover { text-decoration: underline; }

/* Opening band for each guide */
.guide-head { background: var(--blue-dark); color: #FFFFFF; scroll-margin-top: 0; }
.guide-head .wrap { padding-top: 72px; padding-bottom: 72px; }
.guide-head .eyebrow { color: var(--accent-light); }
.guide-head h2 { color: #FFFFFF; font-size: 2.75rem; line-height: 1.05; margin: 12px 0 18px; text-wrap: balance; }
.guide-head p { color: var(--light-text); font-size: 1.1875rem; margin: 0; max-width: 660px; }
.guide-head :focus-visible { outline-color: #FFFFFF; }

/* Ladder note and back link */
.ladder-note { display: inline-block; margin: 0 0 28px; padding: 6px 12px; background: #FFFFFF; border: 1px solid var(--line); font-size: 0.9375rem; color: var(--muted); }
.back-top { margin: 36px 0 0; font-weight: 600; }
.back-top a { text-decoration: none; }
.back-top a:hover { text-decoration: underline; }

/* Standing seam panel drawings */
.sv-panel { fill: none; stroke: #4A4F5C; stroke-width: 2; stroke-linejoin: round; }

@media (max-width: 640px) {
  .guide-head h2 { font-size: 2.1rem; }
  .guide-head .wrap { padding-top: 48px; padding-bottom: 48px; }
  .guide-head p { font-size: 1.0625rem; }
}

/* 3D window cutaways and metal roof panels */
.drawings.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .drawings.pair { grid-template-columns: minmax(0, 1fr); } }
.sv-label.win { font-size: 12px; }
.sv-lap { fill: none; stroke: #B8946A; stroke-width: 1; }
.sv-wrbline { fill: none; stroke: var(--blue); stroke-width: 2; }
.sv-buck { fill: #D9B98A; stroke: #8F6B3D; stroke-width: 1; }
.sv-glass3d { fill: #DCEAF6; fill-opacity: 0.55; stroke: #6B7180; stroke-width: 1; }
.sv-casing { fill: #FFFFFF; stroke: #6B7180; stroke-width: 1; }
.sv-tag { fill: #FFFFFF; stroke: #B5BBC7; stroke-width: 1; }
.sv-deck { fill: #E5D2B2; stroke: #9A7B4F; stroke-width: 1; }
.sv-pan { fill: #C3C9D2; stroke: #7E8692; stroke-width: 1; }
.sv-seam-top { fill: #E1E5EB; stroke: #7E8692; stroke-width: 1; }
.sv-seam-side { fill: #A3ABB7; stroke: #7E8692; stroke-width: 1; }
.sv-seam-end { fill: #B9C0CA; stroke: #5E6672; stroke-width: 1; }
.sv-stri-dark { fill: none; stroke: #9CA4B0; stroke-width: 0.9; }
.sv-stri-light { fill: none; stroke: #E8EBF0; stroke-width: 0.9; }
.sv-profile { fill: none; stroke: #4A4F5C; stroke-width: 1.6; stroke-linejoin: round; }
.sv-sheen { fill: #FFFFFF; opacity: 0.45; }
.sv-winframe { fill: #5A606B; stroke: #2F333A; stroke-width: 1; }
.sv-break { fill: none; stroke: #8A90A0; stroke-width: 1; stroke-dasharray: 4 3; }
@media (max-width: 640px) {
  /* keep labels readable on phones; the drawing scrolls sideways if needed */
  .drawings.pair .cutaway { overflow-x: auto; }
  .drawings.pair .cutaway svg { min-width: 500px; }
}

/* Single wide drawing (trim guide) */
.cutaway.wide { max-width: 780px; margin: 0 0 36px; }
@media (max-width: 640px) {
  .cutaway.wide { overflow-x: auto; }
  .cutaway.wide svg { min-width: 540px; }
}
.sv-floorline { fill: none; stroke: #C4A574; stroke-width: 0.8; }
.sv-trimline { fill: none; stroke: #C9CED6; stroke-width: 0.8; }

/* Labeled pictures (trim guide): photo or illustration with labels drawn over it */
.labeled-pic { margin: 0 0 36px; max-width: 860px; }
.lp-frame { position: relative; border: 1px solid var(--line); background: #FFFFFF; }
.lp-frame img { display: block; width: 100%; height: auto; }
.lp-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-lead { fill: none; stroke: #231F20; stroke-width: 2; stroke-linejoin: round; }
.lp-dot { fill: var(--accent); stroke: #FFFFFF; stroke-width: 2.5; }
.lp-pill { fill: #FFFFFF; fill-opacity: 0.93; stroke: #9AA0AA; stroke-width: 1.2; }
.lp-text { fill: #231F20; font-family: 'Source Sans 3', Helvetica, sans-serif; font-size: 26px; font-weight: 600; }
/* Phones: picture fits the screen, numbered dots replace the callouts, with a numbered key below */
.lp-m, .lp-key { display: none; }
.lp-mdot { fill: var(--accent); stroke: #FFFFFF; stroke-width: 6; }
.lp-mnum { fill: #FFFFFF; font-family: 'Archivo', Helvetica, sans-serif; font-size: 46px; font-weight: 800; }
.lp-mlead { fill: none; stroke: #FFFFFF; stroke-width: 5; }
.lp-text.lp-mcap { font-size: 56px; }
@media (max-width: 640px) {
  .lp-d { display: none; }
  .lp-m { display: inline; }
  .lp-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), auto); grid-auto-flow: column; gap: 8px 16px; list-style: none; margin: 14px 0 0; padding: 0; font-size: 0.9375rem; }
  .lp-key li { display: flex; align-items: center; gap: 8px; line-height: 1.25; }
  .lp-key span { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-family: 'Archivo', Helvetica, sans-serif; font-weight: 800; font-size: 0.8125rem; display: inline-flex; align-items: center; justify-content: center; }
}

/* Separate guide pages: page title in the dark band, link back to the guide list */
.guide-head h1 { color: #FFFFFF; font-weight: 800; font-size: 2.75rem; line-height: 1.05; margin: 12px 0 18px; text-wrap: balance; }
.guide-head .eyebrow a { color: inherit; }
.guide-head .eyebrow a:hover { color: #FFFFFF; }
@media (max-width: 640px) { .guide-head h1 { font-size: 2.1rem; } }

/* Guide cards on the Selections & Finishes page and under each guide */
.guide-cards { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.guide-card { gap: 0; padding: 12px 12px 0; background: var(--paper); transition: background-color 0.15s; }
.guide-card:hover, .guide-card:focus-visible { background: #E2E8F2; }
.more-guides .guide-card { background: #FFFFFF; }
.more-guides .guide-card:hover, .more-guides .guide-card:focus-visible { background: #F6F8FB; }
.guide-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #FFFFFF; border: 1px solid var(--line); }
.guide-card h2, .guide-card h3 { font-size: 1.3125rem; margin: 0; padding: 16px 6px 0; }
.guide-card p { padding: 6px 6px 18px; }
.more-guides .back-top { margin-top: 32px; }

/* Caption under a labeled picture */
.labeled-pic figcaption { margin-top: 12px; }
.labeled-pic figcaption strong { display: block; font-family: 'Archivo', Helvetica, sans-serif; font-size: 1.125rem; margin-bottom: 2px; }
.labeled-pic figcaption span { color: var(--muted); }

/* Groups of guide cards on the Selections & Finishes page */
.guide-group { font-size: 1.375rem; font-weight: 800; margin: 40px 0 16px; padding-top: 16px; border-top: 3px solid var(--accent); }
.guide-group:first-of-type { margin-top: 8px; }
.guide-card-ph { width: 100%; aspect-ratio: 3 / 2; background: #FFFFFF; border: 1px solid var(--line); }

/* Drawn profile cards (grilles, gutters) */
.faces.drawn { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-bottom: 40px; }
.cutaway.wide.gutter-detail { max-width: 860px; }
.faces.drawn svg { width: 100%; max-width: 200px; }
.sv-gbg { fill: #FFFFFF; stroke: #A9B0BC; stroke-width: 0.8; }
.sv-gbgsec { fill: #FFFFFF; stroke: #6B7180; stroke-width: 1; }
.sv-sdl { fill: #FFFFFF; stroke: #4A4F5C; stroke-width: 1; }
.sv-spacer { fill: #5E6672; }
.sv-cut { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 3 2; }
.sv-water { fill: #CFE2F3; }
.sv-gutter { fill: none; stroke: #4A4F5C; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.sv-gutter.copper, .sv-hanger.copper { stroke: #B5652E; }
.sv-gutter.thin { stroke-width: 1.4; }
.sv-pan { fill: #C3C9D2; stroke: #7E8692; stroke-width: 1; }
.sv-seam { fill: #C3C9D2; stroke: #7E8692; stroke-width: 1; }
.sv-outlet { fill: none; stroke: #6B7180; stroke-width: 1.2; stroke-dasharray: 4 3; }
.sv-bead { fill: #FFFFFF; stroke: #4A4F5C; stroke-width: 1.6; }
.sv-bead.copper { stroke: #B5652E; }
.sv-hanger { fill: none; stroke: #8A90A0; stroke-width: 1.4; stroke-linecap: round; }
.sv-shingle { fill: #6E7480; stroke: #4A4F5C; stroke-width: 0.8; }
.sv-drip { fill: none; stroke: #4A4F5C; stroke-width: 1.4; stroke-linejoin: round; }
.sv-liner { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linejoin: round; }
.nss * { vector-effect: non-scaling-stroke; }
.sv-label.big { font-size: 17px; }
.sv-pin { fill: var(--accent); stroke: #FFFFFF; stroke-width: 1.2; }
.nss .sv-liner { stroke-width: 2.6; }
.nss .sv-gutter.thin { stroke-width: 2; }
@media (max-width: 640px) {
  .faces.drawn.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .faces.drawn.two-up span { font-size: 0.875rem; }
}
.sv-door { fill: #F1ECE2; stroke: #4A4F5C; stroke-width: 1.4; stroke-linejoin: round; }
.sv-panelin { fill: none; stroke: #8A90A0; stroke-width: 1; }
.sv-raised { fill: #FFFFFF; stroke: #4A4F5C; stroke-width: 1.2; }
.sv-trimline2 { fill: none; stroke: #8A90A0; stroke-width: 1; }
.sv-tile { fill: #F3F1EC; stroke: #8A90A0; stroke-width: 1.6; stroke-linejoin: miter; }
.sv-grout { fill: #B9BEC8; }
@media (min-width: 641px) { .faces.drawn.tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.faces.drawn.tiles svg { max-width: 220px; }
/* Heating systems: text under each picture */
.sys-text { max-width: 860px; margin: -16px 0 52px; }
.sys-text h3 { margin: 0 0 6px; }
.sys-text p { margin: 0 0 10px; }
.pc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; color: var(--muted); }
@media (max-width: 640px) { .pc { grid-template-columns: 1fr; } }
.sv-bd { fill: none; stroke: #4A4F5C; stroke-width: 1.2; stroke-linejoin: round; }
.fl-top { fill: #C9965F; } .fl-hdf { fill: #9C7A58; } .fl-back { fill: #6E5640; }
.fl-spc { fill: #A7ADB5; } .fl-pad { fill: #5D6470; } .fl-under { fill: #E8EDF2; }
.fl-ply1 { fill: #E4C89B; } .fl-ply2 { fill: #CFAE7C; } .fl-oak { fill: #C08A52; }
.fl-sub { fill: #DCC197; stroke: #B08A57; stroke-width: 1; }
.faces.drawn.joints svg { max-width: 260px; }
.fl-arrow { fill: none; stroke: var(--accent); stroke-width: 2; }
.fl-arrowhead { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.faces.drawn.siding svg { max-width: 260px; }
/* Option cards: one picture per option with its words underneath */
.opt-cards { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 250px)); gap: 32px 28px; }
.opt img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--line); background: #fff; margin-bottom: 12px; }
.opt h4 { margin: 0 0 6px; font-size: 1.0625rem; }
.opt p { margin: 0; color: var(--ink); font-size: 0.96875rem; line-height: 1.5; }
@media (max-width: 640px) { .opt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .opt p { font-size: 0.9375rem; } }