/* Prime Entity - Plugins shop
   ---------------------------------------------------------------------------
   Tokens, type scale and the button / eyebrow / section-row components are
   lifted from new.prime-entity.nl so the shop reads as part of the same site
   rather than a lookalike. The shop lives on its own subdomain and therefore
   carries its own copy rather than linking across origins: one stylesheet to
   ship, and no way for a deploy of the main site to silently restyle checkout.

   When the main site's tokens change, the :root block below is the only part
   that needs to follow. */

/* --- fonts ---------------------------------------------------------------
   Self-hosted rather than pulled from fonts.googleapis.com. Loading them from
   Google would send every visitor's IP address to a third country on page
   load, which needs a legal basis we do not have and would have to appear in
   the privacy policy. Latin subsets only, which is all an English-language
   shop needs: 96 KB for the set, and one fewer origin to depend on.

   swap keeps text readable while they load, so a slow connection sees the
   fallback face rather than nothing. */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
}

/* Variable: one file covers every weight the pages ask for. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

:root {
  --bg:        #07080F;
  --bg-2:      #0C0E1A;
  --surface:   #111420;
  --text:      #E6EAF0;
  --muted:     #7B8FA8;
  --muted-2:   #A2B4C6;
  --accent:    #009fe3;
  --accent-dim: rgba(0, 159, 227, 0.10);
  --line:      rgba(255, 255, 255, 0.065);
  --line-2:    rgba(255, 255, 255, 0.04);

  --font-d: 'Barlow Condensed', sans-serif;
  --font-b: 'Inter', sans-serif;

  --header-h: 74px;
  --max-w: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The plug-in's own olive/mint palette. Used only inside plug-in artwork
     frames, never for chrome - two accent colours competing across the page
     would read as a broken theme rather than a product shot. */
  --plugin-olive: #33352a;
  --plugin-mint: #B5E3D0;
}

