/* Campfire — Trybe-style build
   Layout, type and surfaces follow jointrybe.com; the brand colour is Campfire orange. */

:root {
  --ink: #000;
  --ink-60: rgba(0, 0, 0, .6);
  --ink-40: rgba(0, 0, 0, .4);
  --ink-10: rgba(0, 0, 0, .1);
  --ink-5: rgba(0, 0, 0, .05);
  --bg: #fff;
  --bg-soft: #fafafb;

  --brand: #ef6700;
  --brand-deep: #b34a00;
  --brand-soft: #fff1e6;
  --brand-glow: rgba(239, 103, 0, .28);

  /* pastel panel tints, as on Trybe */
  --tint-lilac: linear-gradient(180deg, #efe9ff 0%, #f8f5ff 100%);
  --tint-peach: linear-gradient(180deg, #ffe7d6 0%, #fff5ee 100%);
  --tint-sky: linear-gradient(180deg, #e3ecff 0%, #f4f7ff 100%);
  --tint-butter: linear-gradient(180deg, #fff1cc 0%, #fffaec 100%);
  --tint-mint: linear-gradient(180deg, #ddf6e6 0%, #f2fcf5 100%);
  --tint-rose: linear-gradient(180deg, #ffe4f0 0%, #fff4f9 100%);

  --card-shadow: 0 0 0 1px var(--ink-5), 0 2px 6px rgba(77, 31, 17, .04), 0 24px 48px -24px rgba(77, 31, 17, .12);
  --card-shadow-sm: 0 0 0 1px var(--ink-5), 0 2px 6px rgba(77, 31, 17, .04), 0 18px 36px -24px rgba(77, 31, 17, .1);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color-scheme: light;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.wrap { width: min(100% - 32px, var(--max)); margin-inline: auto; }

/* ---------- Type ---------- */
.h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.h2 { margin: 0; font-size: clamp(2rem, 4vw, 2.88rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.lede { margin: 16px auto 0; max-width: 620px; font-size: 18px; line-height: 1.5; color: var(--ink-60); }
.eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.underline { position: relative; white-space: nowrap; }
.underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .1em; border-radius: 99px; background: var(--brand); }
.section { padding: clamp(64px, 9vw, 96px) 0; }
.section-head { text-align: center; margin-bottom: clamp(40px, 6vw, 56px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 36px; border: 0; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2;
  box-shadow: 0 4px 11px rgba(0, 0, 0, .16), inset 0 6px 18px rgba(255, 255, 255, .25), inset 0 1px 4px var(--brand-deep);
  cursor: pointer; transition: transform .2s var(--ease), filter .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Nav (floating pill) ---------- */
.nav-shell { position: fixed; z-index: 50; top: calc(16px + env(safe-area-inset-top, 0px)); left: 0; right: 0; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 24px;
  width: min(100%, 880px);
  padding: 10px 14px 10px 20px;
  border-radius: 92px;
  background: linear-gradient(175deg, rgba(76, 70, 70, .14), #f5f5f5 22%, #fff 58%, #f8eee8);
  box-shadow: 0 12px 36px -8px rgba(71, 44, 55, .11), 0 17px 97px 42px rgba(0, 0, 0, .04), inset 0 0 0 4px rgba(255, 255, 255, .26), inset 0 1px 0 #fff;
  backdrop-filter: blur(12px);
}
.nav__logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.nav__logo img { width: 30px; height: 30px; }
.nav__links { display: flex; gap: 32px; margin: 0 auto; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.nav__links a { opacity: .85; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__cta { padding: 4px 8px; font-size: 15px; font-weight: 500; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding: 136px 0 0; text-align: center; overflow: hidden; }
.hero__stripes {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.0) 0 7%, rgba(255,255,255,.7) 7% 15%, rgba(255,255,255,0) 15% 24%, rgba(255,255,255,.6) 24% 33%, rgba(255,255,255,0) 33% 42%, rgba(255,255,255,.5) 42% 50%, rgba(255,255,255,0) 50% 58%, rgba(255,255,255,.5) 58% 67%, rgba(255,255,255,0) 67% 76%, rgba(255,255,255,.6) 76% 85%, rgba(255,255,255,0) 85% 93%, rgba(255,255,255,.7) 93%),
    linear-gradient(180deg, #fff 0%, #fff 30%, #fff3ea 62%, #fff 100%);
}
.hero > .wrap { position: relative; z-index: 2; }
.hero__toast-stack { display: grid; justify-items: center; gap: 6px; margin-bottom: 28px; }
.toast {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff;
  box-shadow: var(--card-shadow-sm); font-size: 13px; color: var(--ink-60);
}
.toast b { color: var(--ink); font-weight: 600; }
.toast img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.toast--ghost { opacity: .35; transform: scale(.94); filter: blur(.4px); }
.hero .lede { margin-top: 20px; }
.hero__cta { margin-top: 28px; }

/* fixed 1280px stage, centred; the hero clips it on narrow screens */
.network { position: relative; left: 50%; width: 1280px; height: 380px; margin-top: 36px; translate: -50% 0; }
.network svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.network path { fill: none; stroke: #f4cfb4; stroke-width: 1.5; }
.hero::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 10%; z-index: 1; background: linear-gradient(90deg, #fff, transparent); pointer-events: none; }
.hero::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 10%; z-index: 1; background: linear-gradient(270deg, #fff, transparent); pointer-events: none; }
.network .dot { fill: #fff; stroke: #f0b48a; stroke-width: 1.5; }
.network .pulse { fill: var(--brand); }
.network__hub {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center;
  width: 168px; height: 168px; border-radius: 44px;
  background: rgba(255, 233, 216, .6);
  box-shadow: 0 0 0 1px rgba(239, 103, 0, .08), 0 30px 60px -20px var(--brand-glow);
}
.network__hub::before { content: ""; position: absolute; inset: -60%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(239,103,0,.22) 0, rgba(255,170,90,.1) 45%, transparent 72%); }
.network__hub span {
  display: grid; place-items: center; width: 124px; height: 124px; border-radius: 34px;
  background: linear-gradient(180deg, #fff 0%, #ffe9d8 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 10px 24px -10px rgba(179, 74, 0, .45);
}
.network__hub img { width: 84px; height: 84px; }
.thumb {
  position: absolute; width: 64px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .35);
  animation: bob 6s ease-in-out infinite;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:nth-of-type(2n) { animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.hero__fade { position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, #fff); }

/* ---------- Video ---------- */
.video { position: relative; display: grid; justify-items: center; gap: 24px; padding: 8px 0 72px; text-align: center; }
.video__quote { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-60); }
.phone {
  position: relative; width: 300px; aspect-ratio: 9 / 16; padding: 8px; border-radius: 34px;
  background: linear-gradient(180deg, #fff 0%, #ffeee2 100%);
  box-shadow: 0 0 0 1px rgba(239, 103, 0, .12), 0 40px 80px -30px var(--brand-glow);
}
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; background: #eee; }
.phone__chip { position: absolute; left: 20px; bottom: 20px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; font-size: 13px; }
.video::before { content: ""; position: absolute; z-index: -1; top: 40%; left: 50%; width: min(78vw, 440px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(239,103,0,.22) 0, rgba(255,170,90,.1) 45%, transparent 72%); }

/* ---------- Logos strip ---------- */
.logos { border-block: 1px solid var(--ink-10); background: var(--bg-soft); padding: 32px 0 36px; text-align: center; overflow: hidden; }
.logos__title { margin: 0 0 24px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-40); }
.marquee { display: flex; width: max-content; animation: slide 50s linear infinite; }
.marquee--rev { animation-direction: reverse; }
.marquee:hover { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.brand-chip { display: flex; align-items: center; gap: 12px; margin-right: 56px; font-size: 18px; font-weight: 500; color: rgba(0,0,0,.62); white-space: nowrap; }
.brand-chip i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #2b2523; color: #fff; font: 700 11px/1 var(--font); font-style: normal; letter-spacing: .02em; }
.mask-x { -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

/* ---------- Step cards (How it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { padding: 12px; border-radius: 24px; background: #fff; box-shadow: var(--card-shadow); }
.step__visual { position: relative; display: grid; place-items: center; height: 220px; border-radius: 18px; overflow: hidden; }
.step__body { padding: 24px 16px 20px; }
.step__num { margin: 0 0 10px; font-size: 16px; font-weight: 500; }
.step h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-60); }
.tint-lilac { background: var(--tint-lilac); } .tint-peach { background: var(--tint-peach); } .tint-sky { background: var(--tint-sky); }
.tint-butter { background: var(--tint-butter); } .tint-mint { background: var(--tint-mint); } .tint-rose { background: var(--tint-rose); }
.c-lilac { color: #7d52f4; } .c-peach { color: #ea6a1c; } .c-sky { color: #3b6fe0; } .c-mint { color: #1f9d55; }

/* little white UI cards inside the tinted panels */
.ui { width: min(84%, 260px); padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0,0,0,.18), 0 0 0 1px var(--ink-5); text-align: left; font-size: 13px; }
.ui__title { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.ui__row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; background: #f6f6f7; }
.ui__row + .ui__row { margin-top: 6px; }
.ui__row .tag { margin-left: auto; font-size: 11px; font-weight: 600; }
.ok { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 10px; }
.wait { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--ink-40); }
.live { color: #16a34a; } .live::before { content: "● "; font-size: 8px; vertical-align: 2px; }
.pending { padding: 2px 8px; border-radius: 999px; background: var(--ink-5); color: var(--ink-60); }

.sources { display: flex; flex-wrap: wrap; gap: 6px; }
.sources span { padding: 4px 10px; border-radius: 999px; background: #f4f2fb; font-size: 12px; font-weight: 500; }
.concept-pill { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: #7d52f4; color: #fff; font-weight: 600; }
.concept-pill small { opacity: .7; font-weight: 500; }

.perf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.perf div { padding: 8px; border-radius: 10px; background: #f6f6f7; }
.perf small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--ink-40); }
.perf b { font-size: 16px; font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #fff3d6; color: #b7791f; font-size: 11px; font-weight: 600; }

/* ---------- Proof: ad marquee + stat cards ---------- */
.ad-row { display: flex; gap: 20px; width: max-content; animation: slide 60s linear infinite; }
.ad {
  position: relative; flex: none; width: 250px; aspect-ratio: 9 / 12.4; border-radius: 22px; overflow: hidden;
  background: #ddd; box-shadow: 0 20px 40px -24px rgba(0,0,0,.4);
}
.ad img, .ad video { width: 100%; height: 100%; object-fit: cover; }
.ad::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.ad__meta { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; color: #fff; }
.ad__meta b { display: block; font-size: 15px; font-weight: 600; }
.ad__meta span { font-size: 12px; opacity: .8; }
.ad__chips { display: flex; gap: 6px; margin-top: 10px; }
.ad__chips span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); font-size: 12px; opacity: 1; }
.ad__chips img { width: 14px; height: 14px; border-radius: 3px; }

.stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 72px; align-items: center; }
.stats::before { content: ""; position: absolute; inset: -20% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(239,103,0,.1), transparent); }
.stat { padding: 22px; border-radius: 20px; background: rgba(255,255,255,.8); box-shadow: var(--card-shadow-sm); }
.stat--hi { padding: 28px 24px; background: #fff; box-shadow: 0 0 0 1.5px rgba(239,103,0,.55), 0 30px 60px -28px var(--brand-glow); transform: translateY(-8px); }
.stat__label { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); }
.stat__num { margin: 0; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.stat__sub { margin: 10px 0 0; font-size: 14px; color: var(--ink-60); }
.stat__pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 5px 12px; border-radius: 999px; background: var(--ink-5); font-size: 12px; color: var(--ink-60); }
.stat__pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }

/* ---------- Timeline ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tl { padding: 10px; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow-sm); }
.tl__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; }
.tl__top b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.tl__top span { padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 0 1px var(--ink-5); }
.tl__body { padding: 18px 10px 12px; }
.tl h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.tl p { margin: 0; font-size: 15px; color: var(--ink-60); }

/* ---------- Platform (tabs) ---------- */
.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: var(--card-shadow-sm); }
.seg button { padding: 9px 18px; border: 0; border-radius: 999px; background: none; font-size: 15px; font-weight: 500; color: var(--ink-60); cursor: pointer; transition: background .25s var(--ease), color .25s; }
.seg button[aria-selected="true"] { background: var(--brand); color: #fff; box-shadow: inset 0 4px 12px rgba(255,255,255,.25), inset 0 1px 3px var(--brand-deep); }
.plat { display: grid; justify-items: center; gap: 32px; }
.plat__card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; width: 100%; padding: 12px; border-radius: 28px; background: #fff; box-shadow: var(--card-shadow); }
.plat__visual { display: grid; place-items: center; min-height: 360px; border-radius: 20px; padding: 28px; }
.plat__copy { display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; }
.plat__copy h3 { margin: 0 0 12px; font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.plat__copy p { margin: 0; font-size: 17px; color: var(--ink-60); }
.plat__panel[hidden] { display: none; }
.plat__panel { animation: fadeUp .45s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }

.ui--wide { width: min(100%, 420px); }
.plan-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 12.5px; }
.plan-row dt { color: var(--ink-40); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding-top: 4px; }
.plan-row dd { margin: 0; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.chip--lilac { background: #efe9ff; color: #6b3fe0; } .chip--rose { background: #ffe4ec; color: #c3315f; } .chip--peach { background: #ffeadb; color: #c4560c; } .chip--mint { background: #ddf6e6; color: #1b7f45; }
.btn-row { display: flex; gap: 8px; margin-top: 14px; }
.mini-btn { flex: 1; padding: 8px; border-radius: 10px; text-align: center; font-size: 12.5px; font-weight: 600; }
.mini-btn--ok { background: #22c55e; color: #fff; } .mini-btn--edit { background: var(--brand-soft); color: var(--brand); } .mini-btn--no { background: #fee2e2; color: #dc2626; }
.review-ad { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; }
.review-ad img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }
.kv small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--ink-40); text-transform: uppercase; }
.kv p { margin: 0 0 8px; font-size: 13px; }
.conn { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #f6f6f7; }
.conn + .conn { margin-top: 8px; }
.conn img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.conn b { font-size: 13px; font-weight: 600; }
.conn span { display: block; font-size: 12px; color: var(--ink-60); }
.conn .tag { margin-left: auto; font-size: 11px; font-weight: 600; }

/* ---------- Features (2-row marquee of small cards) ---------- */
.feat-row { display: flex; gap: 20px; width: max-content; padding: 10px 0; animation: slide 70s linear infinite; }
.feat-row--rev { animation-direction: reverse; }
.feat { flex: none; width: 300px; padding: 10px; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow-sm); }
.feat__visual { display: grid; place-items: center; height: 140px; border-radius: 14px; }
.feat__body { padding: 20px 12px 14px; }
.feat h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.feat p { margin: 0; font-size: 15px; color: var(--ink-60); }
.mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.18), 0 0 0 1px var(--ink-5); font-size: 12.5px; font-weight: 600; }
.mini--big { font-size: 26px; letter-spacing: -.02em; }
.mini__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ratio { display: flex; align-items: flex-end; gap: 8px; }
.ratio i { display: grid; place-items: end center; padding-bottom: 4px; border: 1.5px solid var(--ink); border-radius: 6px; font-size: 10px; font-style: normal; font-weight: 600; }

/* ---------- Comparison ---------- */
.cmp { overflow-x: auto; padding: 12px; border-radius: 28px; background: #fff; box-shadow: var(--card-shadow); }
.cmp table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.cmp th, .cmp td { padding: 16px 14px; text-align: center; border-bottom: 1px solid var(--ink-5); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }
.cmp th[scope="row"] { text-align: left; font-weight: 400; }
.cmp th[scope="row"] b { display: block; font-size: 15px; font-weight: 600; }
.cmp th[scope="row"] span { font-size: 14px; color: var(--ink-60); }
.cmp .us { background: var(--brand-soft); }
.cmp thead .us { border-radius: 16px 16px 0 0; color: var(--brand); font-size: 15px; letter-spacing: -.01em; text-transform: none; }
.cmp tbody tr:last-child .us { border-radius: 0 0 16px 16px; }
.m { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.m-y { background: #22c55e; color: #fff; } .m-p { background: #fde68a; color: #92400e; } .m-n { background: #f1f1f2; color: var(--ink-40); }
.us .m-y { background: var(--brand); }
.legend { display: flex; justify-content: center; gap: 20px; margin-top: 18px; font-size: 14px; color: var(--ink-60); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend .m { width: 18px; height: 18px; font-size: 10px; }

.simple { margin-top: 64px; text-align: center; }
.simple h3 { margin: 0 auto 24px; max-width: 640px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.formats { margin-top: 40px; overflow: hidden; }
.formats p { margin: 0 0 16px; font-size: 16px; font-weight: 500; color: var(--ink-40); }
.fmt-row { display: flex; gap: 12px; width: max-content; animation: slide 30s linear infinite; }
.fmt-row span { padding: 10px 22px; border-radius: 999px; background: #fff; box-shadow: var(--card-shadow-sm); font-size: 16px; font-weight: 500; white-space: nowrap; }

/* ---------- Built for (tilted cards) ---------- */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: center; }
.use { padding: 12px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--ink-5), 0 30px 60px -30px rgba(77, 31, 17, .25); transition: transform .4s var(--ease); }
.use:nth-child(1) { transform: rotate(-4deg); } .use:nth-child(2) { transform: translateY(14px); } .use:nth-child(3) { transform: rotate(3deg); } .use:nth-child(4) { transform: rotate(-2deg) translateY(8px); }
.use:hover { transform: none; }
.use__visual { position: relative; height: 170px; border-radius: 20px; overflow: hidden; }
.use__visual img { position: absolute; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 16px -8px rgba(0,0,0,.4); }
.use__body { padding: 18px 12px 12px; }
.use h3 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.use p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-60); }

/* ---------- Contact (Trybe FAQ surface) ---------- */
.contact {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, #fff 0%, #fff4ec 18%, #ffe3d0 100%);
  padding: clamp(72px, 10vw, 104px) 0 clamp(72px, 10vw, 96px);
}
.form { display: grid; gap: 14px; width: min(100%, 660px); margin: 0 auto; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; padding: 14px 20px; border-radius: 18px; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 10px 30px -20px rgba(120, 50, 10, .35); }
.field label, .field legend { font-size: 13px; font-weight: 500; color: var(--ink-60); }
.field input, .field textarea { width: 100%; border: 0; outline: 0; background: none; font: 400 17px/1.4 var(--font); color: var(--ink); resize: vertical; }
.field:focus-within { box-shadow: 0 0 0 2px rgba(239,103,0,.35), 0 10px 30px -20px rgba(120, 50, 10, .35); }
fieldset.field { margin: 0; border: 0; }
.spend { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.spend input { position: absolute; opacity: 0; pointer-events: none; }
.spend label { padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--ink-10); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.spend input:checked + label { background: var(--brand); color: #fff; box-shadow: inset 0 4px 12px rgba(255,255,255,.25), inset 0 1px 3px var(--brand-deep); }
.spend input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-60); }
.consent input { margin-top: 3px; accent-color: var(--brand); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.form__fine { margin: 0; max-width: 380px; font-size: 13px; color: var(--ink-40); }

/* ---------- Footer ---------- */
.footer { margin-top: -200px; padding: 232px 0 32px; background: linear-gradient(180deg, #120703 0%, #1f0d04 40%, #4a1c02 100%); color: rgba(255,255,255,.85); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.footer__logo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.footer__logo img { width: 34px; height: 34px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 auto; font-size: 15px; }
.footer nav a:hover { color: #fff; }
.footer small { font-size: 14px; opacity: .8; }

/* ---------- Reveal on scroll ---------- */


/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .steps, .timeline { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat--hi { transform: none; }
  .uses { grid-template-columns: 1fr 1fr; }
  .plat__card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav { justify-content: space-between; }
  .network { height: 300px; }
  .network__hub { width: 128px; height: 128px; border-radius: 34px; }
  .network__hub span { width: 96px; height: 96px; border-radius: 26px; }
  .network__hub img { width: 64px; height: 64px; }
  .thumb { width: 48px; }
  .steps, .timeline, .uses { grid-template-columns: 1fr; }
  .use { transform: none !important; }
  .form .row { grid-template-columns: 1fr; }
  .phone { width: 260px; }
  .toast--ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- How it works visuals (carried over from the earlier site, restyled) ----------
   Each sits in the card's tinted panel at one 4:5 size, and scales with its own width. */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.step__visual--tall { height: 330px; }
.hv { position: relative; container-type: inline-size; width: min(84%, 240px); aspect-ratio: 4 / 5; line-height: 1.25; }

/* Gather: everything the brand shares, as one board */
.hv-board { height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; gap: 3cqw; padding: 3cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 16px 34px -18px rgba(77, 31, 17, .35), 0 0 0 1px var(--ink-5); }
.hv-tile { position: relative; grid-column: span 2; min-height: 0; overflow: hidden; border-radius: 4cqw; background: #eee; text-align: left; animation: hv-in 9s var(--ease) infinite both; }
.hv-tile--wide { grid-column: span 3; }
.hv-tile:nth-child(2) { animation-delay: .3s; } .hv-tile:nth-child(3) { animation-delay: .6s; } .hv-tile:nth-child(4) { animation-delay: .9s; } .hv-tile:nth-child(5) { animation-delay: 1.2s; }
.hv-tile::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.hv-label { position: absolute; z-index: 1; left: 3.4cqw; right: 2cqw; bottom: 2.4cqw; margin: 0; font-size: 3.3cqw; font-weight: 600; line-height: 1.1; color: #fff; }
.hv-guide { background: #2b4bd6; }
.hv-word { position: absolute; inset: 0 0 18%; display: grid; place-items: center; font-size: 8cqw; font-weight: 600; font-style: italic; letter-spacing: -.03em; color: #c5e86c; }
.hv-sw { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: 30%; height: 30%; }
.hv-sw i { flex: 1; } .hv-sw i:nth-child(1) { background: #c5e86c; } .hv-sw i:nth-child(2) { background: #f4efe6; } .hv-sw i:nth-child(3) { background: #111; }
.hv-assets { background: #fff; box-shadow: inset 0 0 0 1px var(--ink-5); }
.hv-assets img { width: 100%; height: 100%; object-fit: contain; padding: 8% 8% 26%; }
.hv-assets::after { display: none; }
.hv-assets .hv-label { color: var(--ink); }
.hv-voice { padding: 3.4cqw; background: #c5e86c; }
.hv-quote { margin: 0; font-size: 4.4cqw; font-weight: 600; letter-spacing: -.02em; color: #111; }
.hv-reviews { padding: 3.4cqw; background: #fff4ea; }
.hv-reviews .hv-quote { font-weight: 500; color: var(--ink-60); }
.hv-stars { margin: 0 0 1.2cqw; font-size: 3.6cqw; letter-spacing: .05em; color: var(--brand); }
.hv-comp { padding: 3cqw; background: #111; }
.hv-comp::after { display: none; }
.hv-gap { width: 100%; border-collapse: collapse; font-size: 3cqw; color: rgba(255, 255, 255, .8); }
.hv-gap th { padding-bottom: 1cqw; font-size: 2.4cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ff8a3d; }
.hv-gap td { padding: .8cqw 0; text-align: center; } .hv-gap td:first-child, .hv-gap th:first-child { text-align: left; }
.hv-gap i { display: inline-block; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #fff; }
.hv-gap .is-open td:first-child { font-weight: 600; color: #fff; }
.hv-gap i.none { background: none; border: .5cqw dashed #ff8a3d; }
@keyframes hv-in { 0% { opacity: 0; transform: translateY(6px) scale(.94); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(6px) scale(.94); } }

/* Build: the finished ad, with a light running around its edge */
.hv--build img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: 6cqw; box-shadow: 0 20px 40px -18px rgba(77, 31, 17, .5); }
.hv--build::after { content: ""; position: absolute; inset: 0; padding: 1.2cqw; border-radius: 6cqw; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, rgba(255, 179, 122, .9) 80%, var(--brand) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px rgba(239, 103, 0, .55)); animation: hv-trace 4s linear infinite; }
@keyframes hv-trace { to { --ang: 360deg; } }
.hv-made { position: absolute; left: 4cqw; bottom: 4cqw; padding: 1.6cqw 3.4cqw; border-radius: 999px; background: #fff; font-size: 3.8cqw; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }

/* Light: the winning ad in front of two others, with its numbers */
.hv-ad { position: absolute; top: 14%; width: 52%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 5cqw; background: #ccc; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .5); filter: saturate(.75) brightness(.9); }
.hv-ad img, .hv-ad video { width: 100%; height: 100%; object-fit: cover; }
.hv-ad--l { left: 0; rotate: -7deg; } .hv-ad--r { right: 0; rotate: 7deg; }
.hv-ad--win { top: 2%; left: 17%; width: 66%; z-index: 2; filter: none; box-shadow: 0 0 0 .9cqw var(--brand), 0 0 12cqw rgba(239, 103, 0, .45), 0 20px 40px -18px rgba(0, 0, 0, .5); }
.hv-ad--win img { object-position: 50% 22%; }
.hv-badge { position: absolute; top: 4cqw; left: 4cqw; padding: 1.6cqw 3cqw; border-radius: 999px; background: var(--brand); color: #fff; font-size: 3.6cqw; font-weight: 600; white-space: nowrap; }
.hv-stats { position: absolute; z-index: 3; left: 3%; right: 3%; bottom: 3%; display: flex; gap: 2.4cqw; margin: 0; padding: 0; list-style: none; }
.hv-stats li { flex: 1 1 0; padding: 2.6cqw 1.6cqw; border-radius: 3.6cqw; background: #fff; text-align: center; font-size: 5.6cqw; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .45); animation: hv-pop 8s var(--ease) infinite both; }
.hv-stats li:nth-child(2) { animation-delay: .25s; } .hv-stats li:nth-child(3) { animation-delay: .5s; }
.hv-stats b { display: block; margin-bottom: 1cqw; font-size: 2.8cqw; font-weight: 600; letter-spacing: .08em; color: var(--brand); }
@keyframes hv-pop { 0%, 12% { opacity: 0; transform: translateY(6px) scale(.9); } 20%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(6px) scale(.9); } }

@media (prefers-reduced-motion: reduce) { .hv-tile, .hv-stats li, .hv--build::after { animation: none; } }

/* ---------- How it works hand-off: Gather's inputs fly into Build, and the ad is made ----------
   script.js sets data-phase on .steps: "gather" shows Build as an empty ad frame; "build" opens the
   finished ad out of it. Without the script the finished ad simply shows. */
@property --hole { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.hv-tile { animation: none; }
.steps.is-merging .step__visual { overflow: visible; }
.steps.is-merging .step:first-child { position: relative; z-index: 5; }
.hv-blank { position: absolute; z-index: 2; inset: 0; overflow: hidden; border-radius: 6cqw; opacity: 0; pointer-events: none;
  background: linear-gradient(165deg, #fff, #f6f1ed); box-shadow: 0 0 0 1px var(--ink-5), 0 20px 40px -22px rgba(77, 31, 17, .4);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 12%), #000 var(--hole)); mask: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 12%), #000 var(--hole)); }
.hv-blank i { position: absolute; left: 9%; right: 9%; border-radius: 999px; background: rgba(0, 0, 0, .07); animation: hv-pulse 1.7s ease-in-out infinite; }
.hv-blank i:nth-child(2) { top: 8%; height: 54%; border-radius: 4cqw; background: rgba(0, 0, 0, .05); }
.hv-blank i:nth-child(3) { top: 68%; height: 4.4%; right: 22%; animation-delay: .12s; }
.hv-blank i:nth-child(4) { top: 75.5%; height: 4.4%; right: 44%; animation-delay: .24s; }
.hv-blank i:nth-child(5) { top: 84.5%; height: 7.5%; right: 58%; background: rgba(239, 103, 0, .3); animation-delay: .36s; }
.hv-blank b { position: absolute; z-index: 1; top: 8%; left: 9%; right: 9%; height: 54%; display: grid; place-items: center; color: rgba(0, 0, 0, .2); }
.hv-blank b svg { width: 26%; height: auto; }
.hv-blank::before { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 55%; background: linear-gradient(100deg, transparent 20%, rgba(255, 143, 61, .25) 46%, rgba(255, 255, 255, .9) 50%, rgba(255, 143, 61, .25) 54%, transparent 80%); transform: translateX(-110%); animation: hv-scan 1.7s cubic-bezier(.45, 0, .35, 1) infinite; }
.hv-blank::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 184, .95), rgba(239, 103, 0, .75) 45%, transparent 70%); filter: blur(10px); opacity: 0; transform: scale(.3); }
@keyframes hv-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hv-scan { 0% { transform: translateX(-110%); } 75%, 100% { transform: translateX(200%); } }
/* waiting for the inputs */
.steps[data-phase="gather"] .hv-blank { opacity: 1; animation: hv-blank-in .4s ease both; }
.steps[data-phase="gather"] .hv--build::after { opacity: 0; }
@keyframes hv-blank-in { from { opacity: 0; } }
/* taking them in */
.hv--build.is-ingest .hv-blank { animation: hv-ingest .72s ease-in both; }
.hv--build.is-ingest .hv-blank::after { animation: hv-ingest-glow .72s ease-in both; }
@keyframes hv-ingest { to { box-shadow: 0 0 0 2px rgba(239, 103, 0, .5), 0 0 40px rgba(239, 103, 0, .45); } }
@keyframes hv-ingest-glow { 0%, 35% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }
/* producing the ad: the frame opens outward from the middle */
.steps[data-phase="build"] .hv-blank { opacity: 1; animation: hv-produce .85s cubic-bezier(.5, 0, .2, 1) both; }
.steps[data-phase="build"] .hv-blank::after { opacity: 1; transform: scale(1); animation: hv-produce-glow .85s ease-out both; }
.steps[data-phase="build"] .hv--build::after { animation: hv-trace 4s linear infinite, hv-ring 1.1s ease both; }
@keyframes hv-produce { 0% { --hole: 0%; transform: scale(1.03); box-shadow: 0 0 0 2px rgba(239, 103, 0, .5); } 25% { --hole: 0%; transform: scale(.97); } 100% { --hole: 135%; transform: none; } }
@keyframes hv-produce-glow { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes hv-ring { 0%, 60% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hv-blank { display: none; } }

/* How it works visuals fill their whole panel: no tinted backdrop, no frame around the board */
.step__visual--tall { background: none; }
.step__visual--tall .hv { width: 100%; height: 100%; aspect-ratio: auto; }
.hv-board { padding: 0; gap: 8px; border-radius: 0; background: none; box-shadow: none; }
.hv-tile { border-radius: 14px; }
.hv--build img, .hv--build::after, .hv-blank { border-radius: 18px; }
.hv--build img { box-shadow: none; object-position: 50% 30%; }
.hv--light { border-radius: 18px; background: #f4f4f5; }
.hv-ad { top: 10%; width: 40%; } .hv-ad--l { left: 6%; } .hv-ad--r { right: 6%; }
.hv-ad--win { top: 5%; left: 25%; width: 50%; }
.hv-stats { left: 6%; right: 6%; bottom: 5%; }
.hv-stats li { font-size: 4.6cqw; padding: 2cqw 1.4cqw; } .hv-stats b { font-size: 2.4cqw; }
.hv-badge { font-size: 2.8cqw; }
/* tile labels sit on the photo, so they are always white (the card's own grey text style was winning) */
.step .hv-label { color: #fff; font-size: 3.2cqw; }
.step .hv-assets .hv-label { color: var(--ink); }
.hv-word { font-size: 6cqw; }
.hv-quote { font-size: 3.6cqw; }
.hv-stars { font-size: 3cqw; }
.hv-gap { font-size: 2.6cqw; } .hv-gap th { font-size: 2.1cqw; } .hv-gap i { width: 2cqw; height: 2cqw; }

/* Build waits with one scan across the empty frame, then the inputs arrive (hand-off at 4s) */
.hv-blank i { animation: none; opacity: .8; }
.hv-blank::before { animation: none; transform: translateX(-110%); }
.steps[data-phase="gather"] .hv-blank::before { animation: hv-scan-once 1.8s cubic-bezier(.45, 0, .35, 1) 1.9s both; }
@keyframes hv-scan-once { from { transform: translateX(-110%); } to { transform: translateX(200%); } }

/* Empty Build frame drawn as a whole ad card (image, two lines of copy, button), centred in the panel */
.hv-blank { left: 50%; right: auto; top: 0; bottom: auto; height: 100%; width: auto; aspect-ratio: 4 / 5; translate: -50% 0;
  display: flex; flex-direction: column; gap: 3.2%; padding: 9%; border: 1px solid rgba(0, 0, 0, .1); border-radius: 18px;
  background: linear-gradient(165deg, #f3f1ee, #e9e6e2); }
.hv-blank i { position: static; flex: none; left: auto; right: auto; top: auto; border-radius: 999px; background: rgba(0, 0, 0, .08); }
.hv-blank i:nth-child(2) { width: 62%; height: auto; aspect-ratio: .9; margin-bottom: 4%; border-radius: 12px; background: rgba(0, 0, 0, .06); border: 1px solid rgba(0, 0, 0, .05); }
.hv-blank i:nth-child(3) { width: 70%; height: 4.4%; right: auto; }
.hv-blank i:nth-child(4) { width: 47%; height: 4.4%; right: auto; }
.hv-blank i:nth-child(5) { width: 33%; height: 8%; right: auto; margin-top: 3%; background: rgba(239, 103, 0, .32); }
.hv-blank b { top: 9%; left: 9%; right: auto; width: 62%; height: auto; aspect-ratio: .9; color: rgba(0, 0, 0, .28); }
.hv-blank b svg { width: 30%; }

/* How it works panels 50% taller; the visuals size from the panel's height so the extra room is used */
.step__visual--tall { display: block; height: 495px; }
.step__visual--tall .hv { height: 100%; }
/* empty Build frame: a 4:5 ad card centred in the panel */
.hv-blank { top: 50%; bottom: auto; height: auto; width: 82%; translate: -50% -50%; }
/* Light: ads scale with the panel's height, numbers along the bottom */
.hv-ad { top: 9%; height: 56%; width: auto; aspect-ratio: 4 / 5; }
.hv-ad--l { left: 3%; } .hv-ad--r { right: 3%; left: auto; }
.hv-ad--win { top: 4%; left: 50%; height: 68%; width: auto; translate: -50% 0; }
.hv-stats { bottom: 5%; }
@media (max-width: 720px) { .step__visual--tall { height: 440px; } }

/* while Build waits, only the empty card shows; the finished ad appears as the card opens */
.steps[data-phase="gather"] .hv--build img { opacity: 0; }
.hv-ad { top: 12%; height: 46%; }
.hv-ad--win { top: 5%; height: 60%; }
.hv-stats { bottom: 6%; }

/* Undo the taller panels: back to 330px. The empty Build card keeps its full-card look, sized from the panel height. */
.step__visual--tall { height: 330px; }
@media (max-width: 720px) { .step__visual--tall { height: 330px; } }
.hv-blank { top: 0; height: 100%; width: auto; translate: -50% 0; }
/* Light: only the three ad cards are taller, reaching down to the numbers */
.hv-ad { top: 10%; height: 64%; width: 40%; aspect-ratio: auto; }
.hv-ad--l { left: 3%; } .hv-ad--r { right: 3%; left: auto; }
.hv-ad--win { top: 4%; left: 25%; width: 50%; height: 74%; translate: none; }
.hv-stats { bottom: 4%; }

/* Light: the three ad cards 50% taller than their original 4:5 (the numbers sit over their lower edge) */
.hv-ad { top: 7%; height: 82%; }
.hv-ad--win { top: 2%; height: 94%; }

/* the empty Build card is exactly the size of the finished ad, so the reveal doesn't change shape */
.hv-blank { inset: 0; width: auto; height: auto; aspect-ratio: auto; translate: none; }

/* the 2x card keeps its orange outline and glow, at the same size and position as the other three */
.stat--hi { padding: 22px; transform: none; }

/* =====================================================================================
   PLATFORM STAGE, carried over from the earlier site: a coloured backdrop per tab, the product
   window rising from it and fading at the bottom, and callout cards on its edges.
   The tabs and heading above it use this site's own styles.
   ===================================================================================== */
#platform .section-head { margin-bottom: 28px; }
.plat-subs { display: grid; max-width: 620px; margin: 16px auto 0; }
.plat-subs p { grid-area: 1 / 1; margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-60); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.plat-subs p.is-on { opacity: 1; transform: none; }
.plat-tabs-row { display: flex; justify-content: center; }
.plat-stage-wrap { padding: 0 20px; }
/* the old stage's colours and type, kept to this block */
.plat-stage { --cream: #faf5f0; --paper: #fffdfa; --sand: #efe8e0; --ink: #17140f; --mute: #6a645d; --line: rgba(23, 20, 15, .12);
  --hot: #ff710b; --hot-text: #c9560a; --flame: #ff8f3d; --night: #17140f; --day: #faf5f0;
  --sans: var(--font); --serif: var(--font); --r-ctl: 8px; --r-card: 14px; --r-frame: 20px; color: var(--ink); }
/* this site's small ".ui" cards must not leak into the review screen */
.plat-stage .ui { width: auto; box-shadow: none; font-size: inherit; text-align: inherit; }
@keyframes cursor-move {
    0%, 4%    { top: 62%; left: 72%; }
    8%, 28%   { top: 5.5%; left: 13%; }
    35%, 56%  { top: 83%; left: 80%; }
    63%, 71%  { top: 94.5%; left: 22%; }
    76%, 83%  { top: 77%; left: 22%; }
    92%, 100% { top: 62%; left: 72%; }
  }
@keyframes cursor-press {
    0%, 8.4%, 10%, 35.4%, 37%, 63.4%, 65%, 78.4%, 80%, 100% { scale: 1; }
    9%, 36%, 64%, 79% { scale: .8; }
  }
@keyframes cursor-click {
    0%, 8.9%, 35.9%, 63.9%, 78.9% { opacity: 0; transform: scale(.2); }
    9%, 36%, 64%, 79% { opacity: .9; transform: scale(.2); }
    12%, 39%, 67%, 82% { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(.2); }
  }
@keyframes pop-versions {
    0%, 9.5%  { opacity: 0; transform: translateY(-.4em) scale(.96); }
    11%, 26%  { opacity: 1; transform: none; }
    28%, 100% { opacity: 0; transform: translateY(-.4em) scale(.96); }
  }
@keyframes chip-on {
    0%, 9%, 28%, 100% { border-color: transparent; background: #eef0f2; color: #374151; }
    9.5%, 27% { border-color: var(--accent); background: #fff3e8; color: var(--accent-callout); }
  }
@keyframes pop-tip {
    0%, 36.5% { opacity: 0; transform: translateY(-.4em) scale(.96); }
    38%, 54%  { opacity: 1; transform: none; }
    56%, 100% { opacity: 0; transform: translateY(-.4em) scale(.96); }
  }
@keyframes btn-on {
    0%, 36%, 56%, 100% { background: #fff; box-shadow: none; }
    36.5%, 55% { background: #fff3e8; box-shadow: 0 0 0 .25em rgba(239, 103, 0, .12); }
  }
@keyframes pop-menu {
    0%, 64.5% { opacity: 0; transform: translateY(.4em) scale(.96); }
    66%, 79.5% { opacity: 1; transform: none; }
    81%, 100% { opacity: 0; transform: translateY(.4em) scale(.96); }
  }
@keyframes select-focus {
    0%, 64%, 81%, 100% { border-color: var(--ui-line); box-shadow: none; }
    64.5%, 80% { border-color: rgba(239, 103, 0, .6); box-shadow: 0 0 0 .25em rgba(239, 103, 0, .12); }
  }
@keyframes option-hover {
    0%, 74.5%, 81%, 100% { background: transparent; }
    75.5%, 80% { background: #e8f6ec; }
  }
@keyframes value-out {
    0%, 79.5% { opacity: 1; }
    80%, 97%  { opacity: 0; }
    100%      { opacity: 1; }
  }
@keyframes value-in {
    0%, 79.5% { opacity: 0; }
    80%, 97%  { opacity: 1; }
    100%      { opacity: 0; }
  }

/* ---- review (from finals/review.html) ---- */
.viz--review {
  --accent: #ef6700;
    --accent-callout: #d85d00;
    --text-primary: #1b1817;
    --text-body: #3e3a38;
    --text-secondary: #6a6664;
    --border: #cdc8c5;
    --border-soft: rgba(27, 24, 23, .1);
    --surface-page: #f9f7f6;
    --font-primary: "Switzer", Inter, ui-sans-serif, system-ui, sans-serif;
    --font-secondary: "Sentient", Georgia, "Times New Roman", serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --cycle: 26s;

    
    --ui-label: #6b7280;
    --ui-box: #f5f7f9;
    --ui-line: #e5e7eb;
    --approved: #16a34a;
    --rejected: #dc2626;
    --edits: #d97706;
    --pending: #9ca3af;
  .ucard__visual {
    container-type: inline-size;
    margin: 0 0 clamp(24px, 5vw, 36px);
  }
  .ui-frame {
    padding: 1.6cqw;
    border: 1px solid rgba(239, 103, 0, .14);
    border-radius: 3.6cqw;
    background: rgba(255, 240, 229, .7);
    box-shadow: 0 18px 34px -20px rgba(27, 24, 23, .4);
    font-size: 2.75cqw;
    line-height: 1.4;
  }
  .ui {
    position: relative;
    padding: 4.2cqw;
    border-radius: 2.6cqw;
    background: #fff;
    color: #111;
  }
  .ui__head { display: flex; align-items: center; gap: .8em; margin-bottom: 1.3em; }
  .ui__num { font-size: 1.5em; font-weight: 700; line-height: 1; }
  .ui__chip {
    padding: .15em .6em;
    border: 1px solid transparent;
    border-radius: .55em;
    background: #eef0f2;
    font-size: .85em;
    font-weight: 700;
    color: #374151;
    animation: chip-on var(--cycle) linear infinite;
  }
  .ui__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; align-items: start; }
  .ui__col { display: grid; gap: 1.1em; }
  .ui img { display: block; width: 100%; border-radius: 1.1em; background: #8b8785; }
  .ui__tall { aspect-ratio: 9 / 16; object-fit: cover; }
  .ui__square { aspect-ratio: 1; object-fit: cover; }
  .ui__box {
    padding: .9em 1.1em;
    border: 1px solid var(--ui-line);
    border-radius: .9em;
    background: var(--ui-box);
  }
  .ui__label {
    margin: 0 0 .35em;
    font-size: .68em;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ui-label);
  }
  .ui__box p { margin: 0; }
  .ui__box p + .ui__label { margin-top: .9em; }
  .ui__strong { font-weight: 700; text-transform: uppercase; }
  .ui__actions { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: .8em; margin-top: 1.1em; }
  .ui__link {
    padding: .2em .8em;
    border: 1px solid rgba(239, 103, 0, .35);
    border-radius: 999px;
    background: #fff3e8;
    font-size: .8em;
    font-weight: 700;
    color: var(--accent-callout);
    white-space: nowrap;
  }
  .ui__btn {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .45em .9em;
    border: 1px solid rgba(239, 103, 0, .6);
    border-radius: .7em;
    background: #fff;
    font-size: .92em;
    white-space: nowrap;
  }
  .ui__btn { animation: btn-on var(--cycle) linear infinite; }
  .pop.pop--tip {
    top: calc(100% + .6em);
    right: 0;
    width: 23em;
    padding: 1em 1.2em;
    color: #374151;
    transform-origin: 80% 0;
    animation-name: pop-tip;
  }
  .pop--tip p { margin: 0; }
  .ui__btn svg { width: 1em; height: 1em; }
  .ui__foot { position: relative; margin-top: 1.3em; padding-top: 1.1em; border-top: 1px solid var(--ui-line); }
  .ui__select {
    position: relative;
    display: flex;
    align-items: center;
    width: 16em;
    padding: .5em .9em;
    border: 1px solid var(--ui-line);
    border-radius: .7em;
    background: #fff;
    animation: select-focus var(--cycle) linear infinite;
  }
  .ui__select svg { width: .9em; height: .9em; margin-left: auto; color: #374151; }
  .ui__value { display: flex; align-items: center; gap: .7em; }
  .ui__value--approved { position: absolute; left: .9em; opacity: 0; font-weight: 500; }
  .ui__value--pending { animation: value-out var(--cycle) linear infinite; }
  .ui__value--approved { animation: value-in var(--cycle) linear infinite; }
  .dot { flex: none; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
  .is-pending { color: #111; }
  .is-pending .dot { color: var(--pending); }
  .is-approved { color: var(--approved); }
  .is-rejected { color: var(--rejected); }
  .is-edits { color: var(--edits); }
  .pop {
    position: absolute;
    z-index: 2;
    border: 1px solid var(--ui-line);
    border-radius: .9em;
    background: #fff;
    box-shadow: 0 18px 34px -14px rgba(27, 24, 23, .35), 0 2px 6px rgba(27, 24, 23, .08);
    opacity: 0;
    animation: var(--cycle) var(--ease) infinite both;
  }
  .pop--versions {
    top: 3.4em;
    left: 2.6em;
    width: 22em;
    padding: 1.1em 1.2em;
    transform-origin: 10% 0;
    animation-name: pop-versions;
  }
  .pop--versions p { margin: 0; color: #4b5563; }
  .pop__chips { display: flex; gap: .5em; margin: .5em 0 .7em; }
  .pop__chips span {
    padding: .12em .9em;
    border: 1px solid var(--ui-line);
    border-radius: .55em;
    font-size: .88em;
    font-weight: 700;
    color: #374151;
  }
  .pop__chips .is-on { border-color: var(--accent); background: #fff3e8; color: var(--accent-callout); }
  .pop--menu {
    bottom: calc(100% - .6em);
    left: 0;
    width: 15em;
    padding: .35em;
    transform-origin: 20% 100%;
    animation-name: pop-menu;
  }
  .pop--menu ul { margin: 0; padding: 0; list-style: none; }
  .pop--menu li { display: flex; align-items: center; gap: .7em; padding: .42em .7em; border-radius: .55em; }
  .pop--menu li:first-child { background: #f3f4f6; }
  .pop--menu .is-approved { animation: option-hover var(--cycle) linear infinite; }
  .cursor {
    position: absolute;
    z-index: 3;
    top: 62%;
    left: 72%;
    width: 2.2em;
    height: 2.2em;
    animation: cursor-move var(--cycle) cubic-bezier(.45, 0, .2, 1) infinite;
    pointer-events: none;
  }
  .cursor svg {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 20% 12%;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
    animation: cursor-press var(--cycle) linear infinite;
  }
  .cursor::before {
    content: "";
    position: absolute;
    top: -1.25em;
    left: -1.05em;
    width: 3em;
    height: 3em;
    border: .22em solid var(--accent);
    border-radius: 50%;
    background: rgba(239, 103, 0, .18);
    opacity: 0;
    animation: cursor-click var(--cycle) ease-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .ui *, .cursor { animation: none !important; }
    .cursor { display: none; }
  }
}


.pillar .viz--review .ui__box, .pillar .viz--review .ui__select, .pillar .viz--review .ui__btn { background-color: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .8); }
.pillar .viz--review .pop { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-color: rgba(255, 255, 255, .9); }
.pillar .viz--review .ucard__visual { width: 94%; }
.bp-sub, .bp-foot { font: 400 14px/1.55 var(--sans); color: #6a6664; max-width: 560px; }
.bp-foot { margin: 16px auto 0; text-align: center; max-width: 420px; }
.bp { margin-top: 20px; padding: 8px; border-radius: 18px; background: rgba(255,255,255,.3); border: 1px solid #d9d5d3; box-shadow: 0 22px 48px rgba(45,31,22,.14), 0 4px 12px rgba(45,31,22,.06); font-family: var(--sans); color: #1b1817; }
.bp-card { border: 1px solid #d9d5d3; border-radius: 12px; background: #fdfcfc; }
.bp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; border-bottom: 1px solid #d9d5d3; }
.bp-title { font-weight: 700; font-size: 17px; }
.bp-actions { position: relative; display: flex; align-items: center; gap: 8px; outline: none; cursor: pointer; }
.bp-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.bp-btn svg { width: 13px; height: 13px; }
.bp-btn--ghost { padding: 8px 12px; border: 1px solid #d9d5d3; border-radius: 7.5px; background: #fff; font-weight: 600; }
.bp-btn--hot { padding: 7px 16px; border-radius: 999px; background: #ef6700; color: #fff; font-weight: 500; }
.bp-insp { position: relative; padding: 14px 15px 16px; border-bottom: 1px solid #d9d5d3; outline: none; }
.bp-insp__title { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.bp-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.bp-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid #d9d5d3; border-radius: 6px; background: linear-gradient(145deg, #eae6e3, rgba(235,205,182,.56)); }
.bp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-tile span { position: absolute; right: 4px; bottom: 4px; padding: 2px 3px; border-radius: 2px; background: rgba(10,10,10,.72); color: #fff; font: 700 8px/1.55 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.bp-plan { padding-top: 14px; }
.bp-plan__title { display: block; padding: 0 15px 10px; font: 700 11px/1.55 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #6a6664; }
.bp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; }
.bp-table th { padding: 11px 10px; background: rgba(234,230,227,.65); border-top: 1px solid #d9d5d3; border-bottom: 1px solid #d9d5d3; font: 700 13px/1.1 var(--sans); letter-spacing: .025em; color: #6a6664; }
.bp-table td { padding: 12px 10px; border-bottom: 1px solid #d9d5d3; font: 600 13.5px/1.25 var(--sans); color: #6a6664; vertical-align: top; }
.bp-table th + th, .bp-table td + td { border-left: 1px solid #d9d5d3; }
.bp-table th:first-child { width: 34px; }
.bp-table th:nth-child(2) { width: 11%; }
.bp-table tr:last-child td { border-bottom: 0; }
.bp-table tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.bp-table tr:last-child td:last-child { border-bottom-right-radius: 11px; }
.bp-persona { --c: #6d28d9; --bg: rgba(208,186,243,.35); --chip: rgba(109,40,217,.15); }
.bp-pain { --c: #ff5c5c; --bg: rgba(255,192,192,.39); --chip: rgba(255,92,92,.2); }
.bp-creative { --c: #ef6700; --bg: rgba(249,196,156,.39); --chip: rgba(239,103,0,.2); }
.bp-delivery { --c: #00ab47; --bg: rgba(156,222,184,.39); --chip: rgba(0,171,71,.2); }
.bp-table td[class*="bp-"] { background: var(--bg); box-shadow: inset 0 2px 0 var(--c); color: var(--c); }
.bp-cell { position: relative; cursor: pointer; outline: none; transition: background .2s; }
.bp-table td.bp-cell:hover, .bp-table td.bp-cell:focus { background: #fff; }
.bp-cell__label { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; font: 700 10px/1.25 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.bp-cell__label svg { width: 14px; height: 14px; opacity: .84; flex: none; }
.bp-ghost { opacity: .26; }
.bp-ghost s { display: block; width: 70%; height: 15px; border-radius: 3px; background: var(--c); }
.bp-pop, .bp-note { position: absolute; z-index: 5; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none; background: #fff; border: 1px solid #ebe6e2; box-shadow: 0 22px 48px rgba(45,31,22,.18), 0 4px 12px rgba(45,31,22,.08); }
.bp-cell:hover .bp-pop, .bp-cell:focus .bp-pop, .bp-insp:hover .bp-note, .bp-insp:focus .bp-note, .bp-actions:hover .bp-note, .bp-actions:focus-within .bp-note, .bp-actions:focus .bp-note { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.bp-pop { top: calc(100% + 8px); left: 50%; width: 290px; margin-left: -145px; padding: 18px 20px; border-radius: 14px; cursor: default; }
.bp-delivery .bp-pop { left: auto; right: -20px; margin: 0; }
.bp-pop__label { display: block; font: 700 9px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.bp-pop b { display: block; margin: 14px 0 6px; font: 400 24px/1.1 var(--serif); letter-spacing: -.01em; color: #1b1817; }
.bp-pop p { font: 400 13px/1.5 var(--sans); color: #6a6664; }
.bp-pop__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bp-pop__chips i { padding: 4px 6px; border-radius: 4px; background: var(--chip); color: var(--c); font: 600 9px/1.2 var(--sans); font-style: normal; }
.bp-note { width: 200px; padding: 14px; border-radius: 12px; cursor: default; }
.bp-note p { font: 500 12.5px/1.45 var(--sans); color: #1b1817; }
.bp-note--left { top: 38px; left: 76px; }
.bp-note--right { top: calc(100% + 8px); right: 0; }
.bp-demo { display: inline-block; margin-top: 8px; font: 600 12.5px/1.3 var(--sans); color: #ef6700; }
@media (max-width: 720px) {
  .bp-sub { font-size: 13px; }
  .bp { padding: 6px; }
  .bp-head { padding: 10px; }
  .bp-title { font-size: 15px; }
  .bp-btn--ghost { padding: 7px 8px; }
  .bp-btn--hot { padding: 6px 12px; }
  .bp-insp { padding: 12px 10px; }
  .bp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-plan { position: relative; }
  .bp-plan__title { padding: 0 10px 10px; }
  .bp-table th:nth-child(-n+2), .bp-table td:nth-child(-n+2) { display: none; }
  .bp-table th:nth-child(3), .bp-table td:nth-child(3) { border-left: 0; }
  .bp-table th { padding: 9px 6px; font-size: 10.5px; }
  .bp-table td { padding: 10px 6px; font-size: 11.5px; }
  .bp-table tr:last-child td:nth-child(3) { border-bottom-left-radius: 11px; }
  .bp-cell { position: static; }
  .bp-cell__label { font-size: 8px; }
  .bp-cell__label svg { width: 11px; height: 11px; }
  .bp-pop, .bp-delivery .bp-pop { top: calc(100% + 8px); left: 0; right: 0; width: auto; margin: 0; }
  .bp-note--left { left: 10px; top: 36px; }
}
.bp-title { white-space: nowrap; }
@media (max-width: 720px) {
  .bp-table th, .bp-table td { padding-left: 5px; padding-right: 5px; overflow-wrap: anywhere; }
  .bp-table td { font-size: 10.5px; }
  .bp-table th { font-size: 9.5px; letter-spacing: 0; }
  .bp-cell__label { font-size: 7px; letter-spacing: 0; gap: 2px; }
  .bp-btn { font-size: 11px; }
  .bp-btn--ghost { padding: 6px 7px; }
  .bp-btn--hot { padding: 6px 10px; }
}
.bp { position: relative; }
.bp-insp, .bp-cell, .bp-actions { cursor: pointer; }
.bp-cell.is-demo .bp-pop, .bp-insp.is-demo .bp-note, .bp-actions.is-demo .bp-note { opacity: 1; visibility: visible; transform: none; }
.bp-table td.bp-cell.is-demo { background: #fff; }
.rv-visual .ucard__visual { margin: 0; }
.sl-logo { width: 22px; height: 22px; object-fit: cover; border-radius: 5px; flex: none; }
.ig-meta { height: 38px; width: 64px; object-fit: cover; object-position: 50% 12%; border-radius: 9px; flex: none; }
.ig-meta { object-fit: contain; object-position: 50% 50%; background: #fff; width: 58px; height: 40px; }
.bp-plan__title {
  font: 500 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.bp-sub, .bp-foot { font-family: var(--sans); font-weight: 400; letter-spacing: -.01em; color: var(--mute); }
.bp-btn--hot {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: var(--r-ctl);
  background: var(--hot); color: var(--ink); font: 500 13.5px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; text-shadow: none; white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(255, 113, 11, .45); transition: box-shadow .25s, background-color .25s, color .25s; transform: none; }
.bp-btn--ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-ctl); }
.bp-btn { height: 32px; padding: 0 12px; font-size: 11.5px; border-radius: 6px; }
.bp-btn--ghost { border: 0; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.bp, .bp-card, .bp-pop, .bp-note {
  box-shadow: none; }
.bp { border-radius: var(--r-card); border-color: var(--line); background: var(--sand); padding: 6px; }
.bp-card { border-radius: 10px; border-color: var(--line); background: var(--paper); }
.bp-pop, .bp-note { border-radius: 10px; box-shadow: 0 14px 30px -16px rgba(23, 20, 15, .45); }
.bp-btn--hot { color: var(--night); }
.ig-meta { border-radius: 6px; }
.bp-btn--hot { background: #ff710b; color: #fff; font-weight: 600; }
.plat-stage { position: relative; width: min(1240px, 100%); height: 640px; margin: 64px auto 0; text-align: left; }
.plat-back { position: absolute; left: 0; right: 0; top: 96px; bottom: 0; border-radius: 28px; background: var(--hot); transition: background-color .5s ease; }
.plat-stage[data-step="1"] .plat-back { background: var(--night); }
.plat-stage[data-step="2"] .plat-back { background: #ffb37a; }
.plat-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.plat-stage[data-step="0"] .pp-plan, .plat-stage[data-step="1"] .pp-review, .plat-stage[data-step="2"] .pp-integrate { opacity: 1; visibility: visible; }
.plat-win { position: absolute; left: 50%; top: 0; bottom: 0; width: min(900px, 76%); transform: translate(-50%, 26px); overflow: hidden; border-radius: 16px 16px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 97%); mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 97%);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.plat-stage[data-step="0"] .pp-plan .plat-win, .plat-stage[data-step="1"] .pp-review .plat-win, .plat-stage[data-step="2"] .pp-integrate .plat-win { transform: translate(-50%, 0); }
.plat-win--narrow { width: min(470px, 42%); }
.plat-win--mid { width: min(640px, 56%); }
.plat-win .bp { margin: 0; box-shadow: 0 30px 60px -30px rgba(23, 20, 15, .5); }
.plat-win .rv-visual { box-shadow: 0 30px 60px -30px rgba(23, 20, 15, .5); border-radius: 18px; }
.plat-stage:not([data-step="1"]) .rv-visual *, .plat-stage:not([data-step="1"]) .rv-visual *::before { animation-play-state: paused !important; }
.relay { display: grid; gap: 16px; padding: 26px 28px 80px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(23, 20, 15, .5); }
.relay-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.relay-head b { display: block; font: 300 26px/1.1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.relay-head span { display: block; margin-top: 3px; font: 400 14px/1.3 var(--sans); color: var(--mute); }
.relay-live { margin-left: auto; padding: 6px 10px 6px 22px; border-radius: 6px; background: var(--sand); font: 600 11px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); position: relative; }
.relay-live::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #2fb463; }
.plat-pop { position: absolute; z-index: 3; width: 290px; padding: 18px 20px; border-radius: 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 28px 50px -22px rgba(23, 20, 15, .55), 0 2px 6px rgba(23, 20, 15, .08);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.plat-stage[data-step="0"] .pp-plan .plat-pop, .plat-stage[data-step="1"] .pp-review .plat-pop, .plat-stage[data-step="2"] .pp-integrate .plat-pop { opacity: 1; transform: none; transition-delay: .25s; }
.plat-stage[data-step="0"] .pp-plan .pop-r, .plat-stage[data-step="1"] .pp-review .pop-r, .plat-stage[data-step="2"] .pp-integrate .pop-r { transition-delay: .4s; }
.pop-l { left: 12px; }
.pop-r { right: 12px; }
.pop-high { top: 150px; }
.pop-low { bottom: 70px; }
.pop-tag { display: block; margin-bottom: 8px; font: 600 11px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--hot-text); }
.plat-pop b { display: block; font: 300 22px/1.1 var(--serif); letter-spacing: -.03em; }
.plat-pop p { margin-top: 8px; font: 400 14.5px/1.45 var(--sans); letter-spacing: -.01em; color: var(--mute); }
.plat-pop .pop-tag + p { margin-top: 0; color: var(--ink); }
.pop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pop-chips i { padding: 6px 9px; border-radius: 6px; background: var(--sand); font: 500 12px/1.2 var(--sans); font-style: normal; color: var(--ink); }
.pop-chips--v { margin: 0 0 4px; }
.pop-chips--v i { padding: 7px 14px; font-weight: 600; }
.pop-chips--v i.is-on { background: var(--hot); color: #fff; }
.pop-status { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 7px; }
.pop-status li { display: flex; align-items: center; gap: 9px; font: 500 15px/1.2 var(--sans); }
.pop-status li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.s-ok { color: #1f9d55; }
.s-edit { color: #c9790a; }
.s-no { color: #cf3a2c; }
.pop-slack { width: 310px; padding: 0 18px 18px; }
.pop-slack header { display: flex; align-items: center; gap: 9px; margin: 0 -18px 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.pop-slack header b { font: 600 14px/1 var(--sans); letter-spacing: -.01em; }
.pop-slack .msg b { font: 600 14px/1.2 var(--sans); }
.pop-slack .msg p { margin-top: 2px; font-size: 14px; color: var(--mute); }
.pop-slack .avatar { width: 32px; height: 32px; border-radius: 8px; }
.pop-slack .thumbs { grid-template-columns: repeat(3, 52px); gap: 6px; margin-top: 10px; }
.pop-slack .thumbs .tile { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; }
.pop-slack .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1100px) {
  .plat-pop { width: 250px; padding: 15px 16px; }
  .pop-slack { width: 270px; padding: 0 16px 16px; }
  .plat-win { width: 80%; }
  .plat-win--narrow { width: 46%; }
  .plat-win--mid { width: 60%; }
}
@media (max-width: 820px) {
  .plat-stage { height: auto; margin-top: 40px; display: grid; }
  .plat-back { top: 60px; border-radius: 22px; }
  .plat-panel { position: relative; inset: auto; grid-area: 1 / 1; display: grid; gap: 12px; padding: 0 12px 16px; align-content: start; }
  .plat-panel:not(.is-shown) { }
  .plat-stage[data-step="0"] .plat-panel:not(.pp-plan), .plat-stage[data-step="1"] .plat-panel:not(.pp-review), .plat-stage[data-step="2"] .plat-panel:not(.pp-integrate) { position: absolute; inset: 0; height: 0; overflow: hidden; }
  .plat-win, .plat-win--narrow, .plat-win--mid { position: relative; left: auto; top: auto; bottom: auto; width: 100%; transform: none !important; -webkit-mask-image: none; mask-image: none; border-radius: 14px; overflow: visible; }
  .plat-win--narrow { max-width: 420px; margin: 0 auto; }
  .plat-pop, .pop-slack { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .relay { padding: 18px 16px 20px; }
  .relay-head b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .plat-pop, .plat-win, .plat-panel { transition: none; }
}
@media (min-width: 821px) {
  .plat-stage { width: min(1840px, 100%); height: clamp(680px, 58vw, 900px); margin-top: 56px; }
  .plat-back { top: 12%; border-radius: 32px; }
  .plat-win { width: min(1320px, 74%); border-radius: 20px 20px 0 0; }
  .plat-win .bp { zoom: 1.2; }
  .plat-win--narrow { width: min(680px, 40%); }
  .plat-win--mid { width: min(980px, 54%); }
  .plat-win--mid .relay { zoom: 1.25; }
  .plat-pop { width: clamp(270px, 21vw, 380px); padding: 22px 24px; border-radius: 16px; }
  .plat-pop b { font-size: clamp(22px, 1.9vw, 30px); }
  .plat-pop p { font-size: clamp(14.5px, 1.1vw, 17px); }
  .pop-tag { font-size: 12px; }
  .pop-chips i { font-size: 13px; padding: 7px 10px; }
  .pop-status li { font-size: clamp(15px, 1.15vw, 18px); }
  .pop-slack { width: clamp(290px, 23vw, 400px); padding: 0 22px 22px; }
  .pop-slack header { margin: 0 -22px 16px; padding: 14px 22px; }
  .pop-slack .thumbs { grid-template-columns: repeat(3, clamp(52px, 4.4vw, 76px)); }
  .pop-l { left: 1.5%; }
  .pop-r { right: 1.5%; }
  .pop-high { top: 22%; }
  .pop-low { bottom: 9%; }
}
@media (min-width: 1300px) {
  .plat-win .bp { zoom: 1.5; }
  .plat-win--mid .relay { zoom: 1.5; }
}
@media (min-width: 1700px) {
  .plat-win .bp { zoom: 1.7; }
  .plat-win--mid .relay { zoom: 1.7; }
}
.plat-win .bp-pop, .plat-win .bp-note { display: none !important; }
.plat-win .bp-cell, .plat-win .bp-insp, .plat-win .bp-actions { cursor: default; pointer-events: none; }
.plat-win .bp-cell__label svg { display: none; }
.plat-win .bp-table td.bp-cell { transition: background-color .4s ease, box-shadow .4s ease; }
.plat-win .bp-table td.bp-cell.is-lit { background: #fff; box-shadow: inset 0 3px 0 var(--c), inset 0 0 0 2px var(--c); }
.pop-cycle { min-height: 232px; display: flex; flex-direction: column; }
.pop-swap { transition: opacity .25s ease, transform .25s ease; }
.pop-swap.is-out { opacity: 0; transform: translateY(6px); }
.pop-steps { display: flex; gap: 6px; margin-top: auto; padding-top: 16px; }
.pop-steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background-color .3s; }
.pop-steps i.is-on { background: var(--hot); }
@media (max-width: 820px) {
  .pop-cycle { min-height: 0; }
}
.pop-slack { padding: 0 0 16px; }
.pop-slack header { margin: 0 0 14px; padding: 13px 18px; }
.slk { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 0 18px; text-align: left; }
.slk-av { width: 38px; height: 38px; border-radius: 8px; background: #fff; object-fit: contain; padding: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.slk-meta { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.plat-pop .slk-meta b { display: inline; font: 700 15px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.slk-meta i { padding: 2px 4px; border-radius: 3px; background: var(--sand); font: 600 9.5px/1 var(--sans); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.slk-meta time { font: 400 12px/1 var(--sans); color: var(--mute); }
.plat-pop .slk-text { margin: 3px 0 0; font: 400 15px/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.slk-files { display: flex; gap: 6px; margin-top: 9px; }
.slk-files span { width: clamp(52px, 4.4vw, 74px); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.slk-files img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slk-more { display: grid; place-items: center; background: var(--sand); font: 600 14px/1 var(--sans); color: var(--mute); }
.slk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.slk-btn { padding: 7px 11px; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); font: 600 12.5px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.slk-btn--go { background: #007a5a; color: #fff; box-shadow: none; }
.plat-pop .slk-react { display: flex; gap: 5px; margin: 9px 0 0; }
.slk-react span { padding: 3px 7px; border-radius: 999px; background: var(--sand); font: 500 12px/1.2 var(--sans); color: var(--ink); }
.pop-steps i { position: relative; overflow: hidden; background: var(--line); }
.pop-steps i::after { content: ""; position: absolute; inset: 0; background: var(--hot); transform: scaleX(0); transform-origin: 0 50%; }
.pop-steps i.is-done::after { transform: scaleX(1); }
.pop-steps i.is-on { background: var(--line); }
.pop-steps i.is-on::after { animation: pop-fill 4s linear forwards; }
.plat-stage:not([data-step="0"]) .pop-steps i.is-on::after { animation-play-state: paused; }
@keyframes pop-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .pop-steps i.is-on::after { animation-duration: 4s; }
}
.plat-win--review { display: flex; justify-content: center; align-items: flex-start; background: #fffdfa; box-shadow: 0 30px 60px -30px rgba(23, 20, 15, .5); }
.plat-win--review .rv-visual { width: min(470px, 56%); margin-top: 18px; box-shadow: none; border-radius: 0; }
.plat-win--review .ui-frame { border: 0; background: none; box-shadow: none; }
@media (min-width: 821px) {
  .plat-win--review .rv-visual { width: min(680px, 54%); margin-top: 22px; }
}
@media (max-width: 820px) {
  .plat-win--review { padding: 10px; box-shadow: none; }
  .plat-win--review .rv-visual { width: 100%; max-width: 420px; margin-top: 0; }
}
.plat-win--review { display: block; container-type: inline-size; background: #f6f4f1; }
.rvw { display: grid; grid-template-columns: minmax(0, 1fr) 25%; gap: 1.6cqw; padding: 1.8cqw; text-align: left; font-family: var(--sans); color: #17140f; }
.rvw-main { display: grid; gap: 1.6cqw; align-content: start; min-width: 0; }
.rvw-sum, .rvw-card, .rvw-side { background: #fff; border: 1px solid #e6e1dc; border-radius: 1.2cqw; }
.rvw-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4cqw 2cqw; padding: 1.3cqw 1.8cqw; }
.rvw-batch { grid-column: 1 / -1; font: 700 1.35cqw/1 var(--sans); letter-spacing: .02em; }
.rvw-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; text-align: center; }
.rvw-counts li { font: 500 1.15cqw/1.3 var(--sans); color: #55504a; }
.rvw-counts b { display: block; font: 700 1.9cqw/1.2 var(--sans); color: #17140f; }
.rvw-final { padding: 1.1cqw 2.2cqw; border-radius: 999px; background: #ff710b; color: #fff; font: 600 1.25cqw/1 var(--sans); white-space: nowrap; }
.rvw-card { padding: .6cqw; }
.plat-win--review .rvw-card .rv-visual { width: 100%; margin: 0; box-shadow: none; border-radius: 0; }
.plat-win--review .rvw-card .ucard__visual { margin: 0; }
.plat-win--review .rvw-card .ui { border-radius: .8cqw; }
.viz--review .ui__url { margin-left: auto; display: inline-flex; align-items: center; gap: .6em; max-width: 62%; padding: .45em .9em; border: 1px solid #e5e7eb; border-radius: .6em; font-size: .86em; font-weight: 500; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz--review .ui__url svg { flex: none; width: 1em; height: 1em; }
.rvw-side { align-self: start; display: grid; justify-items: start; gap: .9cqw; padding: 1.5cqw 1.4cqw 1.8cqw; }
.rvw-h { margin: .5cqw 0 0; font: 700 1.05cqw/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #3e3a36; }
.rvw-h:first-child { margin-top: 0; }
.rvw-chip { padding: .5cqw 1.1cqw; border-radius: 999px; background: #ece9e5; color: #3e3a36; font: 600 1.1cqw/1.2 var(--sans); white-space: nowrap; }
.rvw-chip i { font-style: normal; font-size: .8em; opacity: .6; margin-left: .2em; }
.rvw-chip.is-on { background: #ffb489; color: #fff; }
@media (max-width: 820px) {
  .plat-win--review { padding: 0; }
  .rvw { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
  .rvw-main { gap: 10px; }
  .rvw-side { display: none; }
  .rvw-sum, .rvw-card { border-radius: 12px; }
  .rvw-sum { padding: 12px 14px; gap: 6px 10px; }
  .rvw-batch { font-size: 12px; }
  .rvw-counts li { font-size: 10px; }
  .rvw-counts b { font-size: 15px; }
  .rvw-final { padding: 9px 12px; font-size: 11px; }
  .rvw-card { padding: 4px; }
  .plat-win--review .rvw-card .rv-visual { max-width: none; }
}
.plat-win--review .rvw-card .ui-frame { font-size: 2.05cqw; }
.plat-win--review .rvw-card .ui { padding: 2.6cqw 2.8cqw; }
.plat-win--review .rvw-card .ui__grid { grid-template-columns: 33% minmax(0, 1fr); gap: 2.2cqw; }
.plat-win--review .rvw-card .ui__square { width: 49%; }
.plat-win--review .rvw-card .pop--versions { width: 24em; }
@media (max-width: 820px) {
  .plat-win--review .rvw-card .ui-frame { font-size: 2.75cqw; }
  .plat-win--review .rvw-card .ui { padding: 4.2cqw; }
  .plat-win--review .rvw-card .ui__grid { grid-template-columns: 1fr 1fr; gap: 1.6em; }
  .plat-win--review .rvw-card .ui__square { width: 100%; }
}
@media (min-width: 821px) {
  .plat-win--review { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 90%, transparent 100%); }
  .plat-win--review .rvw-card .ui-frame { font-size: 1.9cqw; }
  .plat-win--review .rvw-card .ui__grid { grid-template-columns: 30% minmax(0, 1fr); }
  .plat-win--review .rvw-card .ui__square { width: 43%; }
}
@media (min-width: 821px) {
  .pp-review .plat-pop.pop-l.pop-high { margin-top: 96px; }
}
.pop-slack header { position: relative; }
.pop-slack header::after { content: "1"; margin-left: auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e01e5a; color: #fff; font: 700 11px/1 var(--sans); transform: scale(0); }
.pop-slack header::before { content: ""; position: absolute; right: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid #e01e5a; opacity: 0; pointer-events: none; }
@media (min-width: 821px) {
  .pop-slack header::before { right: 18px; }
}
.plat-stage[data-step="2"] .pop-slack { animation: slk-bump 8s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.plat-stage[data-step="2"] .pop-slack header::after { animation: slk-badge 8s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.plat-stage[data-step="2"] .pop-slack header::before { animation: slk-ring 8s ease-out infinite; }
.plat-stage[data-step="2"] .pop-slack .sl-logo { animation: slk-logo 8s ease-in-out infinite; }
.plat-stage[data-step="2"] .pop-slack .slk-av, .plat-stage[data-step="2"] .pop-slack .slk-meta, .plat-stage[data-step="2"] .pop-slack .slk-text { animation: slk-msg 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.plat-stage[data-step="2"] .pop-slack .slk-files { animation: slk-files 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.plat-stage[data-step="2"] .pop-slack .slk-actions { animation: slk-actions 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.plat-stage[data-step="2"] .pop-slack .slk-react span { display: inline-block; animation: slk-react-a 8s cubic-bezier(.3, 1.7, .5, 1) infinite both; }
.plat-stage[data-step="2"] .pop-slack .slk-react span + span { animation-name: slk-react-b; }
@keyframes slk-bump { 0%, 9%, 100% { transform: none; } 2% { transform: translateY(-7px) rotate(-.6deg); } 4.5% { transform: translateY(0) rotate(.4deg); } 6.5% { transform: translateY(-2px); } }
@keyframes slk-badge { 0% { transform: scale(0); } 3% { transform: scale(1.3); } 6%, 90% { transform: scale(1); } 95%, 100% { transform: scale(0); } }
@keyframes slk-ring { 0% { opacity: .9; transform: scale(.6); } 14% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes slk-logo { 0%, 9%, 100% { transform: none; } 2% { transform: rotate(-14deg) scale(1.12); } 4.5% { transform: rotate(10deg) scale(1.12); } 7% { transform: rotate(-4deg); } }
@keyframes slk-msg { 0%, 3% { opacity: 0; transform: translateY(10px); } 9%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes slk-files { 0%, 10% { opacity: 0; transform: translateY(10px) scale(.96); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes slk-actions { 0%, 16% { opacity: 0; transform: translateY(8px); } 22%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes slk-react-a { 0%, 42% { opacity: 0; transform: scale(0); } 46% { opacity: 1; transform: scale(1.2); } 49%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(0); } }
@keyframes slk-react-b { 0%, 55% { opacity: 0; transform: scale(0); } 59% { opacity: 1; transform: scale(1.2); } 62%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .plat-stage[data-step="2"] .pop-slack, .plat-stage[data-step="2"] .pop-slack *, .plat-stage[data-step="2"] .pop-slack header::after, .plat-stage[data-step="2"] .pop-slack header::before { animation: none !important; }
}
@media (min-width: 821px) {
  .pp-review .plat-pop.pop-l.pop-high { margin-top: clamp(200px, 17vw, 300px); }
}
.viz--review .ui__shot { position: relative; display: block; overflow: hidden; border-radius: 1.1em; }
.viz--review .ui .ui__shot > img { border-radius: 0; }
.plat-win--review .rvw-card .ui__shot--square { width: 43%; }
.plat-win--review .rvw-card .ui__shot--square .ui__square { width: 100%; }
@media (max-width: 820px) {
  .plat-win--review .rvw-card .ui__shot--square { width: 100%; }
}
.viz--review .ui__patch { position: absolute; overflow: hidden; left: 7%; width: 28%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-composite: intersect; }
.viz--review .ui .ui__shot .ui__patch img { position: absolute; display: block; max-width: none; width: calc(100% / .28); height: auto; left: calc(-7% / .28); border-radius: 0; aspect-ratio: auto; }
.viz--review .ui__shot--tall .ui__patch { top: 70.8%; height: 6.8%; }
.viz--review .ui .ui__shot--tall .ui__patch img { top: calc(-1 * (70.8% + 7%) / .068); }
.viz--review .ui__shot--square .ui__patch { top: 84.6%; height: 8.2%; }
.viz--review .ui .ui__shot--square .ui__patch img { top: calc(-1 * (84.6% + 7.2%) / .082); }
.viz--review .ui .ui__shot .ui__patch { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
.viz--review .ui .ui__shot--tall .ui__patch { left: 4%; width: 34%; top: 69.8%; height: 8.8%; }
.viz--review .ui .ui__shot--tall .ui__patch img { width: calc(100% / .34); left: calc(-4% / .34); top: calc(-1 * (69.8% + 7.6%) / .088); }
.viz--review .ui .ui__shot--square .ui__patch { left: 4%; width: 34%; top: 83.4%; height: 10.4%; }
.viz--review .ui .ui__shot--square .ui__patch img { width: calc(100% / .34); left: calc(-4% / .34); top: calc(-1 * (83.4% + 6.2%) / .104); }
.viz--review .ui .ui__shot .ui__patch { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 82%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 82%, transparent 100%); }
.viz--review .ui .ui__shot--square .ui__patch { left: 3%; width: 36%; top: 83%; height: 10.4%; }
.viz--review .ui .ui__shot--square .ui__patch img { width: calc(100% / .36); left: calc(-3% / .36); top: calc(-1 * (83% + 8.7%) / .104); }
.viz--review .ui .ui__shot--tall .ui__patch { left: 3%; width: 36%; top: 69.6%; height: 9%; }
.viz--review .ui .ui__shot--tall .ui__patch img { width: calc(100% / .36); left: calc(-3% / .36); top: calc(-1 * (69.6% + 7.8%) / .09); }
.plat-win--review .rv-visual .pop--tip { display: none !important; }
@media (min-width: 821px) {
  .pp-review .plat-pop.pop-l.pop-high { margin-top: 96px; }
}
@media (min-width: 821px) {
  .pp-review .plat-pop.pop-l.pop-high { margin-top: clamp(200px, 17vw, 300px); }
}
.pp-review .plat-pop.pop-l p { color: var(--mute); }
.plat-pop p.slk-files { display: block; gap: 0; margin: 8px 0 0; }
.plat-pop p.slk-actions { display: block; margin: 8px 0 0; }
.slk-at { padding: 1px 3px; border-radius: 3px; background: rgba(29, 155, 209, .14); color: #1264a3; font-weight: 500; }
.slk-code { padding: 1px 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: color-mix(in srgb, var(--ink) 5%, transparent); color: #c9560a; font: 500 .86em/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.slk-link { color: #1264a3; text-decoration: underline; text-underline-offset: 2px; font: 400 15px/1.4 var(--sans); }
@media (min-width: 821px) {
  .pop-slack { width: clamp(320px, 26vw, 430px); }
}
.plat-stage[data-step="3"] .plat-back { background: #ff8f3d; }
.plat-stage[data-step="3"] .pp-learn { opacity: 1; visibility: visible; }
.plat-stage[data-step="3"] .pp-learn .plat-win { transform: translate(-50%, 0); }
.plat-stage[data-step="3"] .pp-learn .plat-pop { opacity: 1; transform: none; transition-delay: .25s; }
.plat-stage[data-step="3"] .pp-learn .pop-r { transition-delay: .4s; }
@media (max-width: 820px) {
  .plat-stage[data-step="3"] .plat-panel:not(.pp-learn) { position: absolute; inset: 0; height: 0; overflow: hidden; }
}
.plat-win--learn { container-type: inline-size; background: #fbfaf8; }
.lr { padding: 2.6cqw 2.8cqw 3cqw; text-align: left; font-family: var(--sans); color: #17140f; }
.lr-title { margin: 0; font: 700 3cqw/1.1 var(--sans); letter-spacing: -.02em; }
.lr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6cqw 2.6cqw; margin: 1.4cqw 0 0; padding: 0; list-style: none; font: 400 1.55cqw/1.2 var(--sans); color: #4a4540; }
.lr-meta li { display: inline-flex; align-items: center; gap: .7cqw; }
.lr-meta svg { width: 1.7cqw; height: 1.7cqw; }
.lr-dot { width: 1cqw; height: 1cqw; border-radius: 50%; background: #ff710b; }
.lr-hash { font-weight: 500; color: #6a645d; }
.lr-report { font-weight: 700; color: #17140f; }
.lr-report svg { color: #14a6c7; }
.lr-label { margin: 2.6cqw 0 0; font: 700 1.35cqw/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8a847d; }
.lr-sub { margin: 1.1cqw 0 0; font: 700 1.45cqw/1 var(--sans); color: #3e3a36; }
.lr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; margin-top: 1.4cqw; }
.lr-card { overflow: hidden; border-radius: 1.2cqw; background: #fff; border: 1px solid #e6e1dc; }
.lr-card.is-made { border-color: #6fd3e4; box-shadow: 0 0 0 1px #6fd3e4; }
.lr-shot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #8a8580; }
.lr-shot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-shot--tall > img { object-position: 50% 0%; height: 141%; }
.lr-shot--tall-zoom > img { object-position: 50% 0%; height: 175%; width: 125%; margin-left: -12%; }
.lr-shot--sq > img, .lr-shot--sq-zoom > img { object-fit: cover; object-position: 50% 0%; width: 125%; height: 125%; margin-left: -6%; max-width: none; }
.lr-shot--sq-zoom > img { width: 150%; height: 150%; margin-left: -34%; }
.lr-rank { position: absolute; left: .9cqw; top: .9cqw; display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #ff710b; color: #fff; font: 700 1.35cqw/1 var(--sans); font-style: normal; box-shadow: 0 0 0 .3cqw #fff; }
.lr-made { position: absolute; left: 4.2cqw; top: .9cqw; display: inline-flex; align-items: center; gap: .5cqw; padding: .5cqw 1.1cqw .5cqw .6cqw; border-radius: 999px; background: #fff; font: 700 1.3cqw/1 var(--sans); color: #17140f; box-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .18); }
.lr-made img { width: 1.6cqw; height: 1.6cqw; object-fit: contain; }
.lr-video { position: absolute; right: .9cqw; top: .9cqw; padding: .45cqw .8cqw; border-radius: .5cqw; background: rgba(23, 20, 15, .78); color: #fff; font: 600 1.15cqw/1 var(--sans); }
.lr-chips { display: flex; flex-wrap: wrap; gap: .5cqw; margin: 0; padding: 1cqw .9cqw 1.2cqw; list-style: none; }
.lr-chips li { padding: .35cqw .7cqw; border-radius: .5cqw; font: 700 1.2cqw/1.2 var(--sans); white-space: nowrap; }
.lr-chips b { font-weight: 500; opacity: .8; }
.lr-chips .c-spend { background: #fde6e4; color: #e0453f; }
.lr-chips .c-ctr { background: #e3e6ff; color: #3646d6; }
.lr-chips .c-roas { background: #ffe3f3; color: #d63aa8; }
.lr-chips .c-c2p { background: #dcf5fa; color: #1398b8; }
.lr-chips .c-cpc { background: #fff0df; color: #e7780f; }
@media (max-width: 820px) {
  .plat-win--learn { container-type: normal; }
  .lr { padding: 14px; }
  .lr-title { font-size: 20px; }
  .lr-meta { gap: 6px 14px; font-size: 12px; }
  .lr-meta svg { width: 13px; height: 13px; }
  .lr-dot { width: 8px; height: 8px; }
  .lr-label { margin-top: 16px; font-size: 10px; }
  .lr-sub { margin-top: 8px; font-size: 12px; }
  .lr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .lr-card { border-radius: 10px; }
  .lr-rank { left: 7px; top: 7px; width: 20px; height: 20px; font-size: 11px; box-shadow: 0 0 0 2px #fff; }
  .lr-made { left: 31px; top: 7px; gap: 4px; padding: 4px 8px 4px 5px; font-size: 10px; }
  .lr-made img { width: 12px; height: 12px; }
  .lr-video { right: 7px; top: 7px; padding: 3px 6px; border-radius: 4px; font-size: 9.5px; }
  .lr-chips { gap: 4px; padding: 8px 7px 9px; }
  .lr-chips li { padding: 2px 5px; border-radius: 4px; font-size: 9.5px; }
}
.ig-conn { gap: 0; padding-bottom: 28px; }
.ig-conn .relay-head { margin-bottom: 6px; }
.ig-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; }
.ig-row:last-child { border-bottom: 0; }
.ig-row img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 4px; }
.ig-row b { display: block; font: 600 16px/1.25 var(--sans); color: var(--ink); }
.ig-row span { display: block; margin-top: 2px; font: 400 13.5px/1.35 var(--sans); color: var(--mute); }
.ig-row .relay-live { position: relative; }
.lr-shot > .lr-pic { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.lr-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lr-pic--tall { width: 100%; aspect-ratio: 9 / 16; }
.lr-pic--sq { height: 100%; aspect-ratio: 1; }
.lr-patch { position: absolute; overflow: hidden; left: 3%; width: 36%; top: 83%; height: 10.4%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 82%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 82%, transparent 100%); }
.lr-pic .lr-patch img { position: absolute; max-width: none; width: calc(100% / .36); height: auto; left: calc(-3% / .36); top: calc(-1 * (83% + 8.7%) / .104); }
.pop-intel { width: clamp(280px, 23vw, 380px); }
.pop-tag--persona { display: inline-flex; align-items: center; gap: 6px; color: #6d28d9; }
.pop-tag--persona svg { width: 14px; height: 14px; }
.pp-learn .pop-intel.pop-l { background: #f4f0fd; border-color: #b9a4ef; }
.intel-bars { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.intel-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; font: 500 13px/1.25 var(--sans); color: #2a2440; }
.intel-bars li span { grid-column: 1 / -1; }
.intel-bars li i { height: 7px; width: var(--w); border-radius: 999px; background: #6d28d9; }
.intel-bars li b { font: 600 12.5px/1 var(--sans); color: #5b5470; font-variant-numeric: tabular-nums; }
.pp-learn .pop-intel p { font-size: clamp(13.5px, 1vw, 15.5px); line-height: 1.5; }
.pp-learn .pop-intel p b { font-weight: 600; color: var(--ink); }
.plat-pop.pop-intel p b { display: inline; margin: 0; font: 600 1em/inherit var(--sans); letter-spacing: 0; color: var(--ink); }
@media (min-width: 821px) {
  .lr-grid { max-width: 72%; margin-left: auto; margin-right: auto; }
}
.plat-win--integrate { background: var(--paper); border-radius: 16px 16px 0 0; }
.pp-integrate .plat-win--integrate { width: min(900px, 76%); }
.ig-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: start; padding: 28px 30px 40px; text-align: left; }
.ig-wrap .relay.ig-conn { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
@media (min-width: 821px) {
  .pp-integrate .plat-win--integrate { width: min(1320px, 74%); }
  .ig-wrap { zoom: 1.05; }
}
@media (min-width: 1300px) {
  .ig-wrap { zoom: 1.25; }
}
@media (min-width: 1700px) {
  .ig-wrap { zoom: 1.45; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .ig-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .ig-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .ig-row { grid-template-columns: 38px minmax(0, 1fr); }
  .ig-row .relay-live { grid-column: 2; justify-self: start; }
}
.plat-win--integrate .ig-wrap .relay { zoom: 1; }
@media (min-width: 821px) {
  .ig-wrap { zoom: .95; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .ig-wrap { zoom: .85; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (min-width: 1300px) {
  .ig-wrap { zoom: 1.15; }
}
@media (min-width: 1700px) {
  .ig-wrap { zoom: 1.35; }
}
@media (min-width: 821px) {
  .ig-wrap { zoom: 1.3; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .ig-wrap { zoom: 1.12; }
}
@media (min-width: 1300px) {
  .ig-wrap { zoom: 1.55; }
}
@media (min-width: 1700px) {
  .ig-wrap { zoom: 1.8; }
}
@media (min-width: 1300px) {
  .ig-wrap { zoom: 1.4; }
}
@media (min-width: 1700px) {
  .ig-wrap { zoom: 1.5; }
}
@media (max-width: 820px) {
  .pp-integrate .plat-win--integrate { width: 100%; }
}
/* headings inside the stage in this site's type: Inter, semibold, tight */
.plat-pop b, .relay-head b { font-weight: 600; letter-spacing: -.02em; }
.plat-stage .pop-tag { letter-spacing: .06em; }
.plat-back { border-radius: 28px; }

/* Brief Plan buttons in this site's button style */
.plat-stage .bp-btn { height: auto; padding: 8px 16px; border-radius: 999px; font: 500 13px/1.2 var(--font); letter-spacing: -.01em; text-transform: none; }
.plat-stage .bp-btn--hot { background: var(--brand); color: #fff; box-shadow: inset 0 4px 12px rgba(255, 255, 255, .25), inset 0 1px 3px var(--brand-deep); }
.plat-stage .bp-btn--ghost { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

/* ---------- What you get: a bento of tiles around the finished ad (layout from the earlier site) ---------- */
.an { display: grid; gap: 12px; padding: 12px; border-radius: 28px; background: #f4f1ee;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 118px;
  grid-template-areas:
    "guide guide voice voice hook hook hook hook concept concept concept human"
    "guide guide ad ad ad ad ad ad ad formats formats formats"
    "research reviews ad ad ad ad ad ad ad formats formats formats"
    "assets assets ad ad ad ad ad ad ad sizes sizes sizes"
    "assets assets copy copy copy review review days days relay relay relay"; }
.an-t { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow-sm); text-align: center; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.an-t:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ink-5), 0 18px 34px -20px rgba(77, 31, 17, .3); }
.an-t > span { font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.an-t svg { width: 34px; height: 34px; color: var(--brand); }
.an-designer { grid-area: guide; } .an-voice { grid-area: voice; } .an-hook { grid-area: hook; } .an-concept { grid-area: concept; } .an-human { grid-area: human; }
.an-ad { grid-area: ad; } .an-formats { grid-area: formats; } .an-research { grid-area: research; } .an-reviews { grid-area: reviews; } .an-report { grid-area: assets; }
.an-sizes { grid-area: sizes; } .an-copy { grid-area: copy; } .an-review { grid-area: review; } .an-days { grid-area: days; } .an-revise { grid-area: relay; }

.an-designer svg { width: 44px; height: 44px; }
.an-designer b { font-size: 28px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
.an-designer > span, .an-hook > span, .an-voice > span, .an-report > span, .an-revise > span, .an-days > span { font-size: 13px; font-weight: 400; color: var(--ink-60); }
.an-voice q { font-size: 17px; font-weight: 500; font-style: italic; line-height: 1.25; letter-spacing: -.02em; quotes: "“" "”"; }
.an-hook b { font-size: clamp(36px, 4.2vw, 58px); font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--brand); }
.an-concept { align-items: flex-start; text-align: left; padding: 18px 22px; background: var(--brand); box-shadow: inset 0 6px 18px rgba(255, 255, 255, .22), inset 0 1px 4px var(--brand-deep); }
.an-concept small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.an-concept b { font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.an-human > span, .an-research > span, .an-reviews > span { font-size: 12.5px; }
.an-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }

.an-ad { padding: 0; background: linear-gradient(180deg, #fff 0%, #fff3ea 100%); }
.an-fan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.an-fan img { border-radius: 14px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .55); transition: transform .5s var(--ease); }
.an-main { position: relative; z-index: 2; height: 86%; width: auto; }
.an-side { position: absolute; z-index: 1; top: 50%; left: 50%; height: 70%; width: auto; }
.an-side--l { transform: translate(-112%, -50%) rotate(-7deg); }
.an-side--r { transform: translate(12%, -50%) rotate(7deg); }
.an-ad:hover .an-main { transform: scale(1.03); }
.an-ad:hover .an-side--l { transform: translate(-122%, -50%) rotate(-10deg); }
.an-ad:hover .an-side--r { transform: translate(22%, -50%) rotate(10deg); }

.an-formats { gap: 12px; }
.an-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.an-pills i { padding: 8px 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--ink-10); font-size: 13px; font-weight: 500; font-style: normal; color: var(--ink); text-align: center; }
.an-pills i:nth-child(2) { background: var(--ink); color: #fff; box-shadow: none; }
.an-pills i:nth-child(5) { grid-column: 1 / -1; justify-self: center; min-width: calc(50% - 3px); }

.an-report { justify-content: center; gap: 8px; }
.an-bars { display: flex; align-items: flex-end; gap: 9px; height: 86px; margin-bottom: 6px; }
.an-bars i { width: 22px; height: var(--h); border-radius: 4px; background: rgba(0, 0, 0, .1); }
.an-bars i:nth-child(3) { background: var(--brand); }
.an-report b { font-size: 24px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }

.an-frames { display: flex; align-items: flex-end; gap: 10px; height: 58px; }
.an-frames i { height: 100%; aspect-ratio: var(--r); display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 6px; }
.an-frames i:first-child { height: 62%; } .an-frames i:nth-child(2) { height: 78%; }
.an-frames em { font-size: 9px; font-weight: 600; font-style: normal; }

.an-copy { gap: 6px; padding: 10px 14px; }
.an-lines { display: grid; gap: 4px; width: 82%; }
.an-lines i { padding: 4px 10px; border-radius: 8px; background: var(--bg-soft); box-shadow: 0 0 0 1px var(--ink-5); text-align: left; font-size: 11.5px; font-style: normal; color: var(--ink-60); }
.an-lines i:nth-child(2) { font-weight: 600; color: var(--ink); }

.an-days { gap: 2px; background: #141110; box-shadow: none; }
.an-days b { font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -.05em; color: #ff8a3d; }
.an-days > span { color: rgba(255, 255, 255, .72); }
.an-revise { flex-direction: row; gap: 14px; text-align: left; padding: 14px 22px; }
.an-revise b { font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }

@media (max-width: 980px) {
  .an { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 112px;
    grid-template-areas:
      "hook hook hook hook human human"
      "ad ad ad ad guide guide"
      "ad ad ad ad guide guide"
      "ad ad ad ad voice voice"
      "concept concept concept concept research reviews"
      "assets assets formats formats formats formats"
      "assets assets sizes sizes sizes sizes"
      "copy copy copy review review review"
      "days days days relay relay relay"; }
}
@media (max-width: 560px) {
  .an { gap: 8px; padding: 8px; border-radius: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 116px;
    grid-template-areas: "hook hook" "ad ad" "ad ad" "ad ad" "concept concept" "guide voice" "guide human" "research reviews" "assets formats" "assets formats" "sizes copy" "review days" "relay relay"; }
  .an-t { border-radius: 16px; padding: 10px; }
  .an-designer b { font-size: 22px; }
  .an-pills { grid-template-columns: 1fr; } .an-pills i { padding: 6px 12px; font-size: 12px; }
  .an-revise b { font-size: 30px; }
  .an-side--l { transform: translate(-100%, -50%) rotate(-7deg); } .an-side--r { transform: translate(0, -50%) rotate(7deg); }
}

/* placements: 1:1 and 9:16 only */
.an-frames i:first-child { height: 58%; } .an-frames i:nth-child(2) { height: 100%; }

/* number ranges: give the dash its own room so it doesn't touch the digits */
.an-days b, .an-revise b { letter-spacing: -.03em; }
.an .dash { display: inline-block; margin: 0 .08em; transform: translateY(-.04em); }

/* ---------- Comparison: the earlier site's chart (notes on hover, a lit row, the Campfire tick growing), in this site's card style ---------- */
.cmp.cmp--matrix { padding: 0; overflow: visible; border-radius: 28px; background: #fff; box-shadow: var(--card-shadow); text-align: left; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 2.1fr) repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink-5); transition: background-color .25s; }
.cmp-head { border-top: 0; }
.cmp-row > span { display: flex; align-items: center; justify-content: center; padding: 16px 10px; text-align: center; }
.cmp-head > span { padding: 20px 8px; font-size: 11.5px; font-weight: 600; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }
.cmp-head .cmp-us { font-size: 15px; letter-spacing: -.01em; text-transform: none; color: var(--brand); }
.cmp-row > .cmp-us { background: var(--brand-soft); }
.cmp-head > .cmp-us { border-radius: 18px 18px 0 0; }
.cmp-row:nth-last-child(2) > .cmp-us { border-radius: 0 0 18px 18px; }
.cmp-row > .cmp-topic { display: block; text-align: left; padding: 16px 24px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); transition: color .25s; }
.cmp-topic small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }
.cmp-short { display: none; }
.cmp--matrix .m { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; transition: transform .25s, box-shadow .25s, background-color .25s, color .25s; }
.cmp--matrix .m svg { width: 15px; height: 15px; }
.cmp--matrix .m-y { background: rgba(0, 0, 0, .08); color: var(--ink); }
.cmp--matrix .m-p { background: rgba(0, 0, 0, .05); color: var(--ink-60); }
.cmp--matrix .m-n { background: none; color: rgba(0, 0, 0, .28); }
.cmp--matrix .cmp-us .m-y { background: var(--brand); color: #fff; box-shadow: inset 0 3px 8px rgba(255, 255, 255, .25), 0 6px 14px -6px rgba(239, 103, 0, .8); }
/* hover a row: it lights up, the Campfire tick grows */
.cmp-row:not(.cmp-head):hover { background: rgba(239, 103, 0, .045); }
.cmp-row:not(.cmp-head):hover .cmp-topic { color: var(--brand); }
.cmp-row:hover .cmp-us .m-y { transform: scale(1.22); box-shadow: 0 0 0 6px rgba(239, 103, 0, .18), 0 8px 18px -6px rgba(239, 103, 0, .9); }
/* a short note over a competitor's yes or sometimes */
.cmp-row > span.has-note { position: relative; cursor: help; outline: none; }
.has-note:hover .m, .has-note:focus .m { transform: scale(1.15); background: var(--ink); color: #fff; }
.cmp-note { position: absolute; z-index: 4; left: 50%; bottom: calc(50% + 22px); width: 190px; margin-left: -95px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: left; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none; }
.cmp-note::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.has-note:hover .cmp-note, .has-note:focus .cmp-note { opacity: 1; visibility: visible; transform: none; }
.cmp-row > span:last-child .cmp-note { left: auto; right: 6px; margin-left: 0; }
.cmp-row > span:last-child .cmp-note::after { left: auto; right: calc(50% - 60px); }
.cmp-key { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0; padding: 14px 24px; border-top: 1px solid var(--ink-5); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-60); }
.cmp-key .m { width: 20px; height: 20px; margin-left: 12px; } .cmp-key .m svg { width: 12px; height: 12px; }
@media (max-width: 760px) {
  .cmp-row { grid-template-columns: minmax(0, 1.9fr) repeat(5, minmax(0, 1fr)); }
  .cmp-row > span { padding: 12px 2px; }
  .cmp-row > .cmp-topic { padding: 12px 6px 12px 12px; font-size: 12.5px; }
  .cmp-topic small { display: none; }
  .cmp-head > span { padding: 12px 1px; font-size: 7.5px; letter-spacing: .02em; }
  .cmp-head .cmp-us { font-size: 9px; }
  .cmp-long { display: none; } .cmp-short { display: inline; }
  .cmp--matrix .m { width: 20px; height: 20px; } .cmp--matrix .m svg { width: 12px; height: 12px; }
  .cmp-key { justify-content: center; padding: 12px; }
  .cmp-note { width: 150px; margin-left: -75px; font-size: 11.5px; padding: 8px 10px; bottom: calc(50% + 16px); }
  .cmp-row > span:nth-last-child(2) .cmp-note { left: auto; right: -30px; margin-left: 0; }
  .cmp-row > span:nth-last-child(2) .cmp-note::after { left: auto; right: 44px; }
}

/* Campfire's own ticks stay orange when their note opens */
.cmp-us.has-note:hover .m-y, .cmp-us.has-note:focus .m-y { background: var(--brand); color: #fff; transform: scale(1.22); }

/* second toast: still set back behind the first, but readable */
.toast--ghost { opacity: .62; filter: none; }

/* Plan tab: the creative plan as it now looks in the product (concept, delivery format, creative format, strategy, assets) */
.bp2 { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; font-family: var(--font); }
.bp2 th { padding: 11px 12px; background: #efedeb; border-top: 1px solid #e3dfdc; border-bottom: 1px solid #e3dfdc; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a9592; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp2 th + th, .bp2 td + td { border-left: 1px solid #e3dfdc; }
.bp2 th:nth-child(1) { width: 32px; } .bp2 th:nth-child(2) { width: 25%; } .bp2 th:nth-child(3) { width: 12%; } .bp2 th:nth-child(4) { width: 15%; } .bp2 th:nth-child(6) { width: 13%; }
.bp2 td { padding: 14px 12px; border-bottom: 1px solid #e3dfdc; vertical-align: middle; font-size: 12px; line-height: 1.45; color: #1b1817; }
.bp2 p { margin: 0; }
.bp2-num { font-size: 11px; font-weight: 600; color: #9a9592; text-align: center; }
.bp2-bulb { display: inline-block; width: 14px; height: 14px; margin: 0 5px -2px 0; color: #9a9592; }
.bp2-concept { --c: #1b1817; background: #f3f2f1; font-weight: 600; font-size: 12.5px; }
.bp2-concept b { font-weight: 700; }
.bp2-delivery { --c: #16a34a; background: #eef8f1; color: #16a34a !important; font-weight: 700; font-size: 13px !important; }
.bp2-creative { --c: #ef6700; background: #fff3ee; color: #ef6700 !important; font-weight: 700; font-size: 13px !important; line-height: 1.3 !important; }
.bp2-strategy { --c: #6a645d; background: #f3f2f1; font-size: 11.5px !important; }
.bp2-strategy .bp2-bulb { display: block; margin: 0 0 6px; width: 16px; height: 16px; }
.bp2-assets { font-size: 11.5px !important; }
.bp2-tag { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px; background: #f1e9fd; color: #7c3aed; font-size: 11px; font-weight: 700; }
.bp2-ghost td { opacity: .45; }
.bp2-ghost s { display: block; height: 9px; margin: 5px 0; border-radius: 3px; background: currentColor; opacity: .18; }
.bp2-ghost s:nth-child(2) { width: 70%; } .bp2-ghost s:nth-child(3) { width: 85%; }
.plat-win .bp2 td.bp-cell { transition: background-color .4s ease, box-shadow .4s ease; }
.plat-win .bp2 td.bp-cell.is-lit { background: #fff; box-shadow: inset 0 3px 0 var(--c), inset 0 0 0 2px var(--c); }
@media (max-width: 720px) {
  .bp2 th:nth-child(6), .bp2 td:nth-child(6), .bp2 th:nth-child(1), .bp2 td:nth-child(1) { display: none; }
  .bp2 th { padding: 9px 6px; font-size: 9px; letter-spacing: 0; } .bp2 td { padding: 10px 6px; font-size: 10.5px; }
  .bp2 th:nth-child(2) { width: 30%; } .bp2 th:nth-child(3) { width: 16%; } .bp2 th:nth-child(4) { width: 18%; }
}

.bp2 th { white-space: normal; line-height: 1.2; }

/* the lightbulb lights up with its cell: it's where the evidence behind an idea lives */
.plat-win .bp2 td.bp-cell.is-lit .bp2-bulb { color: var(--brand); }

/* Platform: the product window keeps its full size. The callouts are a little narrower, hug the
   outer edges and sit low, over the faded bottom of the window, so they only overlap its edges */
@media (min-width: 821px) {
  .plat-stage .plat-pop, .plat-stage .pop-slack, .plat-stage .pop-intel { width: clamp(230px, 18vw, 320px); }
  .plat-stage .pop-l { left: 1%; } .plat-stage .pop-r { right: 1%; }
  .plat-stage .pop-high, .plat-stage .pop-low { top: auto; bottom: 6%; }
  .plat-stage .pp-review .plat-pop.pop-l.pop-high { margin-top: 0; }
}

/* fieldset legend sits inside its box like the other field labels (browsers draw it on the border by default) */
fieldset.field { display: block; min-width: 0; }
fieldset.field legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; }
fieldset.field .spend { clear: both; }

/* Growth leads card: the three numbers fit inside their white card */
.use .ui { width: 88%; padding: 10px; }
.use .perf { gap: 5px; margin-top: 0; }
.use .perf div { min-width: 0; padding: 8px 7px; }
.use .perf b { font-size: 15px; white-space: nowrap; }

@media (min-width: 821px) { .plat-stage .pp-review .plat-pop { bottom: 2%; } }

/* callouts sized to the gutter beside the window, so they only just overlap its edge */
@media (min-width: 821px) {
  .plat-stage .plat-pop, .plat-stage .pop-slack, .plat-stage .pop-intel { width: max(210px, calc(13% + 36px)); padding: 18px; }
  .plat-stage .pop-l { left: .6%; } .plat-stage .pop-r { right: .6%; }
  .plat-stage .plat-pop b { font-size: clamp(19px, 1.5vw, 24px); }
  .plat-stage .plat-pop p { font-size: clamp(13px, .95vw, 15px); }
}

@media (min-width: 821px) { .plat-stage .plat-pop .intel-bars b { font-size: 12.5px; font-weight: 600; } }

/* Integrate: normal-size type, connections and the Slack message side by side */
@media (min-width: 821px) {
  .plat-stage .ig-wrap { zoom: 1 !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; padding: 28px 30px 40px; }
  .plat-stage .ig-slackcard .slk { grid-template-columns: 36px minmax(0, 1fr); }
  .plat-stage .ig-slackcard .slk-text { font-size: 14px; line-height: 1.45; }
  .plat-stage .ig-slackcard header b { white-space: nowrap; }
}
@media (min-width: 1500px) { .plat-stage .ig-wrap { zoom: 1.15 !important; } }

/* the Slack message inside the Integrate window is a full card, not a side callout */
@media (min-width: 821px) {
  .plat-stage .pop-slack.ig-slackcard { width: auto; padding: 0 0 18px; }
  .plat-stage .ig-slackcard .slk { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 0 18px; }
  .plat-stage .ig-slackcard .slk-text { font-size: 15px; line-height: 1.45; }
  .plat-stage .ig-slackcard header { margin: 0 0 14px; padding: 13px 18px; }
}

/* Integrate at the earlier, larger scale: the Slack message reads as a full card */
@media (min-width: 821px) { .plat-stage .ig-wrap { zoom: 1.1 !important; } }
@media (min-width: 1300px) { .plat-stage .ig-wrap { zoom: 1.25 !important; } }
@media (min-width: 1700px) { .plat-stage .ig-wrap { zoom: 1.4 !important; } }
.plat-stage .ig-slackcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 44px -26px rgba(23, 20, 15, .45); }

/* ---------- Platform: Insights tab (stage step 4) ---------- */
.plat-stage[data-step="4"] .plat-back { background: #ffd6b8; }
.plat-stage[data-step="4"] .pp-insights { opacity: 1; visibility: visible; }
.plat-stage[data-step="4"] .pp-insights .plat-win { transform: translate(-50%, 0); }
.plat-stage[data-step="4"] .pp-insights .plat-pop { opacity: 1; transform: none; transition-delay: .25s; }
.plat-stage[data-step="4"] .pp-insights .pop-r { transition-delay: .4s; }
@media (max-width: 820px) { .plat-stage[data-step="4"] .plat-panel:not(.pp-insights) { position: absolute; inset: 0; height: 0; overflow: hidden; } }
.plat-win--insights { container-type: inline-size; background: #f8f6f4; }
.ins { padding: 3cqw 3cqw 4cqw; text-align: left; font-family: var(--font); color: #17140f; }
.ins-title { margin: 0; font-size: max(17px, 3cqw); font-weight: 700; letter-spacing: -.02em; }
.ins-sub { margin: .8cqw 0 0; font-size: max(11px, 1.5cqw); color: #6a645d; }
.ins-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; margin-top: 2.4cqw; }
.ins-card { padding: 2cqw; border: 1px solid #e6e1dc; border-radius: 1.4cqw; background: #fff; }
.ins-card b { display: flex; align-items: center; gap: .8cqw; font-size: max(11.5px, 1.65cqw); font-weight: 700; }
.ins-card svg { flex: none; width: max(13px, 1.8cqw); height: max(13px, 1.8cqw); color: #6a645d; }
.ins-card p { margin: .9cqw 0 0; font-size: max(10.5px, 1.35cqw); line-height: 1.45; color: #6a645d; }
.ins-panel { width: 74%; margin: 2.6cqw 0 0 auto; padding: 2.4cqw 2.6cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 2cqw 4cqw -2cqw rgba(0, 0, 0, .35); }
.ins-panel__head { display: flex; justify-content: space-between; align-items: center; }
.ins-panel__head b { font-size: max(14px, 2.3cqw); font-weight: 700; letter-spacing: -.02em; }
.ins-panel__head span { font-size: max(14px, 2.2cqw); color: #6a645d; }
.ins-concept { margin: 1.2cqw 0 1.4cqw; font-size: max(11px, 1.5cqw); font-weight: 600; line-height: 1.4; }
.ins-ev { padding: 1.4cqw 1.6cqw; border: 1px solid #e6e1dc; border-radius: 1.2cqw; }
.ins-ev + .ins-ev { margin-top: 1cqw; }
.ins-ev small { display: block; font-size: max(10px, 1.2cqw); font-weight: 700; color: #6a645d; }
.ins-ev p { margin: .6cqw 0; font-size: max(11px, 1.5cqw); line-height: 1.45; }
.ins-link { font-size: max(10.5px, 1.3cqw); color: #1d64d8; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 820px) { .ins-cards { grid-template-columns: 1fr; } .ins-panel { width: 100%; } }

/* ---------- Fit to one screen: the hero and the platform section each fit the window at 100% zoom ---------- */
.hero { padding-top: 112px; }
.hero__toast-stack { margin-bottom: 20px; }
.hero .lede { margin-top: 16px; }
.hero__cta { margin-top: 22px; }
/* the network graphic scales down with the window's height (script.js sets --net-s) */
.network { zoom: var(--net-s, 1); margin-top: 28px; }
@media (min-width: 821px) {
  #platform { padding-top: 56px; padding-bottom: 56px; }
  #platform .section-head { margin-bottom: 18px; }
  #platform .plat-subs { margin-top: 10px; }
  #platform .plat-stage { height: max(440px, calc(100svh - 330px)); max-height: 900px; margin-top: 28px; }
}



/* Platform: keep the stage's own proportions and scale the whole thing to fit the window height
   (script.js sets --stage-s), so nothing gets squashed or stretched */
@media (min-width: 821px) {
  #platform .plat-stage { height: clamp(680px, 58vw, 900px); max-height: none; zoom: var(--stage-s, 1); }
}

/* Platform callouts: undo most of the stage scaling so their text stays readable,
   and sit them beside the window (outside the backdrop) instead of on top of it */
@media (min-width: 821px) {
  #platform .plat-stage .plat-pop:not(.pop-slack), #platform .plat-stage .pop-intel { zoom: var(--pop-z, 1); width: 270px; }
  #platform .plat-stage .pop-l { left: auto; right: calc(87% + 14px); }
  #platform .plat-stage .pop-r { right: auto; left: calc(87% + 14px); }
}

/* Platform: backdrop widens to sit behind the side callouts too */
@media (min-width: 821px) {
  #platform .plat-stage .plat-back { left: calc(13% - 46px - 270px * var(--pop-z, 1)); right: calc(13% - 46px - 270px * var(--pop-z, 1)); }
}

/* Platform callouts: each tab places its two boxes differently, so switching tabs visibly changes the layout
   Plan: left high, right low · Insights: left low, right high · Review: both mid · Learn: left high, right low-mid · Integrate: right high */
@media (min-width: 821px) {
  #platform .plat-stage .plat-panel .plat-pop { margin-top: 0; }
  #platform .plat-stage .pp-plan .pop-l      { top: 16%; bottom: auto; }
  #platform .plat-stage .pp-plan .pop-r      { top: auto; bottom: 6%; }
  #platform .plat-stage .pp-insights .pop-l  { top: auto; bottom: 9%; }
  #platform .plat-stage .pp-insights .pop-r  { top: 18%; bottom: auto; }
  #platform .plat-stage .pp-review .pop-l    { top: 38%; bottom: auto; }
  #platform .plat-stage .pp-review .pop-r    { top: 30%; bottom: auto; }
  #platform .plat-stage .pp-learn .pop-l     { top: 20%; bottom: auto; }
  #platform .plat-stage .pp-learn .pop-r     { top: 46%; bottom: auto; }
  #platform .plat-stage .pp-integrate .pop-r { top: 18%; bottom: auto; }
}

/* bigger product window: shorten the bottom fade so the first plan row stays readable */
@media (min-width: 821px) {
  #platform .plat-stage .plat-win:not(.plat-win--review) { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%); }
}

@media (min-width: 821px) { #platform .plat-stage .pp-plan .bp-tile { aspect-ratio: 1; } }

/* One screen per section: tighter spacing on desktop, and the visuals scale down (script.js) when the window is short */
@media (min-width: 821px) {
  #how, #anatomy, #compare, #talk { padding-top: 88px; padding-bottom: 40px; }
  #how .section-head, #anatomy .section-head, #compare .section-head { margin-bottom: 32px; }
}
/* Contact: heading on the left, form on the right */
@media (min-width: 1000px) {
  #talk .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  #talk .section-head { text-align: left; margin: 0; position: sticky; top: 120px; }
  #talk .form { width: 100%; margin: 0; }
}

/* Who is Campfire for: one simple picture per audience */
.bf-ops > * { position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 10px 22px -12px rgba(23,20,15,.45), 0 0 0 1px rgba(23,20,15,.06); font-size: 11px; line-height: 1.3; color: var(--ink); }
.bf-doc { left: 7%; top: 12%; width: 44%; padding: 10px 11px; rotate: -6deg; }
.bf-doc i { display: block; height: 30px; margin-bottom: 7px; border-radius: 6px; background: linear-gradient(135deg, #ef6700, #ffb37a); }
.bf-doc b { display: block; font-size: 11.5px; } .bf-doc small { color: var(--ink-60); font-size: 10px; }
.bf-swatches { display: flex; gap: 4px; margin-top: 6px; } .bf-swatches em { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.bf-slack { right: 5%; top: 9%; width: 52%; display: flex; gap: 6px; padding: 8px 9px; rotate: 4deg; }
.bf-slack img { width: 16px; height: 16px; flex: none; } .bf-slack p { margin: 0 !important; font-size: 10.5px !important; color: var(--ink) !important; } .bf-slack b { color: #1264a3; font-weight: 600; }
.bf-slack--2 { top: 46%; right: 10%; width: 46%; rotate: -3deg; }
.bf-link { left: 12%; bottom: 10%; padding: 7px 10px; border-radius: 999px; rotate: 3deg; white-space: nowrap; } .bf-link b { color: var(--brand); font-weight: 600; } .bf-link span { margin-right: 3px; }
.bf-ping { right: 6%; bottom: 12%; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50% !important; background: #e01e5a !important; color: #fff !important; font-weight: 700; font-size: 12px !important; box-shadow: 0 0 0 4px rgba(224,30,90,.18) !important; }
.bf-spend { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 78% !important; padding: 14px 16px !important; }
.bf-spend__top { display: flex; align-items: center; gap: 7px; } .bf-spend__top img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.bf-spend small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }
.bf-spend > b { display: block; margin-top: 6px; font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.bf-bar { display: block; height: 6px; margin-top: 10px; border-radius: 999px; background: #f1ebe4; overflow: hidden; } .bf-bar i { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb37a, var(--brand)); }
.bf-brands { position: absolute; inset: 14px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; }
.bf-brands img { position: static !important; width: 100% !important; height: 100% !important; border-radius: 10px !important; border: 2px solid #fff !important; object-fit: cover; box-shadow: 0 6px 12px -8px rgba(0,0,0,.45) !important; }
.bf-brands span { grid-column: span 2; display: grid; place-items: center; border-radius: 10px; border: 1.5px dashed rgba(23,20,15,.25); background: rgba(255,255,255,.55); font-size: 11px; font-weight: 600; color: var(--ink-60); }

.use__visual .bf-slack img, .use__visual .bf-spend img { position: static; width: 16px; height: 16px; border: 0; border-radius: 4px; box-shadow: none; object-fit: contain; }
.use__visual .bf-spend img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }

.bf-doc { left: 6%; top: 11%; width: 38%; padding: 8px 9px; }
.bf-doc i { height: 24px; margin-bottom: 6px; }
.bf-slack { right: 5%; top: 11%; width: 54%; align-items: center; }
.bf-slack--2 { top: 45%; right: 9%; width: 50%; }
.bf-link { left: 7%; bottom: 11%; }
.bf-ping { right: 2%; top: 4%; bottom: auto; width: 22px; height: 22px; font-size: 11px !important; }

/* Founders: their own Ads Manager number, already past the $25k line where Campfire fits */
.bf-spend > b { font-size: 32px; }
.bf-bar { position: relative; overflow: visible; height: 7px; margin-top: 10px; }
.bf-bar i { width: 77%; }
.bf-bar em { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--ink); }
.bf-scale { position: relative; display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; font-weight: 600; color: var(--ink-40); }
.bf-scale .bf-mark { position: absolute; left: 50%; translate: -50% 0; color: var(--ink); }
.bf-scale .bf-fit { color: var(--brand); }

.bf-bar em, .bf-scale .bf-mark { left: 36%; }
.bf-scale { justify-content: flex-end; }

/* Founders: a bold callout, like a "we're looking for brands spending..." story ad */
.bf-claim { display: flex; flex-direction: column; justify-content: center; padding: 0 20px; background: radial-gradient(120% 90% at 85% 10%, rgba(239,103,0,.28), transparent 60%), #17140f; color: #fff; }
.use .bf-claim p { margin: 0; }
.bf-claim__k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62) !important; }
.bf-claim__big { margin: 2px 0 8px !important; font-size: 42px; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #fff !important; }
.bf-claim__big span { position: relative; display: inline-block; }
.bf-claim__big svg { position: absolute; left: -2%; right: -2%; bottom: -9px; width: 104%; height: 11px; overflow: visible; }
.bf-claim__big path { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; }
.use.is-in .bf-claim__big path { animation: bf-scribble .9s .5s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes bf-scribble { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .bf-claim__big path { stroke-dashoffset: 0; } }

.use .bf-claim .bf-claim__k { font-size: 12px; line-height: 1.2; }
.use .bf-claim .bf-claim__big { font-size: 44px; line-height: 1; }

/* keep the four cards the same width: the big number scales to its card instead of stretching it */
.uses > .use { min-width: 0; }
.bf-claim { container-type: inline-size; }
.use .bf-claim .bf-claim__big { font-size: 15.5cqw; white-space: nowrap; }
.use .bf-claim .bf-claim__k { font-size: max(10px, 4.4cqw); }

/* all four cards share one height; the "Get started" link sits at the bottom of each */
@media (min-width: 821px) {
  .uses { align-items: stretch; }
  .uses > .use { display: flex; flex-direction: column; }
  .use .use__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .use .use__body .link-arrow { margin-top: auto; }
}

/* Founders callout on the same pastel panel as the other cards */
.use .bf-claim { background: none; color: var(--ink); }
.use .bf-claim.tint-rose { background: var(--tint-rose); }
.use .bf-claim .bf-claim__k { color: var(--ink-60) !important; }
.use .bf-claim .bf-claim__big { color: var(--ink) !important; }

.use .bf-claim.tint-sky { background: var(--tint-sky); }
.bf-claim__on { display: flex; align-items: center; gap: 6px; }
.bf-meta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(23,20,15,.08), 0 4px 10px -6px rgba(23,20,15,.35); color: var(--ink); letter-spacing: .02em; text-transform: none; font-weight: 600; }
.use__visual .bf-meta img { position: static; width: 18px; height: 18px; border: 0; border-radius: 50%; box-shadow: none; object-fit: cover; }

/* Agencies: a wall of client wordmarks */
.bf-logos { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 7px; }
.bf-logos .lg { display: grid; place-items: center; min-width: 0; padding: 0 4px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(23,20,15,.06), 0 6px 12px -8px rgba(23,20,15,.35); color: var(--ink); font-size: 12px; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; }
.lg-state { font-weight: 900; letter-spacing: .14em; }
.lg-jones { font-family: Georgia, serif; font-size: 9.5px !important; letter-spacing: .16em; }
.lg-uag { font-weight: 900; font-style: italic; font-size: 15px !important; letter-spacing: -.02em; }
.lg-story { font-family: Georgia, serif; font-style: italic; font-size: 12.5px !important; }
.lg-home { font-weight: 800; font-size: 10px !important; letter-spacing: .08em; }
.lg-s6 { font-weight: 700; letter-spacing: -.03em; font-size: 13px !important; }
.lg-throne { font-weight: 300; letter-spacing: .3em; font-size: 10px !important; }
.lg-wink { font-weight: 800; font-size: 16px !important; letter-spacing: -.05em; }
.bf-logos .lg-next { background: rgba(255,255,255,.55); box-shadow: none; border: 1.5px dashed rgba(23,20,15,.25); color: var(--ink-60); font-size: 9.5px !important; font-weight: 600; white-space: normal; }

.bf-brands.bf-logos .lg { grid-column: auto; border-style: none; }
.bf-brands.bf-logos .lg-next { border: 1.5px dashed rgba(23,20,15,.25); }

.bf-logos .lg-jones { white-space: normal; font-size: 9px !important; line-height: 1.15; letter-spacing: .18em; }
.bf-logos .lg-story { font-size: 11px !important; }
.bf-logos .lg-home { font-size: 8.5px !important; letter-spacing: .06em; }

.bf-brands.bf-logos .lg { padding: 0 2px; }
.bf-logos .lg-story { font-size: 10px !important; letter-spacing: -.01em; }
.bf-logos .lg-throne { letter-spacing: .18em; font-size: 9.5px !important; }

/* Agencies: real client logos */
.bf-brands.bf-logos { inset: 12px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 5px; }
.bf-brands.bf-logos .lg { padding: 4px 5px; border-radius: 8px; }
.use__visual .bf-logos .lg img { position: static; width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: contain; }
.bf-brands.bf-logos .lg-next { grid-column: span 2; font-size: 9.5px !important; }

.bf-brands.bf-logos .lg { overflow: hidden; }
.use__visual .bf-logos .lg img { max-width: 88%; max-height: 22px; }

/* Agencies: client logos float freely, mixed sizes, no tiles */
.bf-cloud { position: absolute; inset: 14px 12px; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 9px 13px; }
.use__visual .bf-cloud img { position: static; width: auto; max-width: 92px; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; mix-blend-mode: multiply; }

.bf-cloud { inset: 10px 10px; gap: 6px 11px; container-type: size; }

/* Agencies: logos scattered across the panel at different sizes */
.bf-cloud { display: block; inset: 0; gap: 0; container-type: normal; }
.use__visual .bf-cloud img { position: absolute; max-width: none; translate: -50% -50%; }

/* Agencies: client logos on small tilted cards, piled like the Creative ops visual */
.bf-stack { position: absolute; inset: 0; }
.bf-stack .lc { position: absolute; display: grid; place-items: center; padding: 8px 11px; border-radius: 12px; background: #fff; box-shadow: 0 10px 22px -12px rgba(23,20,15,.45), 0 0 0 1px rgba(23,20,15,.06); }
.use__visual .bf-stack img { position: static; width: auto; max-width: 84px; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; }
.bf-stack .bf-ping--count { position: absolute; right: 5%; bottom: 8%; top: auto; width: auto; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 999px !important; background: var(--ink) !important; color: #fff; font-size: 10.5px !important; font-weight: 700; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(23,20,15,.5) !important; z-index: 5; }

.bf-stack .bf-ping--count { top: 4%; right: 3%; bottom: auto; }

.bf-stack .lc-more { padding: 9px 12px; background: rgba(255,255,255,.6); border: 1.5px dashed rgba(23,20,15,.28); box-shadow: none; font-size: 10.5px; font-weight: 600; color: var(--ink-60); white-space: nowrap; }

.bf-stack .lc-more { white-space: normal; text-align: center; line-height: 1.25; padding: 10px 14px; }

.bf-stack .lc-more { white-space: nowrap; }

/* Agencies: the original 4 x 2 layout, six client logos plus a wide "+ add more clients" tile */
.bf-grid { position: absolute; inset: 14px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 6px; }
.bf-grid .lg { display: grid; place-items: center; min-width: 0; padding: 6px; border-radius: 10px; background: #fff; border: 2px solid #fff; box-shadow: 0 6px 12px -8px rgba(0,0,0,.45); overflow: hidden; }
.use__visual .bf-grid img { position: static; width: auto; max-width: 100%; max-height: 100%; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; }
.bf-grid .lg-more { grid-column: span 2; background: rgba(255,255,255,.55); border: 1.5px dashed rgba(23,20,15,.25); box-shadow: none; font-size: 11px; font-weight: 600; color: var(--ink-60); }

.bf-grid .lg-more { text-align: center; }

/* Learn: the creative format callout uses the creative-format orange from the plan table */
.pp-learn .pop-intel.pop-l { background: #fff3ee; border-color: rgba(239,103,0,.35); }
.pp-learn .pop-intel .pop-tag--persona { color: #ef6700; }
.pp-learn .pop-intel .intel-bars li { color: var(--ink); }
.pp-learn .pop-intel .intel-bars li i { background: #ef6700; }
.pp-learn .pop-intel .intel-bars li b { color: #6a645d; }
.plat-pop.pop-intel p b.is-format { color: #ef6700; }

/* Plan: the right-hand box is now Insights (the research library) */
.plat-pop.pop-ins .ins-mini { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.plat-pop.pop-ins .ins-mini li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: #f6f3ef; font: 500 13px/1.2 var(--sans); color: var(--ink); }
.plat-pop.pop-ins .ins-mini svg { width: 15px; height: 15px; flex: none; color: var(--brand, #ef6700); }

/* nav: "Get started" is the orange pill button, sized for the nav bar */
.nav .btn.nav__cta { padding: 8px 18px; font-size: 15px; font-weight: 500; color: #fff; }

#platform .plat-subs { margin: 0 auto 22px; text-align: center; }
/* ---------- Platform intro: a simple workflow graph. Inputs feed Campfire, Campfire makes concepts and better ads, results loop back ---------- */
.wf { position: relative; width: 1120px; height: 420px; margin: 8px auto 48px; }
.wf-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wf-lines path { fill: none; stroke: #d9d4d0; stroke-width: 1.2; }
.wf-pulse { fill: var(--brand); filter: drop-shadow(0 0 4px rgba(239, 103, 0, .8)); }
.wf-node { position: absolute; z-index: 1; display: flex; align-items: center; gap: 12px; width: 240px; height: 58px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: var(--card-shadow-sm); text-align: left; }
.wf-node > img { flex: none; width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
.wf-node div { display: grid; min-width: 0; }
.wf-node b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.wf-node span { font-size: 12px; color: var(--ink-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--brand-soft); color: var(--brand) !important; font-size: 13px !important; }
.wf-ic--dark { background: #141110; color: #fff !important; }
.wf-ic--up { background: #dcfce7; color: #16a34a !important; }
.wf-ic--grid { grid-template-columns: repeat(2, 8px); gap: 2px; place-content: center; background: #f3f1ef; }
.wf-ic--grid i { width: 8px; height: 8px; border-radius: 2px; background: #d6d0cb; }
.wf-ic--grid i:last-child { background: #fff; outline: 1.5px dashed var(--brand); outline-offset: -1.5px; }
.wf-node--hub { width: 250px; height: 72px; box-shadow: 0 0 0 1.5px rgba(239, 103, 0, .45), 0 18px 36px -18px rgba(239, 103, 0, .6); }
.wf-node--hub > img { width: 40px; height: 40px; }
.wf-node--hub b { font-size: 16px; }
.wf-loop { position: absolute; z-index: 1; left: 640px; top: 372px; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--ink-10); font-size: 11.5px; font-weight: 500; color: var(--ink-60); white-space: nowrap; }
@media (max-width: 1180px) { .wf { zoom: .8; } }
@media (max-width: 900px) { .wf { zoom: .6; } }
@media (max-width: 680px) { .wf { zoom: .42; } }
@media (prefers-reduced-motion: reduce) { .wf-pulse { display: none; } }

/* diagram v2: four inputs, one Campfire, three concepts, six ads, and the loop back into Meta reports */
.wf--v2 { height: 440px; }
.wf--v2 .wf-node { width: 220px; }
.wf--v2 .wf-node--hub { width: 210px; }
.wf-node--concept { width: 200px; height: 52px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0 12px; box-shadow: 0 0 0 1px rgba(239, 103, 0, .35), var(--card-shadow-sm); }
.wf-node--concept small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.wf-node--concept b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wf-ad { position: absolute; z-index: 1; width: 64px; height: 80px; border-radius: 10px; border: 2px solid #fff; background: #eee; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4); }
.wf-ad img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.wf-ad span { position: absolute; left: 50%; bottom: -9px; translate: -50% 0; padding: 2px 6px; border-radius: 999px; background: #fff; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35); font-size: 9.5px; font-weight: 600; color: #16a34a; white-space: nowrap; }
.wf-col { position: absolute; top: 72px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); }
.wf-loopline { stroke-dasharray: 4 5; stroke: #e7c3a6 !important; }

/* sparks running along the lines */
.wf-spark { filter: drop-shadow(0 0 3px rgba(255, 140, 40, .95)) drop-shadow(0 0 7px rgba(239, 103, 0, .6)); }
.wf-ember { fill: #ff8a2a; }
@media (prefers-reduced-motion: reduce) { .wf-spark, .wf-ember { display: none; } }

/* concepts and ads drawn as generic placeholders */
.wf-node--concept { gap: 5px; }
.wf-bar { display: block; width: 78%; height: 7px; border-radius: 4px; background: #ece7e3; }
.wf-bar--short { width: 52%; }
.wf-ad--blank { display: grid; grid-template-rows: 1fr auto auto; gap: 4px; padding: 5px 5px 8px; background: #fff; border: 0; box-shadow: 0 0 0 1px var(--ink-5), 0 10px 20px -12px rgba(0, 0, 0, .35); }
.wf-ad--blank i { display: block; border-radius: 4px; background: #efebe8; }
.wf-ad--blank i:nth-child(2) { height: 5px; width: 80%; }
.wf-ad--blank i:nth-child(3) { height: 5px; width: 50%; background: rgba(239, 103, 0, .3); }
.wf-ad--blank span { right: -7px; left: auto; top: -7px; bottom: auto; translate: none; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; background: #dcfce7; box-shadow: 0 0 0 2px #fff; font-size: 11px; }

/* glowing dots running along the lines */
.wf-dot { fill: #ef6700; stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(239, 103, 0, .8)); }
@media (prefers-reduced-motion: reduce) { .wf-dot, .wf-halo { display: none; } }

/* connector style: right-angled lines with a port dot where each one meets a node */
.wf-lines path { stroke: #e2dcd7; stroke-width: 1.5; }
.wf-lines path.wf-loopline { stroke: #e2dcd7; }
.wf-port { fill: #fff; stroke: #d6cec8; stroke-width: 1.5; }

/* the badge on each ad reads ROAS ↑ */
.wf-ad--blank span { width: auto; height: auto; padding: 2px 6px; right: -14px; top: -8px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: #15803d; }

/* Plan side card: the concept note shows two labelled groups of chips */
.pop-group { display: block; margin: 12px 0 -6px; font: 500 11px/1.2 var(--sans); color: var(--ink-40, #8a8580); }
.pop-chips--hot i { background: #fdebe0; color: #9a3d0c; }

.pop-chips i.is-more { background: transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); color: var(--ink-60, #6b6661); }

/* Plan side card: the timeline can be tapped to jump to a note and hold it; hovering the card pauses it too */
.pop-steps { cursor: pointer; padding-block: 12px 4px; margin-bottom: -4px; pointer-events: auto; }
.plat-pop:hover .pop-steps i.is-on::after { animation-play-state: paused; }
.plat-pop.is-held .pop-steps i.is-on::after { animation: none; transform: scaleX(1); }
.pop-steps:hover i { background: #e2dcd7; }

/* keep the grouped concept note as short as the other notes */
.pop-group { margin: 10px 0 -7px; }
.pop-group + .pop-chips { gap: 4px; }
.pop-group + .pop-chips i { padding: 4px 7px; font-size: 11px; }

/* Hero: the ad strip (moved up from the proof section), ads shown 9:16 */
.hero__ads { position: relative; z-index: 2; margin-top: 40px; padding-bottom: 56px; zoom: var(--net-s, 1); overflow: hidden; }
.ad { width: 220px; aspect-ratio: 9 / 16; }
.ad::after { content: none; }

/* hero ads 15% larger */
.hero__ads .ad { width: 253px; }

/* ===================== Mobile ===================== */
/* How Campfire learns: on phones and tablets the diagram stacks instead of scaling down. Inputs two by two,
   Campfire, then each concept above its ad, joined by short lines. */
@media (max-width: 900px) {
  .wf.wf--v2 { zoom: 1; width: auto; max-width: 560px; height: auto; margin: 0 auto 24px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .wf--v2 .wf-lines { display: none; }
  .wf--v2 .wf-node, .wf--v2 .wf-ad, .wf--v2 .wf-col, .wf--v2 .wf-loop { position: relative; left: auto !important; top: auto !important; translate: none !important; }
  .wf--v2 .wf-node { grid-column: span 3; width: auto; height: auto; min-height: 56px; padding: 10px 12px; gap: 10px; }
  .wf--v2 .wf-node span { white-space: normal; }
  .wf--v2 .wf-node--hub { grid-column: 1 / -1; justify-self: center; width: min(100%, 260px); min-height: 64px; margin: 26px 0; }
  .wf--v2 .wf-node--hub::before, .wf--v2 .wf-node--hub::after { content: ""; position: absolute; left: 50%; width: 1.5px; height: 26px; background: linear-gradient(#e2dcd7, var(--brand)); }
  .wf--v2 .wf-node--hub::before { bottom: 100%; }
  .wf--v2 .wf-node--hub::after { top: 100%; background: linear-gradient(var(--brand), #e2dcd7); }
  .wf--v2 .wf-node--concept { grid-column: span 2; min-height: 60px; padding: 10px; }
  .wf--v2 .wf-node--concept small { font-size: 9px; }
  .wf--v2 .wf-ad { grid-column: span 2; justify-self: center; margin-top: 16px; }
  .wf--v2 .wf-ad::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); width: 1.5px; height: 24px; background: #e2dcd7; }
  .wf--v2 .wf-col { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
  .wf--v2 .wf-loop { grid-column: 1 / -1; justify-self: center; margin-top: 6px; white-space: normal; text-align: center; }
  .wf--v2 .wf-loop::before { content: "↻ "; color: var(--brand); }
}

/* nothing on the page may widen it past the screen */
html { overflow-x: clip; }
.form .row > *, .field, .field input, .field textarea { min-width: 0; }
@media (max-width: 720px) { #anatomy { overflow-x: clip; } }

@media (max-width: 720px) {
  .hero__ads { margin-top: 32px; padding-bottom: 40px; }
  .hero__ads .ad { width: 168px; border-radius: 18px; }
  .ad-row { gap: 12px; }
  .h2 br { display: none; }
}

/* the empty Build ad card keeps its image block, copy lines and button centred whatever the card's width */
.hv-blank { align-items: center; }
.hv-blank b { left: 50%; right: auto; translate: -50% 0; }

/* stacked diagram: script.js draws the lines, so the short CSS connectors go, and the lines get a little room */
@media (max-width: 900px) {
  .wf.wf--v2 { position: relative; padding: 22px 12px 0; }
  .wf--v2 .wf-lines.wf-mlines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
  .wf--v2 .wf-node--hub::before, .wf--v2 .wf-node--hub::after, .wf--v2 .wf-ad::before { content: none; }
}

/* Platform on phones: every window and side card fills the same width, centred on the coloured backdrop */
@media (max-width: 820px) {
  .plat-panel { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .plat-panel > .plat-win, .plat-panel > .plat-pop, .plat-panel > .pop-slack { width: auto !important; max-width: none; min-width: 0; margin-inline: 0; zoom: 1 !important; justify-self: stretch; }
  .plat-panel > .plat-win { overflow: hidden; }
  /* Review header: counts on one row, the button underneath */
  .rvw-sum { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 8px; }
  .rvw-counts li { font-size: 10px; line-height: 1.25; }
  .rvw-counts b { font-size: 16px; }
  .rvw-final { justify-self: stretch; text-align: center; padding: 10px 12px; font-size: 13px; }
}

/* Platform on phones: the coloured backdrop wraps the whole window, with the same margin on every side */
@media (max-width: 820px) {
  .plat-back { top: 0; bottom: 0; height: auto; }
  .plat-panel { padding: 12px; }
}