/* ============================================================
   BOX OF RULES PLUGINS stylesheet.
   The boxofrules.com design system (hard-rock direction: near-black
   base, amber drive, cyan + oxblood accents) with two store-only
   additions from the vault colour scheme, violet and signal green,
   plus binary/glitch machine energy. Values match the main site
   where the token exists there.
   ============================================================ */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/anton-400.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/assets/fonts/oswald.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-600.woff2") format("woff2");
}

:root {
  --ink:    #0B0B0C;
  --coal:   #131210;
  --coal-2: #1C1A17;
  --bone:   #ECE6D8;
  --bone-2: #B7B0A0;
  --mute:   #948D82;
  --amber:  #F2A20C;
  --amber-2:#FFB938;
  --cyan:   #5FB4C4;
  --blood:  #C42424;
  --green:  #6FBF73;
  --signal: #2ECC40;   /* vault: vocals lead green; THE store accent with violet */
  --signal-2: #58E86A;
  --violet: #8E5EB0;   /* vault: bridge purple, departure/contrast */
  --violet-2:#9B59B6;
  --line:   #2A2722;
  --maxw:   1240px;
  --ease:   cubic-bezier(.2,.6,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: "Barlow", system-ui, sans-serif; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* film grain overlay, same as the main site */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
a { color: var(--signal); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--violet-2); }
img { display: block; max-width: 100%; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
::selection { background: var(--signal); color: var(--ink); }

.display { font-family: "Anton","Oswald",sans-serif; font-weight: 400; letter-spacing: .005em; text-transform: uppercase; line-height: 1.04; }
.cond { font-family: "Oswald", sans-serif; text-transform: uppercase; }
.eyebrow {
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .26em; font-size: 13px; color: var(--signal);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 38px; height: 2px; background: var(--signal); display: inline-block; }
.muted { color: var(--mute); }
.small { font-size: 14px; }

/* ── NAV ─────────────────────────────────────────── */
header.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,11,12,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--bone); }
.brand:hover { color: var(--bone); }
.brand-logo { height: 40px; width: auto; display: block; }
.brand .bt { font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 32px; letter-spacing: .18em; line-height: 1; color: var(--signal); }
nav.links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
nav.links a {
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: 14px; color: var(--bone-2); position: relative; padding: 4px 0;
}
nav.links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--signal); transition: width .22s var(--ease); }
nav.links a:hover { color: var(--bone); }
nav.links a:hover::after, nav.links a.active::after { width: 100%; }
nav.links a.active { color: var(--signal); }
nav.links a.nav-credits {
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink) !important; background: var(--signal); padding: 10px 18px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
nav.links a.nav-credits::after { display: none; }
nav.links a.nav-credits:hover { background: var(--signal-2); color: var(--ink); }

