/* Modou website v2: about, security, legal pages and 404. Loaded after site.css on those pages only. Tokens only. */

/* ------------------------------------------------------------------ shared */
.prose.big { font-size: 20px; line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.prose.big p:first-child { color: var(--ink); }

/* ------------------------------------------------------------------ about */
.about-ph .h1 { max-width: 11em; }
.about-ph .lede { max-width: 30em; }
.about-ph .ph-media { aspect-ratio: 4 / 4.6; }
.about-ph .ph-media img { object-position: 50% 52%; }
.princ .step h3 { font-size: 22px; margin: 20px 0 10px; text-wrap: balance; }
.princ .step p { font-size: 15.5px; line-height: 1.6; }
.co-panel { max-width: 520px; justify-self: end; width: 100%; }
.co-kv > div { display: grid; grid-template-columns: 11em 1fr; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.co-kv > div:last-child { border-bottom: 0; }
.co-kv dt { color: var(--ink-3); }
.co-kv dd { color: var(--ink); }
.co-kv a { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.co-kv a:hover { text-decoration-color: var(--ink); }
.split.even .lede { margin-top: 24px; }
.split-next { margin-top: 120px; padding-top: 120px; border-top: 1px solid var(--line); }
.lede a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.lede a:hover { text-decoration-color: var(--ink); }

/* ------------------------------------------------------------------ security */
.sec-ph .wrap { align-items: center; }
.sec-ph .h1 { max-width: 12em; }
.glance { align-self: end; }
.glance .li { padding: 13px 18px; }
.glance .li em { color: var(--ink); font-size: 13.5px; text-align: right; }
.glance .li > span:first-child { color: var(--ink-2); }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; }
.sg-i { border-top: 1px solid var(--line-2); padding: 28px 0 56px; }
.sg-i .n { font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--ink-3); }
.sg-i h2 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; margin-top: 18px; }
.sg-i p { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); margin-top: 14px; max-width: 34em; }
.sec-ctas { margin-top: 32px; }
.prose a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ legal */
.legal-ph .h1 { font-size: clamp(38px, 4.6vw, 64px); max-width: 14em; }
.legal-date { margin-top: 22px; font-size: 14px; color: var(--ink-3); }
.legal-sec { padding-top: 88px; }
.legal-toc a { font-size: 13.5px; }
.legal-intro { font-size: 18px; color: var(--ink); line-height: 1.6; margin-top: 0; }
.legal-notice { margin: 24px 0 8px; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-2); font-size: 15px; color: var(--ink-2); }
.legal-notice p { margin: 0; }
.legal .legal-notice + h2:first-of-type { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.legal-callout { margin-top: 18px; padding: 22px 24px 24px; border-radius: var(--radius); background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); }
.legal-callout > :first-child { margin-top: 0; }
.legal-lead { color: var(--warn); font-weight: 500; }
.legal-callout strong { color: var(--ink); }
.legal-sum { font-size: 14.5px; color: var(--ink); }
.legal-foot { font-size: 14.5px; color: var(--ink-3); }
.legal-sign { line-height: 1.8; }
.legal-btn { display: inline; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color .2s; }
.legal-btn:hover { text-decoration-color: var(--ink); }
.legal-annex { margin-top: 18px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-2); }
.legal-annex > div { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.legal-annex > div:last-child { border-bottom: 0; }
.legal-annex dt { color: var(--ink); font-weight: 500; }
.legal-annex ul { margin-top: 6px; }
.legal-related { color: var(--ink-3); }
.legal { overflow-wrap: break-word; }

/* ------------------------------------------------------------------ 404 */
.nf-in { max-width: calc(980px + var(--gut) * 2); margin: 0; }
.nf-code { font-size: 13px; }
.nf .h1 { margin-top: 22px; max-width: 12em; }
.nf-en { font-size: var(--fs-display); font-weight: 500; letter-spacing: -.038em; line-height: 1.02; color: var(--ink-3); margin-top: 6px; text-wrap: balance; }
.nf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; border-top: 1px solid var(--line-2); padding-top: 28px; max-width: 900px; }
.nf-cols p { margin-top: 14px; color: var(--ink-2); font-size: 16.5px; max-width: 26em; }
.nf-cols .ctas { margin-top: 24px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .co-panel { justify-self: start; max-width: none; }
  .about-ph .ph-media { aspect-ratio: 4 / 3; max-width: 640px; }
  .princ.steps.four { grid-template-columns: 1fr 1fr; }
  .sgrid { gap: 0 48px; }
}
@media (max-width: 760px) {
  .prose.big { font-size: 18px; }
  .princ.steps.four { grid-template-columns: 1fr; gap: 0; }
  .princ .step { padding-bottom: 32px; }
  .princ .step h3 { margin-top: 14px; font-size: 21px; }
  .co-kv > div { grid-template-columns: 1fr; gap: 2px; }
  .sgrid { grid-template-columns: 1fr; }
  .sg-i { padding: 24px 0 40px; }
  .sg-i p { font-size: 16px; }
  .glance .li { grid-template-columns: 1fr; gap: 2px; }
  .glance .li em { text-align: left; }
  .legal-ph .h1 { font-size: 30px; letter-spacing: -.03em; hyphens: auto; }
  .split-next { margin-top: 80px; padding-top: 80px; }
  .legal-sec { padding-top: 56px; }
  .legal { font-size: 16px; }
  .legal h2 { font-size: 21px; }
  .legal-callout { padding: 18px 18px 20px; }
  .nf-en { font-size: 32px; }
  .nf .h1 { font-size: 36px; }
  .nf-cols { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
}