/* =============================================================================
   CueArr for Agencies & Brands — marketing.cuearr.com
   Loaded AFTER codex.css, which supplies the shared chrome: topbar, hero
   scaffolding, .section / .chapter-* headers, .fleet-card, .arena-card,
   .btn / .btn-pill, .torn-edge, footer and .reveal.

   Only components this property needs live here:
     - the two-audience split (agency vs organisation)
     - the worked example panel
     - pricing tables
     - the closing contact block

   Assets are deliberately a local copy rather than loaded from cuearr.com:
   webfonts are CORS-restricted cross-origin, and this follows the pattern
   merchant.cuearr.com already uses (its own merchant-assets/merchant-fonts).
   ============================================================================= */

/* ============ AUDIENCE SPLIT ============ */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.aud-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(23,41,62,0.92), rgba(10,23,40,0.92));
  border: 1px solid rgba(201,143,61,0.4);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
}
/* The in-house card is cyan-lit rather than brass so the two audiences read as
   genuinely different offers at a glance, not two columns of the same thing. */
.aud-card--org { border-color: rgba(79,183,255,0.4); }

.aud-card__kicker {
  font-family: "IM Fell English SC", serif;
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass-hot);
  margin-bottom: 0.6rem;
}
.aud-card--org .aud-card__kicker { color: var(--cyan-hot); }

.aud-card h3 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: clamp(1.3rem, 1.4vw + 1rem, 1.7rem);
  line-height: 1.15;
  color: var(--parchment);
  margin-bottom: 0.6rem;
}
.aud-card > p {
  font-size: 1rem; line-height: 1.65;
  color: var(--parchment-dim);
  margin-bottom: 1.1rem;
}

.aud-card ul { list-style: none; display: grid; gap: 0.6rem; }
.aud-card li {
  display: grid; grid-template-columns: 20px 1fr; gap: 0.6rem;
  align-items: start;
  font-size: 0.97rem; line-height: 1.55;
  color: var(--parchment-dim);
}
.aud-card li::before {
  content: "◆";
  color: var(--brass); font-size: 0.7rem; line-height: 1.7;
}
.aud-card--org li::before { color: var(--cyan); }

.aud-card__unit {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid rgba(201,143,61,0.25);
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: 0.95rem; color: var(--parchment-dim);
}
.aud-card--org .aud-card__unit { border-top-color: rgba(79,183,255,0.25); }
.aud-card__unit strong { color: var(--parchment); font-style: normal; }

/* ============ WORKED EXAMPLE ============ */
.example {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid rgba(79,183,255,0.32);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(79,183,255,0.12), transparent 55%),
    linear-gradient(160deg, rgba(15,42,68,0.9), rgba(10,23,40,0.9));
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.example__label {
  font-family: "IM Fell English SC", serif;
  font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--cyan-hot);
  margin-bottom: 0.8rem;
}
.example h3 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: clamp(1.25rem, 1.4vw + 1rem, 1.6rem);
  color: var(--parchment);
  margin-bottom: 1.2rem;
}
.example__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.example__step h4 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 0.95rem; color: var(--brass-hot);
  margin-bottom: 0.4rem;
}
.example__step p {
  font-size: 0.95rem; line-height: 1.6; color: var(--parchment-dim);
}

/* ============ PLATFORM GRID ============ */
.plat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

/* ============ ACTIVATIONS ============ */
/* codex's .arena-grid is auto-fit minmax(280px), which lands 3-across at this
   width and orphans the fourth card. Four cards read better as a 2x2 anyway —
   each gets room for its copy instead of being squeezed. */
.mkt-arena-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2vw, 1.6rem);
}
@media (max-width: 720px) {
  .mkt-arena-grid { grid-template-columns: 1fr; }
}