/* ── BUTTONS / FORMS ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  font-size: 14px; padding: 12px 22px; border: 2px solid var(--bone); background: var(--bone); color: var(--ink);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .05s linear;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.btn:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--bone); }
.btn.ghost:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn.danger { background: transparent; border-color: var(--blood); color: var(--blood); }
.btn.danger:hover { background: var(--blood); color: var(--bone); }
.btn.small { padding: 7px 14px; font-size: 12px; }
.btn.cta { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn.cta:hover { background: var(--signal-2); border-color: var(--signal-2); }

label { display: block; font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--bone-2); margin: 18px 0 8px; }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; font: inherit; color: var(--bone);
  background: var(--coal); border: 1px solid var(--line); padding: 11px 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--signal); outline-offset: -1px; }
form .hint { color: var(--mute); font-size: 14px; margin-top: 10px; }

.flash {
  border: 1px solid var(--signal); border-left-width: 4px; background: var(--coal);
  color: var(--bone); padding: 12px 16px; margin: 20px auto 0; max-width: var(--maxw);
}
.flash.error { border-color: var(--blood); }

/* ── STORE HERO ──────────────────────────────────── */
.store-hero { padding: 96px 28px 44px; position: relative; }
.store-hero > * { position: relative; z-index: 1; }
/* the Box Of Rules sign, masked twice and glitching slowly at the side */
.store-hero .hero-icon {
  position: absolute; top: 50%; right: 3vw; transform: translateY(-52%);
  width: min(380px, 34vw); aspect-ratio: 1; pointer-events: none; z-index: 0;
}
.hero-icon::before, .hero-icon::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("/assets/img/bor-icon.svg") center / contain no-repeat;
  mask: url("/assets/img/bor-icon.svg") center / contain no-repeat;
}
.hero-icon::before { background: var(--signal); opacity: .09; animation: icon-glitch-a 11s var(--ease) infinite; }
.hero-icon::after { background: var(--violet-2); opacity: .09; animation: icon-glitch-b 11s var(--ease) infinite; }
@keyframes icon-glitch-a {
  0%, 70%, 100% { transform: translate(0, 0); clip-path: none; opacity: .09; }
  35% { transform: translate(-5px, 3px); }
  72% { transform: translate(-12px, 2px); clip-path: inset(0 0 48% 0); opacity: .16; }
  75% { transform: translate(7px, -3px); clip-path: inset(30% 0 22% 0); }
  78% { transform: translate(-5px, 0); clip-path: inset(62% 0 0 0); opacity: .13; }
  81% { transform: translate(0, 0); clip-path: none; opacity: .09; }
}
@keyframes icon-glitch-b {
  0%, 68%, 100% { transform: translate(0, 0); clip-path: none; opacity: .09; }
  35% { transform: translate(5px, -3px); }
  70% { transform: translate(11px, -2px); clip-path: inset(52% 0 0 0); opacity: .16; }
  73% { transform: translate(-8px, 3px); clip-path: inset(18% 0 44% 0); }
  76% { transform: translate(5px, 0); clip-path: inset(0 0 66% 0); opacity: .13; }
  79% { transform: translate(0, 0); clip-path: none; opacity: .09; }
}
.store-hero h1 { font-size: clamp(52px, 9vw, 130px); line-height: .94; }
/* blinking terminal cursor on the big titles */
.cursor::after { content: "_"; color: var(--signal); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lede { font-size: 20px; color: var(--bone-2); max-width: 640px; }
.narrow { max-width: 800px; padding-top: 64px; padding-bottom: 96px; }
.narrow h1 { font-size: clamp(40px, 6vw, 76px); }
.wrap.narrow { margin: 0 auto; }

/* ── PLUGIN GRID / CARDS ─────────────────────────── */
.plugin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px; padding: 16px 0 110px;
}
.plugin-card {
  display: block; background: var(--coal); border: 1px solid var(--line);
  overflow: hidden; color: var(--bone);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.plugin-card:hover { transform: translateY(-4px); border-color: var(--signal); color: var(--bone); }
.plugin-card-body { padding: 20px 22px 22px; }
.plugin-card-body h2 { font-size: 21px; letter-spacing: .05em; }
.plugin-card-body .muted { color: var(--bone-2); }
.plugin-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.price-chip {
  font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .1em;
  color: var(--signal); border: 1px solid var(--signal); padding: 3px 10px; font-size: 13px;
}
.price-chip::before { content: "["; opacity: .6; }
.price-chip::after { content: "]"; opacity: .6; }

/* ── GLITCH TILES ────────────────────────────────── */
.plugin-tile {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; overflow: hidden;
  background:
    radial-gradient(90% 140% at 50% 0%, var(--coal-2) 0%, var(--ink) 70%);
  border-bottom: 1px solid var(--line);
}
/* scanlines */
.plugin-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.28) 3px 4px);
}
/* per-accent static noise wash */
.plugin-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .16; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.plugin-tile span {
  position: relative; z-index: 3;
  font-family: "Anton", sans-serif; text-transform: uppercase; color: var(--bone);
  font-size: clamp(24px, 3.4vw, 38px); letter-spacing: .03em; text-align: center; padding: 0 18px;
}
/* RGB-split glitch layers from data-text */
.plugin-tile span::before, .plugin-tile span::after {
  content: attr(data-text); position: absolute; inset: 0; padding: 0 18px;
  overflow: hidden; opacity: 0;
}
/* every tile lives in the store's green/purple family */
.accent-amber  { --acc: var(--signal);   --acc2: var(--violet-2); }
.accent-cyan   { --acc: var(--signal-2); --acc2: var(--violet); }
.accent-blood  { --acc: var(--violet);   --acc2: var(--signal-2); }
.accent-violet, .accent-purple { --acc: var(--violet-2); --acc2: var(--signal); }
.accent-green  { --acc: var(--signal); --acc2: var(--violet-2); }
.plugin-tile span { text-shadow: 2px 0 var(--acc), -2px 0 var(--acc2); }
.plugin-tile span::before { color: var(--acc); }
.plugin-tile span::after { color: var(--acc2); }
.plugin-card:hover .plugin-tile span::before,
.plugin-tile.big:hover span::before {
  opacity: .9; animation: glitch-a .45s steps(2) infinite;
}
.plugin-card:hover .plugin-tile span::after,
.plugin-tile.big:hover span::after {
  opacity: .9; animation: glitch-b .45s steps(2) infinite reverse;
}
@keyframes glitch-a {
  0%   { transform: translate(-3px, 0);  clip-path: inset(0 0 62% 0); }
  25%  { transform: translate(3px, 1px); clip-path: inset(38% 0 22% 0); }
  50%  { transform: translate(-2px, 0);  clip-path: inset(70% 0 0 0); }
  75%  { transform: translate(2px, -1px); clip-path: inset(12% 0 55% 0); }
  100% { transform: translate(-3px, 0);  clip-path: inset(45% 0 30% 0); }
}
@keyframes glitch-b {
  0%   { transform: translate(3px, 1px);  clip-path: inset(55% 0 10% 0); }
  25%  { transform: translate(-3px, 0);   clip-path: inset(0 0 75% 0); }
  50%  { transform: translate(2px, -1px); clip-path: inset(30% 0 40% 0); }
  75%  { transform: translate(-2px, 0);   clip-path: inset(65% 0 5% 0); }
  100% { transform: translate(3px, 0);    clip-path: inset(8% 0 68% 0); }
}
/* accent tick in the tile corner */
.plugin-tile i {
  position: absolute; left: 14px; top: 12px; z-index: 3; font-style: normal;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .3em;
  color: var(--acc); opacity: .85;
}
.plugin-tile.big { border: 1px solid var(--line); }
.plugin-tile.mini { aspect-ratio: auto; width: 104px; height: 58px; flex: none; }
.plugin-tile.mini span { font-size: 12px; text-shadow: 1px 0 var(--acc), -1px 0 var(--acc2); }
.plugin-tile.mini i { display: none; }

