:root{
  --green:#12361f;
  --green-2:#1f4a2d;
  --gold:#b08a3b;
  --cream:#f7f1e7;
  --paper:#fffaf2;
  --ink:#1e211d;
  --muted:#6d6a60;
  --line:rgba(176,138,59,.34);
  --shadow:0 18px 45px rgba(18,54,31,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(176,138,59,.18), transparent 28rem),
    linear-gradient(180deg,#fbf7ee 0%,#efe4d1 100%);
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(18,54,31,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(18,54,31,.03) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, black, transparent 72%);
}
.page{width:min(760px,100%); margin:0 auto; padding:18px 14px 28px; position:relative}
.hero{
  background:linear-gradient(160deg, rgba(255,250,242,.96), rgba(247,241,231,.90));
  border:1px solid var(--line);
  border-radius:28px;
  padding:16px 16px 22px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero:after{
  content:"";
  position:absolute; right:-80px; top:-90px;
  width:190px; height:190px; border-radius:50%;
  border:22px solid rgba(176,138,59,.10);
}
.logo-card{
  background:#fff;
  border-radius:20px;
  padding:10px;
  border:1px solid rgba(176,138,59,.22);
  box-shadow:0 10px 25px rgba(0,0,0,.05);
}
.logo-card img{display:block; width:100%; height:auto; border-radius:12px}
.eyebrow{
  margin:22px 0 8px;
  color:var(--gold);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
}
h1{
  margin:0;
  color:var(--green);
  font-family: Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,10vw,4rem);
  line-height:.95;
  letter-spacing:-.04em;
}
.intro{margin:14px 0 0; color:var(--muted); font-size:1rem; line-height:1.45; max-width:58ch}
.accordion{margin-top:16px; display:grid; gap:10px}
details{
  background:rgba(255,250,242,.96);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 10px 24px rgba(18,54,31,.08);
  overflow:hidden;
}
summary{
  list-style:none;
  cursor:pointer;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px;
  color:var(--green);
  font-weight:900;
  font-size:1.08rem;
  letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;
}
summary::-webkit-details-marker{display:none}
.chev{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:999px;
  display:grid; place-items:center;
  background:var(--green);
  color:var(--cream);
  font-size:1.35rem;
  line-height:1;
  transition:transform .18s ease, background .18s ease;
}
details[open] summary{border-bottom:1px solid var(--line)}
details[open] .chev{background:var(--gold); transform:rotate(45deg)}
.content{padding:6px 18px 18px; color:#2b2b25; line-height:1.48; font-size:1rem}
.content p{margin:10px 0}.lead{font-weight:800; color:var(--green-2)}
ol{margin:8px 0 0; padding-left:1.25rem}li{margin:8px 0}.tip{background:rgba(176,138,59,.13); border-left:4px solid var(--gold); padding:11px 12px; border-radius:12px; font-weight:700}
footer{text-align:center; color:var(--green); padding:20px 8px 4px; font-weight:800}.small{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-top:4px}
@media (max-width:390px){.page{padding:12px 10px 22px}.hero{border-radius:24px;padding:12px 12px 18px}summary{padding:16px 15px;font-size:1rem}.content{padding:4px 15px 16px}}
@media (min-width:760px){.page{padding-top:28px}.hero{padding:22px 24px 28px}.logo-card{max-width:620px}.accordion{gap:12px}}