/**
 * "What's New" tour — styles for the SmartQuoter Dashboard.
 *
 * Everything is scoped under #wnScrim (the modal) or #wnLaunch (the navbar
 * button). The dashboard is Bootstrap 3 + Metis + Semantic UI all at once, so
 * generic class names (.btn, .tile, .head, .dots) are already taken three
 * times over — nothing here may leak out, and nothing out there may leak in.
 * Design tokens are --wn-* prefixed for the same reason.
 *
 * Palette is the dashboard's own: Metis crimson (#ee465a / #c11a39) on the
 * charcoal of the header bar.
 *
 * DO NOT edit the generated standalone preview by hand — it is built from this
 * file + whats_new*.js + _whats_new.html by build.py.
 */

/* ---- fonts (served locally; inlined as data URIs in the standalone) --- */
@font-face{font-family:"WNCondensed";src:url("../img/whats_new/fonts/RobotoCondensed-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"WNBody";src:url("../img/whats_new/fonts/Roboto-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"WNBody";src:url("../img/whats_new/fonts/Roboto-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

/* ---- design tokens ---------------------------------------------------- */
:root{
  --wn-scrim:rgba(20,20,22,.62);
  --wn-surface:#FFFFFF; --wn-surface-2:#F5F6F7; --wn-surface-3:#ECEEF0;
  --wn-ink:#1D1F22; --wn-ink-soft:#585D64; --wn-ink-faint:#8A9099;
  --wn-line:#E2E5E8; --wn-line-strong:#CBD0D6;
  --wn-accent:#D62F45; --wn-accent-hi:#EE465A; --wn-accent-on:#FFFFFF;
  --wn-accent-soft:rgba(238,70,90,.10);
  --wn-charcoal:#2F3238;
  --wn-up:#3E7A5E; --wn-down:#A64B2A; --wn-violet:#71589E; --wn-steel:#33698C;
  --wn-shadow:0 30px 76px -24px rgba(20,20,22,.46), 0 6px 18px -8px rgba(20,20,22,.26);
  --wn-frame-bar:#E7EAED;
}
@media (prefers-color-scheme:dark){
  :root{
    --wn-scrim:rgba(6,6,8,.74);
    --wn-surface:#191B1F; --wn-surface-2:#212429; --wn-surface-3:#2A2E34;
    --wn-ink:#ECEEF1; --wn-ink-soft:#A4AAB3; --wn-ink-faint:#727984;
    --wn-line:#2B2F35; --wn-line-strong:#3A3F47;
    --wn-accent:#EE465A; --wn-accent-hi:#FF6274; --wn-accent-on:#FFFFFF;
    --wn-accent-soft:rgba(238,70,90,.15);
    --wn-charcoal:#0F1013;
    --wn-up:#4FA37D; --wn-down:#D0774E; --wn-violet:#9C82D0; --wn-steel:#5E9BC4;
    --wn-shadow:0 34px 90px -26px rgba(0,0,0,.74), 0 8px 22px -10px rgba(0,0,0,.6);
    --wn-frame-bar:#212429;
  }
}
:root[data-wn-theme="dark"]{
  --wn-scrim:rgba(6,6,8,.74);
  --wn-surface:#191B1F; --wn-surface-2:#212429; --wn-surface-3:#2A2E34;
  --wn-ink:#ECEEF1; --wn-ink-soft:#A4AAB3; --wn-ink-faint:#727984;
  --wn-line:#2B2F35; --wn-line-strong:#3A3F47;
  --wn-accent:#EE465A; --wn-accent-hi:#FF6274; --wn-accent-on:#FFFFFF;
  --wn-accent-soft:rgba(238,70,90,.15);
  --wn-charcoal:#0F1013;
  --wn-up:#4FA37D; --wn-down:#D0774E; --wn-violet:#9C82D0; --wn-steel:#5E9BC4;
  --wn-shadow:0 34px 90px -26px rgba(0,0,0,.74), 0 8px 22px -10px rgba(0,0,0,.6);
  --wn-frame-bar:#212429;
}
:root[data-wn-theme="light"]{
  --wn-scrim:rgba(20,20,22,.62);
  --wn-surface:#FFFFFF; --wn-surface-2:#F5F6F7; --wn-surface-3:#ECEEF0;
  --wn-ink:#1D1F22; --wn-ink-soft:#585D64; --wn-ink-faint:#8A9099;
  --wn-line:#E2E5E8; --wn-line-strong:#CBD0D6;
  --wn-accent:#D62F45; --wn-accent-hi:#EE465A; --wn-accent-on:#FFFFFF;
  --wn-accent-soft:rgba(238,70,90,.10);
  --wn-charcoal:#2F3238;
  --wn-up:#3E7A5E; --wn-down:#A64B2A; --wn-violet:#71589E; --wn-steel:#33698C;
  --wn-shadow:0 30px 76px -24px rgba(20,20,22,.46), 0 6px 18px -8px rgba(20,20,22,.26);
  --wn-frame-bar:#E7EAED;
}

/* ---- navbar launch button --------------------------------------------
   Rides in the .main-bar next to the PT Report / logout buttons, which are
   float:right Bootstrap btn-sm. Kept visually quieter than those (they are
   solid crimson) so it reads as a notice, not a fourth action. */
#wnLaunch{float:right;margin:0 10px;cursor:pointer;color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:4px 10px;font-size:12px;line-height:1.5;
  font-family:inherit;white-space:nowrap;transition:background .15s,border-color .15s;}
#wnLaunch:hover,#wnLaunch:focus{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5);color:#fff;outline:none;}
#wnLaunch .wn-spk{color:var(--wn-accent-hi);margin-right:3px;}
#wnLaunch .wn-dot-new{width:7px;height:7px;border-radius:50%;background:var(--wn-accent-hi);display:inline-block;
  vertical-align:middle;margin-left:7px;box-shadow:0 0 0 0 rgba(238,70,90,.7);animation:wnPulse 2.4s infinite;}
#wnLaunch.wn-seen .wn-dot-new{display:none;}
@keyframes wnPulse{0%{box-shadow:0 0 0 0 rgba(238,70,90,.6);}70%{box-shadow:0 0 0 7px rgba(238,70,90,0);}100%{box-shadow:0 0 0 0 rgba(238,70,90,0);}}

/* ==== modal ============================================================ */
#wnScrim{position:fixed;inset:0;background:var(--wn-scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:22px;z-index:11000;opacity:0;pointer-events:none;transition:opacity .25s ease;
  font-family:"WNBody",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;color:var(--wn-ink);}
