:root{
    --paper:#F7FAF8;
    --ink:#0F2A1D;
    --ink-soft:#3C5347;
    --green:#127A49;
    --green-deep:#0B5C37;
    --green-pale:#E4F1EA;
    --line:#D7E4DD;
    --amber:#B8791A;
    --amber-pale:#FBF1E1;
    --serif: Georgia, 'Cambria', 'Times New Roman', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: 'SF Mono', 'Consolas', monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);}
  ::selection{background:var(--green-pale);}

  /* ---------------- Gate ---------------- */
  #gate{
    position:fixed; inset:0; background:var(--ink); color:#fff; z-index:999;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    font-family:var(--sans);
  }
  #gate .mark{font-family:var(--serif); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:#8FD9AE; margin-bottom:18px;}
  #gate h1{font-family:var(--serif); font-size:32px; margin:0 0 8px; font-weight:400;}
  #gate p{color:#B7CFC3; margin:0 0 28px; font-size:14px;}
  #gate input{
    background:#12321F; border:1px solid #2C5A41; color:#fff; padding:12px 16px;
    border-radius:3px; font-size:15px; width:260px; text-align:center; letter-spacing:.05em;
  }
  #gate input:focus{outline:2px solid var(--green); border-color:var(--green);}
  #gate button{
    margin-top:14px; background:var(--green); color:#fff; border:none; padding:12px 30px;
    border-radius:3px; font-size:14px; cursor:pointer; letter-spacing:.03em;
  }
  #gate button:hover{background:#0e6a3f;}
  #gate .err{color:#E8A0A0; font-size:13px; margin-top:12px; height:14px;}
  #gate .foot{position:absolute; bottom:26px; font-size:11px; color:#5C7A6C; text-align:center; max-width:420px; line-height:1.6;}

  /* ---------------- App shell ---------------- */
  #app{display:none;}
  #app.show{display:block;}

  header.top{
    background:var(--ink); color:#fff; padding:0;
    position:sticky; top:0; z-index:50; border-bottom:3px solid var(--green);
  }
  .top-inner{max-width:1240px; margin:0 auto; padding:18px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
  .brand{display:flex; align-items:baseline; gap:12px;}
  .brand .b1{font-family:var(--serif); font-size:21px; letter-spacing:.01em;}
  .brand .b2{font-size:11px; color:#8FD9AE; letter-spacing:.12em; text-transform:uppercase;}
  nav.tabs{display:flex; gap:4px;}
  nav.tabs button{
    background:transparent; border:1px solid transparent; color:#B7CFC3; font-family:var(--sans);
    font-size:13.5px; padding:9px 18px; border-radius:3px; cursor:pointer; letter-spacing:.02em;
  }
  nav.tabs button.active{background:var(--green); color:#fff;}
  nav.tabs button:not(.active):hover{border-color:#2C5A41;}

  main{max-width:1240px; margin:0 auto; padding:34px 28px 90px;}
  .view{display:none;}
  .view.active{display:block; opacity:1; transition:opacity .18s ease;}
  .view.active.leaving, .view.active.entering{opacity:0;}

  .stagger-init{opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease;}
  .stagger-init.stagger-in{opacity:1; transform:translateY(0);}

  /* dimension-line motif */
  .dim{position:relative;}
  .dim::before{
    content:''; position:absolute; left:0; top:-14px; width:100%; height:1px; background:var(--line);
  }
  .dimlabel{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); letter-spacing:.03em; text-transform:uppercase;}

  h2.section-title{
    font-family:var(--serif); font-weight:400; font-size:28px; margin:0 0 6px; color:var(--ink);
  }
  p.section-sub{color:var(--ink-soft); font-size:14.5px; margin:0 0 26px; max-width:640px; line-height:1.55;}

  /* ---- Overview stat row ---- */
  .stats{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:36px;}
  .stat{background:var(--paper); padding:20px 22px;}
  .stat .n{font-family:var(--serif); font-size:34px; color:var(--green-deep); line-height:1;}
  .stat .l{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; margin-top:6px;}

  /* ---- Hospital grid ---- */
  .search-row{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; align-items:center;}
  .search-row input[type=text]{
    flex:1; min-width:220px; padding:11px 14px; border:1px solid var(--line); border-radius:3px; font-size:14px; background:#fff;
  }
  .chip{
    padding:7px 14px; border:1px solid var(--line); border-radius:20px; font-size:12.5px; cursor:pointer;
    background:#fff; color:var(--ink-soft); white-space:nowrap;
  }
  .chip.active{background:var(--green); color:#fff; border-color:var(--green);}

  .hgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
  .hcard{
    border:1px solid var(--line); background:#fff; padding:18px 18px 16px; border-radius:4px; cursor:pointer;
    transition:border-color .15s, transform .15s; position:relative;
  }
  .hcard:hover{border-color:var(--green); transform:translateY(-2px);}
  .hcard .letter{
    position:absolute; top:14px; right:14px; font-family:var(--serif); font-size:13px; color:var(--green);
    border:1px solid var(--green); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  }
  .hcard h3{font-family:var(--serif); font-weight:400; font-size:19px; margin:0 26px 10px 0;}
  .hcard .meta{font-size:12px; color:var(--ink-soft); line-height:1.7;}

  /* ---- Hospital detail ---- */
  .backlink{font-size:13px; color:var(--green-deep); cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;}
  .backlink:hover{text-decoration:underline;}
  table.dept{width:100%; border-collapse:collapse; font-size:13px;}
  table.dept th{
    background:var(--ink); color:#fff; text-align:left; padding:10px 12px; font-weight:400; font-size:11.5px;
    letter-spacing:.05em; text-transform:uppercase;
  }
  table.dept td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
  table.dept tr:nth-child(even) td{background:#F1F6F3;}
  table.dept td.num{text-align:center; font-family:var(--mono);}

  /* ---- Cabinet explorer ---- */
  .cgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; margin-bottom:44px;}
  .ccard{border:1px solid var(--line); background:#fff; cursor:pointer; transition:box-shadow .15s, border-color .15s;}
  .ccard:hover{border-color:var(--green); box-shadow:0 6px 18px rgba(15,42,29,.08);}
  .ccard .imgwrap{
    height:190px; display:flex; align-items:center; justify-content:center; background:#fff;
    border-bottom:1px solid var(--line); padding:14px; position:relative;
  }
  .ccard .imgwrap img{max-height:100%; max-width:100%; object-fit:contain;}
  .ccard .body{padding:14px 16px 16px;}
  .ccard h4{font-family:var(--serif); font-weight:400; font-size:16px; margin:0 0 4px;}
  .ccard .dims{font-family:var(--mono); font-size:11px; color:var(--ink-soft);}

  .kaon-banner{
    background:var(--green-deep); color:#fff; border-radius:4px; padding:22px 26px; margin-bottom:36px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .kaon-banner .t{font-family:var(--serif); font-size:19px; margin-bottom:4px;}
  .kaon-banner .s{font-size:13px; color:#BFE3CE; max-width:520px; line-height:1.5;}
  .kaon-banner a{
    background:#fff; color:var(--green-deep); text-decoration:none; padding:11px 22px; border-radius:3px;
    font-size:13.5px; white-space:nowrap; font-weight:600;
  }

  .kaon-banner.hub-punch{
    background:linear-gradient(120deg, var(--ink), var(--green-deep) 70%);
    padding:30px 32px; border:1px solid rgba(255,255,255,.08);
  }
  .punch-line{
    font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.4; color:#DCEFE3; max-width:640px;
  }
  .punch-line span{
    color:#7FE3A8; font-weight:700;
  }
  @media (max-width:600px){ .punch-line{font-size:19px;} }

  .kaon-embed-wrap{
    background:var(--green-deep); border-radius:6px; padding:22px 22px 18px; margin-bottom:36px;
  }
  .kaon-embed-head .t{font-family:var(--serif); font-size:19px; color:#fff; margin-bottom:4px;}
  .kaon-embed-head .s{font-size:13px; color:#BFE3CE; max-width:600px; line-height:1.5; margin-bottom:16px;}
  .kaon-iframe-box{
    position:relative; width:100%; padding-top:52%; border-radius:4px; overflow:hidden; background:#0B3D26;
  }
  .kaon-iframe-box iframe{
    position:absolute; top:0; left:0; width:100%; height:100%; border:none;
  }
  .kaon-load-btn{
    position:absolute; inset:0; width:100%; height:100%; border:none; cursor:pointer;
    background:radial-gradient(circle at center, #145C38, #0B3D26);
    color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    font-family:var(--sans); font-size:14px; font-weight:600;
  }
  .kaon-load-btn:hover{background:radial-gradient(circle at center, #196B41, #0B3D26);}
  .kaon-play{
    width:56px; height:56px; border-radius:50%; background:#fff; color:var(--green-deep);
    display:flex; align-items:center; justify-content:center; font-size:20px; padding-left:4px;
  }
  .kaon-fallback{
    display:inline-block; margin-top:12px; font-size:12px; color:#BFE3CE; text-decoration:underline;
  }
  .kaon-fallback:hover{color:#fff;}

  /* ---- hospital cabinet bar chart ---- */
  .hbar-row{display:flex; align-items:center; gap:14px; margin-bottom:9px;}
  .hbar-row .code{width:56px; flex-shrink:0; font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ink);}
  .hbar-track{flex:1; background:#EEF2EF; border-radius:2px; height:20px; display:flex; overflow:hidden;}
  .hbar-seg{height:100%; transition:width .7s cubic-bezier(.2,.7,.3,1);}
  .hbar-total{width:120px; text-align:right; flex-shrink:0; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); white-space:nowrap;}
  .hbar-legend-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);}
  .hbar-swatch{width:11px; height:11px; border-radius:2px; display:inline-block;}

  /* ---- department heatmap ---- */
  .heatmap{border-collapse:separate; border-spacing:4px; font-family:var(--mono);}
  .heatmap th{font-family:var(--sans); font-weight:600; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; padding:0 6px 8px; text-align:center;}
  .heatmap th.rowhead{text-align:left; padding-left:2px;}
  .heatmap td.rowhead{font-family:var(--mono); font-weight:700; font-size:12.5px; color:var(--ink); padding:0 10px 0 2px; white-space:nowrap;}
  .heatmap td.cell{
    width:46px; height:34px; text-align:center; border-radius:4px; font-size:13px; font-weight:700;
    cursor:pointer; transition:transform .1s; position:relative;
  }
  .heatmap td.cell:hover{transform:scale(1.08); z-index:2;}
  .heatmap td.cell.zero{color:#C7D4CD; font-weight:400;}

  /* ---- drawer strip ---- */
  .dgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px;}
  .dcard{border:1px solid var(--line); background:#fff; padding:12px;}
  .dcard .imgwrap{height:130px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
  .dcard .imgwrap img{max-height:100%; max-width:100%; object-fit:contain;}
  .dcard h5{font-family:var(--serif); font-weight:400; font-size:14.5px; margin:0 0 4px;}
  .dcard .use{font-size:11.5px; color:var(--ink-soft); line-height:1.5;}
  .dcard .items{font-family:var(--mono); font-size:10.5px; color:var(--green-deep); margin-top:6px; display:block;}

  /* ---- Modal ---- */
  #modalBg{position:fixed; inset:0; background:rgba(15,42,29,.55); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
  #modalBg.show{display:flex;}
  .modal{background:#fff; max-width:760px; width:100%; max-height:88vh; overflow-y:auto; border-radius:6px; position:relative;}
  .modal .close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-soft);}
  .modal .mimg{background:var(--paper); padding:28px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);}
  .modal .mimg img{max-height:280px; max-width:100%; object-fit:contain;}
  .modal .mbody{padding:26px 30px 30px;}
  .modal h3{font-family:var(--serif); font-weight:400; font-size:24px; margin:0 0 4px;}
  .modal .sub{font-size:13px; color:var(--ink-soft); margin-bottom:18px;}
  .specrow{display:flex; gap:22px; margin-bottom:20px; flex-wrap:wrap;}
  .specrow div{font-size:12px;}
  .specrow .k{color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; font-size:10.5px; margin-bottom:3px;}
  .specrow .v{font-family:var(--mono); font-size:14px; color:var(--ink);}
  .modal ul{margin:0; padding-left:18px; font-size:13.5px; line-height:1.8; color:var(--ink);}

  footer.foot{border-top:1px solid var(--line); margin-top:50px; padding:22px 28px; text-align:center; font-size:11.5px; color:var(--ink-soft);}

  /* ---- MedXpert walkthrough ---- */
  .mx-step{display:flex; align-items:center; gap:44px; margin-bottom:56px; opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease;}
  .mx-step.in-view{opacity:1; transform:translateY(0);}
  .mx-step:nth-child(even){flex-direction:row-reverse;}
  .mx-media{flex:1 1 50%; min-width:280px;}
  .mx-media .frame{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(15,42,29,.06);}
  .mx-media img{width:100%; display:block;}
  .mx-media.gallery{display:flex; gap:10px;}
  .mx-media.gallery .frame{flex:1;}
  .mx-text{flex:1 1 50%; min-width:280px;}
  .mx-text .step-no{font-family:var(--mono); font-size:11px; color:var(--green-deep); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:7px;}
  .mx-text h3{font-family:var(--serif); font-weight:400; font-size:24px; margin:0 0 10px; color:var(--ink);}
  .mx-text p{font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0 0 14px;}
  .mx-text ul{margin:0; padding-left:18px; font-size:13.5px; line-height:1.8; color:var(--ink);}
  @media (max-width:760px){
    .mx-step, .mx-step:nth-child(even){flex-direction:column;}
    .mx-rail{display:none;}
  }

  .mx-live-dot{width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block; animation:mxpulse 1.6s ease-in-out infinite;}
  @keyframes mxpulse{
    0%{box-shadow:0 0 0 0 rgba(18,122,73,.5);}
    70%{box-shadow:0 0 0 6px rgba(18,122,73,0);}
    100%{box-shadow:0 0 0 0 rgba(18,122,73,0);}
  }

  .mx-stats{display:flex; gap:22px; margin:2px 0 16px; flex-wrap:wrap;}
  .mx-stat-num{font-family:var(--mono); font-size:26px; font-weight:700; color:var(--green-deep); line-height:1;}
  .mx-stat-label{font-size:11px; color:var(--ink-soft); margin-top:4px; max-width:130px; line-height:1.3;}

  .mx-rail{
    position:fixed; left:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:30;
  }
  .mx-rail-dot{width:8px; height:8px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s, transform .2s;}
  .mx-rail-dot.active{background:var(--green); transform:scale(1.4);}
  @media (max-width:1100px){ .mx-rail{display:none;} }

  /* ---- MedXpert video ---- */
  .mx-video-wrap{background:var(--green-deep); border-radius:8px; padding:22px 22px 18px; margin:28px 0 8px;}
  .mx-video-head .t{font-family:var(--serif); font-size:19px; color:#fff; margin-bottom:4px;}
  .mx-video-head .s{font-size:13px; color:#BFE3CE; max-width:600px; line-height:1.5; margin-bottom:16px;}
  .mx-video-box{position:relative; width:100%; padding-top:56.25%; border-radius:4px; overflow:hidden; background:#0B3D26;}
  .mx-video-box iframe{position:absolute; inset:0; width:100%; height:100%; border:none;}

  /* ---- MedXpert ecosystem diagram ---- */

  /* ---- Pharmacy Hub ---- */
  .hub-eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); margin-bottom:10px;}
  .overview-hero{border-radius:6px; overflow:hidden; margin-bottom:26px; box-shadow:0 10px 30px rgba(15,42,29,.1); max-height:340px;}
  .overview-hero img{width:100%; height:100%; object-fit:cover; display:block; max-height:340px;}

  .hub-immersive{
    box-shadow:0 14px 36px rgba(15,42,29,.18); margin:0 0 36px;
    width:100vw; position:relative; left:50%; margin-left:-50vw;
  }
  .hub-photo-layer{position:relative; width:100%; padding-top:44%; overflow:hidden;}
  .hub-photo-layer > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .hub-bg-overlay{
    position:absolute; inset:0;
    background:linear-gradient(0deg, var(--ink) 0%, rgba(11,30,20,.5) 26%, rgba(11,30,20,.06) 48%, rgba(11,30,20,.22) 100%);
  }
  .hub-bg-text{position:absolute; left:0; right:0; top:0; padding:26px 5vw; z-index:2; pointer-events:none;}
  .hub-bg-text h2{font-family:var(--serif); font-weight:400; font-size:28px; color:#fff; margin:0 0 6px;}
  .hub-bg-text p{font-size:13.5px; color:#D9EBE0; max-width:520px; line-height:1.5; margin:0;}
  .hub-visitor-badge{
    position:absolute; top:4%; left:66%; z-index:2; background:rgba(11,30,20,.75);
    border:1px solid rgba(255,255,255,.25); color:#EAF6EF; font-size:11px; font-weight:600;
    padding:7px 13px; border-radius:999px; white-space:nowrap; cursor:pointer;
  }
  .hub-lines{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;}
  .hub-lines line{stroke:rgba(255,255,255,.8); stroke-width:.25; stroke-dasharray:1,0.8;}
  .hub-hotspot{position:absolute; z-index:3; transform:translate(-50%,-50%); cursor:pointer;}
  .hub-hotspot-dot{
    width:24px; height:24px; border-radius:50%; background:var(--accent); color:#0B3D26; font-weight:700;
    font-family:var(--mono); font-size:12px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 5px rgba(30,158,87,.3), 0 4px 10px rgba(0,0,0,.35);
    animation:mxpulse 2s ease-in-out infinite;
  }
  .hub-callout{
    position:absolute; z-index:3; white-space:nowrap; background:rgba(11,30,20,.85);
    border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:5px 12px 5px 6px; font-size:12px;
    color:#fff; display:flex; align-items:center; gap:7px; font-weight:600; cursor:pointer; transition:background .2s ease;
  }
  .hub-callout:hover{background:rgba(30,158,87,.5);}
  .hub-callout b{
    display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
    background:var(--accent); color:#0B3D26; font-family:var(--mono); font-size:10.5px; flex-shrink:0;
  }

  .hub-dark-body{background:var(--ink); padding:32px 5vw 30px;}
  .hub-point-details{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:30px;}
  .hub-point{
    display:flex; gap:12px; font-size:12.5px; color:#C3D6CB; line-height:1.55;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:16px;
    transition:background .3s ease, border-color .3s ease, transform .3s ease;
  }
  .hub-point.jump-highlight{
    background:rgba(30,158,87,.22); border-color:var(--accent); transform:translateY(-2px);
  }
  .hub-point b{display:block; color:#fff; font-size:13.5px; margin-bottom:4px; font-weight:600;}
  .hub-point-num{
    flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--accent); color:#0B3D26;
    font-family:var(--mono); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  .hub-script-list{margin:0 0 30px; padding-left:20px; list-style:none; max-width:900px;}
  .hub-script-list li{
    font-size:14.5px; line-height:1.6; color:#EDF3EF; margin-bottom:16px; padding-left:14px;
    border-left:2px solid var(--green); position:relative;
  }
  .hub-script-list li:last-child{margin-bottom:0;}

  .hub-cards{display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:34px;}
  .hub-cards .hub-card{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;}
  .hub-cards .hub-card > div:first-child{flex:1 1 320px;}
  .hub-cards .mx-stats{margin:0; display:flex; gap:32px;}
  .hub-card{border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:22px 24px; background:rgba(255,255,255,.04);}
  .hub-card.live{border-color:var(--green); background:rgba(30,158,87,.1); box-shadow:0 6px 20px rgba(18,122,73,.15);}
  .hub-card h4{font-family:var(--serif); font-weight:400; font-size:18px; margin:0 0 8px; color:#fff; display:flex; align-items:center; gap:8px;}
  .hub-card p{font-size:13px; color:#C3D6CB; line-height:1.55; margin:0;}
  .hub-card .mx-stats{margin:10px 0 4px;}
  .hub-card .mx-stat-num{font-size:22px; color:#7FE3A8;}
  .hub-card .mx-stat-label{color:#9FC4AC;}

  .hub-transition{
    background:transparent; border-top:1px solid rgba(255,255,255,.15); color:#EDF3EF; padding:22px 0 0; font-family:var(--serif);
    font-size:16px; font-style:italic; text-align:center; display:flex; align-items:center; justify-content:center; gap:12px;
  }
  @media (max-width:1000px){
    .hub-point-details{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:760px){
    .hub-cards{grid-template-columns:1fr;}
    .hub-point-details{grid-template-columns:1fr; gap:14px;}
    .hub-callout{display:none;}
    .hub-lines{display:none;}
    .hub-bg-text h2{font-size:22px;}
    .hub-photo-layer{padding-top:62%;}
  }

  @media (max-width:640px){
    .stats{grid-template-columns:repeat(2,1fr);}
    nav.tabs{width:100%; justify-content:flex-start;}
    .top-inner{flex-direction:column; align-items:flex-start;}
  }