/* /hgh landing page. Builds on style.css tokens and components. */
.hgh-page main{padding-top:0}
.hg-hero{padding-bottom:40px}
.hg-hero h1{max-width:12ch}
.hg-down{transform:rotate(90deg)}
.hg-hero .hg-art .core img{width:94%;height:auto}
.hg-from .core{text-align:left;justify-items:start;place-items:start}
.hg-from .core small{margin-bottom:2px}
.hg-from .core s{color:var(--muted)}

.hg-sec{padding:clamp(40px,7vw,88px) 0 0;scroll-margin-top:90px}
.hg-head{margin-bottom:24px}
.hg-head h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:-.02em}
.hg-head p{margin-top:10px;max-width:46ch}

/* size tiles */
.hg-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hg-size{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px 18px 16px;border-radius:var(--r-core);
  background:var(--surface);box-shadow:0 0 0 1px var(--hair),var(--hi),var(--amb);text-align:left;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease)}
.hg-size:hover{box-shadow:0 0 0 1.5px var(--accent),var(--amb)}
.hg-size:active{transform:scale(.97)}
.hg-iu{font-family:Fredoka;font-weight:600;font-size:clamp(40px,5vw,54px);line-height:.95;color:var(--ink);letter-spacing:-.02em}
.hg-iu small{font-size:.42em;font-weight:500;color:var(--muted);margin-left:3px;letter-spacing:0}
.hg-price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.hg-price b{font-family:Fredoka;font-weight:600;font-size:28px;color:var(--accent-text);font-variant-numeric:tabular-nums}
.hg-price s{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.hg-per{font-size:13px;color:var(--muted)}
.hg-add{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 12px 7px 9px;border-radius:999px;background:var(--bg2);color:var(--ink);font-size:14px;font-weight:600;
  transition:background .5s var(--ease),color .5s var(--ease)}
.hg-add i{font-size:18px;color:var(--accent)}
.hg-add em{font-style:normal}
.hg-size:hover .hg-add{background:var(--accent-soft)}
.hg-size.on{background:var(--accent-soft);box-shadow:0 0 0 1.5px var(--accent)}
.hg-size.on .hg-add{background:var(--accent);color:var(--accent-ink)}
.hg-size.on .hg-add i{color:var(--accent-ink)}
.hg-size .hg-qty{position:absolute;top:12px;right:12px;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;display:grid;place-items:center}

.hg-after{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hg-after #hg-cart em{font-style:normal;opacity:.7;font-weight:500}
.hg-ship{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;color:var(--muted)}
.hg-ship i{color:var(--accent);font-size:18px}

/* steps */
.hg-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s}
.hg-steps > li{display:flex}
.hg-steps .core{flex:1;position:relative;display:flex;flex-direction:column;gap:8px;padding:22px}
.hg-steps .core > i{font-size:30px;color:var(--accent)}
.hg-steps h3{font-size:21px;line-height:1.15;margin-top:4px}
.hg-steps p{font-size:15px}
.hg-n{position:absolute;top:18px;right:20px;font-family:Fredoka;font-weight:600;font-size:15px;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:var(--bg2);color:var(--ink)}
.hg-coins{display:flex;gap:6px;margin-top:auto;padding-top:8px}
.hg-coins img{width:28px;height:28px}

.hg-bot{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-top:16px;padding:18px 22px 18px 14px;border-radius:var(--r-shell);background:var(--tint);box-shadow:0 0 0 1px var(--hair)}
.hg-bot img{width:96px;height:auto}
.hg-bot h3{font-size:22px}
.hg-bot p{margin-top:4px}

.hg-faq .faq{max-width:760px}

@media (max-width:900px){
  .hg-sizes{grid-template-columns:repeat(2,1fr)}
  .hg-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hg-hero{padding-top:8px}
  .hg-hero .hg-art .core{aspect-ratio:1/1}
  .hg-hero .hg-art .core img{width:88%}
}
@media (max-width:600px){
  .hg-hero h1{font-size:44px}
  .hg-hero .cta .btn{flex:1 1 100%;justify-content:space-between}
  .hg-hero .cta .btn-ghost{justify-content:center;gap:8px}
  .hg-size{padding:16px 14px 14px}
  .hg-price b{font-size:24px}
  .hg-price{gap:6px;flex-wrap:wrap}
  .hg-add{font-size:13px}
  .hg-steps{grid-template-columns:1fr}
  .hg-steps .core{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;padding:18px 18px 18px 16px}
  .hg-steps .core > i{grid-row:span 2;font-size:28px;align-self:start;margin-top:2px}
  .hg-steps h3{margin-top:0;padding-right:36px}
  .hg-steps .hg-coins{grid-column:2}
  .hg-after .btn{flex:1 1 100%;justify-content:space-between}
  .hg-after .btn-ghost{justify-content:center}
  .hg-bot{grid-template-columns:auto 1fr;padding:18px}
  .hg-bot img{width:72px}
  .hg-bot .btn{grid-column:1/-1;justify-content:space-between}
  details p{padding-right:16px}
}