html.light {
  --bg:      #F4F6FB;
  --bg-2:    #EBEDF4;
  --surface: #E2E5EE;
  --text:    #0C0E1A;
  --muted:   #798094;
  --muted-2: #484F65;
  --line:    rgba(0, 0, 0, 0.09);
  --line-2:  rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: #07080F; }
html.light { background: #F4F6FB; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}

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

h1, h2, h3 {
  font-family: var(--font-d);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: clamp(2.9rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 700; }

p { margin: 0; }

.container { width: min(var(--max-w), 92%); margin-inline: auto; }
.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section.tight { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.section-alt { background: var(--bg-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin-top: 0.7rem; }
.section-head p { margin-top: 1.1rem; color: var(--muted-2); max-width: 44rem; }
.section-head.center p { margin-inline: auto; }

.lead { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--muted-2); }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2.4rem;
  font-family: var(--font-b);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}

.btn-primary { background: var(--accent); color: #fff; }

.btn-primary:hover {
  background: #005579;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 85, 121, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  padding: calc(1rem - 1px) calc(2.4rem - 1px);
}

.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); }
html.light .btn-ghost:hover { border-color: rgba(0, 0, 0, 0.25); }

.btn-text {
  background: transparent;
  color: var(--muted-2);
  padding: 0;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}

.btn-text::after { content: ' →'; transition: margin 0.2s; }
.btn-text:hover { color: var(--text); }
.btn-text:hover::after { margin-left: 4px; }

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- header ------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(7, 7, 15, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}

html.light .site-header { background: rgba(244, 246, 251, 0.92); }

.nav { display: flex; align-items: center; gap: 3rem; }
.brand-logo { height: 26px; width: auto; }
html.light .brand-logo { filter: invert(1); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color 0.2s;
}

.nav-links a:hover, .nav-links a.active { color: var(--text); }



html.light 
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.2s, background 0.2s;
}

html.light .nav-cta { border-color: rgba(0, 0, 0, 0.2); }
.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- hero --------------------------------------------------------------- */

/* style.css gives .hero a full-screen 100svh box with its content pushed to the
   bottom, which is right for a studio landing page and wrong for a shop page
   that opens straight into a product. Reset what carries over. */
.hero {
  position: relative;
  min-height: 0;
  height: auto;
  display: block;
  /* style.css hard-codes #07080F here for the studio heroes, which sit behind a
     photograph. A shop hero has no image, so that colour would stay black in
     light mode while the rest of the page turned white. */
  background: transparent;
  padding: calc(var(--header-h) + clamp(3.5rem, 7vw, 6rem)) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% 18%, rgba(0, 159, 227, 0.16), transparent 62%),
    radial-gradient(45rem 35rem at 8% 82%, rgba(0, 100, 160, 0.10), transparent 65%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 { margin-top: 0.9rem; }

/* style.css paints .hero text white in both themes, because every studio hero
   sits on a photograph. A shop hero sits on the page background, so white text
   vanishes the moment someone switches to light mode. These selectors mirror
   the originals' specificity and shop.css loads second, so they win. */

.hero .eyebrow,
html.light .hero .eyebrow { color: var(--muted-2); }

.hero h1,
html.light .hero h1 { color: var(--text); }

.hero .lead,
html.light .hero .lead { color: var(--muted-2); }

.hero .btn-text,
html.light .hero .btn-text { color: var(--muted-2); }

.hero .btn-text:hover,
html.light .hero .btn-text:hover { color: var(--text); }

html.light .hero { color: var(--text); }



.hero-sub {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-top: 0.55rem;
}

.hero .lead { margin-top: 1.3rem; max-width: 34rem; }

.hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}

.hero-meta {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.hero-meta li { list-style: none; display: flex; align-items: center; gap: 0.45rem; }
.hero-meta li::before { content: '✓'; color: var(--accent); font-size: 0.8rem; }
.hero-meta { padding: 0; margin-inline: 0; }

/* --- plug-in artwork frame ---------------------------------------------- */

/* The screenshots carry the plug-in's olive palette, which is a long way from
   the site's navy. Framing them - dark mat, hairline border, real shadow -
   makes that read as a deliberate product shot instead of a colour clash. */
.plugin-frame {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 60%), var(--surface);
  padding: clamp(0.5rem, 1.2vw, 0.9rem);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
}

html.light .plugin-frame { box-shadow: 0 30px 70px rgba(12, 14, 26, 0.18); }

.plugin-frame img { width: 100%; height: auto; }

.plugin-frame figcaption {
  margin-top: 0.75rem;
  padding: 0 0.2rem 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Video slot: an <video> drops straight in where the <img> sits and inherits
   the same frame. Poster keeps the layout stable before the file loads. */
.plugin-frame video { width: 100%; height: auto; display: block; background: var(--plugin-olive); }

/* Bottom-right: the plug-in's own logo sits top-left, and two wordmarks in one
   corner read as a mistake. */
.media-tag {
  position: absolute;
  bottom: calc(clamp(0.5rem, 1.2vw, 0.9rem) + 0.6rem);
  right: calc(clamp(0.5rem, 1.2vw, 0.9rem) + 0.6rem);
  z-index: 2;
  padding: 0.3rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(7, 8, 15, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
}

/* --- before / after ------------------------------------------------------
   The product's whole argument in one glance: the same result, six steps or
   one. The two columns are deliberately the same width, so the difference is
   the number of rows rather than any styling trick. */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

/* Equal-height columns with the closing line pinned to the bottom of each, so
   "then start mixing" and "then keep mixing" sit on the same baseline and the
   gap between them is the whole argument. */
.compare-col {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.4rem, 2.5vw, 2rem);
}

.compare-col .compare-foot { margin-top: auto; }

.compare-col.is-better { border-color: rgba(0, 159, 227, 0.4); }

.compare-col h3 { font-size: 1.15rem; margin-top: 0.6rem; }
.compare-col.is-better h3 { color: var(--accent); }

.compare-steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 0.75rem;
}

.compare-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  font-size: 0.9rem;
  color: var(--muted-2);
  line-height: 1.55;
}

