/* =============================================================
   Flame Tale — site styles
   Dark cinematic hero and map, light readable body.
   Every style lives here so the strict CSP (no unsafe-inline) holds.
   ============================================================= */
:root{
  /* dark */
  --ink:#0A090E; --ink2:#12101A; --ink3:#1B1725;
  --line-d:#2A2435; --line-d2:#3B3349;
  --on-dark:#F7F3FA; --on-dark2:#CFC5DA; --on-dark3:#A79CB6;
  /* light */
  --paper:#FFFDFB; --paper2:#FFF7F1; --paper3:#FDEFE6;
  --line:#EDE0D4; --line2:#DDCABA;
  --ink-text:#17121D; --ink-text2:#3D3543; --muted:#6A6172;
  /* brand */
  --ember:#D2451A; --ember-d:#B02610; --ember-bright:#FF7A18; --gold:#FFC83D;
  --ok:#1F7A4D;
  --r:12px; --r-l:18px; --r-xl:26px; --r-full:999px;
  --font:"Segoe UI",ui-sans-serif,system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1040px;
}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink-text);
  line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,canvas{max-width:100%;display:block}
a{color:var(--ember)}
ul{list-style:none}
h1,h2,h3,h4{line-height:1.16;letter-spacing:-.022em;font-weight:800}
:focus-visible{outline:2px solid var(--ember-bright);outline-offset:3px;border-radius:5px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.narrow{max-width:680px;margin-inline:auto}
.center{text-align:center}
.mt{margin-top:16px}
h1.big{font-size:clamp(1.95rem,4.8vw,2.9rem);margin-bottom:14px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;background:#fff;border:1px solid var(--line2);
  border-radius:9px;padding:10px 15px;font-weight:700;z-index:200;text-decoration:none;transition:top .15s}
.skip:focus{top:14px}
section{padding-block:86px}
@media(max-width:640px){section{padding-block:56px}}

/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:100;background:#181521;
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hdr.solid{background:#181521;border-bottom-color:rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-weight:800;letter-spacing:.08em;font-size:.95rem;color:var(--ember-bright);white-space:nowrap}
.hdr.solid .brand{color:var(--ember-bright)}
.brand svg{width:21px;height:25px;flex-shrink:0}
.navlinks{display:flex;align-items:center;gap:22px}
.navlinks a:not(.btn){color:var(--on-dark2);text-decoration:none;font-size:.86rem;font-weight:600}
.hdr.solid .navlinks a:not(.btn){color:var(--on-dark2)}
.navlinks a:not(.btn):hover{color:var(--ember-bright)}
@media(max-width:820px){.navlinks a:not(.btn){display:none}}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:.92rem;border-radius:var(--r-full);padding:13px 24px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s,box-shadow .16s,background-color .16s,border-color .16s}
.btn-p{background:var(--ember);color:#fff;box-shadow:0 6px 20px rgba(210,69,26,.3)}
.btn-p:hover{background:var(--ember-d);transform:translateY(-1px);box-shadow:0 10px 26px rgba(210,69,26,.4)}
.btn-g{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.25)}
.btn-g:hover{border-color:var(--ember-bright);color:var(--ember-bright)}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn-sm{padding:9px 17px;font-size:.82rem}
.btn-block{width:100%}
.on-light .btn-g{color:var(--ink-text);border-color:var(--line2)}
.on-light .btn-g:hover{color:var(--ember);border-color:var(--ember)}

/* ================ HERO ================ */
.hero{position:relative;background:var(--ink);color:var(--on-dark);
  min-height:min(78vh,700px);display:flex;align-items:center;
  padding-block:64px 64px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(255,122,24,.20), transparent 70%),
    radial-gradient(ellipse 50% 40% at 82% 88%, rgba(210,69,26,.12), transparent 70%),
    var(--ink)}
#embers{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;text-align:center}

/* flame mark */
.mark{width:76px;height:90px;margin:0 auto 20px;
  filter:drop-shadow(0 6px 26px rgba(255,110,24,.45))}
