/* USAHI presentation player — iPad-first, horizontal swipe */
:root{
  --bar-h: 54px;
  --brand: #01568D;
  --accent: #FF293E;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column}

/* ---------- stage ---------- */
#stage{position:relative;flex:1;overflow:hidden;background:#000;touch-action:pan-y}
#track{position:absolute;inset:0;display:flex;will-change:transform}
.slide{position:relative;flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
.canvas{position:relative;transform-origin:center center;overflow:hidden;background:#fff}
.cmp{position:absolute}
.cmp.tappable{cursor:pointer}
.cmp.tappable:active{filter:brightness(.94)}
.media-wrap{position:absolute;overflow:hidden}
.media-wrap>img,.media-wrap>video{position:absolute;inset:0;width:100%;height:100%;display:block}
.rt{display:flex;flex-direction:column;white-space:pre-wrap;word-break:break-word}
.rt p{margin:0}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---------- compare slider ---------- */
.compare{position:absolute;overflow:hidden;touch-action:none}
.compare .layer{position:absolute;inset:0}
.compare .layer img{width:100%;height:100%;object-fit:cover;display:block}
.compare .top{clip-path:inset(0 0 0 0)}
.compare .handle{position:absolute;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.5)}
.compare.h .handle{top:0;bottom:0;width:3px;margin-left:-1.5px}
.compare.v .handle{left:0;right:0;height:3px;margin-top:-1.5px}
.compare .knob{position:absolute;width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;
  left:50%;top:50%;transform:translate(-50%,-50%)}
.compare .knob svg{width:24px;height:24px;fill:none;stroke:#01568D;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- story bar ---------- */
#storybar{height:var(--bar-h);flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:0 10px calc(env(safe-area-inset-bottom)*0);background:#fff;border-top:1px solid #e6e6e6;
  padding-bottom:env(safe-area-inset-bottom)}
#storybar{height:calc(var(--bar-h) + env(safe-area-inset-bottom))}
#tocBtn{flex:0 0 auto;width:40px;height:40px;border:0;background:transparent;padding:8px;cursor:pointer}
#tocBtn svg{width:100%;height:100%;fill:none;stroke:#000;stroke-width:2;stroke-linecap:round}
#sectionTabs{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#sectionTabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;border:0;background:transparent;color:#000;font:600 11px/1 Montserrat,sans-serif;
  letter-spacing:.4px;padding:9px 13px;border-radius:20px;white-space:nowrap;cursor:pointer;font-family:inherit}
.tab.on{background:var(--brand);color:#fff}
#pageCount{flex:0 0 auto;font:600 12px/1 Montserrat,sans-serif;color:#8a8a8a;padding-left:6px}

/* ---------- edge buttons ---------- */
.edge{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;
  background:rgba(255,255,255,.72);backdrop-filter:blur(6px);cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
#stage:hover .edge{opacity:1}
.edge-left{left:0;border-radius:0 8px 8px 0}
.edge-right{right:0;border-radius:8px 0 0 8px}
.edge svg{width:22px;height:22px;fill:none;stroke:#01568D;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.edge[disabled]{opacity:0!important;pointer-events:none}
@media (hover:none){.edge{display:none}}

/* ---------- TOC sheet ---------- */
.sheet{position:fixed;inset:0;z-index:40}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sheet-body{position:absolute;left:0;top:0;bottom:0;width:min(380px,86vw);background:#fff;
  display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.35);animation:slideIn .22s ease}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eee}
.sheet-head h2{margin:0;font:700 15px/1 Montserrat,sans-serif;letter-spacing:.6px;color:var(--brand)}
.sheet-head button{border:0;background:transparent;font-size:26px;line-height:1;color:#888;cursor:pointer}
#tocList{flex:1;overflow-y:auto;padding:8px 0 24px}
.toc-sec{padding:14px 18px 6px;font:700 11px/1 Montserrat,sans-serif;letter-spacing:.9px;color:#9a9a9a}
.toc-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 6px}
.toc-thumb{position:relative;aspect-ratio:4/3;border:2px solid transparent;border-radius:4px;overflow:hidden;
  background:#f2f2f2;cursor:pointer;padding:0}
.toc-thumb.on{border-color:var(--accent)}
.toc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.toc-thumb span{position:absolute;left:3px;bottom:3px;background:rgba(0,0,0,.6);color:#fff;
  font:600 9px/1 Montserrat,sans-serif;padding:2px 4px;border-radius:2px}

/* ---------- modal (popups) ---------- */
#modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.modal-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-box{position:relative;max-width:96vw;max-height:94vh;border-radius:6px;overflow:visible;
  box-shadow:0 12px 40px rgba(0,0,0,.35);animation:pop .22s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.modal-content{border-radius:6px;overflow:hidden;background:#fff}
.modal-close{position:absolute;top:-14px;right:-14px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;
  background:#fff;color:var(--accent);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.modal-content iframe{border:0;display:block;width:100%;height:100%;background:#fff}

/* ---------- lightbox (carousels) ---------- */
#lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center}
.lb-track{position:absolute;inset:0;display:flex;transition:transform .28s cubic-bezier(.2,.8,.3,1);touch-action:pan-y}
.lb-track figure{flex:0 0 100%;margin:0;display:flex;align-items:center;justify-content:center;padding:5vh 4vw}
.lb-track img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:16px;z-index:3;width:40px;height:40px;
  border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-nav svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-dots{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:0;right:0;z-index:3;
  display:flex;justify-content:center;gap:7px}
.lb-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.lb-dots i.on{background:#fff}

#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;
  color:#01568D;font:600 14px Montserrat,sans-serif;letter-spacing:.5px;z-index:100}
[hidden]{display:none!important}

/* ---------- video controls (autoplaying clips have no controls bar) ---------- */
.vmute,.vfull{position:absolute;bottom:10px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  opacity:.85;transition:opacity .15s,background .15s}
.vmute{right:10px}
.vfull{right:54px}
.vmute:hover,.vfull:hover{opacity:1;background:rgba(0,0,0,.6)}
.vmute:focus-visible,.vfull:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1}
.vmute svg,.vfull svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.vmute.off{background:rgba(255,41,62,.82)}
.vmute.off:hover{background:rgba(255,41,62,.95)}
@media (prefers-reduced-motion:reduce){.vmute,.vfull{transition:none}}

/* ---- savings calculator (was an iframe onto the website) ----
   Sized in canvas pixels: the whole slide is drawn at 1024x768 and scaled,
   so these numbers are the same on every screen. */
.calc{display:flex;flex-direction:column;background:#fff;border:1px solid #DCE3EA;
  border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(16,37,60,.08);
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#10253C}
.calc-head{flex:0 0 auto;background:#01568D;color:#fff;padding:11px 14px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.calc-body{flex:1;display:flex;flex-direction:column;padding:14px 14px 11px;min-height:0}

.cf{margin-bottom:13px}
.cf label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#7A8896;margin-bottom:4px}
.cf-row{display:flex;align-items:stretch;gap:6px}
.cf-step{flex:0 0 32px;border:1px solid #DCE3EA;background:#F5F8FA;border-radius:7px;
  color:#01568D;font:600 17px/1 inherit;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cf-step:active{background:#E4EDF4}
.cf-in{flex:1;display:flex;align-items:center;gap:3px;border:1px solid #DCE3EA;
  border-radius:7px;background:#fff;padding:0 10px;min-width:0}
.cf-in:focus-within{border-color:#01568D;box-shadow:0 0 0 2px rgba(1,86,141,.12)}
.cf-in span{font-size:14px;font-weight:600;color:#9AA7B4}
.cf-in input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;
  padding:9px 0;font:600 17px inherit;color:#10253C;letter-spacing:-.01em}

.calc-lines{border-top:1px solid #EDF1F5;padding-top:8px;margin-top:auto}
.calc-lines div{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;line-height:1.85;color:#5A6975}
.calc-lines b{font-weight:600;color:#10253C;font-variant-numeric:tabular-nums}

.calc-net{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  border-top:1px solid #EDF1F5;margin-top:7px;padding-top:9px}
.calc-net b{font-size:27px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.calc-net b.up{color:#12864A}
.calc-net b.down{color:#C8202E}
.calc-net span{font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#7A8896;text-align:right}

.calc-note{margin:8px 0 0;font-size:8.5px;line-height:1.5;color:#9AA7B4}

/* ---- reviews (was an iframe onto the website's testimonials page) ---- */
.reviews{display:flex;flex-direction:column;padding:34px 30px;overflow:hidden;position:relative;
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#fff}
.reviews.bare{justify-content:center;align-items:center;text-align:center}

.rv-head{flex:0 0 auto;display:flex;align-items:center;gap:16px;margin-bottom:18px;
  text-decoration:none;color:inherit}
a.rv-head{cursor:pointer}
a.rv-head:active{opacity:.75}
.reviews.bare .rv-head{flex-direction:column;gap:10px;margin:0}
.rv-score{font-size:54px;font-weight:700;letter-spacing:-.03em;line-height:1}
.reviews.bare .rv-score{font-size:92px}
.rv-meta{display:flex;flex-direction:column;gap:5px}
.reviews.bare .rv-meta{align-items:center}
.rv-meta span{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}

.stars{display:flex;gap:2px;flex:0 0 auto}
.stars svg{width:12px;height:12px;display:block}
.stars.big svg{width:19px;height:19px}
.stars svg.on{fill:#FFC107}
.stars svg.off{fill:rgba(255,255,255,.28)}
.rv-card .stars svg.off{fill:#DCE3EA}

/* The list scrolls on its own; the slide still swipes left and right. */
.rv-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.rv-scroll::-webkit-scrollbar{width:5px}
.rv-scroll::-webkit-scrollbar-track{background:transparent}
.rv-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:3px}
.reviews::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(to bottom,transparent,var(--rv-fade,#01568D));
  opacity:0;transition:opacity .15s;pointer-events:none}
.reviews.more::after{opacity:1}
/* Columns rather than a grid: in a grid every card in a row is as tall as the
   tallest, so a one-line review leaves a hole. Columns pack them. */
.rv-grid{column-count:2;column-gap:13px;padding-bottom:4px}
.rv-card{margin:0 0 13px;background:#fff;border-radius:12px;padding:15px 16px 13px;
  display:block;break-inside:avoid;-webkit-column-break-inside:avoid;overflow:hidden;
  text-decoration:none;color:#10253C}
a.rv-card{cursor:pointer}
a.rv-card:active{transform:scale(.99)}
.rv-card header{display:flex;align-items:center;gap:9px}
.rv-ava{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:#E7EDF3}
.rv-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rv-who b{font-size:12.5px;font-weight:700;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-who i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#9AA7B4}
.rv-card blockquote{margin:9px 0 0;font-size:12.5px;line-height:1.5;
  color:#3C4A59;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6}
.rv-go{display:block;margin-top:10px;padding-top:9px;border-top:1px solid #EDF1F5;
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#01568D}
.rv-go::after{content:" \2197"}

.calc-lines i{font-style:normal;font-weight:600;color:#9AA7B4;font-size:9.5px;letter-spacing:.02em}