/* The store (/store/, /buy, the thank-you page): on the site's tokens and GP2-style frames (styles.css), its dialog
   pages on the editor's login screens' layout (cms.css). */

/* A key: VT323 in gold, chosen whole with one click */
.store-key {
  font: 400 clamp(1.45rem, 1rem + 2.2vw, 2.1rem)/1.15 var(--f-hud);
  letter-spacing: 0.06em; word-spacing: 0;
  color: var(--gold-200);
  user-select: all; -webkit-user-select: all;
  overflow-wrap: anywhere;
}
.store-key-big {
  margin: 0.4em 0 0.6em !important;
  padding: 12px 8px;
  font-size: clamp(1.1rem, 0.4rem + 3.6vw, 2.1rem);   /* 28 characters on one line, down to a phone */
  letter-spacing: 0.03em;
  background: var(--brg-950);
  border: 3px solid;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}

/* The login form's field only robots fill in */
.store-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The logged-in page */
.store-page { min-height: 100svh; }
.store-page .hud { justify-content: space-between; }
.store-nav { display: flex; gap: 8px; }
.store-nav form { display: contents; }
.store-nav .btn, .store-remove { min-width: 0; min-height: 32px; padding: 0.2em 0.9em; font-size: 0.95rem; }
.store-main { padding-block: 28px 64px; display: grid; gap: 20px; }
.store-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; }
.store-title { font: 400 clamp(1.7rem, 1.1rem + 2vw, 2.4rem)/1.1 var(--f-display); color: var(--text); }
.store-who { color: var(--text-dim); overflow-wrap: anywhere; }
.store-flash { padding: 10px 14px; color: var(--ink); background: var(--gold-300); font-weight: 500; }
.store-block .panel { padding: clamp(16px, 2.4vw, 26px); }
.store-label { font: 600 0.95rem/1.2 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-300); }
.store-gap { margin-top: 1.4em; }
.store-meta, .store-hint, .store-none { margin-top: 0.5em; font-size: 0.95rem; color: var(--text-faint); }
.store-hint { margin-top: 1em; }
.store-text { color: var(--text-dim); max-width: 70ch; }
.store-revoked { margin-left: 8px; padding: 2px 8px; font: 600 0.85rem/1.2 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: #ff8f80; }
.store-computers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.store-computer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px;
  padding: 10px 12px; background: rgb(0 0 0 / 0.25); border-left: 3px solid var(--gold-600);
}
.store-computer-name { color: var(--text); overflow-wrap: anywhere; }
.store-computer-meta { grid-column: 1; font-size: 0.9rem; color: var(--text-faint); }
.store-computer form { grid-column: 2; grid-row: 1 / span 2; }
.store-buttons { justify-content: flex-start; }
@media (max-width: 480px) {
  .store-computer { grid-template-columns: minmax(0, 1fr); }
  .store-computer form { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* ---------- /buy: the full version's page (cms-app/buy.html, lib/buy.php) ---------- */

.buy-head { position: relative; isolation: isolate; padding-bottom: clamp(32px, 6vw, 72px); }
.buy-head .duo-dim::after { background: rgb(0 14 7 / 0.78); }
.buy-wrap { width: min(100% - 2 * var(--gutter), 1120px); margin: clamp(24px, 5vw, 56px) auto 0; display: grid; gap: clamp(24px, 4vw, 40px); }

/* The top: the box shot (no frame of its own: a box with a shadow, its background clear; opens in the viewer) and what
   the full version is */
.buy-hero { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; }
@media (min-width: 880px) { .buy-hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.buy-box { display: grid; place-items: center; }
.buy-shot { width: min(100%, 400px); }
.buy-shot img { width: 100%; height: auto; border: 0; filter: drop-shadow(0 18px 28px rgb(0 0 0 / 0.55)); transition: transform 0.25s ease; }
.buy-shot:hover img { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .buy-shot img { transition: none; } .buy-shot:hover img { transform: none; } }
@media (max-width: 879px) { .buy-shot { width: min(62%, 300px); } }
.buy-heading { font: 400 clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem)/1.1 var(--f-display); color: var(--gold-300); text-shadow: 1px 1px 0 #000; }
.buy-heading small { display: block; margin-bottom: 8px; font: 600 0.9rem/1 var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint); }
.buy-intro { margin-top: 14px; font-size: 1.12rem; color: var(--text); }
.buy-needs { margin-top: 16px; color: var(--text-dim); }
.buy-systems { margin-top: 4px; font-size: 0.95rem; color: var(--text-faint); }
.buy-store { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(232 199 102 / 0.25); color: var(--text); }
.buy-geo a { color: inherit; }

/* The video above the versions: the home page's (styles.css .video) */
.buy-video { width: min(100%, 820px); margin: 0 auto; container-type: inline-size; }

/* The versions: the home page's full-version card (styles.css .card-full), one each, side by side */
.buy-versions-title { font: 400 clamp(1.4rem, 1.1rem + 1vw, 1.8rem)/1.2 var(--f-display); color: var(--gold-300); text-align: center; text-shadow: 1px 1px 0 #000; }
.buy-versions { display: grid; gap: clamp(18px, 3vw, 28px); align-items: stretch; }
.buy-n1 { width: min(100%, 640px); margin-inline: auto; }
@media (min-width: 760px) { .buy-n2, .buy-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .buy-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.buy-card { scroll-margin-top: calc(var(--hud-h) + 16px); }
.buy-card .card-bar { flex-wrap: wrap; padding-block: 14px; }
.buy-card .card-bar h2 { font: 400 clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem)/1.15 var(--f-display); color: var(--brg-950); text-shadow: 0 1px 0 rgb(255 245 205 / 0.6); }
.buy-price { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.buy-desc { padding: 14px 18px 0; color: var(--text); }
.buy-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding: 24px 18px 0; }
.buy-now { min-width: 12em; font-size: 1.2rem; padding-block: 0.55em; }
.buy-pay { padding: 0 18px; margin-top: 12px; color: var(--text-dim); }

/* ---------- /demo: the free demo's download page (cms-app/demo.html, lib/demo.php), on /buy's parts ---------- */

.demo-hero { display: grid; gap: clamp(20px, 3vw, 32px); align-items: stretch; }
@media (min-width: 880px) { .demo-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }
.demo-hero > .frame { display: flex; }
.demo-hero > .frame > .panel { flex: 1; }
.demo-steps { display: grid; gap: 14px; padding: 0; list-style: none; counter-reset: demo-step; }
.demo-steps li { position: relative; padding-left: 2.7rem; color: var(--text); line-height: 1.45; counter-increment: demo-step; }
.demo-steps li::before {
  content: counter(demo-step);
  position: absolute; left: 0; top: -0.15rem;
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  font: 400 1.3rem/1 var(--f-hud); color: var(--ink);
  background: linear-gradient(var(--gold-200), var(--gold) 60%, var(--gold-500));
  border: 2px solid; border-color: var(--gold-100) var(--gold-700) var(--gold-700) var(--gold-100);
}