/* Scoped existing guided-sample styles. Keep sample controls aligned with site.css. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
}
.sample-section {
  --site-ink: hsl(var(--cv-text-primary));
  --site-muted: hsl(var(--cv-text-secondary));
  --site-paper: hsl(var(--cv-surface-main));
  --site-white: hsl(var(--cv-surface-card));
  --site-navy: hsl(var(--cv-surface-main));
  --site-blue: #4fc3f7;
  --site-action: #0d47a1;
  --site-blue-wash: hsl(var(--cv-surface-soft));
  --site-line: hsl(var(--cv-border-subtle));
  --site-highlight: #4fc3f7;
  --site-success-bg: hsl(var(--cv-success-bg));
  --site-success-fg: hsl(var(--cv-success-fg));
}
.sample-section .container {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
}
.sample-section h1,
.sample-section h2,
.sample-section h3,
.sample-section p {
  margin-top: 0;
}
.sample-section h1,
.sample-section h2,
.sample-section h3 {
  font-weight: 600;
}
.sample-section h1 {
  font-size: clamp(44px, 5.15vw, 76px);
  letter-spacing: -0.058em;
  line-height: 1.04;
  margin-bottom: 26px;
}
.sample-section h1 > span {
  color: var(--site-blue);
}
.sample-section h2 {
  font-size: clamp(34px, 3.5vw, 50px);
  letter-spacing: -0.045em;
  line-height: 1.13;
  margin-bottom: 22px;
}
.sample-section h3 {
  font-size: 22px;
  letter-spacing: -0.025em;
}
.sample-section p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--site-muted);
}
.sample-section .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--site-blue);
  color: white;
  border: 1px solid var(--site-blue);
  border-radius: 5px;
  padding: 16px 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition:
    background 0.2s,
    transform 0.2s;
}
.sample-section .button:hover {
  background: #123fa8;
  border-color: #123fa8;
  transform: translateY(-2px);
}
.sample-section .button > span {
  font-size: 20px;
  line-height: 1;
}
.sample-section .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 80px;
  margin-bottom: 45px;
}
.sample-section .section-heading h2 {
  margin-bottom: 0;
}
.sample-section .section-heading > p {
  max-width: 345px;
  margin-bottom: 4px;
}
@media (max-width: 1100px) {
  .sample-section .container {
    width: calc(100% - 56px);
  }
}
@media (max-width: 800px) {
  .sample-section .section-heading {
    gap: 35px;
    align-items: start;
  }
  .sample-section .section-heading > p {
    max-width: 260px;
    font-size: 14px;
  }
}
@media (max-width: 520px) {
  .sample-section .container {
    width: calc(100% - 40px);
  }
  .sample-section .section-heading {
    display: block;
    margin-bottom: 30px;
  }
  .sample-section .section-heading > p {
    max-width: none;
    margin-top: 24px;
  }
}
@media (max-width: 360px) {
  .sample-section .container {
    width: calc(100% - 32px);
  }
}
@media print {
  .sample-section .container {
    width: 100%;
  }
}
.sample-section .button {
  background: #0d47a1;
  max-width: 100%;
  white-space: normal;
  color: hsl(var(--cv-text-selected));
  border-color: hsl(var(--cv-accent));
  border-radius: 10px;
}
.sample-section .button:hover {
  background: #115bbb;
  border-color: var(--site-blue);
}
.sample-section { scroll-margin-top: 100px; }
.sample-section .sample-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.sample-section .sample-drawing, .sample-section .sample-quote { min-width: 0; border: 1px solid var(--site-line); border-radius: 12px; padding: 24px; background: var(--site-white); color: var(--site-ink); }
.sample-section .sample-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sample-section .sample-tools button { font: inherit; font-size: 14px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--site-line); border-radius: 6px; background: var(--site-paper); color: var(--site-ink); cursor: pointer; }
.sample-section .sample-tools button[aria-pressed="true"] { background: var(--site-blue); color: var(--site-navy); border-color: var(--site-blue); }
.sample-section .sample-layout button:disabled { background: var(--site-paper); color: var(--site-muted); border-color: var(--site-line); cursor: default; }
.sample-section .sample-layout svg { display: block; width: 100%; height: auto; background: var(--site-paper); border-radius: 8px; }
.sample-section .sample-layout svg text { font-family: Montserrat, sans-serif; font-size: 24px; fill: var(--site-ink); }
.sample-section .sample-room { fill: var(--site-white); stroke: var(--site-blue); stroke-width: 8; }
.sample-section .sample-lights { fill: var(--site-white); stroke: var(--site-ink); stroke-width: 4; }
.sample-section .sample-measurement { fill: none; stroke: var(--site-blue); stroke-width: 6; stroke-linejoin: round; }
.sample-section polygon.sample-measurement { fill: var(--site-blue-wash); }
.sample-section .sample-point { fill: var(--site-blue); stroke: var(--site-ink); stroke-width: 3; }
.sample-section .sample-layout svg .sample-note { font-size: 22px; fill: var(--site-ink); stroke: var(--site-paper); stroke-width: 5; paint-order: stroke; }
.sample-section .sample-keyboard-help { font-size: 13px; line-height: 1.7; color: var(--site-muted); }
.sample-section .sample-layout [hidden] { display: none; }
.sample-section .sample-layout label { display: block; font-weight: 600; }
.sample-section .sample-layout input { width: 100%; padding: 12px; font: inherit; background: var(--site-paper); color: var(--site-ink); border: 1px solid var(--site-line); border-radius: 6px; }
.sample-section .sample-quote dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--site-line); }
.sample-section .sample-quote dd { margin: 0; font-weight: 700; }
.sample-section .sample-quote .button { margin-top: 12px; cursor: pointer; }
.sample-section .sample-result { font-size: 22px; font-weight: 600; }
@media (max-width: 800px) {
  .sample-section .sample-layout { grid-template-columns: minmax(0, 1fr); }
  .sample-section .sample-drawing, .sample-section .sample-quote { padding: 16px; }
  .sample-section .sample-quote .button { max-width: 100%; white-space: normal; }
}

.sample-section .sample-layout select { width: 100%; max-width: 100%; padding: 12px; font: inherit; background: var(--site-paper); color: var(--site-ink); border: 1px solid var(--site-line); border-radius: 6px; }
.sample-section .sample-calibration { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.sample-section .sample-calibration input { flex: 1 1 120px; min-width: 0; width: auto; }
.sample-section .sample-layout .sample-calibration .button { margin: 0; min-height: 44px; cursor: pointer; }
.sample-section .sample-layout svg { background: #fff; }
.sample-section .sample-target { fill: #fff; stroke: var(--site-action); stroke-width: 3; }
.sample-section .sample-point { fill: var(--site-action); stroke: #fff; }
.sample-section .sample-measurement { stroke: var(--site-action); stroke-width: 4; }
.sample-section polygon.sample-measurement { fill: var(--site-blue); fill-opacity: .14; }
.sample-section .sample-layout svg .sample-guide, .sample-section .sample-layout svg .sample-note { font-size: 22px; font-weight: 700; fill: #0a203d; stroke: #fff; stroke-width: 6; paint-order: stroke; }