/* The info pages: the reading layout of /terms, /privacy and /api/docs, and /contact's steps. */

/* Reading layout: contents beside the text on desktop, a fold-out on phones. */
.ld-legal { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 56px; justify-content: center; align-items: start; padding: 40px 0 96px; }
.ld-legal-toc { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; padding-right: 8px; }
.ld-legal-toc .t-caption { margin: 0 0 6px 10px; }
.ld-legal-toc a { display: block; padding: 6px 10px; border-radius: var(--ld-radius-sm); font: 500 13px/18px var(--font-sans); color: var(--ld-text-muted); text-decoration: none; transition: background-color var(--ld-ease), color var(--ld-ease); }
.ld-legal-toc a:hover { background: var(--ld-fill-hover); color: var(--ld-text-strong); }
.ld-legal-toc a[aria-current="true"] { color: var(--ld-green); background: var(--ld-green-surface); }
.ld-legal-art { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.ld-legal-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ld-legal-head h1 { margin: 0; flex: 1 1 auto; }
.ld-legal-head--stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.ld-legal-head--stack p { margin: 0; font: 400 16px/26px var(--font-sans); }
.ld-legal-eyebrow { color: var(--ld-green); }
.ld-legal-text { display: flex; flex-direction: column; }
.ld-legal-text > * { margin: 0 0 14px; }
.ld-legal-text p, .ld-legal-text li { font: 400 16px/26px var(--font-sans); color: var(--ld-text); }
.ld-legal-text ul, .ld-legal-text ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.ld-legal-text strong, .ld-legal-text b { color: var(--ld-text-strong); }
.ld-legal-text a:not(.btn) { color: var(--ld-green); text-decoration: underline; text-underline-offset: 2px; }
.ld-legal-text code { font: 400 13px/20px var(--font-mono); color: var(--ld-text-strong); background: var(--ld-surface-3); padding: 1px 6px; border-radius: var(--ld-radius-sm); }
.ld-legal-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px !important; font: 700 19px/26px var(--font-display); color: var(--ld-text-strong); scroll-margin-top: 88px; }
.ld-legal-copy { opacity: 0; transition: opacity var(--ld-ease); }
.ld-legal-h:hover .ld-legal-copy, .ld-legal-copy:focus-visible, .ld-legal-copy.is-copied, .ld-legal-copy.is-failed { opacity: 1; }
.ld-legal-top { position: sticky; bottom: 24px; align-self: flex-end; }
.ld-legal-fold { display: flex; flex-direction: column; gap: 6px; }
.ld-legal-fold > summary { list-style: none; justify-content: space-between; width: 100%; min-height: 44px; cursor: pointer; }
.ld-legal-fold > summary::-webkit-details-marker { display: none; }
.ld-legal-fold > summary > span { flex: 1; text-align: left; }
.ld-legal-fold[open] > summary svg:last-child { transform: rotate(180deg); }
.ld-legal-fold .card { padding: 6px; display: flex; flex-direction: column; }
.ld-legal-fold .card a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; box-sizing: border-box; border-radius: var(--ld-radius-sm); font: 500 14px/20px var(--font-sans); color: var(--ld-text); text-decoration: none; }
@media (max-width: 900px) {
  .ld-legal { grid-template-columns: 1fr; gap: 20px; padding: 20px 0 96px; }
  .ld-legal-toc { display: none; }
  .ld-legal-copy { opacity: 1; }
  .ld-legal-text p, .ld-legal-text li { font-size: 15px; line-height: 24px; }
  .ld-legal-top { bottom: 16px; }
}


/* A page without its own template: its stored HTML in a reading column. */
.ld-info-plain { max-width: 760px; margin: 0 auto; padding: 40px 0 96px; font: 400 16px/26px var(--font-sans); }

