/* Shipping narrative only; the approved SVG/CSS world and homepage retain their original styling. */
#narrative{position:absolute;inset:0;z-index:2;pointer-events:none;color:var(--cream);font-family:var(--ui)}
#supportPromise{position:absolute;top:max(42px,8svh);left:5%;width:90%;text-align:center;font:400 clamp(25px,4.8vw,54px)/1.03 var(--impact);letter-spacing:-.025em;text-shadow:0 3px 24px #0B080E}
#supportPromise span,#supportPromise strong{display:block}#supportPromise strong{color:var(--lantern);font-weight:400}
.storyCard{position:absolute;top:16%;left:max(20px,calc(50% - 210px));width:min(420px,calc(100% - 40px));box-sizing:border-box;margin:0;padding:18px 20px;background:#F7EEDF;color:#211A2A;border-radius:10px;border:1px solid #B99A68;border-left:5px solid #FFB547;box-shadow:0 12px 36px #0B080E66;opacity:0;transform-origin:center}
.storyCard small{display:block;font:700 11px/1.3 var(--ui);letter-spacing:.06em;color:#67471B}
.storyCard p{margin:9px 0 0;font:500 clamp(18px,2.4vw,22px)/1.35 var(--ui)}
.storyCard strong{font-weight:700}.sourceMark{display:block;margin-top:10px;font:600 13px/1.25 var(--ui);color:#67471B}
#sourceEvidence,#preparedAnswer{top:max(44px,9svh)}
#preparedAnswer small{font-size:13px;color:#67471B}
#introDisclosure{position:absolute;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:4;margin:0;text-align:center;font:500 14px/1.3 var(--ui);color:#F7EEDF;text-shadow:0 2px 8px #0B080E;background:#15111Ce8;padding:6px 10px;border-radius:6px;width:max-content;max-width:calc(100% - 24px);margin-inline:auto}
#ictl{z-index:5}#ictl button:focus-visible,.protoReplay:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
@media(min-width:901px){#supportPromise{top:7svh}#customerQuestion{top:17%}}
@media(max-width:380px){#supportPromise{font-size:24px}.storyCard{padding:14px 16px}.storyCard p{font-size:18px}#sourceEvidence small{font-size:10px}}
@media(max-height:600px){#supportPromise{top:20px;font-size:25px}#sourceEvidence,#preparedAnswer{top:18px}.storyCard{padding:12px 16px}.storyCard p{font-size:18px}#introDisclosure{bottom:64px}}
@media(prefers-reduced-motion:reduce){#intro{display:none!important}}

/* Separate truthful demo context from the owner-facing value proposition. */
.hero-demo-note{margin-top:14px;color:var(--mist);font:500 13px/1.45 var(--ui);max-width:46ch}
/* Content-sized mobile hero: reserve browser/safe-area clearance through compact flow,
   not a fixed CTA, viewport-height spacer, or body scroll lock. svh tracks the smaller
   browser viewport; env() preserves the home-indicator inset on physical iPhones. */
@media(max-width:900px){
 .hero{grid-template-rows:auto auto auto;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));row-gap:0}
 .house{width:min(30vw,16svh,128px);margin:0 0 12px}
 .hero-top{padding:8px 0}
 .hero-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-weight:700;color:var(--lantern)}
 .hero .pep{display:flex;font-size:11px;line-height:1.2;letter-spacing:.1em}
 .hero h1{margin-top:12px;font-size:clamp(28px,9vw,40px);line-height:1.02}
 .hero .hero-lede{margin-top:12px;font-size:17px;line-height:1.45}
 .hero .actions{margin-top:16px;gap:10px}
 .hero .actions .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
 .hero-demo-note{margin-top:12px}
}
@media(max-width:520px){.protoBar{font-size:11px;gap:8px}.protoReplay{padding-inline:10px}}
/* Very short viewports use the same hierarchy without pushing the primary CTA into browser chrome. */
@media(max-width:520px) and (max-height:600px){.house{width:72px;margin-bottom:10px}.hero-top{padding:4px 0}.hero .hero-lede{font-size:16px}.hero .actions{margin-top:12px}}
@media(max-width:520px) and (max-height:520px){.house{width:48px}.hero-top{padding:0}.hero h1,.hero .hero-lede{margin-top:10px}.hero .actions{margin-top:10px}}