.compare-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  /* Nudged up so a 1.6rem box sits centred on the 1.4rem first line rather than
     hanging below it. */
  top: -0.1rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  font-family: var(--font-d);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
}

.compare-col.is-better .compare-steps li::before {
  color: var(--accent);
  border-color: rgba(0, 159, 227, 0.45);
}

.compare-foot {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare-col.is-better .compare-foot { color: var(--accent); }

/* --- feature rows (mirrors the main site's service list) ---------------- */

.feature-list { border-top: 1px solid var(--line); }

.feature-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: baseline;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left 0.35s var(--ease);
  overflow: hidden;
}

.feature-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.35s var(--ease);
}

.feature-row:hover { padding-left: 1.5rem; }
.feature-row:hover::before { transform: scaleY(1); }

.feature-idx {
  font-family: var(--font-d);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.5;
  transition: opacity 0.2s;
}

.feature-row:hover .feature-idx { opacity: 1; }
.feature-row h3 { transition: color 0.2s; }
.feature-row:hover h3 { color: var(--accent); }
.feature-row p { color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem; line-height: 1.6; }

/* --- split blocks ------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.split.reverse > :first-child { order: 2; }

/* --- product cards (shop index) ----------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.2rem);
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.3s, transform 0.35s var(--ease), box-shadow 0.35s;
}

.product-card:hover {
  border-color: rgba(0, 159, 227, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.product-card.is-soon:hover { border-color: var(--line); transform: none; box-shadow: none; }

.product-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--plugin-olive);
  border-bottom: 1px solid var(--line);
}

.product-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-shot img { transform: scale(1.03); }

/* Dimmed so an unreleased plug-in never reads as buyable at a glance. */
.product-card.is-soon .product-shot img { opacity: 0.38; }

.badge {
  position: absolute;
  z-index: 2;          /* the <img> follows this in the DOM and would paint over it */
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(7, 8, 15, 0.75);
  border: 1px solid var(--line);
  color: var(--muted-2);
  backdrop-filter: blur(8px);
}

.badge.badge-live { color: var(--accent); border-color: rgba(0, 159, 227, 0.45); }

.product-body { padding: clamp(1.4rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.product-body .eyebrow { font-size: 0.65rem; }
.product-body h3 { margin-top: 0.6rem; }
.product-body p { margin-top: 0.7rem; color: var(--muted); font-size: 0.9rem; }

.product-foot {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.price { font-family: var(--font-d); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.price small { font-family: var(--font-b); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--muted); display: block; margin-top: 0.35rem; text-transform: uppercase; }

/* --- buy panel ---------------------------------------------------------- */

.buy-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.buy-price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.8rem; }
.buy-price .amount { font-family: var(--font-d); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 0.9; }
.buy-price .note { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; padding-bottom: 0.35rem; }

/* The list price the offer is measured against. Struck through and quiet, so it
   frames the real price without competing with it. */
.was {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  line-height: 1;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  padding-bottom: 0.3rem;
}

.save-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(0, 159, 227, 0.45);
  background: var(--accent-dim);
}

.price .was {
  font-size: 1.05rem;
  padding-bottom: 0;
  margin-right: 0.4rem;
  text-decoration-thickness: 1px;
}

.includes { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0.7rem; }

/* The tick is positioned rather than a grid or flex item, so a list item can
   contain <strong>, links or several text nodes and still read as one line. */
.includes li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.88rem;
  color: var(--muted-2);
}

.includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 600;
}
.buy-panel .btn { width: 100%; margin-top: 1.8rem; }

.buy-fine { margin-top: 1rem; font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.6; }

/* --- spec table --------------------------------------------------------- */

.spec-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.95rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 34%; font-weight: 500; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; padding-right: 1.5rem; }
.spec-table td { color: var(--muted-2); }

/* --- notice ------------------------------------------------------------- */

