/* BRM Content Creator Kit — variant E landing styles.
   GENERATED from cck-variant-e-preview.html by bin/build-cck-wp-template.py.
   DO NOT HAND-EDIT — edit the preview and re-run. */
  /* One palette. Kyle 2026-09-04: variant C has no dark mode, so on a dark-mode machine C and
     D looked like different designs — they were not, the tokens are identical (--rec:#E2521B).
     The live WordPress site renders one way, so D now does too. A theme toggle on a sales page
     is a feature nobody asked for and doubles the QA surface. */
  :root{
    --ink:#12100E; --ink-2:#2A2621; --paper:#F5F2EC; --card:#FFFFFF; --sunk:#EBE6DC;
    --line:#DDD5C7; --steel:#5B6470; --dim:#6E6558;
    --rec:#E2521B; --rec-soft:#FBEAE1; --ok:#2F6B45; --ok-soft:#E7F0EA;
    --no:#9B3A22;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --display:Inter,-apple-system,sans-serif;
  }

  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);
    font:400 16.5px/1.6 var(--body);-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 26px}
  h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.028em;text-wrap:balance;
    font-weight:800;line-height:1.06}
  code{font-family:var(--mono);font-size:.86em}
  a{color:inherit}

  .eyebrow{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--rec)}
  section{padding:74px 0}
  section + section{border-top:1px solid var(--line)}
  .sec-head{max-width:60ch;margin-bottom:34px}
  .sec-head h2{font-size:clamp(1.8rem,3.9vw,2.6rem);margin:12px 0 0}
  .sec-head p{margin:14px 0 0;font-size:1.06rem;color:var(--steel);line-height:1.6}

  /* hero */
  header{padding:26px 0 0}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:36px;padding:22px 0 66px}
  @media(min-width:900px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}}
  .fromline{display:flex;align-items:baseline;gap:10px;margin:14px 0 2px}
  .fromline .from{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
    color:var(--dim)}
  .fromline .big{font-size:clamp(3rem,8vw,4.6rem);font-weight:800;letter-spacing:-.045em;
    line-height:.95}
  .fromsub{margin:0 0 20px;font:500 13px var(--mono);color:var(--dim);letter-spacing:.02em}
  h1{font-size:clamp(2.1rem,5.1vw,3.4rem)}
  h1 .em{color:var(--rec)}
  .lede{margin:20px 0 0;font-size:1.1rem;color:var(--steel);line-height:1.62;max-width:52ch}
  .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  /* The three reassurances under the hero buttons, carried over from variant C with the
     selector rescoped: C's rule is .hero .herofacts and this header is .hero-v, so the
     original would not have matched anything. */
  .hero-v .herofacts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0 22px;
    grid-template-columns:repeat(3,1fr);max-width:640px}
  .hero-v .herofacts li{font:500 12.5px/1.5 var(--mono);color:var(--dim);
    padding-left:14px;border-left:1px solid var(--line);text-wrap:balance}
  .hero-v .herofacts li:first-child{padding-left:0;border-left:0}
  @media(max-width:760px){
    .hero-v .herofacts{grid-template-columns:1fr;gap:9px 0;max-width:none}
    .hero-v .herofacts li{padding-left:0;border-left:0;padding-top:9px;
      border-top:1px solid var(--line)}
    .hero-v .herofacts li:first-child{padding-top:0;border-top:0}
  }
  .btn{display:inline-block;padding:13px 22px;border-radius:3px;font-weight:600;font-size:15px;
    text-decoration:none;background:var(--rec);color:#fff;border:1.5px solid var(--rec)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
  .btn:hover{opacity:.9}

  /* the deliverable block — the thing the page is really for */
  .deliver{display:grid;grid-template-columns:1fr;gap:16px}
  @media(min-width:760px){.deliver{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1060px){.deliver{grid-template-columns:repeat(4,1fr)}}
  .dcard{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:24px 21px;
    display:flex;flex-direction:column}
  .dcard.custom{background:var(--sunk);border-style:dashed}
  .dcard .cta{margin-top:auto;padding-top:18px}
  .dcard .cta .btn{display:block;text-align:center;padding:11px 16px;font-size:14px}
  .dcard.mid{border:2px solid var(--ink);position:relative}
  .dcard .tier{font:500 11.5px var(--mono);letter-spacing:.15em;text-transform:uppercase;
    color:var(--steel)}
  .dcard .price{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;margin:6px 0 0}
  .dcard .price small{font:500 13px var(--body);letter-spacing:0;color:var(--dim)}
  .dcard .hero-num{margin:18px 0 0;padding:16px 0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)}
  .dcard .hero-num b{display:block;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;
    line-height:1.15}
  .dcard .hero-num span{display:block;margin-top:4px;font:500 12px var(--mono);color:var(--dim);
    letter-spacing:.04em}
  .dcard ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
  .dcard li{display:grid;grid-template-columns:17px 1fr;gap:9px;font-size:14.5px;line-height:1.45;
    color:var(--ink-2)}
  .dcard li .tick{color:var(--ok);font-weight:700}
  .dcard li.no{color:var(--dim)}
  .dcard li.no .tick{color:var(--dim)}

  /* comparison table */
  .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px;background:var(--card)}
  table{border-collapse:collapse;width:100%;min-width:660px;font-size:14.5px}
  th{text-align:left;padding:14px 16px;background:var(--sunk);border-bottom:1px solid var(--line);
    font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
    white-space:nowrap}
  th.tier{color:var(--ink);font-size:13px;letter-spacing:.06em}
  td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
  tr:last-child td{border-bottom:0}
  td.feat{font-weight:600;color:var(--ink);white-space:nowrap}
  td.c{text-align:center;font-variant-numeric:tabular-nums}
  .yes{color:var(--ok);font-weight:700}
  .dash{color:var(--dim)}

  /* in the box */
  .box-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:start}
  @media(min-width:840px){.box-grid{grid-template-columns:1fr 1fr;gap:44px}}
  .partlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
  .partlist li{display:grid;grid-template-columns:1fr auto;gap:14px;padding:13px 0;
    border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
  .partlist li:last-child{border-bottom:0}
  .partlist .sku{font:500 11px var(--mono);color:var(--dim);white-space:nowrap}
  .partlist b{font-weight:600}
  .partlist span.d{display:block;font-size:13.5px;color:var(--steel);margin-top:2px;font-weight:400}

  /* month timeline */
  ol.month{list-style:none;counter-reset:m;margin:0;padding:0;display:grid;gap:0}
  ol.month li{counter-increment:m;display:grid;grid-template-columns:78px 1fr;gap:20px;
    padding:18px 0;border-bottom:1px solid var(--line)}
  ol.month li:last-child{border-bottom:0}
  ol.month .when{font:500 11.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;
    color:var(--rec);padding-top:3px}
  ol.month b{display:block;font-size:1.05rem;font-weight:700;margin-bottom:4px}
  ol.month p{margin:0;font-size:14.7px;color:var(--steel);line-height:1.55;max-width:62ch}
  ol.month .who{display:inline-block;margin-left:8px;font:500 10px var(--mono);
    letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;border-radius:2px;
    background:var(--sunk);color:var(--dim);vertical-align:2px}
  ol.month .who.you{background:var(--rec-soft);color:var(--rec)}

  /* booking CTA under the cards */
  .talk{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:5px;
    padding:24px 26px;display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
  @media(min-width:760px){.talk{grid-template-columns:1fr auto;gap:28px}}
  .talk b{display:block;font-size:1.12rem;font-weight:700;margin-bottom:5px}
  .talk p{margin:0;font-size:15px;color:var(--steel);line-height:1.55;max-width:58ch}

  .note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--rec);
    border-radius:4px;padding:19px 22px;margin-top:26px}
  .note b{display:block;font-weight:700;margin-bottom:6px}
  .note p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.58}

  footer{border-top:1px solid var(--line);background:var(--card);margin-top:0}
  footer .wrap{padding:34px 26px 48px}
  footer p{font-size:14px;color:var(--dim);margin:0;line-height:1.7;text-align:center}

  .slot{background:var(--sunk);border:2px dashed var(--line);border-radius:5px;padding:34px;
    text-align:center;color:var(--dim);font:500 13px var(--mono);letter-spacing:.06em}
