/* Knockety "See it on your house" page. Reuses the widget's classes (tryon-widget.css is loaded by the page too) and adds the page layout.
   Brand: navy #19455C, orange #FD9946, Futura headings, Proxima Nova body. Focus rings navy on white, white on navy. */
#kt-page{max-width:900px;margin:0 auto;padding:20px 16px 48px;font-family:"Proxima Nova",Arial,sans-serif;color:#1c1c1c}
.ktp-head{text-align:center;margin:0 auto 18px;max-width:720px}
.ktp-h1{font:700 2rem/1.15 Futura,"Proxima Nova",Arial,sans-serif;color:#19455C;margin:0 0 10px;text-transform:none}
.ktp-lead{font-size:1.05rem;line-height:1.5;color:#333;margin:0}
.ktp-h2{font:700 1.35rem/1.2 Futura,"Proxima Nova",Arial,sans-serif;color:#19455C;margin:28px 0 12px;text-transform:none}
.ktp-card{background:#fff;border:1px solid #E6ECF0;border-radius:10px;padding:18px;box-shadow:0 6px 24px rgba(25,69,92,.08);margin:0 0 16px}
.ktp-card .kt-step{margin:0 0 10px}
.ktp-drop{min-height:150px}
.ktp-wide{display:block;width:100%;box-sizing:border-box;text-align:center;padding:.95rem 1rem;font-size:1.05rem;margin:12px 0 0}
.kt-secondary.ktp-wide{margin:12px 0 0}
.ktp-reuse{display:flex;gap:16px;align-items:flex-start}
.ktp-thumb{width:120px;height:160px;object-fit:cover;border-radius:6px;border:1px solid #E6ECF0;flex:0 0 auto}
.ktp-reuse-txt{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0}
.ktp-reuse-txt strong{color:#19455C;font-size:1.1rem}
.ktp-reuse-txt .kt-link{align-self:flex-start;margin-top:2px}
.ktp-finish-label{margin:8px 0 4px;font-weight:700;color:#19455C}
.ktp-finish-strip{margin-bottom:0}
.ktp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.kt-chip.is-on{background:#19455C;color:#fff}
.ktp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;list-style:none;padding:0;margin:0}
.ktp-door{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border:2px solid #E6ECF0;border-radius:8px;background:#fff;cursor:pointer;text-align:left;font-family:inherit;color:#1c1c1c;position:relative}
.ktp-door:hover{border-color:#19455C}
.ktp-door:focus-visible{outline:3px solid #19455C;outline-offset:2px;box-shadow:0 0 0 2px #fff}
.ktp-door img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;background:#F4F7F9}
.ktp-door-name{font-weight:700;font-size:.9rem;line-height:1.25;color:#19455C;min-height:2.5em}
.ktp-door-cta{display:block;text-align:center;background:#FD9946;color:#1c1c1c;font-weight:700;font-size:.85rem;padding:.55rem .5rem;border-radius:4px}
.ktp-door.is-saved .ktp-door-cta{background:#19455C;color:#fff}
.ktp-door.is-saved:after{content:"\2713";position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:#19455C;color:#fff;font:700 14px/22px Arial,sans-serif;text-align:center}
.ktp-result-title{font-weight:700;color:#19455C;margin-top:10px}
.ktp-faq ul{list-style:none;padding:0;margin:0}
.ktp-faq li{padding:10px 0;border-bottom:1px solid #E6ECF0;line-height:1.5;color:#333}
.ktp-faq strong{color:#19455C}
.kt-error[hidden]{display:none}
@media (max-width:480px){
  #kt-page{padding:14px 12px 40px}
  .ktp-h1{font-size:1.6rem}
  .ktp-lead{font-size:.98rem}
  .ktp-card{padding:14px}
  .ktp-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ktp-door-name{font-size:.82rem}
  .ktp-reuse{flex-direction:column}
  .ktp-thumb{width:100%;height:auto;max-height:240px}
  .kt-email{grid-template-columns:1fr}
}
/* phones zoom in on inputs under 16px and stay zoomed (the widget learnt this the hard way) */
#kt-page input,#kt-page select,#kt-page textarea{font-size:16px!important}
/* 2026-10-05 Codex: the chosen finish must be told apart by more than orange on white (2.14:1): navy ring + tick, 8.6:1 */
#kt-page .kt-finish.is-current{border-color:#19455C;box-shadow:0 0 0 2px #19455C inset;background:#F4F7F9}
#kt-page .kt-finish.is-current:after{content:"\2713";position:absolute;top:3px;right:5px;width:18px;height:18px;border-radius:50%;background:#19455C;color:#fff;font:700 12px/18px Arial,sans-serif;text-align:center}
#kt-page .kt-finish.is-saved:after{background:#19455C}
/* a scrolled-to step must land under the sticky header, not behind it */
.ktp-stage,.ktp-picker{scroll-margin-top:130px}
@media (max-width:800px){.ktp-stage,.ktp-picker{scroll-margin-top:150px}}
.ktp-grid{list-style:none;padding:0;margin:0}
.ktp-grid li{margin:0}
.ktp-grid li .ktp-door{width:100%;height:100%;box-sizing:border-box}
/* 2026-10-05 Codex round 2: a focused chip must look focused even when it is the chosen one (outer navy outline, separate from the inset ring) */
#kt-page .kt-finish:focus-visible{outline:3px solid #19455C;outline-offset:3px;box-shadow:0 0 0 2px #19455C inset}
/* room under the last control for the chat bubble and the Klaviyo teaser that float over the page's bottom edge */
#kt-page{padding-bottom:140px}
/* static text under the tool (2026-10-05): crawlable, same width as the tool */
.ktp-static{max-width:900px;margin:0 auto;padding:0 16px 48px;font-family:"Proxima Nova",Arial,sans-serif;color:#1c1c1c;line-height:1.5}
.ktp-static h2{font:700 1.35rem/1.2 Futura,"Proxima Nova",Arial,sans-serif;color:#19455C;margin:28px 0 12px;text-transform:none}
.ktp-static ol{padding-left:20px}.ktp-static li{margin:6px 0}
.ktp-static a{color:#19455C;text-decoration:underline;text-underline-offset:3px}
.ktp-static a:focus-visible{outline:3px solid #19455C;outline-offset:2px}
.ktp-faq{margin:0}.ktp-faq dt{font-weight:700;color:#19455C;margin-top:12px}.ktp-faq dd{margin:4px 0 0}
#kt-page{padding-bottom:24px}