/* ==========================================================================
   css/site.css — the site pages: nav, footer, home, plans, BlockPoints packs.
   Loaded last; uses the tokens in css/style.css. Rules (docs/REDESIGN-SPEC.md):
   Clash Display 700 headings (H1 >= 64px, H2 >= 48px, card titles 28px),
   IBM Plex Mono body at 16px / 1.75, heading letter spacing 0.02em,
   sections >= 120px top and bottom, >= 80px between content blocks,
   40px between paragraph blocks. Accent only for CTAs, active states and
   key numbers. Gold and Diamond use their Minecraft colours.
   ========================================================================== */

/* ---- shell: nav on secondary, page on primary ---- */
#site{ background:var(--primary); }
.site-nav{ background:var(--bg-2); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--border-soft); padding:14px clamp(16px,4vw,48px); gap:24px; }
.site-brand{ font-family:var(--font-display); font-size:20px; letter-spacing:.02em; }
.site-links > a, .site-menu-btn{ font-size:14px; font-weight:500; }
.site-links > a.active{ color:var(--accent-strong); }
.site-menu-panel a b{ font-size:14px; }
.site-account{ font-size:14px; font-weight:500; }
.site-nav .btn-primary-link{ font-size:14px; font-weight:600; padding:10px 18px; }
.site-foot{ background:var(--bg-2); border-top:1px solid var(--border-soft); padding:80px clamp(16px,4vw,48px) 40px; font-size:14px; line-height:1.75; }
.site-foot-cols{ gap:40px; margin-bottom:40px; }
.site-foot-cols b{ font-size:14px; }

/* ---- layout + type ---- */
.hx-wrap{ max-width:1320px; margin:0 auto; padding:0 clamp(16px,4vw,48px); }
.hx-hero, .hx-section{ padding:120px 0; }
.hx-section{ border-top:1px solid var(--border-soft); }
.hx-hero p, .hx-section p{ font-size:16px; line-height:1.75; }
.hx-h1{ font:700 clamp(64px, 8vw, 112px)/1.02 var(--font-display); letter-spacing:.02em; margin:0; max-width:13ch; }
.hx-h2{ font:700 clamp(48px, 5.2vw, 72px)/1.08 var(--font-display); letter-spacing:.02em; margin:0; max-width:18ch; }
.hx-section h3{ font:700 28px/1.2 var(--font-display); letter-spacing:.02em; margin:0; }
.hx-head{ display:flex; flex-direction:column; gap:40px; margin-bottom:80px; }
.hx-lead{ margin:0; color:var(--text-dim); max-width:62ch; }

/* ---- hero: the thunderstorm ---- */
.hx-hero{ background:
    radial-gradient(ellipse 70% 55% at 50% -12%, rgba(139,61,255,0.30), transparent 62%),
    radial-gradient(ellipse 40% 35% at 88% 6%, rgba(139,61,255,0.14), transparent 70%),
    var(--primary); }
