/* Phoenix Funding — design tokens
   ground/panel/ink/accent mirror the product icon (deep navy + gold).
   Sans everywhere on marketing pages; serif reserved for the long-form guide. */
:root{
  --ground:#0A0E1A; --panel:#111827; --panel-2:#161F31;
  --ink:#EAEFF7; --ink-soft:#A9B4C4; --ink-faint:#8290AA;
  --rule:#202A3D; --accent:#E0B457; --accent-ink:#0A0E1A; --accent-soft:#1B2334;
  --caution:#E08A72; --ok:#7FD1A6;
  --measure:64ch; --shell:1180px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
}
@media (prefers-color-scheme: light){
  :root{
    --ground:#FBFAF6; --panel:#FFFFFF; --panel-2:#F5F2EA;
    --ink:#161A26; --ink-soft:#4B5468; --ink-faint:#666E82;
    --rule:#E3DFD4; --accent:#8F6414; --accent-ink:#FFFFFF; --accent-soft:#F5EDDC;
    --caution:#9C3B24; --ok:#2C6E4E;
  }
}
:root[data-theme="light"]{
  --ground:#FBFAF6; --panel:#FFFFFF; --panel-2:#F5F2EA;
  --ink:#161A26; --ink-soft:#4B5468; --ink-faint:#666E82;
  --rule:#E3DFD4; --accent:#8F6414; --accent-ink:#FFFFFF; --accent-soft:#F5EDDC;
  --caution:#9C3B24; --ok:#2C6E4E;
}
:root[data-theme="dark"]{
  --ground:#0A0E1A; --panel:#111827; --panel-2:#161F31;
  --ink:#EAEFF7; --ink-soft:#A9B4C4; --ink-faint:#8290AA;
  --rule:#202A3D; --accent:#E0B457; --accent-ink:#0A0E1A; --accent-soft:#1B2334;
  --caution:#E08A72; --ok:#7FD1A6;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.shell{max-width:var(--shell); margin:0 auto; padding:0 var(--s3)}
.prose{max-width:var(--measure)}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--rule); background:var(--panel); position:sticky; top:0; z-index:20}
.masthead{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:64px; flex-wrap:wrap}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; padding:8px 0; min-height:44px}
.mark img{width:30px; height:30px; border-radius:7px}
.mark b{font-size:17px; letter-spacing:-.2px; color:var(--accent)}
nav{display:flex; align-items:center; gap:var(--s1); flex-wrap:wrap}
/* Scoped to the masthead: these sizes are for the header nav, and a bare
   `nav a` also matched the table-of-contents rail, centring its labels. */
header nav a{
  color:var(--ink-soft); text-decoration:none; font-size:15px;
  padding:11px 12px; border-radius:6px; min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
header nav a:hover{color:var(--ink); background:var(--panel-2)}
.lang{
  border:1px solid var(--rule); border-radius:7px; padding:9px 13px; font-size:14px;
  color:var(--ink-soft); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; gap:6px;
}
.lang:hover{border-color:var(--accent); color:var(--accent)}
.nav-buy{background:var(--accent); color:var(--accent-ink) !important; font-weight:700}
.nav-buy:hover{background:var(--accent); filter:brightness(1.08)}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--rule); background:
  radial-gradient(900px 420px at 78% 12%, var(--accent-soft), transparent 68%);}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s5); align-items:center;
  padding-top:var(--s6); padding-bottom:var(--s6);
}
h1{font-size:clamp(32px,4.2vw,52px); line-height:1.12; letter-spacing:-1.2px; font-weight:800; margin:0 0 var(--s2); text-wrap:balance}
.lede{font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); margin:0 0 var(--s4); max-width:52ch}
.hero-art img{border-radius:14px; border:1px solid var(--rule)}
.cta-row{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.cta{
  display:inline-flex; align-items:center; min-height:52px; padding:0 30px;
  background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:17px;
  text-decoration:none; border-radius:8px;
}
.cta:hover{filter:brightness(1.08)}
/* secondary link in a CTA row is a real tap target, not just text */
.cta-row a:not(.cta){display:inline-flex; align-items:center; min-height:44px; padding:0 4px}
.cta-note{font-size:14.5px; color:var(--ink-faint); margin:var(--s2) 0 0}
.trust{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s4); font-size:14.5px; color:var(--ink-faint)}
.trust span{display:inline-flex; align-items:center; gap:7px}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none}

