:root{
    --bg:#ffffff; --fg:#16181d; --muted:#5d6470; --line:#e4e7ec;
    --card:#f7f8fa; --accent:#8a6d2f;
  }
  @media (prefers-color-scheme: dark){
    :root{ --bg:#0b0d10; --fg:#f2f4f7; --muted:#98a1b0; --line:#232830;
           --card:#12151a; --accent:#c8a34a; }
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg); color:var(--fg);
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column; min-height:100vh;
  }
  .wrap{width:100%; max-width:680px; margin:0 auto; padding:0 24px}
  header{padding:52px 0 8px}
  .mark{
    display:block; width:64px; height:64px; border-radius:14px;
    border:1px solid var(--line);
    margin-bottom:22px;
  }
  h1{font-size:34px; line-height:1.2; margin:0 0 12px; letter-spacing:-.02em}
  .lede{font-size:18px; color:var(--muted); margin:0 0 4px; max-width:52ch}
  main{flex:1; padding:28px 0 0}
  h2{
    font-size:12px; text-transform:uppercase; letter-spacing:.12em;
    color:var(--muted); font-weight:600; margin:44px 0 14px;
  }
  .card{
    border:1px solid var(--line); background:var(--card);
    border-radius:14px; padding:22px 24px;
  }
  .card h3{margin:0 0 6px; font-size:17px}
  .card p{margin:0; color:var(--muted); font-size:15px}
  ul{margin:0; padding-left:20px; color:var(--muted)}
  li{margin:7px 0}
  a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent}
  a:hover{border-bottom-color:var(--accent)}
  footer{
    margin-top:64px; padding:22px 0 40px; border-top:1px solid var(--line);
    color:var(--muted); font-size:14px;
  }
  @media (max-width:520px){
    header{padding-top:48px}
    h1{font-size:28px}
    .lede{font-size:17px}
  }

  /* --- site nav --- */
  nav.site{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding:20px 0; border-bottom:1px solid var(--line); font-size:14px;
  }
  nav.site .navmark{width:28px; height:28px; border-radius:7px; display:block}
  nav.site a{color:var(--fg); border-bottom:none}
  nav.site a:hover{color:var(--accent)}
  nav.site a.here{color:var(--accent); font-weight:600}
  nav.site .navhome{margin-right:auto; display:flex; align-items:center; gap:10px; font-weight:600}

  /* --- product cards --- */
  .products{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media (max-width:560px){ .products{grid-template-columns:1fr} }
  .product img{width:64px; height:64px; border-radius:14px; border:1px solid var(--line); margin-bottom:14px; display:block}
  .product .tag{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 2px}
  .banner{width:100%; height:auto; border-radius:14px; border:1px solid var(--line); display:block; margin:6px 0 0}

  /* --- updates list --- */
  .post{border:1px solid var(--line); background:var(--card); border-radius:14px; padding:20px 24px; margin:0 0 14px}
  .post time{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
  .post h3{margin:6px 0 6px}
  .post p{margin:0; color:var(--muted); font-size:15px}

  /* --- added for the product / policy pages --- */
  .back{display:inline-block; font-size:14px; margin:0 0 26px}
  h2.sec{font-size:12px}
  h3{font-size:17px; margin:30px 0 8px}
  p{margin:0 0 14px}
  .muted{color:var(--muted)}
  .small{font-size:14px}
  .kv{border:1px solid var(--line); background:var(--card); border-radius:14px; padding:6px 20px; margin:16px 0}
  .kv dl{margin:0}
  .kv dt{font-weight:600; margin:16px 0 2px; font-size:15px}
  .kv dd{margin:0 0 16px; color:var(--muted); font-size:15px}
  .pill{display:inline-block; border:1px solid var(--line); background:var(--card);
        border-radius:999px; padding:4px 12px; font-size:13px; color:var(--muted); margin:0 6px 8px 0}