/* ==========================================================================
   像素绘 Store — Editorial Light Theme
   No cards · No purple · Teal + Copper accents · Open editorial layout
   ========================================================================== */

:root {
  --bg:            #f9f7f4;
  --bg-alt:        #f0ece6;
  --bg-accent:     #e8e3db;
  --panel:         rgba(255,255,255,0.80);
  --panel-strong:  #ffffff;
  --text:          #1a1a1a;
  --text-secondary:#555555;
  --muted:         #888888;
  --line:          rgba(0,0,0,0.08);
  --line-strong:   rgba(0,0,0,0.15);

  --teal:          #0d9488;
  --teal-soft:     rgba(13,148,136,0.10);
  --teal-deep:     #0f766e;
  --copper:        #c2410c;
  --copper-soft:   rgba(194,65,12,0.08);
  --warm:          #d97706;
  --warm-soft:     rgba(217,119,6,0.08);
  --mint:          #059669;
  --mint-soft:     rgba(5,150,105,0.10);
  --rose:          #be123c;
  --rose-soft:     rgba(190,18,60,0.08);
  --danger:        #dc2626;

  /* Legacy compat for app.js */
  --coral:         var(--copper);
  --coral-soft:    var(--copper-soft);
  --sky:           var(--teal);
  --sky-soft:      var(--teal-soft);
  --gold:          var(--warm);

  --shadow:        0 1px 3px rgba(0,0,0,0.04);
  --shadow-strong: 0 8px 30px rgba(0,0,0,0.08);
  --radius-xl:     20px;
  --radius-lg:     16px;
  --radius-md:     12px;
  --radius-sm:     8px;
  --content-width: 1100px;
}

/* ─── Reset ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;min-height:100vh;overflow-x:hidden;
  font-family:"Instrument Sans","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;line-height:1.6;
  color:var(--text);
  background:var(--bg);
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}

/* ─── Page Shell ──────────────────────────────────────────────────────── */
.page-shell{position:relative;min-height:100vh;padding-bottom:0}

.page-shell::before{display:none}  /* kill old grid overlay */

/* ─── Layout ──────────────────────────────────────────────────────────── */
.topbar,.hero,.section,.success-layout{
  width:min(calc(100% - 32px),var(--content-width));
  margin:0 auto;
}

/* =======================================================================
   TOPBAR – thin line, no glass
   ======================================================================= */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  margin-top:0;
}

.brand{display:inline-flex;align-items:center;gap:10px}

.brand-mark{
  width:36px;height:36px;border-radius:10px;display:block;
  object-fit:cover;border:none;box-shadow:none;background:transparent;
}

.brand-text{display:flex;flex-direction:column;gap:1px}

.brand-text strong,
.hero h1,.section h2,
.success-panel h1,.result-header h2,
.checkout-summary h3,.product-title{
  margin:0;
  font-family:"Fraunces",serif;
  letter-spacing:-0.03em;
}

.brand-text strong{font-size:1.1rem;line-height:1;color:var(--text)}
.brand-text span{color:var(--muted);font-size:0.84rem;letter-spacing:0.02em}

.topbar-nav{display:flex;align-items:center;gap:6px}

.topbar-nav a,.text-link{
  display:inline-flex;align-items:center;
  min-height:36px;padding:0 14px;
  border:none;border-radius:999px;
  background:transparent;
  color:var(--text-secondary);font-size:0.94rem;font-weight:500;
  transition:color 160ms ease,background 160ms ease;
}

.topbar-nav a:hover,.text-link:hover{
  color:var(--text);background:var(--bg-alt);
}

.topbar-nav .product-group-nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin:0;
}

.topbar-nav .product-group-nav-item{
  display:inline-flex;
  align-items:center;
  gap:2px;
}

.topbar-nav .product-group-nav-link{
  min-height:36px;
  padding:0 12px;
  border:none;
  border-radius:999px;
  color:var(--text-secondary);
  font-size:0.9rem;
  font-weight:600;
}

.topbar-nav .product-group-nav-link:hover{
  color:var(--text);
  background:var(--bg-alt);
}

.topbar-nav .product-group-nav-info{
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--line);
  color:var(--teal);
  font-size:0.82rem;
  font-weight:700;
}

.topbar-nav .product-group-nav-info:hover{
  color:var(--text);
  border-color:var(--teal);
}

/* ─── Muted text ──────────────────────────────────────────────────────── */
.brand-text span,.topbar-nav a,.text-link,.hero-text,.section-copy,
.summary-kicker,.summary-eta,.summary-footnote,.status-banner,
.success-intro,.success-caption,.timeline p,.status-card span,
.panel-note,.license-card-body p,.turnstile-head span,.order-card-title p,
.order-code-empty,.empty-state,.product-note,.price-hint,.form-intro,
.order-search-head p,.order-results-note{color:var(--muted)}

/* =======================================================================
   HERO — full-width band, no card
   ======================================================================= */
.hero{padding:64px 0 48px}
.compact-hero{padding:48px 0 24px}
.store-hero{padding-bottom:22px}
.products-section{padding-top:22px}

.hero-grid{display:grid;grid-template-columns:1fr;gap:0}

.store-hero .hero-copy{width:100%;max-width:none}

/* Remove all card-like styling from hero-copy */
.hero-copy,
.hero-panel,
.feature-card,
.checkout-summary,
.checkout-form,
.success-panel,
.result-panel,
.status-card,
.license-card,
.order-card{
  border:none;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  animation:riseIn 600ms ease both;
}

.hero-copy,.hero-panel{
  position:relative;overflow:visible;border-radius:0;
}

.hero-copy{
  padding:0;background:transparent;border:none;
}

.hero-copy::after{display:none}

.hero-panel{
  padding:28px;color:#fff;border-radius:var(--radius-xl);
  background:linear-gradient(150deg,#134e4a 0%,#0f766e 50%,#115e59 100%);
  animation-delay:90ms;border:none;
}

.hero-panel::before,.hero-panel::after{display:none}

.hero-panel-copy,.hero-stat-grid,.hero-panel-art{position:relative;z-index:1}

.hero-panel-art{display:flex;align-items:center;justify-content:center;margin-bottom:24px}

.hero-panel-logo-frame{
  display:grid;place-items:center;width:160px;height:160px;padding:20px;
  border-radius:32px;border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.08);
  box-shadow:0 20px 50px rgba(0,0,0,0.18);
}

.hero-panel-logo{width:100%;height:100%;display:block;object-fit:contain;border-radius:24px}

.hero-panel-label,.stage-kicker,.product-feature-index,.feature-step,.summary-badge{
  display:inline-flex;align-items:center;min-height:28px;padding:0 10px;
  border-radius:999px;font-size:0.78rem;font-weight:700;
  letter-spacing:0.10em;text-transform:uppercase;
}

.hero-panel-label{color:rgba(255,255,255,0.60);background:rgba(255,255,255,0.08)}

.hero-panel-copy strong{display:block;margin-top:14px;max-width:14ch;font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.02;letter-spacing:-0.04em}
.hero-panel-copy p{margin:12px 0 0;max-width:34ch;color:rgba(255,255,255,0.65);line-height:1.65}

.hero-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}

.hero-stat{
  padding:12px;border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.06);
}
.hero-stat span,.hero-mini-pill{display:inline-flex;align-items:center;gap:6px;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase}
.hero-stat span{color:rgba(255,255,255,0.50)}
.hero-stat strong{display:block;margin-top:8px;font-size:0.95rem;line-height:1.35}

/* ─── Eyebrow ─────────────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:12px;
  color:var(--teal);font-size:0.84rem;
  letter-spacing:0.10em;text-transform:uppercase;font-weight:700;
}

.eyebrow::before{
  content:"";width:20px;height:2px;
  background:var(--teal);border-radius:1px;
}

/* ─── Hero Headlines ──────────────────────────────────────────────────── */
.hero h1{
  max-width:16ch;
  font-size:clamp(3rem,7vw,5.2rem);
  line-height:0.94;
  color:var(--text);
}

.hero-text,.checkout-summary p,.success-intro,.timeline p,
.license-card-body p,.product-note,.panel-note{line-height:1.72}

.hero-text{margin:20px 0 0;max-width:50ch;font-size:1.14rem;color:var(--text-secondary)}

.store-hero .hero-copy::after{display:none}
.store-hero .hero-copy h1,.store-hero .hero-text{max-width:none}
.store-hero .hero-actions{width:100%}

/* ─── Action Rows ─────────────────────────────────────────────────────── */
.hero-actions,.hero-pills,.checkout-highlights,.success-actions,.hero-mini-strip{
  display:flex;flex-wrap:wrap;gap:10px;
}
.hero-actions{margin-top:32px}
.product-group-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.product-group-nav-link{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  color:var(--text-secondary);
  font-size:0.9rem;
  font-weight:800;
}
.product-group-nav-link:hover{
  color:var(--teal);
  border-bottom-color:var(--teal);
}
.hero-pills,.hero-mini-strip{margin-top:18px}

.hero-pills span,.hero-mini-pill,.checkout-highlights span{
  display:inline-flex;align-items:center;min-height:38px;padding:0 14px;
  border-bottom:1px solid var(--line);
  border-radius:0;background:transparent;
  color:var(--text-secondary);font-size:0.88rem;
}

/* =======================================================================
   SECTION
   ======================================================================= */
.section{padding-top:48px}

.feature-band{padding-top:10px}

.feature-band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.feature-card{
  padding:0;border-radius:0;border:none;background:transparent;
  border-top:2px solid var(--teal);padding-top:20px;
}
.feature-card:nth-child(2){animation-delay:80ms}
.feature-card:nth-child(3){animation-delay:160ms}

.feature-step{color:var(--teal);background:var(--teal-soft)}

.feature-card h3,.order-search-head h2{margin:14px 0 0;font-size:1.36rem;line-height:1.1}
.feature-card p,.order-search-head p,.order-results-note,.form-intro,.panel-note{margin:10px 0 0}

.section-head{
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.products-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.product-group-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
}

