/* The site's landing look (/, /store, /account, /download), on top of
   site.css: a deep background, centered section heads, rounded glassy
   cards and pill buttons. Pages opt in with <body class="dlp">. */
.dlp {
  --brand: #52d1c9;
  --brand-2: #f97316;
  --card: rgba(255, 255, 255, .04);
  --card-line: rgba(255, 255, 255, .09);
  --hover-line: rgba(82, 209, 201, .5);
  --soft: #8a97a8;
  --body: #98a5b6;
  background: #0b0f15;
}
html:has(> body.dlp) { background: #0b0f15; }
.dlp .bar { background: rgba(11, 15, 21, .7); border-bottom-color: rgba(255, 255, 255, .06); }
.dlp .nav a { border-radius: 99px; padding: 6px 14px; }
.dlp .nav a:hover, .dlp .nav a.on { background: rgba(255, 255, 255, .08); }
.dlp .seg { border-radius: 99px; border-color: var(--card-line); }
.dlp .seg button.on { background: rgba(255, 255, 255, .1); }
.dlp .muted { color: var(--soft); }
.dlp .label { color: var(--brand); text-transform: uppercase; letter-spacing: .08em; }

/* ---- sections ---- */
.sec { max-width: 1040px; margin: 0 auto; padding: 84px 16px 0; }
.sec.first { padding-top: 56px; }
.sec.tight { padding-top: 40px; }
.sec.narrow { max-width: 720px; }
.sec-head { text-align: center; margin-bottom: 36px; }
.sec-head h1, .sec-head h2 { font-size: clamp(28px, 5vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.sec-head p { margin: 12px 0 0; color: var(--soft); font-size: 16px; }
.sec-head .row { justify-content: center; margin-top: 14px; }
.sec-foot { text-align: center; margin-top: 24px; }
.sec > .label { margin-bottom: 12px; }
.sec-head .label { margin: 0 0 10px; font-size: 12px; }

/* ---- buttons and fields ---- */
/* :where keeps these at one class, so page widgets (.tab, .seg, .shot-btn)
   keep their own look. */
.dlp :where(button:not(.shot-btn), .btn) {
  border-radius: 99px; padding: 10px 20px; font-weight: 700;
  background: rgba(255, 255, 255, .06); border-color: var(--card-line);
  transition: background .15s, transform .15s;
}
.dlp :where(button:not(.shot-btn), .btn):hover { background: rgba(255, 255, 255, .12); }
.dlp :where(button, .btn).go { background: var(--brand); border-color: var(--brand); color: #04201f; }
.dlp :where(button, .btn).go:hover { background: #8df0e9; transform: scale(1.03); }
.dlp button.danger { background: rgba(255, 122, 114, .08); border-color: rgba(255, 122, 114, .35); color: var(--bad); }
.dlp button.danger:hover { background: rgba(255, 122, 114, .16); }
.dlp button.link { background: none; border: 0; border-radius: 0; padding: 0; color: var(--brand); font-weight: 600; }
.dlp button.link:hover { background: none; transform: none; }
.dlp button:disabled { transform: none; }
.dlp input { border-radius: 12px; padding: 11px 14px; background: rgba(255, 255, 255, .03); border-color: var(--card-line); }
.dlp input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(82, 209, 201, .18); }
.dlp label.check input { padding: 0; }

/* ---- cards ---- */
.dlp .panel { background: var(--card); border-color: var(--card-line); border-radius: 20px; padding: 24px; }
.dlp .panel h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.dlp .panel + .panel { margin-top: 14px; }
.dlp .note {
  border: 1px solid rgba(82, 209, 201, .35); border-radius: 14px;
  background: rgba(82, 209, 201, .08); padding: 12px 16px;
}
.dlp .tag { border-radius: 99px; padding: 2px 9px; background: rgba(255, 255, 255, .08); }
.dlp .list li { border-top-color: var(--card-line); }

/* ---- hero (home) ---- */
.dlp .hero { border-bottom: 0; background: #0b0f15; }
.dlp .hero img { height: min(78vh, 680px); }
.dlp .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 15, 21, .25), rgba(11, 15, 21, 0) 35%, rgba(11, 15, 21, .7) 75%, #0b0f15);
}
.dlp .hero .card {
  z-index: 1; bottom: 48px; max-width: 560px; padding: 32px;
  background: rgba(11, 15, 21, .55); backdrop-filter: blur(14px);
  border: 1px solid var(--card-line); border-radius: 24px;
}
.dlp .hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin-bottom: 12px; }
.dlp .hero p { color: #a9b5c4; font-size: 16px; }
.dlp .hero .card .row { margin-top: 22px; }
.dlp .hero .btn { margin-top: 0; padding: 14px 28px; font-size: 16px; }
@media (max-width: 640px) {
  .dlp .hero img { height: 74vh; }
  .dlp .hero .card { left: 16px; right: 16px; bottom: 16px; padding: 22px; }
}

/* ---- the maps strip ---- */
.dlp .strip { gap: 14px; grid-auto-columns: minmax(240px, 1fr); }
.dlp .shot { border-color: var(--card-line); border-radius: 20px; transition: border-color .2s; }
.dlp .shot img { transition: transform .4s; }
.dlp .shot:hover { border-color: var(--hover-line); }
.dlp .shot:hover img { transform: scale(1.05); }
.dlp .shot.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.dlp .shot figcaption {
  padding: 28px 14px 12px; font: 600 14px "Inter", system-ui, sans-serif;
  background: linear-gradient(transparent, rgba(11, 15, 21, .9));
}

/* ---- features (home) ---- */
.dlp .feats { gap: 14px; }
.dlp .feat { background: var(--card); border-color: var(--card-line); border-radius: 20px; padding: 24px; transition: border-color .2s, transform .2s; }
.dlp .feat:hover { border-color: var(--hover-line); transform: translateY(-4px); }
.dlp .feat svg { width: 48px; height: 48px; padding: 12px; margin-bottom: 16px; border-radius: 14px; background: rgba(82, 209, 201, .1); stroke: var(--brand); }
.dlp .feat h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.dlp .feat p { color: var(--body); line-height: 1.55; }

/* ---- store items ---- */
.dlp .items { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.dlp .item { background: var(--card); border-color: var(--card-line); border-radius: 24px; transition: border-color .2s, transform .2s; }
.dlp .item:hover { border-color: var(--hover-line); transform: translateY(-4px); }
.dlp .item .pic { border-bottom: 0; overflow: hidden; }
.dlp .item .pic img { transition: transform .4s; }
.dlp .item:hover .pic img { transform: scale(1.05); }
.dlp .item .pic.none { background-color: #101722; }
.dlp .item .body { padding: 18px 20px 20px; gap: 8px; }
.dlp .item .kind { color: var(--brand); }
.dlp .item h3 { font-size: 19px; font-weight: 750; letter-spacing: -.03em; }
.dlp .item p { color: var(--body); }
.dlp .item .foot { margin-top: 10px; }
.dlp .item .price { font: 700 17px var(--mono); }

.dlp footer { margin-top: 84px; border-top-color: rgba(255, 255, 255, .06); }

@media (prefers-reduced-motion: reduce) {
  .dlp .item, .dlp .feat, .dlp .shot img, .dlp .item .pic img { transition: none; }
  .dlp .item:hover, .dlp .feat:hover, .dlp :where(button, .btn).go:hover { transform: none; }
  .dlp .shot:hover img, .dlp .item:hover .pic img { transform: none; }
}