/* Landing page (signed-out visitors), the sign-in modal, and the public
   /privacy and /disclosure pages. Only var(--...) values from theme.css.
   The one literal size allowed here is the media-query breakpoints
   (768px, 1100px): CSS does not allow variables inside @media conditions.
   Mobile first: the base rules are the phone layout. */

.landing[hidden] { display: none; }

/* Page column: phone width first, safe-area aware on both sides */
.lwrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.landing a,
.doc a,
.signin-dialog a { color: inherit; }

.landing a:focus-visible,
.landing summary:focus-visible,
.doc a:focus-visible,
.signin-dialog a:focus-visible {
  outline: calc(var(--hairline) * 2) solid var(--ink);
  outline-offset: calc(var(--hairline) * 2);
}

.dot { color: var(--warn); }

/* Small mono uppercase label, same look as the app's section labels */
.eyebrow {
  margin: 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Small wordmark (header, footer, modal) */
.landing-mark {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
}

/* The small wordmark as a link home (policy pages) */
a.landing-mark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink); /* not the browser's default link blue/purple */
  text-decoration: none;
}

/* Outline button (header "Sign in"; "Open moggers" link on policy pages) */
.btn-outline {
  min-height: var(--tap);
  padding: 0 var(--s4);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-field);
  background: none;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform var(--t-tap);
}
.btn-outline:active { transform: scale(var(--tap-scale)); }
a.btn-outline { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- Header ---------- */
.landing-top {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-top: var(--safe-top);
  background: var(--bg);
  border-bottom: var(--hairline) solid var(--line);
}
.landing-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: calc(var(--tap) + var(--s3));
}

/* ---------- Home Screen app: compact sign-in only ---------- */
.landing-compact { display: none; }

.is-standalone .landing-top,
.is-standalone .landing-main,
.is-standalone .landing-foot { display: none; }

.is-standalone .landing-compact {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--safe-top) + var(--s6)) var(--gutter) calc(var(--safe-bottom) + var(--s6));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s5);
}

/* ---------- Hero ---------- */
.lhero {
  padding-top: var(--s6);
  padding-bottom: var(--s7);
  display: grid;
  gap: var(--s6);
}
.lhero-copy { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.hero-title {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.hero-sub { margin: 0; color: var(--ink-muted); font-size: var(--fs-heading); }

.cta { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s2); }
.cta-note {
  margin: 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-meta);
}

/* ---------- Screenshot frames ---------- */
.shot {
  width: 100%;
  max-width: var(--shot-w);
  margin: 0 auto;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-sheet);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--shot-ratio);
}

/* ---------- Sections ---------- */
.lsection {
  padding-top: var(--s7);
  padding-bottom: var(--s7);
  border-top: var(--hairline) solid var(--line);
}
.lsection-title {
  margin: var(--s2) 0 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.lead { margin: var(--s4) 0 0; color: var(--ink-muted); }

.features { display: grid; gap: var(--s7); margin-top: var(--s6); }
.feature { display: grid; gap: var(--s5); }
.feature h3,
.mini h3 {
  margin: var(--s2) 0 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
.feature p:not(.eyebrow),
.mini p:not(.eyebrow) { margin: var(--s3) 0 0; color: var(--ink-muted); }

/* Status examples: glyph + word, never color alone */
.lchips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.lchip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--tag-h);
  padding: 0 var(--s2);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-chip);
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
}
.lchip-ok { color: var(--ok-text); border-color: var(--ok-line); background: var(--ok-bg); }
.lchip-warn { color: var(--warn-text); border-color: var(--warn-line); background: var(--warn-bg); }
.lchip-urgent { color: var(--urgent-text); border-color: var(--urgent-line); background: var(--urgent-bg); }

.minis { display: grid; gap: var(--s3); margin-top: var(--s7); }
.mini,
.smallprint li {
  padding: var(--s4);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.smallprint-wrap { margin-top: var(--s7); }
.smallprint { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.smallprint li { font-size: var(--fs-body-sm); }

/* Text link with a full-size tap area */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  text-underline-offset: var(--s1);
}

/* FAQ: native <details>, works with no JavaScript */
.faq { margin-top: var(--s4); border-top: var(--hairline) solid var(--line); }
.faq details { border-bottom: var(--hairline) solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s3) 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--ink-faint);
  font-family: var(--mono);
  transition: transform var(--t-state);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { margin: 0; padding: 0 0 var(--s4); color: var(--ink-muted); }

.split { display: grid; gap: var(--s7); }

/* Final CTA */
.final { display: flex; flex-direction: column; gap: var(--s5); }

/* ---------- Footer ---------- */
.landing-foot {
  padding-top: var(--s6);
  padding-bottom: calc(var(--safe-bottom) + var(--s6));
  border-top: var(--hairline) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0; padding: 0; list-style: none; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: var(--fs-meta);
}
.landing-foot small {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* ---------- Sign-in modal ---------- */
.signin-dialog {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--dialog-max);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--s5));
  padding: 0;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sheet);
}
.signin-dialog::backdrop { background: var(--scrim); }
.signin-body {
  position: relative;
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.signin-title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.signin-close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-field);
  background: none;
  color: var(--ink-muted);
  font-family: var(--font);
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  cursor: pointer;
}
.signin-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s2);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--fs-meta);
}
.signin-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink-muted);
}