.mark .body{transform-origin:60px 90px}
.mark .spiral{stroke-dasharray:210;stroke-dashoffset:210}
.anim .mark .body{animation:flameIn .9s cubic-bezier(.2,.9,.3,1.1) both, flicker 2.4s ease-in-out 1.1s infinite}
.anim .mark{animation:emberGlow 3.1s ease-in-out 1.1s infinite}
.anim .mark .spiral{animation:draw 1.1s ease-out .35s forwards}
@keyframes flameIn{from{opacity:0;transform:scale(.55) translateY(18px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes flicker{
  0%,100%{transform:scale(1,1) skewX(0deg) translateY(0)}
  14%{transform:scale(.955,1.075) skewX(-2.6deg) translateY(-2.5px)}
  31%{transform:scale(1.045,.945) skewX(1.9deg) translateY(1px)}
  47%{transform:scale(.975,1.055) skewX(-1.2deg) translateY(-1.8px)}
  63%{transform:scale(1.06,.955) skewX(2.8deg) translateY(.6px)}
  81%{transform:scale(.99,1.03) skewX(-1.7deg) translateY(-1.1px)}
}
/* the halo breathes out of phase with the flame, so the whole mark reads alive */
@keyframes emberGlow{
  0%,100%{filter:drop-shadow(0 6px 22px rgba(255,110,24,.34))}
  38%{filter:drop-shadow(0 8px 40px rgba(255,154,74,.72))}
  70%{filter:drop-shadow(0 5px 18px rgba(255,110,24,.28))}
}

/* wordmark */
.wordmark{display:flex;justify-content:center;gap:.055em;
  font-size:clamp(2.1rem,8.2vw,4.4rem);font-weight:800;letter-spacing:.1em;
  line-height:1;margin-bottom:14px}
.wordmark span{display:inline-block;
  background:linear-gradient(178deg,#FFD98A 8%,var(--ember-bright) 46%,var(--ember-d) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .sp{width:.42em;background:none}
/* Unregistered mark: TM is free and correct until the USPTO application registers.
   Only then does it become a registered mark. */
.wordmark .tm{align-self:flex-start;font-size:.26em;letter-spacing:0;
  margin-left:.12em;margin-top:.28em;opacity:.85;background:none;-webkit-text-fill-color:currentColor;
  color:var(--ember-bright)}
.anim .wordmark span{opacity:0;transform:translateY(26px) rotate(3deg);
  animation:letterIn .62s cubic-bezier(.2,.85,.3,1) forwards}
@keyframes letterIn{to{opacity:1;transform:translateY(0) rotate(0)}}

.hero .kick{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,200,61,.34);
  background:rgba(255,200,61,.07);padding:6px 15px;border-radius:var(--r-full);margin-bottom:22px}
.hero h1{font-size:clamp(1.28rem,3.5vw,1.95rem);font-weight:700;letter-spacing:-.015em;
  color:var(--on-dark);max-width:22ch;margin:0 auto 16px;line-height:1.3}
.hero .lead{color:var(--on-dark2);font-size:clamp(.98rem,1.7vw,1.1rem);
  max-width:46ch;margin:0 auto 30px}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .micro{margin-top:20px;font-size:.82rem;color:var(--on-dark3)}
.anim .reveal{opacity:0;transform:translateY(18px);animation:up .7s cubic-bezier(.2,.85,.3,1) forwards}
@keyframes up{to{opacity:1;transform:translateY(0)}}

/* Phones: the hero has to earn its height. Measured at 375x667 the CTA was
   falling below the fold, which is exactly the screen someone opens after
   being handed a business card. */
@media(max-width:640px){
  .hero{min-height:auto;padding-block:40px 54px}
  .mark{width:54px;height:64px;margin-bottom:12px}
  .wordmark{margin-bottom:10px;letter-spacing:.08em}
  .hero .kick{margin-bottom:15px}
  .hero h1{font-size:clamp(1.12rem,4.7vw,1.38rem);margin-bottom:12px;max-width:26ch}
  .hero .lead{font-size:.95rem;margin-bottom:22px}
  .hero .cta{flex-direction:column;gap:10px}
  .hero .cta .btn{width:100%}
  .hero .micro{margin-top:15px;font-size:.78rem}
  /* a shorter scroll story on a phone */
  .maptrack{height:185vh}
}

/* scroll hint */

/* ================ MAP ================ */
.mapsec{background:var(--ink);color:var(--on-dark);padding:0;position:relative}
.mapsticky{position:sticky;top:0;height:min(100svh,72vw);min-height:420px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.maptrack{height:200vh;position:relative}
.mapstage{width:100%;height:100%;position:relative;
  background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,122,24,.09), transparent 72%)}
.mapsvg{width:100%;height:100%;display:block}
.states{fill:none;stroke:rgba(207,197,218,.24);stroke-width:.9;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.tn{fill:rgba(255,122,24,.16);stroke:var(--ember-bright);stroke-width:1.5;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;
  opacity:0;transition:opacity .5s ease}
.tn.on{opacity:1}
.pin{opacity:0;transition:opacity .45s ease}
.pin.on{opacity:1}
.pin .dot{fill:var(--gold)}
.pin .ring{fill:none;stroke:var(--gold);stroke-width:1.4;vector-effect:non-scaling-stroke;
  transform-origin:center;transform-box:fill-box}
.pin.on .ring{animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}

.maplabel{position:absolute;left:0;right:0;bottom:12%;text-align:center;pointer-events:none;padding-inline:20px}
.maplabel .step{position:absolute;left:0;right:0;opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease}
.maplabel .step.on{opacity:1;transform:translateY(0);position:relative}
.maplabel .t{font-size:clamp(1.5rem,5vw,2.6rem);font-weight:800;letter-spacing:-.02em}
.maplabel .s{color:var(--on-dark2);font-size:clamp(.9rem,2vw,1.05rem);margin-top:8px;
  max-width:44ch;margin-inline:auto}
.maplabel .t .hl{background:linear-gradient(178deg,var(--gold),var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mapprog{position:absolute;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--ember));
  width:0%;transition:width .1s linear;z-index:5}
/* static fallback when animation is off */
.mapstatic .maptrack{height:auto}
.mapstatic .mapsticky{position:relative;height:auto;padding-block:50px}
.mapstatic .mapsvg{max-height:52vh}
.mapstatic .maplabel{position:relative;bottom:auto;margin-top:26px}
.mapstatic .maplabel .step{position:relative;opacity:1;transform:none}
.mapstatic .maplabel .step+.step{margin-top:18px}

/* ================ LIGHT BODY ================ */
.on-light{background:var(--paper);color:var(--ink-text)}
.tint{background:var(--paper2);border-block:1px solid var(--line)}
.head{max-width:46ch;margin:0 auto 46px;text-align:center}
.eyebrow{font-size:.86rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ember);margin-bottom:13px}
h2.big{font-size:clamp(1.8rem,4.3vw,2.7rem);margin-bottom:14px}
.sub{color:var(--muted);font-size:1.06rem;line-height:1.7}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,18,29,.09);border-color:var(--line2)}
.card .ic{font-size:1.6rem;line-height:1;margin-bottom:13px;display:block}
.card h3{font-size:1.16rem;margin-bottom:10px;font-weight:700;letter-spacing:-.014em}
.card p{color:var(--muted);font-size:.94rem}
.tick{margin-top:14px}
.tick li{position:relative;padding:6px 0 6px 24px;color:var(--ink-text2);font-size:.92rem}
.tick li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;
  border-radius:50%;background:linear-gradient(var(--gold),var(--ember))}

