/* site-chrome.css — the only presentation source for HoopGram's public navigation.
   It is deliberately scoped to the header so Forge account/login can consume the
   exact same chrome without inheriting the company site's document cascade. */
@import url("/tokens.css");
@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}
/* v0.2.26 single-navigation:base:start */
header.ui-page-head{background:transparent;color:var(--fg);font-family:var(--font-ui);line-height:var(--lh-body)}
header.ui-page-head,header.ui-page-head *{box-sizing:border-box}
header.ui-page-head .wordmark{font-family:"HoopGram Wordmark",var(--font-wordmark);font-weight:400;font-synthesis:none}
header.ui-page-head .ui-shell{display:flex;align-items:center;gap:var(--sp-3);min-block-size:var(--tap);max-inline-size:var(--wide-col);margin-inline:auto;padding:var(--sp-3) var(--sp-5);flex-wrap:nowrap;padding-block:var(--sp-4);border-bottom:var(--wf-divider) solid var(--line)}
header.ui-page-head .ui-brand{order:0;flex:none;min-inline-size:var(--tap);min-block-size:var(--tap);display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--fg);font-size:var(--fs-xl);text-decoration:none;white-space:nowrap}
header.ui-page-head .ui-company{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:400;color:var(--dim);padding-inline-start:var(--sp-2);border-inline-start:var(--wf-divider) solid var(--line);line-height:var(--lh-tight);border:0}
header.ui-page-head .ui-nav-menu{display:none}
header.ui-page-head nav{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-inline-size:0}
header.ui-page-head .ui-nav-primary,header.ui-page-head .ui-nav-actions{display:flex;align-items:center;gap:var(--sp-2)}
header.ui-page-head .ui-nav-actions{margin-inline-start:auto}
header.ui-page-head [data-nav-item],header.ui-page-head .ui-nav-education>summary{min-inline-size:var(--tap);min-block-size:var(--tap);display:inline-flex;align-items:center;justify-content:center;padding-inline:var(--sp-2);background:transparent;color:var(--dim);font-size:var(--fs-ui);text-decoration:none;white-space:nowrap}
header.ui-page-head [data-nav-item],header.ui-page-head .ui-nav-education>summary,header.ui-page-head .ui-language-menu>summary{transition:color var(--motion-fast) var(--ease-standard);gap:var(--sp-1)}
header.ui-page-head [data-nav-item]:hover,header.ui-page-head .ui-nav-education>summary:hover,header.ui-page-head .ui-nav-education[open]>summary{color:var(--fg);text-decoration:underline}
header.ui-page-head [data-nav-item][aria-current="page"]{color:var(--fg);font-weight:600}
header.ui-page-head .ui-nav-education{position:relative}
header.ui-page-head .ui-nav-education>summary{list-style:none;cursor:pointer}
header.ui-page-head .ui-nav-education>summary::-webkit-details-marker{display:none}
header.ui-page-head .ui-nav-education:not([open])>.ui-education-options{display:none}
header.ui-page-head .ui-education-options{position:absolute;z-index:var(--z-chrome);inset-block-start:var(--tap);inset-inline-start:var(--sp-1);padding:var(--sp-2);display:grid;gap:var(--sp-1);background:var(--bg);color:var(--fg);border-radius:0;box-shadow:none;white-space:nowrap;border:var(--wf-divider) solid var(--line)}
header.ui-page-head nav .ui-education-options a{color:var(--fg);justify-content:flex-start}
header.ui-page-head .ui-language-menu{position:relative;color:var(--dim);font-size:var(--fs-ui)}
header.ui-page-head .ui-language-menu>summary{list-style:none;cursor:pointer;min-inline-size:var(--tap);min-block-size:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);padding-inline:var(--sp-2);background:transparent}
header.ui-page-head .ui-language-menu>summary:hover,header.ui-page-head .ui-language-menu[open]>summary{color:var(--fg);text-decoration:underline}
header.ui-page-head .ui-language-menu>summary::-webkit-details-marker{display:none}
header.ui-page-head .ui-language-menu>summary svg{display:block;inline-size:var(--sp-2);block-size:var(--sp-2);fill:none;stroke:currentColor;stroke-width:var(--wf-divider)}
header.ui-page-head .ui-language-menu:not([open])>.ui-language-options{display:none}
header.ui-page-head .ui-language-options{position:absolute;z-index:var(--z-chrome);inset-inline-end:0;inset-block-start:var(--tap);padding:var(--sp-2);display:grid;background:var(--bg);color:var(--fg);border-radius:0;box-shadow:none;white-space:nowrap;border:var(--wf-divider) solid var(--line)}
header.ui-page-head .ui-language-options a,header.ui-page-head .ui-language-options span{min-block-size:var(--tap);display:flex;align-items:center;padding-inline:var(--sp-2);text-decoration:none}
header.ui-page-head .ui-language-options a:hover{color:var(--fg);text-decoration:underline}
header.ui-page-head .ui-language-options [aria-current="true"]{color:var(--fg);font-weight:600}
header.ui-page-head nav .ui-nav-login{color:var(--dim)}
header.ui-page-head nav .ui-nav-login[data-account-state="authenticated"]{color:var(--fg);font-weight:600}
header.ui-page-head nav .ui-nav-buy,header.ui-page-head nav .ui-nav-buy:hover{background:transparent;color:var(--fg);font-weight:600;text-decoration:underline;padding-inline:var(--sp-2)}
header.ui-page-head :focus-visible{outline:var(--focus-outline);outline-color:var(--brand);outline-offset:var(--focus-offset)}
header.ui-page-head .ui-appearance{display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--r-xs);background:transparent;gap:0}
/* --tap, not --sp-6: these three sat below the site's own floor for anything a finger has
   to hit (tokens.css --tap, gated by apps/comsite/test-product-showcase-browser.mjs). The
   gate has been refusing every company-site release over it, and on a phone the appearance
   control really is harder to hit than everything beside it. The icons keep their size;
   only the target around them grows. */