/* ============ PRICING ============ */
.price-switch {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.price-switch__btn {
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(201,143,61,0.45);
  background: rgba(10,23,40,0.7);
  color: var(--parchment-dim);
  font-family: "Cinzel Decorative", serif; font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.price-switch__btn[aria-selected="true"] {
  background: linear-gradient(180deg, var(--brass-hot), var(--brass) 55%, var(--brass-deep));
  color: #1a0e04;
  border-color: var(--brass);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: stretch;
}

.price-card {
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.5vw, 1.8rem);
  border-radius: 10px;
  border: 1px solid rgba(201,143,61,0.35);
  background: linear-gradient(160deg, rgba(23,41,62,0.9), rgba(10,23,40,0.9));
}
/* One tier is highlighted rather than all of them — a page where everything is
   emphasised has no emphasis at all. */
.price-card--feature {
  border-color: var(--brass-hot);
  box-shadow: 0 0 30px rgba(255,205,107,0.16), 0 18px 40px rgba(0,0,0,0.5);
}
.price-card__badge {
  align-self: flex-start;
  height: 1.5rem;
  display: inline-flex; align-items: center;
  margin-bottom: 0.7rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(255,205,107,0.16);
  border: 1px solid var(--brass);
  color: var(--brass-hot);
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
}
/* Reserve the badge row on the cards that don't carry one. Without this only
   the featured card is pushed down and the prices no longer line up across
   the row, which reads as a rendering fault rather than emphasis. */
.price-card:not(:has(.price-card__badge))::before {
  content: ""; display: block; height: 1.5rem; margin-bottom: 0.7rem;
}
.price-card__name {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 1.15rem; color: var(--parchment);
  margin-bottom: 0.2rem;
}
.price-card__for {
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: 0.9rem; color: var(--parchment-dim);
  margin-bottom: 0.9rem; min-height: 2.6em;
}
.price-card__amount {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: 1.9rem; color: var(--brass-hot);
  line-height: 1;
}
.price-card__unit {
  font-size: 0.82rem; color: var(--parchment-dim);
  margin-top: 0.25rem; margin-bottom: 1rem;
}
.price-card ul {
  list-style: none; display: grid; gap: 0.45rem;
  margin-bottom: 1.2rem;
}
.price-card li {
  display: grid; grid-template-columns: 16px 1fr; gap: 0.5rem;
  font-size: 0.92rem; line-height: 1.5; color: var(--parchment-dim);
}
.price-card li::before { content: "✓"; color: var(--brass); font-size: 0.85rem; }
.price-card .btn-pill { margin-top: auto; align-self: flex-start; }

.price-note {
  margin-top: 1.4rem; text-align: center;
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: 0.95rem; color: var(--parchment-dim);
}

/* ============ CLOSING CTA ============ */
.contact-scroll {
  position: relative;
  max-width: 50rem; margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(180deg, #f0dfb3, #ddc890);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 4px 0 #a89575, 0 24px 50px rgba(0,0,0,0.6);
  text-align: center;
}
.contact-scroll::before, .contact-scroll::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background:
    radial-gradient(circle at 5% 50%,  transparent 3px, #f0dfb3 4px),
    radial-gradient(circle at 20% 50%, transparent 5px, #f0dfb3 6px),
    radial-gradient(circle at 40% 50%, transparent 3px, #f0dfb3 4px),
    radial-gradient(circle at 60% 50%, transparent 5px, #f0dfb3 6px),
    radial-gradient(circle at 80% 50%, transparent 4px, #f0dfb3 5px),
    radial-gradient(circle at 95% 50%, transparent 3px, #f0dfb3 4px);
}
.contact-scroll::before { top: -8px; }
.contact-scroll::after  { bottom: -8px; transform: rotate(180deg); }
.contact-scroll h2 {
  font-family: "Cinzel Decorative", serif; font-weight: 900;
  font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem);
  line-height: 1.12; color: #3a1a04;
  margin-bottom: 0.7rem;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
/* .gold is a light-on-dark gradient in codex.css — re-tint for parchment. */
.contact-scroll h2 .gold {
  background: linear-gradient(180deg, #d94656, #a01e28, #5a0f18);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact-scroll p {
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: 1.05rem; line-height: 1.6; color: #5a3218;
  max-width: 34rem; margin: 0 auto 1.5rem;
}
.contact-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* ============ SECTION BACKGROUNDS ============ */
.chapter-aud {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(15,32,56,0.5), transparent 55%),
    linear-gradient(180deg, var(--midnight) 0%, #08131f 100%);
}
.chapter-plat {
  background:
    radial-gradient(ellipse at 75% 10%, rgba(23,41,62,0.7), transparent 60%),
    linear-gradient(180deg, #08131f 0%, var(--midnight) 100%);
}
.chapter-price {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(15,32,56,0.6), transparent 60%),
    linear-gradient(180deg, var(--midnight) 0%, #08131f 100%);
}