/* ---------- sections ---------- */
section{padding:var(--s6) 0}
section + section{border-top:1px solid var(--rule)}
h2{font-size:clamp(24px,2.4vw,32px); line-height:1.25; letter-spacing:-.6px; font-weight:800; margin:0 0 var(--s2); text-wrap:balance}
.sec-lede{color:var(--ink-soft); max-width:60ch; margin:0 0 var(--s4); font-size:17px}
h3{font-size:18px; font-weight:700; margin:0 0 6px}
p{margin:0 0 var(--s2); color:var(--ink-soft)}
p strong,li strong{color:var(--ink); font-weight:700}

.grid{display:grid; gap:var(--s3)}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:var(--s3)}
.card p{margin:0; font-size:15.5px}
.card .tag{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700; display:block; margin-bottom:8px}
.card.no{border-left:3px solid var(--caution)}
.card.yes{border-left:3px solid var(--accent)}

ul.plain{list-style:none; margin:0 0 var(--s2); padding:0}
ul.plain li{position:relative; padding-left:24px; margin-bottom:10px; color:var(--ink-soft)}
ul.plain li::before{content:""; position:absolute; left:5px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* focusable so keyboard users can scroll it; needs a visible ring of its own
   because the default UA outline is near-invisible on the dark ground */
.table-scroll{overflow-x:auto; border-radius:8px}
.table-scroll:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
table{border-collapse:collapse; width:100%; font-size:15.5px; min-width:560px}
th,td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--rule); color:var(--ink-soft)}
th{color:var(--ink); font-weight:700; white-space:nowrap}
td.hl{color:var(--ink); font-weight:700}

.callout{background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:10px; padding:var(--s3); margin:0 0 var(--s3)}
.callout.warn{border-left-color:var(--caution)}
.callout p{color:var(--ink)} .callout p:last-child{margin-bottom:0}

.figwrap{margin:var(--s4) 0 0}
.figwrap img{border-radius:12px; border:1px solid var(--rule)}

.ref-list{display:grid; gap:var(--s2); grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 0 var(--s3)}
.ref{display:block; background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:var(--s3); text-decoration:none}
.ref:hover{border-color:var(--accent)}
.ref b{display:block; color:var(--ink); font-size:17px; margin-bottom:4px}
.ref span{display:block; color:var(--ink-faint); font-size:14.5px}
.fineprint{font-size:14px; color:var(--ink-faint)}
/* referral links are the most-tapped thing on the guide, so they get a real
   target rather than the inline-link exception the prose links rely on */
.signup{display:inline-flex; align-items:center; min-height:44px; min-width:44px; padding:0 10px;
  border:1px solid var(--rule); border-radius:7px; text-decoration:none; font-weight:600}
.signup:hover{border-color:var(--accent)}