/* audience lanes */
.lane{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;
  display:flex;flex-direction:column;height:100%}
.lane .who{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ember);margin-bottom:10px}
.lane h3{font-size:1.34rem;margin-bottom:11px}
.lane p{color:var(--muted);font-size:.95rem}
.lane .tick{flex:1}
.lane .price{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-text)}
.lane .price b{color:var(--ember);font-size:1.05rem}
.lane.feat{border-color:var(--ember);box-shadow:0 12px 36px rgba(210,69,26,.14)}
.lane .tag{align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ember);color:#fff;border-radius:var(--r-full);
  padding:4px 11px;margin-bottom:12px}

/* stat strip */
.card .fig{display:flex;align-items:flex-end;gap:5px;min-height:46px;
  font-size:clamp(1.9rem,4vw,2.5rem);font-weight:800;color:var(--ember);
  line-height:1;letter-spacing:-.02em;margin-bottom:10px}
.card .fig small{font-size:.44em;font-weight:700;letter-spacing:.02em;line-height:1.5}
.card .fig.word{font-size:clamp(1.1rem,2.2vw,1.4rem);letter-spacing:-.01em}
.srcline{color:var(--muted);font-size:.78rem;margin-top:22px;text-align:center}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:22px 16px;text-align:center}
.stat .n{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--ember);line-height:1}
.stat .l{font-size:.78rem;color:var(--muted);margin-top:7px}

