/* How it Works — unified mobile + desktop */
:root{
  --topbar-h: 67px;
  --footbar-h: 76px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --line:#232323; --accent:#f49021;
  --radius-lg:20px;
}

/* Full-bleed shell on this route */
body.howitworks .wrap{ padding:0; }
body.howitworks .app{ min-height:100svh; border:0; border-radius:0; box-shadow:none; }
body.howitworks main{ padding:0; }
body.howitworks .page{
  max-width:1200px;               /* wider on desktop */
  margin:0 auto;
  padding:12px 10px calc(var(--footbar-h) + var(--safe-bottom) + 12px);
  min-height:calc(100svh - var(--topbar-h) - var(--safe-bottom));
  display:grid; gap:14px;
}

/* ---------- Story bars ---------- */
.hiw-storybars{position:relative;display:flex;gap:6px;padding:6px 6px 8px}
.hiw-storybars span{flex:1;height:3px;background:#ffffff55;border-radius:999px;overflow:hidden}
.hiw-storybars span::after{content:"";display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
.hiw-storybars span.is-active::after{width:100%}
.hiw-storybars span.is-viewed{background:#ffffff99}

/* ---------- Deck (media) ---------- */
.hiw-deck{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:0 20px 44px rgba(0,0,0,.35)}
.hiw-card{position:absolute;inset:0;border-radius:var(--radius-lg);touch-action:none;will-change:transform}
.hiw-img{width:100%;height:100%;object-fit:cover;display:block;background:#000}

/* Sizing: mobile vs desktop */
@media (max-width: 899px){
  .hiw-deck{height:64vh; min-height:420px;}
}

/* === Desktop layout tuning: bigger/taller deck, narrower explainer, reversed order already done in HTML === */
@media (min-width: 900px){
  .hiw-layout{
    display: grid;
    /* LEFT = aside (narrow), RIGHT = deck (wide) */
    grid-template-columns: minmax(320px, 420px) minmax(600px, 1fr);
    gap: 18px;
    align-items: start;
  }

  /* Give the deck a tall portrait footprint so the whole mask reads */
  .hiw-deck-col .hiw-deck{
    /* Tall portrait feel; clamp height to viewport so it doesn’t overflow */
    height: min(88vh, 1100px);
    aspect-ratio: 9 / 16;   /* portrait; keeps proportions on wide screens */
    margin: 0 auto;         /* center within its column */
  }

  /* Ensure the absolutely-positioned card fills the new deck height */
  .hiw-card{ inset: 0; }

  /* Keep the explainer visually secondary (narrow card-like block) */
  .hiw-aside{
    max-width: 420px;
  }
}

/* ---------- Overlays ---------- */
.hiw-overlay-top{
  position:absolute; left:0; right:0; top:0; padding:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 48%, rgba(0,0,0,0) 100%);
  color:#fff; pointer-events:none; z-index:2;
}
.hiw-brand{ margin:0; font-size:1.25rem; line-height:1.25; font-weight:800; letter-spacing:.01em; }
.hiw-subline{ margin:.4rem 0 0; font-size:.95rem; line-height:1.35; opacity:.95; }

.hiw-overlay-bottom{
  position:absolute; left:0; right:0; bottom:0; padding:14px 14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.75) 100%);
  color:#fff; pointer-events:none; z-index:2;
}
.hiw-title{ margin:0 0 2px 0; font-size:1.05rem; }
.hiw-desc { margin:0; opacity:.9; font-size:.92rem; }

/* Center prompts (pre/post) above everything (incl. play overlay) */
.hiw-banner, .hiw-prompt{
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.6); color:#fff; padding:10px 14px; border:1px solid #444;
  border-radius:12px; font-weight:800; letter-spacing:.02em; display:none; z-index:4;
}
.hiw-banner.show, .hiw-prompt.show{ display:block; }

/* Direction badges while dragging */
.hiw-badge{position:absolute;top:16px;padding:.35rem .6rem;border-radius:999px;font-weight:700;letter-spacing:.02em;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.35);color:#fff;opacity:0;transform:scale(.9);transition:opacity .12s,transform .12s}
.hiw-badge-right{right:16px}
.hiw-badge-left{left:16px}
.hiw-badge-up{left:50%;transform:translateX(-50%) scale(.9);top:12px}
.hiw-badge-down{left:50%;transform:translateX(-50%) scale(.9);bottom:12px;top:auto}
.hiw-card[data-dir="right"] .hiw-badge-right,
.hiw-card[data-dir="left"]  .hiw-badge-left,
.hiw-card[data-dir="up"]    .hiw-badge-up,
.hiw-card[data-dir="down"]  .hiw-badge-down{opacity:1;transform:translateX(var(--tx,0)) scale(1)}

