:root{
    --cream:#faf7f1; --navy:#1b3a5b; --teal:#37897f; --bright:#1e8fb0; --slate:#3a5a76;
    --line:#e3ddd2; --ink-soft:#5c6b7a; --white:#fff;
    --shadow:0 1px 2px rgba(27,58,91,.06), 0 6px 18px rgba(27,58,91,.07);
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--cream); color:var(--navy);
    font-family:Poppins,"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased}
  .wrap{max-width:1000px; margin:0 auto; padding:0 20px 48px}

  /* ---------- hero ---------- */
  .hero{padding:40px 0 34px}
  .hand{font-family:Caveat,Poppins,cursive; font-size:31px; font-weight:700; color:var(--teal); display:block; margin-bottom:2px}
  .hero h1{font-size:44px; line-height:1.06; font-weight:700; margin:0 0 14px; max-width:16ch; text-wrap:balance}
  .hero .lede{margin:0 0 24px; font-size:15.5px; line-height:1.65; color:var(--slate); max-width:58ch}
  .cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:26px}
  .btn{display:inline-block; text-decoration:none; font-size:14px; font-weight:600;
    background:var(--navy); color:#fff; border:1.5px solid var(--navy); border-radius:999px; padding:13px 26px;
    transition:opacity .16s}
  .btn:hover{opacity:.88}
  .btn.ghost{background:transparent; color:var(--navy); border-color:var(--line)}
  .btn.ghost:hover{border-color:var(--teal); color:var(--teal); opacity:1}
  .btn:focus-visible{outline:3px solid var(--bright); outline-offset:3px}
  .stats{display:flex; gap:11px; flex-wrap:wrap}
  .stat{background:var(--white); border:1.5px solid var(--line); border-radius:13px; padding:12px 18px; box-shadow:var(--shadow)}
  .stat b{display:block; font-size:24px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
  .stat span{font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); font-weight:600}

  /* ---------- what you get ---------- */
  .feats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 34px}
  .feat{background:var(--white); border:1.5px solid var(--line); border-radius:15px; padding:18px 20px; box-shadow:var(--shadow)}
  .feat h3{margin:11px 0 6px; font-size:15px; font-weight:700}
  .feat p{margin:0; font-size:13px; line-height:1.6; color:var(--slate)}
  .feat svg{color:var(--teal)}

  .secthead{display:flex; align-items:baseline; gap:12px; margin:0 0 16px; flex-wrap:wrap}
  .secthead h2{margin:0; font-size:24px; font-weight:700}
  .secthead p{margin:0; font-size:13px; color:var(--ink-soft)}

  /* ---------- search ---------- */
  .search{position:relative; margin:0 0 18px}
  .search input{font-family:inherit; font-size:14px; width:100%; padding:13px 16px 13px 42px;
    border:1.5px solid var(--line); border-radius:13px; background:var(--white); color:inherit; box-shadow:var(--shadow)}
  .search input:focus{outline:none; border-color:var(--bright)}
  .search svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); opacity:.45}

  /* ---------- modules as an accordion ---------- */
  .mods{display:flex; flex-direction:column; gap:12px}
  .mod{background:var(--white); border:1.5px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
  .mod[open]{border-color:#cfe0dc}
  .mh{display:flex; align-items:center; gap:16px; padding:16px 20px; cursor:pointer; list-style:none;
    transition:background .14s}
  .mh::-webkit-details-marker{display:none}
  .mh:hover{background:var(--cream)}
  .mh:focus-visible{outline:3px solid var(--bright); outline-offset:-3px}
  .mart{height:50px; width:auto; max-width:62px; object-fit:contain; flex:none}
  .mhx{flex:1; min-width:0; display:flex; flex-direction:column}
  .mnum{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--teal)}
  .mt{margin:2px 0 0; font-size:19px; font-weight:700; line-height:1.2}
  .mp{margin:4px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-soft)}
  .mcount{flex:none; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--teal); background:#e8f1ef; border-radius:999px; padding:6px 12px; white-space:nowrap}
  .chev{flex:none; color:var(--ink-soft); transition:transform .18s}
  .mod[open] .chev{transform:rotate(180deg)}
  .rows{display:flex; flex-direction:column; border-top:1.5px solid var(--line)}
  .row{display:flex; align-items:center; gap:14px; padding:12px 20px; text-decoration:none; color:inherit;
    border-top:1px solid var(--line); transition:background .14s}
  .row:first-child{border-top:none}
  .row:hover{background:var(--cream)}
  .row:focus-visible{outline:3px solid var(--bright); outline-offset:-3px}
  .rid{width:28px; height:28px; border-radius:8px; background:var(--cream); border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; flex:none;
    font-variant-numeric:tabular-nums}
  .row:hover .rid{background:var(--teal); border-color:var(--teal); color:#fff}
  .rt{flex:1; font-size:14px; font-weight:500; line-height:1.4}
  .rgo{color:var(--teal); font-size:15px; flex:none; opacity:0; transition:opacity .14s, transform .14s}
  .row:hover .rgo{opacity:1; transform:translateX(3px)}
  .empty{padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:14px}

  .pack{margin-top:14px; background:#e8f1ef; border-radius:16px; padding:20px 22px;
    display:flex; align-items:center; gap:18px; flex-wrap:wrap}
  .pack h3{margin:0 0 5px; font-size:16px; font-weight:700}
  .pack p{margin:0; font-size:13px; line-height:1.6; color:var(--slate); max-width:56ch}

  .foot{margin-top:38px; padding-top:22px; border-top:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    font-size:11.5px; color:var(--ink-soft)}
  .foot .fb2{display:flex; align-items:center; flex:none}
  .foot .fb2 img{height:40px; width:auto; display:block}

  @media (max-width:760px){ .feats{grid-template-columns:1fr} }
  @media (max-width:640px){
    .hero h1{font-size:32px}
    .mart{display:none}
    .mcount{display:none}
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important} }