/* ---------- Public text pages: /privacy and /disclosure ---------- */
.doc-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.doc {
  flex: 1;
  width: 100%;
  max-width: var(--prose-max);
  margin: 0 auto;
  padding: var(--s6) max(var(--gutter), env(safe-area-inset-right)) var(--s7) max(var(--gutter), env(safe-area-inset-left));
  overflow-wrap: break-word;
}
.doc h1 {
  margin: var(--s2) 0 var(--s5);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.doc h2 {
  margin: var(--s7) 0 var(--s3);
  padding-top: var(--s5);
  border-top: var(--hairline) solid var(--line);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
.doc h3 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-heading); font-weight: var(--fw-semibold); }
.doc p, .doc li { color: var(--ink-muted); }
.doc strong { color: var(--ink); }
.doc ul, .doc ol { padding-left: var(--s5); }
.doc li + li { margin-top: var(--s2); }
.doc a { text-underline-offset: var(--s1); }
.doc .summary {
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.doc .summary p { margin: 0; color: var(--ink); }
.doc .summary ul { margin: var(--s3) 0 0; }

/* Guides (generated by tools/build-guides.js) */
.doc-meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
}
.doc .guide-list { margin: 0; padding: 0; list-style: none; }
.guide-item { margin: 0; padding: var(--s3) 0; }
.guide-item + .guide-item { margin-top: 0; border-top: var(--hairline) solid var(--line); }
.guide-item a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap); /* whole title is the tap target */
  color: var(--ink);
}
.guide-item p { margin: var(--s1) 0 0; }
/* Wide tables scroll sideways inside themselves, never the page */
.doc-table { overflow-x: auto; margin: var(--s4) 0; }
.doc table { width: 100%; min-width: var(--table-min); border-collapse: collapse; font-size: var(--fs-body-sm); }
.doc th, .doc td {
  padding: var(--s2) var(--s3);
  border-bottom: var(--hairline) solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink-muted);
}
.doc th { color: var(--ink); font-weight: var(--fw-semibold); white-space: nowrap; }

/* Who-helps list: stacked cards on a phone instead of a wide table */
.vendors { display: grid; gap: var(--s3); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.vendors li {
  margin: 0;
  padding: var(--s4);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
}
.vendors li + li { margin-top: 0; }
.vendors h3 { margin: 0 0 var(--s2); color: var(--ink); }
.vendors p { margin: var(--s1) 0 0; font-size: var(--fs-body-sm); }
.vendors .eyebrow { margin-top: var(--s3); }

.doc-top .lwrap { max-width: var(--prose-max); }

/* ---------- Tablet: 768px and up ---------- */
@media (min-width: 768px) {
  .lwrap { max-width: var(--page-max-md); }
  .lhero { padding-top: var(--s7); }
  .hero-title { font-size: var(--fs-hero-md); }
  .cta { max-width: var(--content-max); }
  .feature { grid-template-columns: 1fr var(--shot-w); column-gap: var(--s6); align-items: center; }
  .minis { grid-template-columns: 1fr 1fr; }
  .smallprint { grid-template-columns: repeat(3, 1fr); }
  .landing-foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .doc h1 { font-size: var(--fs-display-lg); }
}

/* ---------- Computer: 1100px and up ---------- */
@media (min-width: 1100px) {
  .lwrap { max-width: var(--page-max-lg); }
  .lhero { grid-template-columns: 1.3fr 1fr; align-items: center; column-gap: var(--s7); }
  .hero-title { font-size: var(--fs-hero-lg); }
  .shot-hero { max-width: var(--shot-w-lg); }
  .lsection-title { font-size: var(--fs-display-lg); }
  .features { grid-template-columns: repeat(3, 1fr); column-gap: var(--s6); align-items: stretch; }
  .feature { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: start; }
  .split { grid-template-columns: 1fr 1fr; column-gap: var(--s7); align-items: start; }
  .final { flex-direction: row; align-items: center; justify-content: space-between; }
  .final .cta { flex: none; width: var(--content-max); margin-top: 0; }
  .doc-top .lwrap { max-width: var(--prose-max); }
}

/* ---- The Mogger Manual (free guides' end block, landing section) ----
   Hairline card on the surface color, no accent color: color stays
   reserved for status. */
.manual-promo {
  margin: var(--s6) 0 var(--s5);
  padding: var(--s4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.manual-promo p { margin: 0 0 var(--s2); }
.manual-promo-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
}
.doc .manual-promo .manual-promo-title, .manual-promo-title { color: var(--ink); font-weight: var(--fw-semibold); }
.hero-manual { margin: var(--s4) 0 0; font-size: var(--fs-body-sm); }
.manual-feature { display: grid; gap: var(--s5); align-items: center; }
.manual-feature .lead { margin: var(--s3) 0; }
.manual-pills-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.manual-pills-row span {
  display: inline-flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 var(--s3);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tag);
  color: var(--ink-muted);
}
.manual-price-line { margin: 0 0 var(--s4); font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-muted); }
.manual-feature .btn-outline { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.manual-feature-img { width: 100%; height: auto; border: var(--hairline) solid var(--line); border-radius: var(--r-card); }
@media (min-width: 768px) { .manual-feature { grid-template-columns: 1fr 1fr; } }