/* The DBY help page in The set: a reading page (design system §12.10). Built off the home page's CSS
   (../home/home.css, itself L4's: looks-2026-10b/engine/build.py BASE_CSS + L4_CSS) for the tokens, the
   header, the footer, the buttons and links, the sun, the 1024 to 1439 range and the phone rules. Tokens are
   §11.1's only. Desktop is drawn on the 1440 grid; 1024 to 1439 draws the same page smaller (the inline
   script in index.html sets --k) with every text size floored at its phone size (§12.1); 1023 and below
   takes the phone rules (§12.11). */

:root{--white:#ffffff;--cream:#fff4e6;--ink:#2c2030;--ink-soft:#5b4a5a;--gold:#ffc66b;--sun-amber:#f2a54a;--coral:#ff6b5c;
  --line:rgba(44,32,48,.24);--hair:rgba(44,32,48,.12);--g:72px;--k:1}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--white)}
body{color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
.nw{white-space:nowrap}
.em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-.005em;font-size:1.14em;line-height:.8}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--g)}
.m-only{display:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font:600 15px/1 "Instrument Sans";text-decoration:none}
.skip:focus{left:16px}

/* ---- header (§12.4), as the home page */
.hdr{background:var(--cream)}
.top{display:flex;align-items:center;justify-content:space-between;height:96px}
.brand{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
.brand img{height:44px;width:auto;margin-left:-5.6px}   /* the file's built-in clear space hangs outside the column */
.brand span{font:600 21px/1 "Instrument Sans";letter-spacing:-.03em;padding-top:1px}
.nav{display:flex;align-items:center;gap:36px;font:500 16px/1 "Instrument Sans"}
.nav a{text-decoration:none}
.pill{border:1.5px solid var(--ink);border-radius:999px;padding:13px 22px;font-weight:600;text-decoration:none}
.menu{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px;color:var(--ink);background:none;border:0;border-radius:10px;cursor:pointer}
.menu svg{width:26px;height:26px}
.mnav{display:none}

/* ---- type (§12.2) */
.kick{font:600 14px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
h1{font:600 44px/1.06 "Instrument Sans";letter-spacing:-.03em;color:var(--ink);text-wrap:balance}   /* the page title in the section heading type (§12.10) */
.micro{font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}

/* ---- links (§12.5): a link in running text takes the text link's underline, at its text's size and weight, in ink */
.read p a,.micro a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.micro a{text-underline-offset:4px}
.ghost{font:600 17px/1 "Instrument Sans";color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;white-space:nowrap}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:6px}
.pill:focus-visible{border-radius:999px}

/* ---- icons */
.ic{display:inline-flex;width:20px;height:20px;flex:none;color:var(--ink)}
.ic svg{width:100%;height:100%}

/* ---- the band: the header, the page title, and the low sun it ends on (§12.10, §12.8) */
.band{background:var(--cream)}
.ttl{padding-top:44px;padding-bottom:20px}
.ttl .micro{margin-top:20px;max-width:584px;text-wrap:balance}
.rise{position:relative;height:120px;overflow:hidden}
.sunw{position:absolute;top:0;left:50%;width:1440px;height:120px;margin-left:-720px}
.rise .hzl{position:absolute;display:block;left:0;right:0;bottom:0;height:2px;background:var(--line)}
/* the sun (b_sun, the picked world's own) */
.sunbox{position:absolute;overflow:hidden;pointer-events:none}
.sunbox i{position:absolute;display:block;border-radius:50%}
.sunbox .disc::after{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:overlay;opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/var(--grain) var(--grain)}

/* ---- the reading column (§12.10): one column at the copy column's 584 px, on the grid's left; a section under the band (§12.1) */
.read{padding-top:112px;padding-bottom:120px}
.col{max-width:584px}
.toc ol{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:32px;row-gap:12px}   /* reads down: 1 to 4, then 5 to 7 */
.toc li{display:grid;grid-template-columns:22px 1fr;align-items:baseline;font:400 15px/1.5 "Instrument Sans";color:var(--ink)}
.toc .no{font:600 12px/1 "Instrument Sans";color:var(--ink-soft);font-variant-numeric:tabular-nums}
.toc a{text-decoration:none}
.grp{margin-top:72px;padding-top:40px;border-top:1px solid var(--hair)}
.grp > .kick{margin-bottom:30px}
.qa{scroll-margin-top:24px}
.qa + .qa{margin-top:44px}
.qa h3{font:500 26px/1.28 "Instrument Sans";letter-spacing:-.015em;color:var(--ink);text-wrap:balance}   /* subheadings in the sales deck type */
.qa p{font:400 19px/1.6 "Instrument Sans";color:var(--ink-soft);margin-top:12px;text-wrap:pretty}
.qa p + p{margin-top:14px}
/* a list takes the lead's form (§12.9): a 22 px icon column, a 12 px gap, 14 px between rows, ink checks */
.list{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.list li{display:grid;grid-template-columns:22px 1fr;gap:12px;font:500 17px/1.45 "Instrument Sans";color:var(--ink);text-wrap:pretty}
.list .ic{margin-top:2px}
/* a callout is a tile (§12.6, §12.10) */
.t{position:relative;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(44,32,48,.07),0 18px 36px -26px rgba(44,32,48,.35)}
.t .lab{display:block;font:600 12px/1 "Instrument Sans";letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.t.note{margin-top:26px;padding:22px 24px 26px}
.t.note p{margin-top:14px;color:var(--ink)}
.t.note .ghost{display:inline-block;margin-top:20px}
#crisis{scroll-margin-top:24px}

/* ---- the footer (§12.4), as the home page */
.foot{background:var(--white)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,584fr) minmax(0,640fr);column-gap:72px;row-gap:14px;padding-top:26px;padding-bottom:30px;position:relative}
.foot .wrap::before{content:"";position:absolute;left:var(--g);right:var(--g);top:0;height:1px;background:var(--hair)}
.foot .brand img{height:38px;margin-left:-4.8px}
.foot .brand span{font-size:19px}
.foot .brand{grid-column:1;justify-self:start}
.fd{grid-column:1;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}
.fd a{text-underline-offset:3px;white-space:nowrap}   /* "full disclaimer" stays on one line (help judge-1, 1024) */
.fe{grid-column:1;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}   /* the short entity line (legal/entity.html, 2026-10-26): the trader's name in 600 ink, as on the legal pages (§12.4) */
.fe b{font-weight:600;color:var(--ink)}
.fe a{text-underline-offset:3px;white-space:nowrap}
.fl{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 24px;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}
.fl a{text-decoration:none}
.fl a[aria-current="page"]{color:var(--ink);font-weight:600}
.fr{grid-column:2;grid-row:2 / span 2;align-self:end;text-align:right;font:400 15px/1.5 "Instrument Sans";color:var(--ink-soft)}

/* ---- 1024 to 1439: the 1440 page, smaller; no text under its phone size (§12.1, §12.13) */
@media (min-width:1024px) and (max-width:1439px){
 .page{zoom:var(--k)}
 .page .brand span{font-size:max(21px,calc(19px / var(--k)))}
 .page .nav{font-size:max(16px,calc(16px / var(--k)))}
 .page h1{font-size:max(44px,calc(32px / var(--k)))}
 .page .kick{font-size:max(14px,calc(13px / var(--k)))}
 .page .micro{font-size:max(15px,calc(14px / var(--k)))}
 .page .ghost{font-size:max(17px,calc(17px / var(--k)))}
 .page .toc li{font-size:max(15px,calc(14px / var(--k)))}
 .page .toc .no{font-size:max(12px,calc(12px / var(--k)))}
 .page .qa h3{font-size:max(26px,calc(22px / var(--k)))}
 .page .qa p{font-size:max(19px,calc(17px / var(--k)))}
 .page .list li{font-size:max(17px,calc(16px / var(--k)))}
 .page .t .lab{font-size:max(12px,calc(10px / var(--k)))}
 .page .fd,.page .fe,.page .fl,.page .fr{font-size:max(15px,calc(14px / var(--k)))}
 /* sizes that are not text but sit beside it: icons and the lockups keep their own size (12.4, 12.5) */
 .page .top .brand img{height:max(44px,calc(38px / var(--k)));margin-left:calc(-5.6px * max(1,calc(.8636 / var(--k))))}
 .page .foot .brand img{height:calc(38px / var(--k));margin-left:calc(-4.8px / var(--k))}
 .page .foot .brand span{font-size:calc(19px / var(--k))}
 .page .list li{grid-template-columns:calc(22px / var(--k)) 1fr;column-gap:calc(12px / var(--k))}
 .page .list .ic{width:calc(20px / var(--k));height:calc(20px / var(--k))}
}

/* 1024 to 1279: the floored contents list no longer fits two columns in the narrower column, so it runs as one */
@media (min-width:1024px) and (max-width:1279px){
 .page .toc ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}

/* 1024 to 1199 (the 1440 page drawn smaller): the six footer links no longer share one row since Help joined them, so
   they take two even rows of three (Help, Privacy Policy, Terms; then Refund Policy, Disclaimer, Cookie settings), never
   one link alone on a row. From about 1150 up they fit one row again. */
@media (min-width:1024px) and (max-width:1199px){
 .page .fl{row-gap:4px}
 .page .fl::before{content:"";flex-basis:100%;height:0;order:1}
 .page .fl a:nth-of-type(n+4){order:2}
}
/* ---- phones, 1023 and below (§12.11) */
@media (max-width:1023px){
 :root{--g:24px}
 .d-only{display:none!important}
 .m-only{display:block}
 .top{height:76px}
 .brand img{height:38px;margin-left:-4.8px}
 .brand span{font-size:19px}
 .nav{display:none}
 .menu{display:inline-flex}
 .mnav:not([hidden]){display:flex;flex-direction:column;gap:6px;padding-bottom:20px;font:500 16px/1 "Instrument Sans"}
 .mnav a{text-decoration:none;padding:14px 0}
 .mnav .pill{text-align:center;padding:16px 22px;margin-top:8px}
 h1{font-size:32px}
 .kick{font-size:13px;margin-bottom:16px}
 .micro{font-size:14px}
 .ttl{padding-top:12px;padding-bottom:12px}
 .ttl .micro{margin-top:14px}
 .rise{height:72px}
 .sunw{width:390px;height:72px;margin-left:-195px}
 .read{padding-top:56px;padding-bottom:64px}
 .toc ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;row-gap:10px}
 .toc li{font-size:14px}   /* the small line's phone size (12.2) */
 .grp{margin-top:48px;padding-top:32px}
 .grp > .kick{margin-bottom:22px}
 .qa + .qa{margin-top:32px}
 .qa h3{font-size:22px}
 .qa p{font-size:17px;margin-top:10px}
 .qa p + p{margin-top:12px}
 .list{margin-top:14px;gap:12px}
 .list li{font-size:16px}
 .t{border-radius:16px}
 .t .lab{font-size:10px}
 .t.note{margin-top:22px;padding:16px 16px 20px}
 .t.note p{margin-top:12px}
 .t.note .ghost{margin-top:18px}
 .foot .wrap{grid-template-columns:minmax(0,1fr);padding-top:24px;padding-bottom:28px;row-gap:16px}
 .fd,.fe,.fl,.fr{grid-column:1;grid-row:auto;font-size:14px}
 .fl{justify-content:flex-start;gap:8px 20px}
 .fr{text-align:left}
}