/* =========================================================
   DNA Studio — legal pages (Privacy Policy, Terms of Use)
   Loaded after style.css.
   ========================================================= */

:root { --fs-h3: 32px; }
@media (max-width: 1023px) { :root { --fs-h3: 26px; } }
@media (max-width: 767px)  { :root { --fs-h3: 22px; --fs-display-serif: 72px; } }

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label-caption);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.accent-text { color: var(--text-accent); }
.muted-text { color: var(--text-muted); }

.lcard {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 40px;
}
.lcard--raised { background: var(--bg-surface-raised); }

/* ---------- Hero ---------- */
.legal-hero {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-top: 120px;
  padding-bottom: 120px;
}
.legal-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-m);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.legal-title { display: flex; flex-direction: column; align-items: flex-start; }
.legal-title--right { align-items: flex-end; }
.legal-title__sans {
  font-weight: 200;
  font-size: var(--fs-display-light);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: -0.18em;
}
.legal-title__serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-display-serif);
  line-height: 0.9;
  color: var(--text-accent);
  white-space: nowrap;
}
.legal-title .legal-title__serif { padding-left: 260px; }
.legal-title--right .legal-title__serif { padding-left: 0; padding-right: 180px; }

.legal-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.legal-intro p:not(.mono-label) { max-width: 620px; font-size: var(--fs-body-l); line-height: 1.4; }
.legal-intro .mono-label { white-space: nowrap; }

.short { display: flex; flex-direction: column; gap: 32px; }
.short > .mono-label { font-size: var(--fs-label-m); color: var(--text-muted); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 340px;
}
.stat strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-display-serif);
  line-height: 0.9;
  color: var(--text-accent);
}
.stat p { font-size: var(--fs-h4); line-height: 1.4; }

/* ---------- Content ---------- */
.legal-content {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 96px;
  padding-top: 80px;
  padding-bottom: 160px;
}
.toc {
  position: sticky;
  top: 40px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.toc > .mono-label { color: var(--text-muted); }
.toc a { display: flex; gap: 16px; font-size: var(--fs-body-m); line-height: 1.6; transition: color .25s; }
.toc a span { font-family: var(--font-mono); font-size: var(--fs-label-caption); line-height: 1.75; letter-spacing: 0.1em; color: var(--text-muted); transition: color .25s; }
.toc a:hover, .toc a.is-active { color: var(--text-primary); }
.toc a.is-active span, .toc a:hover span { color: var(--text-accent); }

.legal-sections { display: flex; flex-direction: column; gap: 120px; min-width: 0; }
.legal-section { display: flex; flex-direction: column; gap: 40px; scroll-margin-top: 40px; }
.legal-section__head { display: flex; flex-direction: column; gap: 16px; }
.legal-section__head span {
  font-family: var(--font-mono);
  font-size: var(--fs-label-m);
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--text-accent);
}
.legal-section__head h2 { font-weight: 400; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; }
.lead { font-size: var(--fs-body-l); line-height: 1.4; }
.note { font-size: var(--fs-body-m); line-height: 1.6; color: var(--text-muted); }
.legal-section a.inline { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }

/* scenario (privacy) */
.scenario { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
.scenario__when { display: flex; flex-direction: column; gap: 12px; }
.scenario__when p:last-child { font-size: var(--fs-h4); line-height: 1.4; }
.scenario__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.scenario__grid div { display: flex; flex-direction: column; gap: 8px; }
.scenario__grid p:last-child { font-size: var(--fs-body-m); line-height: 1.6; }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.duo--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .duo--3 { grid-template-columns: 1fr; } }
.provider { display: flex; flex-direction: column; gap: 16px; }
.provider h3 { font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; }
.provider p:last-child { font-size: var(--fs-body-m); line-height: 1.6; }

.cookies {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 48px 56px;
}
.cookies strong { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-display-serif); line-height: 0.9; color: var(--text-accent); }
.cookies div { display: flex; flex-direction: column; gap: 16px; }
.cookies h3 { font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; }
.cookies p { font-size: var(--fs-body-m); line-height: 1.6; }

.rights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.right { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 20px; }
.right h3 { font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; }
.right p:last-child { font-size: var(--fs-body-m); line-height: 1.6; }

