/* DropSpot site: tokens and shared pieces from docs/design/style-guide.md (light theme).
   The home page adds its own section styles inline; support, privacy, terms and 404 use the .page/.prose rules here. */
@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --bg: #F2F3F1;
  --surface: #FCFCFB;
  --raised: #E8EAE7;
  --strong: #1F2429;
  --ink: #15181B;
  --ink2: #3A4047;
  --muted: #62686F;
  --faint: #767C84;
  --accent: #C8481A;
  --accentPressed: #A93A12;
  --onAccent: #FCFCFB;
  --accentTint: #FBE6DC;
  --accentInk: #7E2A0B;
  --line: rgba(21, 24, 27, .10);
  --hairline: rgba(21, 24, 27, .07);
  --fieldBorder: rgba(21, 24, 27, .18);
  --r8: 8px;
  --r12: 12px;
  --r16: 16px;
  --sans: "Mona Sans", system-ui, -apple-system, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 420 17px/1.55 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* Headlines use the wide cut. */
h1, h2, .display {
  font-stretch: 115%;
  font-weight: 680;
  letter-spacing: -.02em;
  margin: 0;
}
h2 { font-weight: 660; font-stretch: 112%; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 21px/1 var(--sans); font-stretch: 118%; letter-spacing: -.02em; }
.top nav { display: flex; gap: 28px; align-items: center; font: 560 15px var(--sans); }
.top nav:not(.langs) a:not(.btn) { text-decoration: none; color: var(--ink2); }
.top nav:not(.langs) a:not(.btn):hover, .top nav:not(.langs) a[aria-current] { color: var(--ink); }
.top nav:not(.langs) a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 720px) { .top nav:not(.langs) a:not(.btn):not([aria-current]) { display: none; } }

/* Buttons: one primary per view. */
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 22px; border-radius: var(--r12);
  font: 620 16px/20px var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: var(--onAccent); }
.btn.primary:hover { background: var(--accentPressed); }
.btn.outline { box-shadow: inset 0 0 0 1px var(--fieldBorder); color: var(--ink); background: transparent; }
.btn.outline:hover { box-shadow: inset 0 0 0 1px var(--ink2); }
.btn.sm { height: 40px; padding: 0 16px; font-size: 15px; }
@media (max-width: 420px) { .ctas .btn { flex: 1 1 100%; white-space: normal; } }

/* Card: surface with a 1px line, no shadow. */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r16); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 28px 0 44px; color: var(--muted); font: 450 14px var(--sans); }
.foot .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 24px; }
.foot a:hover { color: var(--ink); }

/* Text pages (support, privacy, terms) */
.page { padding: clamp(32px, 6vw, 72px) 0 clamp(64px, 10vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; }
.page > header h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.04; margin: 0 0 12px; }
.page > header p { color: var(--muted); margin: 0; font: 450 14px var(--sans); }
@media (max-width: 860px) { .page { grid-template-columns: 1fr; gap: 24px; } }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -.015em; margin: 44px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 640 17px/22px var(--sans); margin: 28px 0 6px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; color: var(--ink2); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--ink); font-weight: 620; }
.prose a { color: var(--ink); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent); }

.contact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r16); padding: 24px; margin: 0 0 40px; }
.contact h2 { margin-top: 0; }
.contact p:last-child { margin-bottom: 0; }

details { border-top: 1px solid var(--hairline); }
details:last-of-type { border-bottom: 1px solid var(--hairline); }
summary { cursor: pointer; padding: 16px 40px 16px 0; font: 600 16px/22px var(--sans); color: var(--ink); list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 8px; top: 13px; font: 400 22px/1 var(--sans); color: var(--faint); }
details[open] summary::after { content: "\2212"; }
details > div { padding: 0 0 12px; }

/* Language switcher: compact in the header (the other two languages), full in the footer. */
.langs { display: flex; gap: 16px; font: 500 14px var(--sans); }
.langs a { text-decoration: none; color: var(--muted); }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; }
.langs-top { margin-left: auto; margin-right: 28px; gap: 14px; }
.langs-top a { color: var(--ink2); font-weight: 560; font-size: 15px; }
@media (max-width: 720px) { .langs-top { margin-right: 12px; gap: 12px; } }
.page > header .lang-note { margin-top: 12px; max-width: 32ch; }
.lang-note a { color: var(--ink); }

/* Chinese: Mona Sans has no CJK glyphs, so Chinese text falls back to the system CJK face (Latin stays Mona Sans).
   The wide cut and negative tracking only suit Latin, so headlines get normal tracking and more line height. */
html:lang(zh-Hans) { --sans: "Mona Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
html:lang(zh-Hant) { --sans: "Mona Sans", "PingFang TC", "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif; }
html:lang(zh-Hans) body, html:lang(zh-Hant) body { line-height: 1.75; }
html:lang(zh-Hans) :is(h1, h2, .display), html:lang(zh-Hant) :is(h1, h2, .display) { letter-spacing: 0; line-height: 1.22; }
html:lang(zh-Hans) .hero h1, html:lang(zh-Hant) .hero h1 { line-height: 1.2; max-width: none; font-size: clamp(2rem, 3.4vw, 3rem); }
html:lang(zh-Hans) summary, html:lang(zh-Hant) summary { line-height: 1.5; }