.note{background:var(--paper2);border:1px solid var(--line2);border-radius:var(--r);
  padding:18px 20px;color:var(--ink-text2);font-size:.95rem}
.note strong{color:var(--ink-text)}

/* steps */
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:22px}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--ember);color:#fff;font-weight:800;font-size:.85rem;margin-bottom:11px}
.step h3{font-size:1.02rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.92rem}

/* faq */
details{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0 20px;margin-bottom:10px}
summary{cursor:pointer;font-weight:700;padding:17px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ember);font-size:1.35rem;line-height:1;flex-shrink:0}
details[open] summary::after{content:"\2013"}
details p{color:var(--muted);font-size:.94rem;padding-bottom:17px}

/* form */
.form{max-width:540px;margin-inline:auto}
.field{margin-bottom:17px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px}
.field .hint{display:block;font-weight:400;color:var(--muted);font-size:.8rem;margin-top:3px}
.req{color:var(--ember)}
input,textarea,select{width:100%;background:#fff;border:1px solid var(--line2);
  border-radius:11px;padding:12px 14px;font:inherit;font-size:1rem;color:var(--ink-text)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(210,69,26,.15)}
textarea{min-height:110px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.checkline{display:flex;gap:11px;align-items:flex-start}
.checkline input{width:18px;height:18px;margin-top:4px;flex-shrink:0;accent-color:var(--ember)}
.checkline label{font-size:.88rem;color:var(--muted);font-weight:400}
.err{display:none;color:#B3261E;font-size:.82rem;margin-top:5px;font-weight:600}
.err[data-show="true"]{display:block}
[aria-invalid="true"]{border-color:#B3261E !important;box-shadow:0 0 0 3px rgba(179,38,30,.12) !important}
.status{display:none;border-radius:11px;padding:14px;margin-bottom:17px;font-size:.9rem;font-weight:600}
.status[data-show="true"]{display:block}
.status[data-kind="error"]{background:#FDECEA;border:1px solid #F5C6C2;color:#8C1D18}
.formnote{font-size:.82rem;color:var(--muted);text-align:center;margin-top:15px}

/* CTA band */
.ctaband{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,122,24,.18), transparent 68%)}
.ctaband .wrap{position:relative}
.ctaband h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:14px}
.ctaband p{color:var(--on-dark2);font-size:1.05rem;max-width:44ch;margin:0 auto 26px}

/* footer */
footer.site{background:var(--ink);color:var(--on-dark3);border-top:1px solid var(--line-d);
  padding-block:34px;font-size:.86rem}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--on-dark3);text-decoration:none}
.foot a:hover{color:var(--ember-bright)}

/* scroll reveal (JS adds .in) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.85,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---- motion off ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .anim .mark .body,.anim .wordmark span,.anim .reveal{opacity:1;transform:none;animation:none}
  .anim .mark .spiral{stroke-dashoffset:0}
}

/* =============================================================
   Spacing rhythm fixes
   Notes were butting straight up against the grid above them.
   ============================================================= */
.grid + .note,
.prods + .note,
.grid + .rv.note,
.tiers + .note{margin-top:40px}
.note.narrow{max-width:760px;margin-inline:auto;padding:22px 26px;line-height:1.7}
.grid + .note.narrow,.grid + .rv.note.narrow,
.prods + .note.narrow,.prods + .rv.note.narrow{max-width:none}
.grid + .center,
.grid + p.center,
.grid + .rv.center{margin-top:34px}
.stats + .narrow{margin-top:40px}
.head + .grid{margin-top:0}
section > .wrap > .grid + .grid{margin-top:22px}
@media(max-width:640px){
  .grid + .note,.grid + .rv.note,.prods + .note,.prods + .rv.note,.tiers + .note{margin-top:28px}
  .note.narrow{padding:18px 20px}
}

/* =============================================================
   Flame lock — reusable brand moment.
   Scrubs with scroll: the mark spins in, the spiral draws, then it
   "locks" with a glow. Drop <div class="lockband"> anywhere.
   ============================================================= */
.lockband{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden;
  padding-block:120px;text-align:center;isolation:isolate}
.lockband::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 55% 60% at 50% 50%, rgba(255,122,24,.16), transparent 70%)}
.lockband.tight{padding-block:86px}

