:root {
    
    --navy:#1A173D; --navy2:#2A2658; --band2:#181534; --brand:#DD1E33; --water:#0C8FCB;
    --water-ink:#0A6E9E; --water-hi:#9FD8F2;
    
    --status-ok:#1E7B4F; --status-ok-soft:#E7F4EC;
    --status-info:#0C8FCB; --status-info-soft:#E8F4FB;
    
    --status-info-ink:#085F88;
    --status-note:#454B5E; --status-note-soft:#F1F2F7;
    
    --ink:#1A173D; --mute:#454B5E; --line:#E7E8F0; --pale:#F6F7FB; --card:#fff;
    --sans:'Figtree',-apple-system,sans-serif; --serif:'Alegreya',Georgia,serif; --mono:'JetBrains Mono',monospace;
  }
  * { box-sizing:border-box; } html,body { margin:0; }
  body { font-family:var(--sans); font-size:16px; color:var(--ink); min-height:100vh;
    background:radial-gradient(1100px 460px at 18% -8%, rgba(221,30,51,0.12), transparent 62%),
      radial-gradient(1000px 520px at 88% -4%, rgba(12,143,203,0.16), transparent 60%),
      linear-gradient(178deg,#211D49,#16132F 48%,#100E22); }
  .wrap { max-width:940px; margin:0 auto; padding:32px 20px 64px; }
  .eyebrow { font:700 12px var(--sans); letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,0.72); }
  h1 { font-family:var(--serif); font-weight:800; color:#fff; font-size:34px; margin:6px 0 4px; }
  h1 em { font-style:italic; color:var(--water-hi); }
  .sub { color:rgba(255,255,255,0.78); font-size:14.5px; margin-bottom:24px; }
  
  .topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
  .topbar-right { display:flex; align-items:center; gap:14px; padding-top:6px; }
  .brand-logo { height:34px; width:auto; display:block; }
  
  @media (min-width:701px) {
    .topbar { flex-wrap:nowrap; }
    .topbar > div:first-child { flex:1 1 auto; min-width:0; }
    .topbar-right { flex:0 0 auto; margin-left:auto; }
  }
  .hd-set { display:inline-flex; align-items:center; gap:6px; font:600 12.5px var(--sans);
    color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22);
    border-radius:999px; padding:6px 12px; cursor:pointer; white-space:nowrap; }
  .hd-set:hover { background:rgba(255,255,255,0.16); color:#fff; }
  
  .hd-who { font:500 12px var(--sans); color:rgba(255,255,255,0.62); max-width:190px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width:700px) { .hd-who { max-width:120px; } }
  .hd-set svg { flex:0 0 auto; }
  
  @media (pointer:coarse) { .hd-set { min-height:44px; } }
  @media (max-width:700px) { .hd-set { min-height:44px; } }
  
  .preview-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; background:var(--brand); color:#fff;
    font:600 13px var(--sans); padding:10px 14px; border-radius:12px; margin-bottom:14px; }
  .preview-bar .pv-tag { font-weight:800; letter-spacing:1.2px; font-size:12px; }
  .preview-bar .pv-sep { opacity:.6; }
  .preview-bar .pv-close { margin-left:auto; font:700 12.5px var(--sans); color:var(--brand); background:#fff; border:0;
    border-radius:999px; padding:6px 12px; cursor:pointer; }
  
  .preview-bar.pv-warn #preview-left { font-weight:800; text-decoration:underline; text-underline-offset:3px; }
  
  @media (min-width:701px) { body.preview .preview-bar { position:sticky; top:0; z-index:50; } }
  
  .demo-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; background:var(--pale); color:var(--ink);
    border:1px solid var(--line); font:600 13px var(--sans); padding:8px 8px 8px 14px; border-radius:12px; margin-bottom:14px; }
  .demo-bar .demo-exit { margin-left:auto; font:700 12.5px var(--sans); color:#fff; background:var(--navy); border:0;
    border-radius:999px; padding:6px 12px; cursor:pointer; }
  
  body.preview #req-send, body.preview #tier-submit, body.preview #fu-markall, body.preview #fu-undo,
  body.preview #fu-name-save, body.preview #fu-you-change, body.preview #fu-dispname, body.preview #nps-send, body.preview #nps-later,
  body.preview #notify-matrix select, body.preview #fu-body button:not(.fu-play), body.preview #fu-body textarea,
  body.preview #fu-body input { opacity:.55; cursor:not-allowed; }
  
  .fu-you { margin-top:6px; font:400 12.5px var(--sans); color:var(--mute); }
  .fu-you strong { color:var(--navy); font-weight:600; }
  .fu-you-change { background:none; border:0; padding:0; font:inherit; color:var(--water-ink); text-decoration:underline; cursor:pointer; }
  .fu-you label { display:inline; margin:0 6px 0 0; font-size:12.5px; }
  .fu-you input { width:auto; max-width:220px; padding:4px 8px; font-size:13px; }
  
  .spin { display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,0.35);
    border-top-color:#fff; border-radius:50%; animation:spinner .7s linear infinite; vertical-align:-2px; margin-right:8px; }
  @keyframes spinner { to { transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spin { animation:none; } }
  .card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; margin-bottom:16px;
    box-shadow:0 16px 44px rgba(8,6,20,0.30); }
  .card h2 { font-family:var(--serif); color:var(--navy); font-size:20px; margin:0 0 12px; }
  
  .win { font:600 12.5px var(--sans); color:var(--mute); margin:-8px 0 12px; }
  .band .win { color:rgba(255,255,255,0.72); margin:0; }
  .band { background:linear-gradient(150deg,var(--navy2),var(--band2)); color:#fff; border-radius:18px; padding:26px 28px;
    box-shadow:0 18px 48px rgba(8,6,20,0.4); margin-bottom:16px; }
  .band .eyebrow { color:rgba(255,255,255,0.72); }
  
  #overview-msg { margin-bottom:16px; }
  #overview-msg:empty { display:none; margin-bottom:0; }
  .kpis { display:flex; flex-wrap:wrap; gap:32px; margin-top:14px; }
  .kpi .num { font-family:var(--serif); font-weight:800; font-size:32px; line-height:1.05; }
  .kpi .num.good { color:#6FE0A6; } .kpi .lbl { font:700 11px var(--sans); letter-spacing:0.8px; text-transform:uppercase; color:rgba(255,255,255,0.75); margin-top:4px; }
  label { display:block; font:600 13.5px var(--sans); color:var(--mute); margin-bottom:6px; }
  input,select,textarea { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
  .btn { font:inherit; font-weight:700; border:0; border-radius:10px; padding:11px 20px; cursor:pointer; }
  .btn-primary { background:var(--brand); color:#fff; } .btn-primary:disabled { opacity:.55; cursor:default; }
  .btn-ghost { background:var(--pale); color:var(--navy); } .btn-ghost:disabled { opacity:.55; cursor:default; }
  
  .linklike { position:relative; background:none; border:0; padding:0; font:600 13px/16px var(--sans); color:var(--water-ink); cursor:pointer; text-decoration:underline; }
  
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  
  .win-row, .fu-fresh-row { position:relative; display:flex; align-items:center; flex-wrap:wrap; }
  .fu-fresh-row { margin-top:6px; }
  .info-wrap { display:inline-flex; align-items:center; }
  .infoi { position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; margin-left:6px; padding:0; border:0; border-radius:50%;
    background:var(--pale); color:var(--navy); font:700 12px var(--sans); line-height:1; cursor:pointer; }
  .infoi:focus-visible { outline:2px solid var(--water); outline-offset:2px; }
  .info-pop { position:absolute; left:0; right:0; max-width:100%; top:100%; margin-top:6px; z-index:30;
    display:none; background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:10px 12px; font:400 13px var(--sans); color:var(--ink); line-height:1.5; text-align:left;
    box-shadow:0 12px 32px rgba(8,6,20,0.22); }
  .info-pop.open { display:block; }
  .info-pop::before { content:''; position:absolute; left:0; right:0; top:-6px; height:6px; }
  
  @media (pointer:coarse) {   
    .infoi { margin-left:10px; }
    .infoi::after { content:''; position:absolute; top:-10px; right:-10px; bottom:-10px; left:-10px; }
    .linklike::after { content:''; position:absolute; top:-14px; right:-4px; bottom:-14px; left:-4px; }
    
    a.cid { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
    
    .fu-listen { min-height:44px; }
    
    .tabbar .tab { min-height:44px; }
  }
  @media (prefers-reduced-motion: reduce) { .skel::after { animation:none; } }
  table { width:100%; border-collapse:collapse; } th { text-align:left; font:700 11.5px var(--sans); text-transform:uppercase;
    letter-spacing:.5px; color:#fff; background:var(--navy); padding:8px 10px; }
  td { padding:10px 10px; border-bottom:1px solid #F2F3F8; font-size:15px; }
  
  .mono { font-family:var(--mono); }
  .figs { font-variant-numeric:tabular-nums; }
  
  td.mono, td.figs { white-space:nowrap; }
  
  td.call-ctl { white-space:nowrap; }
  @media (min-width:960.02px) {
    table.calls td.call-ctl .goto-fu { display:block; margin-top:4px; }
  }
  @media (min-width:960.02px) and (pointer:coarse) {
    table.calls td.call-ctl .goto-fu { margin-top:14px; }
  }
  .table-wrap { overflow-x:auto; }
  .rec { color:var(--water-ink); text-decoration:none; } .rec:hover { color:var(--brand); }
  .tag { display:inline-block; padding:2px 9px; border-radius:999px; background:var(--pale); color:var(--navy); font:600 12.5px var(--sans); white-space:nowrap; }
  
  .chan-email { display:inline-block; padding:1px 8px; border-radius:999px; border:1px solid var(--line, #d9e1ea); color:var(--navy); font:600 12px var(--sans); white-space:nowrap; margin-right:6px; }
  .email-from { color:var(--mute); word-break:break-all; }
  
  .bill-mos { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
  .bill-mo { appearance:none; border:1px solid var(--line); background:#fff; color:var(--mute);
             border-radius:999px; padding:5px 14px; font:600 13px var(--sans); cursor:pointer; }
  .bill-mo.on { background:var(--navy); border-color:var(--navy); color:#fff; }
  .bill-mo:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
  @media (pointer:coarse) { .bill-mo { min-height:44px; padding-block:0; } }
  
  .pb-actions, .hd-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
  .reveal-body { display:none; background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:24px; margin:12px 0 16px;
    box-shadow:0 8px 24px rgba(8,6,20,0.18); }
  .reveal-body.open { display:block; }
  .reveal-body h2 { font-family:var(--serif); color:var(--navy); font-size:20px; margin:0 0 12px; }
  
  
  #reveal-notif.open { display:flex; position:fixed; inset:0; z-index:60; margin:0; padding:8vh 12px 24px;
    border:0; border-radius:0; box-shadow:none; background:rgba(8,6,20,0.45);
    align-items:flex-start; justify-content:center; overflow-y:auto; }
  .notif-sheet { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px;
    width:min(94vw,600px); box-shadow:0 18px 48px rgba(8,6,20,0.45); }
  #reveal-notif-h:focus { outline:none; }
  #reveal-notif-h:focus-visible { text-decoration:underline; text-decoration-color:var(--water);
    text-decoration-thickness:2px; text-underline-offset:5px; }
  
  :root { --confirm-bg:#FBF0DD; --confirm-ink:#8A4F00; --confirm-line:#E4B96B; }
  .btn-confirm { background:var(--confirm-bg); color:var(--confirm-ink); box-shadow:inset 0 0 0 2px var(--confirm-line); }
  
  .fu-acts { display:inline-flex; gap:8px; align-items:center; margin-left:4px; padding-left:12px; border-left:1px solid var(--line); }
  @media (max-width:700px) { .fu-acts { margin-left:0; padding-left:0; border-left:0; } }
  
  .fu-focus { box-shadow:0 0 0 2px var(--confirm-ink); background:var(--confirm-bg); }
  
  .tel { color:var(--water-ink); text-decoration:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .tel:hover { text-decoration:underline; }
  .cid { font:500 11.5px var(--mono); color:var(--mute); white-space:nowrap; }
  
  .fu-branch { font-size:12.5px; color:var(--navy); border:1px solid var(--line); border-radius:999px; padding:1px 9px; white-space:nowrap; }
  
  
  a.cid { text-decoration:underline; text-underline-offset:2px; color:var(--water-ink); }
  a.cid:hover, a.cid:focus-visible { color:var(--navy); }
  
  .fu-listen { display:inline-flex; align-items:center; gap:6px; color:var(--water-ink);
    text-decoration:none; font-weight:700; font-size:13px; }
  .fu-listen:hover, .fu-listen:focus-visible { text-decoration:underline; }
  
  .hm-row { display:flex; align-items:center; gap:3px; }
  .hm-day { width:36px; font:600 11.5px var(--sans); color:var(--mute); flex:0 0 auto; }
  .hm-cell { width:16px; height:16px; border-radius:3px; flex:0 0 auto; }
  .hm-axis { display:flex; gap:3px; margin-left:39px; }
  .hm-axis span { width:16px; font:600 9.5px var(--sans); color:var(--mute); text-align:center; flex:0 0 auto; }
  
  .hm-g12 { display:none; }
  
  .hm-wrap { overflow-x:auto; }
  .hm-scope { font-size:13px; color:var(--mute); line-height:1.45; margin:-4px 0 14px; max-width:560px; }
  .hm-facts { display:flex; gap:28px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
  .hm-facts .n { font-family:var(--serif); font-weight:800; font-size:26px; color:var(--navy); line-height:1; }
  .hm-facts .l { font-size:13px; color:var(--mute); margin-top:3px; max-width:210px; }
  
  .nps { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; width:min(94vw,560px);
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px;
    box-shadow:0 18px 48px rgba(8,6,20,0.45); z-index:50;
    
    max-height: min(80vh, 560px); overflow-y: auto; }
  .nps h3 { font-family:var(--serif); color:var(--navy); font-size:18px; margin:0 0 10px; }
  .nps-scores { display:flex; gap:6px; flex-wrap:wrap; }
  .nps-scores button { flex:1 0 40px; min-width:40px; min-height:44px; font:700 15px var(--sans);
    border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--navy); cursor:pointer; }
  .nps-scores button:hover { border-color:var(--water); }
  .nps-scores button.sel { background:var(--navy); color:#fff; border-color:var(--navy); }
  .nps-ends { display:flex; justify-content:space-between; font-size:12.5px; color:var(--mute); margin-top:6px; }
  
  .nps.nps-strip { width:min(96vw,880px); padding:10px 14px; display:flex; align-items:center;
    gap:10px 14px; flex-wrap:wrap; }
  .nps.nps-strip.hidden { display:none; }
  .nps-strip h3 { font-size:14px; line-height:1.3; margin:0; flex:1 1 260px; }
  .nps-strip .nps-scores { flex:0 1 auto; flex-wrap:nowrap; }
  .nps-strip .nps-scores button { flex:0 0 auto; min-width:32px; min-height:36px; font-size:13px; }
  .nps-strip .nps-ends { display:none; }   
  .nps-strip .nps-follow { flex:0 0 100%; }
  .nps-x { flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:36px;
    font:600 13px var(--sans); color:var(--mute); background:none; border:1px solid var(--line);
    border-radius:10px; padding:0 10px; cursor:pointer; }
  .nps-x:hover { color:var(--navy); border-color:var(--water); }
  .nps-x:focus-visible { outline:2px solid var(--water); outline-offset:2px; }
  
  .skel { position:relative; overflow:hidden; background:#EDEFF5; border-radius:8px; }
  .skel::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.7),transparent); animation:skshim 1.2s infinite; }
  @keyframes skshim { 100% { transform:translateX(100%); } }
  .skel-band { background:rgba(255,255,255,0.10); }
  .skel-band::after { background:linear-gradient(90deg,transparent,rgba(255,255,255,0.16),transparent); }
  
  
  .tabnav { display:contents; }
  .tabbar { display:flex; flex-wrap:wrap; gap:4px; background:var(--band2); border-radius:999px; padding:5px; margin-bottom:16px; box-shadow:0 10px 30px rgba(8,6,20,0.3); }
  .tabbar .tab { font:700 14.5px var(--sans); color:rgba(255,255,255,0.7); background:transparent; border:0; padding:9px 16px; border-radius:999px; cursor:pointer; }
  .tabbar .tab:hover { color:#fff; }
  .tabbar .tab.active { background:#fff; color:var(--navy); }
  .tabbar .tab:focus-visible { outline:2px solid var(--water-hi); outline-offset:2px; }
  .tabpanel { display:none; } .tabpanel.active { display:block; }
  
  .tabpanel:focus { outline:none; }
  .tabpanel:focus-visible { outline:2px solid var(--water); outline-offset:6px; border-radius:12px; }
  .tabpanel > .card, .tabpanel > .band { margin-bottom:16px; }
  
  
  .glance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
  @media (max-width:720px){ .glance-grid { grid-template-columns:1fr 1fr; } }
  
  .glance { cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; min-height:112px; transition:transform .12s, border-color .12s;
    font:inherit; color:inherit; text-align:left; width:100%; min-width:0; }
  .glance:focus-visible { outline:2px solid var(--water); outline-offset:2px; }
  .glance:hover { transform:translateY(-2px); border-color:var(--water); }
  .glance .g-l { font:700 11px var(--sans); letter-spacing:0.7px; text-transform:uppercase; color:var(--mute); }
  .glance .g-n { font-family:var(--serif); font-weight:800; font-size:28px; color:var(--navy); margin-top:6px; line-height:1; }
  .glance .g-sub { font-size:13px; color:var(--mute); margin-top:3px; }
  .glance .g-go { font:700 13px var(--sans); color:var(--water-ink); margin-top:10px; }
  
  .stkpi { display:flex; flex-wrap:wrap; gap:28px; margin-bottom:18px; }
  .stkpi .n { font-family:var(--serif); font-weight:800; font-size:28px; color:var(--navy); line-height:1; }
  .stkpi .l { font:700 11px var(--sans); letter-spacing:0.7px; text-transform:uppercase; color:var(--mute); margin-top:3px; }
  .sale-st { display:inline-flex; align-items:center; gap:5px; font:600 12.5px var(--sans); padding:3px 10px; border-radius:999px; white-space:nowrap; }
  .sale-st.serviced { background:var(--status-ok-soft); color:var(--status-ok); }
  .sale-st.pending { background:var(--pale); color:var(--mute); }
  .sale-st.cancelled { background:var(--status-note-soft); color:var(--status-note); }
  .sale-st.inprog { background:var(--status-info-soft); color:var(--status-info-ink); }
  
  .gauge-scale { position:relative; }
  .gauge-scale.is-ticked { padding-bottom:17px; }
  .gauge-track { height:12px; background:var(--pale); border-radius:999px; overflow:hidden; border:1px solid var(--line); position:relative; }
  .gauge-fill { height:100%; border-radius:999px; }
  
  .gauge-tick { position:absolute; top:0; bottom:0; width:2px; background:var(--ink); opacity:.45; }
  
  .gauge-tickcap { position:absolute; top:auto; bottom:0; font:600 11.5px var(--sans); color:var(--mute); white-space:nowrap; }
  .callout { display:flex; gap:12px; align-items:center; border-radius:12px; padding:12px 16px; margin-top:16px; flex-wrap:wrap; }
  .callout .big { font-family:var(--serif); font-weight:800; font-size:26px; line-height:1; }
  .callout .txt { font-size:14.5px; color:var(--ink); flex:1; min-width:180px; }
  .li { display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--pale); font-size:15px; }
  .li:last-of-type { border-bottom:0; }
  .li .k { color:var(--ink); } .li .k small { color:var(--mute); }
  .li .v { font-weight:600; font-variant-numeric:tabular-nums; }
  
  .li-total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:12px; padding-top:12px; border-top:2px solid var(--navy); }
  .li-total .k, .li-total .v { min-width:0; }
  .li-total .k { font-family:var(--serif); font-size:17px; color:var(--navy); }
  .li-total .v { font-family:var(--serif); font-weight:800; font-size:24px; color:var(--navy); }
  .bkt-big { font-family:var(--serif); font-weight:800; font-size:36px; color:var(--navy); line-height:1; }
  
  .vt-strip { display:flex; align-items:flex-end; gap:8px; height:84px; }
  .vt-month { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:2px; height:100%;
    min-width:0; background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer; border-radius:3px; }
  .vt-month.on { box-shadow:inset 0 -2px 0 var(--navy); }
  .vt-month:focus-visible { outline:2px solid var(--water); outline-offset:2px; }
  .vt-cap { margin-top:8px; font-size:12px; font-weight:600; color:var(--ink); }
  .vt-bar { flex:0 0 45%; max-width:12px; border-radius:2px 2px 0 0; min-height:2px; }
  .vt-bar.booked { background:linear-gradient(180deg,#2FA36B,var(--status-ok)); }
  .vt-bar.billed { background:linear-gradient(180deg,var(--water),#0A6E9E); }
  
  .vt-plot { position:relative; padding:6px 0 0 40px; }
  .vt-grid { position:absolute; left:40px; right:0; top:6px; height:84px; pointer-events:none; }
  .vt-gl { position:absolute; left:0; right:0; border-top:1px dashed var(--line); }
  .vt-gl span { position:absolute; right:100%; margin-right:6px; transform:translateY(-50%);
    font:600 10px var(--sans); color:var(--mute); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .vt-plot .vt-strip { position:relative; }
  
  .vt-x { display:flex; gap:8px; margin-top:4px; }
  
  .vt-x span { flex:1; min-width:0; overflow:hidden; text-overflow:clip; white-space:nowrap; text-align:center; font:600 10px var(--sans); color:var(--mute); }
  .vt-legend { display:flex; gap:16px; margin-top:10px; font:600 12.5px var(--sans); color:var(--mute); }
  .vt-legend .sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
  
  .muted { color:var(--mute); } .hidden { display:none; }
  .toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--navy); color:#fff;
    padding:12px 20px; border-radius:10px; font-size:15px; box-shadow:0 8px 30px rgba(0,0,0,.3); max-width:min(92vw,520px);
    z-index:60; }   
  .toast.err { background:#3A2430; border:1px solid rgba(255,255,255,0.25); }
  .center { text-align:center; } .row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
  .foot { color:rgba(255,255,255,0.62); font-size:12.5px; text-align:center; margin-top:24px; }
  .foot-brand { margin-top:6px; font-size:11.5px; }
  .foot-brand a { color:inherit; }
  
  @media (max-width:700px) {
    .wrap { padding:20px 12px 56px; }
    h1 { font-size:28px; }
    
    .brand-logo { height:26px; order:-1; flex:0 0 100%; }
    .topbar-right { padding-top:2px; flex-wrap:wrap; gap:8px 10px; }
    .card { padding:18px 16px; }
    .reveal-body { padding:18px 16px; }   
    .band { padding:20px 18px; }
    
    
    .tabbar { flex-wrap:nowrap; overflow-x:auto; position:sticky; top:8px; z-index:40;
      -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:0; }
    .tabbar::-webkit-scrollbar { display:none; }
    
    .hs.hs-sticky { position:sticky; top:8px; z-index:40; }
    .hs.hs-sticky > .tabbar { position:static; }
    .tabbar .tab { white-space:nowrap; padding:10px 12px; min-height:44px; }
    
    #tier-req-host, .card > h2, .band > h2, .reveal-body > h2 { scroll-margin-top:70px; }
    .btn { min-height:44px; }               
    
    select { min-height:44px; }
    
    input[type="date"] { min-height:44px; }
    .rec { display:inline-flex; align-items:center; justify-content:center;
      min-width:44px; min-height:44px; }
    .kpis { gap:20px; }
    .stkpi { gap:20px; }
    .glance-grid { gap:10px; }
    .vt-strip, .vt-x { gap:4px; }   
    .nps { bottom:8px; }
    
    .nps.nps-strip { padding:10px 12px; gap:8px 10px; }
    .nps-strip .nps-x { order:2; min-width:44px; min-height:44px; justify-content:center; }   
    .nps-strip h3 { flex:1 1 200px; }   
    .nps-strip .nps-scores { order:3; flex:1 1 100%; gap:4px; }
    .nps-strip .nps-scores button { flex:1 1 0; min-width:0; min-height:44px; }   
    .nps-strip .nps-follow { order:4; }
    .nps-x .nps-x-txt { display:none; }
    
    .hm-g24 { display:none; }
    .hm-g12 { display:block; }
    .hm-g12 .hm-cell { width:18px; height:18px; }
    .hm-g12 .hm-axis span { width:18px; font-size:11px; }   
    .hm-facts { gap:18px; }
    .hm-facts .n { font-size:22px; }
  }
  
  @media (min-width:701px) {
    body.preview #tier-req-host, body.preview .card > h2, body.preview .band > h2, body.preview .reveal-body > h2 { scroll-margin-top:72px; }
  }
  
  @media (max-width:640px) {
    table.stack, table.stack tbody { display:block; }
    table.stack thead { display:none; }
    table.stack tr { display:block; border:1px solid var(--line); border-radius:12px;
      padding:8px 12px; margin-bottom:10px; }
    table.stack td { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
      border-bottom:0; padding:5px 0; font-size:14.5px; text-align:right; }
    table.stack td::before { content:attr(data-l); font:700 10.5px var(--sans); letter-spacing:0.5px;
      text-transform:uppercase; color:var(--mute); flex-shrink:0; text-align:left; }
    table.stack td:not([data-l]) { display:block; text-align:left; }
    table.stack td:not([data-l])::before { content:none; }
    table.stack tr.cd-det { border-style:dashed; margin-top:-6px; }
    
    table.stack tr.tk-has-sub { margin-bottom:0; border-bottom:0; border-radius:12px 12px 0 0; padding-bottom:2px; }
    table.stack tr.tk-sub { border-top:0; border-radius:0 0 12px 12px; padding-top:0; }
    table.stack tr.tk-sub td:empty { display:none; }
  }
  
  @media (max-width:960px) {
    table.stack.calls, table.stack.calls tbody { display:block; }
    table.stack.calls thead { display:none; }
    table.stack.calls tr { display:block; border:1px solid var(--line); border-radius:12px;
      padding:8px 12px; margin-bottom:10px; }
    table.stack.calls td { border-bottom:0; }
    table.stack.calls tr.cd-det { border-style:dashed; margin-top:-6px; }
    table.stack.calls tr.cd-det > td { display:block; padding:5px 0; text-align:left; }
    table.stack.calls tr:not(.cd-det) { display:grid; grid-template-columns:auto 1fr auto;
      column-gap:10px; row-gap:4px; align-items:baseline; padding:10px 12px; }
    table.stack.calls tr:not(.cd-det) > td { display:block; padding:0; font-size:14px; text-align:left; }
    table.stack.calls tr:not(.cd-det) > td::before { content:none; }
    table.stack.calls tr:not(.cd-det) > td[data-l="Answered by"]::before { content:'Answered by '; }
    table.stack.calls tr:not(.cd-det) > td[data-l="Talk"]::before { content:'Talk '; }
    table.stack.calls tr:not(.cd-det) > td[data-l="Answered by"]::before,
    table.stack.calls tr:not(.cd-det) > td[data-l="Talk"]::before { font:inherit; text-transform:none;
      letter-spacing:0; color:var(--mute); }
    table.stack.calls tr:not(.cd-det) > td[data-l="When"] { grid-area:1 / 1; font-weight:700; color:var(--navy); }
    table.stack.calls tr:not(.cd-det) > td[data-l="Caller"] { grid-area:1 / 2 / 2 / 4; text-align:right; }
    table.stack.calls tr:not(.cd-det) > td[data-l="Outcome"] { grid-area:2 / 1; }
    table.stack.calls tr:not(.cd-det) > td[data-l="Answered by"] { grid-area:2 / 2; }
    table.stack.calls tr:not(.cd-det) > td[data-l="Talk"] { grid-area:2 / 3; text-align:right; }
    table.stack.calls tr:not(.cd-det) > td:not([data-l]) { grid-area:3 / 1 / 4 / 3; }
    table.stack.calls tr:not(.cd-det) > td[data-l="Call ID"] { grid-area:3 / 3; text-align:right; align-self:center; }
  }
  
  .hs { position:relative; --hs-fade:48px; }
  .hs-pane { scrollbar-width:none; -ms-overflow-style:none; }
  .hs-pane::-webkit-scrollbar { width:0; height:0; }
  
  .hs.hs-l .hs-pane { -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--hs-fade));
    mask-image:linear-gradient(to right, transparent 0, #000 var(--hs-fade)); }
  .hs.hs-r .hs-pane { -webkit-mask-image:linear-gradient(to left, transparent 0, #000 var(--hs-fade));
    mask-image:linear-gradient(to left, transparent 0, #000 var(--hs-fade)); }
  
  .hs.hs-l.hs-r .hs-pane {
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--hs-fade), #000 calc(100% - var(--hs-fade)), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 var(--hs-fade), #000 calc(100% - var(--hs-fade)), transparent 100%); }
  .hs-arr { position:absolute; z-index:2; width:34px; height:34px; padding:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:var(--card); color:var(--navy); border:1px solid var(--line);
    box-shadow:0 2px 10px rgba(8,6,20,0.18);
    
    top:50%; top:min(50%, 150px); transform:translateY(-50%); }
  .hs-arr-l { left:2px; } .hs-arr-r { right:2px; }
  .hs-arr:hover { background:var(--pale); }
  .hs-arr:focus-visible { outline:2px solid var(--water); outline-offset:2px; }
  .hs-arr[hidden] { display:none; }
  
  .hs-dark .hs-arr { background:var(--band2); color:#fff; border-color:rgba(255,255,255,0.28); }
  .hs-dark .hs-arr:hover { background:var(--navy2); }
  .hs-dark .hs-arr:focus-visible { outline-color:var(--water-hi); }
  
  @media (pointer:coarse) { .hs-arr::after { content:''; position:absolute; top:-5px; right:-5px; bottom:-5px; left:-5px; } }
  @media (max-width:700px) {
    
    .hs { --hs-fade:32px; }
    
  }
  
  .tier-strip { display:flex; gap:12px; overflow-x:auto; padding:6px 2px 12px; scroll-snap-type:x proximity; }
  .tier-card { flex:0 0 200px; scroll-snap-align:center; border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; background:#fff; position:relative; }
  .tier-card.current { border:2px solid var(--navy); box-shadow:0 4px 16px rgba(26,23,61,.10); }
  .tier-badge { display:inline-block; font:700 10.5px var(--sans); letter-spacing:0.7px; text-transform:uppercase;
    padding:3px 8px; border-radius:999px; margin-bottom:8px; }
  .tier-badge.cur { background:var(--navy); color:#fff; }
  .tier-badge.fit { background:var(--status-ok-soft); color:var(--status-ok); }
  .tier-num { font-family:var(--serif); font-weight:800; font-size:28px; color:var(--navy); line-height:1.1; }
  .tier-meta { font-size:13.5px; color:var(--mute); margin-top:4px; }
  .tier-proj { font-size:13px; color:var(--ink); margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
  
  .tier-cmp-wrap { margin-top:8px; }
  .reveal-body.tier-cmp { padding:12px 16px; margin:8px 0 4px; box-shadow:none; }
  .tier-cmp tr.cur td { font-weight:700; }
  .tier-req-panel { border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:12px; background:#FAFAFC; }
  .tier-warn { background:var(--status-info-soft); color:var(--status-info-ink); border-radius:8px; padding:8px 12px; font-size:14px; margin:10px 0; }
  
  .hd-done { font:700 10.5px var(--sans); letter-spacing:0.7px; text-transform:uppercase; color:var(--status-ok); }
  
  @media (max-width:700px) {
    .kpi .lbl, .glance .g-l, .stkpi .l, .tier-badge, .hd-done, table.stack td::before { font-size:12px; letter-spacing:0.4px; }
    .vt-x span { font-size:11px; }
    
    .vt-x span:first-child:nth-last-child(n+10) ~ span:nth-last-child(even),
    .vt-x span:first-child:nth-last-child(2n+10) { visibility:hidden; }
  }