:root{
    --navy-950:#061B33; --navy-900:#0A2540; --ink:#122B45; --slate:#4A6076; --mist:#8FA3B8;
    --paper:#F7FAFC; --surface:#FFFFFF; --hairline:rgba(18,43,69,.10);
    --teal-500:#0E9594; --teal-600:#0B7B7A; --cyan-300:#5BC8E8; --cyan-100:#DCF1F8;
    --r-lg:14px; --r-md:10px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Figtree',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--paper);
    color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
  .wrap{max-width:880px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
  a{color:var(--teal-600)}

  .demo-ribbon{background:var(--navy-950);color:#9FB6CC;font-size:.74rem;font-weight:500;text-align:center;
    padding:.55rem 1rem;letter-spacing:.01em}
  .demo-ribbon b{color:var(--cyan-300);font-weight:700}

  header.site{background:var(--surface);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:10}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
  .brand-ico{height:40px;width:40px;display:block;flex-shrink:0}
  .brand-tx{display:flex;flex-direction:column;line-height:1.05}
  .brand-tx b{font-size:1.15rem;font-weight:800;color:var(--navy-900);letter-spacing:-.01em}
  .brand-tx span{font-size:.62rem;font-weight:700;letter-spacing:.22em;color:var(--teal-500)}
  .back{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink);display:inline-flex;
    align-items:center;gap:.4rem;padding:.55rem .9rem;border:1px solid var(--hairline);border-radius:var(--r-md)}
  .back:hover{border-color:var(--teal-500);color:var(--teal-600)}

  main{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
  .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-500);margin-bottom:.7rem}
  h1{font-size:clamp(1.9rem,4.5vw,2.7rem);font-weight:800;letter-spacing:-.02em;color:var(--navy-900);line-height:1.15}
  .updated{color:var(--mist);font-size:.9rem;margin-top:.8rem}

  .draft{margin-top:1.8rem;background:#FFF8E6;border:1px solid #F2D98A;border-left:4px solid #E7B53C;
    border-radius:0 var(--r-md) var(--r-md) 0;padding:1rem 1.2rem;font-size:.9rem;color:#5b4a16}
  .draft b{color:#3d3208}

  h2{font-size:clamp(1.15rem,2.6vw,1.45rem);font-weight:800;color:var(--navy-900);margin:2.6rem 0 .9rem;
    padding-top:1.4rem;border-top:1px solid var(--hairline)}
  h2:first-of-type{border-top:0;padding-top:0}
  p{margin:.7rem 0;color:var(--slate)}
  p strong, li strong, dt{color:var(--ink)}

  dl{display:grid;grid-template-columns:max-content 1fr;gap:.55rem 1.4rem;margin:1rem 0;font-size:.97rem}
  dt{font-weight:700}
  dd{color:var(--slate)}
  .ph{background:var(--cyan-100);color:var(--teal-600);font-weight:700;padding:.05rem .4rem;border-radius:5px;
    font-size:.92em;white-space:nowrap}

  ul{margin:.7rem 0 .7rem 1.2rem;color:var(--slate)}
  li{margin:.35rem 0}

  footer{background:var(--navy-950);color:#8FA3B8;font-size:.82rem;text-align:center;padding:2rem 1rem}
  footer a{color:var(--cyan-300);text-decoration:none}

  @media(max-width:560px){ dl{grid-template-columns:1fr;gap:.15rem .5rem} dt{margin-top:.6rem} }

  .cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:#0A2540;color:#D7E5F2;border-top:2px solid #0E9594;
    box-shadow:0 -10px 30px rgba(6,27,51,.28);
    display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:center;
    padding:.95rem clamp(1rem,4vw,2.2rem);
    font-family:'Figtree',-apple-system,sans-serif;font-size:.86rem;line-height:1.5;
    transform:translateY(100%);transition:transform .35s ease}
  .cookie-banner.show{transform:none}
  .cookie-banner .cb-text{max-width:62ch;margin:0}
  .cookie-banner a{color:#5BC8E8;font-weight:600;text-decoration:underline}
  .cookie-banner .cb-actions{display:flex;gap:.6rem;flex-shrink:0}
  .cookie-banner .cb-btn{font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;
    border-radius:10px;padding:.62rem 1.2rem;border:1.5px solid transparent;white-space:nowrap;
    transition:background .2s,border-color .2s,color .2s}
  .cookie-banner .cb-accept{background:#0E9594;color:#fff}
  .cookie-banner .cb-accept:hover{background:#0B7B7A}
  .cookie-banner .cb-decline{background:transparent;color:#D7E5F2;border-color:rgba(215,229,242,.35)}
  .cookie-banner .cb-decline:hover{border-color:#5BC8E8;color:#fff}
  @media (max-width:640px){ .cookie-banner{flex-direction:column;text-align:center;gap:.8rem}
    .cookie-banner .cb-actions{width:100%} .cookie-banner .cb-btn{flex:1} }