/* ============================================================
   California Mortgage — Guided Tool Tutorial styles
   Modular overlay layer. Scoped under .cmtut / .tut-launch so it
   never collides with the calculator's own styles.
   ============================================================ */

/* ---- Launch button (lives in the console header) ---- */
.tut-launch{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem;
  font:600 .82rem/1 Inter,system-ui,sans-serif;
  color:#1a2236;background:#fff1e2;
  border:1px solid rgba(20,38,74,.22);border-radius:999px;
  cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s;
}
.tut-launch:hover{background:#ffe2c4;box-shadow:0 4px 14px rgba(245,117,0,.18)}
.tut-launch:active{transform:translateY(1px)}
.tut-launch__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.15rem;height:1.15rem;border-radius:50%;
  background:#f57500;color:#fff5ec;font-weight:700;font-size:.75rem;
}
/* gentle pulse the first time, until the visitor has used it once */
.tut-launch--new{animation:cmtutPulse 2.4s ease-in-out infinite}
@keyframes cmtutPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,117,0,.35)}
  50%{box-shadow:0 0 0 7px rgba(245,117,0,0)}
}

/* ---- Prominent full-width tour launcher (top of the console) ---- */
.tut-banner{
  display:flex;align-items:center;gap:.85rem;width:100%;
  margin:.2rem 0 1rem;padding:.95rem 1.15rem;
  text-align:left;cursor:pointer;
  color:#fff5ec;background:linear-gradient(135deg,#f57500,#e06b00);
  border:1px solid rgba(0,0,0,.08);border-radius:14px;
  box-shadow:0 8px 22px rgba(245,117,0,.28);
  transition:transform .1s ease,box-shadow .15s ease,filter .15s ease;
  animation:cmtutPulse 2.4s ease-in-out 3;
}
.tut-banner:hover{filter:brightness(1.05);box-shadow:0 10px 26px rgba(245,117,0,.34)}
.tut-banner:active{transform:translateY(1px)}
.tut-banner__play{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:#fff5ec;color:#f57500;font-size:.95rem;
}
.tut-banner__txt{display:flex;flex-direction:column;gap:.15rem;line-height:1.2}
.tut-banner__txt b{font:700 1.02rem/1.1 Inter,system-ui,sans-serif}
.tut-banner__txt small{font:500 .8rem/1.25 Inter,system-ui,sans-serif;opacity:.88}

/* ---- Body lock while the tour is open ---- */
body.cmtut-lock{overflow:hidden}

/* ============================================================
   Overlay — soft blurred glass backdrop (page stays visible)
   ============================================================ */
.cmtut{
  position:fixed;inset:0;z-index:9999;
  font-family:Inter,system-ui,sans-serif;
  background:rgba(20,38,74,.26);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .28s ease;
}
.cmtut[hidden]{display:none}
.cmtut.cmtut--in{opacity:1}

/* Subtle gold glow ring on the active field (no heavy dim — the blur
   above does the dimming, so the highlighted field stays readable). */
.cmtut__spot{
  position:fixed;border-radius:12px;pointer-events:none;
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 2px rgba(245,117,0,.85),
             0 0 0 6px rgba(245,117,0,.22),
             0 0 30px 8px rgba(245,117,0,.34);
  transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;
}

/* ============================================================
   Card — wide horizontal glass panel (avatar | text)
   ============================================================ */
.cmtut__card{
  position:fixed;
  display:flex;overflow:hidden;
  width:min(560px,calc(100vw - 32px));
  color:#1a2236;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(245,117,0,.25);
  border-radius:22px;
  box-shadow:0 24px 60px -18px rgba(20,38,74,.40),0 2px 8px rgba(20,38,74,.06);
  /* entrance: slide up + fade (paired with .cmtut--in) */
  opacity:0;transform:translateY(16px);
  transition:opacity .3s ease,transform .3s ease;
}
.cmtut--in .cmtut__card{opacity:1;transform:translateY(0)}

