/* Silverbrook Advisors Group - one stylesheet for the marketing pages.
   Set like a quiet trade broadsheet: no coloured bands, no cards floating on
   tints. Everything sits on white inside a two-column editorial grid, where the
   left column carries a small-caps label and the right carries the writing. The
   motif is the brook - a pair of hairlines, the lower one shorter and offset,
   which opens every section and divides the footer.

   The pewter is used at full strength for type and rules and never as a fill
   behind body text; a mid-grey ground would take the body copy below 4.5:1. */
:root{
  --page:#FFFFFF; --ash:#F6F7F8; --ink:#1E2225; --body:#454B51; --mute:#6E757C;
  --pewter:#646D77; --pewter-deep:#4E565E; --on-pewter:#FFFFFF;
  --hair:#E3E6E8; --hair-firm:#C7CCD1;
  --head:"Red Hat Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --text:"Red Hat Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --col:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#15181B; --ash:#1C2024; --ink:#EDEFF1; --body:#BFC5CB; --mute:#8D959C;
    --pewter:#A7B0B9; --pewter-deep:#C3CAD1; --on-pewter:#15181B;
    --hair:#272C31; --hair-firm:#3A4046;
  }
}
:root[data-theme="dark"]{
  --page:#15181B; --ash:#1C2024; --ink:#EDEFF1; --body:#BFC5CB; --mute:#8D959C;
  --pewter:#A7B0B9; --pewter-deep:#C3CAD1; --on-pewter:#15181B;
  --hair:#272C31; --hair-firm:#3A4046;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--body);
  font-family:var(--text);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);color:var(--ink);margin:0;font-weight:700;
  text-wrap:balance;letter-spacing:-.016em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--pewter-deep);outline-offset:3px;border-radius:3px}

.hold{width:100%;max-width:var(--col);margin:0 auto;padding-inline:32px}

/* ---- the brook: two hairlines, the lower one short and offset ------------- */
.brook{display:block;margin:0 0 20px}
.brook i{display:block;height:1px;background:var(--hair-firm)}
.brook i:first-child{width:92px}
.brook i:last-child{width:46px;margin:5px 0 0 20px;background:var(--pewter)}

/* ---- strip (header) ------------------------------------------------------ */
.strip{border-bottom:1px solid var(--hair);background:var(--page)}
.strip .row{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0}
.sig{font-family:var(--head);font-weight:700;font-size:19.5px;color:var(--ink);
  text-decoration:none;letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:9px}
.sig em{font-style:normal;font-weight:400;color:var(--pewter);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}
.paths{display:flex;align-items:center;gap:26px;font-size:15px;flex-wrap:wrap}
.paths a{color:var(--body);text-decoration:none}
.paths a:hover{color:var(--ink)}
/* The button's ink is a token, not a literal: --pewter-deep flips to a LIGHT
   pewter in dark mode, and a hard-coded #fff on it would be unreadable. */
.paths .now{color:var(--on-pewter);background:var(--pewter-deep);border-radius:3px;
  padding:10px 18px;font-weight:600}
.paths .now:hover{background:var(--ink);color:var(--page)}

/* ---- opening ------------------------------------------------------------- */
.opening{padding:78px 0 64px;border-bottom:1px solid var(--hair)}
.opening h1{font-size:clamp(33px,4.8vw,54px);line-height:1.08;max-width:19ch}
.lede{font-size:clamp(17px,1.5vw,19.5px);line-height:1.62;max-width:60ch;margin:22px 0 0;
  color:var(--body)}
.start{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px}
.call{display:inline-block;background:var(--pewter-deep);color:var(--on-pewter);
  text-decoration:none;font-family:var(--head);font-weight:600;font-size:16px;
  padding:14px 28px;border-radius:3px}
.call:hover{background:var(--ink);color:var(--page)}
.trail{color:var(--mute);font-size:14.5px}