.product-group-filter-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
  font:inherit;
  font-size:0.9rem;
  font-weight:700;
  cursor:pointer;
  transition:color 160ms ease,border-color 160ms ease,background 160ms ease;
}

.product-group-filter-button:hover,
.product-group-filter-button.is-active{
  color:var(--text);
  border-color:var(--teal);
  background:var(--teal-soft);
}

.section-copy{margin:8px 0 0;max-width:56ch;color:var(--text-secondary)}

.is-hidden{display:none}

.section h2,.success-panel h1,.result-header h2{
  font-size:clamp(2rem,3.6vw,2.8rem);line-height:1;
}

/* =======================================================================
   PRODUCT GRID / CARDS — no cards, open layout
   ======================================================================= */
.product-grid,.checkout-layout,.success-layout,.lookup-layout,
.status-grid,.form-grid,.order-meta-grid,.order-results-summary,
.summary-mini-list{display:grid}

.product-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}

.product-group-list{
  grid-template-columns:1fr;
  gap:34px;
}

.product-group{
  display:grid;
  gap:18px;
}

.product-group-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.product-group-head h3{
  margin:0;
  font-family:"Fraunces",serif;
  font-size:1.45rem;
  line-height:1.08;
}

.product-group-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.product-group-intro-link{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--teal);
  font-size:0.84rem;
  font-weight:800;
}

.product-group-intro-link:hover{
  color:var(--text);
  border-color:var(--teal);
  background:var(--teal-soft);
}

.product-group-head span{
  color:var(--muted);
  font-size:0.9rem;
}

.product-group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}

.product-loading-panel{
  grid-column:1/-1;position:relative;min-height:280px;
  display:grid;place-items:center;text-align:center;gap:14px;
  padding:48px 24px;overflow:hidden;
  background:linear-gradient(135deg,rgba(31,18,68,0.86),rgba(10,197,209,0.14)) !important;
  border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-xl);
  box-shadow:0 24px 70px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.12);
}
.product-loading-panel::before{
  content:"";position:absolute;inset:-35%;
  background:conic-gradient(from 180deg,transparent,rgba(0,242,254,0.18),transparent,rgba(240,147,251,0.16),transparent);
  animation:productLoadSweep 3.8s linear infinite;
}
.product-loading-panel>*{position:relative;z-index:1}
.product-loading-panel h3{margin:0;font-size:clamp(1.8rem,4vw,3rem);line-height:1}
.product-loading-panel p{margin:0;color:var(--text-secondary);font-size:1rem}
.product-loading-orbit{
  width:78px;height:78px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 0 34px rgba(0,242,254,0.24),inset 0 0 22px rgba(0,242,254,0.12);
}
.product-loading-orbit::before{
  content:"";display:block;width:18px;height:18px;margin:6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 22px var(--teal);
  transform-origin:33px 33px;animation:productLoadOrbit 1.2s linear infinite;
}
.product-loading-error{background:rgba(95,24,48,0.52) !important}

@keyframes productLoadSweep{to{transform:rotate(360deg)}}
@keyframes productLoadOrbit{to{transform:rotate(360deg)}}

.product-card{
  position:relative;display:grid;gap:16px;
  padding:32px 0;
  border:none;border-radius:0;background:transparent;
  border-top:2px solid var(--line-strong);
  cursor:pointer;backdrop-filter:none;overflow:visible;
  transition:border-color 200ms ease;
}

.product-card::before{display:none}

.product-card:hover,.product-card.selected{
  border-top-color:var(--teal);
  transform:none;box-shadow:none;
}

.product-card.is-featured:hover,.product-card.is-featured.selected{
  border-top-color:var(--copper);box-shadow:none;
}

.product-card:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

.product-card-top,.price-row,.product-card-footer,.price-copy{position:relative;z-index:1}
.product-card-top{display:grid;gap:10px}

.product-chip-row,.price-row,.summary-price,.result-header,
.order-card-head,.summary-head{
  display:flex;align-items:start;justify-content:space-between;gap:12px;
}
.product-chip-row{flex-wrap:wrap}

/* ─── Tags ────────────────────────────────────────────────────────────── */
.product-tag,.status-pill,.success-badge,.status-chip,.product-chip{
  display:inline-flex;align-items:center;min-height:28px;width:fit-content;
  padding:0 12px;border-radius:999px;font-size:0.8rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
}

.product-tag,.status-pill,.product-chip{background:var(--bg-alt);color:var(--text-secondary)}
.product-chip.featured{color:var(--teal);background:var(--teal-soft)}

.success-badge{color:var(--teal);background:var(--teal-soft)}
.success-badge[data-state="error"],.success-badge[data-state="failed"]{color:var(--danger);background:var(--rose-soft)}
.success-badge[data-state="paid"]{color:#92400e;background:var(--warm-soft)}
.success-badge[data-state="fulfilled"]{color:var(--mint);background:var(--mint-soft)}
.success-page #successIntro[data-state="failed"],
.success-page #etaDisplay[data-state="failed"],
.success-page #etaHint[data-state="failed"],
.success-page #paymentStatus[data-state="failed"],
.success-page #licenseMessage[data-state="failed"]{
  color:var(--danger);
}

.status-chip{color:var(--text-secondary);background:var(--bg-alt)}
.status-chip[data-state="fulfilled"]{color:var(--mint);background:var(--mint-soft)}
.status-chip[data-state="failed"]{color:var(--danger);background:var(--rose-soft)}
.status-chip[data-state="paid"]{color:#92400e;background:var(--warm-soft)}

.product-card[data-tone="coral"] .product-tag,
.product-card[data-tone="coral"] .price-value{color:var(--copper)}

.product-card[data-tone="sky"] .product-tag,
.product-card[data-tone="sky"] .price-value,
.checkout-summary[data-tone="sky"] .summary-price strong,
.checkout-summary[data-tone="sky"] .summary-badge{color:var(--teal)}

.product-title{font-size:1.6rem;line-height:1.06}

.product-desc{margin:0;min-height:44px;color:var(--text-secondary);line-height:1.65;font-size:1rem}
.product-kicker{margin:0;font-size:0.96rem;color:var(--muted)}

.price-row{align-items:end}
.price-copy{display:grid;gap:4px}
.price-value{font-size:2.4rem;line-height:1;font-weight:700}
.price-unit{color:var(--muted)}
.price-hint{max-width:13ch;text-align:right;font-size:0.88rem;line-height:1.5}

.product-meta{margin:0;padding:0;list-style:none;display:grid;gap:6px}

.product-meta li,.cancel-points li{
  display:flex;align-items:start;gap:8px;font-size:1rem;line-height:1.6;color:var(--text-secondary);
}

.product-meta li::before,.cancel-points li::before{
  content:"→";flex:0 0 auto;color:var(--teal);font-weight:700;margin-top:0;
  width:auto;height:auto;border-radius:0;background:none;
}

.product-card-footer{display:grid;gap:10px;margin-top:auto}

.product-note{margin:0;padding:10px 0;border-radius:0;background:transparent;border-top:1px solid var(--line)}

/* =======================================================================
   BUTTONS
   ======================================================================= */
.button{
  display:inline-flex;justify-content:center;align-items:center;
  min-height:46px;padding:0 24px;
  border:0;border-radius:999px;cursor:pointer;
  font-weight:600;font-size:0.96rem;
  transition:transform 120ms ease,opacity 120ms ease,box-shadow 180ms ease;
}

.button:hover{transform:translateY(-1px)}

.button-primary{
  color:#fff;
  background:var(--teal);
  box-shadow:0 4px 16px rgba(13,148,136,0.24);
}

.button-primary:hover{box-shadow:0 8px 28px rgba(13,148,136,0.30)}

.button-pay{
  background:linear-gradient(135deg,var(--teal-deep),var(--teal));
  box-shadow:0 4px 16px rgba(13,148,136,0.28);
  letter-spacing:0.06em;font-weight:800;
}

.button-secondary{
  color:var(--text);background:transparent;
  border:1px solid var(--line-strong);box-shadow:none;
}

.button-secondary:hover{
  border-color:var(--teal);color:var(--teal);background:var(--teal-soft);
}

.button[disabled]{opacity:0.45;cursor:not-allowed;transform:none}

.full-width{width:100%}
.form-actions{display:flex;align-items:center;gap:10px}
.checkout-back-button{white-space:nowrap}
.mobile-only{display:none}

/* =======================================================================
   CHECKOUT — open layout, no cards
   ======================================================================= */
.checkout-layout,.success-layout,.lookup-layout{
  grid-template-columns:minmax(300px,0.9fr) minmax(0,1.1fr);
  gap:40px;align-items:start;
}

.order-lookup-layout{grid-template-columns:minmax(300px,0.8fr) minmax(0,1.2fr)}

.checkout-summary,.checkout-form,.success-panel,.result-panel{
  position:relative;padding:0;border-radius:0;
  border:none;background:transparent;box-shadow:none;
}

.checkout-summary{
  position:sticky;top:80px;display:grid;gap:12px;
  padding:32px 0;border-top:2px solid var(--teal);
}

.checkout-summary::after,.order-search-card::before,.order-results-panel::before{display:none}

.summary-head{margin-bottom:0}

.checkout-summary .status-pill{color:var(--teal);background:var(--teal-soft)}
.summary-badge{color:var(--text-secondary);background:var(--bg-alt)}

.checkout-summary h3{font-size:1.6rem;line-height:1.06}
.checkout-summary p{margin:0}

.checkout-summary .summary-price strong{font-size:2.6rem;line-height:1;color:var(--teal)}
.checkout-summary .summary-price span{color:var(--muted)}
.checkout-summary .summary-eta{margin:0;font-size:0.92rem}

.summary-footnote{padding:10px 0;border-radius:0;background:transparent;border-top:1px solid var(--line)}

.summary-mini-list{grid-template-columns:repeat(2,1fr);gap:10px}

.summary-mini-card{
  padding:12px 0;border:none;border-radius:0;background:transparent;
  border-bottom:1px solid var(--line);
}

.summary-mini-card span,.license-card label,.turnstile-head strong,.order-code-block label,.download-links-block label,.order-download-block label,.success-download-block label{display:block}
.summary-mini-card span{color:var(--muted);font-size:0.8rem}
.summary-mini-card strong{display:block;margin-top:6px;font-size:1.02rem}

/* ─── Checkout Form ───────────────────────────────────────────────────── */
.checkout-form,.order-search-card,.order-results-panel,.success-panel,.result-panel{overflow:visible}

.checkout-form,.order-search-card{
  display:grid;gap:0;background:transparent;border:none;
  padding-top:32px;border-top:1px solid var(--line);
}

.checkout-highlights{margin:0 0 16px}

.form-grid{grid-template-columns:repeat(2,1fr);gap:12px}

.form-field{display:grid;gap:5px;margin-bottom:14px}
.form-field span{font-size:0.96rem;color:var(--text-secondary);font-weight:500}

.form-field input{
  min-height:46px;width:100%;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--panel-strong);color:var(--text);outline:none;
  transition:border-color 160ms ease,box-shadow 160ms ease;
}

