/* Public pages outside the app (how-it-works.html, guide.html). Self-contained: these pages do not load app.css.
   Tokens follow the app: black and gold, Sora for display, Manrope for text; light by default, dark by system or by the
   theme saved in the app ('fpl-theme'). */
:root{--bg:#F7F3EA;--card:#FFFFFF;--ink:#141419;--ink-2:#4A4842;--ink-3:#7A786F;--line:rgba(17,17,19,.12);--gold:#B8860B;--gold-soft:rgba(242,193,78,.18);--good:#1F6F52;--dot:rgba(17,17,19,.08);--shadow:0 18px 44px rgba(17,17,19,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#08080B;--card:#141419;--ink:#FFFFFF;--ink-2:#D7D5D0;--ink-3:#9A988F;--line:rgba(255,255,255,.16);--gold:#F2C14E;--gold-soft:rgba(242,193,78,.12);--good:#3ECF8E;--dot:rgba(255,255,255,.06);--shadow:0 18px 44px rgba(0,0,0,.5)}}
:root[data-theme="dark"]{--bg:#08080B;--card:#141419;--ink:#FFFFFF;--ink-2:#D7D5D0;--ink-3:#9A988F;--line:rgba(255,255,255,.16);--gold:#F2C14E;--gold-soft:rgba(242,193,78,.12);--good:#3ECF8E;--dot:rgba(255,255,255,.06);--shadow:0 18px 44px rgba(0,0,0,.5)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:26px 26px;color:var(--ink);font:500 16px/1.7 'Manrope','Segoe UI',system-ui,sans-serif}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}

/* Header */
.top{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;padding-block:16px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand svg{width:40px;height:40px;display:block;border-radius:9px}
.brand b{display:block;font:800 19px/1.1 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:-.02em}
.brand span{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600}
.pnav{display:flex;gap:4px 22px;flex-wrap:wrap;font:700 13.5px/1.2 'Sora','Segoe UI',system-ui,sans-serif}
.pnav a{text-decoration:none;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
.pnav a:hover{color:var(--ink)}
.pnav a[aria-current="page"]{color:var(--ink);border-color:var(--gold)}
.cta{display:inline-block;padding:10px 18px;border-radius:999px;background:#141419;color:#FFD166;font:700 14px/1 'Sora','Segoe UI',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
:root[data-theme="dark"] .cta{background:#F2C14E;color:#141419}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cta{background:#F2C14E;color:#141419}}

/* Page hero */
.hero{padding-block:52px 38px;border-bottom:2px solid var(--gold)}
.eyebrow{font:700 11px/1 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
h1{margin:14px 0 0;font:800 clamp(30px,5vw,50px)/1.06 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
.lede{margin:20px 0 0;max-width:64ch;font-size:clamp(17px,2vw,19px);line-height:1.65;color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:36px 0 0;border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden}
.facts div{padding:18px 20px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts b{display:block;font:800 26px/1.1 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--ink-2)}

/* Two columns: a sticky menu on the left, the text on the right */
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;padding-block:48px 72px;align-items:start}
.toc{position:sticky;top:24px;font-size:13.5px;line-height:1.4;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}
.toc b{display:block;margin-bottom:12px;font:700 11px/1 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);color:var(--ink-2);text-decoration:none;transition:color .15s ease,border-color .15s ease}
.toc a:hover{border-color:var(--gold);color:var(--ink)}
/* The section in view (how-it-works) or the open tab (guide) */
.toc a.on,.toc a[aria-selected="true"]{border-color:var(--gold);color:var(--ink);font-weight:700;background:linear-gradient(90deg,var(--gold-soft),transparent 85%)}
main{min-width:0;max-width:72ch}
section{padding-top:8px;margin-bottom:56px;scroll-margin-top:20px}
h2{margin:0 0 14px;font:800 clamp(22px,3vw,28px)/1.15 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:-.02em;text-wrap:balance}
h2::before{content:"";display:inline-block;width:9px;height:9px;margin-right:12px;transform:rotate(45deg) translateY(-3px);background:var(--gold)}
h3{margin:30px 0 8px;font:700 17px/1.3 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:-.01em}
h3 small{display:block;margin-bottom:4px;font:700 10.5px/1 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
p{margin:0 0 16px;color:var(--ink-2)}
p strong,li strong,dd strong{color:var(--ink);font-weight:700}
ul,ol{margin:0 0 16px;padding-left:20px;color:var(--ink-2)}
li{margin-bottom:8px}
li::marker{color:var(--gold);font-weight:700}
.tldr{margin:0 0 8px;padding:20px 24px;border-radius:16px;background:var(--gold-soft);border:1px solid var(--line)}
.tldr p{margin:0;color:var(--ink)}
.table{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
th,td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
thead th{border-top:0;font:700 11px/1.3 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
td{color:var(--ink-2)}
td:first-child{color:var(--ink);font-weight:700}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.us td{background:var(--gold-soft);color:var(--ink)}
.note{font-size:13.5px;color:var(--ink-3)}
dl{margin:0}
dt{margin-top:18px;font:700 15.5px/1.3 'Sora','Segoe UI',system-ui,sans-serif;color:var(--ink);scroll-margin-top:20px}
dd{margin:4px 0 0;color:var(--ink-2)}
details{border-top:1px solid var(--line);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:700 16.5px/1.35 'Sora','Segoe UI',system-ui,sans-serif;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-weight:800}
details[open] summary::after{content:"\2212"}
details p{margin:10px 0 0}
summary:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.end{padding:32px;border-radius:20px;background:#141419;color:#fff}
.end h2{color:#fff}.end h2::before{background:#F2C14E}
.end p{color:rgba(255,255,255,.78)}
.end .cta{background:#F2C14E;color:#141419;margin-top:4px}
footer{border-top:1px solid var(--line);padding-block:24px 48px;font-size:12.5px;line-height:1.65;color:var(--ink-3)}
footer p{color:inherit;margin:0 0 8px;max-width:110ch}

/* ---------- Guide: one tab per page of the app ---------- */
.guide main{max-width:none}
.gpanel{margin-bottom:72px}
/* With scripts on, the left menu works as tabs and only the open page shows; without scripts every page is listed in full */
.js-tabs .gpanel{display:none;margin-bottom:0}
.js-tabs .gpanel.open{display:block}
.gpanel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:6px}
.gpanel-head h2{margin:0}
.gpanel .lede{margin:10px 0 26px;font-size:17.5px;max-width:68ch}
.open-link{flex-shrink:0;display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:700 13px/1 'Sora','Segoe UI',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.open-link:hover{border-color:var(--gold)}
.shot{margin:0 0 26px}
.shot a{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-3);max-width:80ch}
.shot figcaption b{color:var(--ink-2)}
.cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px 48px;margin-bottom:30px}
.cols h3{margin-top:0}
.can{list-style:none;padding:0;margin:0}
.can li{position:relative;padding-left:20px;margin-bottom:12px}
.can li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
.asks{list-style:none;padding:0;margin:0}
.asks li{margin-bottom:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:14.5px;line-height:1.45;color:var(--ink)}
.tip{padding:14px 18px;border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 12px 12px 0;font-size:15px;color:var(--ink)}
.tip p{margin:0;color:inherit}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font:700 14px/1.3 'Sora','Segoe UI',system-ui,sans-serif}
.pager a{text-decoration:none;color:var(--ink-2)}
.pager a:hover{color:var(--ink)}
.pager .next{margin-left:auto;text-align:right}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.steps li{counter-increment:s;margin:0;padding:18px 18px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;margin-bottom:10px;border-radius:50%;background:#141419;color:#FFD166;font:800 13px/1 'Sora','Segoe UI',system-ui,sans-serif}
.steps b{display:block;color:var(--ink);font:700 15.5px/1.3 'Sora','Segoe UI',system-ui,sans-serif;margin-bottom:4px}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:0 0 8px;padding:0;list-style:none}
.pages li{margin:0}
.pages a{display:block;height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none}
.pages a:hover{border-color:var(--gold)}
.pages b{display:block;font:700 15px/1.3 'Sora','Segoe UI',system-ui,sans-serif;color:var(--ink)}
.pages span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}

@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0;padding-block:32px 56px}
  .toc{display:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts div:nth-child(3){border-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .hero{padding-block:36px 28px}
  /* The guide keeps its menu: a swipeable strip pinned to the top */
  .guide .toc{display:flex;gap:6px;position:sticky;top:0;z-index:5;max-height:none;margin:0 calc(-1 * max(20px,env(safe-area-inset-left))) 24px;padding:10px max(20px,env(safe-area-inset-left));overflow-x:auto;overflow-y:hidden;background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
  .guide .toc::-webkit-scrollbar{display:none}
  .guide .toc b{display:none}
  .guide .toc a{flex-shrink:0;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);white-space:nowrap}
  .guide .toc a.on,.guide .toc a[aria-selected="true"]{background:#141419;color:#FFD166;border-color:#141419}
  .guide .layout{padding-top:0}
  .cols{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){.brand span{display:none}.facts b{font-size:22px}.facts div{padding:14px 16px}th,td{padding:10px 12px}.end{padding:24px}.pnav{order:3;width:100%}.shot a{border-radius:10px}}
.guide .end{margin-top:44px}
.shot.narrow{max-width:444px;margin-bottom:0}
@media (max-width:900px){.shot.narrow{margin-top:8px}}
.aud3{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.aud3 li{margin:0;padding:18px;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:16px;background:var(--card);display:flex;flex-direction:column;gap:6px}
.aud3 small{font:700 10.5px/1 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.aud3 b{font:800 18px/1.25 'Sora','Segoe UI',system-ui,sans-serif;letter-spacing:-.015em;color:var(--ink)}
.aud3 span{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.aud3 .aud3-go{margin-top:auto;padding-top:6px;font-size:13.5px;color:var(--ink-3)}
.aud3 .aud3-go a{color:var(--ink);font-weight:700}
@media (max-width:900px){.aud3{grid-template-columns:minmax(0,1fr)}}
.toc a.sub{padding-left:28px;font-size:13px}
@media (max-width:900px){.guide .toc a.sub{padding-left:14px;font-size:inherit}}