/* ALMI Store · Camelot Card Set (trading-card lean on poster grade)
   Doctrine: ~/ALMI/Corpus/CAMELOT-CARD-SET.md */
:root{
  --poster-radius:14px;
  --poster-shadow:0 18px 48px rgba(0,0,0,.22), 0 2px 0 rgba(255,255,255,.06) inset, 0 0 0 1px rgba(255,215,120,.12);
  --poster-shadow-hover:0 28px 64px rgba(0,0,0,.32), 0 2px 0 rgba(255,255,255,.1) inset, 0 0 0 1px rgba(255,215,120,.28);
  --tcg-gilt:#e8c547;
  --tcg-foil:linear-gradient(125deg,#fff7c2 0%,#e8c547 22%,#fff 40%,#9ad0ff 58%,#c9a227 78%,#fff7c2 100%);
}

.store-hero{padding:48px 22px 8px;max-width:1120px;margin:0 auto;text-align:center}
.store-hero h1{
  font-size:clamp(32px,5vw,48px);
  letter-spacing:-.03em;
  margin:0 0 12px;
  font-weight:700;
  line-height:1.05;
}
.store-hero .lede{
  color:var(--muted,#6e6e73);
  font-size:clamp(17px,2.2vw,21px);
  max-width:38ch;
  margin:0 auto 20px;
  line-height:1.35;
  letter-spacing:-.015em;
}
.store-shell > .block,
.store-shell > .detail,
.store-shell > .panel{
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  padding-left:22px;
  padding-right:22px;
}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;justify-content:center}
.filters button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 14px;
  font:inherit;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  color:var(--ink,#1d1d1f);
  transition:background .15s, color .15s, border-color .15s;
}
.filters button:hover{border-color:rgba(0,113,227,.35)}
.filters button.on{background:var(--blue,#0071e3);color:#fff;border-color:var(--blue,#0071e3)}

/* Poster grid — gallery wall */
.poster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:22px 18px;
  padding-bottom:12px;
}
@media(min-width:720px){
  .poster-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 22px}
}
@media(min-width:1100px){
  .poster-grid{grid-template-columns:repeat(4,1fr)}
}

/* Card shell */
.poster-card{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:12px;
  border-radius:calc(var(--poster-radius) + 2px);
  transition:transform .22s cubic-bezier(.25,.1,.25,1);
}
.poster-card:focus-visible{
  outline:3px solid var(--blue,#0071e3);
  outline-offset:4px;
}
.poster-card:hover{transform:translateY(-6px)}
.poster-card:hover .poster-frame{
  box-shadow:var(--poster-shadow-hover);
  border-color:rgba(255,255,255,.18);
}
.poster-card:active{transform:translateY(-2px)}

/* The cover itself — 2.5:3.5 trading-card ratio (classic TCG lean) */
.poster-frame{
  position:relative;
  aspect-ratio:2.5 / 3.5;
  border-radius:var(--poster-radius);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--poster-shadow);
  border:2px solid rgba(232,197,71,.35);
  background:#0a0c12;
  transition:box-shadow .22s, border-color .22s, filter .22s;
}
.poster-frame::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:calc(var(--poster-radius) - 4px);
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
  z-index:6;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
/* Foil edge by rarity */
.poster-frame[data-rarity="C"]{border-color:rgba(180,190,200,.4)}
.poster-frame[data-rarity="U"]{border-color:rgba(126,182,255,.55)}
.poster-frame[data-rarity="R"]{
  border-color:rgba(232,197,71,.65);
  box-shadow:var(--poster-shadow), 0 0 24px rgba(232,197,71,.18);
}
.poster-frame[data-rarity="M"]{
  border-color:transparent;
  background-clip:padding-box;
  box-shadow:var(--poster-shadow), 0 0 32px rgba(167,139,250,.35);
}
.poster-frame[data-rarity="M"]::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2px;
  background:var(--tcg-foil);
  background-size:200% 200%;
  animation:foil-shift 6s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:7;
  opacity:.9;
}
@keyframes foil-shift{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.poster-frame[data-ctype="AGENT"]{--p-accent:#7EB6FF}
.poster-frame[data-ctype="ENGINE"]{--p-accent:#E8A54B}
.poster-frame[data-ctype="FLYWHEEL"]{--p-accent:#30D158}
.poster-frame[data-ctype="BOX"]{--p-accent:#c9a227}
.poster-frame[data-ctype="SHELL"]{--p-accent:#A78BFA}
.poster-frame[data-ctype="KIT"]{--p-accent:#54A936}

.poster-art{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.14), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(0,0,0,.45), transparent 50%),
    var(--p-grad, linear-gradient(160deg,#1a2744,#0b1220 70%));
}

/* Film grain */
.poster-art::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}

/* Soft vignette */
.poster-art::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(80% 70% at 50% 40%, transparent 30%, rgba(0,0,0,.55) 100%);
  z-index:1;
}

.poster-motif{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18% 14% 28%;
  opacity:.92;
}
.poster-motif svg{
  width:100%;
  height:100%;
  max-width:220px;
  max-height:260px;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.35));
}

/* Usable brand monogram (trading-card crest) */
.poster-monogram{
  position:absolute;
  z-index:3;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:22px;
  letter-spacing:.04em;
  color:var(--p-ink,#fff);
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(0,0,0,.25));
  border:1.5px solid color-mix(in srgb, var(--p-accent,#7eb6ff) 70%, #fff 30%);
  box-shadow:
    0 12px 32px rgba(0,0,0,.4),
    0 0 0 4px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.poster-monogram small{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  white-space:nowrap;
}
.poster-frame.has-brand .poster-motif{opacity:.35;padding-top:12%;padding-bottom:36%}
.poster-frame.has-brand .poster-titleblock .poster-cat{color:var(--p-accent,#7eb6ff)}

/* Top chrome */
.poster-chrome{
  position:absolute;
  top:0;left:0;right:0;
  z-index:4;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  padding:12px 12px 0;
}
.poster-series{
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.poster-badge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.poster-badge.free{
  background:linear-gradient(135deg,rgba(48,209,88,.95),rgba(48,209,88,.7));
  color:#04210c;
  border-color:rgba(255,255,255,.25);
}
.poster-badge.pro{
  background:linear-gradient(135deg,#c9a227,#8a6420);
  color:#120e04;
  border-color:rgba(255,255,255,.28);
}
.poster-badge.agent{
  background:linear-gradient(135deg,#3b6fd4,#1a3a7a);
  color:#e8f0ff;
  border-color:rgba(126,182,255,.45);
}
.poster-badge.engine{
  background:linear-gradient(135deg,#e8a54b,#8a5010);
  color:#1a0e04;
  border-color:rgba(255,220,160,.4);
}
.poster-badge.flywheel{
  background:linear-gradient(135deg,#30d158,#0a5c28);
  color:#e8fff0;
  border-color:rgba(134,239,172,.4);
}
.poster-badge.box{
  background:linear-gradient(135deg,#c9a227,#5c3d0a);
  color:#fff8e8;
  border-color:rgba(255,230,160,.35);
}
.poster-badge.shell{
  background:linear-gradient(135deg,#a78bfa,#4c1d95);
  color:#f5f0ff;
  border-color:rgba(196,181,253,.5);
}
.poster-badge.kit{
  background:linear-gradient(135deg,rgba(48,209,88,.95),rgba(48,209,88,.7));
  color:#04210c;
  border-color:rgba(255,255,255,.25);
}

/* Set number + rarity gem */
.poster-setrow{
  position:absolute;
  top:34px;left:12px;right:12px;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.poster-setno{
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.55);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.poster-rarity{
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--tcg-gilt);
  text-shadow:0 0 8px rgba(232,197,71,.45);
}

/* Stat strip (tools / training / gates) — agent & engine faces */
.poster-stats{
  position:absolute;
  left:10px;right:10px;
  bottom:72px;
  z-index:5;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  pointer-events:none;
}
.poster-stats span{
  font-size:8px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 6px;
  border-radius:4px;
  background:rgba(0,0,0,.55);
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.poster-frame.has-stats .poster-titleblock{
  padding-top:36px;
}
.poster-frame.has-stats .poster-motif{
  padding-bottom:38%;
}

/* Under-Camelot seal */
.poster-under{
  position:absolute;
  z-index:5;
  bottom:auto;
  top:auto;
  /* sits in title block via flex */
}
.poster-titleblock .under-camelot{
  display:inline-block;
  margin-top:6px;
  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(232,197,71,.85);
  border:1px solid rgba(232,197,71,.35);
  padding:2px 7px;
  border-radius:3px;
  background:rgba(0,0,0,.35);
}

/* Agent mini-cards in detail (full TCG mini) */
.agent-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin-top:8px;
}
.agent-card{
  border:2px solid rgba(126,182,255,.35);
  border-radius:12px;
  padding:12px;
  background:linear-gradient(165deg,#0f1524 0%,#1a2238 100%);
  color:#e8eef8;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
}
.agent-card::before{
  content:"AGENT";
  position:absolute;
  top:8px;right:10px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
  color:rgba(126,182,255,.75);
}
.agent-card .agent-top{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:6px;
  padding-right:48px;
}
.agent-card .agent-top strong{font-size:15px;letter-spacing:-.02em}
.agent-card .role{font-size:11px;color:rgba(200,210,230,.75)}
.agent-card .personality{font-size:12px;color:rgba(200,210,230,.85);margin:0 0 8px}
.agent-card .prompt{
  font-size:11px;
  line-height:1.4;
  color:rgba(180,190,210,.8);
  max-height:4.2em;
  overflow:hidden;
  margin-bottom:8px;
  font-family:ui-monospace,monospace;
}
.agent-card .tools-row,
.agent-card .gates{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;
}
.agent-card .tools-row span{
  font-size:10px;
  font-weight:600;
  padding:2px 7px;
  border-radius:4px;
  background:rgba(126,182,255,.18);
  color:#b8d4ff;
  border:1px solid rgba(126,182,255,.3);
}
.agent-card .gates span{
  font-size:10px;
  padding:2px 7px;
  border-radius:4px;
  background:rgba(232,197,71,.12);
  color:#e8d48a;
  border:1px solid rgba(232,197,71,.28);
}
.agent-card .train-line{
  font-size:10px;
  color:rgba(160,175,200,.7);
  margin-top:6px;
  letter-spacing:.02em;
}
.agent-card .under-line{
  margin-top:8px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(232,197,71,.7);
}

/* Deck legend under hero */
.card-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:0 auto 8px;
  max-width:52rem;
}
.card-legend span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink,#1d1d1f);
}
.card-legend .lg-agent{border-color:rgba(59,111,212,.4);color:#1a3a7a}
.card-legend .lg-engine{border-color:rgba(232,165,75,.5);color:#6a3a08}
.card-legend .lg-fly{border-color:rgba(48,209,88,.45);color:#0a5c28}
.card-legend .lg-box{border-color:rgba(201,162,39,.5);color:#5c3d0a}
.card-legend .lg-shell{border-color:rgba(167,139,250,.5);color:#4c1d95}
.card-legend .lg-kit{border-color:rgba(84,169,54,.45);color:#1a5c14}

.mode-tabs{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 16px;
}
.mode-tabs button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:9px 16px;
  font:inherit;font-size:.88rem;font-weight:600;
  cursor:pointer;color:var(--ink);
}
.mode-tabs button.on{
  background:#121724;color:#fff;border-color:#121724;
}
.mode-tabs button:hover{border-color:rgba(0,113,227,.4)}

.gallery-head h2{margin:0 0 6px;font-size:1.25rem;letter-spacing:-.02em}
.gallery-head p{margin:0 0 16px;color:var(--muted);font-size:.95rem;max-width:52ch}

/* Shell banner card (full width strip) */
.shell-banner{
  max-width:1120px;
  margin:0 auto 22px;
  padding:0 22px;
}
.shell-banner .poster-card{
  max-width:280px;
  margin:0 auto;
}

/* Title block — bottom of poster (album typography) */
.poster-titleblock{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:4;
  padding:48px 14px 14px;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 28%,rgba(0,0,0,.88) 100%);
  color:#fff;
}
.poster-cat{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--p-accent,#7eb6ff);
  margin:0 0 6px;
}
.poster-titleblock h3{
  margin:0 0 6px;
  font-size:clamp(15px,2.1vw,18px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  color:#fff;
}
.poster-titleblock .tagline{
  margin:0;
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,.72);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Spine edge highlight */
.poster-frame > .spine{
  position:absolute;
  left:0;top:8%;bottom:8%;
  width:3px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,var(--p-accent,#7eb6ff),transparent 90%);
  opacity:.85;
  z-index:5;
}

/* Below-cover shelf meta */
.poster-shelf{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:0 2px;
}
.poster-price{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink,#1d1d1f);
}
.poster-price.is-free{color:#1a7f37}
.poster-meta{
  font-size:11px;
  color:var(--faint,#86868b);
  font-variant-numeric:tabular-nums;
}

/* Detail drawer — large poster + form */
.detail{
  display:none;
  margin:28px auto 40px;
  max-width:1120px;
  padding:0 22px;
}
.detail.open{display:block}
.detail-layout{
  display:grid;
  grid-template-columns:minmax(200px,280px) 1fr;
  gap:28px;
  align-items:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}
@media(max-width:720px){
  .detail-layout{grid-template-columns:1fr}
  .detail-poster{max-width:240px;margin:0 auto}
}
.detail-poster .poster-frame{
  width:100%;
  pointer-events:none;
}
.detail-copy h2{
  margin:0 0 8px;
  font-size:clamp(26px,3.5vw,34px);
  letter-spacing:-.03em;
  font-weight:700;
  line-height:1.1;
}
.detail-copy .sub{
  margin:0 0 14px;
  color:var(--muted,#6e6e73);
  font-size:17px;
  line-height:1.45;
  max-width:48ch;
}
.bar-use{
  height:8px;
  border-radius:999px;
  background:rgba(18,23,36,.08);
  overflow:hidden;
  margin:8px 0 4px;
  max-width:280px;
}
.bar-use i{display:block;height:100%;background:var(--blue,#0071e3);border-radius:999px}
.score{font-size:13px;color:var(--faint,#86868b);margin:0 0 8px}
.detail-copy .price{
  font-size:1.5rem;
  font-weight:700;
  margin:10px 0 4px;
  letter-spacing:-.02em;
}
.dyn{font-family:var(--mono);font-size:11px;color:#7a8494;margin:0 0 14px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip-row span{
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  background:var(--ice,#f5f5f7);
  color:var(--muted,#6e6e73);
  border:1px solid var(--line);
}
.detail-copy label{display:block;margin:12px 0 4px;font-weight:600;font-size:.9rem}
.detail-copy input,
.detail-copy textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font:inherit;
  background:#fff;
  color:var(--ink);
}
.detail-copy .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.detail-copy .btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:999px;font:inherit;font-weight:600;font-size:.92rem;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
}
.detail-copy .btn-brass{
  background:linear-gradient(135deg,#8a6420,#B6872A);
  color:#0c1016;border:0;
}
.detail-copy .btn-ghost{
  background:#fff;color:var(--blue,#0071e3);border-color:var(--line);
}
pre.kit{
  background:#f5f5f7;
  padding:12px;
  border-radius:10px;
  white-space:pre-wrap;
  font-size:12px;
  border:1px solid var(--line);
  max-height:320px;
  overflow:auto;
  font-family:var(--mono);
  margin-top:14px;
}

/* —— Theme tokens (poster palette) —— */
.poster-frame[data-theme="gate"]{
  --p-grad:linear-gradient(155deg,#0B3A73 0%,#121724 42%,#0a1628 100%);
  --p-accent:#54A936;
}
.poster-frame[data-theme="trades"]{
  --p-grad:linear-gradient(155deg,#3d2914 0%,#1a120a 45%,#0c0a08 100%);
  --p-accent:#E8A54B;
}
.poster-frame[data-theme="retail"]{
  --p-grad:linear-gradient(155deg,#5c1a3a 0%,#1f0c18 48%,#0c0810 100%);
  --p-accent:#FF7AA2;
}
.poster-frame[data-theme="services"]{
  --p-grad:linear-gradient(155deg,#2a1f5c 0%,#120e28 48%,#080610 100%);
  --p-accent:#A78BFA;
}
.poster-frame[data-theme="custody"]{
  --p-grad:linear-gradient(155deg,#061410 0%,#0a0f0c 50%,#020403 100%);
  --p-accent:#30D158;
}
.poster-frame[data-theme="general"]{
  --p-grad:linear-gradient(155deg,#0B3A73 0%,#19203a 50%,#0c1018 100%);
  --p-accent:#7EB6FF;
}
.poster-frame[data-theme="community"]{
  --p-grad:linear-gradient(155deg,#1a3d2e 0%,#0c1a14 50%,#060c09 100%);
  --p-accent:#8FD9A8;
}
.poster-frame[data-theme="field"]{
  --p-grad:linear-gradient(155deg,#0a3a48 0%,#061820 50%,#030a0e 100%);
  --p-accent:#5ED0E8;
}
.poster-frame[data-theme="healthcare"]{
  --p-grad:linear-gradient(155deg,#0d3a4a 0%,#0a1a24 50%,#050c12 100%);
  --p-accent:#7DD3FC;
}
.poster-frame[data-theme="agriculture"]{
  --p-grad:linear-gradient(155deg,#3a4a12 0%,#1a2208 50%,#0a0e04 100%);
  --p-accent:#C4E538;
}
.poster-frame[data-theme="integrations"]{
  --p-grad:linear-gradient(155deg,#0a1a3a 0%,#060c18 50%,#020408 100%);
  --p-accent:#38BDF8;
}

#priced-at{text-align:center;margin:0 0 14px;color:var(--faint,#86868b);font-size:12px}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue,#0071e3);margin:0 0 10px;
}
.fine{font-size:13px;color:var(--faint,#86868b)}

/* Dual gallery: templates + business boxes */
.gallery-section{padding:8px 0 36px}
.gallery-head{
  text-align:center;
  margin:0 auto 18px;
  max-width:40ch;
}
.gallery-head h2{
  margin:0 0 8px;
  font-size:clamp(26px,3.5vw,34px);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.1;
}
.gallery-head p{
  margin:0;
  color:var(--muted,#6e6e73);
  font-size:16px;
  line-height:1.4;
}
.mode-tabs{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:0 0 20px;
}
.mode-tabs button{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 18px;
  font:inherit;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  color:var(--ink,#1d1d1f);
}
.mode-tabs button.on{
  background:var(--ink,#1d1d1f);
  color:#fff;
  border-color:var(--ink,#1d1d1f);
}
.poster-badge.box{
  background:linear-gradient(135deg,#0B3A73,#1D5663);
  color:#E8F4FF;
  border-color:rgba(255,255,255,.28);
}
.poster-meta .agents-n{font-weight:600;color:var(--ink,#1d1d1f)}

/* Box detail: mission / vision / agents */
.brand-block{
  margin:16px 0;
  padding:16px 16px 12px;
  border-radius:14px;
  background:var(--ice,#f5f5f7);
  border:1px solid var(--line);
}
.brand-block h3{
  margin:0 0 6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blue,#0071e3);
}
.brand-block p{margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--ink,#1d1d1f)}
.brand-block p:last-child{margin-bottom:0}
.brand-block ul{
  margin:0 0 8px;padding:0 0 0 18px;
  color:var(--muted,#6e6e73);font-size:14px;
}
.brand-identity{
  display:flex;align-items:center;gap:14px;
  margin:0 0 14px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.brand-identity .mono-lg{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;letter-spacing:.04em;
  color:#fff;flex-shrink:0;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.brand-identity .id-copy{min-width:0}
.brand-identity .id-copy strong{
  display:block;font-size:17px;letter-spacing:-.02em;margin:0 0 2px;
}
.brand-identity .id-copy span{
  display:block;font-size:13px;color:var(--muted,#6e6e73);line-height:1.35;
}
.brand-meta-row{
  display:flex;flex-wrap:wrap;gap:8px 14px;
  margin:0 0 12px;font-size:12px;color:var(--faint,#86868b);
}
.brand-meta-row code{
  font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:11px;background:#fff;border:1px solid var(--line);
  padding:2px 6px;border-radius:6px;color:var(--ink,#1d1d1f);
}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.swatch{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--muted,#6e6e73);
}
.swatch i{
  width:18px;height:18px;border-radius:6px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.poster-shelf .brand-hint{
  font-size:11px;color:var(--faint,#86868b);
  max-width:14ch;text-align:right;line-height:1.25;
}
.agent-list{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px}
.agent-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
}
.agent-card .agent-top{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px;
  margin-bottom:4px;
}
.agent-card strong{font-size:15px;letter-spacing:-.01em}
.agent-card .role{font-size:12px;color:var(--faint,#86868b);font-weight:600}
.agent-card .personality{font-size:13px;color:var(--muted,#6e6e73);margin:0 0 6px}
.agent-card .prompt{
  font-size:12px;line-height:1.4;color:#3a3a3c;
  background:#f5f5f7;border-radius:8px;padding:8px 10px;
  font-family:var(--mono,ui-monospace,Menlo,monospace);
  max-height:7.5em;overflow:auto;margin:0 0 8px;
}
.agent-card .gates{display:flex;flex-wrap:wrap;gap:4px}
.agent-card .gates span{
  font-size:10px;font-weight:600;
  padding:3px 8px;border-radius:999px;
  background:rgba(154,43,43,.08);color:#9A2B2B;
  border:1px solid rgba(154,43,43,.15);
}
.includes-list{
  margin:10px 0 0;padding:0 0 0 18px;
  font-size:14px;color:var(--muted,#6e6e73);line-height:1.45;
}
.detail-layout.wide{grid-template-columns:minmax(200px,260px) 1fr}
@media(max-width:720px){.detail-layout.wide{grid-template-columns:1fr}}
.foot{
  border-top:1px solid var(--line);
  background:var(--ice,#f5f5f7);
  padding:40px 22px 56px;
  color:var(--faint,#86868b);
  font-size:12px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  max-width:none;
}
.foot a{color:var(--muted,#6e6e73)}
.foot .mark{display:inline-block;vertical-align:middle;margin-right:6px}