:root{--paper:#D9DED2;--card:#EFF1E9;--ink:#1B2A21;--muted:#5C6B60;--pine:#2E4A38;--deep:#23372C;--red:#B33A26;--line:rgba(27,42,33,.15);--sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.75 var(--sans)}a{color:inherit}
header{height:72px;display:flex;align-items:center;padding:0 clamp(20px,4vw,56px);background:rgba(217,222,210,.94);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;--lg-ink:var(--pine);--lg-hole:var(--card);--lg-kerf:var(--red)}.brandmark{width:28px;height:28px}.mark{font-weight:700;font-size:14px;letter-spacing:.09em;line-height:1.08;text-transform:uppercase}.mark span{display:block}nav{display:flex;gap:20px;margin-left:auto;color:var(--muted);font-size:13px}nav a{text-decoration:none}nav a:hover{color:var(--ink)}
.hero{padding:58px clamp(20px,6vw,88px) 46px;background:var(--card);border-bottom:1px solid var(--line)}.hero h1{font-size:clamp(36px,5vw,62px);line-height:1;margin:0 0 16px}.hero p{max-width:720px;color:var(--muted);font-size:17px;text-wrap:balance}.legal,.doc{max-width:860px;margin:0 auto;padding:48px 24px 90px}.legal h2,.doc h2{font-size:24px;margin:44px 0 10px}.legal h2::after,.doc h2::after{content:'';display:block;width:34px;height:3px;background:var(--red);margin-top:8px}.legal h3,.doc h3{font-size:17px;margin:24px 0 6px}.legal p,.legal li,.doc p,.doc li{color:#35483C}.legal ul,.doc ul{padding-left:22px}.callout{padding:16px 18px;background:var(--card);border-left:3px solid var(--pine);margin:18px 0}
.foot{background:var(--deep);color:#A9BBAE;padding:48px clamp(20px,4vw,56px) 30px;--lg-ink:#A9BBAE;--lg-hole:var(--deep);--lg-kerf:#C05A44}.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px 32px;max-width:1100px;margin:auto}.foot h3{font-size:13px;color:#7C907F;font-weight:500;margin:0 0 12px}.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}.foot a{color:#A9BBAE;text-decoration:none;font-size:14px}.foot a:hover{color:#EFF1E9}.foot .brand{color:#A9BBAE;align-items:flex-start;--lg-ink:#A9BBAE;--lg-hole:var(--deep);--lg-kerf:#C05A44}.foot-base{max-width:1100px;margin:34px auto 0;padding-top:20px;border-top:1px solid rgba(169,187,174,.16);display:flex;justify-content:space-between;gap:20px;font-size:12.5px;color:#7C907F}.foot-base em{font-style:normal}@media(max-width:620px){nav a:first-child{display:none}.legal,.doc{padding-inline:20px}}

/* Help articles share this document layout and add figures. A figure is a step in
   the walkthrough, so the caption is one word and sits under the image. */
.doc figure{margin:26px 0}.doc figure img{display:block;width:100%;height:auto;border-radius:4px;background:var(--card)}.doc figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.doc .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}.doc .pair figure{margin:0}/* keep: the two pictures are not one scene cropped two ways, so they keep their own shape; the pair is narrower */.doc .pair.keep{max-width:680px;margin-left:auto;margin-right:auto}/* A pair is a before and an after of one scene, so both sides keep the same box   and the captions line up even if the sources are cropped differently. */.doc .pair img{aspect-ratio:786/915;object-fit:cover}.doc .pair.keep img{aspect-ratio:auto;object-fit:fill}
.doc .next{display:inline-block;margin-top:6px;color:var(--pine);font-weight:600;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:1px}.doc .next:hover{color:var(--red)}
@media(max-width:620px){.doc .pair{grid-template-columns:1fr}}

/* Back to the help centre, in the slot the hub puts its eyebrow in. */
.hero .back{display:inline-block;margin-bottom:14px;color:var(--red);font-size:14px;font-weight:600;text-decoration:none}
.hero .back::before{content:'←';margin-right:7px}
.hero .back:hover{color:var(--pine)}
.table-wrap{overflow-x:auto;margin:14px 0}.legal table{width:100%;border-collapse:collapse;font-size:14px}.legal th,.legal td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center}.legal thead th{color:var(--pine);font-weight:700}.legal tbody th{text-align:left;font-weight:500}
.legal [id]{scroll-margin-top:84px}
