/* Support, Privacy and Terms: one shared look. Hand-written; header/footer come from /site.css. No icons. */
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.65 var(--sans); color: var(--ink); background: var(--paper); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
a { color: var(--accent); }
.sc { font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.eyebrow { font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--ink-soft); margin-bottom: 26px; } .crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { color: var(--ink); }

/* hero */
.doc-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: end; padding: 50px 24px 60px; }
.doc-hero h1 { font-size: clamp(56px, 8vw, 112px); line-height: .92; margin: 14px 0 22px; } .doc-hero h1 em { color: var(--accent); }
.doc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.doc-meta span + span::before { content: ""; display: inline-block; vertical-align: middle; margin: 0 10px 2px 0; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.doc-lead { font: 300 22px/1.5 var(--serif); color: var(--ink-soft); max-width: 40ch; margin: 0 0 22px; }

/* "the short version" card */
.doc-short { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 26px 28px 22px; box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--shadow) 45%, transparent); }
.doc-short ul { list-style: none; margin: 12px 0 0; padding: 0; }
.doc-short li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; }
.doc-short li:first-child { border-top: 0; } .doc-short li b { font: italic 300 22px/1 var(--serif); color: var(--accent); }

/* contents + body */
.doc-grid { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: 80px; padding-top: 50px; padding-bottom: 40px;
  background: linear-gradient(var(--ink), var(--ink)) 24px 0 / calc(100% - 48px) 2px no-repeat; }
.doc-toc { position: sticky; top: 100px; align-self: start; }
.doc-toc ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: t; }
.doc-toc li { counter-increment: t; } .doc-toc li a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; padding: 7px 0; font-size: 14.5px; color: var(--ink-soft); text-decoration: none; }
.doc-toc li a::before { content: counter(t, decimal-leading-zero); font: italic 300 15px var(--serif); color: var(--accent); }
.doc-toc a:hover { color: var(--ink); }
.doc-toc .other { display: block; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font: 600 14px var(--sans); text-decoration: none; }
.doc-body section { padding: 0 0 34px; scroll-margin-top: 100px; }
.doc-body section + section { padding-top: 34px; border-top: 1px solid var(--line); }
.doc-body h2 { display: flex; gap: 16px; align-items: baseline; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; margin: 0 0 14px; }
.doc-body h2 span { font: italic 300 20px var(--serif); color: var(--accent); flex: none; }
.doc-body p, .doc-body li { color: var(--ink-soft); } .doc-body p { margin: 0 0 12px; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body ul { list-style: none; margin: 6px 0 12px; padding: 0; }
.doc-body li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--line); } .doc-body li:first-child { border-top: 0; }
.doc-body li::before { content: ""; position: absolute; left: 0; top: 1.4em; width: 10px; height: 2px; background: var(--accent); }
.doc-intro { font: 300 20px/1.6 var(--serif) !important; color: var(--ink) !important; margin-bottom: 30px !important; }

/* contact ticket (same idea as the home page "Still curious?" card) */
.ticket { position: relative; padding: 28px 32px 26px; background: var(--ink); color: var(--paper); border-radius: 24px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--shadow) 60%, transparent);
  -webkit-mask: radial-gradient(circle 14px at 0 64%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 64%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 14px at 0 64%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 64%, #0000 98%, #000) right / 51% 100% no-repeat; }
.ticket .k { font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ticket b { display: block; font: 400 clamp(30px, 3.2vw, 40px)/1.1 var(--serif); margin: 10px 0 8px; } .ticket b em { color: var(--amber); }
.ticket p { margin: 0 0 22px; color: var(--on-deep-soft); font-size: 15.5px; }
.ticket .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 20px; border-top: 2px dashed color-mix(in srgb, var(--on-deep) 22%, transparent); }
.ticket .go { background: var(--paper); color: var(--ink); text-decoration: none; font: 600 15px var(--sans); padding: 11px 20px; border-radius: 999px; transition: transform .2s; } .ticket .go:hover { transform: translateY(-2px); }
.ticket .mail { color: var(--on-deep-soft); font: italic 300 19px var(--serif); text-decoration-color: color-mix(in srgb, var(--amber) 60%, transparent); text-underline-offset: 4px; } .ticket .mail:hover { color: var(--amber); }
.doc-end { max-width: 720px; margin: 30px 0 100px auto; }

/* support: topic chips + question cards */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.chips a { text-decoration: none; color: var(--ink); font: 600 14px var(--sans); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.chips a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topic { padding: 60px 0 0; scroll-margin-top: 90px; }
.topic > h2 { display: flex; gap: 16px; align-items: baseline; font-size: clamp(34px, 4vw, 50px); line-height: 1; margin: 0 0 22px; } .topic > h2 em { color: var(--accent); }
.topic > h2 span { font: italic 300 22px var(--serif); color: var(--accent); }
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qa article { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px 26px 20px; transition: transform .2s, box-shadow .2s; }
.qa article:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -34px color-mix(in srgb, var(--shadow) 50%, transparent); }
.qa h3 { font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
.qa p { margin: 0 0 10px; font-size: 15.5px; color: var(--ink-soft); } .qa strong { font-weight: 600; color: var(--ink); }
.steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; font: 600 13px var(--sans); padding: 6px 12px; border-radius: 999px; background: var(--paper-2); }
.steps li::before { content: counter(s) "  "; font: italic 400 14px var(--serif); color: var(--accent); white-space: pre; }
.support-end { margin: 80px 0 100px; }

@media (max-width: 960px) {
  .doc-hero { grid-template-columns: 1fr; gap: 34px; padding-top: 30px; }
  .doc-grid { grid-template-columns: 1fr; gap: 30px; }
  .doc-toc { position: static; } .doc-toc ol { columns: 2; column-gap: 20px; }
  .doc-end { margin-left: 0; } .qa { grid-template-columns: 1fr; }
}
/* small screens: the ticket's button and email sit centred, one under the other (same as the home page card) */
@media (max-width: 860px) { .ticket .acts { flex-direction: column; justify-content: center; } }
@media (max-width: 600px) { .doc-toc ol { columns: 1; } .ticket { padding: 24px 22px 22px; } .doc-short { padding: 22px 20px 18px; } }