/* site.css — hoopgram.com, the company site. Self-contained: no import of hoop.css or
   apex.css, no build, no framework, no third party, no font/script/analytics from
   anywhere but this origin. Static initial HTML only. */
@font-face{font-family:"HoopGram Wordmark";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/hoopgram-wordmark-v1.woff2") format("woff2");unicode-range:U+0047-0048,U+0061,U+006D,U+006F-0070,U+0072}
:root{
  --bg:#FBF9F2; --surface:#FFFFFF; --paper:#FFFDF8; --fg:#211E16; --dim:#8C887B; --ink:#15130E; --on-ink:#F3EFE3;
  --line:rgba(33,30,22,.09); --line-2:rgba(33,30,22,.16);
  --brand:#F5B301; --brand-600:#E0A200; --brand-ink:#9C7500; --on-brand:#231A00; --soft:rgba(245,179,1,.12); --ring:rgba(245,179,1,.30);
  --shadow-1:0 1px 2px rgba(40,33,10,.04), 0 8px 24px rgba(40,33,10,.06);
  --serif:"Source Serif 4","Source Han Serif SC",Georgia,"Songti SC",serif;
  --sans:"Inter","Source Han Sans SC",system-ui,-apple-system,"PingFang SC","Segoe UI",sans-serif;
  --wordmark:"HoopGram Wordmark","Marcellus","Source Serif 4",Georgia,serif;
  --max:44rem;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --bg:#131210; --surface:#1D1B15; --paper:#211E18; --fg:#EAE7DE; --dim:#94907F; --ink:#0B0A08; --on-ink:#EAE7DE;
    --line:rgba(234,231,222,.10); --line-2:rgba(234,231,222,.18);
    --brand-600:#FFC426; --brand-ink:#F5B301; --soft:rgba(245,179,1,.14); --ring:rgba(245,179,1,.34);
    --shadow-1:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.40);
  }
}
:root[data-theme="dark"]{
  --bg:#131210; --surface:#1D1B15; --paper:#211E18; --fg:#EAE7DE; --dim:#94907F; --ink:#0B0A08; --on-ink:#EAE7DE;
  --line:rgba(234,231,222,.10); --line-2:rgba(234,231,222,.18);
  --brand-600:#FFC426; --brand-ink:#F5B301; --soft:rgba(245,179,1,.14); --ring:rgba(245,179,1,.34);
  --shadow-1:0 1px 2px rgba(0,0,0,.30), 0 10px 30px rgba(0,0,0,.40);
}
*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--fg); font:16px/1.7 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit; text-underline-offset:3px}
img{max-width:100%; height:auto}
.wordmark{font-family:var(--wordmark); font-weight:400; font-synthesis:none; letter-spacing:.005em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
:focus-visible{outline:2px solid var(--brand-ink); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-200vw; top:8px; background:var(--paper); padding:8px 14px; border-radius:999px; z-index:20}
.skip:focus{left:16px}

/* ── header ── */
header.top{border-bottom:1px solid var(--line); background:var(--surface)}
header.top .wrap{display:flex; align-items:center; gap:16px; min-height:58px; flex-wrap:wrap; padding-block:8px}
header.top .brand{font-size:19px; text-decoration:none; color:var(--fg); flex:none}
header.top nav{display:flex; align-items:center; gap:4px; flex:1; flex-wrap:wrap; min-width:0}
header.top nav a{text-decoration:none; color:var(--dim); font-size:14px; padding:6px 10px; border-radius:999px; white-space:nowrap}
header.top nav a:hover, header.top nav a[aria-current="page"]{color:var(--fg); background:var(--soft)}
header.top .lang{margin-inline-start:auto; font-size:13px}
header.top .lang a{color:var(--brand-ink); text-decoration:none; padding:6px 10px; border:1px solid var(--line-2); border-radius:999px}

/* ── content ── */
main{padding:clamp(48px,9vh,96px) 0}
.eyebrow{color:var(--brand-ink); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
h1{font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.12; margin-top:14px; font-size:clamp(2rem,5.4vw,3.4rem)}
h2{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.2; font-size:clamp(1.4rem,3vw,1.9rem); margin-top:40px}
.sub{font-family:var(--serif); color:var(--dim); font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.55; margin-top:16px; max-width:36ch}
p{margin-top:14px; max-width:60ch}
p.dim{color:var(--dim)}
.links{display:flex; gap:22px; flex-wrap:wrap; margin-top:26px}
.links a{color:var(--brand-ink); text-decoration:none; font-size:16px}
.links a:hover{text-decoration:underline}
.card{border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:var(--paper); box-shadow:var(--shadow-1); margin-top:20px}
.card dt{color:var(--dim); font-size:13px; text-transform:uppercase; letter-spacing:.08em}
.card dd{margin:4px 0 0; font-size:1.1rem}
.badge{display:inline-block; font-size:12px; color:var(--brand-ink); background:var(--soft); border:1px solid var(--ring); border-radius:999px; padding:4px 12px; margin-top:18px}
.doc-list{list-style:none; padding:0; margin-top:24px; display:grid; gap:12px}
.doc-list li{border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:var(--paper); display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.doc-list b{font-family:var(--serif); font-weight:400; font-size:1.1rem}
.doc-list span{color:var(--dim); font-size:13px}
.btn{display:inline-block; text-decoration:none; background:var(--fg); color:var(--bg); font-size:14px; font-weight:500; padding:10px 20px; border-radius:999px; margin-top:26px}
.btn:hover{filter:brightness(1.1)}

/* ── footer ── */
footer{border-top:1px solid var(--line); padding:40px 0 48px; margin-top:40px}
footer .wrap{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:var(--dim); font-size:13px}
footer .tagline{font-family:var(--serif); color:var(--fg); font-size:1rem}
footer a{text-decoration:none} footer a:hover{color:var(--fg)}

@media (max-width:640px){
  header.top .wrap{gap:10px}
  header.top .lang{margin-inline-start:0; width:100%}
}

/* buy page: three service-fee plans */
.plans{list-style:none;padding:0;margin:1.2rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.plan{border:1px solid var(--line,#00000022);border-radius:16px;padding:18px;display:grid;gap:6px;background:var(--paper,transparent)}
.plan.featured{border-width:2px}
.plan .price{font-size:1.9rem;font-weight:600}
.plan .price i{font-style:normal;font-size:.9rem;font-weight:400;opacity:.7;margin-inline-start:4px}
.plan .note{font-size:.85rem;opacity:.75;line-height:1.45}

code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;word-break:break-all;background:var(--paper,#00000008);border:1px solid var(--line,#00000018);border-radius:6px;padding:2px 6px}