.form-field input::placeholder{color:var(--muted)}

.form-field input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft);
}

.turnstile-wrap{
  margin:8px 0 14px;padding:16px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--bg-alt);
}

.turnstile-head{margin-bottom:10px}
.turnstile-head strong{color:var(--text)}
.turnstile-box{min-height:70px}

.checkout-consent{
  display:flex;align-items:flex-start;gap:10px;
  margin:0 0 16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--bg-alt);color:var(--text-secondary);line-height:1.6;
}

.checkout-consent input{
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  accent-color:var(--teal);
}

.checkout-consent span{display:block}
.checkout-consent a{color:var(--teal);text-decoration:underline}

.turnstile-placeholder{
  display:grid;place-items:center;min-height:60px;padding:0 16px;
  border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  color:var(--muted);background:var(--panel-strong);text-align:center;
}

.status-banner{
  margin:4px 0 14px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--bg-alt);line-height:1.55;color:var(--text-secondary);
}

.status-banner[data-mode="ready"]{background:var(--teal-soft);color:var(--teal-deep)}
.status-banner[data-mode="loading"]{background:var(--warm-soft);color:#92400e}
.status-banner[data-mode="error"]{color:var(--danger);background:var(--rose-soft)}

/* =======================================================================
   PAYMENT METHODS
   ======================================================================= */
.payment-methods{
  margin-top:20px;padding:20px 0;
  border:none;border-radius:0;background:transparent;
  border-top:1px solid var(--line);
}

.payment-methods-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.payment-methods-head strong{display:block;font-size:1rem;color:var(--text)}
.payment-methods-head p{margin:4px 0 0;color:var(--muted);line-height:1.6}

.payment-method-pill,.payment-method-badge{
  display:inline-flex;align-items:center;min-height:28px;padding:0 12px;
  border-radius:999px;font-size:0.8rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
}

.payment-method-pill{color:var(--teal);background:var(--teal-soft)}

.payment-method-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:16px}

.payment-method-card{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:16px;align-items:start;padding:16px 0;
  border:0;border-radius:0;background:transparent;
}

.payment-method-card.is-hidden-by-mode{display:none}
.payment-method-card.is-disabled{opacity:0.65}
.payment-method-card+.payment-method-card{border-top:1px solid var(--line)}

.payment-method-copy h3{margin:10px 0 0;font-size:1.16rem}
.payment-method-badge{color:var(--copper);background:var(--copper-soft)}
.payment-method-badge.disabled{color:var(--muted);background:var(--bg-alt)}

.payment-method-body{display:contents}
.payment-method-action{grid-column:2;min-height:46px}

.payment-session{
  grid-column:1/-1;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  column-gap:16px;row-gap:10px;margin-top:2px;padding:12px 0 0;
  border-top:1px solid var(--line);background:transparent;
  border-radius:0;border-left:0;border-right:0;border-bottom:0;
}

.payment-session.is-hidden{display:none}
.payment-session-head{display:contents}
.payment-session-label{grid-column:1;color:var(--muted);font-size:0.94rem;line-height:1.5}
.payment-session-order{grid-column:2;font-size:1rem;font-weight:700;letter-spacing:0.04em;line-height:1.35}
.payment-link-button,.paypal-button-shell{grid-column:2}
.payment-link-button{justify-content:center}
.paypal-button-shell{min-height:46px;margin-top:0}

.payment-method-empty{
  margin-top:16px;padding:20px;
  border:1px dashed var(--line-strong);border-radius:var(--radius-md);
  background:var(--bg-alt);
}

.payment-method-empty-badge,.payment-method-meta-label{
  display:inline-flex;align-items:center;min-height:28px;width:fit-content;
  padding:0 12px;border-radius:999px;font-size:0.8rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);background:var(--bg-alt);
}

.payment-method-empty h3{margin:12px 0 0;font-size:1.18rem}
.payment-method-empty p,.payment-method-meta p{margin:8px 0 0;color:var(--muted);line-height:1.66}
.payment-method-empty-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.payment-method-meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* =======================================================================
   FOOTER — full-width band
   ======================================================================= */
.contact-grid,.site-footer-grid,.legal-layout{display:grid}
.contact-grid{grid-template-columns:repeat(3,1fr);gap:16px}

.contact-card,.legal-card{
  border:none;border-radius:0;background:transparent;box-shadow:none;
  backdrop-filter:none;animation:riseIn 600ms ease both;
  border-top:1px solid var(--line);padding-top:20px;
}

.contact-card{padding:20px 0}
.contact-card:nth-child(2),.legal-card:nth-child(2),.legal-card:nth-child(5){animation-delay:60ms}
.contact-card:nth-child(3),.legal-card:nth-child(3),.legal-card:nth-child(6){animation-delay:120ms}

.contact-label,.legal-kicker,.site-footer-title{
  display:inline-flex;align-items:center;min-height:26px;width:fit-content;
  padding:0 12px;border-radius:999px;font-size:0.8rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
}

.contact-label,.legal-kicker{color:var(--teal);background:var(--teal-soft)}

.contact-card h3,.legal-card h2{
  margin:12px 0 0;font-family:"Fraunces",serif;letter-spacing:-0.03em;line-height:1.08;
}
.contact-card h3{font-size:1.3rem}
.legal-card h2{font-size:1.4rem}
.contact-card p,.legal-card p{margin:10px 0 0;color:var(--muted);line-height:1.68}
.contact-card .text-link,.legal-card a{margin-top:14px}

.legal-page .hero-copy{max-width:none}
.legal-layout{grid-template-columns:repeat(2,1fr);gap:16px}
.legal-card{padding:20px 0}
.legal-card a{color:var(--teal)}

/* =======================================================================
   PRODUCT PAGE — open editorial
   ======================================================================= */
.product-hero{padding-top:48px}

.product-hero-shell{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,0.85fr);
  gap:40px;align-items:start;
}

.product-hero-copy,.product-stage,
.product-feature-card,.product-story-card,
.scenario-card,.product-cta-card{
  border:none;border-radius:0;background:transparent;
  box-shadow:none;backdrop-filter:none;
}

.product-hero-copy{padding:0}

.product-stage{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  padding:0;
}

.product-stage-card{
  min-height:140px;padding:20px 0;
  border-radius:0;border:none;background:transparent;
  border-top:2px solid var(--bg-accent);
  display:flex;flex-direction:column;gap:8px;
  transition:border-color 200ms ease;
}

.product-stage-card:hover{border-top-color:var(--teal)}

.stage-large{
  grid-column:span 2;min-height:160px;
  border-top-color:var(--teal);
}

.stage-kicker{color:var(--copper);background:var(--copper-soft)}

.product-stage-card strong,
.product-feature-card h3,.product-story-card h2,
.product-story-card h3,.scenario-card h3,
.product-cta-card h2{margin:0;font-family:"Fraunces",serif;letter-spacing:-0.03em}

.product-stage-card strong{color:var(--text);font-size:1.14rem}

.product-stage-card p,.product-feature-card p,
.product-story-card p,.scenario-card p,.product-cta-card p{
  margin:0;color:var(--muted);line-height:1.72;
}

.product-feature-grid,.product-scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}

.product-feature-card,.scenario-card{
  padding:28px 0;display:flex;flex-direction:column;gap:12px;
  border-top:2px solid var(--bg-accent);
  transition:border-color 200ms ease;
}

.product-feature-card:hover,.scenario-card:hover{border-top-color:var(--teal)}

.product-feature-index{color:var(--teal);background:var(--teal-soft)}

.product-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.product-story-card{
  padding:28px 0;display:flex;flex-direction:column;gap:12px;
  border-top:2px solid var(--bg-accent);
  transition:border-color 200ms ease;
}

.product-story-card:hover{border-top-color:var(--copper)}

.product-story-wide{
  grid-column:span 3;padding:40px 0;
  background:var(--bg-alt);border-top:none;
  border-radius:var(--radius-xl);padding:40px 36px;
  margin:-8px 0;
}

.product-cta-section{padding-top:16px}

.product-cta-card{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:40px 0;border-top:2px solid var(--teal);
}

.product-cta-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* =======================================================================
   SITE FOOTER
   ======================================================================= */
.site-footer{
  width:100%;margin:48px 0 0;padding:40px 0;
  border:none;border-radius:0;
  background:var(--bg-alt);box-shadow:none;backdrop-filter:none;
}

.site-footer-grid{
  width:min(calc(100% - 32px),var(--content-width));
  margin:0 auto;
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:24px;
}

.site-footer-title{color:var(--teal);background:var(--teal-soft)}
.site-footer p{margin:10px 0 0;color:var(--muted);line-height:1.7}

.site-footer a{display:block;margin-top:10px;color:var(--text-secondary);transition:color 160ms ease}
.site-footer a:hover{color:var(--teal)}
.site-footer-download-block{margin-top:14px}
.site-footer-download-block label{color:var(--muted);font-size:0.9rem}
.site-footer .download-link-list{margin-top:10px}
.site-footer .download-link-button{display:inline-flex;margin-top:0}

.paypal-button-shell.is-hidden{display:none}

/* =======================================================================
   SUCCESS / CANCEL
   ======================================================================= */
.success-shell{padding-top:8px}

