/* Public pages: pricing, help, contact, legal, report abuse, 404 and the
   development checkout simulator. Same tokens and components as the app. */

.site { display: flex; flex-direction: column; min-height: calc(100dvh * var(--vz)); }

.site-top {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: var(--safe-top);
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1100px;
  height: 76px;
  margin: 0 auto;
  padding: 0 32px;
}
.site-header .hz-back-pill { display: inline-flex; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand-word { font-size: 1.1875rem; font-weight: var(--fw-bold); letter-spacing: -0.03em; }
/* Narrow phones: the logo leads home; the back link would push the tools off. */
@media (max-width: 520px) { .site-header .site-back { display: none; } }
.site-chips { max-width: 1100px; margin: 0 auto; padding: 0 32px 14px; box-sizing: border-box; }
.site-lang { position: relative; }
.site-lang > summary { list-style: none; cursor: pointer; }
.site-lang > summary::-webkit-details-marker { display: none; }
.site-lang .hz-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); display: grid; min-width: 200px; max-height: calc(70vh * var(--vz)); overflow: auto; }
.site-lang .hz-pop-item { text-decoration: none; }
.site-lang .hz-pop-item[aria-current="true"] { font-weight: 600; }

.page {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 32px 120px;
  box-sizing: border-box;
  outline: none;
}
.page-hero { display: grid; gap: var(--s3); max-width: 46rem; margin-bottom: var(--s10); }
.page-hero h1 { font: 600 36px/1.15 var(--hz-font); letter-spacing: -0.02em; }
.page-hero .lead { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.page-hero-doc { margin-bottom: var(--s8); }
.page-hero .lead { color: var(--hz-slate-2); }
.page-meta { display: grid; gap: var(--s1); margin-top: var(--s8); }

/* --------------------------------------------------------------- pricing */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s6);
  border: var(--border) solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.plan-featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-pop); }
.plan-head { display: grid; gap: var(--s2); }
.plan-tag { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.plan h2 { font-size: var(--fs-xl); }
.plan-price { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.plan-summary { color: var(--ink-2); }
.plan-list { display: grid; gap: var(--s2); flex: 1; list-style: none; }
.plan-list li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.plan-list .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--brand); }
.pricing-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
  margin-top: var(--s10);
}
.pricing-note { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); border-radius: var(--r-lg); background: var(--surface-sunken); }
.pricing-note h2 { font-size: var(--fs-md); }
.pricing-note p { font-size: var(--fs-sm); color: var(--ink-2); }
.disclosure { margin-top: var(--s8); border: var(--border) solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.disclosure summary {
  padding: var(--s4) var(--s5);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.disclosure-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s6);
  padding: 0 var(--s5) var(--s5);
}
.disclosure-body h2 { font-size: var(--fs-md); margin-bottom: var(--s2); }
.disclosure-body p { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s2); }

/* --------------------------------------------------------------- documents */

.doc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, var(--read-max));
  gap: var(--s12);
  align-items: start;
}
.doc-layout:not(:has(.doc-aside)) { grid-template-columns: minmax(0, var(--read-max)); }
.doc-aside { position: sticky; top: calc(56px + var(--s6)); }
.doc-toc { display: grid; gap: var(--s3); }
.doc-toc ol { display: grid; gap: 2px; list-style: none; }
.doc-toc a {
  display: block;
  padding: 6px var(--s3);
  border-left: 2px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-decoration: none;
  line-height: var(--lh-snug);
}
.doc-toc a:hover { border-left-color: var(--brand); color: var(--ink); }
.doc-content { display: grid; gap: var(--s8); min-width: 0; }
.prose section { display: grid; gap: var(--s3); scroll-margin-top: calc(56px + var(--s6)); }
.prose h2 { font-size: var(--fs-lg); }
.prose p, .prose li { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.65; }
.prose ul { display: grid; gap: var(--s2); padding-left: 1.25em; }
.prose a, .help-topic a { overflow-wrap: anywhere; }

.help-topic {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--s4);
  padding-bottom: var(--s8);
  border-bottom: var(--border) solid var(--line);
  scroll-margin-top: calc(56px + var(--s6));
}
.help-topic:last-child { border-bottom: 0; }
.help-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.help-topic-body { display: grid; gap: var(--s3); }
.help-topic-body h2 { font-size: var(--fs-lg); padding-top: 4px; }
.help-topic-body p { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.65; }