.hx-copy{ display:flex; flex-direction:column; gap:40px; }
.hx-eyebrow{ margin:0; font-size:14px !important; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
.hx-sub{ margin:0; font-size:20px !important; line-height:1.75; color:var(--text-dim); max-width:48ch; }
.hx-cta-row{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.hx-cta{ display:inline-flex; align-items:center; gap:12px; background:var(--accent); color:var(--text-on-accent); font:600 16px/1 var(--font-body);
  padding:20px 32px; border-radius:var(--r-lg); text-decoration:none; box-shadow:var(--glow-sm); transition:box-shadow .2s var(--ease), transform .12s var(--ease); }
.hx-cta::after{ content:'→'; transition:transform .2s var(--ease); }
.hx-cta:hover{ box-shadow:0 0 40px rgba(139,61,255,0.75); }
.hx-cta:hover::after{ transform:translateX(4px); }
.hx-cta:active{ transform:scale(.98); }
.hx-note{ margin:0; font-size:14px !important; color:var(--text-dim); }

/* ---- product visual slot ---- */
.hx-slot{ margin-top:80px; display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(280px, 1fr); gap:80px; align-items:start; }
.hx-stage{ margin:0; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; }
.hx-stage canvas{ display:block; width:100%; height:auto; aspect-ratio:8 / 5; }
.hx-stage-cap{ display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding:20px 24px; border-top:1px solid var(--border-soft); font-size:14px; }
.hx-tier{ color:var(--text-dim); }
.hx-cap-link{ color:var(--accent-strong); font-weight:600; text-decoration:none; }
.hx-cap-link:hover{ text-decoration:underline; }
.hx-feats{ display:flex; flex-direction:column; }
.hx-feat{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; text-align:left; white-space:normal;
  padding:14px 0 14px 22px; background:none; border:0; border-left:2px solid var(--border); border-radius:0; color:var(--text-dim); font-size:14px; line-height:1.75; }
.hx-feat:hover{ background:none; border-color:var(--border-strong); }
.hx-feat b{ font-size:16px; font-weight:600; color:var(--text); }
.hx-feat span{ display:none; }
.hx-feat.active{ border-left-color:var(--accent); }
.hx-feat.active b{ color:var(--accent-strong); }
.hx-feat.active span{ display:block; }
.hx-feat:focus-visible{ outline-offset:-2px; }

/* ---- three steps ---- */
.hx-steps{ list-style:none; margin:80px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:80px; }
.hx-steps li{ display:flex; flex-direction:column; gap:16px; padding-top:40px; border-top:1px solid var(--border); }
.hx-steps p{ margin:0; color:var(--text-dim); }
.hx-step-n{ font-size:14px; font-weight:600; letter-spacing:.12em; color:var(--accent-strong); }

/* ---- pricing ---- */
.hx-storm{ background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(139,61,255,0.14), transparent 70%), var(--primary); }
#site-main .plan-interval{ justify-content:flex-start; margin:0 0 40px; }
#site-main .plans-grid.plans-3{ max-width:none; gap:80px; }
.plan-interval .seg-btn{ font-size:14px; padding:8px 16px; }
.plan-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl); padding:40px 32px; gap:24px; }
.plan-name{ font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:.02em; line-height:1.2; flex-wrap:wrap; }
.plan-name .icon{ width:22px; height:22px; }
.plan-price{ font-family:var(--font-display); font-size:48px; font-weight:700; line-height:1.1; letter-spacing:.02em; }
.plan-price small{ font-family:var(--font-body); font-size:14px; font-weight:400; letter-spacing:0; color:var(--text-dim); -webkit-text-fill-color:var(--text-dim); }
.plan-price .plan-sub{ margin-top:8px; line-height:1.6; }
.plan-pitch{ font-size:15px; line-height:1.75; }
.plan-list{ gap:12px; }
.plan-list li{ font-size:14px; line-height:1.75; }
.plan-list li .icon{ color:var(--text-dim); margin-top:5px; }
.plan-card .plan-cta button{ padding:14px; font-size:14px; }
.plan-note{ font-size:13px; margin-top:24px; }
.plan-tag{ font-family:var(--font-body); font-size:11px; letter-spacing:0; }
/* Gold: Minecraft gold border and name */
.plan-card.pro:not(.max){ border:2px solid var(--gold); background:var(--bg-2); box-shadow:none; }
.plan-card.pro:not(.max) .plan-name, .plan-card.pro:not(.max) .plan-price, .plan-card.pro:not(.max) .plan-list li .icon{ color:var(--gold); }
/* Diamond: Minecraft diamond border and name, slowly shimmering */
.plan-card.max{ border:2px solid transparent; box-shadow:none;
  background:linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
             linear-gradient(110deg, var(--diamond-1), var(--diamond-3), var(--diamond-2), var(--diamond), var(--diamond-1)) border-box;
  background-size:100% 100%, 300% 100%; animation:bp-diamond 6s linear infinite; }
.plan-card.max .plan-name, .plan-card.max .plan-price{
  background:linear-gradient(110deg, var(--diamond-1), var(--diamond-3), var(--diamond-2), var(--diamond), var(--diamond-1));
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:bp-diamond-text 6s linear infinite; }
.plan-card.max .plan-name .icon{ color:var(--diamond-2); }
.plan-card.max .plan-name .plan-tag{ -webkit-text-fill-color:var(--text-on-accent); }
.plan-card.max .plan-list li .icon{ color:var(--diamond-2); }
@keyframes bp-diamond{ from{ background-position:0 0, 0% 50%; } to{ background-position:0 0, 300% 50%; } }
@keyframes bp-diamond-text{ from{ background-position:0% 50%; } to{ background-position:300% 50%; } }
.plan-card.current{ outline:2px solid var(--accent); outline-offset:4px; }

/* ---- BlockPoints packs ---- */
.hx-packs{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:80px 40px; }
.hx-pack{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:40px 20px 24px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl); }
.hx-pack.first{ border-color:var(--accent-border); }
.hx-pack-badge{ position:absolute; top:-13px; left:20px; background:var(--accent); color:var(--text-on-accent); font-size:11px; font-weight:600; padding:5px 10px; border-radius:999px; box-shadow:var(--glow-sm); white-space:nowrap; }
.hx-pack-bp{ font:700 40px/1 var(--font-display); letter-spacing:.02em; color:var(--accent-strong); }
.hx-pack-bp small{ font:600 14px var(--font-body); margin-left:6px; letter-spacing:0; }
.hx-pack-split{ font-size:13px; color:var(--text-dim); }
.hx-pack-price{ font-size:18px; font-weight:600; color:var(--text); margin:12px 0 16px; }
.hx-pack-price s{ font-size:14px; font-weight:400; color:var(--text-faint); margin-left:6px; }
.hx-pack-buy{ margin-top:auto; width:100%; justify-content:center; padding:12px; font-size:14px; background:transparent; border:1px solid var(--accent-border); color:var(--accent-strong); }
.hx-pack-buy:hover:not(:disabled){ background:var(--accent); border-color:var(--accent); color:var(--text-on-accent); box-shadow:var(--glow-sm); }
.hx-earn{ margin:80px 0 0; color:var(--text-dim); max-width:72ch; }
.hx-earn a{ color:var(--accent-strong); font-weight:600; text-decoration:none; margin-left:6px; }
.hx-earn a:hover{ text-decoration:underline; }