/* ---- the two-column editorial grid --------------------------------------- */
.part{padding:58px 0;border-bottom:1px solid var(--hair)}
.part:last-of-type{border-bottom:0}
.grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px}
.side{font-family:var(--head);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pewter);padding-top:4px}
.part h2{font-size:clamp(24px,2.8vw,31px);line-height:1.18;max-width:25ch}
.say{margin:14px 0 0;max-width:64ch}

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;margin-top:34px}
.duo h3{font-size:18px;margin-bottom:7px;letter-spacing:-.01em}
.duo p{font-size:16px;line-height:1.62}

.runs{list-style:none;margin:32px 0 0;padding:0;counter-reset:r}
.runs li{counter-increment:r;padding:22px 0 22px 52px;border-top:1px solid var(--hair);
  position:relative}
.runs li:last-child{border-bottom:1px solid var(--hair)}
.runs li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:24px;
  font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--pewter)}
.runs h3{font-size:18.5px;margin-bottom:6px}
.runs p{font-size:16px;margin:0}

.rulebox{border:1px solid var(--hair);border-left:3px solid var(--pewter);
  background:var(--ash);padding:26px 28px;margin-top:32px}
.rulebox ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.rulebox li{font-size:16px;line-height:1.6;padding-left:20px;position:relative}
.rulebox li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;
  background:var(--pewter)}

.qs{margin-top:30px;border-top:1px solid var(--hair)}
.qs details{border-bottom:1px solid var(--hair)}
.qs summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;position:relative;
  font-family:var(--head);font-size:17.5px;font-weight:600;color:var(--ink)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";position:absolute;right:8px;top:27px;width:11px;height:11px;
  border-right:1.5px solid var(--pewter);border-bottom:1.5px solid var(--pewter);
  transform:translateY(-4px) rotate(45deg);transition:transform .18s}
.qs details[open] summary::after{transform:translateY(0) rotate(225deg)}
.qs .ans{padding:0 0 20px;max-width:70ch;font-size:16px}

.next{margin-top:24px;font-size:15.5px}
.next a{color:var(--pewter-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:4px}
.next a:hover{color:var(--ink)}

.talk{display:grid;grid-template-columns:1fr 300px;gap:40px;margin-top:30px;align-items:start}
.talk dl{margin:0;font-size:16px}
.talk dt{font-family:var(--head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pewter);margin-top:18px}
.talk dt:first-child{margin-top:0}
.talk dd{margin:4px 0 0;color:var(--ink)}

/* ---- prose pages --------------------------------------------------------- */
.sheetTop{padding:56px 0 8px;border-bottom:1px solid var(--hair)}
.sheetTop h1{font-size:clamp(29px,3.8vw,42px);line-height:1.12;max-width:21ch}
.sheetTop .lede{margin-top:16px}
.longform{padding:34px 0 72px;max-width:74ch}
.longform h2{font-size:22px;margin:40px 0 11px}
.longform h3{font-size:18px;margin:26px 0 7px}
.longform ul,.longform ol{margin:0 0 1.05em;padding-left:22px}
.longform li{margin-bottom:8px}
.longform .dated{font-size:14.5px;color:var(--mute);margin-bottom:30px}
.longform .caution{border:1px solid var(--hair);border-top:2px solid var(--pewter);
  background:var(--ash);padding:18px 22px;margin:26px 0;font-size:16px}

/* ---- footer -------------------------------------------------------------- */
footer{border-top:1px solid var(--hair);padding:36px 0 44px;font-size:14.5px;color:var(--mute)}
footer a{color:var(--body);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
.close{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.close nav{display:flex;gap:22px;flex-wrap:wrap}
.smallprint{margin:22px 0 0;max-width:92ch;line-height:1.6}

@media (max-width:900px){
  .grid{grid-template-columns:1fr;gap:16px}
  .side{padding-top:0}
  .duo{grid-template-columns:1fr;gap:24px}
  .talk{grid-template-columns:1fr;gap:26px}
  .opening{padding:54px 0 48px}
  .part{padding:44px 0}
}
@media (max-width:560px){
  .hold{padding-inline:20px}
  .strip .row{flex-wrap:wrap;row-gap:14px}
  .paths{width:100%;gap:16px;font-size:14.5px}
  .sig{font-size:17.5px}
  .sig em{display:none}
}