:root{
  color-scheme:light dark;
  --fg:#101319;
  --muted:#5a6474;
  --border:rgba(16,19,25,.10);
  --card:rgba(255,255,255,.80);
  --card-solid:#fff;
  --chip:rgba(255,255,255,.55);
  --accent:hsl(var(--h-a) 62% var(--accent-l));
  --accent-fg:#fff;
  --accent-soft:hsl(var(--h-a) 70% 45% / .11);
  --ok:#15803d;
  --ok-bg:rgba(22,163,74,.12);
  --ng:#b91c1c;
  --ng-bg:rgba(220,38,38,.10);
  --shadow:0 1px 2px rgba(16,19,25,.05),0 18px 44px -22px rgba(16,19,25,.40);
  --radius:20px;
  --bg-base:hsl(var(--h-a) 32% 96%);
  --blob-a:hsl(var(--h-a) 88% 72% / .55);
  --blob-b:hsl(var(--h-b) 85% 70% / .48);
  --blob-c:hsl(var(--h-c) 80% 74% / .42);
  --noise:.20;
}

@media (prefers-color-scheme:dark){
  :root{
    --fg:#e9ebf1;
    --muted:#a2aaba;
    --border:rgba(255,255,255,.10);
    --card:rgba(23,27,36,.74);
    --card-solid:#1b202b;
    --chip:rgba(255,255,255,.05);
    --accent:hsl(var(--h-a) 70% var(--accent-dark-l));
    --accent-fg:#0c0f15;
    --accent-soft:hsl(var(--h-a) 70% 60% / .14);
    --ok:#6ee7a4;
    --ok-bg:rgba(22,163,74,.16);
    --ng:#fca5a5;
    --ng-bg:rgba(220,38,38,.16);
    --shadow:0 1px 2px rgba(0,0,0,.35),0 22px 50px -22px rgba(0,0,0,.75);
    --bg-base:hsl(var(--h-a) 26% 8%);
    --blob-a:hsl(var(--h-a) 72% 42% / .50);
    --blob-b:hsl(var(--h-b) 70% 38% / .45);
    --blob-c:hsl(var(--h-c) 66% 34% / .40);
    --noise:.30;
  }
}

body{
  display:flex;
  flex-direction:column;
  color:var(--fg);
  background:var(--bg-base);
}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(62% 58% at 12% 14%,var(--blob-a),transparent 62%),
    radial-gradient(58% 55% at 88% 8%,var(--blob-b),transparent 62%),
    radial-gradient(72% 65% at 74% 96%,var(--blob-c),transparent 64%),
    var(--bg-base);
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:var(--noise);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{
  width:100%;
  max-width:38rem;
  margin:0 auto;
  padding:clamp(1.5rem,5vw,3.25rem) 1.15rem clamp(2rem,6vw,3.5rem);
  display:flex;
  flex-direction:column;
  gap:1.15rem;
  flex:1;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.35rem,4.5vw,2.15rem);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.stack{display:grid;gap:1.15rem}
.stack-tight{display:grid;gap:.6rem}
.flush{margin:0}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  align-self:flex-start;
  text-decoration:none;
  color:var(--fg);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.07em;
}
.brand-mark{
  display:grid;
  place-items:center;
  width:1.65rem;
  height:1.65rem;
  border-radius:.55rem;
  background:var(--accent);
  color:var(--accent-fg);
  font-size:.8125rem;
}

.domain{
  margin:0;
  font-size:clamp(1.7rem,5.6vw,3rem);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.lead{margin:0;font-size:1rem}

.price{display:grid;gap:.25rem}
.price-label{font-size:.8125rem;font-weight:700;color:var(--muted)}
.price-value{
  font-size:clamp(2rem,7.5vw,2.85rem);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.price-value .unit{font-size:.4em;font-weight:600;letter-spacing:0;margin-left:.18em}
.price-sub{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}

.back{margin:0;font-size:.875rem}
.back a{color:var(--accent);font-weight:600;text-decoration:none}
.back a:hover{text-decoration:underline}

.foot-divider{
  width:100%;
  height:1px;
  margin:0 0 clamp(1rem,3vw,1.35rem);
  border:0;
  background:linear-gradient(
    90deg,
    transparent,
    var(--border) 16%,
    hsl(var(--h-a) 55% var(--accent-l) / .5) 50%,
    var(--border) 84%,
    transparent
  );
  position:relative;
}
.foot-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  width:.32rem;
  height:.32rem;
  border-radius:.06rem;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--bg-base);
}

.foot{
  margin-top:.35rem;
  text-align:center;
  font-size:.8125rem;
  line-height:1.7;
  color:var(--muted);
}
.foot a{color:var(--accent);font-weight:600;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot p{margin:0}