.ph{position:relative;width:284px;height:580px;border-radius:46px;padding:12px;flex:none;
  background:linear-gradient(155deg,#2b2f36,#0c0d10 60%);
  box-shadow:0 40px 80px -26px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06)}
.ph .scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#000}
.ph .scr video{width:100%;height:100%;object-fit:cover;display:block}
.ph .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:104px;height:26px;
  background:#000;border-radius:16px;z-index:4}
.ph .bar{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 22px;font:600 13px/1 -apple-system,system-ui,sans-serif;color:#fff;z-index:5}
.ph .tabs{position:absolute;top:52px;left:0;right:0;display:flex;justify-content:center;gap:18px;
  z-index:5;font:600 14px/1 -apple-system,system-ui,sans-serif;color:rgba(255,255,255,.6)}
.ph .tabs b{color:#fff;position:relative}
.ph .tabs b::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:#fff;border-radius:2px}
.ph .scrim{position:absolute;inset:auto 0 0 0;height:52%;z-index:2;background:linear-gradient(transparent,rgba(0,0,0,.82))}
.ph .meta{position:absolute;left:16px;right:74px;bottom:24px;z-index:3;color:#fff;
  font:400 13px/1.45 -apple-system,system-ui,sans-serif}
.ph .meta .who{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-weight:600}
.ph .meta .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#E2521B,#E8B94D);flex:none}
.ph .rail{position:absolute;right:12px;bottom:26px;z-index:3;display:flex;flex-direction:column;
  gap:16px;align-items:center;color:#fff;font:600 11px/1 -apple-system,system-ui,sans-serif}
.ph .rail div{display:flex;flex-direction:column;align-items:center;gap:4px}
.ph .rail .ic{font-size:22px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
@media(max-width:900px){.ph{transform:scale(.88);transform-origin:top center;margin-bottom:-70px}}
.ph .scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:translateY(12px);z-index:1;
  transition:opacity .34s ease,transform .48s cubic-bezier(.2,.8,.2,1)}
.ph .scr video.is-on{opacity:1;transform:none;z-index:2}
.ph .scr video.is-off{opacity:0;transform:translateY(-16px);z-index:1}
/* progress pips — eight businesses is the argument, so show that there are eight */
.ph .dots{position:absolute;left:0;right:0;bottom:9px;z-index:6;display:flex;justify-content:center;gap:5px}
.ph .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.32);
  transition:background .3s ease,width .3s ease}
.ph .dots i.on{background:#fff;width:14px;border-radius:3px}
.ph .meta [data-reel-cap],.ph .meta [data-reel-who]{transition:opacity .24s ease}
.ph.is-swapping .meta [data-reel-cap],.ph.is-swapping .meta [data-reel-who]{opacity:0}
@media (prefers-reduced-motion:reduce){
  .ph .scr video{transition:opacity .01ms}
  .ph .scr video.is-on,.ph .scr video.is-off{transform:none}
}

.phonewrap{display:flex;justify-content:center}

  /* Kit carousel. Three treatments of the same rig: branded, dramatic, and a clean cutout.
     CSS-only crossfade driven by one small script — no library for three images. */
  .kcar{position:relative}
  .kframe{position:relative;aspect-ratio:1942/809;background:var(--sunk);border-radius:6px;
    overflow:hidden}
  .kslide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s ease}
  .kslide.on{opacity:1}
  .kslide img{width:100%;height:100%;object-fit:cover;display:block}
  .kslide figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 12px;
    font:500 12.5px var(--mono);letter-spacing:.05em;color:#fff;
    background:linear-gradient(transparent,rgba(0,0,0,.62))}
  .kdots{display:flex;gap:8px;justify-content:center;padding-top:14px}
  .kdot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line);
    cursor:pointer;transition:background .25s,width .25s}
  .kdot.on{background:var(--rec);width:22px;border-radius:4px}

  /* ---- variant E: video hero ------------------------------------------------
     Same palette and typography as D. The video is a full-bleed backdrop behind
     the hero; the right grid column is left empty so the footage reads there
     instead of behind the copy. Scrim is warm paper, not black, because this
     page has no dark mode (see the palette note) and the hero text stays --ink.
     NOTE: the source is 1080x1920 VERTICAL phone footage, 17s. object-fit:cover in a wide
     hero therefore discards most of the frame top and bottom. Do not add scale() on desktop
     to "fill" it — cover already fills, and scaling only crops further. If the footage needs
     to be seen properly, it belongs in the right-hand column at 9:16, not full-bleed. */
  header.hero-v{position:relative;overflow:hidden;padding:26px 0 0}
  .hero-media{position:absolute;inset:0;background:var(--sunk)}
  .hero-media video{width:100%;height:100%;object-fit:cover;display:block;
    transform:scale(1.02);transform-origin:50% 42%;filter:saturate(1.04) contrast(1.02)}
  /* left-weighted scrim: near-opaque under the copy, thins out over the footage */
  .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(
    103deg,rgba(245,242,236,.975) 0%,rgba(245,242,236,.95) 34%,
    rgba(245,242,236,.70) 56%,rgba(245,242,236,.38) 79%,rgba(245,242,236,.28) 100%)}
  header.hero-v > .wrap{position:relative}
  .hero-v .hero-grid{min-height:clamp(520px,74vh,760px);padding-bottom:76px}
  @media(max-width:899px){
    /* single column on mobile: copy sits over the footage, so scrim goes vertical */
    /* portrait source finally matches a portrait viewport here — no crop needed */
    .hero-media video{transform:none}
    .hero-media::after{background:linear-gradient(180deg,rgba(245,242,236,.95) 0%,
      rgba(245,242,236,.90) 46%,rgba(245,242,236,.80) 100%)}
    .hero-v .hero-grid{min-height:clamp(460px,66vh,620px)}
  }
  @media(prefers-reduced-motion:reduce){.hero-media video{display:none}}

  /* ---- variant E: kit footage in "What ships" -------------------------------
     Kyle 2026-09-04: the 1080x1920 clip moved here from the hero so it shows the
     actual kit. It gets a 9:16 panel beside the parts list rather than going into
     the .kframe carousel, whose aspect-ratio is 1942/809 (~2.4:1) and would crop a
     vertical clip to a letterbox slot. The wide carousel moves below the grid,
     full width, where 2.4:1 is the right shape. */
  .kitvid{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;
    background:var(--sunk);border:1px solid var(--line)}
  .kitvid video{width:100%;height:100%;object-fit:cover;display:block}
  .kitvid-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;
    font:500 11.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#fff;
    background:linear-gradient(transparent,rgba(0,0,0,.62))}
  @media(min-width:840px){
    /* narrow portrait column + the 9-item list, both tall — they pair well */
    .box-grid{grid-template-columns:minmax(230px,320px) 1fr;gap:40px;align-items:start}
  }
  @media(max-width:839px){
    /* full-bleed 9:16 is absurdly tall on a phone; crop toward 3:4 instead */
    .kitvid{aspect-ratio:3/4}
  }
  @media(prefers-reduced-motion:reduce){.kitvid video{display:none}}

  /* ---- variant E, Kyle 2026-09-04 -------------------------------------------
     (a) The Month: the phone reel sits beside the step list on desktop. Stacks
         under 980px — the mock is a tall narrow device frame, and side-by-side on
         a phone shrinks both columns below useful width.
     (b) Cost comparison rebuilt as three .dcard cards instead of a second table.
         Two matrix tables back to back read as one long table and neither got
         looked at. The plan matrix stays a table (16 features x 4 plans genuinely
         is a matrix); this one is three options with one number each, so cards. */
  .month-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
  .month-phone{display:flex;justify-content:center;padding-top:8px}
  @media(min-width:980px){
    .month-grid{grid-template-columns:1fr minmax(290px,350px);gap:54px;align-items:center}
    .month-phone{padding-top:0}
  }
  .cmpgrid{display:grid;grid-template-columns:1fr;gap:18px}
  @media(min-width:860px){.cmpgrid{grid-template-columns:repeat(3,1fr);gap:20px}}
  /* Kyle 2026-09-04: the three option names carry the comparison, so they read at
     label size, not caption size — bigger and bolder than the .dcard .tier default. */
  .cmpgrid .dcard .tier{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--ink)}
  .cmpgrid .dcard .price{font-size:1.95rem}
  .cmpgrid .dcard .price small{display:inline}
  .cwhy{margin:7px 0 0;font:500 12.5px var(--mono);color:var(--dim);letter-spacing:.02em}
  .cmpgrid .dcard .hero-num{margin-top:auto}

  /* ---- comparison table on mobile, Kyle 2026-09-04 --------------------------
     Was min-width:660px against ~338px of usable width on a 390px phone: visitors
     saw 51% of it, and .feat scrolled away with everything else so the cells they
     swiped to had no row label. Most traffic is mobile.
     Fixed by shrinking what the table has to carry rather than by making the scroll
     nicer: the three rows that read the same in every plan moved to the strip above
     (they compared nothing), and Custom left the matrix — it said "you tell us" or
     "agreed" in 10 of 15 rows and already has two cards on this page. 12 rows x 3
     plans fits without a scroll. Sticky label column stays as insurance for any
     residual overflow at odd widths. */
  .cmp-all{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin:0 0 18px;
    padding:13px 16px;background:var(--sunk);border:1px solid var(--line);border-radius:5px}
  .cmp-all-lab{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;
    color:var(--dim)}
  .cmp-all ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
  .cmp-all li{display:flex;gap:7px;font-size:14.5px;font-weight:600;color:var(--ink)}
  .cmp-all .tick{color:var(--ok);font-weight:700}
  .cmp-custom{margin:16px 0 0;font-size:14.5px;color:var(--steel);line-height:1.6;max-width:64ch}
  .cmp-custom b{color:var(--ink)}
  .cmp-custom a{color:var(--rec);font-weight:600}
  .cmp-lab{width:26%}
  /* sticky row labels — needs its own background or collapsed borders show through */
  #compare td.feat{position:sticky;left:0;z-index:1;background:var(--card)}
  #compare th.cmp-lab{position:sticky;left:0;z-index:2;background:var(--sunk)}
  @media(max-width:719px){
    #compare table{min-width:0;font-size:12.5px}
    #compare th{padding:10px 7px;white-space:normal;font-size:10px;letter-spacing:.05em}
    #compare th.tier{font-size:12px;letter-spacing:.01em}
    #compare td{padding:10px 7px}
    #compare td.feat{white-space:normal;font-size:12px}   /* nowrap forced the label wide */
    .cmp-lab{width:31%}
    .cmp-all{gap:8px 14px;padding:12px 13px}
    .cmp-all li{font-size:13.5px}
  }

  /* ---- the sound section, Kyle 2026-09-04 -----------------------------------
     Dawson wanted to pull back on "full scripting" as too cumbersome to produce.
     Kyle's read is better: owners are nervous about SPEAKING, so the fact that they
     do not have to is the feature, not the concession. So the audio layer gets its
     own section rather than the scripting line quietly shrinking, and the shotgun
     mic is re-justified as the optional own-voice route instead of "the fix for
     bad audio" — a problem this model removes. Four cards, no numbering: these are
     parallel parts of one delivery, not a sequence. */
  .soundgrid{display:grid;grid-template-columns:1fr;gap:16px}
  @media(min-width:720px){.soundgrid{grid-template-columns:repeat(2,1fr);gap:18px}}
  @media(min-width:1000px){.soundgrid{grid-template-columns:repeat(4,1fr)}}
  .scard{background:var(--card);border:1px solid var(--line);border-radius:5px;padding:21px 19px}
  .scard h3{font-size:1.06rem;margin:0 0 9px;letter-spacing:-.02em}
  .scard p{margin:0;font-size:14px;color:var(--steel);line-height:1.56}
  .soundnote{margin:24px 0 0;padding:14px 16px;background:var(--sunk);border-radius:5px;
    font-size:15px;color:var(--ink-2);line-height:1.6;max-width:70ch}
  .soundnote b{color:var(--ink)}

/* ---- WordPress build only ---------------------------------------------------------- */
.dcard li{display:block;position:relative;padding-left:26px}
.dcard li .tick{position:absolute;left:0;top:0;width:17px}