#wnScrim[hidden]{display:none;}
#wnScrim.wn-open{opacity:1;pointer-events:auto;}
#wnScrim *{box-sizing:border-box;}
#wnScrim .wn{width:min(980px,100%);max-height:92vh;background:var(--wn-surface);border-radius:14px;box-shadow:var(--wn-shadow);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--wn-line);
  transform:translateY(14px) scale(.985);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s ease;}
#wnScrim.wn-open .wn{transform:none;opacity:1;}
#wnScrim .font-d{font-family:"WNCondensed",Roboto,system-ui,sans-serif;font-weight:400;}

/* the one bold flourish: the crimson/charcoal stripe off the dashboard header */
#wnScrim .wn-hazard{height:5px;flex:0 0 auto;
  background:repeating-linear-gradient(-45deg,var(--wn-accent-hi) 0 12px,var(--wn-charcoal) 12px 24px);}

#wnScrim .wn-head{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;
  border-bottom:1px solid var(--wn-line);flex:0 0 auto;}
#wnScrim .wn-brand{display:flex;align-items:center;gap:10px;min-width:0;}
#wnScrim .wn-brand .spark{color:var(--wn-accent);font-size:16px;line-height:1;}
#wnScrim .wn-brand b{font-family:"WNCondensed",sans-serif;font-weight:400;font-size:19px;letter-spacing:.4px;
  color:var(--wn-ink);white-space:nowrap;}