.contact-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s12);
  padding: var(--s6);
  border-radius: var(--r-xl);
  background: var(--brand-tint);
}
.contact-band h2 { font-size: var(--fs-lg); margin-bottom: var(--s1); }
.contact-band p { color: var(--ink-2); max-width: 52ch; }

.facts { display: grid; gap: 0; max-width: var(--read-max); margin-bottom: var(--s6); border: var(--border) solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.facts > div { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: var(--s4); padding: var(--s3) var(--s5); }
.facts > div + div { border-top: var(--border) solid var(--line); }
.facts dt { color: var(--ink-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.facts dd { margin: 0; }

/* ------------------------------------------------------------- report abuse */

.report-layout { display: grid; gap: var(--s5); max-width: var(--read-max); }
.report-form { gap: var(--s5); }
.report-form fieldset { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; }
.report-form legend { margin-bottom: var(--s2); font-weight: var(--fw-semibold); }
.report-form .field { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.report-form .field > input:not([type="checkbox"]):not([type="radio"]),
.report-form .field > textarea,
.report-form .field > select {
  width: 100%;
  min-height: var(--control);
  padding: 0 var(--s3);
  border: var(--border) solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
}
.report-form .field > textarea { padding: var(--s3); min-height: 120px; }
.report-form .field > input:focus, .report-form .field > textarea:focus, .report-form .field > select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
.report-form .field small { font-weight: var(--fw-regular); color: var(--ink-3); font-size: var(--fs-meta); }
.report-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.choice-stack { grid-template-columns: auto 1fr; align-items: start; }
.choice-text { display: grid; gap: 2px; }
.choice-stack .choice-meta { grid-column: auto; }
.choice-stack input { margin-top: 3px; }

/* --------------------------------------------------------------- footer */

/* The global one-line footer (02-screens): © left, links right, 13 px slate. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 14px max(56px, var(--safe-right)) calc(14px + var(--safe-bottom)) max(56px, var(--safe-left));
  box-sizing: border-box;
  color: var(--hz-slate);
  font: 500 13px var(--hz-font);
}
.site-footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { color: var(--hz-slate); text-decoration: none; }
.site-footer a:hover { color: var(--hz-ink); }

/* --------------------------------------------------------------- states */

.state-page {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  max-width: 560px;
  margin: var(--s10) auto 0;
  padding: var(--s10) var(--s6);
  border: var(--border) solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  text-align: center;
}
.state-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-weight: var(--fw-bold);
}

/* ----------------------------------------------------- checkout simulator */

.demo-checkout { flex: 1; display: grid; gap: var(--s5); align-content: start; width: min(560px, 100%); margin: 0 auto; padding: var(--s8) var(--gutter); }
.demo-checkout-head { display: flex; align-items: center; justify-content: space-between; }
.demo-card { display: grid; gap: var(--s4); padding: var(--s8); border: var(--border) solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.demo-loading { display: flex; align-items: center; gap: var(--s3); color: var(--ink-2); }
.demo-summary { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface-sunken); }
.demo-summary > div { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--fs-sm); }
.demo-summary dt { color: var(--ink-3); }
.demo-summary dd { margin: 0; font-weight: var(--fw-semibold); text-align: right; }
.demo-actions { display: grid; gap: var(--s3); }
.demo-secondary { display: flex; flex-wrap: wrap; gap: var(--s2); }
.demo-status:empty { display: none; }

@media (max-width: 960px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .doc-aside { position: static; }
  .doc-toc ol { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 640px) {
  .page { padding-top: var(--s6); }
  .page-hero { margin-bottom: var(--s6); }
  .site-header { height: 52px; padding: 0 20px; }
  .site-chips { padding: 0 20px 12px; }
  .page { padding: 16px 20px 64px; }
  .page-hero h1 { font-size: 28px; }
  .site-footer { padding-inline: 20px; }
  .site-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .plan { padding: var(--s5); }
  .report-row { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .help-topic { grid-template-columns: 1fr; gap: var(--s2); }
  .contact-band { padding: var(--s5); }
  .contact-band .btn { width: 100%; }
}