/* ---- Left: avatar / video (≈42%) ---- */
.cmtut__media{
  position:relative;flex:0 0 44%;align-self:stretch;
  min-height:236px;background:#14264a;line-height:0;overflow:hidden;
}
.cmtut__video,.cmtut__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;background:#14264a;display:none;
}
.cmtut__media-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#1e3a6b,#14264a);
}
.cmtut__media-ph svg{opacity:.6}
/* gradient scrim at the bottom so the footer text reads */
.cmtut__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to top,rgba(15,28,56,.72),rgba(15,28,56,0));
  pointer-events:none;
}
.cmtut__badge{
  position:absolute;top:.7rem;left:.7rem;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  color:#fff5ec;background:rgba(20,38,74,.46);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);
  padding:.4rem .6rem;border-radius:999px;
}
.cmtut__badge i{width:6px;height:6px;border-radius:50%;background:#ffb87a;box-shadow:0 0 6px #ffb87a}
.cmtut__media-foot{
  position:absolute;left:.9rem;bottom:1.05rem;z-index:3;
  font-size:.9rem;font-weight:600;line-height:1.1;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.cmtut__mute{
  position:absolute;top:.6rem;right:.6rem;z-index:3;
  width:2rem;height:2rem;border:none;border-radius:50%;cursor:pointer;
  background:rgba(20,38,74,.55);color:#fff5ec;font-size:.85rem;line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.cmtut__mute:hover{background:rgba(20,38,74,.8)}
.cmtut__mute[hidden]{display:none}

/* Big centered Play overlay — appears when a clip is paused (e.g. when a
   mobile browser blocks autoplay) so it's obvious the panel holds a video. */
.cmtut__playbig{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  display:flex;align-items:center;justify-content:center;
  width:4.4rem;height:4.4rem;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.55);
  background:rgba(20,38,74,.5);color:#fff5ec;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:background .2s ease,transform .15s ease;
}
.cmtut__playbig svg{margin-left:3px}
.cmtut__playbig:hover{background:rgba(20,38,74,.78);transform:translate(-50%,-50%) scale(1.05)}
.cmtut__playbig[hidden]{display:none}

/* Playback controls (pause/resume + replay) over the video */
.cmtut__controls{position:absolute;right:.6rem;bottom:1rem;z-index:3;display:flex;gap:.4rem}
.cmtut__controls[hidden]{display:none}
.cmtut__ctrlbtn{
  width:1.9rem;height:1.9rem;border:none;border-radius:50%;cursor:pointer;
  background:rgba(20,38,74,.55);color:#fff5ec;font-size:.78rem;line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.cmtut__ctrlbtn:hover{background:rgba(20,38,74,.82)}
/* Seekable progress bar pinned to the bottom edge of the video */
.cmtut__progress{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:3;
  background:rgba(255,255,255,.20);cursor:pointer}
.cmtut__progress[hidden]{display:none}
.cmtut__progress-fill{display:block;height:100%;width:0;background:#ffb87a}

/* ---- Right: text + controls (≈58%) ---- */
.cmtut__panel{
  position:relative;flex:1 1 58%;
  display:flex;flex-direction:column;
  padding:1.6rem 1.7rem 1.35rem;
}
.cmtut__close{
  position:absolute;top:.7rem;right:.8rem;
  width:1.9rem;height:1.9rem;line-height:1;
  border:none;background:transparent;color:#9aa3b2;
  font-size:1.35rem;cursor:pointer;border-radius:8px;transition:background .15s,color .15s;
}
.cmtut__close:hover{background:rgba(245,117,0,.12);color:#1a2236}

.cmtut__step{
  margin:.15rem 0 .5rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#e06b00;
}
.cmtut__title{
  margin:0 0 .55rem;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.7rem;font-weight:600;line-height:1.12;color:#14264a;letter-spacing:.01em;
}
.cmtut__rule{display:block;width:46px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#ff8a1f,#ffb87a);margin:0 0 .9rem}
.cmtut__body{margin:0;font-size:.97rem;line-height:1.55;color:#5b6678;max-width:42ch}

/* ---- Buttons: refined SaaS controls ---- */
.cmtut__nav{
  margin-top:auto;padding-top:1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
}
.cmtut__nav-right{display:flex;align-items:center;gap:.5rem}
.cmtut__btn{
  display:inline-flex;align-items:center;gap:.3rem;
  height:36px;padding:0 14px;
  font-size:13px;font-weight:600;line-height:1;
  border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,opacity .15s;
}
.cmtut__btn--skip{background:transparent;color:#9aa3b2;padding:0 8px}
.cmtut__btn--skip:hover{color:#5b6678}
.cmtut__btn--back{background:#fff;color:#5b6678;border-color:rgba(20,38,74,.22)}
.cmtut__btn--back:hover{border-color:rgba(20,38,74,.4);background:#fff7f0}
.cmtut__btn--next{background:#f57500;color:#fff5ec;padding-right:11px}
.cmtut__btn--next:hover{background:#e06b00}
.cmtut__chev{margin-top:1px}
.cmtut__btn--next.is-done .cmtut__chev{display:none}
.cmtut__btn:disabled{opacity:.38;cursor:default}

/* ============================================================
   Mobile — stack avatar on top, text below
   ============================================================ */
@media (max-width:760px){
  .cmtut__card{flex-direction:column;width:calc(100vw - 20px);border-radius:18px}
  .cmtut__media{flex:0 0 auto;width:100%;min-height:220px;height:230px}
  .cmtut__video,.cmtut__img{object-position:center 18%}
  .cmtut__panel{padding:1.15rem 1.2rem 1.1rem}
  .cmtut__title{font-size:1.45rem}
  .cmtut__body{font-size:.92rem}
  .cmtut__nav{padding-top:1rem}
  /* Make the tour-launch button impossible to miss on phones:
     full width below the console title, larger tap target. */
  .scanner__head{flex-wrap:wrap}
  .tut-launch{
    order:3;margin-left:0;width:100%;justify-content:center;
    margin-top:.7rem;padding:.8rem 1rem;font-size:.95rem;
    background:#f57500;color:#fff5ec;border-color:#f57500;
  }
  .tut-launch:hover{background:#e06b00}
  .tut-launch__icon{background:#fff5ec;color:#f57500}
}

/* ============================================================
   Embedded mode — the card is hosted on the page (see tutorial-host.js),
   so inside the iframe we keep ONLY the gold glow: no dim, no blur, and the
   overlay must not block the form.
   ============================================================ */
.cmtut--embed{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.cmtut--embed .cmtut__card{display:none}

/* ============================================================
   Page-hosted card (parent page) — a floating Financial Navigator panel,
   pinned to a corner, fully separate from the calculator frame.
   ============================================================ */
.cmtut-host{
  position:fixed;z-index:99999;left:24px;top:92px;right:auto;bottom:auto;
  width:560px;max-width:calc(100vw - 48px);
  font-family:Inter,system-ui,sans-serif;
  opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;
}
.cmtut-host[hidden]{display:none}
.cmtut-host.is-in{opacity:1;transform:translateY(0)}
/* Horizontal: image left, text right. Reset the iframe-card entrance
   (opacity/transform) — the .cmtut-host wrapper animates instead. */
.cmtut-host .cmtut__card{position:static;width:100%;flex-direction:row;opacity:1;transform:none;transition:none;box-shadow:0 26px 64px -16px rgba(20,38,74,.5),0 2px 10px rgba(20,38,74,.10)}
.cmtut-host .cmtut__media{flex:0 0 44%;align-self:stretch;width:auto;min-height:230px;height:auto}
.cmtut-host .cmtut__video,.cmtut-host .cmtut__img{object-position:center 20%}
.cmtut-host .cmtut__panel{padding:1.4rem 1.45rem 1.2rem}
.cmtut-host .cmtut__title{font-size:1.5rem}
.cmtut-host .cmtut__body{font-size:.93rem;max-width:none}
.cmtut-host .cmtut__nav{padding-top:1.1rem}
@media (max-width:760px){
  .cmtut-host{left:10px;right:10px;top:auto;bottom:10px;width:auto}
  .cmtut-host .cmtut__card{flex-direction:column}
  .cmtut-host .cmtut__media{flex:0 0 auto;width:100%;min-height:0;height:220px}
}
@media (prefers-reduced-motion:reduce){
  .cmtut-host{transition:none;transform:none}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .cmtut,.cmtut__card,.cmtut__spot{transition:none}
  .cmtut__card{transform:none}
  .tut-launch--new{animation:none}
}

/* ============================================================
   Minimal tour card — "just Orange explaining"
   Orange narrates each step himself, so the surrounding text
   (badge, caption, step counter, title, body) is removed. We
   keep only the video, sound, and Skip / Back / Next controls.
   Scoped to the page-hosted card used on the Strategy page.
   ============================================================ */
.cmtut-host{ width: clamp(280px, 27vw, 340px); }
/* Frameless — no card box at all: Orange just stands and talks, like the
   big hero avatar. No background, border, shadow, or rounded panel. */
.cmtut-host .cmtut__card{ position: relative; flex-direction: column;
  background: transparent; border: 0; box-shadow: none; border-radius: 0; }
/* media sizes to the video's own ratio so the whole avatar shows —
   the clips are mixed (landscape intro, portrait steps), so no fixed ratio */
.cmtut-host .cmtut__media{ position: relative; flex: none; width: 100%; height: auto;
  min-height: 0; aspect-ratio: auto; background: transparent; border-radius: 0;
  line-height: 0; overflow: visible; }
.cmtut-host .cmtut__video,
.cmtut-host .cmtut__img{ position: relative; inset: auto; width: 100%; height: auto;
  max-height: 66vh; object-fit: contain; object-position: center; background: transparent; }
.cmtut-host .cmtut__media::after{ display: none; }            /* drop the dark scrim (no caption to read) */
/* hide every bit of surrounding text */
.cmtut-host .cmtut__badge,
.cmtut-host .cmtut__media-foot,
.cmtut-host .cmtut__step,
.cmtut-host .cmtut__title,
.cmtut-host .cmtut__rule,
.cmtut-host .cmtut__body{ display: none !important; }
/* navigation floats directly under Orange — no panel background */
.cmtut-host .cmtut__panel{ position: static; padding: 8px 2px 0; background: transparent; }
.cmtut-host .cmtut__nav{ margin-top: 0; padding-top: 0; }
/* close button floats over the video, top-right */
.cmtut-host .cmtut__close{ position: absolute; top: .5rem; right: .5rem; z-index: 6;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: rgba(20,38,74,.55); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cmtut-host .cmtut__close:hover{ background: rgba(20,38,74,.82); color: #fff; }
/* keep mute clear of the close button */
.cmtut-host .cmtut__mute{ left: .6rem; right: auto; }
@media (max-width:760px){
  .cmtut-host{ width: auto; max-width: 320px; }
  .cmtut-host .cmtut__media{ height: auto; aspect-ratio: auto; }
  .cmtut-host .cmtut__video,
  .cmtut-host .cmtut__img{ max-height: 56vh; }
}

/* ============================================================
   Homepage "Financial Navigator" avatar intro panel (navhero)
   A talking-head teaser that launches the full guided tour.
   ============================================================ */
.navhero__card{
  display:flex;align-items:stretch;overflow:hidden;
  background:#14264a;border-radius:20px;
  box-shadow:0 26px 64px -16px rgba(20,38,74,.5),0 2px 10px rgba(20,38,74,.10);
}
.navhero__media{position:relative;flex:0 0 46%;min-height:340px;background:#0f1c38;line-height:0;cursor:pointer}
.navhero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#0f1c38}
.navhero__badge{
  position:absolute;top:1rem;left:1rem;display:inline-flex;align-items:center;gap:.4rem;
  font:700 .62rem/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:#fff5ec;background:rgba(20,38,74,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);padding:.45rem .65rem;border-radius:999px;z-index:3;
}
.navhero__badge i{width:6px;height:6px;border-radius:50%;background:#ffb87a;box-shadow:0 0 6px #ffb87a}
.navhero__sound{
  position:absolute;right:.85rem;bottom:.85rem;z-index:4;
  display:inline-flex;align-items:center;gap:.45rem;
  font:700 .8rem/1 Inter,system-ui,sans-serif;color:#14264a;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.6);
  padding:.55rem .85rem;border-radius:999px;cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(20,38,74,.55);
  transition:transform .1s ease,background .15s ease;
  animation:cmtutPulse 2.4s ease-in-out 3;
}
.navhero__sound svg{flex:0 0 auto}
.navhero__sound:hover{background:#fff}
.navhero__sound:active{transform:translateY(1px)}
.navhero__sound[hidden]{display:none}
.navhero__body{
  flex:1;padding:2.4rem 2.6rem;color:#fff5ec;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  background:linear-gradient(135deg,#1e3a6b,#14264a);
}
.navhero__body h2{color:#fff;margin:.3rem 0 .6rem}
.navhero__body .section-sub{color:rgba(255,245,236,.85);margin-bottom:1.4rem}
.navhero__btn{animation:cmtutPulse 2.4s ease-in-out 3}
.navhero__note{margin-top:.9rem;font-size:.85rem;color:rgba(255,245,236,.65)}
@media (max-width:760px){
  .navhero__card{flex-direction:column}
  .navhero__media{flex:0 0 auto;width:100%;min-height:0;height:260px}
  .navhero__body{padding:1.6rem 1.4rem}
}