@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root{
    --bg:#F6F2E9; --surface:#FFFFFF; --surface-warm:#FCFAF4;
    --ink:#111111; --ink-2:#555555; --ink-3:#9A958C;
    --line:#E8E1D4; --line-2:#DED6C6;
    --green:#166534; --green-2:#1F8F5F; --mint:#3EB489;
    --done:#166534;
    --green-soft:#EAF3EC; --green-tint:#EDF4EF;
    --sans:'Geist',-apple-system,'Inter','Helvetica Neue',sans-serif;
    --mono:'Geist Mono','JetBrains Mono',Menlo,monospace;
    --rail-w:248px; --rail-c:64px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;letter-spacing:-0.011em;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--ink);color:#fff}
  .lab{font-size:12px;color:var(--ink-3)}

  .app{display:flex;min-height:100vh}

  /* sidebar */
  .rail{width:var(--rail-c);flex-shrink:0;background:var(--surface-warm);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;transition:width .24s cubic-bezier(.22,1,.36,1);overflow:hidden;z-index:30}
  .rail:hover{width:var(--rail-w);box-shadow:8px 0 30px rgba(17,17,17,.07)}
  .rail.pinned{width:var(--rail-w);box-shadow:none}
  .rail .lbl{white-space:nowrap;opacity:0;transition:opacity .16s}
  .rail:hover .lbl,.rail.pinned .lbl{opacity:1}
  .rail-head{display:flex;align-items:center;gap:11px;padding:14px 16px 12px;min-height:56px}
  .logo{width:30px;height:30px;flex-shrink:0;border-radius:8px}
  .wordmark{font-weight:600;font-size:18px;letter-spacing:-0.04em;flex:1}
  .pin{width:26px;height:26px;border:none;background:transparent;border-radius:7px;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;flex-shrink:0}
  .pin:hover{background:rgba(17,17,17,.06);color:var(--ink-2)} .pin svg{width:15px;height:15px}
  .rail.pinned .pin{color:var(--green);background:var(--green-soft)}
  .ws{display:flex;align-items:center;gap:8px;margin:4px 11px 8px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;transition:opacity .18s}
  .rail:not(.pinned):not(:hover) .ws{opacity:0}
  .ws-name{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap}
  .ws-sub{font-size:11px;color:var(--ink-3);line-height:1.2;white-space:nowrap}
  .ws .cv{margin-left:auto;color:var(--ink-3);width:14px;height:14px;flex-shrink:0}
  nav{flex:1;padding:8px 11px;overflow:hidden auto}
  .nav-sec{font-size:11px;font-weight:500;color:var(--ink-3);margin:18px 9px 6px;white-space:nowrap}
  .ni{display:flex;align-items:center;gap:13px;padding:9px 9px;border-radius:9px;color:var(--ink-2);font-size:13.5px;font-weight:450;cursor:pointer;transition:background .14s,color .14s;white-space:nowrap}
  .ni svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.8}
  .ni:hover{background:rgba(17,17,17,.045);color:var(--ink)}
  .ni.on{background:var(--green-soft);color:var(--green);font-weight:550}
  .rail-foot{padding:11px;border-top:1px solid var(--line)}
  .user{display:flex;align-items:center;gap:11px;padding:6px 8px;border-radius:9px;cursor:pointer}
  .user:hover{background:rgba(17,17,17,.045)}
  .av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(140deg,var(--green-2),var(--green))}
  .u-name{font-size:12.5px;font-weight:550;line-height:1.15} .u-mail{font-size:11px;color:var(--ink-3);line-height:1.15}

  /* topbar */
  .main{flex:1;min-width:0;display:flex;flex-direction:column}
  .top{height:56px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 30px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .crumb{font-size:13.5px;color:var(--ink-3)} .crumb b{color:var(--ink);font-weight:600} .crumb .s{margin:0 8px;color:var(--line-2)}
  .top .sp{flex:1}
  .nbtn{width:36px;height:36px;border:none;background:transparent;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;position:relative}
  .nbtn:hover{background:rgba(17,17,17,.05);color:var(--ink)} .nbtn svg{width:18px;height:18px;stroke-width:1.8}
  .nbtn .dot{position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--mint);border:1.5px solid var(--bg)}

  .page{padding:30px 38px 64px;max-width:1180px;width:100%;margin:0 auto}
  .fu{animation:fu .55s cubic-bezier(.22,1,.36,1) both}
  .fu2{animation-delay:.07s}.fu3{animation-delay:.14s}
  @keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  .phead{margin-bottom:24px}
  .phead h1{font-size:25px;font-weight:600;letter-spacing:-0.035em;margin:0}
  .phead p{font-size:14px;color:var(--ink-2);margin:5px 0 0}

  /* ===== 4 clickable phase cards ===== */
  .phases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
  @media(max-width:900px){.phases{grid-template-columns:1fr 1fr}}
  .pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;min-height:188px;display:flex;flex-direction:column;cursor:pointer;box-shadow:0 2px 10px rgba(17,17,17,.05);transition:transform .14s,box-shadow .2s,border-color .15s}
  .pcard:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(17,17,17,.09);border-color:var(--line-2)}
  .pcard:active{transform:translateY(-1px) scale(.99)}
  .pcard.cur{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 10px 26px rgba(22,101,52,.08)}
  .pcard.cur:hover{box-shadow:0 0 0 1px var(--green),0 18px 34px rgba(22,101,52,.16)}
  .pn{position:absolute;top:22px;left:22px;font-size:12px;font-weight:500;color:var(--ink-3)}
  .st{position:absolute;top:17px;right:17px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
  .st.lockc{background:var(--surface-warm);border:1px solid var(--line-2);color:var(--ink-3)}
  .st.lockc svg{width:16px;height:16px;stroke-width:2} .st.ring svg{grid-area:1/1;width:40px;height:40px}
  .rpct{grid-area:1/1;font-size:9.5px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums;z-index:1}
  .pt{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-0.02em;margin-top:auto}
  .pt .pi{width:18px;height:18px;flex-shrink:0;stroke-width:1.9}
  .pcard.cur .pi,.pcard.live .pi{color:var(--green)} .pcard.lock .pi{color:var(--ink-3)}
  .pcard.cur .pt,.pcard.live .pt{color:var(--green)}
  .pd{font-size:12px;color:var(--ink-2);line-height:1.45;margin-top:6px}
  .pcard.lock .pt{color:var(--ink-3)} .pcard.lock .pd{color:var(--ink-3)}
  .pbar{height:5px;border-radius:99px;background:var(--green-tint);overflow:hidden;margin-top:14px}
  .pbar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--mint))}

  /* ===== 3 info cards row ===== */
  .grid3{display:grid;gap:18px;grid-template-columns:1.15fr 1fr 1fr}
  @media(max-width:980px){.grid3{grid-template-columns:1fr}}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column}
  .ch{display:flex;align-items:center;gap:10px;margin-bottom:20px}
  .ch h3{font-size:14.5px;font-weight:600;margin:0;letter-spacing:-0.02em} .ch .sp{flex:1}

  /* vertical readiness timeline */
  .vsteps{display:flex;flex-direction:column;flex:1;min-height:236px}
  .vstep{flex:1;display:flex;align-items:center;gap:11px;position:relative}
  .vstep:not(:last-child)::before{content:"";position:absolute;left:10.5px;top:50%;height:100%;width:2px;background:var(--line-2);z-index:0}
  .vstep.done:not(:last-child)::before{background:var(--done)}
  .vdot{width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;z-index:1}
  .vstep.done .vdot{background:var(--done);border-color:var(--done)} .vstep.done .vdot svg{width:12px;height:12px;color:#fff;stroke-width:3}
  .vstep.cur .vdot{border-color:var(--done);background:var(--done)} .vstep.cur .vdot i{width:7px;height:7px;border-radius:50%;background:#fff;display:block}
  .vlabel{font-size:13px;font-weight:500;color:var(--ink-2)}
  .vstep.done .vlabel{color:var(--ink)} .vstep.cur .vlabel{color:var(--green);font-weight:600}
  .vtag{margin-left:auto;font-size:11px;color:var(--green-2);font-weight:550}
  .vdate{margin-left:auto;font-size:11.5px;color:var(--ink-3)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:100px;font-family:var(--sans);font-size:13px;font-weight:550;border:1px solid var(--green);background:var(--green);color:#fff;cursor:pointer;transition:transform .16s,box-shadow .2s}
  .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(22,101,52,.18)} .btn svg{width:16px;height:16px;stroke-width:2}
  .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
  .btn.ghost:hover{box-shadow:0 6px 16px rgba(17,17,17,.07)}
  .btn.full{width:100%}

  /* connection */
  .cstat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--green)}
  .cstat .cdot{width:8px;height:8px;border-radius:50%;background:var(--done);box-shadow:0 0 0 0 rgba(22,101,52,.45);animation:pulse 2.2s infinite}

  /* key-values */
  .kv{display:flex;flex-direction:column;margin-bottom:auto}
  .kr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .kr:last-child{border-bottom:none}
  .kk{font-size:12.5px;color:var(--ink-2)} .kvv{font-size:13px;font-weight:550;text-align:right}
  .tcs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
  .tc{font-size:11px;font-weight:550;padding:3px 9px;border-radius:100px;background:var(--green-soft);color:var(--green)}
  .owners{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .opill{display:inline-flex;align-items:center;gap:6px;padding:3px 5px 3px 4px;border-radius:100px;background:var(--surface-warm);border:1px solid var(--line-2);font-size:12px;font-weight:550;cursor:pointer;transition:border-color .14s}
  .opill:hover{border-color:var(--green-2)}
  .opill .oav{width:18px;height:18px;border-radius:50%;background:linear-gradient(140deg,var(--green-2),var(--green));color:#fff;font-size:8.5px;font-weight:600;display:grid;place-items:center}
  .opill .ox{color:var(--ink-3);font-size:14px;line-height:1;padding:0 2px}
  .addo{width:25px;height:25px;border-radius:50%;border:1px dashed var(--line-2);background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1}
  .addo:hover{border-color:var(--green-2);color:var(--green-2)}

  /* modal */
  .mbg{position:fixed;inset:0;background:rgba(17,17,17,.42);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
  .mbg.open{display:flex;animation:fade .16s}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{background:var(--surface);border-radius:20px;width:100%;max-width:460px;box-shadow:0 28px 70px rgba(17,17,17,.24);overflow:hidden;animation:up .22s cubic-bezier(.22,1,.36,1)}
  @keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .modal-h{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
  .modal-h h3{font-size:15.5px;font-weight:600;margin:0;letter-spacing:-0.02em}
  .modal-x{margin-left:auto;width:30px;height:30px;border:none;background:transparent;border-radius:8px;color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
  .modal-x:hover{background:var(--surface-warm);color:var(--ink)} .modal-x svg{width:17px;height:17px}
  .modal-b{padding:22px}
  .divider{position:relative;text-align:center;margin:20px 0}
  .divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
  .divider span{position:relative;background:var(--surface);padding:0 10px;font-size:12px;color:var(--ink-3)}
  .term{background:#0E1A12;color:#d8e6df;border-radius:10px;padding:13px 15px;font-family:var(--mono);font-size:12px;position:relative;line-height:1.6;word-break:break-all}
  .term .th{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.4);font-size:11px;margin-bottom:8px;font-family:var(--mono)}
  .term .cp{position:absolute;top:9px;right:9px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 9px;font-size:11px;cursor:pointer}
  .note{background:var(--surface-warm);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:16px}
  .fld{margin-bottom:15px} .fld label{display:block;font-size:12.5px;font-weight:550;margin-bottom:6px}
  .inp{width:100%;padding:10px 12px;font-size:13.5px;font-family:inherit;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);outline:none}
  .inp:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(22,101,52,.12)}
  .hint{font-size:12px;color:var(--ink-3);line-height:1.5;margin:-8px 0 16px}
  .mrow{display:flex;gap:10px;margin-top:6px}

  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,101,52,.45)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

  /* engagement switcher dropdown (pure CSS) */
  .ws-wrap{position:relative;margin:4px 11px 8px}
  .ws-wrap .ws{margin:0;width:100%}
  .engsw-cb{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
  .engsw-bd{display:none;position:fixed;inset:0;z-index:40;cursor:default}
  .engsw-cb:checked ~ .engsw-bd{display:block}
  .engmenu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:41;background:var(--surface);border:1px solid var(--line-2);border-radius:13px;box-shadow:0 18px 44px rgba(17,17,17,.18);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
  .rail:not(.pinned):not(:hover) .engmenu{display:none}
  .engsw-cb:checked ~ .engmenu{opacity:1;visibility:visible;transform:none}
  .em-lab{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);padding:6px 9px 5px}
  .engitem{display:flex;align-items:center;gap:10px;padding:9px 9px;border-radius:9px;cursor:pointer;color:var(--ink)}
  .engitem:hover{background:var(--surface-warm)}
  .engitem .ei-logo{width:28px;height:28px;border-radius:8px;background:var(--green);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;flex-shrink:0}
  .engitem .ei-meta{flex:1;min-width:0} .engitem .ei-meta b{font-size:13px;font-weight:600;display:block;line-height:1.2} .engitem .ei-meta span{font-size:11px;color:var(--ink-3)}
  .engitem .ei-chk{color:var(--green);width:16px;height:16px;flex-shrink:0} .engitem .ei-chk svg{width:16px;height:16px;stroke-width:2.4}
  .engitem.manage{border-top:1px solid var(--line);margin-top:4px;padding-top:11px;color:var(--green);font-size:12.5px;font-weight:600}
  .engitem.manage svg{width:15px;height:15px;stroke-width:2}

  /* notification center (pure-CSS popover from the bell) */
  .notif-wrap{position:relative;display:flex}
  .notif-cb{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
  .notif-bd{display:none;position:fixed;inset:0;z-index:60} .notif-cb:checked ~ .notif-bd{display:block}
  .notifmenu{position:absolute;top:calc(100% + 8px);right:0;width:336px;z-index:61;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 20px 50px rgba(17,17,17,.2);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
  .notif-cb:checked ~ .notifmenu{opacity:1;visibility:visible;transform:none}
  .notif-h{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line)} .notif-h b{font-size:13.5px;font-weight:650;letter-spacing:-.01em} .notif-h .mark{font-size:11.5px;color:var(--green);font-weight:550;cursor:pointer;background:none;border:none;font-family:inherit} .notif-h .mark:hover{text-decoration:underline}
  .notif-list{max-height:344px;overflow:auto}
  .notif-item{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;color:var(--ink)} .notif-item:last-child{border-bottom:none} .notif-item:hover{background:var(--surface-warm)}
  .notif-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0} .notif-ic svg{width:15px;height:15px;stroke-width:1.9}
  .notif-ic.act{background:#FBF3E2;color:#9A6B12} .notif-ic.deliv{background:var(--green-soft);color:var(--green)} .notif-ic.stat{background:#EAF1FC;color:#2563C9}
  .ni-body{flex:1;min-width:0} .ni-t{font-size:12.5px;font-weight:600;line-height:1.35} .ni-d{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.4} .ni-time{font-size:10.5px;color:var(--ink-3);margin-top:4px}
  .notif-item.unread .ni-t::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-left:7px;vertical-align:middle}
  .notif-foot{padding:11px 15px;text-align:center;border-top:1px solid var(--line)} .notif-foot a{font-size:12px;color:var(--ink-2);font-weight:550;cursor:pointer} .notif-foot a:hover{color:var(--green)}