.success-panel,.success-result-panel{background:transparent}

.success-panel-top{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:14px}
.success-caption{max-width:24ch;text-align:right}

.eta-panel,.timeline,.status-card,.license-card-body,.order-summary-stat,.order-meta-item{
  border:none;border-bottom:1px solid var(--line);background:transparent;
}

.eta-panel{margin-top:18px;padding:16px 0;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eta-copy span{color:var(--muted)}
.eta-copy strong,.status-card strong,.license-code{display:block;margin-top:6px;font-size:1.02rem;font-weight:700}

.eta-meter{margin-top:12px;height:6px;border-radius:999px;background:var(--bg-accent);overflow:hidden}

.eta-fill{
  width:14%;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--teal),var(--warm),var(--copper));
  transition:width 260ms ease;
}

.status-grid{margin-top:16px;grid-template-columns:repeat(3,1fr);gap:16px}
.status-card{padding:16px 0;border-radius:0;border-bottom:1px solid var(--line)}
.status-card span{color:var(--muted)}

.timeline{margin-top:18px;padding:18px 0;border-radius:0;display:grid;gap:14px;border-top:1px solid var(--line)}

.timeline-item{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px}
.timeline-item+.timeline-item::before{content:"";position:absolute;left:8px;top:-14px;width:2px;height:14px;background:var(--line)}

.timeline-item span{
  position:relative;width:18px;height:18px;margin-top:3px;
  border-radius:50%;border:2px solid var(--line-strong);background:var(--bg);
}
.timeline-item span::after{content:"";position:absolute;inset:3px;border-radius:50%;background:transparent}
.timeline-item.complete span::after{background:var(--mint)}
.timeline-item.active span::after{background:var(--warm)}
.timeline-item.pending-ready span::after{background:var(--teal)}
.timeline strong{display:block;margin-bottom:4px}

.success-actions{margin-top:22px}

.license-card{padding:0;border-radius:0;border:none}
.license-card.ready{box-shadow:none}
.license-card.locked{opacity:0.85}
.license-card-top{margin-bottom:10px;font-weight:600}
.license-card-body{padding:16px 0;border-radius:0;border-top:1px solid var(--line)}

.license-code,.order-code-item,.order-code-empty{
  margin-top:8px;padding:14px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--panel-strong);word-break:break-all;color:var(--text);
}
.license-code,.order-code-item{
  position:relative;
  border-color:rgba(0,242,254,0.42);
  background:
    linear-gradient(135deg, rgba(0,242,254,0.16), rgba(245,87,108,0.12)),
    rgba(255,255,255,0.06);
  color:#f8fdff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 1px rgba(0,242,254,0.08),
    0 12px 28px rgba(0,242,254,0.18);
}
.license-code{
  letter-spacing:0.08em;
  font-size:1.02rem;
  font-family:monospace;
  text-shadow:0 0 18px rgba(0,242,254,0.26);
}
.order-code-item{
  font-family:monospace;
  letter-spacing:0.05em;
}
.success-download-block{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.download-link-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.download-link-button{
  min-height:38px;
  padding:10px 16px;
  text-decoration:none;
  color:#fefefe !important;
  border:1px solid rgba(0,242,254,0.38) !important;
  background:linear-gradient(135deg, rgba(0,242,254,0.22), rgba(240,147,251,0.18)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 24px rgba(0,242,254,0.18),
    0 0 24px rgba(245,87,108,0.10);
}
.download-link-button:hover{
  color:#ffffff !important;
  border-color:rgba(0,242,254,0.7) !important;
  background:linear-gradient(135deg, rgba(0,242,254,0.34), rgba(245,87,108,0.26)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 14px 30px rgba(0,242,254,0.26),
    0 0 30px rgba(240,147,251,0.18);
}

.cancel-points{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.cancel-card{background:transparent}
.cancel-actions{display:grid;gap:10px;margin-top:16px}

/* =======================================================================
   ORDER LOOKUP
   ======================================================================= */
.order-results-panel{background:transparent}
.order-results-header{align-items:center}

.order-results-summary{grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 12px}
.order-summary-stat{padding:12px 0;border-radius:0;border-bottom:1px solid var(--line)}
.order-summary-stat span{display:block;color:var(--muted);font-size:0.8rem}
.order-summary-stat strong,.order-page-indicator{display:block}
.order-summary-stat strong{margin-top:6px;font-size:1.02rem;line-height:1.3}

.order-results-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}

.order-page-indicator{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;
  background:var(--teal-soft);color:var(--teal-deep);
  font-size:0.86rem;font-weight:600;
}

.order-results{display:grid;gap:0}

.order-card{
  padding:20px 0;border-radius:0;border:none;background:transparent;
  border-bottom:1px solid var(--line);
}

.order-card-title h3{margin:0;font-size:1.12rem}
.order-card-title p{margin:4px 0 0;font-size:0.86rem}

.order-meta-grid{margin:12px 0 0;grid-template-columns:repeat(2,1fr);gap:12px}
.order-meta-item{padding:10px 0;border-radius:0;border-bottom:1px solid var(--line)}
.order-meta-item dt{color:var(--muted);font-size:0.8rem}
.order-meta-item dd{margin:6px 0 0;font-size:0.92rem;font-weight:600}

.order-code-block{margin-top:12px}
.order-code-list{display:grid;gap:8px;margin-top:8px}
.order-code-item.is-unavailable{
  color:var(--danger);
  text-decoration:line-through;
  text-decoration-color:var(--danger);
  text-decoration-thickness:2px;
  text-decoration-skip-ink:none;
}
.order-download-block{margin-top:12px}

.order-fail-note{margin-top:12px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--rose-soft);color:var(--danger)}

.order-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:18px}

.pagination-button{
  min-width:40px;padding:8px 12px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--panel-strong);color:var(--text-secondary);
  cursor:pointer;
  transition:border-color 160ms ease,background 160ms ease;
}

.pagination-button:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.pagination-button:disabled{cursor:not-allowed;opacity:0.4}
.pagination-button.is-active{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-deep);font-weight:700}
.pagination-ellipsis{color:var(--muted);font-size:0.9rem}

.empty-state{
  padding:28px;border:1px dashed var(--line-strong);border-radius:var(--radius-md);
  background:transparent;text-align:center;color:var(--muted);
}

/* ─── Confetti / Toast ────────────────────────────────────────────────── */
.confetti-field{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.confetti-field span{position:absolute;top:-10vh;width:8px;height:18px;border-radius:999px;opacity:0.84;animation:confettiDrop linear forwards}

.purchase-toast{
  position:fixed;right:16px;bottom:16px;z-index:20;max-width:320px;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel-strong);box-shadow:var(--shadow-strong);color:var(--text);
}

/* =======================================================================
   ANIMATIONS
   ======================================================================= */
@keyframes confettiDrop{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(var(--drift,0px),115vh,0) rotate(520deg)}
}

@keyframes riseIn{
  0%{opacity:0;transform:translateY(12px)}
  100%{opacity:1;transform:translateY(0)}
}

@keyframes tileFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(-2deg)}
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */
@media(max-width:920px){
  .topbar,.hero,.section,.success-layout{width:min(calc(100% - 20px),var(--content-width))}

  .hero-grid,.product-hero-shell,.product-feature-grid,
  .product-story-grid,.product-scenario-grid,.feature-band-grid,
  .product-grid,.contact-grid,.legal-layout,.checkout-layout,
  .payment-method-grid,.success-layout,.lookup-layout,
  .status-grid,.form-grid,.order-meta-grid,
  .order-results-summary,.summary-mini-list,.hero-stat-grid{grid-template-columns:1fr}

  .topbar{position:relative;flex-direction:column;align-items:start;gap:10px}

  .hero h1{max-width:none;font-size:clamp(2.4rem,9vw,3.6rem)}
  .hero{padding:40px 0 32px}
  .store-hero{padding-bottom:18px}
  .products-section{padding-top:18px}

  .section-head,.result-header,.order-card-head,
  .success-panel-top,.order-results-meta{align-items:start;flex-direction:column}
  .product-group-filter{justify-content:flex-start}

  .success-caption{text-align:left}
  .checkout-summary{position:relative;top:0}
  .checkout-back-button{display:none}
  .mobile-only{display:inline-flex}
  .form-actions,.success-actions{flex-direction:column}
  .success-actions .button{width:100%}
  .price-row{flex-direction:column;align-items:start}
  .product-story-wide{grid-column:span 1;padding:28px 20px}
  .product-cta-card{flex-direction:column;align-items:flex-start}
  .price-hint{max-width:none;text-align:left}
  .site-footer-grid{grid-template-columns:1fr}

  .payment-method-card{grid-template-columns:1fr}
  .payment-method-action,.payment-session,
  .payment-session-label,.payment-session-order,
  .payment-link-button,.paypal-button-shell{grid-column:1}
  .payment-session{grid-template-columns:1fr}
}

@media(max-width:720px){
  .product-stage{grid-template-columns:1fr}
  .stage-large{grid-column:span 1}
  .product-cta-actions{width:100%}
  .product-cta-actions .button{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:0.01ms!important;scroll-behavior:auto!important;
  }
}

/* =======================================================================
   PREMIUM GLASSMORPHISM & DARK MODE OVERRIDES
   ======================================================================= */
:root {
  --bg:            #0a0a0c;
  --bg-alt:        #121216;
  --bg-accent:     #1a1a20;
  --panel:         rgba(20, 20, 25, 0.45);
  --panel-strong:  rgba(30, 30, 35, 0.7);
  --text:          #ffffff;
  --text-secondary:#b0b0b8;
  --muted:         #7b7b85;
  --line:          rgba(255,255,255,0.08);
  --line-strong:   rgba(255,255,255,0.15);

  --teal:          #00f2fe;
  --teal-soft:     rgba(0, 242, 254, 0.15);
  --teal-deep:     #0098df;
  --copper:        #f093fb;
  --copper-soft:   rgba(240, 147, 251, 0.15);
  --warm:          #f5576c;
  --warm-soft:     rgba(245, 87, 108, 0.15);
  --mint:          #0ba360;
  --mint-soft:     rgba(11, 163, 96, 0.15);
  --rose:          #ff0844;
  --rose-soft:     rgba(255, 8, 68, 0.15);
  --danger:        #ff4b2b;

  --shadow:        0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-strong: 0 0 40px rgba(0, 242, 254, 0.3);
}

