/* 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; --danger:#8F2D24; --on-danger:#FFF; --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;
  --ui-reading-width:68ch; --ui-control:44px; --ui-control-comfortable:48px;
  --ui-radius:16px; --ui-motion-fast:120ms; --ui-motion-standard:240ms;
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}
: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}
.ui-shell{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; min-block-size:var(--ui-control); display:inline-flex; align-items:center; background:var(--paper); padding:8px 14px; border-radius:999px; z-index:20}
.skip:focus{left:16px}

/* UI-KIT template contract, implemented locally for the independent company site. */
.ui-template{inline-size:100%}
.ui-template-main .ui-shell,.ui-document-view .ui-shell{max-width:var(--ui-reading-width)}
.ui-title-group,.ui-template-section{display:grid;gap:14px}

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

/* ── content ── */
main{padding:clamp(48px,9vh,96px) 0}
.ui-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}
.ui-summary{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}
.ui-muted{color:var(--dim)}
.ui-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:26px}
.ui-card{border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:var(--paper); box-shadow:var(--shadow-1); margin-top:20px}
.ui-card dt{color:var(--dim); font-size:13px; text-transform:uppercase; letter-spacing:.08em}
.ui-card dd{margin:4px 0 0; font-size:1.1rem}
.ui-status{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}
.ui-document-list{list-style:none; padding:0; margin-top:24px; display:grid; gap:12px}
.ui-document-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}
.ui-document-list b{font-family:var(--serif); font-weight:400; font-size:1.1rem}
.ui-document-list span{color:var(--dim); font-size:13px}
.ui-prose{display:grid;gap:var(--sp-section,32px);margin-top:32px}
.ui-prose section{display:grid;gap:10px}
.ui-prose h2{margin-top:0}
.ui-prose h3{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin-top:8px}
.ui-prose ul{padding-inline-start:1.25rem;display:grid;gap:8px}
.ui-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--dim);font-size:13px;margin-top:18px}
.ui-meta span+span::before{content:"·";margin-inline-end:10px}
.ui-socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.ui-socials a{min-block-size:var(--ui-control);display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;text-decoration:none}
.ui-quote{border-inline-start:2px solid var(--brand);padding-inline-start:18px;font-family:var(--serif);font-size:1.12rem}
.ui-anchor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.ui-anchor-grid .ui-card{margin-top:0}
.ui-resource{display:grid;gap:6px}
.ui-resource small{color:var(--dim)}
.ui-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-inline-size:44px;min-block-size:var(--ui-control);border:1px solid transparent;text-decoration:none;font:500 14px/1 var(--sans);padding:0 20px;border-radius:999px;margin-top:26px;cursor:pointer;transition:transform var(--ui-motion-fast) var(--ui-ease),opacity var(--ui-motion-fast) var(--ui-ease),background-color var(--ui-motion-standard) var(--ui-ease),border-color var(--ui-motion-standard) var(--ui-ease)}
.ui-actions .ui-button{margin-top:0}
.ui-button[data-size="comfortable"]{min-block-size:var(--ui-control-comfortable)}
.ui-button[data-variant="primary"]{background:var(--fg);color:var(--bg)}
.ui-button[data-variant="secondary"]{background:var(--paper);color:var(--fg);border-color:var(--line-2)}
.ui-button[data-variant="text"]{background:transparent;color:var(--brand-ink);padding-inline:12px}
.ui-button[data-variant="danger"]{background:var(--danger);color:var(--on-danger)}
.ui-button:hover{transform:translateY(-1px)}
.ui-button:active{transform:translateY(0);opacity:.82}
.ui-button:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px}
.ui-button:disabled,.ui-button[aria-disabled="true"]{cursor:not-allowed;opacity:.48;transform:none}
.ui-button[aria-busy="true"]{cursor:progress;opacity:.72}
.ui-button-icon{display:inline-grid;place-items:center;inline-size:18px;block-size:18px;flex:none}
.ui-button-icon svg{inline-size:100%;block-size:100%;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

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

@media (max-width:640px){
  header.ui-page-head .ui-shell{gap:10px}
  header.ui-page-head .ui-lang{margin-inline-start:0; width:100%}
  .ui-anchor-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ui-button{transition-duration:1ms}
}

/* buy page: three service-fee plans */
.ui-plans{list-style:none;padding:0;margin:1.2rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.ui-plan{border:1px solid var(--line,#00000022);border-radius:16px;padding:18px;display:grid;gap:6px;background:var(--paper,transparent)}
.ui-plan[data-featured="true"]{border-width:2px}
.ui-plan .ui-price{font-size:1.9rem;font-weight:600}
.ui-plan .ui-price i{font-style:normal;font-size:.9rem;font-weight:400;opacity:.7;margin-inline-start:4px}
.ui-plan .ui-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}