:root{
    --m-brand:#073b3a;--m-brand-dark:#052a29;--m-gold-dark:#c98e2a;
    --m-bg:#fafaf8;--m-bg-alt:#f0efec;--m-text:#1a1a18;--m-text-mid:#4a4a46;--m-text-muted:#7a7a74;--m-line:#e2e1dc;
    --sidebar:#0e3a39;--sidebar-hover:#13524f;--sidebar-text:#e5f2f1;
    --brand:#062f2e;--brand-contrast:#0a4645;--bg:#e5e7eb;--card:#ffffff;
    --muted:#6b7280;--line:#e5e7eb;--text:#111827;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--m-text);background:var(--m-bg);-webkit-font-smoothing:antialiased}

  .tour{position:relative;padding:90px 40px 120px}
  .tour-header{text-align:center;max-width:660px;margin:0 auto 36px}
  .tour-eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--m-gold-dark);margin-bottom:14px}
  .tour-header h2{font-family:'Fraunces',serif;font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-1px;color:var(--m-brand-dark);line-height:1.12;margin-bottom:16px}
  .tour-header h2 span{color:var(--m-text-muted)}
  .tour-header p{font-size:17px;color:var(--m-text-mid)}

  .tour-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .tour-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:980px;font-size:15px;font-weight:600;color:var(--m-text-mid);background:#fff;border:1px solid var(--m-line);cursor:pointer;transition:all .2s}
  .tour-tab:hover{border-color:var(--m-brand);color:var(--m-brand)}
  .tour-tab.active{background:var(--m-brand);color:#fff;border-color:var(--m-brand);box-shadow:0 4px 16px rgba(7,59,58,.22)}

  .tour-toggle{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:34px;flex-wrap:wrap}
  .seg{display:inline-flex;background:var(--m-bg-alt);border:1px solid var(--m-line);border-radius:980px;padding:4px;gap:2px}
  .seg button{display:inline-flex;align-items:center;gap:7px;padding:7px 18px;border-radius:980px;font-size:13px;font-weight:600;color:var(--m-text-mid);background:transparent;border:none;cursor:pointer;transition:all .2s}
  .seg button.active{background:#fff;color:var(--m-brand);box-shadow:0 1px 4px rgba(0,0,0,.1)}
  .autoplay-hint{font-size:12px;color:var(--m-text-muted);display:inline-flex;align-items:center;gap:6px}
  .autoplay-hint .pulse{width:7px;height:7px;border-radius:50%;background:#1a8a5c;animation:pulse 2s ease infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

  .frame-wrap{max-width:1120px;margin:0 auto;transition:max-width .4s ease}
  .frame-wrap.is-mobile{max-width:430px}
  .browser{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06),0 32px 80px rgba(0,0,0,.09);border:1px solid rgba(0,0,0,.08);background:#e5e7eb}
  .browser-chrome{background:#f3f3f1;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #ddd}
  .chrome-dots{display:flex;gap:6px}.chrome-dots span{width:12px;height:12px;border-radius:50%}
  .chrome-dots span:nth-child(1){background:#ff5f57}.chrome-dots span:nth-child(2){background:#ffbd2e}.chrome-dots span:nth-child(3){background:#28c840}
  .chrome-url{flex:1;background:#fff;border-radius:6px;padding:6px 14px;font-size:12px;color:#888;border:1px solid #e0e0e0;transition:all .25s}

  /* fixed MacBook-style viewport (16:10) — content scrolls inside, never stretches the page */
  .app{display:grid;grid-template-columns:230px 1fr;height:700px;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);pointer-events:none;user-select:none}
  .sidebar{background:var(--sidebar);padding:18px;display:flex;flex-direction:column}
  .logo{display:flex;align-items:center;gap:12px;padding:6px 4px 18px}
  .logo img{height:40px;width:auto;display:block}
  .nav{margin-top:10px;display:flex;flex-direction:column;gap:10px}
  .nav a{display:block;color:var(--sidebar-text);text-decoration:none;padding:12px 14px;border-radius:10px;letter-spacing:.28em;font-weight:700;font-size:14px;border:1px solid transparent;transition:background .2s ease}
  .nav a:hover{background:var(--sidebar-hover)}
  .nav a.active{background:var(--sidebar-hover);color:#fff}
  .sidebar-foot{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
  .sidebar-foot .who{color:var(--sidebar-text);font-size:13px;padding:8px 4px;margin-bottom:8px}
  .sidebar-foot .who .em{color:#fff;font-weight:600;display:block;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar-foot .who .st{color:rgba(255,255,255,.5);font-size:12px}
  .sf-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--sidebar-text);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:10px 14px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;margin-bottom:8px;font-family:inherit}
  .main{padding:28px 32px;background:var(--bg);height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
  .main::-webkit-scrollbar{width:8px}
  .main::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}
  .main::-webkit-scrollbar-track{background:transparent}

  .panel{display:none}
  .panel.active{display:block;animation:panelIn .5s cubic-bezier(.22,.61,.36,1) both}
  @keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

  .hdr-card{background:var(--card);border-radius:14px;padding:24px;margin-bottom:20px;box-shadow:0 4px 12px rgba(0,0,0,.06);border:2px solid #0d4d4d}
  .row-between{display:flex;justify-content:space-between;align-items:center}
  .btn-brand{background:var(--brand);color:#fff;border:none;padding:12px 24px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer}
  .btn-gold{background:#f4b942;color:#000;border:none;padding:12px 24px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer}
  .searchwrap{margin-bottom:24px;position:relative}
  .searchwrap .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--muted);pointer-events:none}
  .searchwrap input{width:100%;padding:12px 16px 12px 44px;border:2px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;color:#9ca3af}

  /* issue cards reorder smoothly */
  #issuesList{display:flex;flex-direction:column;gap:16px;transition:opacity .25s ease}
  .issue-card{transition:opacity .3s ease}

  /* cursor */
  .demo-cursor{position:absolute;top:0;left:0;width:26px;height:26px;z-index:60;pointer-events:none;transform:translate(-100px,-100px);transition:transform .85s cubic-bezier(.5,.05,.2,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));opacity:0}
  .demo-cursor.show{opacity:1}
  .cursor-ripple{position:absolute;z-index:59;width:34px;height:34px;border-radius:50%;border:2px solid rgba(6,47,46,.5);background:rgba(6,47,46,.12);pointer-events:none;transform:translate(-50%,-50%) scale(.2);opacity:0}
  .cursor-ripple.go{animation:ripple .5s ease-out forwards}
  @keyframes ripple{0%{transform:translate(-50%,-50%) scale(.2);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}

  .mobile-soon{display:none;text-align:center;padding:70px 30px;color:var(--muted)}
  .mobile-soon .phone{width:74px;height:74px;border-radius:18px;background:#fff;border:1px solid #eef0f3;box-shadow:0 8px 24px rgba(2,6,23,.1);display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 20px}
  .mobile-soon h3{font-size:20px;font-weight:700;color:#0f172a;margin-bottom:8px}
  .mobile-soon p{font-size:14px;max-width:340px;margin:0 auto}
  .frame-wrap.is-mobile .panel{display:none!important}
  .frame-wrap.is-mobile .mobile-soon{display:block}
  .frame-wrap.is-mobile .app{grid-template-columns:1fr;height:auto}
  .frame-wrap.is-mobile .sidebar{display:none}
  .frame-wrap.is-mobile .demo-cursor{display:none}

  @media(max-width:820px){.app{grid-template-columns:1fr}.sidebar{display:none}.demo-cursor,.cursor-ripple{display:none}}
  @media(max-width:560px){.tour{padding:60px 16px 70px}.main{padding:16px}}
  /* ---- demo modal: mirrors the real Report Issue / Log Maintenance modals ---- */
  .demo-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:40}
  .demo-modal-overlay.show{opacity:1}
  .demo-modal{background:#fff;border-radius:16px;padding:26px 28px;max-width:560px;width:92%;max-height:90%;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:translateY(22px) scale(.96);opacity:0;transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .34s ease}
  .demo-modal-overlay.show .demo-modal{transform:translateY(0) scale(1);opacity:1}
  .demo-modal{scrollbar-width:none}
  .demo-modal::-webkit-scrollbar{display:none}
  .dm-field{margin-bottom:15px}
  .dm-label{display:block;font-weight:600;margin-bottom:6px;font-size:14px;color:var(--text)}
  .dm-req{color:#dc2626}
  .dm-opt{color:var(--muted);font-weight:400}
  .dm-input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--text);background:#fff;box-sizing:border-box;font-family:inherit;transition:border-color .15s,box-shadow .15s}
  .dm-input:disabled{background:#fff;color:var(--muted)}
  /* custom dropdown (visibly opens, unlike a native <select>) */
  .dm-select{position:relative}
  .dm-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
  .dm-select-trigger .chev{flex:none;color:#6b7280;transition:transform .22s ease}
  .dm-select.open .dm-select-trigger{border-color:var(--brand);box-shadow:0 0 0 3px rgba(6,47,46,.1)}
  .dm-select.open .dm-select-trigger .chev{transform:rotate(180deg)}
  .dm-select.is-disabled .dm-select-trigger{color:var(--muted);cursor:default}
  .dm-select-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 34px rgba(2,6,23,.16);padding:5px;z-index:20;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top;pointer-events:none;transition:opacity .2s ease,transform .22s cubic-bezier(.22,.61,.36,1);max-height:188px;overflow-y:auto;scrollbar-width:none}
  .dm-select-menu::-webkit-scrollbar{display:none}
  .dm-select.open .dm-select-menu{opacity:1;transform:translateY(0) scale(1)}
  .dm-opt-row{padding:10px 11px;border-radius:7px;font-size:14px;color:var(--text);cursor:pointer;transition:background .12s}
  .dm-opt-row.hl{background:#f3f4f6}
  /* Apple-style cycle progress bar above the demo */
  .demo-progress{height:3px;width:100%;background:rgba(0,0,0,.07);border-radius:99px;overflow:hidden;margin-bottom:14px}
  .demo-progress-fill{height:100%;width:0;background:var(--brand);border-radius:99px}
  .frame-wrap.is-mobile .demo-progress{display:none}
  /* newly-added item flash */
  @keyframes itemFlash{0%{background:#ecfdf5;box-shadow:0 0 0 2px #6ee7b7}100%{background:#fff;box-shadow:none}}
  .just-added{animation:itemFlash 1.7s ease-out both}
  /* toast */
  .demo-toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:#0f172a;color:#fff;padding:12px 18px;border-radius:10px;font-size:13.5px;font-weight:600;opacity:0;transition:opacity .35s,transform .35s;z-index:45;display:flex;align-items:center;gap:8px;white-space:nowrap}
  .demo-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* keep cursor above the sheet; hide critical-card scrollbar */
  .demo-cursor{z-index:70 !important}
  #critList{scrollbar-width:none}
  #critList::-webkit-scrollbar{display:none}