.flamelock{width:118px;height:140px;margin:0 auto 26px;position:relative}
.flamelock svg{width:100%;height:100%;overflow:visible}
.flamelock .fl-body{transform-origin:50% 62%;opacity:0}
.flamelock .fl-spiral{stroke-dasharray:210;stroke-dashoffset:210}
.flamelock .fl-ring{fill:none;stroke:var(--gold);stroke-width:2;opacity:0;
  transform-origin:center;transform-box:fill-box}
.lockband.locked .fl-ring{animation:lockPing 1.5s ease-out}
@keyframes lockPing{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(2.1)}}
.flamelock .glow{position:absolute;inset:-18%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,24,.42),transparent 64%);
  opacity:0;transition:opacity .5s ease}
.lockband.locked .glow{opacity:1}

.lockband .lk-title{font-size:clamp(1.6rem,4.4vw,2.6rem);font-weight:800;
  letter-spacing:-.022em;margin-bottom:12px;opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.85,.3,1)}
.lockband .lk-sub{color:var(--on-dark2);font-size:clamp(.98rem,2vw,1.1rem);
  max-width:46ch;margin:0 auto;opacity:0;transform:translateY(16px);
  transition:opacity .55s ease .1s,transform .55s cubic-bezier(.2,.85,.3,1) .1s}
.lockband.locked .lk-title,.lockband.locked .lk-sub{opacity:1;transform:none}
.lockband .lk-title .hl{background:linear-gradient(178deg,var(--gold),var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lockband .lk-cta{margin-top:28px;opacity:0;transition:opacity .5s ease .2s}
.lockband.locked .lk-cta{opacity:1}
@media(max-width:640px){
  .lockband{padding-block:76px}
  .flamelock{width:88px;height:104px;margin-bottom:20px}
}

/* =============================================================
   Productized services
   ============================================================= */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.prods{grid-template-columns:1fr}}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s}
.prod:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 14px 34px rgba(23,18,29,.09)}
.prod .ptop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.prod h3{font-size:1.08rem;margin-bottom:8px}
.prod .amt{font-size:1.35rem;font-weight:800;color:var(--ember);white-space:nowrap;line-height:1}
.prod .amt small{display:block;font-size:.66rem;font-weight:700;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.prod p{color:var(--muted);font-size:.93rem}
.prod .tick{flex:1}
.prod .when{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted)}
.prod .when b{color:var(--ink-text)}

/* =============================================================
   Game marketing page
   ============================================================= */
.gamehero{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden;
  padding-block:100px 90px;text-align:center;isolation:isolate}
.gamehero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 60% 50% at 22% 12%, rgba(120,80,255,.20), transparent 66%),
    radial-gradient(ellipse 62% 55% at 78% 82%, rgba(255,122,24,.20), transparent 68%),
    var(--ink)}
.gamehero .kick{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,200,61,.34);
  background:rgba(255,200,61,.07);padding:7px 16px;border-radius:var(--r-full);margin-bottom:22px}
.gamehero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.gamehero{padding-block:64px 60px}.gamehero .cta{flex-direction:column}
  .gamehero .cta .btn{width:100%}}
.gamehero h1{font-size:clamp(1.9rem,5.2vw,3.1rem);max-width:20ch;margin:0 auto 18px}
.gamehero .lead{color:var(--on-dark2);font-size:clamp(1rem,1.9vw,1.15rem);
  max-width:50ch;margin:0 auto 30px}
.gamehero .hl{background:linear-gradient(178deg,var(--gold),var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:26px}
.panel h3{font-size:1.14rem;margin-bottom:12px}
.panel p{color:var(--muted);font-size:.95rem}
.panel.bad{border-color:#F0C9C2;background:#FFF7F5}
.panel.bad h3{color:#B3261E}
.panel.good{border-color:#BFE3CF;background:#F5FCF8}
.panel.good h3{color:var(--ok)}

.quote{background:var(--ink);color:var(--on-dark);border-radius:var(--r-xl);
  padding:36px 34px;text-align:center;position:relative;overflow:hidden}
.quote::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,122,24,.2), transparent 66%)}
.quote > *{position:relative}
.quote p{font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:700;line-height:1.45;max-width:34ch;margin:0 auto}
.quote .attrib{margin-top:14px;font-size:.84rem;color:var(--on-dark3);font-weight:600}
@media(max-width:640px){.quote{padding:26px 22px}}