#wnScrim .wn-chip{font-size:10px;font-weight:500;letter-spacing:.7px;color:var(--wn-accent);
  background:var(--wn-accent-soft);padding:4px 8px;border-radius:999px;white-space:nowrap;}
#wnScrim .wn-head-r{margin-left:auto;display:flex;align-items:center;gap:4px;}
#wnScrim .icon-btn{width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--wn-ink-faint);
  cursor:pointer;display:grid;place-items:center;font-size:17px;padding:0;transition:background .15s,color .15s;}
#wnScrim .icon-btn:hover{background:var(--wn-surface-2);color:var(--wn-ink);}

#wnScrim .wn-progress{height:2px;background:var(--wn-surface-3);flex:0 0 auto;}
#wnScrim .wn-progress span{display:block;height:100%;width:0;background:var(--wn-accent);transition:width .3s ease;}

#wnScrim .wn-body{flex:1 1 auto;overflow:auto;min-height:0;}

/* ---- cover ------------------------------------------------------------ */
#wnScrim .cover{display:none;padding:44px 46px 40px;text-align:center;}
#wnScrim .wn.is-cover .cover{display:block;}
#wnScrim .wn.is-cover .tour{display:none;}
#wnScrim .cover-ey{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--wn-ink-faint);margin:0 0 14px;}
#wnScrim .cover-ey b{color:var(--wn-accent);font-weight:500;}
#wnScrim .cover h2{font-size:42px;line-height:1.1;margin:0 0 14px;color:var(--wn-ink);letter-spacing:.2px;}
#wnScrim .cover h2 em{font-style:normal;color:var(--wn-accent);}
#wnScrim .cover-sub{font-size:15px;color:var(--wn-ink-soft);max-width:600px;margin:0 auto 26px;}
#wnScrim .cover-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 28px;}
#wnScrim .cover-stats .stat{background:var(--wn-surface-2);border:1px solid var(--wn-line);border-radius:9px;
  padding:11px 20px;min-width:104px;}
#wnScrim .cover-stats .stat b{display:block;font-family:"WNCondensed",sans-serif;font-weight:400;font-size:26px;
  color:var(--wn-ink);line-height:1.1;}
#wnScrim .cover-stats .stat span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--wn-ink-faint);margin-top:3px;}
#wnScrim .cover-cta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}

/* ---- tour: rail + slide ----------------------------------------------- */
#wnScrim .tour{display:grid;grid-template-columns:212px 1fr;min-height:0;}
#wnScrim .rail{border-right:1px solid var(--wn-line);background:var(--wn-surface-2);padding:16px 10px 20px;}
#wnScrim .rail-h{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--wn-ink-faint);
  padding:0 10px 10px;}
#wnScrim .rail-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;
  border:none;border-radius:7px;padding:8px 10px;cursor:pointer;color:var(--wn-ink-soft);font:inherit;font-size:13px;
  transition:background .14s,color .14s;}
#wnScrim .rail-item:hover{background:var(--wn-surface-3);color:var(--wn-ink);}
#wnScrim .rail-item.active{background:var(--wn-accent-soft);color:var(--wn-accent);font-weight:500;}
#wnScrim .rail-item .num{width:19px;height:19px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:10px;background:var(--wn-surface-3);color:var(--wn-ink-faint);}
#wnScrim .rail-item.active .num{background:var(--wn-accent);color:var(--wn-accent-on);}

#wnScrim .slide{padding:26px 30px 30px;min-width:0;}
#wnScrim .slide-ey{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
#wnScrim .tag-new{font-size:10px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;
  color:var(--wn-accent);background:var(--wn-accent-soft);padding:3px 8px;border-radius:999px;}
#wnScrim .slide-kicker{margin-left:auto;font-size:11px;color:var(--wn-ink-faint);letter-spacing:.4px;}
#wnScrim .slide h3{font-size:29px;line-height:1.15;margin:0 0 8px;color:var(--wn-ink);letter-spacing:.2px;}
#wnScrim .slide-sub{font-size:14px;color:var(--wn-ink-soft);margin:0 0 14px;}
#wnScrim .bullets{list-style:none;margin:0 0 18px;padding:0;}
#wnScrim .bullets li{display:flex;gap:9px;font-size:13.5px;color:var(--wn-ink-soft);margin-bottom:7px;line-height:1.5;}
#wnScrim .bullets li:before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--wn-accent);margin-top:8px;}
#wnScrim .bullets b{color:var(--wn-ink);font-weight:500;}

