:root { color-scheme: dark; --bg:#191b1f; --panel:#23262b; --raised:#292d33; --text:#f1f0eb; --muted:#a8b3c2; --accent:#b4bdd2; --line:#40454e; --good:#b8d3c1; --warn:#e6ce97; --cool:#b9c9e5; }
    * { box-sizing:border-box; }
    html, body { width:100%; max-width:100%; overflow-x:hidden; }
    body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 Arial,Helvetica,sans-serif; }
    .wrap { width:calc(100% - 40px); max-width:1120px; margin:0 auto; }
    header { border-bottom:1px solid var(--line); }
    .nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
    .wordmark { font-size:23px; font-weight:700; letter-spacing:-1.1px; color:var(--text); text-decoration:none; }
    .kicker { color:var(--muted); font-size:12px; letter-spacing:1.6px; text-transform:uppercase; }
    .sample-badge { border:1px solid #6d6472; border-radius:999px; color:#ded1e0; font-size:12px; padding:6px 11px; white-space:nowrap; }
    main { padding:56px 0 72px; }
    .hero { max-width:820px; margin-bottom:34px; }
    h1 { font-size:clamp(34px, 6vw, 60px); line-height:1.04; letter-spacing:-2.4px; margin:12px 0 16px; font-weight:600; }
    .intro { color:var(--muted); font-size:18px; max-width:690px; margin:0; }
    .panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
    .panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:24px 26px; border-bottom:1px solid var(--line); }
    h2 { margin:0; font-size:21px; letter-spacing:-.4px; }
    .panel-head p { color:var(--muted); margin:5px 0 0; }
    .date { color:var(--muted); font-size:13px; white-space:nowrap; }
    .metrics { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
    .metric { padding:21px 25px 23px; border-right:1px solid var(--line); }
    .metric:last-child { border:0; }
    .metric strong { display:block; font-size:33px; line-height:1.1; font-weight:600; }
    .metric span { display:block; color:var(--muted); font-size:13px; margin-top:8px; }
    .table-scroll { overflow-x:auto; }
    table { border-collapse:collapse; width:100%; min-width:850px; text-align:left; }
    th,td { padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
    thead th { color:var(--muted); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600; }
    tbody tr:last-child th, tbody tr:last-child td { border-bottom:0; }
    tbody th { width:22%; font-weight:600; }
    .po { display:block; font-variant-numeric:tabular-nums; }
    .case-detail { display:block; color:var(--muted); font-size:13px; font-weight:400; margin-top:4px; }
    td { font-size:14px; }
    .pill { display:inline-block; border-radius:999px; padding:4px 9px; white-space:nowrap; font-size:12px; }
    .review { background:#3a3942; color:var(--cool); }
    .complete { background:#303d36; color:var(--good); }
    .held { background:#453d2e; color:var(--warn); }
    .story { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; margin-top:20px; }
    .story-card { padding:23px 25px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
    .story-card h2 { margin-bottom:14px; }
    .steps { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
    .steps li { display:grid; grid-template-columns:30px 1fr; gap:12px; color:var(--muted); }
    .step-no { color:var(--accent); font-size:12px; letter-spacing:1px; padding-top:2px; }
    .steps strong { color:var(--text); font-weight:600; }
    .control-copy { color:var(--muted); margin:0 0 13px; }
    .control-copy:last-child { margin-bottom:0; }
    .footnote { color:var(--muted); font-size:13px; max-width:850px; margin:22px 0 0; }
    footer { border-top:1px solid var(--line); color:var(--muted); padding:20px 0 28px; font-size:13px; }
    @media(max-width:760px) { .wrap { width:calc(100% - 28px); max-width:1120px; } main { padding:40px 0 54px; } .metrics { grid-template-columns:repeat(2,1fr); } .metric:nth-child(2) { border-right:0; } .metric:nth-child(-n+2) { border-bottom:1px solid var(--line); } .panel-head { padding:20px; } .story { grid-template-columns:1fr; } }
    @media(max-width:760px) {
      .table-scroll { overflow:visible; }
      table { display:block; width:100%; min-width:0; }
      thead { display:none; }
      tbody { display:block; padding:0 18px; }
      tbody tr { display:block; padding:17px 0; border-bottom:1px solid var(--line); }
      tbody tr:last-child { border-bottom:0; }
      tbody th { display:block; width:auto; padding:0 0 8px; border:0; }
      tbody td { display:grid; grid-template-columns:105px minmax(0,1fr); gap:12px; width:auto; padding:5px 0; border:0; font-size:13px; overflow-wrap:anywhere; }
      tbody td::before { content:attr(data-label); color:var(--muted); font-size:10px; letter-spacing:.8px; text-transform:uppercase; }
    }
    @media(max-width:430px) { .nav { min-height:66px; gap:10px; } .sample-badge { font-size:11px; padding:5px 8px; } .kicker { letter-spacing:1px; } h1 { font-size:clamp(32px,8vw,42px); letter-spacing:-1.4px; } .intro { font-size:16px; } .metric { padding:17px; } .metric strong { font-size:29px; } .panel-head { display:block; } .date { display:block; margin-top:8px; } }