/* Tax Force scan funnel, shared styles. Generated into site/tf.css by build.py (edit templates/tf.css). */
:root{ --green:#038B31; --green-deep:#026625; --gold:#C8A24A; }
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{ height:100%; }
body{ font-family:'Inter',-apple-system,sans-serif; background:#000; color:#fff; }

/* FULL-SCREEN VIDEO STAGE: fills the phone edge to edge. Tap anywhere = sound + restart. */
.stage{ position:fixed; inset:0; z-index:50; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.stage video{ width:100%; height:100%; object-fit:cover; display:block; }
.tapsound{ position:absolute; left:50%; bottom:11%; transform:translateX(-50%); display:flex; align-items:center; gap:9px;
  background:rgba(0,0,0,.62); color:#fff; font-weight:800; font-size:17px; padding:14px 22px; border-radius:50px;
  border:2px solid rgba(255,255,255,.85); box-shadow:0 8px 30px rgba(0,0,0,.5); animation:pulse 1.5s ease-in-out infinite; white-space:nowrap; }
@keyframes pulse{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:.92; } 50%{ transform:translateX(-50%) scale(1.06); opacity:1; } }
.exit{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1.5px solid rgba(255,255,255,.7); color:#fff; font-size:20px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; }
.vbar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.2); }
.vbar i{ display:block; height:100%; width:0; background:var(--gold); }

/* THE PAGE (menu or branch): hidden until the video ends. */
.app{ display:none; flex-direction:column; min-height:100dvh; width:100%;
  background:linear-gradient(180deg,var(--green) 0%, var(--green-deep) 100%); color:#fff;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); animation:slideup .45s ease-out; }
.app.show{ display:flex; }
@keyframes slideup{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }

/* desktop preview only: phone frame */
@media (min-width:520px){
  body{ background:#10131b; }
  .app{ width:390px; min-height:0; height:844px; max-height:92dvh; margin:28px auto; border-radius:48px; overflow-y:auto;
    box-shadow:0 0 0 13px #1b1e28,0 0 0 15px #2a2e3a,0 40px 90px rgba(0,0,0,.65); }
  .app::-webkit-scrollbar{ width:0; }
  .stage{ width:390px; height:844px; max-height:92dvh; inset:auto; position:relative; margin:28px auto; border-radius:48px;
    box-shadow:0 0 0 13px #1b1e28,0 0 0 15px #2a2e3a,0 40px 90px rgba(0,0,0,.65); }
  .stage video{ border-radius:36px; }
}

.top{ display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 18px 8px; }
.top img{ width:32px; height:auto; }
.top .name{ font-weight:900; letter-spacing:1.5px; font-size:17px; }
.top .name b{ color:var(--gold); }

/* menu */
.menu{ padding:8px 16px 8px; }
.menu-prompt{ font-size:22px; font-weight:900; line-height:1.18; padding:6px 4px 16px; text-align:center; }
.opt{ display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:15px; text-decoration:none; font-weight:700;
  font-size:15.5px; line-height:1.25; color:#fff; background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.22);
  margin-bottom:10px; transition:transform .08s, background .15s; }
.opt:active{ transform:scale(.985); }
.opt.first{ background:#fff; color:var(--green-deep); border-color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.32); }
.opt .ic{ font-size:23px; width:30px; text-align:center; flex-shrink:0; }
.opt .label{ flex:1; }
.opt .arr{ opacity:.45; font-size:18px; flex-shrink:0; }
.opt.catch{ background:rgba(255,255,255,.06); border-style:dashed; margin-top:4px; }
.opt.hot{ background:rgba(200,162,74,.16); border:2px solid var(--gold); box-shadow:0 6px 22px rgba(200,162,74,.22); color:#fff; }
.opt .badge{ font-size:9px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; background:var(--gold); color:#15240f;
  padding:3px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.about{ display:block; text-align:center; margin:6px 16px 2px; padding:14px; background:rgba(255,255,255,.10);
  border:1.5px dashed rgba(255,255,255,.32); border-radius:14px; color:#fff; text-decoration:none; font-weight:900; font-size:16px; letter-spacing:.3px; }
.site{ display:block; text-align:center; margin:10px 16px 0; padding:12px; color:#fff; text-decoration:none; font-weight:700; font-size:14px; opacity:.9; }

/* branch */
.back{ display:inline-flex; align-items:center; gap:6px; color:#fff; opacity:.7; text-decoration:none; font-size:13px; font-weight:700; padding:6px 18px 0; }
.head{ padding:12px 22px 8px; text-align:center; }
.head .thru{ color:var(--gold); font-weight:800; }
.head .ic{ font-size:34px; }
.head h1{ font-size:25px; font-weight:900; line-height:1.12; margin-top:6px; }
.head p{ font-size:15px; opacity:.9; margin-top:8px; line-height:1.45; font-weight:500; }
.again{ display:inline-flex; align-items:center; gap:7px; margin:14px 22px 0; background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.25); color:#fff; font-size:13px; font-weight:700; padding:9px 15px; border-radius:30px; cursor:pointer; }
.placeholder{ margin:14px 16px 0; padding:16px; border:1.5px dashed rgba(255,255,255,.4); border-radius:14px; font-size:13px; line-height:1.5; opacity:.8; text-align:center; }
.cta{ padding:18px 16px 4px; display:flex; flex-direction:column; gap:11px; }
.btn{ display:flex; align-items:center; gap:13px; padding:17px 18px; border-radius:15px; text-decoration:none; font-weight:800; font-size:16px; color:#fff; cursor:pointer; border:0; font-family:inherit; text-align:left; width:100%; }
.btn:active{ transform:scale(.98); }
.btn .ic{ font-size:22px; width:26px; text-align:center; flex-shrink:0; }
.btn-primary{ background:#fff; color:var(--green-deep); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.25); }
.btn-quiz{ background:rgba(200,162,74,.18); color:#fff; border:1.5px solid var(--gold); }
.btn small{ display:block; font-weight:600; font-size:12.5px; opacity:.7; margin-top:1px; }
.consent{ font-size:10.5px; line-height:1.5; opacity:.5; padding:9px 22px 0; text-align:center; }
.subs{ padding:14px 16px 4px; }
.subs-lead{ font-size:13px; font-weight:700; opacity:.65; padding:0 4px 9px; }
.subopt{ display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:13px; text-decoration:none; color:#fff; font-weight:600;
  font-size:14px; margin-bottom:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); }
.subopt:active{ transform:scale(.985); }
.subopt .ic{ font-size:19px; width:26px; text-align:center; flex-shrink:0; }
.subopt .arr{ margin-left:auto; opacity:.4; }

/* "Want to go deeper?" */
.deeper{ margin:18px 16px 0; padding:16px 14px 6px; border-top:1px solid rgba(255,255,255,.18); }
.deeper h2{ font-size:17px; font-weight:900; text-align:center; letter-spacing:.2px; }
.course{ display:block; margin:12px 0 10px; padding:16px; border-radius:15px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.35);
  text-align:center; color:#fff; cursor:pointer; width:100%; font-family:inherit; }
.course b{ display:block; font-size:16px; font-weight:900; text-decoration:underline; text-underline-offset:3px; }
.course small{ display:block; font-size:12.5px; opacity:.75; margin-top:4px; line-height:1.4; }
.clip{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:13px; margin-bottom:8px; width:100%; font-family:inherit;
  background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.14); color:#fff; cursor:pointer; text-align:left; }
.clip .ic{ font-size:19px; width:26px; text-align:center; flex-shrink:0; }
.clip b{ display:block; font-size:14px; font-weight:800; }
.clip small{ display:block; font-size:12px; opacity:.7; }
.clip .play{ margin-left:auto; opacity:.6; font-size:14px; }

/* lead-magnet modal: plays an intro clip, then redirects (no skip; the X closes it) */
.lm{ position:fixed; inset:0; z-index:90; background:#000; display:none; align-items:center; justify-content:center; }
.lm.on{ display:flex; }
.lm video{ width:100%; height:100%; object-fit:contain; }
.lm .exit{ z-index:95; }
.lm .note{ position:absolute; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom)); text-align:center; font-size:13px; font-weight:700; opacity:.8; }

.foot{ margin-top:auto; padding:18px 22px 30px; text-align:center; }
.foot .sig{ font-family:'Marck Script',cursive; font-size:22px; color:var(--gold); }
.foot small{ display:block; font-size:10.5px; opacity:.55; line-height:1.6; margin-top:8px; }