/* Contact, step by step */
.ld-cc { max-width: 880px; margin: 0 auto; padding: 32px 0 96px; display: flex; flex-direction: column; gap: 28px; }
.ld-cc-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ld-cc-eyebrow { color: var(--ld-green); }
.ld-cc-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.ld-cc-steps li { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--ld-radius-full); font: 600 12px/16px var(--font-sans); letter-spacing: .06em; color: var(--ld-text-dim); border: 1px solid var(--ld-line); }
.ld-cc-steps li.is-done { color: var(--ld-text-secondary); }
.ld-cc-steps li[aria-current="step"] { color: var(--ld-green); border-color: var(--ld-green-line); background: var(--ld-green-surface); }
.ld-cc-form { display: contents; }
.ld-cc-step { display: flex; flex-direction: column; gap: 24px; }
.ld-cc-intro { display: flex; flex-direction: column; gap: 8px; }
.ld-cc-intro h1, .ld-cc-intro h2, .ld-cc-done h1, .ld-cc-card h2, .ld-cc-card p, .ld-cc-picked h1 { margin: 0; }
.ld-cc-grid { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ld-cc-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 168px; padding: 20px; box-sizing: border-box; border-radius: var(--ld-radius-lg); border: 1px solid var(--ld-line); background: var(--ld-surface-2); color: var(--ld-text); cursor: pointer; transition: border-color var(--ld-ease), background-color var(--ld-ease), transform var(--ld-ease); }
.ld-cc-tile:hover { border-color: var(--ld-line-strong); background: var(--ld-surface-3); }
.ld-cc-tile:active { transform: scale(.99); }
.ld-cc-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ld-cc-tile:has(input:checked) { border-color: var(--ld-green-line); background: var(--ld-green-surface); }
.ld-cc-tile:has(input:focus-visible) { box-shadow: var(--ld-focus-ring); }
.ld-cc-tile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ld-cc-tile-text b { color: var(--ld-text-strong); }
.ld-cc-go { display: none; color: var(--ld-text-muted); }
.ld-cc-ic { width: 44px; height: 44px; flex: none; border-radius: var(--ld-radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--acc, var(--ld-green)); background: color-mix(in srgb, var(--acc, var(--ld-green)) 14%, transparent); }
.ld-cc-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ld-cc-note { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ld-cc-note p { margin: 0; }
.ld-cc-note .link { align-self: flex-start; min-height: 24px; }
.ld-cc-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ld-cc-back { min-height: 44px; }
.ld-cc-picked { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ld-cc-card { padding: 28px; display: flex; flex-direction: column; gap: 16px; max-width: 640px; box-sizing: border-box; }
.ld-cc-member { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border-radius: var(--ld-radius-md); background: var(--ld-surface-1); border: 1px solid var(--ld-line); }
.ld-cc-member span { flex: 1; min-width: 200px; }
.ld-cc-member .btn { min-height: 44px; }
.ld-cc-tick { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.ld-cc-tick input { width: 22px; height: 22px; flex: none; accent-color: var(--ld-green); margin: 1px 0 0; }
.ld-cc-tick b { color: var(--ld-text-strong); }
.ld-cc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ld-cc-mono { font-family: var(--font-mono) !important; }
.ld-cc-opt { font-weight: 400; }
.ld-cc-count { display: flex; justify-content: space-between; }
.ld-cc-count .num { font-weight: 400; }
.ld-cc-area { min-height: 168px; resize: vertical; padding: 12px 14px; border-radius: var(--ld-radius-md); border: 1px solid var(--ld-line-strong); background: var(--ld-surface-3); color: var(--ld-text); font: 400 16px/24px var(--font-sans); outline: none; transition: border-color var(--ld-ease), box-shadow var(--ld-ease); }
.ld-cc-area:focus { border-color: var(--ld-green); box-shadow: var(--ld-focus-ring); }
.ld-cc-err { font: 400 13px/18px var(--font-sans); color: var(--ld-danger); }
.ld-cc-err:empty { display: none; }
.fld.has-error input, .fld.has-error textarea { border-color: var(--ld-danger); }
.ld-cc-captcha { display: flex; flex-direction: column; gap: 6px; }
.ld-cc-sendrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ld-cc-sendrow p { flex: 1; min-width: 220px; }
.ld-cc-send.is-waiting { opacity: .7; }
.ld-cc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ld-cc-done { align-items: center; text-align: center; padding: 24px 0; }
.ld-cc-done .ld-cc-row { justify-content: center; }
.ld-cc-done-text { margin: 0; max-width: 520px; }
.ld-cc-done-text b { color: var(--ld-text-strong); }
.ld-cc-next-card { width: 100%; max-width: 520px; text-align: left; }
.ld-cc-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ld-cc-next li { display: flex; gap: 12px; align-items: flex-start; }
.ld-cc-next b { color: var(--ld-text-strong); }
.ld-cc-nd { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ld-line-strong); font: 700 12px/16px var(--font-sans); color: var(--ld-text-muted); }
.ld-cc-next li.is-done .ld-cc-nd { background: var(--ld-green-soft); border-color: transparent; color: var(--ld-green); }
.ld-cc-tickbig { width: 80px; height: 80px; border-radius: 50%; background: var(--ld-green-soft); color: var(--ld-green); display: inline-flex; align-items: center; justify-content: center; }
.ld-cc-tickbig svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ld-cc-bad { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,138,156,.12); color: var(--ld-danger); display: inline-flex; align-items: center; justify-content: center; }
.ld-cc-step-failed .ld-cc-card { gap: 14px; }

/* Without the script every part of the form shows at once and posts normally; a result screen shows alone. */
.ld-cc .ld-cc-step-sent, .ld-cc .ld-cc-step-failed, .ld-cc-back, .ld-cc-picked { display: none; }
.ld-cc[data-state="sent"]:not(.is-js) .ld-cc-step-sent, .ld-cc[data-state="failed"]:not(.is-js) .ld-cc-step-failed { display: flex; }
.ld-cc[data-state="sent"]:not(.is-js) .ld-cc-step-topic, .ld-cc[data-state="sent"]:not(.is-js) .ld-cc-step-message,
.ld-cc[data-state="failed"]:not(.is-js) .ld-cc-step-topic, .ld-cc[data-state="failed"]:not(.is-js) .ld-cc-step-message { display: none; }

/* With it: one step at a time. */
.ld-cc.is-js .ld-cc-step { display: none; }
.ld-cc.is-js[data-state="topic"] .ld-cc-step-topic,
.ld-cc.is-js[data-state="message"] .ld-cc-step-message,
.ld-cc.is-js[data-state="sent"] .ld-cc-step-sent,
.ld-cc.is-js[data-state="failed"] .ld-cc-step-failed { display: flex; animation: ld-rise var(--ld-ease-enter) both; }
.ld-cc.is-js .ld-cc-back, .ld-cc.is-js .ld-cc-picked { display: inline-flex; }
.ld-cc.is-js .ld-cc-step-sent .ld-cc-tickbig { animation: ld-pop-in var(--ld-ease-enter) both; }
.ld-cc.is-js .ld-cc-step-sent .ld-cc-tickbig path { stroke-dasharray: 1; animation: ld-draw 400ms 120ms ease-out both; }
.ld-cc.is-js .fld[data-extra]:not(.is-on) { display: none; }

@media (max-width: 900px) {
  .ld-cc { padding: 16px 0 96px; gap: 20px; }
  .ld-cc-step { min-height: calc(100vh - 210px); gap: 20px; }
  .ld-cc-grid, .ld-cc-notes { grid-template-columns: 1fr; }
  .ld-cc-tile { flex-direction: row; align-items: center; min-height: 76px; padding: 14px 16px; }
  .ld-cc-go { display: inline-flex; }
  .ld-cc-card { padding: 20px; }
  .ld-cc-steps li { padding: 0 8px; font-size: 11px; }
  .ld-cc-sendrow { flex-direction: column-reverse; align-items: stretch; }
  .ld-cc-sendrow .btn { width: 100%; }
  .ld-cc-row { width: 100%; }
  .ld-cc-row .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-legal-toc a, .ld-legal-copy, .ld-cc-tile, .ld-cc-area { transition: none; }
  .ld-cc.is-js .ld-cc-step, .ld-cc-tickbig, .ld-cc-tickbig path { animation: none !important; }
}

@media print {
  .hdr, .foot, .tabbar, .ld-legal-toc, .ld-legal-fold, .ld-legal-top, .ld-legal-copy, .ld-legal-print, .toasts, .skip { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .ld-legal { display: block; padding: 0; }
  .ld-legal-text p, .ld-legal-text li, .ld-legal-h, .ld-legal-head h1 { color: #000 !important; }
  .ld-legal-text a { color: #000 !important; }
  .ld-legal-h { break-after: avoid; }
}