/* Redesigned Grand & High-end Background */
.ambient-background {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1; overflow: hidden; background: #020204;
}



.orb {
  position: absolute; border-radius: 50%; 
  filter: blur(120px);
  opacity: 0.8; mix-blend-mode: screen;
  will-change: transform;
}

/* Bright sweeping lights */
.orb-1 { 
  width: 70vw; height: 70vw; 
  background: radial-gradient(circle at center, rgba(67, 56, 202, 0.9) 0%, rgba(67, 56, 202, 0) 70%); 
  top: -20%; left: -20%; 
  animation: grandAurora1 8s ease-in-out infinite alternate; 
}
.orb-2 { 
  width: 60vw; height: 60vw; 
  background: radial-gradient(circle at center, rgba(13, 148, 136, 0.9) 0%, rgba(13, 148, 136, 0) 70%); 
  bottom: -20%; right: -20%; 
  animation: grandAurora2 10s ease-in-out infinite alternate; 
}
.orb-3 { 
  width: 80vw; height: 40vh; 
  background: radial-gradient(ellipse at center, rgba(162, 28, 175, 0.8) 0%, rgba(162, 28, 175, 0) 70%); 
  top: 40%; left: 10%; 
  transform-origin: center center;
  animation: grandAurora3 12s ease-in-out infinite alternate; 
}

@keyframes grandAurora1 {
  0% { transform: translate(-10vw, -10vh) scale(0.8) rotate(0deg); }
  100% { transform: translate(50vw, 30vh) scale(1.5) rotate(45deg); opacity: 1; }
}
@keyframes grandAurora2 {
  0% { transform: translate(10vw, 10vh) scale(0.8) rotate(0deg); }
  100% { transform: translate(-60vw, -40vh) scale(1.6) rotate(-45deg); opacity: 1; }
}
@keyframes grandAurora3 {
  0% { transform: translate(-20vw, 0vh) scale(1) rotate(-15deg); }
  100% { transform: translate(40vw, -20vh) scale(2) rotate(30deg); opacity: 1; }
}

.topbar {
  background: rgba(20, 20, 25, 0.45) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-xl) !important;
  padding: 16px 32px !important;
  margin-top: 24px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

@media(max-width:920px) {
  .topbar {
    padding: 16px 20px !important;
    margin-top: 16px !important;
    border-radius: var(--radius-lg) !important;
  }
}

/* Fixed Layout Spacing for Pages Without Hero */
.success-layout, .lookup-layout { margin-top: 48px !important; }

/* Inner card resets */
.order-card, .license-card {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  margin-top: 16px !important;
}

/* Glassmorphism panels */
.product-card, .checkout-summary, .turnstile-wrap, .payment-methods, .order-search-card, .result-panel, .success-panel, .contact-card {
  background: var(--panel) !important;
  border: 1px solid var(--line-strong) !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-xl) !important;
  backdrop-filter: blur(24px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.product-card { padding: 36px !important; margin-bottom: 24px; }
.product-card::before { display: none !important; }
.product-card:hover, .product-card.selected {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--teal) !important;
  box-shadow: 0 20px 50px var(--teal-soft) !important;
}
.product-card.is-featured:hover, .product-card.is-featured.selected {
  border-color: var(--copper) !important;
  box-shadow: 0 20px 50px var(--copper-soft) !important;
}

.checkout-summary, .payment-methods, .order-search-card, .result-panel, .success-panel { padding: 36px !important; }
.turnstile-wrap { padding: 24px !important; }