/* browser-chrome frame around each screenshot */
#wnScrim .frame{border:1px solid var(--wn-line-strong);border-radius:9px;overflow:hidden;background:var(--wn-surface);
  box-shadow:0 10px 26px -14px rgba(20,20,22,.4);}
#wnScrim .frame-bar{display:flex;align-items:center;gap:6px;padding:7px 11px;background:var(--wn-frame-bar);
  border-bottom:1px solid var(--wn-line);}
#wnScrim .frame-bar i{width:8px;height:8px;border-radius:50%;background:var(--wn-line-strong);flex:0 0 auto;}
#wnScrim .frame-url{margin-left:8px;font-size:10.5px;color:var(--wn-ink-faint);letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#wnScrim .frame-shot{display:block;width:100%;height:auto;}
#wnScrim .anim-in{animation:wnRise .34s cubic-bezier(.2,.8,.2,1) both;}
@keyframes wnRise{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  #wnScrim .anim-in{animation:none;}
  #wnScrim,#wnScrim .wn,#wnScrim .wn-progress span{transition:none;}
  #wnLaunch .wn-dot-new{animation:none;}
}

/* ---- footer ----------------------------------------------------------- */
#wnScrim .wn-foot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--wn-line);
  background:var(--wn-surface-2);flex:0 0 auto;}
#wnScrim .dots{display:flex;gap:6px;margin:0 auto;}
#wnScrim .dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:var(--wn-line-strong);
  cursor:pointer;transition:background .15s,transform .15s;}
#wnScrim .dot.active{background:var(--wn-accent);transform:scale(1.25);}
#wnScrim .foot-r{display:flex;gap:8px;}
#wnScrim .wn-btn{font:inherit;font-size:13px;border-radius:7px;padding:8px 16px;cursor:pointer;border:1px solid transparent;
  transition:background .15s,border-color .15s,color .15s;}
#wnScrim .wn-btn--primary{background:var(--wn-accent);border-color:var(--wn-accent);color:var(--wn-accent-on);font-weight:500;}
#wnScrim .wn-btn--primary:hover{background:var(--wn-accent-hi);border-color:var(--wn-accent-hi);}
#wnScrim .wn-btn--ghost{background:transparent;border-color:var(--wn-line-strong);color:var(--wn-ink-soft);}
#wnScrim .wn-btn--ghost:hover{border-color:var(--wn-ink-faint);color:var(--wn-ink);}
#wnScrim .wn-btn--quiet{background:transparent;color:var(--wn-ink-faint);}
#wnScrim .wn-btn--quiet:hover{color:var(--wn-ink);}
#wnScrim .wn-btn:focus-visible,#wnScrim .icon-btn:focus-visible,#wnScrim .rail-item:focus-visible,
#wnScrim .dot:focus-visible{outline:2px solid var(--wn-accent);outline-offset:2px;}

/* ---- narrow screens --------------------------------------------------- */
@media (max-width:820px){
  #wnScrim{padding:10px;}
  #wnScrim .tour{grid-template-columns:1fr;}
  #wnScrim .rail{display:flex;gap:6px;overflow-x:auto;border-right:none;border-bottom:1px solid var(--wn-line);
    padding:9px 10px;}
  #wnScrim .rail-h{display:none;}
  #wnScrim .rail-item{width:auto;white-space:nowrap;}
  #wnScrim .rail-item span:not(.num){display:none;}
  #wnScrim .cover{padding:30px 22px 26px;}
  #wnScrim .cover h2{font-size:31px;}
  #wnScrim .slide{padding:20px 18px 24px;}
  #wnScrim .slide h3{font-size:23px;}
}