/* Homepage refinements: product geometry, compact quote flow, clear controls. */
:root { --control-line: #728e9e; }
:root[data-theme=light] { --control-line: #718590; }
.hero-grid { align-items: center; }
.product-demo { min-width: 0; }
.hardware-diagram { margin: 0; }
.hardware-diagram svg { display: block; width: 100%; height: auto; }
.diagram-outline { stroke: var(--control-line); stroke-width: 1.5; fill: none; }
.diagram-product { fill: var(--surface); }
.diagram-phone { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.diagram-notification { fill: var(--sky); stroke: var(--cyan); }
.diagram-type { fill: var(--ink); font-family: var(--body); }
.diagram-prompt { font-size: 16px; font-weight: 500; }
.diagram-label { font-size: 17px; font-weight: 600; }
.diagram-small { font-size: 13px; fill: var(--slate); }
.diagram-phone-copy { font-size: 10px; }
.diagram-tap { stroke: var(--cyan); }
.hardware-diagram figcaption { margin: 14px 0 24px; font-size: 12px; color: var(--muted); text-align: center; }
.tap-instructions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tap-instructions li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 13px 0; }
.tap-instructions li > span { font: 500 15px var(--display); color: var(--cyan); padding-top: 2px; }
.tap-instructions strong { font: 500 16px/1.4 var(--display); }
.tap-instructions p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; }
.card-reference { margin: 0; align-self: center; }
.card-reference figcaption { padding: 8px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.hardware-options-heading { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: end; margin: 58px 0 24px; padding-top: 30px; border-top: 1px solid var(--line); }
.hardware-options-heading h3 { margin: 5px 0 0; font-size: clamp(24px, 2.5vw, 34px); }
.hardware-options-heading p { margin: 0; max-width: 590px; font-size: 15px; }
.hardware-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hardware-reference { min-width: 0; margin: 0; }
.hardware-reference-image { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.hardware-reference-image img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hardware-reference figcaption { display: flex; flex-direction: column; gap: 3px; padding: 13px 1px 0; }
.hardware-reference figcaption span { color: var(--cyan); font-size: 11px; font-weight: 600; }
.hardware-reference figcaption strong { color: var(--ink); font: 600 16px/1.35 var(--display); }
.hardware-reference figcaption small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.future-hardware { margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.future-hardware strong { color: var(--ink); font-weight: 500; }
#quote-form input, #quote-form select, #quote-form textarea, #quote-form .radio-grid span { border-color: var(--control-line); }
#quote-form input[aria-invalid=true], #quote-form select[aria-invalid=true], #quote-form textarea[aria-invalid=true], #quote-form .radio-grid input[aria-invalid=true] + span { border-color: var(--danger); }
#quote-form .radio-grid input:checked + span { border-color: var(--cyan); }
#quote-form .radio-grid input:focus-visible + span { outline-color: var(--cyan); }
#quote-form .radio-grid input:disabled + span { opacity: .6; cursor: not-allowed; }
.form-guidance { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.security-check { margin: 6px 0 4px; }
.security-check > p { margin: 0; font-size: 14px; }
.security-check > p strong, .security-check > p small { display: block; }
.security-check > p small { margin-top: 2px; color: var(--muted); font-weight: 400; }
.turnstile-wrap[aria-invalid="true"] { border-left: 3px solid var(--danger); padding-left: 10px; }
.quote-next { margin-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.quote-next summary { padding: 16px 0; cursor: pointer; font-weight: 500; }
.quote-next ol { margin: 0; padding: 0 0 4px 22px; color: var(--slate); }
.quote-next li { padding-bottom: 10px; }
@media (min-width: 641px) and (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr 1.1fr; gap: 32px; }
  .hero h1 { font-size: clamp(38px, 5.2vw, 50px); }
  .hardware-options-heading { gap: 36px; }
  .hardware-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
}
@media (max-width: 640px) {
  .hero .hero-grid { gap: 36px; }
  .hardware-diagram { max-width: 440px; margin-inline: auto; }
  .tap-instructions { margin-top: 0; }
  .quote-grid { gap: 20px; }
  .quote-copy > p { margin-bottom: 0; }
  .form-guidance { margin-bottom: 16px; }
  .hardware-options-heading { grid-template-columns: 1fr; gap: 12px; margin-top: 42px; }
  .hardware-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .hardware-reference figcaption strong { font-size: 14px; }
}
@media (max-width: 390px) {
  .hardware-reference-grid { grid-template-columns: 1fr; }
}