/* FireHelm in 60 seconds (teaser carousel). Self-contained so it works on any page. */
.teaser { --line: #2A2C31; --line-2: #3A3C42; --bone: #F2F1EE; --soft: #C8CAD0; --blue: #2E8BFF; --blue-hi: #6AAEFF; --t3: #E0301E; --t4: #FF6A13; --t5: #FFB23F;
  --display: "Archivo", "Arial Black", sans-serif; --body: "Instrument Sans", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; color: var(--bone); font-family: var(--body); }
.teaser .btn { display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 999px; border: 1px solid transparent; }
.teaser .btn.primary { background: var(--blue); color: #04070D; }
.teaser .btn.ghost { border-color: var(--line-2); color: var(--bone); }
.teaser img { max-width: none; }
.teaser { margin: 0; }
.tz-stage { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 80% 0%, #1D1E22, #0B0B0C 60%); border: 1px solid var(--line); isolation: isolate; outline: none; }
.tz-stage:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.tz-bars { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; gap: 5px; z-index: 5; }
.tz-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(242,241,238,.22); overflow: hidden; }
.tz-bars b { display: block; height: 100%; width: 0; background: var(--bone); }
.tz-scene { position: absolute; inset: 0; }
.tz-scene.on { animation: tzin .6s ease both; }
@keyframes tzin { from { opacity: 0; } to { opacity: 1; } }
.tz-vis { position: absolute; inset: 0; overflow: hidden; }
.tz-photo { width: 100%; height: 100%; object-fit: cover; }
.tz-scene.on .tz-photo { animation: kb 9s ease-out both; }
@keyframes kb { from { transform: scale(1.0); } to { transform: scale(1.07) translate(-1%, 1%); } }
.tz-screen { position: absolute; left: 50%; top: 7%; width: 84%; transform: translateX(-50%); border-radius: 12px; overflow: hidden; border: 1px solid #3A3C42; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 6px rgba(255,255,255,.03); }
.tz-screen img { width: 100%; display: block; }
.tz-scene.on .tz-screen img { animation: drift 9s ease-out both; }
@keyframes drift { from { transform: scale(1.0); transform-origin: 30% 20%; } to { transform: scale(1.05); transform-origin: 30% 20%; } }
.tz-backdrop { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(14px) brightness(.35) saturate(.8); }
.tz-phone { position: absolute; right: 9%; top: 6%; height: 88%; aspect-ratio: 9 / 19.5; border-radius: 34px; border: 9px solid #0E0E10; box-shadow: 0 0 0 1px #3A3C42, 0 40px 80px -20px rgba(0,0,0,.9); overflow: hidden; background: #fff; }
.tz-phone img { width: 100%; display: block; }
.tz-scene.on .tz-phone img { animation: phonescroll 8s ease-in-out 1s both; }
@keyframes phonescroll { from { transform: translateY(0); } to { transform: translateY(-12%); } }
.tz-tall { position: absolute; right: 8%; top: 7%; width: 40%; height: 86%; border-radius: 12px; overflow: hidden; border: 1px solid #3A3C42; background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.tz-tall img { width: 100%; display: block; }
.tz-scene.on .tz-tall img { animation: recscroll 8s ease-in-out .6s both; }
@keyframes recscroll { from { transform: translateY(0); } to { transform: translateY(-38%); } }
.tz-verify { position: absolute; right: 5%; top: 14%; width: 50%; display: grid; gap: 14px; }
.tz-verify img { width: 100%; display: block; border-radius: 10px; border: 1px solid #3A3C42; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.tz-edit { justify-self: start; font-family: var(--mono); font-size: 13px; color: var(--t5); border: 1px dashed rgba(255,178,63,.6); border-radius: 8px; padding: 6px 10px; background: rgba(255,178,63,.08); }
.tz-scene.on .tz-edit { animation: pop .4s ease 2.6s both; }
.tz-scene.on .bad { animation: slidein .5s ease 3.2s both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tz-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 28px 26px; background: linear-gradient(0deg, rgba(7,7,8,.96) 30%, rgba(7,7,8,0)); z-index: 3; max-width: 100%; }
.tz-k-phone .tz-cap, .tz-k-tall .tz-cap, .tz-k-verify .tz-cap { top: 0; right: auto; width: 43%; padding: 0 28px; display: flex; flex-direction: column; justify-content: center; background: none; }
.tz-cap h3 { margin: 0 0 6px; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(20px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -.005em; color: var(--bone); max-width: 22em; text-wrap: balance; }
.tz-cap p { margin: 0; color: var(--soft); font-size: clamp(14px, 1.3vw, 17px); max-width: 36em; }
.tz-n { display: block; font-family: var(--mono); font-size: 12px; color: var(--blue-hi); margin-bottom: 8px; }
.tz-tag { position: absolute; right: 14px; top: 26px; z-index: 4; font-size: 12px; color: var(--soft); background: rgba(7,7,8,.7); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.tz-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 40px 24px; background: radial-gradient(70% 70% at 50% 110%, rgba(224,48,30,.35), transparent 70%); }
.tz-end svg { width: 64px; height: 64px; }
.tz-end-h { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 3.6vw, 48px); line-height: 1.05; color: var(--bone); max-width: 16em; text-wrap: balance; }
.tz-end-p { margin: 0; color: var(--soft); max-width: 34em; }
.tz-end-b { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.tz-ctl { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; gap: 6px; }
.tz-ctl button { font: 600 14px var(--body); color: var(--bone); background: rgba(7,7,8,.72); border: 1px solid var(--line-2); border-radius: 999px; min-width: 38px; height: 34px; padding: 0 12px; cursor: pointer; }
.tz-ctl button:hover { border-color: var(--bone); }
.tz-ctl .tz-prev, .tz-ctl .tz-next { font-size: 20px; line-height: 1; padding: 0 10px; }
@media (max-width: 760px) {
  .tz-stage { aspect-ratio: 4 / 5; }
  .tz-screen { top: 9%; width: 94%; }
  .tz-phone { left: 50%; right: auto; transform: translateX(-50%); top: 7%; height: 62%; border-width: 7px; border-radius: 26px; }
  .tz-tall { left: 6%; right: 6%; width: auto; top: 8%; height: 56%; }
  .tz-verify { left: 5%; right: 5%; width: auto; top: 10%; gap: 10px; }
  .tz-edit { font-size: 12px; }
  .tz-k-phone .tz-cap, .tz-k-tall .tz-cap, .tz-k-verify .tz-cap { top: auto; bottom: 0; width: auto; right: 0; padding: 60px 18px 60px; background: linear-gradient(0deg, rgba(7,7,8,.97) 45%, rgba(7,7,8,0)); display: block; }
  .tz-cap { padding: 60px 18px 60px; }
  .tz-photo { object-position: 60% 40%; }
}
@media (prefers-reduced-motion: reduce) { .tz-scene.on, .tz-scene.on * { animation: none !important; } .tz-scene.on .bad, .tz-scene.on .tz-edit { opacity: 1; } }

/* Two phones side by side (homeowner scene) */
.tz-phones { position: absolute; right: 6%; top: 6%; height: 88%; width: 46%; }
.tz-phones .tz-phone { top: 0; height: 100%; right: auto; background: #0A0A0B; }
.tz-phones .tz-phone-0 { left: 0; transform: rotate(-3deg); }
.tz-phones .tz-phone-1 { right: 0; left: auto; top: 4%; transform: rotate(2.5deg); z-index: 2; }
.tz-scene.on .tz-phones .tz-phone-0 img { animation: none; }
@media (max-width: 760px) {
  .tz-phones { left: 4%; right: 4%; width: auto; top: 7%; height: 60%; }
  .tz-phones .tz-phone { border-width: 6px; border-radius: 22px; }
  .tz-phones .tz-phone-0 { left: 6%; transform: rotate(-3deg); }
  .tz-phones .tz-phone-1 { right: 6%; transform: rotate(2.5deg); }
}