footer{border-top:1px solid var(--rule); background:var(--panel); padding:var(--s4) 0 var(--s5); font-size:14.5px; color:var(--ink-faint)}
footer p{color:var(--ink-faint); margin-bottom:10px}
footer a{color:var(--ink-soft); display:inline-flex; align-items:center; min-height:44px; min-width:44px; padding:0 2px}
.foot-grid{display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
/* directory badge: the artwork carries its own colour, so no link padding,
   and the light/dark variants are swapped by <picture> not by CSS */
.badge-row{margin-top:var(--s3); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.badge{padding:0; min-width:0; min-height:0}
.foot-grid p:has(> a:only-child){margin-bottom:0}

/* ---------- long-form article (guide) ----------
   Serif for sustained reading; the marketing pages stay sans. */
.article{max-width:var(--measure); margin:0 auto; padding:var(--s5) var(--s3) var(--s6)}
.article{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif CJK TC","Songti TC","PingFang TC","Microsoft JhengHei",serif; font-size:17.5px; line-height:1.8}
.article h1{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.8px; margin-bottom:12px}
.article h2{margin-top:var(--s5)}
.article h3{font-size:19px; margin-top:var(--s3)}
.article h1,.article h2,.article h3{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif}
.article .stamp{font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 var(--s4); font-family:-apple-system,"Segoe UI",sans-serif}
.article ol{counter-reset:n; list-style:none; padding:0; margin:0 0 var(--s2)}
.article ol li{counter-increment:n; position:relative; padding-left:30px; margin-bottom:14px; color:var(--ink-soft)}
.article ol li::before{content:counter(n); position:absolute; left:0; top:.1em; font-family:-apple-system,"Segoe UI",sans-serif; font-size:13px; font-weight:800; color:var(--accent)}
.article ul{list-style:none; padding:0; margin:0 0 var(--s2)}
.article ul li{position:relative; padding-left:24px; margin-bottom:10px; color:var(--ink-soft)}
.article ul li::before{content:""; position:absolute; left:5px; top:.75em; width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* ---------- long-form document layout ----------
   The reading column stays at 60-75 characters, which is where prose is
   actually legible; what a wide screen has left over goes to section
   navigation rather than sitting empty. Sidebar from 1080px up — below that
   the document reads linearly, as it did before. */
/* Keyboard users should be able to get past the header without tabbing the
   whole nav; visible only while focused. */
.skip-link{
  position:absolute; left:var(--s3); top:8px; transform:translateY(-160%);
  background:var(--accent); color:var(--accent-ink); padding:10px 14px;
  border-radius:6px; font-weight:700; text-decoration:none; z-index:100;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
}
.skip-link:focus{transform:translateY(0)}

/* The reading column stays at the 60-75 characters where prose is legible;
   the width a wide screen has left over goes to section navigation rather
   than sitting empty. Same 1180px macro-width as the marketing pages, so a
   document does not read as a narrower island than the home page. */
.doc-shell{max-width:var(--shell); margin:0 auto; padding:var(--s5) var(--s3) var(--s6)}
.doc-body{max-width:72ch; min-width:0; margin:0; padding:0}
.legal-body{max-width:70ch}
.doc-body h2,.doc-body h3,.legal-body section{scroll-margin-top:calc(64px + var(--s3))}
.terms-page .legal-body section{scroll-margin-top:var(--s3)}

/* Landing on an anchor should show you where you landed. Without JS this is
   the only feedback available, since a static aria-current would go stale the
   moment the reader scrolls. */
.doc-body :target,.legal-body section:target{outline:2px solid var(--accent); outline-offset:10px; border-radius:2px}

.doc-toc{display:none}

/* Phone and tablet: one 44px row after the intro, closed. A table of contents
   opened by default before the title would eat the first screen. */
.toc-inline{
  display:block; margin:var(--s3) 0 var(--s4);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
}
.toc-inline summary{
  min-height:44px; display:flex; align-items:center; cursor:pointer;
  color:var(--ink); font-weight:700; font-size:15.5px;
}
.toc-inline ol{list-style:none; padding:0 0 var(--s2); margin:0}
.toc-inline a{display:flex; align-items:center; min-height:44px; color:var(--ink-soft); text-decoration:none; font-size:15px}
.toc-inline .toc-h3 a{padding-left:18px; font-size:14.5px; color:var(--ink-faint)}
.toc-group{margin:var(--s2) 0 4px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700}

@media (min-width:1100px){
  .doc-shell{display:grid; grid-template-columns:260px minmax(0,72ch); gap:56px; align-items:start}
  .toc-inline{display:none}
  /* A quiet document rail, not a dashboard card: one rule, accent on hover. */
  .doc-toc{
    display:block; position:sticky; top:calc(64px + var(--s3));
    max-height:calc(100dvh - 64px - var(--s4)); overflow:auto;
    padding:var(--s2) 0; border-left:1px solid var(--rule);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
    font-size:14px; line-height:1.35;
  }
  .terms-page .doc-toc{top:var(--s3); max-height:calc(100dvh - var(--s4))}
  .toc-title{margin:0 0 8px 14px; color:var(--ink-faint); font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; font-weight:700}
  .toc-list{list-style:none; padding:0; margin:0}
  .toc-list a{
    display:flex; align-items:center; min-height:34px; padding:6px 12px 6px 14px;
    border-left:2px solid transparent; margin-left:-1px;
    color:var(--ink-faint); text-decoration:none;
  }
  .toc-list a:hover,.toc-list a:focus-visible{color:var(--accent); border-left-color:var(--accent)}
  .toc-list .toc-h3 a{padding-left:28px; font-size:13px; color:var(--ink-soft)}
  .toc-list .toc-group{padding-left:14px}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:var(--s4); padding-top:var(--s5); padding-bottom:var(--s5)}
  .hero-art{order:-1}
  .g3,.g2,.ref-list{grid-template-columns:1fr}
  section{padding:var(--s5) 0}
  header{position:static}
}
/* Phone: headline and buy button must be reachable in the first screen.
   Above 600px the art leads (it reads as a product shot); below it the art
   pushes the CTA past the fold, so text leads and the nav collapses to
   language + buy (the other links repeat in the body and footer). */
@media (max-width:600px){
  .hero-art{order:0}
  .hero-grid{padding-top:var(--s4); padding-bottom:var(--s4); gap:var(--s3)}
  .masthead{min-height:56px; gap:var(--s2)}
  .mark img{width:26px; height:26px}
  .mark b{font-size:16px}
  nav a:not(.lang):not(.nav-buy){display:none}
  .lang,.nav-buy{padding:9px 12px}
  .lede{margin-bottom:var(--s3)}
  .trust{margin-top:var(--s3); gap:var(--s2) var(--s3)}
}