.hero h1 { background: linear-gradient(135deg, #ffffff 0%, #a0a0a8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.button-primary, .button-pay {
  background: linear-gradient(135deg, var(--teal-deep), var(--teal)) !important;
  box-shadow: 0 8px 24px var(--teal-soft) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important; transition: all 0.3s ease;
}
.button-primary:hover, .button-pay:hover {
  transform: scale(1.04) translateY(-2px); filter: brightness(1.2);
  box-shadow: 0 12px 32px rgba(0, 242, 254, 0.4) !important;
}

.button-secondary { color: #fff !important; border-color: rgba(255,255,255,0.3) !important; transition: all 0.3s ease; }
.button-secondary:hover { background: rgba(255,255,255,0.1) !important; border-color: #fff !important; transform: scale(1.04) translateY(-2px); }

.product-tag, .product-chip, .status-pill {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}
.product-chip.featured { background: var(--teal-soft) !important; border-color: var(--teal) !important; color: var(--teal) !important; }
.eyebrow { color: var(--teal) !important; background: transparent !important; border: none !important; }

.form-field input { background: var(--panel-strong) !important; border: 1px solid var(--line-strong) !important; color: #fff !important; }
.form-field input:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 4px var(--teal-soft) !important; }
.checkout-consent input { background: transparent !important; border: none !important; box-shadow: none !important; }

.payment-method-card { background: rgba(0,0,0,0.3) !important; border: 1px solid var(--line) !important; padding: 24px !important; border-radius: var(--radius-lg) !important; margin-top: 16px !important; transition: all 0.3s ease; }
.payment-method-card:hover { border-color: rgba(255,255,255,0.2) !important; transform: translateX(8px); }

.price-value { background: linear-gradient(to right, #00f2fe, #4facfe); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.product-card[data-tone="coral"] .price-value { background: linear-gradient(to right, #f093fb, #f5576c); -webkit-background-clip: text; }

.brand-text strong { color: #ffffff !important; }
.hero-text, .section-copy, .product-desc { color: var(--text-secondary) !important; }
.product-title, .checkout-summary h3, .payment-methods-head strong { color: #fff !important; }

/* FIX: Ensure hidden elements remain hidden against later rules */
.is-hidden { display: none !important; }

/* ==========================================================================
   Product Home Page
   ========================================================================== */

.product-home-page {
  --home-bg: #f5f1ea;
  --home-ink: #151515;
  --home-muted: #65605a;
  --home-line: rgba(31, 29, 26, 0.12);
  --home-panel: rgba(255, 255, 255, 0.74);
  --home-teal: #109c91;
  --home-coral: #e06c3a;
  --home-blue: #2878d8;
  --home-yellow: #e3ad2e;
  margin: 0;
  min-height: 100vh;
  color: var(--home-ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(245, 241, 234, 0.82)),
    repeating-linear-gradient(90deg, rgba(21, 21, 21, 0.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(21, 21, 21, 0.025) 0 1px, transparent 1px 72px),
    var(--home-bg);
  font-family: "Instrument Sans", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.product-home-page a {
  color: inherit;
}

.home-page {
  min-height: 100vh;
  overflow: hidden;
}

.home-shell {
  width: min(1240px, calc(100% - 44px));
  margin: 0 auto;
}

.home-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--home-line);
  background: rgba(245, 241, 234, 0.82);
  backdrop-filter: blur(18px);
}

.home-nav {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.home-brand,
.home-window-title,
.home-hero-actions,
.home-hero-meta,
.home-cta-actions,
.home-footer nav {
  display: flex;
  align-items: center;
}

.home-brand {
  gap: 12px;
  min-width: 190px;
}

.home-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
}

.home-brand-copy {
  display: grid;
  gap: 2px;
}

.home-brand-copy strong,
.home-hero h1,
.home-showcase-copy h2,
.home-cta h2 {
  font-family: "Fraunces", "Microsoft YaHei", serif;
  letter-spacing: 0;
}

.home-brand-copy strong {
  font-size: 1.1rem;
  line-height: 1;
}

.home-brand-copy span {
  color: var(--home-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.home-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 42px);
  color: var(--home-muted);
  font-weight: 800;
}

.home-nav-links a,
.home-footer a {
  transition: color 160ms ease;
}

.home-nav-links a:hover,
.home-footer a:hover {
  color: var(--home-teal);
}

.home-nav-action,
.home-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 900;
  padding: 0 22px;
  white-space: nowrap;
}

.home-nav-action,
.home-button-primary {
  background: var(--home-ink);
  color: #fff;
  box-shadow: 0 18px 36px rgba(21, 21, 21, 0.16);
}

.home-button-secondary {
  border-color: var(--home-line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--home-ink);
}

.home-hero {
  display: grid;
  min-height: calc(100vh - 76px);
  grid-template-columns: minmax(0, 0.84fr) minmax(540px, 1.16fr);
  align-items: center;
  gap: 62px;
  padding: 82px 0 86px;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--home-teal);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.home-eyebrow::before {
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.home-hero h1 {
  max-width: 11ch;
  margin: 22px 0 0;
  font-size: clamp(3.5rem, 8vw, 7.4rem);
  font-weight: 700;
  line-height: 0.95;
}

.home-hero-copy p,
.home-showcase-copy p,
.home-cta p,
.home-footer p {
  color: var(--home-muted);
  font-weight: 700;
  line-height: 1.86;
}

.home-hero-copy p {
  max-width: 620px;
  margin: 24px 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
}

.home-hero-actions {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.home-hero-meta {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.home-hero-meta span {
  border: 1px solid var(--home-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--home-muted);
  font-size: 0.84rem;
  font-weight: 900;
  padding: 8px 12px;
}

.home-product-board {
  position: relative;
}

.home-product-board::before {
  position: absolute;
  inset: 26px -10px -18px 26px;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(16, 156, 145, 0.24), rgba(224, 108, 58, 0.12)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0 2px, transparent 2px 22px);
  content: "";
  transform: rotate(-2deg);
}

.home-app-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(37, 33, 29, 0.18);
  border-radius: 24px;
  background: rgba(246, 249, 253, 0.94);
  box-shadow: 0 34px 80px rgba(38, 32, 26, 0.18);
  transform: rotateY(-7deg) rotateX(3deg) rotateZ(1deg);
  transform-origin: left center;
}

.home-window-bar {
  display: flex;
  height: 58px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(30, 58, 88, 0.12);
  background: #eef4fb;
  padding: 0 18px;
}

.home-window-title {
  gap: 10px;
  color: #1f3048;
  font-weight: 900;
}

.home-window-title img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.home-window-tabs {
  display: flex;
  gap: 8px;
}

.home-window-tabs span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9fb2c9;
}

.home-app-grid {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: 14px;
  padding: 18px;
}

.home-panel,
.home-preview-card {
  border: 1px solid rgba(94, 125, 162, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.home-panel {
  padding: 14px;
}

.home-panel-title,
.home-preview-card span {
  color: #18304d;
  font-size: 0.78rem;
  font-weight: 900;
}

.home-control-row {
  display: grid;
  grid-template-columns: 1fr 62px 62px;
  gap: 8px;
  margin-top: 12px;
}

.home-control-row span,
.home-control-row i,
.home-form-grid span {
  height: 28px;
  border-radius: 8px;
  background: #edf3fb;
}

.home-step-card {
  height: 40px;
  margin-top: 10px;
  border-radius: 9px;
}

.home-step-card.teal {
  background: linear-gradient(90deg, #62bff0, #52d0c8);
}

.home-step-card.coral {
  background: linear-gradient(90deg, #ff9278, #ffc364);
}

.home-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.home-palette-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 12px;
}

.home-palette-grid i {
  aspect-ratio: 1;
  border: 1px solid rgba(28, 44, 62, 0.18);
  background: var(--swatch, #f5f5f5);
}

.home-palette-grid i:nth-child(4n + 1) { --swatch: #0b1f1f; }
.home-palette-grid i:nth-child(4n + 2) { --swatch: #2f89c8; }
.home-palette-grid i:nth-child(4n + 3) { --swatch: #ef7a44; }
.home-palette-grid i:nth-child(4n + 4) { --swatch: #e9d29a; }
.home-palette-grid i:nth-child(6n) { --swatch: #48a976; }

.home-preview-card {
  min-height: 210px;
  padding: 12px;
}

.home-preview-art {
  position: relative;
  height: 162px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 34% 32%, #fff8e6 0 10%, transparent 11%),
    radial-gradient(circle at 52% 58%, #f66a3e 0 8%, transparent 9%),
    radial-gradient(circle at 70% 60%, #eff5ef 0 8%, transparent 9%),
    linear-gradient(180deg, #38a5dc 0 62%, #4fbf78 63%);
}

.home-preview-art::before {
  position: absolute;
  left: 13%;
  right: 8%;
  bottom: 0;
  height: 24%;
  background: repeating-linear-gradient(90deg, #2da45d 0 9px, #f3d99a 9px 13px, #e96044 13px 16px);
  content: "";
}

.home-preview-art.pixelated {
  image-rendering: pixelated;
  filter: contrast(1.12) saturate(0.94);
}

.home-preview-art.pixelated::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 8px 8px;
  content: "";
}

.home-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 8px 0 76px;
}

.home-feature-strip article {
  border-top: 3px solid var(--home-ink);
  padding-top: 18px;
}

.home-feature-strip article:nth-child(2) { border-color: var(--home-teal); }
.home-feature-strip article:nth-child(3) { border-color: var(--home-coral); }
.home-feature-strip article:nth-child(4) { border-color: var(--home-blue); }

.home-feature-strip span {
  color: var(--home-muted);
  font-weight: 900;
}

.home-feature-strip h2 {
  margin: 12px 0 0;
  font-size: 1.28rem;
}

.home-feature-strip p {
  margin: 10px 0 0;
  color: var(--home-muted);
  font-weight: 700;
  line-height: 1.72;
}

.home-showcase {
  display: grid;
  gap: 34px;
  padding-bottom: 72px;
}

.home-showcase-row {
  display: grid;
  min-height: 420px;
  grid-template-columns: 0.72fr 1fr;
  align-items: center;
  gap: 42px;
  border-top: 1px solid var(--home-line);
  padding: 38px 0;
}

.home-showcase-row.reversed {
  grid-template-columns: 1fr 0.72fr;
}

.home-showcase-copy h2,
.home-cta h2 {
  margin: 14px 0 0;
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
  line-height: 1;
}

.home-showcase-copy p {
  max-width: 560px;
  margin: 18px 0 0;
}

.home-dual-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.home-image-frame,
.home-workflow-card,
.home-library-board {
  border: 1px solid var(--home-line);
  border-radius: 22px;
  background: var(--home-panel);
  box-shadow: 0 22px 54px rgba(38, 32, 26, 0.1);
}

.home-image-frame {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background:
    radial-gradient(circle at 38% 26%, #fff2d9 0 11%, transparent 12%),
    radial-gradient(circle at 48% 52%, #e96337 0 9%, transparent 10%),
    radial-gradient(circle at 66% 58%, #f8fbf6 0 9%, transparent 10%),
    linear-gradient(180deg, #3097cf 0 63%, #4bbb78 64%);
}

.home-image-frame::before {
  position: absolute;
  inset: auto 8% 0;
  height: 25%;
  background: repeating-linear-gradient(90deg, #159d5e 0 12px, #f4d492 12px 17px, #e95d42 17px 22px);
  content: "";
}

.home-image-frame.blocky {
  filter: contrast(1.08);
}

.home-image-frame.blocky::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.32) 1px, transparent 1px);
  background-size: 14px 14px;
  content: "";
}

.home-workflow-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 24px;
}

.home-workflow-card div {
  min-height: 134px;
  border: 1px solid var(--home-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  padding: 18px;
}

.home-workflow-card strong {
  display: block;
  color: var(--home-teal);
  font-size: 0.86rem;
}

.home-workflow-card span {
  display: block;
  margin-top: 30px;
  font-size: 1.18rem;
  font-weight: 900;
}

.home-library-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 26px;
}

.home-library-board span {
  position: relative;
  min-height: 260px;
  border: 1px solid rgba(52, 67, 84, 0.13);
  border-radius: 18px;
  background: #f8fbff;
  box-shadow: 0 18px 38px rgba(41, 57, 75, 0.1);
}

.home-library-board span::before {
  position: absolute;
  inset: 24px 20px auto;
  height: 126px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(239, 245, 250, 0.88)),
    repeating-linear-gradient(90deg, rgba(40, 120, 216, 0.16) 0 8px, rgba(224, 108, 58, 0.16) 8px 16px);
  content: "";
}

.home-library-board span::after {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 30px;
  height: 15px;
  border-radius: 999px;
  background: #d9e3ee;
  box-shadow: 0 28px 0 -2px #e8eef4;
  content: "";
}

.home-library-board span:nth-child(2)::before { background-color: rgba(16, 156, 145, 0.16); }
.home-library-board span:nth-child(3)::before { background-color: rgba(224, 108, 58, 0.16); }
.home-library-board span:nth-child(4)::before { background-color: rgba(227, 173, 46, 0.2); }

.home-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 36px;
  margin-bottom: 62px;
  border-top: 3px solid var(--home-ink);
  padding-top: 34px;
}

.home-cta p {
  max-width: 620px;
  margin: 16px 0 0;
}

.home-cta-actions,
.home-footer nav {
  flex-wrap: wrap;
  gap: 12px;
}

.home-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--home-line);
  padding: 32px 0 44px;
}

.home-footer img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.home-footer p {
  margin: 10px 0 0;
}

.home-footer nav {
  color: var(--home-muted);
  font-weight: 900;
}

@media (max-width: 1080px) {
  .home-hero,
  .home-showcase-row,
  .home-showcase-row.reversed,
  .home-cta {
    grid-template-columns: 1fr;
  }

  .home-app-window {
    transform: none;
  }

  .home-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-shell {
    width: min(100% - 28px, 1240px);
  }

  .home-nav {
    min-height: auto;
    flex-wrap: wrap;
    padding: 14px 0;
  }

  .home-brand {
    min-width: 0;
  }

  .home-nav-links {
    width: 100%;
    order: 3;
    justify-content: space-between;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    font-size: 0.9rem;
  }

  .home-hero {
    min-height: auto;
    gap: 36px;
    padding: 54px 0 60px;
  }

  .home-hero h1 {
    max-width: none;
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  .home-app-grid,
  .home-dual-preview,
  .home-workflow-card,
  .home-library-board,
  .home-feature-strip,
  .home-footer {
    grid-template-columns: 1fr;
  }

  .home-footer {
    display: grid;
  }

  .home-library-board span {
    min-height: 210px;
  }

  .home-hero-actions .home-button,
  .home-cta-actions .home-button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .home-brand-copy span {
    display: none;
  }

  .home-brand-mark {
    width: 40px;
    height: 40px;
  }

  .home-nav-action {
    min-height: 42px;
    padding: 0 16px;
  }
}

/* ==========================================================================
   Screenshot-like Product Homepage
   ========================================================================== */

.sim-home-page {
  --sim-bg: #eef5ff;
  --sim-surface: #f8fbff;
  --sim-panel: #ffffff;
  --sim-line: #cfe0f8;
  --sim-line-strong: #b9d2f2;
  --sim-ink: #0e2340;
  --sim-muted: #5d7190;
  --sim-blue: #64b5f6;
  --sim-cyan: #56d0c7;
  --sim-purple: #ad74ea;
  --sim-orange: #ff956e;
  --sim-green: #61cfa7;
  --sim-shadow: 0 24px 60px rgba(66, 101, 145, 0.18);
  margin: 0;
  min-height: 100vh;
  color: var(--sim-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(238, 245, 255, 0.96)),
    radial-gradient(circle at 20% 10%, rgba(100, 181, 246, 0.22), transparent 32%),
    radial-gradient(circle at 90% 18%, rgba(173, 116, 234, 0.14), transparent 30%),
    var(--sim-bg);
  font-family: "Instrument Sans", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.sim-home-page a { color: inherit; text-decoration: none; }
.sim-home-page img { display: block; max-width: 100%; }

.sim-shell {
  width: min(1380px, calc(100% - 44px));
  margin: 0 auto;
}

.sim-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(187, 211, 242, 0.72);
  background: rgba(242, 247, 255, 0.82);
  backdrop-filter: blur(18px);
}

.sim-nav {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.sim-brand,
.sim-nav-links,
.sim-hero-actions,
.sim-platforms,
.sim-window-titlebar,
.sim-button-row,
.sim-tool-row,
.sim-footer,
.sim-footer div,
.sim-footer nav {
  display: flex;
  align-items: center;
}

.sim-brand {
  gap: 12px;
  min-width: 210px;
}

.sim-brand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 10px 24px rgba(82, 136, 198, 0.18);
}

.sim-brand span {
  display: grid;
  gap: 1px;
}

.sim-brand strong,
.sim-hero h1,
.sim-module-copy h2 {
  font-family: "Fraunces", "Microsoft YaHei", serif;
  letter-spacing: 0;
}

.sim-brand strong {
  font-size: 1.1rem;
  line-height: 1;
}

.sim-brand small {
  color: var(--sim-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.sim-nav-links {
  gap: clamp(14px, 3vw, 40px);
  color: var(--sim-muted);
  font-size: 0.94rem;
  font-weight: 800;
}

.sim-nav-links a:hover {
  color: #2d7bd4;
}

.sim-buy-link,
.sim-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 900;
  padding: 0 22px;
  white-space: nowrap;
}

.sim-buy-link,
.sim-button.primary {
  border: 1px solid rgba(38, 117, 207, 0.18);
  background: linear-gradient(135deg, #5fb5f3, #59d2c8);
  color: #fff;
  box-shadow: 0 14px 28px rgba(76, 166, 222, 0.28);
}

.sim-button.secondary {
  border: 1px solid var(--sim-line-strong);
  background: rgba(255, 255, 255, 0.74);
  color: var(--sim-ink);
}

.sim-hero {
  display: grid;
  min-height: auto;
  grid-template-columns: minmax(360px, 0.4fr) minmax(620px, 0.6fr);
  align-items: start;
  gap: 34px;
  padding: 64px 0 72px;
}

.sim-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #2e7cd3;
  font-size: 0.83rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sim-kicker::before {
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.sim-hero h1 {
  max-width: 13.5ch;
  margin: 20px 0 0;
  font-size: clamp(2.8rem, 4.9vw, 5.2rem);
  font-weight: 700;
  line-height: 1.02;
}

.sim-hero-copy p,
.sim-module-copy p {
  color: var(--sim-muted);
  font-weight: 700;
  line-height: 1.84;
}

.sim-hero-copy p {
  max-width: 560px;
  margin: 22px 0 0;
  font-size: 1.08rem;
}

.sim-hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.sim-platforms {
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.sim-platforms span {
  border: 1px solid var(--sim-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--sim-muted);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 7px 11px;
}

.sim-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: -34px;
  padding-bottom: 58px;
}

.sim-feature-strip article {
  min-height: 178px;
  border: 1px solid rgba(185, 210, 242, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 42px rgba(66, 101, 145, 0.1);
  padding: 22px;
  backdrop-filter: blur(18px);
}

.sim-feature-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, #69b8f2, #58d0c5);
  color: #fff;
  font-weight: 900;
}

.sim-feature-strip article:nth-child(2) .sim-feature-icon {
  background: linear-gradient(135deg, #7bbcf3, #a66ee8);
}

.sim-feature-strip article:nth-child(3) .sim-feature-icon {
  background: linear-gradient(135deg, #58d0c5, #61cfa7);
}

.sim-feature-strip article:nth-child(4) .sim-feature-icon {
  background: linear-gradient(135deg, #ff956e, #ffc168);
}

.sim-feature-strip h2 {
  margin: 18px 0 0;
  font-size: 1.16rem;
  line-height: 1.2;
}

.sim-feature-strip p {
  margin: 9px 0 0;
  color: var(--sim-muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.7;
}

.sim-main-window,
.sim-mini-window {
  overflow: hidden;
  border: 1px solid var(--sim-line-strong);
  border-radius: 10px;
  background: #f4f8ff;
  box-shadow: var(--sim-shadow);
}

.sim-main-window {
  width: min(100%, 820px);
  justify-self: end;
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg) rotateZ(0.8deg);
  transform-origin: left center;
}

.sim-window-titlebar,
.sim-mini-bar {
  height: 34px;
  border-bottom: 1px solid #d5e3f6;
  background: #f7fbff;
  color: #0e2542;
  font-size: 0.82rem;
  font-weight: 900;
}

.sim-window-titlebar {
  justify-content: flex-end;
  gap: 10px;
  padding: 0 12px;
}

.sim-window-titlebar span {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
}

.sim-window-titlebar img {
  width: 20px;
  height: 20px;
}

.sim-window-titlebar i {
  width: 10px;
  height: 10px;
  border: 1px solid #1f2937;
}

.sim-window-titlebar i:first-of-type {
  height: 1px;
  border: 0;
  background: #1f2937;
}

.sim-workbench-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) repeat(2, minmax(170px, 0.68fr));
  grid-template-areas:
    "config palette palette"
    "config original pixel"
    "config info info"
    "settings settings settings";
  gap: 9px;
  padding: 11px;
}

.sim-pane,
.sim-preview-panel {
  border: 1px solid var(--sim-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.sim-pane {
  padding: 9px;
}

.sim-pane h2,
.sim-preview-panel h2 {
  margin: 0 0 6px;
  color: #0f2440;
  font-size: 0.8rem;
  text-align: center;
}

.sim-config-pane {
  grid-area: config;
}

.sim-palette-pane {
  grid-area: palette;
}

.sim-preview-panel.original {
  grid-area: original;
}

.sim-preview-panel.pixel {
  grid-area: pixel;
}

.sim-preview-panel {
  padding: 9px;
}

.sim-info-pane {
  grid-area: info;
}

.sim-settings-pane {
  grid-area: settings;
}

.sim-select-row {
  display: grid;
  grid-template-columns: 1fr 28px;
  height: 30px;
  overflow: hidden;
  border: 1px solid var(--sim-line);
  border-radius: 8px;
  background: #fff;
}

.sim-select-row span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #1a3353;
  font-size: 0.78rem;
}

.sim-select-row b {
  background: #edf2fa;
}

.sim-button-row {
  gap: 6px;
  margin-top: 7px;
}

.sim-button-row i,
.sim-tool-row span,
.sim-two-actions span,
.sim-start-button,
.sim-preview-actions span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 7px;
  color: #fff;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0 7px;
}

.sim-button-row i:nth-child(1),
.sim-tool-row span:nth-child(1),
.sim-two-actions span:nth-child(1) {
  background: linear-gradient(135deg, #69b8f2, #58d0c5);
}

.sim-button-row i:nth-child(2),
.sim-button-row i:nth-child(3) {
  background: #8ca3c9;
}

.sim-step-title {
  margin: 8px 0 5px;
  color: #102744;
  font-size: 0.74rem;
  font-weight: 900;
  text-align: center;
}

.sim-two-actions,
.sim-tool-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.sim-two-actions span:nth-child(2),
.sim-tool-row span:nth-child(2) {
  background: linear-gradient(135deg, #ff9578, #ffc168);
}

.sim-tool-row span:nth-child(2) {
  background: linear-gradient(135deg, #7bbcf3, #b46be8);
}

.sim-form-lines {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 8px;
  margin-top: 7px;
}

.sim-form-lines i {
  height: 24px;
  border: 1px solid var(--sim-line);
  border-radius: 7px;
  background: linear-gradient(90deg, #fff 68%, #eef3fb 68%);
}

.sim-start-button {
  width: 100%;
  background: linear-gradient(135deg, #8a82f4, #c670e8);
}

.sim-progress,
.sim-slider {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe8f6;
}

.sim-progress::before,
.sim-slider::before {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #67b7f2, #59d0c6);
  content: "";
}

.sim-color-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
}

.sim-color-grid i {
  aspect-ratio: 1;
  border: 1px solid rgba(20, 40, 64, 0.35);
  background: var(--swatch, #fff);
}

.sim-color-grid i:nth-child(8n + 1) { --swatch: #102522; }
.sim-color-grid i:nth-child(8n + 2) { --swatch: #4e5759; }
.sim-color-grid i:nth-child(8n + 3) { --swatch: #dedbd2; }
.sim-color-grid i:nth-child(8n + 4) { --swatch: #fbefe0; }
.sim-color-grid i:nth-child(8n + 5) { --swatch: #ef7b44; }
.sim-color-grid i:nth-child(8n + 6) { --swatch: #f0bd16; }
.sim-color-grid i:nth-child(8n + 7) { --swatch: #2cae72; }
.sim-color-grid i:nth-child(8n) { --swatch: #2d8fc5; }
.sim-color-grid i:nth-child(11n) { --swatch: #a95aa4; }

.sim-landscape {
  position: relative;
  height: 132px;
  overflow: hidden;
  border: 1px dashed #b9d3f6;
  border-radius: 9px;
  background:
    radial-gradient(circle at 38% 31%, #fff4dd 0 8%, transparent 9%),
    radial-gradient(circle at 47% 55%, #f15f36 0 7%, transparent 8%),
    radial-gradient(circle at 66% 60%, #fff8ed 0 7%, transparent 8%),
    radial-gradient(circle at 48% 24%, #fff 0 14%, transparent 15%),
    linear-gradient(180deg, #318dc8 0 62%, #44b56e 63%);
}

.sim-landscape::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: repeating-linear-gradient(90deg, #0aa761 0 7px, #f6d38f 7px 10px, #e95c42 10px 13px, #43bd72 13px 20px);
  content: "";
}

.sim-landscape.pixelated {
  filter: contrast(1.12) saturate(0.95);
}

.sim-landscape.pixelated::after,
.sim-pixel-editor::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.32) 1px, transparent 1px);
  background-size: 8px 8px;
  content: "";
}

.sim-preview-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.sim-preview-actions span {
  min-height: 24px;
  font-size: 0.66rem;
  padding: 0 4px;
}

.sim-preview-actions span:nth-child(1) { background: #a779eb; }
.sim-preview-actions span:nth-child(2) { background: #8aa3ca; }
.sim-preview-actions span:nth-child(3) { background: #58c5d8; }

.sim-info-pane p {
  margin: 5px 0 0;
  border: 1px solid #d8e4f4;
  border-radius: 6px;
  background: #f7fbff;
  color: #244163;
  font-size: 0.7rem;
  padding: 5px 7px;
}

.sim-checkbox-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.sim-checkbox-row span {
  height: 17px;
  border: 1px solid var(--sim-line-strong);
  border-radius: 5px;
  background: #fff;
}

.sim-module-grid {
  position: relative;
  display: grid;
  gap: 34px;
  padding: 8px 0 64px;
}

.sim-anchor {
  position: absolute;
  top: -92px;
}

.sim-module-card {
  display: grid;
  grid-template-columns: 0.38fr 0.62fr;
  gap: 34px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(185, 210, 242, 0.9);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(238, 245, 255, 0.72)),
    rgba(255, 255, 255, 0.66);
  box-shadow: 0 22px 54px rgba(66, 101, 145, 0.11);
  padding: 34px;
}

.sim-module-card:nth-child(even) {
  grid-template-columns: 0.62fr 0.38fr;
}

.sim-module-card:nth-child(even) .sim-module-copy {
  order: 2;
}

.sim-module-copy span {
  display: inline-flex;
  color: #2d7bd4;
  font-size: 0.84rem;
  font-weight: 900;
}

.sim-module-copy h2 {
  max-width: 12.5ch;
  margin: 12px 0 0;
  font-size: clamp(2rem, 3.8vw, 3.7rem);
  line-height: 1.02;
}

.sim-module-copy p {
  max-width: 540px;
  margin: 16px 0 0;
}

.sim-mini-window {
  min-height: 390px;
  background: #f4f8ff;
  box-shadow: 0 26px 58px rgba(72, 105, 143, 0.16);
}

.sim-mini-bar {
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.sim-setting-strip {
  display: grid;
  grid-template-columns: 120px 1fr 1fr 150px;
  gap: 12px;
  border: 1px solid var(--sim-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  margin: 12px;
  padding: 16px;
}

.sim-setting-strip i,
.sim-design-toolbar i {
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, #69b8f2, #58d0c5);
}

.sim-setting-strip i:nth-child(n + 2) {
  background: #eef3fb;
  border: 1px solid var(--sim-line);
}

.sim-empty-stage {
  display: grid;
  min-height: 265px;
  place-items: center;
  border: 1px solid #c7d7ec;
  background: #f9fbfe;
  margin: 0 12px 12px;
  color: #5d6470;
  font-weight: 800;
}

.sim-designer-window {
  position: relative;
  min-height: 440px;
}

.sim-design-toolbar {
  display: grid;
  grid-template-columns: repeat(7, minmax(56px, 1fr));
  gap: 8px;
  margin: 14px;
}

.sim-design-toolbar i:nth-child(2) { background: linear-gradient(135deg, #7ebef3, #a66ee8); }
.sim-design-toolbar i:nth-child(3) { background: #eef3fb; border: 1px solid var(--sim-line); }
.sim-design-toolbar i:nth-child(4) { background: #fff; border: 1px solid var(--sim-line-strong); }
.sim-design-toolbar i:nth-child(5) { background: #f5a177; }
.sim-design-toolbar i:nth-child(6) { background: #c8d1dc; }
.sim-design-toolbar i:nth-child(7) { background: #5fcfac; }

.sim-canvas-area {
  position: absolute;
  left: 14px;
  right: 280px;
  bottom: 18px;
  top: 112px;
  border: 2px solid #9ca3af;
  background: #fff;
}

.sim-side-inspector {
  position: absolute;
  top: 112px;
  right: 14px;
  bottom: 18px;
  width: 246px;
  border: 1px dashed var(--sim-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  padding: 20px;
}

.sim-side-inspector span {
  display: block;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 7px;
  background: #eef3fb;
}

.sim-video-window {
  padding-bottom: 14px;
}

.sim-video-top {
  display: grid;
  grid-template-columns: 1fr 1fr 0.6fr;
  gap: 12px;
  margin: 12px;
}

.sim-video-top div,
.sim-video-top aside {
  min-height: 180px;
  border: 1px solid var(--sim-line);
  border-radius: 10px;
  background:
    radial-gradient(circle at 48% 48%, #f6c08c 0 9%, transparent 10%),
    radial-gradient(circle at 52% 50%, #f15f36 0 6%, transparent 7%),
    linear-gradient(145deg, #0e4167, #42b0ef 48%, #68b957 49%);
}

.sim-video-top aside {
  background: #fff;
}

.sim-frame-strip,
.sim-frame-results {
  display: grid;
  gap: 8px;
  margin: 12px;
}

.sim-frame-strip {
  grid-template-columns: repeat(7, 1fr);
}

.sim-frame-results {
  grid-template-columns: repeat(5, 1fr);
}

.sim-frame-strip i,
.sim-frame-results i {
  height: 52px;
  border: 1px solid #111827;
  background: linear-gradient(145deg, #0e4167, #42b0ef 48%, #68b957 49%);
}

.sim-frame-results i:nth-child(n + 3) {
  background: #424242;
}

.sim-library-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 12px 0;
}

.sim-library-tabs span {
  width: 112px;
  height: 48px;
  border: 1px solid var(--sim-line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #edf3fb;
}

.sim-library-tabs span:nth-child(2) {
  background: #cfe2ff;
}

.sim-library-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 12px;
}

.sim-library-cards i {
  position: relative;
  min-height: 270px;
  border: 1px solid #d6e1ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(50, 76, 110, 0.12);
}

.sim-library-cards i::before {
  position: absolute;
  inset: 24px 24px auto;
  height: 150px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(232, 238, 246, 0.88)),
    repeating-linear-gradient(90deg, rgba(243, 209, 184, 0.9) 0 18px, rgba(154, 201, 233, 0.9) 18px 36px);
  content: "";
}

.sim-library-cards i::after {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 34px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(90deg, #6bb8f2, #58d0c5);
  content: "";
}

.sim-color-window {
  position: relative;
  min-height: 450px;
}

.sim-pixel-editor {
  position: absolute;
  left: 12px;
  top: 50px;
  bottom: 14px;
  right: 285px;
  overflow: hidden;
  background:
    radial-gradient(circle at 40% 31%, #fff4dd 0 10%, transparent 11%),
    radial-gradient(circle at 45% 54%, #f15f36 0 8%, transparent 9%),
    radial-gradient(circle at 65% 58%, #fff8ed 0 8%, transparent 9%),
    radial-gradient(circle at 48% 24%, #fff 0 15%, transparent 16%),
    linear-gradient(180deg, #2f8bc6 0 68%, #49b46d 69%);
}

.sim-color-sidebar {
  position: absolute;
  top: 50px;
  right: 12px;
  bottom: 14px;
  width: 255px;
  border-left: 1px solid var(--sim-line);
  background: #f5f8fc;
  padding: 18px;
}

.sim-color-sidebar span {
  display: block;
  height: 72px;
  margin-bottom: 10px;
  border: 1px solid #d6dce5;
  border-radius: 6px;
  background:
    linear-gradient(90deg, #102522 0 20px, transparent 20px),
    repeating-linear-gradient(90deg, #102522 0 28px, #4e5759 28px 56px, #8b9291 56px 84px, #f7f3eb 84px 112px);
}

.sim-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 58px;
  border: 1px solid rgba(185, 210, 242, 0.9);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(100, 181, 246, 0.18), rgba(86, 208, 199, 0.16)),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 22px 54px rgba(66, 101, 145, 0.12);
  padding: 34px 40px;
}

.sim-final-cta span {
  color: #2d7bd4;
  font-size: 0.84rem;
  font-weight: 900;
}

.sim-final-cta h2 {
  margin: 8px 0 0;
  font-family: "Fraunces", "Microsoft YaHei", serif;
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  line-height: 1.05;
}

.sim-footer {
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(162, 193, 231, 0.9);
  padding: 28px 0 44px;
  color: var(--sim-muted);
  font-weight: 800;
}

.sim-footer div,
.sim-footer nav {
  gap: 14px;
  flex-wrap: wrap;
}

.sim-footer img {
  width: 42px;
  height: 42px;
}

.sim-footer a:hover {
  color: #2d7bd4;
}

@media (max-width: 1180px) {
  .sim-hero,
  .sim-module-card,
  .sim-module-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .sim-module-card:nth-child(even) .sim-module-copy {
    order: 0;
  }

  .sim-main-window {
    transform: none;
    width: 100%;
    justify-self: stretch;
  }

  .sim-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
}

@media (max-width: 860px) {
  .sim-shell {
    width: min(100% - 28px, 1380px);
  }

  .sim-nav {
    flex-wrap: wrap;
    padding: 12px 0;
  }

  .sim-nav-links {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .sim-hero {
    min-height: auto;
    padding: 44px 0 58px;
  }

  .sim-hero h1 {
    max-width: none;
    font-size: clamp(2.8rem, 14vw, 4.5rem);
  }

  .sim-workbench-grid,
  .sim-video-top,
  .sim-library-cards,
  .sim-setting-strip {
    grid-template-columns: 1fr;
  }

  .sim-feature-strip,
  .sim-final-cta {
    grid-template-columns: 1fr;
  }

  .sim-final-cta {
    display: grid;
    padding: 26px;
  }

  .sim-module-card {
    padding: 22px;
  }

  .sim-workbench-grid {
    grid-template-areas:
      "config"
      "palette"
      "original"
      "pixel"
      "info"
      "settings";
  }

  .sim-main-window {
    overflow: hidden;
  }

  .sim-palette-pane,
  .sim-info-pane,
  .sim-settings-pane {
    grid-column: span 1;
  }

  .sim-color-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .sim-canvas-area,
  .sim-pixel-editor {
    position: relative;
    inset: auto;
    height: 260px;
    margin: 12px;
  }

  .sim-side-inspector,
  .sim-color-sidebar {
    position: relative;
    inset: auto;
    width: auto;
    margin: 12px;
  }

  .sim-hero-actions .sim-button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .sim-brand small {
    display: none;
  }

  .sim-buy-link {
    padding: 0 14px;
  }

  .sim-mini-window {
    min-height: 320px;
  }
}