/* ==========================================================================
   NAVON — "A day on Navon" widget styles, standalone.
   Used by /product (the homepage carries its own inline copy).
   Relies on chrome.css :root tokens; fills in the few it doesn't define.
   ========================================================================== */
:root{
  --signal-soft:#E6F5EC; --brass-soft:#F7EFDC;
  --sh-float:0 2px 6px rgba(16,23,18,.05),0 24px 70px rgba(16,23,18,.12);
}
@keyframes nvBlink{0%,100%{opacity:1}50%{opacity:.3}}

.day .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.day{padding:64px 0;position:relative}
.day__head{text-align:center;padding-bottom:40px}
.day__head h2{font-family:var(--fd);font-size:clamp(30px,4vw,44px);font-weight:560;letter-spacing:-.015em;margin:14px 0 0}
.day__head .sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:560px;margin:14px auto 0}
.day__app{
  border-radius:22px;background:var(--card);border:1px solid var(--border-strong);
  box-shadow:var(--sh-float);overflow:hidden;
}
.day__chrome{
  display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--border);
  background:var(--card-soft);
}
.day__dots{display:flex;gap:7px}
.day__dots i{width:11px;height:11px;border-radius:50%;background:var(--bg-deep);border:1px solid var(--border-strong)}
.day__url{
  flex:0 1 300px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;color:var(--muted);font-weight:600;background:#fff;border:1px solid var(--border);
  border-radius:9px;padding:6px 12px;
}
.day__url svg{width:11px;height:11px;stroke:var(--signal);stroke-width:2.4}
.day__play{
  display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted);
  border:1px solid var(--border);border-radius:9px;padding:6px 12px;background:#fff;cursor:pointer;
  font-family:var(--fb);transition:color .15s,border-color .15s;
}
.day__play:hover{color:var(--ink);border-color:var(--faint)}
.day__play svg{width:12px;height:12px;stroke-width:2.2}
.day__body{display:grid;grid-template-columns:250px 1fr;min-height:460px}
.day__side{border-right:1px solid var(--border);background:var(--card-soft);padding:16px 12px;display:flex;flex-direction:column;gap:6px}
.day__side .lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:2px 10px 8px}
.chap{
  position:relative;text-align:left;border:none;background:none;cursor:pointer;font-family:var(--fb);
  border-radius:11px;padding:10px 12px;display:flex;gap:10px;align-items:center;
  transition:background .2s;overflow:hidden;
}
.chap:hover{background:rgba(16,23,18,.04)}
.chap .tm{font-size:10.5px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;width:34px;flex:0 0 auto}
.chap .tt{font-size:13px;font-weight:600;color:var(--body-c)}
.chap.on{background:var(--green);box-shadow:0 8px 18px rgba(18,62,48,.22)}
.chap.on .tm{color:rgba(245,242,233,.7)}
.chap.on .tt{color:#F5F2E9}
.chap .prog{position:absolute;left:0;bottom:0;height:2.5px;width:0;background:rgba(245,242,233,.85)}
.chap.on .prog{transition-property:width;transition-timing-function:linear}
.day__stagewrap{position:relative;overflow:hidden}
.scene{
  position:absolute;inset:0;padding:26px 30px;opacity:0;transform:translateX(26px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;overflow:hidden;
}
.scene.on{opacity:1;transform:none;pointer-events:auto}
.scene__title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}

/* cursor dot */
.cursor{
  position:absolute;width:22px;height:22px;border-radius:50%;z-index:8;
  background:rgba(16,23,18,.85);
  box-shadow:0 4px 14px rgba(16,23,18,.35),inset 0 0 0 2px #fff;
  transition:left .7s var(--ease),top .7s var(--ease),transform .18s var(--ease),opacity .4s;
  opacity:0;pointer-events:none;
}
.cursor.show{opacity:1}
.cursor.click{transform:scale(.7)}

/* scene 1: inbox */
.s-mailrow{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--bg-deep);
  border-radius:12px;margin-bottom:8px;background:#fff;font-size:13px;transition:border-color .3s,box-shadow .3s,background .3s;
}
.s-mailrow .who{font-weight:700;width:120px;flex:0 0 auto}
.s-mailrow .what{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-mailrow .what b{color:var(--ink)}
.s-mailrow .when{margin-left:auto;font-size:11px;color:var(--faint);flex:0 0 auto}
.s-mailrow.hot{border-color:rgba(18,62,48,.35);box-shadow:0 10px 26px rgba(18,62,48,.1);background:#fff}
.s-flagbtn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#F5F2E9;
  font-size:11px;font-weight:700;border:none;cursor:default;font-family:var(--fb);
  border-radius:8px;padding:6px 11px;opacity:0;transform:scale(.9);
  transition:opacity .3s var(--ease),transform .2s var(--ease);
}
.s-flagbtn.show{opacity:1;transform:none}
.s-flagbtn.press{transform:scale(.9)}
.s-flagbtn svg{width:11px;height:11px;stroke-width:2.4}

/* scene 2: deal card + enrichment */
.s-build{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.g-deal{border:1px solid var(--border);border-radius:14px;background:#fff;padding:14px}
.g-deal.on{box-shadow:0 16px 40px rgba(18,62,48,.12);border-color:rgba(18,62,48,.25)}
.g-deal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.g-deal__head .t{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.g-badge{
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--signal);
  background:var(--signal-soft);border-radius:999px;padding:4px 9px;display:inline-flex;align-items:center;gap:5px;
  opacity:0;transform:scale(.8);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.g-badge i{width:5px;height:5px;border-radius:50%;background:var(--signal)}
.g-badge.on{opacity:1;transform:none}
.g-row{
  display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:7.5px 0;
  border-top:1px solid var(--bg-deep);opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.g-row:first-of-type{border-top:0}
.g-row.in{opacity:1;transform:none}
.g-row .k{color:var(--faint);font-weight:600}
.g-row .v{font-weight:700;text-align:right}
.s-enrich{display:flex;flex-direction:column;gap:8px}
.s-echip{
  display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--body-c);
  border:1px solid var(--border);border-radius:11px;padding:9px 12px;background:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.s-echip.in{opacity:1;transform:none}
.s-echip svg{width:13px;height:13px;stroke:var(--green);stroke-width:2}
.s-echip .ok{margin-left:auto;color:var(--signal);font-weight:800;font-size:11px}

/* scene 3: pipeline board */
.p-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}
.p-col{background:var(--card-soft);border:1px solid var(--bg-deep);border-radius:13px;padding:10px;min-height:230px}
.p-col__head{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:2px 4px 9px}
.p-card{
  background:#fff;border:1px solid var(--border);border-radius:11px;padding:10px 11px;margin-bottom:8px;
  box-shadow:0 1px 3px rgba(16,23,18,.05);
}
.p-card .n{font-size:12.5px;font-weight:700}
.p-card .m{font-size:10.5px;color:var(--faint);margin-top:2px}
.p-card .tag{
  display:inline-block;margin-top:7px;font-size:9.5px;font-weight:700;border-radius:6px;padding:2.5px 7px;
  background:var(--green-ghost);color:var(--green);
}
.p-card .tag.brass{background:var(--brass-soft);color:var(--brass)}
.p-mover{
  position:absolute;width:calc(25% - 12.5px);z-index:6;top:0;left:0;
  transition:transform .85s var(--ease),box-shadow .3s;
  box-shadow:0 14px 34px rgba(18,62,48,.16);border-color:rgba(18,62,48,.3);
}
.p-ghost{opacity:0;pointer-events:none}

/* scene 4: markup */
.s-mark{display:flex;flex-direction:column;gap:14px}
.f-foot{display:flex;gap:10px}
.f-chip{flex:1;border:1px solid var(--border);border-radius:12px;padding:10px 13px;background:#fff}
.f-chip .l{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.f-chip .v{font-size:18px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.f-chip .v em{font-style:normal;font-size:11px;font-weight:700;color:var(--signal);margin-left:6px}
.s-note{
  font-size:12.5px;color:var(--muted);border-left:2.5px solid var(--brass);
  padding:8px 0 8px 14px;background:linear-gradient(90deg,rgba(169,127,53,.06),transparent);
  border-radius:0 10px 10px 0;
}
.s-note b{color:var(--ink)}

/* scene 5: report */
.s-doc{
  width:290px;border:1px solid var(--border);border-radius:13px;background:#fff;padding:18px;
  box-shadow:var(--sh-card);position:relative;
}
.s-doc .h{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.s-doc .h img{height:14px;width:auto}
.s-doc .h span{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.s-skel{height:8px;border-radius:5px;background:var(--bg-deep);margin-bottom:8px;position:relative;overflow:hidden;transform-origin:left;transform:scaleX(0)}
.s-skel.in{animation:nvSkel .5s var(--ease) forwards}
@keyframes nvSkel{to{transform:scaleX(1)}}
.s-doc .kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.s-doc .kpis div{border:1px solid var(--bg-deep);border-radius:9px;padding:7px 8px}
.s-doc .kpis .l{font-size:8.5px;font-weight:800;letter-spacing:.05em;color:var(--faint);text-transform:uppercase}
.s-doc .kpis .v{font-size:13px;font-weight:800;margin-top:1px}
.s-sent{
  position:absolute;right:-14px;bottom:16px;transform:rotate(-6deg) scale(.7);opacity:0;
  border:2px solid var(--signal);color:var(--signal);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;border-radius:8px;padding:5px 10px;background:rgba(255,255,255,.9);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.s-sent.on{opacity:1;transform:rotate(-6deg) scale(1)}
.s-repwrap{display:flex;gap:26px;align-items:center}
.s-replist{display:flex;flex-direction:column;gap:9px;flex:1}
.s-repit{
  display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--body-c);
  opacity:0;transform:translateX(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.s-repit.in{opacity:1;transform:none}
.s-repit svg{width:14px;height:14px;stroke:var(--signal);stroke-width:2.4}

/* scene 6: ask navon */
.s-chat{max-width:520px}
.s-q{
  display:inline-block;background:var(--green);color:#F5F2E9;font-size:13px;font-weight:600;
  border-radius:14px 14px 4px 14px;padding:10px 15px;margin-bottom:14px;
}
.s-a{font-size:13.5px;line-height:1.65;color:var(--body-c);min-height:66px}
.s-a .caret{display:inline-block;width:7px;height:15px;background:var(--green);vertical-align:-2px;margin-left:2px;animation:nvBlink 1s infinite}
.s-trace{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;opacity:0;transition:opacity .5s var(--ease)}
.s-trace.on{opacity:1}
.s-tchip{font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:5px 11px;background:#fff}
.s-tchip b{color:var(--ink)}
.s-verified{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--signal)}
.s-verified svg{width:13px;height:13px;stroke-width:2.2}
.s-qs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.s-qbtn{
  font-size:12px;font-weight:600;color:var(--body-c);border:1px solid var(--border);border-radius:999px;
  padding:7px 13px;background:#fff;cursor:pointer;font-family:var(--fb);
  transition:border-color .15s,color .15s,transform .15s;
}
.s-qbtn:hover{border-color:var(--green);color:var(--green);transform:translateY(-1px)}
.s-mascot{position:absolute;right:22px;bottom:16px;width:92px;opacity:.95;pointer-events:none}

/* responsive */
@media (max-width:960px){
  .day__body{grid-template-columns:1fr}
  .day__side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border);padding:10px}
  .day__side .lbl{display:none}
  .chap{flex:0 0 auto}
  .chap .tm{display:none}
  .day__stagewrap{min-height:600px}
  .scene{padding:20px 18px}
  .day__url{display:none}
  .s-mascot{display:none}
  .s-mailrow .what{display:none}
  .s-build{grid-template-columns:1fr}
  .s-repwrap{flex-direction:column;align-items:flex-start}
  .f-foot{flex-direction:column}
  .p-board{grid-template-columns:repeat(2,1fr)}
  .p-mover{width:calc(50% - 15px)}
}