.action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 40px 40px 48px;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
}
.action-card--raised { background: var(--bg-surface-raised); border-color: var(--border-subtle); padding: 48px; }
.action-card div { display: flex; flex-direction: column; gap: 8px; }
.action-card h3 { font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; }
.action-card p { font-size: var(--fs-body-m); line-height: 1.6; }
.small-note { font-size: var(--fs-body-s); line-height: 1.5; color: var(--text-muted); }

/* terms */
.facts-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.facts-card div { display: flex; flex-direction: column; gap: 8px; }
.facts-card p:last-child { font-size: var(--fs-body-l); line-height: 1.4; }

.offer { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.offer h3 { font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; }
.offer p { font-size: var(--fs-body-m); line-height: 1.6; }
.pill { padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-accent); white-space: nowrap; }

.reqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.req { display: flex; flex-direction: column; gap: 40px; padding: 32px; border-radius: 20px; }
.req p:last-child { font-size: var(--fs-h4); line-height: 1.4; }

.dont { padding: 40px 40px 24px; }
.dont ul { margin-top: 16px; }
.dont li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 24px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-h4);
  line-height: 1.4;
}
.dont li:last-child { border-bottom: 0; }
.dont li span { font-size: var(--fs-h3); line-height: 1.25; color: var(--text-accent); }

.quote { display: flex; flex-direction: column; gap: 16px; padding-left: 40px; border-left: 2px solid var(--accent); }
.quote p:first-child { font-size: var(--fs-body-l); line-height: 1.4; }
.quote p:last-child { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h1-serif); line-height: 1.2; }

.concept { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px dashed var(--border-default); border-radius: 16px; }
.concept p:last-child { font-size: var(--fs-body-m); line-height: 1.6; }

/* placeholders still to fill in */
.todo { color: #d9b26b; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .legal-hero { gap: 48px; padding-top: 88px; }
  .legal-intro { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .legal-intro .legal-intro--terms { flex-direction: column; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .stat { min-height: 240px; padding: 28px; }
  .legal-content { grid-template-columns: 1fr; gap: 56px; padding-bottom: 112px; }
  .toc { position: static; }
  .legal-sections { gap: 88px; }
  .scenario { grid-template-columns: 1fr; gap: 24px; }
  .legal-pair { grid-template-columns: 1fr; gap: 88px; }
  .rights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-card { flex-direction: column; align-items: flex-start; padding: 32px; }
  .action-card .btn { height: 64px; padding-inline: 40px; }
  .action-card .btn img { width: 32px; height: 32px; }
  .cookies { padding: 40px; gap: 40px; }
  .lcard { padding: 32px; }
}
@media (max-width: 767px) {
  .legal-hero { padding-top: 48px; gap: 40px; }
  .legal-title .legal-title__serif { padding-left: 12%; }
  .legal-title--right .legal-title__serif { padding-right: 0; }
  .stats { grid-template-columns: 1fr; }
  .stat { min-height: 0; }
  .toc { display: none; }
  .scenario__grid, .duo, .facts-card, .reqs { grid-template-columns: 1fr; gap: 24px; }
  .rights { grid-template-columns: 1fr; }
  .cookies { flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px; }
  .lcard, .right, .req { padding: 24px; }
  .offer { flex-direction: column; }
  .quote { padding-left: 20px; }
  .action-card .btn { width: 100%; }
  .legal-title__sans { white-space: normal; }
}
@media (max-width: 767px) {
  .legal-title__serif { white-space: normal; }
  .legal-title .legal-title__serif { padding-left: 8%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .legal-title .legal-title__serif { padding-left: 120px; }
  .legal-title--right .legal-title__serif { padding-right: 80px; }
  .legal-hero { padding-bottom: 88px; }
}
@media (max-width: 767px) { .legal-hero { padding-bottom: 64px; } }

/* ---------- in-between widths (small laptops, iPad landscape) ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .legal-content { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .scenario { grid-template-columns: 1fr; gap: 24px; }
  .rights, .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo--3 { grid-template-columns: 1fr; }
}
.provider h3, .lcard h3 { overflow-wrap: break-word; }
@media (max-width: 767px) {
  .legal-page .btn { white-space: normal; max-width: 100%; text-align: center; }
}
@media (max-width: 1279px) {
  .action-card { flex-wrap: wrap; }
}