.product { padding: 84px 28px 120px; }
.product-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.product-grid h1 { font-size: clamp(44px, 6vw, 88px); }
@media (max-width: 880px) { .product-grid { grid-template-columns: 1fr; } }

/* ── SELECT-A-PRICE TIERS ────────────────────────── */
.tier-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.tier { display: inline-flex; margin: 0; }
.tier input { position: absolute; opacity: 0; pointer-events: none; }
.tier span {
  font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .1em; font-size: 15px;
  border: 1px solid var(--line); padding: 10px 20px; cursor: pointer;
  background: var(--coal); color: var(--bone-2); transition: all .15s var(--ease);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.tier span:hover { border-color: var(--bone-2); color: var(--bone); }
.tier input:checked + span { background: var(--violet-2); border-color: var(--violet-2); color: var(--ink); }
/* the $0 choice reads as the green "go", paid tiers go purple */
.tier input[value="0"]:checked + span { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.tier input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.small-tier span { padding: 6px 11px; font-size: 12px; }
.price-form { margin-top: 28px; }
.price-form .btn { margin-top: 18px; margin-bottom: 14px; }

/* ── CART + CHECKOUT ─────────────────────────────── */
.cart-list { margin: 30px 0; display: grid; gap: 14px; }
.cart-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--coal); border: 1px solid var(--line); padding: 14px 18px;
}
.cart-row.slim { justify-content: space-between; }
.cart-row-name { flex: 1; min-width: 140px; }
.cart-row-name .muted { color: var(--mute); }
.cart-tiers { display: flex; gap: 6px; }
.cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.cart-total { font-size: 24px; letter-spacing: .06em; color: var(--bone); }

.support-prompt {
  position: relative; background: var(--coal); border: 1px solid var(--violet);
  border-left-width: 4px; padding: 24px 26px; margin: 30px 0; overflow: hidden;
}
.support-prompt::after {
  content: "► ► ►"; position: absolute; right: 18px; top: 16px;
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .4em;
  color: var(--violet-2); opacity: .7;
}
.support-prompt h2 { font-size: 20px; margin-bottom: 10px; color: var(--violet-2); }
.support-prompt p { color: var(--bone-2); }

