/* ===== Article pages — Privacy & Help =====================
   Dark topo hero + calm paper reading column.               */

/* HERO */
.hero{
  padding:140px 40px 72px; background:var(--forest);
  position:relative; overflow:hidden; text-align:center;
}
.hero .topo-bg{
  position:absolute; inset:0;
  background-image:url('/media/contours.png');
  background-size:1400px auto; background-position:center; opacity:.13;
}
.hero > *{ position:relative; z-index:2; }
.hero .eyebrow{ font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--amber); margin-bottom:20px; }
.hero h1{ font-size:clamp(36px,5vw,64px); color:var(--sand); margin-bottom:16px; }
.hero .meta{ font-size:15px; color:rgba(240,232,216,.45); letter-spacing:.04em; }
.hero .app-icon-sm{
  width:72px; height:72px; border-radius:18px; overflow:hidden; margin:0 auto 24px;
  box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.07);
}
.hero .app-icon-sm img{ width:100%; height:100%; object-fit:cover; display:block; }

/* BODY */
.policy-body{ background:var(--sand); padding:80px 0 100px; position:relative; overflow:hidden; }
.policy-body .topo-r{
  position:absolute; right:0; top:0; bottom:0; width:480px;
  background-image:url('/media/contours.png');
  background-size:560px auto; background-position:left center; opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 50%);
          mask-image:linear-gradient(90deg,transparent,#000 50%);
}
.policy-wrap{ max-width:740px; margin:0 auto; padding:0 40px; position:relative; z-index:1; }

/* intro callout */
.privacy-callout{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--moss);
  border-radius:0 14px 14px 0; padding:24px 28px; margin-bottom:52px;
}
.privacy-callout p{ font-size:16.5px; color:var(--ink-soft); margin:0; line-height:1.7; }
.privacy-callout p strong{ color:var(--ink); font-weight:500; }

/* sections (explicit markup) */
.pol-section{ margin-bottom:52px; }
.pol-section h2{
  font-size:clamp(20px,2.2vw,26px); font-weight:300;
  color:var(--ink); margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid var(--line); letter-spacing:.01em;
}
.pol-section p{ font-size:16.5px; color:var(--ink-soft); margin:0 0 14px; line-height:1.75; }
.pol-section p:last-child{ margin-bottom:0; }
.pol-section strong{ color:var(--ink); font-weight:500; }
.pol-section a{ color:var(--moss); text-decoration:underline; text-decoration-color:rgba(70,96,63,.35); text-underline-offset:3px; }
.pol-section a:hover{ text-decoration-color:var(--moss); }
.pol-section ul{ margin:0 0 14px 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.pol-section ul li{ font-size:16.5px; color:var(--ink-soft); line-height:1.65; padding-left:20px; position:relative; }
.pol-section ul li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--tan); position:absolute; left:0; top:9px; }
.pol-section ul li strong{ color:var(--ink); }

/* emphasis boxes */
.em-box{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin:18px 0; font-size:16px; color:var(--ink); line-height:1.65; }
.em-box + .em-box{ margin-top:10px; }
.em-box.green{ border-left:3px solid var(--moss); color:var(--ink-soft); }
.em-box.green strong{ color:var(--moss); }

/* contact line */
.contact-line{ margin-top:56px; padding-top:32px; border-top:1px solid var(--line); font-size:15px; color:var(--ink-soft); text-align:center; }
.contact-line a{ color:var(--moss); text-decoration:underline; text-underline-offset:3px; }

/* ===== Markdown content (help pages) =======================
   Help pages are authored in Markdown and render inside
   .policy-wrap, so style raw elements to match.             */
.policy-wrap.prose h1{ font-size:clamp(28px,3.4vw,40px); color:var(--ink); margin:0 0 28px; }
.policy-wrap.prose h2{
  font-size:clamp(20px,2.2vw,26px); font-weight:300; color:var(--ink);
  margin:48px 0 16px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.policy-wrap.prose h3{ font-size:18px; font-weight:400; color:var(--ink); margin:28px 0 8px; }
.policy-wrap.prose p{ font-size:16.5px; color:var(--ink-soft); margin:0 0 14px; line-height:1.75; }
.policy-wrap.prose strong{ color:var(--ink); font-weight:500; }
.policy-wrap.prose a{ color:var(--moss); text-decoration:underline; text-decoration-color:rgba(70,96,63,.35); text-underline-offset:3px; }
.policy-wrap.prose a:hover{ text-decoration-color:var(--moss); }
.policy-wrap.prose ul,.policy-wrap.prose ol{ margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.policy-wrap.prose li{ font-size:16.5px; color:var(--ink-soft); line-height:1.65; }
.policy-wrap.prose li strong{ color:var(--ink); }
.policy-wrap.prose hr{ height:1px; background:var(--line); border:0; margin:44px 0; }
.policy-wrap.prose blockquote{
  margin:22px 0; padding:16px 22px; background:#fff;
  border:1px solid var(--line); border-left:3px solid var(--moss); border-radius:0 12px 12px 0;
  color:var(--ink-soft); font-size:16px; line-height:1.65;
}
.policy-wrap.prose blockquote p{ margin:0; }
.policy-wrap.prose .btn-secondary{
  display:inline-flex; align-items:center; gap:8px; margin:8px 0;
  padding:13px 24px; border-radius:11px; background:var(--moss); color:#fff;
  font-size:15px; font-weight:400; letter-spacing:.03em; text-decoration:none;
  transition:transform .15s, box-shadow .15s;
}
.policy-wrap.prose .btn-secondary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(70,96,63,.25); color:#fff; }
.app-icon-top{ width:96px; height:96px; border-radius:22px; overflow:hidden; margin:0 auto 8px; box-shadow:0 14px 34px rgba(0,0,0,.18); }
.app-icon-top img{ width:100%; height:100%; object-fit:cover; display:block; }
.back-link{ display:inline-block; margin-bottom:8px; font-size:14px; }