/* How it Works — unified mobile + desktop */
:root{ 
  --topbar-h: 67px; 
  --footbar-h: 76px; 
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --line:#232323; 
  --accent:#FFD34D; /* OU ORANGE #f49021 — yellow #FFD34D) */
  --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;
  -webkit-tap-highlight-color: rgba(244,144,33,.35);
  user-select:none;
}
.hiw-storybars span{
  flex:1; min-width:22px;         /* easier to hit */
  height:6px; background:#ffffff55;
  border-radius:999px; overflow:hidden; cursor:pointer;
}
.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);
  -webkit-touch-callout: none;
}
.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: wide deck, narrower aside (optional hooks) === */
@media (min-width: 900px){
  .hiw-layout{
    display:grid;
    grid-template-columns: minmax(320px, 420px) minmax(600px, 1fr);
    gap:18px; align-items:start;
  }
  .hiw-deck-col .hiw-deck{
    height: min(88vh, 1100px);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
  }
  .hiw-card{ inset:0; }
  .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; z-index:2; pointer-events:none;
}
.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; z-index:2; pointer-events:none;
}
.hiw-title{ margin:0 0 2px 0; font-size:1.05rem; }
.hiw-desc { margin:0; opacity:.9; font-size:.92rem; }

/* Center prompts (pre/post) */
.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;
  pointer-events:none;
}
.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; }

@media (min-width: 900px){
  .hiw-bottomnav{ display: none !important; }
}

/* Desktop side panel content (optional) */
.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(255,211,77,.35); }


/* These should never intercept clicks */
.hiw-banner, .hiw-prompt, .hiw-overlay-top, .hiw-overlay-bottom { pointer-events: none; }

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

/* ---- Desktop compact strip (full-width, small footprint) ---- */
:root{ --strip-h: 72px; }

.hiw-strip{ display:none; } /* hidden on mobile */
@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);
  }
  .hiw-deck-wide .hiw-img{
    width:100%; height:100%; object-fit: contain; background:#000; /* show full mask */
  }
}

/* Ensure edge tap zones are always above the video */
.hiw-edge{
  position:absolute; top:0; bottom:0; width:22%;
  z-index:50; pointer-events:auto;
  -webkit-tap-highlight-color: rgba(244,144,33,.35);
  touch-action: manipulation;        /* removes 300ms delay on some browsers */
}
.hiw-edge.left{ left:0; }
.hiw-edge.right{ right:0; }
.hiw-edge:active{ background: rgba(255,211,77,.14); }

/* ---- Video containment – letterbox by HEIGHT (great for Shorts) ---- */
.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 & edges */
}
.hiw-deck.video-mode .yt-inner{
  height:100%; width:auto;
  aspect-ratio: var(--yt-ar, 9 / 16);
  max-width:100%;
}
.hiw-deck.video-mode .yt-inner iframe{
  display:block; width:100%; height:100%; border:0; background:#000;
}

/* Prevent unexpected scroll jumps when the iframe UI changes size */
.hiw-deck, .hiw-deck .yt-wrap, .hiw-deck .yt-inner{ overflow-anchor:none; }
.hiw-deck, .yt-wrap { overscroll-behavior: contain; }

/* Orange tip bubble (for side-navigation hint on video slides) */
.hiw-tip{
  background: var(--accent);
  color:#111;
  border:1px solid var(--accent);
  font-weight:700;
}