:root{
  --ink:#0A0705;
  --ink-soft:#171210;
  --ember:#EC6608;
  --ember-deep:#B8410A;
  --paper:#F4EFE7;
  --paper-2:#EAE2D6;
  --graphite:#2A2320;
  --dim:#9C918A;
  --rule:rgba(255,255,255,.13);
  --rule-dark:rgba(20,12,8,.16);
  --display:'Anton', Impact, 'Haettenschweiler', sans-serif;
  --body:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --measure:36rem;
  /* One radius for every media panel: hero player, reels, kit shot, calendar. Kyle,
     2026-09-11. The 3px this replaced read as square at these sizes. */
  --radius-media:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(1.02rem,.96rem + .35vw,1.18rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:min(100% - 2.5rem, 68rem);margin-inline:auto}
.narrow{max-width:var(--measure)}

section{padding:clamp(4rem,9vw,8rem) 0}

/* ---------- type ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.93;
  letter-spacing:.005em;
  margin:0;
}
h1.display{font-size:clamp(2.9rem,8.6vw,6.2rem)}
h2.display{font-size:clamp(2.1rem,5.4vw,4rem);margin-bottom:1.6rem}
h3{font-family:var(--body);font-weight:700;font-size:1.16rem;margin:0 0 .35rem;letter-spacing:-.01em}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.12rem,1rem + .6vw,1.42rem);line-height:1.5}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding-top:clamp(3rem,7vw,5.5rem);
  padding-bottom:clamp(3.5rem,8vw,7rem);
  background:
    radial-gradient(120% 85% at 76% 42%, rgba(236,102,8,.42) 0%, rgba(184,65,10,.16) 38%, rgba(10,7,5,0) 70%),
    var(--ink);
  overflow:hidden;
}
.brandbar{
  display:flex;align-items:center;gap:1.15rem;
  font-size:.82rem;letter-spacing:.02em;color:var(--dim);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
/* The real wordmark, not type set to look like it.
   brm-logo-white.png is BusinessRate_Media_white_clear.png, the official white asset Kyle
   supplied — not the inverted copy this briefly shipped. It is higher resolution than the
   derived one and half the weight. The other bundled logo, brm-logo.png, is black on
   transparent and invisible on this ground; do not reach for it here.
   Width is set and height derived, matching the optical size the Anton wordmark had. */
.brandbar .brandlogo{width:clamp(122px,13vw,152px);height:auto;display:block}
.brandbar b{font-family:var(--display);font-size:1.08rem;color:var(--paper);letter-spacing:.03em;font-weight:400;text-transform:uppercase}
.hero h1 .flip{color:var(--ember)}
/* The headline runs the full width of the hero. Everything under it splits: the argument on
   the left, the player on the right — filling space this hero previously left as bare
   gradient, and costing no extra vertical room because the subtext gives up width, not the
   page gaining a row. */
.hero-lower{
  display:grid;
  gap:clamp(1.8rem,3.6vw,3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  margin-top:clamp(1.8rem,3.4vw,2.8rem);
}
.hero-body{max-width:34rem}
.hero-body p{color:#D9CFC6}

/* The player.
   It starts on its own after the page has loaded, MUTED, because every browser blocks
   autoplay with sound and a clip that refuses to start is worse than one that starts quiet.
   In that state the overlay becomes a "Tap for sound" pill rather than vanishing, or the
   visitor gets a silent talking head with no obvious way to hear it.
   If autoplay is refused, or the visitor asked for reduced motion or is on a metered
   connection, the big play disc stays and it behaves as click-to-play. */
.player{position:relative;background:#120C09;border-radius:var(--radius-media);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);aspect-ratio:16/9}
.player video{width:100%;height:100%;object-fit:cover;background:#120C09;display:block}
.play{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;border:0;
  padding:0;background:linear-gradient(180deg,rgba(10,7,5,.06),rgba(10,7,5,.42));
  transition:opacity .25s ease}
.play[hidden]{display:none}
.play .disc{width:clamp(58px,8vw,80px);aspect-ratio:1;border-radius:50%;background:var(--ember);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .18s ease,background .18s ease}
.play:hover .disc{transform:scale(1.06);background:#FF7A1F}
.play .disc svg{width:38%;height:38%;margin-left:9%}
.play .cap{position:absolute;left:0;right:0;bottom:0;padding:.85rem 1rem;font-size:.85rem;
  font-weight:600;color:var(--paper);text-align:left;text-shadow:0 1px 10px rgba(0,0,0,.7)}

/* Playing muted: the overlay stops covering the picture and becomes one small pill. */
.player.is-muted .play{background:none;place-items:end start;padding:0}
.player.is-muted .play .disc{display:none}
.player.is-muted .play .cap{left:auto;right:auto;bottom:.8rem;margin-left:.8rem;
  display:inline-flex;align-items:center;gap:.45rem;width:auto;
  padding:.5rem .85rem;border-radius:999px;font-size:.8rem;
  background:rgba(10,7,5,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);text-shadow:none}
.player.is-muted .play:hover .cap{background:rgba(10,7,5,.88);border-color:rgba(255,255,255,.4)}
.vidnote{margin-top:.75rem;font-size:.8rem;color:var(--dim);letter-spacing:.01em}
.trade{
  color:var(--paper);
  font-weight:600;
}
.pricenote{
  margin-top:1.9rem;
  padding-top:1.2rem;
  border-top:1px solid var(--rule);
  max-width:34rem;
  font-size:.98rem;
  color:#C9BEB5;
}
.pricenote strong{color:var(--paper);font-weight:600}

.btnrow{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.btn{
  display:inline-block;
  font-family:var(--body);font-weight:700;font-size:1rem;
  padding:.95em 1.7em;border-radius:2px;
  text-decoration:none;border:2px solid var(--ember);
  background:var(--ember);color:#140A03;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.btn:hover{background:#FF7A1F;border-color:#FF7A1F}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.34)}
.btn.ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.06)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.dark:hover{background:var(--graphite);border-color:var(--graphite)}
a:focus-visible,button:focus-visible{outline:3px solid var(--ember);outline-offset:3px}

/* The repeated call-to-book band. Deliberately plain: it interrupts the argument three times
   without pretending to be another section of it. Ember ground so it reads as the one action
   the page wants, wherever the visitor happens to stop reading. */
.callband{background:var(--ember-deep);padding:clamp(2rem,4vw,2.8rem) 0}
.callband .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.callband-q{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.3rem,3vw,2rem);
  line-height:1;margin:0;color:#FFF6EE;letter-spacing:.005em}
.callband .btn{background:#140A03;border-color:#140A03;color:var(--paper)}
.callband .btn:hover{background:#000;border-color:#000}
.callband-note{font-size:.88rem;color:#FBE6D6;opacity:.9}

/* The two disclosure modules: plans and the booking calendar. Both ship closed and are opened
   by a control elsewhere on the page. [hidden] is stated explicitly because these sections
   carry a display value, and any display beats the UA default. */
#plans[hidden],#book[hidden]{display:none}
.plansmod{border-top:3px solid var(--ember)}

/* The three things a visitor needs before agreeing to a call. Not a price table: a range, the
   terms, and what happens to the kit. */
.costfacts{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:2.6rem 0 2.4rem}
.costfact{padding-top:1.1rem;border-top:2px solid var(--ember-deep)}
.costfact h3{color:#120C09;margin-bottom:.4rem}
.costfact p{font-size:1rem;margin:0}

/* The calendar is now the conversion, so it is a real section rather than a hidden one. */
.bookhead{max-width:38rem}

/* ---------- dark body sections ---------- */
.dark{background:var(--ink)}
.dark--soft{background:var(--ink-soft)}
.dark p{color:#CFC5BD}

.knows{list-style:none;margin:0;padding:0;max-width:40rem}
.knows li{
  padding:1.35rem 0;
  border-top:1px solid var(--rule);
  font-size:clamp(1.06rem,1rem + .35vw,1.22rem);
  line-height:1.5;
  color:#DCD3CB;
}
.knows li:last-child{border-bottom:1px solid var(--rule)}
.knows b{color:var(--paper);font-weight:600}
.knows-tail{margin-top:2.2rem;max-width:38rem}

.fails{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:.5rem}
.fail{padding-top:1.1rem;border-top:2px solid var(--ember-deep)}
.fail h3{color:var(--paper)}
.fail p{font-size:1rem;color:#B9AEA6;margin:0}
.fails-tail{margin-top:2.6rem;max-width:38rem;font-size:1.06rem}

/* ---------- light sections ---------- */
.light{background:var(--paper);color:var(--graphite)}
.light p{color:#4A403B}
.light .display{color:#120C09}
.light h3{color:#120C09}
.light--alt{background:var(--paper-2)}

.steps{list-style:none;counter-reset:s;margin:2.5rem 0 0;padding:0}
.steps li{
  counter-increment:s;
  display:grid;
  grid-template-columns:3.2rem 1fr;
  gap:1.25rem;
  padding:1.5rem 0;
  border-top:1px solid var(--rule-dark);
}
.steps li:last-child{border-bottom:1px solid var(--rule-dark)}
.steps li::before{
  content:counter(s);
  font-family:var(--display);font-size:1.9rem;line-height:1;
  color:var(--ember);
}
.steps .when{display:block;font-size:.9rem;color:#7A6E67;margin-top:.3rem}
.steps p{margin:.35rem 0 0;font-size:1.02rem;max-width:34rem}

/* ---------- reels ---------- */
.reelgrid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-top:2.5rem}
.reel{background:#120C09;border-radius:var(--radius-media);overflow:hidden}
.reel .frame{
  aspect-ratio:9/16;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#241812,#0E0906);
  color:#6B5C53;font-size:.86rem;text-align:center;padding:1rem;
}
.reel .cap{padding:.7rem .8rem .85rem;font-size:.88rem;line-height:1.35;color:#E4DAD1}
.reel .cap span{display:block;color:#8E817A;font-size:.8rem}
.reel-tail{margin-top:1.8rem;font-size:1.02rem;max-width:36rem}

/* ---------- kit ---------- */
.kitlayout{display:grid;gap:2.5rem;grid-template-columns:1fr;margin-top:2.5rem}
@media(min-width:56rem){.kitlayout{grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:start}}
.kitshot{background:#120C09;border-radius:var(--radius-media);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;color:#6B5C53;text-align:center;padding:1.5rem;font-size:.9rem}
.kitlist{margin:0;padding:0;list-style:none}
.kitlist li{display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid var(--rule-dark)}
.kitlist .what{font-weight:600;color:#120C09}
.kitlist .why{display:block;font-weight:400;color:#5C514B;font-size:.95rem;margin-top:.1rem}
.kitlist .val{color:#8A7C74;text-decoration:line-through;white-space:nowrap;font-size:.95rem;padding-top:.15rem}
.kittotal{display:flex;justify-content:space-between;gap:1.5rem;padding:1.1rem 0 0;font-weight:700;color:#120C09}
.kitnote{margin-top:1.8rem;padding:1.3rem 1.4rem;background:rgba(236,102,8,.1);border-left:3px solid var(--ember)}
.kitnote p{color:#3B322D}
.kitnote strong{color:#120C09}

/* ---------- objections ---------- */
.qas{margin-top:2.2rem;max-width:44rem}
.qa{border-top:1px solid var(--rule-dark)}
.qa:last-child{border-bottom:1px solid var(--rule-dark)}
.qa summary{
  cursor:pointer;list-style:none;
  padding:1.25rem 2rem 1.25rem 0;
  font-weight:700;font-size:1.08rem;color:#120C09;
  position:relative;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-size:1.5rem;color:var(--ember);line-height:1;
}
.qa[open] summary::after{content:"–"}
.qa .a{padding:0 0 1.4rem;max-width:34rem}

/* ---------- pricing ---------- */
.plans{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2.8rem}
@media(min-width:52rem){.plans{grid-template-columns:repeat(3,1fr);align-items:start}}
.plan{background:#FFFDFA;border:1px solid var(--rule-dark);padding:1.7rem 1.5rem 1.9rem;border-radius:3px;display:flex;flex-direction:column;height:100%}
.plan--lead{border:2px solid var(--ember);position:relative;box-shadow:0 18px 40px -28px rgba(184,65,10,.9)}
.plan .tag{position:absolute;top:-.75rem;left:1.4rem;background:var(--ember);color:#140A03;font-size:.76rem;font-weight:700;padding:.3em .7em;border-radius:2px}
.plan .pname{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;color:#120C09;line-height:1}
.plan .pprice{font-family:var(--display);font-size:2.6rem;color:var(--ember);line-height:1;margin:.6rem 0 .1rem}
/* A former price, struck through. Rendered ONLY when a date it was actually charged has been
   recorded in Settings; see the note in bin/build-cck-wp-template-f.py. Sized well below the
   live price so it reads as history rather than competing with the number being asked for. */
.plan .pprice .was{color:#9C918A;font-size:.62em;margin-right:.3em;text-decoration-thickness:.06em}
.plan .pper{font-size:.9rem;color:#7A6E67}
.plan .pvol{margin:1rem 0 .9rem;font-weight:600;color:#120C09}
.plan ul{list-style:none;margin:0 0 1.4rem;padding:0;font-size:.98rem}
.plan li{padding:.4rem 0 .4rem 1.15rem;position:relative;color:#4A403B}
.plan li::before{content:"";position:absolute;left:0;top:.95em;width:.45rem;height:1px;background:var(--ember)}
.plan .btn{margin-top:auto;text-align:center}
.terms{margin-top:1.8rem;font-size:.98rem;color:#5C514B}
.compare{margin-top:.6rem;font-size:.98rem}
.compare a{color:var(--ember-deep)}

/* ---------- final ---------- */
.final{background:var(--ember);color:#170A02;text-align:left}
.final .display{color:#170A02}
.final p{color:#3A1B05;max-width:34rem}
.final .btnrow{margin-top:1.8rem}
.final .btn{background:#0A0705;border-color:#0A0705;color:var(--paper)}
.final .btn:hover{background:#241812;border-color:#241812}
.final .btn.ghost{background:transparent;color:#170A02;border-color:rgba(23,10,2,.4)}
/* The ghost button is drawn for the dark hero: cream text on a translucent white border. On a
   paper section that is cream on cream, which is how "See plans and pricing" rendered as an
   empty box. Same fix .final already needed. */
.light .btn.ghost,.light--alt .btn.ghost{color:#120C09;border-color:rgba(20,12,8,.42)}
.light .btn.ghost:hover,.light--alt .btn.ghost:hover{border-color:#120C09;background:rgba(20,12,8,.06)}
.final .btn.ghost:hover{background:rgba(23,10,2,.08);border-color:#170A02}

footer{background:var(--ink);padding:3rem 0;font-size:.88rem;color:#7C716A}
footer a{color:#A2958D}

/* ---------- sticky ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(10,7,5,.96);
  border-top:1px solid var(--rule);
  padding:.7rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transform:translateY(110%);transition:transform .25s ease;
}
.sticky.on{transform:translateY(0)}
.sticky .s-txt{font-size:.92rem;color:#CFC5BD;line-height:1.3}
.sticky .s-txt b{color:var(--paper);display:block;font-weight:700}
.sticky .btn{padding:.7em 1.2em;font-size:.94rem}
@media(max-width:30rem){.sticky .s-txt{font-size:.84rem}}

@media(max-width:900px){
  /* One column, and the player is pulled ahead of the subtext: heading, video, subtext. This
     is the phone, which is where the paid clicks land — behind the copy the video would sit
     below the fold and the point of putting it in the hero would be lost. */
  .hero-lower{grid-template-columns:minmax(0,1fr)}
  .hero-media{order:-1}
  .hero-body{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* ---- WordPress build only ---------------------------------------------------------- */
/* The preview draws these as empty placeholder boxes. Real media has to fill them, but the
   placeholder path must keep its centered look - hence the extra class rather than a
   blanket override. */
.reel .frame video,
.reel .frame img{display:block;width:100%;height:100%;object-fit:cover}
.kitshot.has-shot{padding:0;overflow:hidden}
.kitshot.has-shot img,
.kitshot.has-shot video{display:block;width:100%;height:100%;object-fit:cover}
/* The booking calendar. GHL's resizer sets the real height; this only keeps the iframe inside
   the column and off the page edge on a phone. The [hidden] rule is explicit because the
   sections here are given a display value, and any `display` beats the UA's [hidden] default —
   without it the section would ship visible, which is the bug this replaced. */
#book[hidden]{display:none}
/* Dawson's presenter video. Sized like the reel frames rather than full-bleed — it is a
   16:9 talking head, and stretched to the full column on a wide screen it dwarfs the copy
   either side of it. aspect-ratio holds the poster's shape before any video loads. */
.vidwrap{margin-top:2.4rem;background:#120C09;border-radius:3px;overflow:hidden;max-width:52rem}
.vidwrap video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#120C09}
.calwrap{margin-top:2.2rem;background:#fff;border-radius:var(--radius-media);overflow:hidden;max-width:46rem}
.calwrap iframe{display:block;width:100%;border:0}
.calwrap:empty{display:none}
/* The preview styles .val as a struck-through retail price. This build puts SmallRig part
   numbers in that column instead — see the header note on why the dollar figures cannot be
   filled — so the strikethrough has to come off or a valid SKU reads as a mistake. Matched
   to variant E's .partlist .sku. */
.kitlist .val{text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.04em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}