/* ---- every other site page: one page shell (js/35-router.js pageShell) ---- */
.page{ max-width:1320px; padding:120px clamp(16px,4vw,48px); }
.page-head{ margin-bottom:80px; gap:40px; }
.page-icon{ display:none; }
.page-title h1{ font:700 clamp(64px, 7vw, 96px)/1.05 var(--font-display); letter-spacing:.02em; flex-wrap:wrap; }
.page-title h1 .pro-chip{ font-size:12px; padding:4px 10px; }
.page-title p{ margin:40px 0 0; font-size:18px; line-height:1.75; max-width:60ch; }
.pg-section{ margin-top:120px; padding-top:120px; border-top:1px solid var(--border-soft); }
.page .hx-wrap{ max-width:none; padding:0; }

/* settings, account, projects */
.settings-layout{ gap:80px; max-width:1100px; }
.settings-tab{ font-size:14px; padding:10px 14px; }
.settings-tab.active{ color:var(--accent-strong); }
.settings-panel h2, .settings-sec h2{ font:700 28px/1.2 var(--font-display); letter-spacing:.02em; margin:0 0 24px; }
.settings-sec{ margin-bottom:80px; }
.settings-row{ padding:20px 24px; border-color:var(--border); border-radius:var(--r-xl); margin-bottom:12px; }
.settings-row b{ font-size:15px; }
.settings-row span{ font-size:13px; line-height:1.7; }
#site-main .account-panel h3{ font:700 22px/1.2 var(--font-display); letter-spacing:.02em; text-transform:none; color:var(--text); margin:40px 0 0 !important; }
#site-main .account-panel{ max-width:720px; gap:16px; }
.empty-page{ padding:80px 16px; gap:24px; font-size:16px; line-height:1.75; }
.page-body.tool-surface{ border-color:var(--border); padding:clamp(20px, 3vw, 40px); }
@media (max-width:760px){ .settings-layout{ gap:40px; } }

/* compare table (/pricing) */
.pricing-compare{ margin-top:80px; font-size:14px; line-height:1.6; }
.pricing-compare th, .pricing-compare td{ padding:16px; border-top:1px solid var(--border-soft); }
.pricing-compare th{ font-size:12px; letter-spacing:.1em; color:var(--text-faint); }
.pricing-compare th:nth-child(3){ color:var(--gold); }
.pricing-compare th:nth-child(4){ color:var(--diamond-2); }
.pricing-compare td.v.pro{ color:var(--text); font-weight:500; }
#site-main .auth-legal{ margin-top:40px; font-size:13px; line-height:1.75; max-width:96ch; }

/* questions */
.faq{ max-width:none; margin:0; }
.faq h2{ text-align:left; }
.faq-list{ max-width:900px; margin-top:80px; border-top:1px solid var(--border); }
.faq details{ background:none; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:28px 0; margin:0; }
.faq summary{ display:flex; justify-content:space-between; gap:24px; font-size:18px; font-weight:600; line-height:1.5; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--accent-strong); font-weight:400; }
.faq details[open] summary::after{ content:'−'; }
.faq details p{ margin:24px 0 0; font-size:16px; line-height:1.75; max-width:72ch; }

/* ---- motion: one staggered reveal when the home page loads ---- */
#site-main.page-enter > .hx-hero, #site-main.page-enter > .hx-section{ animation:none; }
#site-main.page-enter .hx-copy > *, #site-main.page-enter .hx-slot{ animation:bp-rise .7s var(--ease-out) both; }
#site-main.page-enter .hx-copy > :nth-child(2){ animation-delay:.08s; }
#site-main.page-enter .hx-copy > :nth-child(3){ animation-delay:.16s; }
#site-main.page-enter .hx-copy > :nth-child(4){ animation-delay:.24s; }
#site-main.page-enter .hx-slot{ animation-delay:.36s; }

/* ---- responsive ---- */
@media (max-width:1180px){ .hx-packs{ grid-template-columns:repeat(3, minmax(0, 1fr)); } #site-main .plans-grid.plans-3{ gap:40px; } }
@media (max-width:980px){ .hx-slot{ grid-template-columns:1fr; } }
@media (max-width:900px){ .plans-grid.plans-3{ grid-template-columns:minmax(0, 1fr); } #site-main .plans-grid.plans-3{ max-width:560px; gap:80px; } }
@media (max-width:760px){ .hx-steps{ grid-template-columns:1fr; } .hx-packs{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px 16px; } .hx-pack-bp{ font-size:32px; } .hx-pack{ padding:36px 14px 20px; } .hx-pack-badge{ left:12px; font-size:10px; padding:4px 8px; } }
@media (max-width:640px){ .hx-sub{ font-size:18px !important; } .hx-cta{ width:100%; justify-content:center; } .plan-card{ padding:32px 24px; } }