header.ui-page-head .ui-appearance button{display:inline-grid;place-items:center;min-inline-size:var(--tap);min-block-size:var(--tap);padding-inline:var(--sp-2);border:0;background:transparent;color:var(--dim);font:inherit;cursor:pointer;border-radius:var(--r-xs)}
header.ui-page-head .ui-appearance button:hover{color:var(--fg)}
header.ui-page-head .ui-appearance button{transition:color var(--motion-fast) var(--ease-standard),background-color var(--motion-fast) var(--ease-standard)}
header.ui-page-head .ui-appearance button.on{background:transparent;color:var(--brand-ink);box-shadow:inset 0 calc(-1 * var(--wf-divider)) var(--brand-ink)}
header.ui-page-head .ui-appearance button svg{display:block;fill:none;stroke:currentColor}
header.ui-page-head .ui-appearance button:focus-visible{outline:var(--focus-outline);outline-color:var(--brand);outline-offset:var(--focus-offset)}
header.ui-page-head :is([data-nav-item],.ui-language-menu,.ui-nav-education>summary){font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:var(--fs-xs)}

/* v0.2.26 single-navigation:base:end */
@media (max-width:900px){
  /* v0.2.26 single-navigation:mobile:start */
  header.ui-page-head .ui-shell{display:grid;grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-2);padding-block:var(--sp-2)}
  header.ui-page-head .ui-nav-menu{display:block;grid-column:2;grid-row:1;position:relative}
  header.ui-page-head .ui-nav-menu>summary{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--tap);min-block-size:var(--tap);padding-inline:var(--sp-2);background:transparent;color:var(--fg);cursor:pointer;font-size:var(--fs-ui);list-style:none}
  header.ui-page-head .ui-nav-menu[open]>summary,header.ui-page-head .ui-nav-menu>summary:hover{text-decoration:underline}
  header.ui-page-head .ui-nav-menu>summary::-webkit-details-marker{display:none}
  header.ui-page-head .ui-nav-menu:not([open])+nav{display:none}
  header.ui-page-head .ui-nav-menu[open]+nav{display:grid;grid-template-columns:1fr;grid-column:1/-1;grid-row:2;z-index:var(--z-chrome);padding:var(--sp-2);background:var(--bg);border-radius:var(--r-md);box-shadow:var(--shadow-pop)}
  header.ui-page-head .ui-nav-menu[open]+nav .ui-nav-primary,header.ui-page-head .ui-nav-menu[open]+nav .ui-nav-actions{display:grid;gap:var(--sp-1);margin-inline-start:0}
  header.ui-page-head .ui-nav-menu[open]+nav [data-nav-item]{justify-content:flex-start;padding-inline:var(--sp-3);color:var(--fg)}
  header.ui-page-head .ui-nav-menu[open]+nav [data-nav-item]:hover{color:var(--fg);text-decoration:underline}
  header.ui-page-head .ui-nav-menu[open]+nav [data-nav-item][aria-current="page"]{color:var(--fg);font-weight:600}
  header.ui-page-head .ui-nav-education>summary{justify-content:flex-start;color:var(--fg)}
  header.ui-page-head .ui-nav-education .ui-education-options{position:static;box-shadow:none;background:transparent;padding-inline-start:var(--sp-3)}
  header.ui-page-head nav .ui-nav-buy,header.ui-page-head nav .ui-nav-buy:hover{background:transparent;color:var(--fg);font-weight:600;text-decoration:underline}
  header.ui-page-head .ui-nav-menu[open]+nav .ui-appearance{justify-self:start;margin-inline-start:var(--sp-3)}
  header.ui-page-head .ui-shell{padding-block:var(--sp-2)}
  header.ui-page-head .ui-nav-menu[open]+nav{box-shadow:none;border-radius:0;padding-inline:0}
  header.ui-page-head .ui-nav-menu[open]+nav .ui-nav-actions{display:flex;flex-wrap:wrap}
