/*
 * StayUP digital brochure (flipbook viewer) — bespoke chrome.
 *
 * Plain static CSS served via theme_asset('css/brochure.css'). It is loaded AFTER
 * theme.css (which imports brand.css), so brand tokens var(--ocean), var(--ink),
 * var(--font-display) etc. are available here.
 *
 * Ported verbatim from prototype/brochure.html <style> block.
 * NO Tailwind @theme / @import — those live in theme.css.
 */
html,body{margin:0;height:100%}
.viewer{display:flex;height:100vh;overflow:hidden;background:#e9f1fa}
.rail{width:188px;flex:0 0 188px;background:#0B1220;overflow-y:auto;padding:12px 9px;display:flex;flex-direction:column;gap:6px}
.rail-h{color:#9fb2c9;font-size:.7rem;letter-spacing:.14em;font-weight:700;padding:4px 6px 8px}
.thumb{display:flex;gap:9px;align-items:flex-start;text-align:left;border:0;cursor:pointer;background:rgba(255,255,255,.05);border-radius:9px;padding:9px;color:#b9c6d6;font-family:inherit;transition:background .15s}
.thumb:hover{background:rgba(255,255,255,.13)}
.thumb.active{background:linear-gradient(135deg,#0284C7,#10B981);color:#fff}
.thumb .tno{font-family:var(--font-display);font-weight:800;font-size:.78rem;min-width:22px;opacity:.95}
.thumb .tt{font-size:.76rem;line-height:1.3}
.stage{flex:1;position:relative;overflow:hidden}
.deck{height:100vh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.page{min-height:100vh;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;padding:60px clamp(28px,5vw,84px);position:relative}
.pcover{background:radial-gradient(1200px 520px at 50% -10%, #d8ecfb, #e9f1fa)}
.page-inner{width:100%;max-width:1060px;margin:0 auto;position:relative}
.page-inner p{color:#334155;line-height:1.6}
.page-inner .lead{color:#334155}
.page-inner li{color:#334155}
.page-inner h2{color:#0F172A;line-height:1.18}
.page-inner h3{color:#0F172A}
.page-inner .card,.page-inner .bcard,.page-inner .ai-card{background:#fff}
.page-inner .card p,.page-inner .bcard p,.page-inner .ai-card p{color:#334155}
.feat{max-width:100%;height:auto;filter:drop-shadow(0 12px 30px rgba(2,132,199,.14))}
.attr{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.attr .chip{background:#fff;border:1px solid rgba(2,132,199,.3);color:var(--ocean)}
.bro-table table th{background:#0F172A;color:#fff;padding:11px 12px;font-family:var(--font-display);text-align:center}
.bro-table table th:first-child{text-align:left}
.bro-table table td{padding:11px 12px;border-top:1px solid #e2e8f0;color:#334155;text-align:center}
.bro-table table td:first-child{text-align:left}
.bro-table table tr.alt td{background:#EEF4FB}
.pnum{position:absolute;bottom:-32px;right:0;font-family:var(--font-display);font-weight:800;color:#c2d0de;font-size:.9rem}
.peyebrow{font-family:var(--font-display);font-weight:800;letter-spacing:.12em;color:var(--ocean);font-size:.82rem}
.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;z-index:20;pointer-events:none}
.topbar .lg{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;color:var(--ink);pointer-events:auto;font-size:1.05rem}
.topbar .lg i{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#0284C7,#10B981);display:inline-block}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center;color:var(--ink);font-size:1.05rem;pointer-events:auto}
.iconbtn:hover{background:#fff}
.pager{position:absolute;bottom:18px;right:22px;display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 8px;box-shadow:0 6px 20px rgba(15,23,42,.12);z-index:20}
.pager button{width:30px;height:30px;border-radius:50%;border:0;background:#eef4fb;cursor:pointer;color:var(--ink);font-size:1.05rem;line-height:1}
.pager button:hover{background:#dbe8f5}
.pager .ind{font-size:.84rem;color:#475569;min-width:74px;text-align:center;font-weight:600}
@media(max-width:860px){.rail{display:none}.page{padding:64px 20px 44px}.feat{width:70%!important}}