* { box-sizing: border-box; }
html { background: #0a0a0a; color-scheme: dark; overflow-x: hidden; }

html { scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232323; border-radius: 999px; border: 2px solid #0a0a0a; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #2f2f2f; background-clip: padding-box; }
body {
  margin: 0; background: #0a0a0a; color: #f4f4ef; overflow-x: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  font-family: "General Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: #e9b949; text-decoration: none; }
a:hover { color: #f3ce77; }
h1, h2, h3, p { margin: 0; }
img { display: block; }

.hv-soft { transition-property: background, border-color; transition-duration: .18s; }
.hv-soft:hover { background: #1a1a1a; border-color: #2a2a2a; }
.hv-soft-text { transition-property: background, border-color, color; transition-duration: .16s; }
.hv-soft-text:hover { background: #1a1a1a; border-color: #2a2a2a; color: #f4f4ef; }
.hv-border { transition-property: border-color; transition-duration: .2s; }
.hv-border:hover { border-color: #2a2a2a; }
.hv-white { transition-property: transform, background; transition-duration: .16s; }
.hv-white:hover { background: #ffffff; }
.hv-white:active { transform: scale(.96); }
.hv-dim { transition: color .16s; }
.hv-dim:hover { color: #8c8c88; }

.tipwrap { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: #1c1c1c; color: #605d57;
  font-family: 'General Sans', sans-serif; font-size: 9.5px; line-height: 1; cursor: help;
  flex-shrink: 0; transition-property: background, color; transition-duration: .16s; }
.tipwrap:hover, .tipwrap:focus-visible { background: #2a2a2a; color: #8c8c88; outline: none; }
.tipbox { position: absolute; bottom: calc(100% + 9px); inset-inline-start: -9px; width: 264px; padding: 13px 15px;
  border-radius: 12px; background: #161616;
  box-shadow: 0 18px 34px -16px rgba(0,0,0,.9); text-align: start; pointer-events: none;
  display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s; z-index: 40; }
.tipwrap:hover .tipbox, .tipwrap:focus-visible .tipbox { opacity: 1; transform: translateY(0); }

.faq-chev { flex-shrink: 0; transition: transform .28s cubic-bezier(.2,0,0,1); }
.faq-item[data-open="1"] .faq-chev { transform: rotate(180deg); }
.faq-wrap { overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .34s cubic-bezier(.2,0,0,1), opacity .24s ease; }
.faq-item[data-open="1"] .faq-wrap { max-height: 900px; opacity: 1; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wheel-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  #bento { grid-template-columns: minmax(0,1fr) !important; }
  #bento > div { grid-column: auto !important; }
}
@media (max-width: 1080px) {
  #hero { height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow: visible !important; padding-bottom: 0 !important; }
  #herogrid { grid-template-columns: minmax(0,1fr) !important; flex: 1 1 auto !important; align-content: space-evenly !important; }
  .sec { padding-left: 32px !important; padding-right: 32px !important; }
  #herogrid { padding-left: 32px !important; padding-right: 32px !important; padding-bottom: 230px !important; }
  #wall { height: 210px !important; margin-top: -210px !important; }
}
@media (max-width: 760px) {
  .sec { padding-left: 20px !important; padding-right: 20px !important; }
  .sep { margin-top: 48px !important; }
  section.sec { padding-top: 48px !important; }

  #herospacer { height: 66px !important; }
  #herogrid { padding: 16px 20px calc(var(--wall-h, 248px) + 20px) !important; gap: 24px !important; }
  #herocopy { order: 2 !important; text-align: start !important; align-items: stretch !important; }
  #herocard { order: 1 !important; padding: 22px 18px !important; border-radius: 20px !important; max-width: none !important; }
  #herogrid h1 { text-align: start !important; font-size: clamp(25px,7vw,31px) !important; max-width: none !important; line-height: 1.12 !important; margin: 0 0 14px !important; }
  #soonrow { margin: 12px 0 14px !important; max-width: none !important; }
  #storerow { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; }
  #storerow > span, #storerow > a { justify-content: center !important; align-items: center !important; gap: 7px !important; padding: 13px 6px !important; font-size: 13px !important; border-radius: 12px !important; }
  #storerow svg { width: 15px !important; height: 15px !important; flex-shrink: 0; }

  #cdlabel { margin-bottom: 14px !important; }
  #cdgrid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 7px !important; }
  #cdgrid > div { padding: 9px 2px !important; border-radius: 12px !important; }
  #cdgrid .cd-n { font-size: 24px !important; }
  #cdgrid .cd-l { font-size: 8px !important; letter-spacing: .06em !important; margin-top: 5px !important; }
  #launchline { display: none !important; }
  #herocard > a { margin-top: 14px !important; padding: 13px 16px !important; font-size: 14px !important; }
  .tipbox { width: min(264px, calc(100vw - 72px)) !important; inset-inline-start: auto !important; inset-inline-end: -8px !important; }

  #wall { height: var(--wall-h, 248px) !important; margin-top: calc(-1 * var(--wall-h, 248px)) !important; }
  #wall > div { width: 172% !important; margin-left: -36% !important; transform: scale(var(--wall-scale, .92)) !important; transform-origin: 50% 0 !important; }
  #blogrow { margin-top: 56px !important; }

  section.sec h2 { white-space: normal !important; font-size: clamp(23px,6.6vw,30px) !important; letter-spacing: -.02em !important; margin-bottom: 26px !important; }
  section.sec > span { margin-bottom: 14px !important; }
  #catalogcard { padding: 22px !important; border-radius: 20px !important; }
  #catalogcard .big-n { font-size: 52px !important; }
  #catalogrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #twocol { gap: 36px !important; }

  #bento { gap: 10px !important; }
  #bento > div { padding: 22px !important; border-radius: 18px !important; }
  #bento h3 { font-size: 16px !important; }
  #bento p { font-size: 14px !important; }

  .faq-item { padding: 0 20px !important; border-radius: 16px !important; }
  .faq-item button { font-size: 14.5px !important; padding: 18px 0 !important; gap: 14px !important; }
  .faq-item p { font-size: 14.5px !important; }

  #endcard { padding: 44px 20px !important; border-radius: 22px !important; }
  #endcard h2 { font-size: clamp(26px,7.6vw,34px) !important; }
  #endstores { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #endstores > a:first-child { grid-column: 1 / -1 !important; }
  #endstores > span, #endstores > a { justify-content: center !important; padding: 12px 8px !important; font-size: 13px !important; }

}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
}

*{font-weight:var(--ui-weight,650)!important;font-synthesis:none}