/* v0.2.26 single-navigation:mobile:end */
}

/* The footer: the second half of the chrome, one definition for every page that mounts it —
   the company site at build time, Forge and the apex pages at request time. Outside the two
   navigation fences on purpose: those hold the header's contract, this holds the footer's. */
footer.ui-footer{padding:var(--sp-7) 0 var(--sp-8);margin-top:32px;border-top:var(--wf-divider) solid var(--line);color:var(--dim);font-family:var(--font-ui);font-size:var(--fs-xs);line-height:var(--lh-body);padding-block:24px}
footer.ui-footer,footer.ui-footer *{box-sizing:border-box}
footer.ui-footer .ui-shell{max-inline-size:var(--wide-col);margin-inline:auto;padding-inline:var(--sp-5);display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:start}
footer.ui-footer p{margin:0}
footer.ui-footer .ui-engrave{color:var(--brand-ink);font-family:var(--font-brand);font-size:var(--fs-md);margin-bottom:8px}
:lang(zh-CN) footer.ui-footer .ui-engrave{letter-spacing:.5em;text-indent:.5em}
:lang(en) footer.ui-footer .ui-engrave{font-family:var(--font-ui);font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;text-indent:.24em}
footer.ui-footer .ui-tagline{color:var(--fg);font-size:var(--fs-rd)}
footer.ui-footer .wordmark{font-family:"HoopGram Wordmark",var(--font-wordmark);font-weight:400;font-synthesis:none}
footer.ui-footer a{color:inherit;text-decoration:none;text-underline-offset:var(--sp-1);transition:color var(--motion-fast) var(--ease-standard)}
footer.ui-footer a:hover{color:var(--fg);text-decoration:underline}
footer.ui-footer .ui-socials{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:0}
footer.ui-footer .ui-socials a{min-block-size:var(--tap);display:inline-flex;align-items:center;padding:var(--sp-1) var(--sp-3);border:0;border-radius:0;transition:color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard);padding-inline:0}
footer.ui-footer .ui-socials a:hover{border-color:var(--fg);text-decoration:none}
footer.ui-footer :focus-visible{outline:var(--focus-outline);outline-color:var(--brand);outline-offset:var(--focus-offset)}