/* ── DOWNLOADS ───────────────────────────────────── */
.dl-block { background: var(--coal); border: 1px solid var(--line); padding: 22px 26px; margin: 18px 0; }
.dl-block h2 { color: var(--bone); letter-spacing: .05em; }
.rel-tag { color: var(--signal); letter-spacing: .14em; font-size: 13px; margin: 10px 0 4px; }
.rel-tag::before { content: ">> "; opacity: .6; }
.rel-assets { list-style: none; margin: 8px 0 0; padding: 0; }
.rel-assets li { padding: 8px 0; border-top: 1px solid var(--line); }
.rel-assets a { color: var(--signal); }
.rel-assets a:hover { color: var(--signal); }
.paypal-zone { max-width: 420px; margin: 34px 0 12px; background: var(--bone); padding: 18px; }

/* ── FOOTER ──────────────────────────────────────── */
footer.site { background: var(--ink); border-top: 1px solid var(--line); padding: 48px 0 40px; margin-top: 40px; }
.foot-inner { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; color: var(--mute); font-size: 14px; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--bone-2); }
.foot-links a:hover { color: var(--bone); }

/* ── MOTION OFF ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cursor::after, .hero-icon::before, .hero-icon::after { animation: none; }
  .plugin-card:hover .plugin-tile span::before,
  .plugin-card:hover .plugin-tile span::after,
  .plugin-tile.big:hover span::before,
  .plugin-tile.big:hover span::after { animation: none; opacity: 0; }
  .plugin-card, .btn { transition: none; }
}

/* ── PRODUCT PAGE (ported from boxofrules.com plugin pages) ── */
.page-head { padding: 90px 28px 0; max-width: var(--maxw); margin: 0 auto; }
.page-head .eyebrow { margin-bottom: 16px; }
.page-head h1 { font-size: clamp(44px, 5.5vw, 84px); line-height: 1.02; }
.page-head p { color: var(--bone-2); font-size: 18px; max-width: 56ch; margin: 22px 0 0; }

.product-main { padding: 44px 28px 60px; display: grid; gap: 24px; }
/* image left, commerce right; samples ride full-width above */
@media (min-width: 920px) {
  .product-main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 40px; }
  .product-main .samples { grid-column: 1 / -1; }
}
.plugin-shot { position: relative; border: 1px solid var(--line); background: var(--coal-2); aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; }
.plugin-shot img { width: 100%; height: 100%; object-fit: cover; }
.plugin-shot.natural { aspect-ratio: auto; }
.plugin-shot.natural img { height: auto; object-fit: contain; }
.plugin-shot .badge {
  position: absolute; bottom: 16px; left: 16px; z-index: 2;
  font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; color: var(--ink); background: var(--signal); padding: 6px 12px;
}
.plugin-specs { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.tag {
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; padding: 6px 12px; border: 1px solid var(--line); color: var(--bone-2); background: rgba(0,0,0,.3);
}
.product-buy { max-width: 720px; }
.legal-note { line-height: 1.7; }
.legal-note a { color: var(--bone-2); border-bottom: 1px solid var(--line); }
.legal-note a:hover { color: var(--signal); }

/* audio example pills */
.samples { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px; }
.samples-label { font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--mute); margin-right: 4px; }
.sample {
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; color: var(--bone-2); background: transparent; border: 1px solid var(--line);
  padding: 8px 14px 8px 12px; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.sample::before { content: "\25B6"; font-size: 9px; margin-right: 8px; color: var(--signal); }
.sample:hover, .sample.playing { border-color: var(--signal); color: var(--bone); }
.sample.playing::before { content: "\25A0"; }

/* section heads + feature grid */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 70px 0 40px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.sec-head h2 { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(30px, 5vw, 60px); line-height: .98; }
.sec-head .idx { font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .2em; color: var(--mute); font-size: 13px; text-transform: uppercase; white-space: nowrap; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 880px) { .feature-grid { grid-template-columns: 1fr; } }
.post { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--coal); transition: border-color .25s var(--ease); }
.post:hover { border-color: var(--signal); }
.post .pbody { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.post .pdate { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--violet-2); }
.post h3 { font-weight: 600; font-size: 22px; line-height: 1.05; margin: 12px 0 10px; }
.post p { color: var(--bone-2); font-size: 15px; margin: 0; }

