/* Yiply website: the long-form pages (support, privacy, delete-account, terms) and the
   404, cloned from their round-2 masters (website-design-bundle/round-2). Loaded after
   styles.css on those pages only, so the index downloads none of it. Values come from
   each master's inline styles and renderVals(). One breakpoint: 760px. */

:root {
  --doc-head-pad: 48px;
  --doc-body-pad: 48px;
  --doc-h1: 36px;
  --doc-h2: 26px;
  --doc-lead: 18px;
  --doc-card-pad: 22px;
  --nf-pad: 96px;
}
@media (min-width: 760px) {
  :root {
    --doc-head-pad: 72px;
    --doc-body-pad: 72px;
    --doc-h1: 52px;
    --doc-h2: 32px;
    --doc-lead: 21px;
    --doc-card-pad: 28px;
    --nf-pad: 140px;
  }
}

/* Sub-pages: the footer column headings sit 4px above their links (8px on the index). */
.foot-h-tight { margin-bottom: 4px; }

/* ---- Long-form pages: support, privacy, delete-account, terms ---- */
.doc-head { background: var(--alt); padding: var(--doc-head-pad) 0; }
.doc-body { background: var(--white); padding: var(--doc-body-pad) 0; }
.reading { max-width: 68ch; display: flex; flex-direction: column; }
.doc-head .reading { gap: 12px; }
.doc-body .reading { gap: 44px; }
.doc-body .reading.gap-16 { gap: 16px; }
.doc-h1 {
  font-family: var(--font-display); font-weight: 800; font-size: var(--doc-h1);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--ink);
}
.doc-h1-support { --doc-h1: 38px; }
@media (min-width: 760px) { .doc-h1-support { --doc-h1: 52px; } }
.doc-lead { font-size: var(--doc-lead); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* "On this page" */
.toc { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--hairline); padding-left: 16px; }
.toc-label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.toc ul { display: flex; flex-direction: column; gap: 4px; }
.toc a {
  color: var(--forest); font-weight: 700; font-size: 16px; min-height: 44px;
  display: flex; align-items: center; text-decoration: none;
}
.toc a:hover { text-decoration: underline; }

.doc-sec { display: flex; flex-direction: column; gap: 16px; }
.doc-sec.gap-12 { gap: 12px; }
.doc-h2 {
  scroll-margin-top: 84px; font-family: var(--font-display); font-weight: 800; font-size: var(--doc-h2);
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: wrap;
}
.doc-h2 a { color: var(--ink); text-decoration: none; }
.doc-h2 a:hover { color: var(--forest); }
.doc-p { font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.doc-p a { color: var(--forest); font-weight: 700; }
.doc-p strong { color: var(--ink); }
.doc-p-plain { text-wrap: wrap; }
.doc-chip {
  align-self: flex-start; background: var(--alt); color: var(--forest); border-radius: 999px;
  padding: 4px 12px; font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Contact lines (support) */
.contact-lines { display: flex; flex-direction: column; gap: 4px; }
.contact-line {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--forest);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  text-decoration: underline; text-underline-offset: 3px;
}
.contact-line svg { flex-shrink: 0; fill: var(--forest); }

/* Cards */
.doc-card {
  border-radius: 18px; padding: var(--doc-card-pad); display: flex; flex-direction: column;
  gap: 14px; align-items: flex-start;
}
.doc-card-alt { background: var(--alt); }
.doc-card-sky { background: var(--sky-tint); gap: 8px; align-items: stretch; }
.doc-card-action { background: var(--alt); border: 1.5px solid var(--button); }
.doc-card p { font-size: 17px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.doc-card .doc-card-big { font-size: 18px; }
.doc-card .doc-card-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); text-wrap: wrap; }
.doc-card .doc-card-title-lg { font-size: 20px; letter-spacing: -0.01em; }
#request { scroll-margin-top: 84px; }

/* Rows: question/answer rows (privacy, delete-account) and company details (support) */
.doc-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); margin: 0; }
.doc-row { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.doc-row h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--forest); }
.dl-row { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.dl-row dt { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--muted); }
.dl-row dd { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.dl-row dd.pre { white-space: pre-line; }

/* Link lists (support "Privacy and your account", delete-account store links) */
.link-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  border-bottom: 1px solid var(--hairline); color: var(--forest); font-family: var(--font-display);
  font-weight: 700; font-size: 17px; text-decoration: none;
}
.link-list a:hover { text-decoration: underline; }
.link-list svg { flex-shrink: 0; fill: var(--forest); }
.btn-icon svg { flex-shrink: 0; fill: var(--white); }

/* ---- 404 ---- */
.nf { background: linear-gradient(180deg, #D5EEFB 0%, #E5F5EF 50%, #F4FBF6 100%); padding: var(--nf-pad) 0; }
.nf-inner { max-width: 40ch; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.nf h1 {
  font-family: var(--font-display); font-weight: 800; font-size: var(--doc-h1); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
}