.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--accent-dim);
  font-size: 0.86rem;
  color: var(--muted-2);
}

.notice strong { color: var(--text); font-weight: 600; }
.notice code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; color: var(--text); }

/* --- faq ---------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  text-transform: uppercase;
  transition: color 0.2s;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--accent); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.6rem; color: var(--muted-2); font-size: 0.92rem; max-width: 52rem; }
.faq details p + p { padding-top: 0; margin-top: -0.8rem; }

/* --- notify form -------------------------------------------------------- */

.notify { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.4rem; }

.notify input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.95rem 1.1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 0.85rem;
  transition: border-color 0.2s;
}

.notify input::placeholder { color: var(--muted); }
.notify input:focus { outline: none; border-color: var(--accent); }
.notify .btn { flex: 0 0 auto; padding-inline: 1.6rem; }
.notify-msg { margin-top: 0.7rem; font-size: 0.78rem; color: var(--muted); }

/* --- account forms -------------------------------------------------------- */

.auth-form { display: grid; gap: 0.4rem; }

.auth-form label {
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 1rem;
}

.auth-form label:first-of-type { margin-top: 0; }

.auth-form input[type='email'],
.auth-form input[type='password'],
.auth-form input[type='text'] {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

html.light .auth-form input { background: #fff; }

.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form input[hidden] { display: none; }

.field-hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

.auth-form .btn { margin-top: 1.8rem; justify-self: start; }

@media (max-width: 480px) {
  .auth-form .btn { width: 100%; }
}

/* --- long-form legal text ------------------------------------------------
   Narrower measure than the marketing sections: terms and a privacy policy are
   read line by line rather than scanned, and 38rem keeps that comfortable. */

.prose { max-width: 38rem; }
.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 3rem 0 1rem; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font-size: 1rem; margin: 1.8rem 0 0.6rem; letter-spacing: 0.02em; }
.prose p, .prose li { color: var(--muted-2); font-size: 0.94rem; line-height: 1.75; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); font-weight: 600; }

.prose dl { margin: 0 0 1.2rem; }
.prose dt { color: var(--text); font-weight: 600; font-size: 0.9rem; margin-top: 1rem; }
.prose dd { margin: 0.25rem 0 0; color: var(--muted-2); font-size: 0.94rem; line-height: 1.7; }

.doc-meta {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* --- footer ------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding: clamp(3rem, 5vw, 4rem) 0 2.5rem; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 2.5rem;
  align-items: start;
}

.site-footer h4 { font-family: var(--font-b); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: var(--muted-2); font-size: 0.86rem; transition: color 0.2s; }
.site-footer a:hover { color: var(--text); }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--muted);
}

/* --- sticky mobile buy bar ---------------------------------------------- */

.buy-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem clamp(1rem, 4vw, 1.5rem);
  background: rgba(7, 8, 15, 0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}

html.light .buy-bar { background: rgba(244, 246, 251, 0.95); }
.buy-bar.is-visible { transform: translateY(0); }
.buy-bar .price { font-size: 1.4rem; }
.buy-bar .btn { padding: 0.85rem 1.6rem; }

/* --- reveal on scroll ---------------------------------------------------
   Gated behind html.js, which the inline head script sets. The animation is
   an enhancement, so the hidden state may only exist where the script that
   un-hides it is definitely running: no JS, a blocked file or a thrown error
   must leave a readable page rather than half a shop at opacity 0. */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .plugin-frame { order: -1; }
  .split.reverse > :first-child { order: 0; }
  .nav-links { display: none; }
  .buy-bar { display: flex; }
  body { padding-bottom: 4.5rem; }
}

@media (max-width: 640px) {
  /* At phone width the artwork is a few hundred pixels wide and the caption
     ends up covering the thing it is labelling. The alt text still carries it. */
  .media-tag { display: none; }
}

@media (max-width: 560px) {
  .feature-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .hero-actions .btn { width: 100%; }
}