/* lite YouTube embed */
.video-feature { position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line); cursor: pointer; background: #000; }
.video-feature img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .3s var(--ease), transform .5s var(--ease); }
.video-feature:hover img { opacity: .85; transform: scale(1.03); }
.video-feature .vmask { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,11,12,.85) 100%); }
.play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--bone);
  display: grid; place-items: center; background: rgba(11,11,12,.35); transition: .25s var(--ease);
}
.video-feature:hover .play { background: var(--signal); border-color: var(--signal); transform: translate(-50%,-50%) scale(1.08); }
.play svg { width: 34px; height: 34px; margin-left: 5px; fill: var(--bone); transition: fill .25s var(--ease); }
.video-feature:hover .play svg { fill: var(--ink); }
.vcap { position: absolute; left: 28px; bottom: 24px; z-index: 3; }
.vcap .t { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(24px,3.4vw,42px); line-height: .95; }
.vcap .m { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; color: var(--bone-2); margin-top: 6px; }
.lite-yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }
.vid-note { margin-top: 14px; }
.vid-note a { color: var(--bone-2); border-bottom: 1px solid var(--line); }

/* Anagram cross-sell */
.anagram { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; align-items: center; }
@media (max-width: 880px) { .anagram { grid-template-columns: 1fr; } }
.anagram .art { border: 1px solid var(--line); overflow: hidden; }
.anagram h3 { font-weight: 600; font-size: 24px; margin-bottom: 12px; }
.anagram p { color: var(--bone-2); }
.anagram .btn { margin-top: 16px; }

/* article-ish sections + FAQ accordion */
.article-sec { padding-bottom: 20px; }
.article-body { max-width: 760px; color: var(--bone-2); }
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: 16px; color: var(--bone-2); transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after { content: "+"; color: var(--mute); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; color: var(--signal); }
.faq summary:hover, .faq details[open] summary { color: var(--bone); }
.faq .faq-a { padding: 0 0 22px; }
.faq .faq-a p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--bone-2); max-width: 64ch; }

/* index card tiles with real UI shots */
.plugin-tile .tile-img { position: absolute; inset: 0; z-index: 0; }
.plugin-tile .tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: .38; filter: saturate(.9) contrast(1.05); transition: opacity .3s var(--ease); }
.plugin-card:hover .tile-img img { opacity: .55; }

/* ── Reveal on scroll (store.js observes .reveal) ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Product-page extras ── */
.notice-banner { background: var(--coal-2); border-bottom: 1px solid var(--line); padding: 12px 0; }
.notice-banner .wrap { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.notice-banner strong { color: var(--bone); }
.notice-banner span { color: var(--bone-2); font-size: 15px; }
.kit-note { margin-top: 14px; }

.rel-meta { border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; margin: 4px 0 14px; }
.rel-meta .rel-tag { color: var(--signal); }
.rel-meta p { margin: 4px 0 0; }
.rel-meta[hidden] { display: none; }

/* stars-only rating: quiet row under the specs, lights up on hover */
.rate-row { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.rate-stars { display: inline-flex; gap: 2px; }
.rate-star {
  background: none; border: 0; padding: 2px; cursor: pointer;
  font-size: 21px; line-height: 1; color: var(--line);
  transition: color .15s var(--ease), transform .1s var(--ease);
}
.rate-star:hover { transform: scale(1.15); }
.rate-star.lit { color: var(--amber); }

/* order id: one click selects the whole thing */
.order-id { user-select: all; -webkit-user-select: all; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--bone); letter-spacing: .06em; }

/* ---- preset market + accounts (Sep 2026) ---- */
.preset-plugin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 28px; }
.preset-plugin-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 10px; background: var(--panel, #fff); box-shadow: 0 1px 4px rgba(20,20,30,.08); text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.preset-plugin-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,20,30,.12); }
.preset-list { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.preset-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: 10px; background: var(--panel, #fff); box-shadow: 0 1px 4px rgba(20,20,30,.08); flex-wrap: wrap; }
.preset-row-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.preset-upload { margin: 18px 0; }
.preset-upload summary { cursor: pointer; display: inline-block; }
.preset-upload form { margin-top: 14px; }
.auth-form { max-width: 460px; display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label.check { flex-direction: row; align-items: center; gap: 8px; }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="file"] { padding: 10px 12px; border: 1px solid rgba(20,20,30,.18); border-radius: 8px; font: inherit; background: #fff; }
.form-errors { color: #8e2a22; font-size: .92rem; }
.flash-ok { color: #2c6e3f; }
.nav-auth { display: inline; }
.nav-link-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.btn.small { padding: 6px 12px; font-size: .85rem; }