/* ---------- Bottom actions (mobile only) ---------- */
.hiw-bottomnav{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(var(--footbar-h) + var(--safe-bottom));
  padding:8px 10px calc(8px + var(--safe-bottom));
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; align-items:center;
  background:var(--card, #141414); border-top:1px solid var(--line);
  z-index:980;
}
.hiw-bicon{
  background:transparent; border:1px solid var(--line);
  border-radius:14px; padding:10px 8px; color:#ddd; display:grid; justify-items:center; gap:6px;
  font-size:.8rem;
}
.hiw-bicon:hover{ color:#fff; border-color:#3a3a3a; }
.hiw-bicon svg{ display:block; }
.hiw-bicon-primary{ background:var(--accent); color:#111; border-color:transparent; box-shadow:0 8px 22px rgba(244,144,33,.25); }
.hiw-bid-label{ font-weight:800; }

/* Hide bottom bar on desktop */
@media (min-width: 900px){
  .hiw-bottomnav{ display: none !important; }
}

/* Desktop side panel content */
.hiw-aside{
  display:none;
  background:var(--card, #141414);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
@media (min-width: 900px){
  .hiw-aside{ display:block; }
}

.hiw-aside h2{ margin:.25rem 0 .5rem; font-size:1.2rem; }
.hiw-aside p{ color:#e1e1e1; line-height:1.55; }
.hiw-list{ margin:.5rem 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.hiw-list li{ position:relative; padding-left:22px; }
.hiw-list li::before{ content:"›"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900; }

/* Tap highlights in OU orange */
.hiw-card, .hiw-storybars { -webkit-tap-highlight-color: rgba(244,144,33,.35); }

/* Toast above the fixed bar */
#ouToast{ bottom:calc(var(--footbar-h) + var(--safe-bottom) + 14px) !important; }


/* ---- Desktop compact strip (full-width, small footprint) ---- */
:root{
  --strip-h: 72px; /* used to compute deck height below */
}

.hiw-strip{
  display:none; /* hidden on mobile */
}

/* Video containment – letterbox inside the large deck without cropping */
.hiw-deck.video-mode { position: relative; }
.hiw-deck.video-mode .yt-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  z-index: 1; /* under overlays */
}
.hiw-deck.video-mode .yt-inner {
  width: min(100%, 1200px);
  aspect-ratio: 16 / 9;     /* YouTube player ratio */
  max-height: 100%;         /* never exceed deck */
}
.hiw-deck.video-mode .yt-inner iframe {
  width: 100%; height: 100%; border: 0;
  display: block; background: #000;
}



@media (min-width: 900px){
  .hiw-strip{
    display:block;
    height: var(--strip-h);
    border:1px solid var(--line);
    border-radius: 12px;
    background: var(--card, #141414);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 10px 12px;
  }
  .hiw-strip-inner{
    display:flex; gap:10px; align-items:center; height:100%; overflow:auto;
  }
  .hiw-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border:1px solid var(--line); border-radius:999px;
    color:#e6e6e6; background:#1b1b1b;
    white-space:nowrap;
  }
  .hiw-chip .g{ opacity:.9; }
  .hiw-chip-cta .link{ color:#fff; text-decoration:none; }
  .hiw-chip-cta .link:hover{ color: var(--accent); }
}

/* ---- Large deck below the strip (desktop) ---- */
.hiw-deck-wide{ margin-top: 12px; }

@media (min-width: 900px){
  .hiw-deck-wide .hiw-deck{
    /* Tall + wide, not "phone-like" */
    height: clamp(560px, calc(100svh - var(--topbar-h) - var(--strip-h) - 32px), 1000px);
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 44px rgba(0,0,0,.35);
  }

  /* Make image content show full mask height without cropping */
  .hiw-deck-wide .hiw-img{
    width:100%; height:100%;
    object-fit: contain;    /* key: show full mask */
    background:#000;
  }


}

/* Keep mobile experience exactly as before */
@media (max-width: 899px){
  .hiw-deck{ height:64vh; min-height:420px; } /* existing rule */
  .hiw-strip{ display:none; }                 /* strip hidden on mobile */
}

/* Toast above the fixed bar (already present in your sheet, restated for clarity) */
#ouToast{ bottom:calc(var(--footbar-h) + var(--safe-area-inset-bottom, 0px) + 14px) !important; }


/* Ensure edge tap zones are always above the video */
.hiw-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 22%;
  z-index: 5;                 /* higher than iframe/wrap, lower than banners (z=4)? we want above all */
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(244,144,33,.35);
}
.hiw-edge.left  { left: 0; }
.hiw-edge.right { right: 0; }
.hiw-edge:active { background: rgba(244,144,33,.12); }

/* Respect the letterbox wrapper on video-mode — don't force iframes to absolute */
.hiw-deck.video-mode .yt-inner iframe {
  position: static !important;  /* defeats .hiw-deck-wide iframe {position:absolute} */
}

/* If you want to keep the generic desktop iframe rule, scope it to non-video cases only */
@media (min-width: 900px){
  .hiw-deck-wide:not(.video-mode) iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}