/* =====================================================================
   Brandon Ruiz Marketing — SELLING-GRAPHIC KIT  (kit.css)
   Shared design tokens + the "graphic + pricing card" pattern.
   Visual language cloned 1:1 from index.html / claim.html:
     Archivo (display) · IBM Plex Sans (body) · IBM Plex Mono (mono/code)
     concrete-white #F4F6F8 · ink #091926 · hi-vis amber #FF7A1A · good green #1E8F55
   Pair with graphics.js. Drop the @font import in the host page <head>:
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
   ===================================================================== */

:root{
  --paper:#F4F6F8; --ink:#091926; --ink2:#050F18; --steel:#4A5D73; --steel2:#8290A0;
  --amber:#FF7A1A; --amber-soft:#FFE9D6; --amber-press:#D8610F; --amber-lift:#FF8A33;
  --line:#E2E5EA; --line2:#CDD3DB; --good:#1E8F55; --good-soft:#E6F3EB; --bad:#C0392B;
  /* LB Computer Help brand — sampled from the LB monogram, not guessed:
     field navy #091926 (87% of the mark) · steel blue #1c3850 (the B) · white */
  --navy:#091926; --steel-blue:#1c3850; --accent:#2E6A9E; --accent-dim:#8FA3B8; --accent-soft:#DCE8F3;
  --disp:'Archivo',sans-serif; --body:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace;
  /* premium easing curves (2026 research): standard, decelerate, one signature spring */
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- shared primitives (safe to scope under .brm-kit if embedding) ---------- */
.brm-kit, .brm-kit *{box-sizing:border-box}
.brm-kit{font-family:var(--body);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.brm-mono{font-family:var(--mono)}
.brm-eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.brm-amber{color:var(--amber)}
.brm-good{color:var(--good)}

/* the rotated-square "diamond" bullet — the signature motif, now in the LB steel
   blue of the monogram's B so it reads as brand rather than as loose orange. */
.brm-diamond{display:inline-block;width:9px;height:9px;background:var(--steel-blue);border-radius:2px;transform:rotate(45deg);flex-shrink:0}

/* ---------- the amber CTA (cloned from .btn) ---------- */
.brm-btn{font-family:var(--disp);font-weight:700;font-size:15px;padding:14px 26px;border-radius:8px;
  cursor:pointer;border:1.5px solid transparent;display:inline-block;text-align:center;text-decoration:none;
  transition:transform .12s,background .15s,color .15s,box-shadow .15s}
.brm-btn:active{transform:translateY(1px)}
.brm-btn.primary{background:var(--amber);color:var(--ink);border-color:var(--amber);
  box-shadow:0 1px 0 var(--amber-press) inset,0 6px 18px -8px rgba(255,122,26,.6)}
.brm-btn.primary:hover{background:var(--amber-lift);box-shadow:0 1px 0 var(--amber-press) inset,0 10px 24px -8px rgba(255,122,26,.75)}
.brm-btn.secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.brm-btn.secondary:hover{background:var(--ink);color:var(--paper)}
.brm-btn.block{width:100%}

/* =====================================================================
   THE PATTERN: a "service block" = graphic + pricing card + checks + dropdown
   .brm-svc        the whole block (graphic left, card right; stacks on mobile)
   .brm-stage      where graphics.js mounts the animated SVG/DOM graphic
   .brm-card       the pricing card (price, checklist, CTA)
   .brm-faqs       the collapsed objection dropdowns under the card
   ===================================================================== */
/* align-items:start — the stage hugs its own content height instead of
   stretching to match the taller pricing card (that stretch was the main
   source of the dead space inside each graphic bubble). */
.brm-svc{display:grid;grid-template-columns:1.04fr .96fr;gap:26px;align-items:center}
@media(max-width:880px){.brm-svc{grid-template-columns:1fr;gap:24px}}
.brm-svc.reverse{direction:rtl}
.brm-svc.reverse>*{direction:ltr}
@media(max-width:880px){.brm-svc.reverse{direction:ltr}}

/* ---------- the animated graphic stage (matches .demo / .stage) ---------- */
/* Right-sized: padding + min-height trimmed so the content FILLS the bubble with
   even, tight margins (no big empty area). Content is vertically + horizontally
   centered so nothing floats with a void above/below it. */
.brm-stage{background:#fff;border:1px solid var(--line2);border-radius:16px;padding:16px;
  box-shadow:0 24px 60px -28px rgba(9,25,38,.32);position:relative;overflow:hidden;
  min-height:0;display:flex;flex-direction:column;justify-content:center}
/* every graphic now centers its content; the build/golive browser mock no longer
   needs a top-align hack (which caused the dead top whitespace) — kept as a no-op
   alias so any external markup using it still centers cleanly. */
.brm-stage.brm-stage--top{justify-content:center}
.brm-stage .brm-cap{font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:12px;text-align:center;letter-spacing:.02em;line-height:1.45}

/* mono "search / url" bar reused by several graphics */
.brm-bar{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line2);border-radius:999px;
  padding:10px 15px;font-size:14px;color:var(--ink);background:#FAFBFC;font-family:var(--mono)}
.brm-bar svg{flex-shrink:0}
.brm-caret{display:inline-block;width:2px;height:16px;background:var(--amber);margin-left:1px;vertical-align:-2px;
  animation:brm-blink 1s steps(1) infinite}
@keyframes brm-blink{50%{opacity:0}}

/* the reusable "live" pulse + phone "ring" keyframes (verbatim grammar from the loved hero) */
.brm-livedot{width:7px;height:7px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 0 rgba(30,143,85,.6);animation:brm-live 1.8s ease-out infinite}
@keyframes brm-live{0%{box-shadow:0 0 0 0 rgba(30,143,85,.55)}100%{box-shadow:0 0 0 7px rgba(30,143,85,0)}}
@keyframes brm-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.1);opacity:0}}

/* generic reveal helper graphics use: start near-invisible (the elements stay IN
   FLOW so they reserve their final footprint, leaving no empty band before the
   reveal), .show paints it in. opacity:.06 reads as blank to the eye but keeps
   the box "occupied" so the layout never shows a transient void where the not-
   yet-revealed element will land. */
.brm-rise{opacity:.06;transform:translateY(12px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.brm-rise.show{opacity:1;transform:none}
.brm-fade{opacity:.06;transition:opacity .4s var(--ease-std)}
.brm-fade.show{opacity:1}
.brm-pop{opacity:.06;transform:scale(.6);transition:opacity .3s,transform .35s var(--ease-spring)}
.brm-pop.show{opacity:1;transform:none}

/* ---------- the PRICING CARD (cloned from .tier / .afdcard) ---------- */
.brm-card{border:1px solid var(--line);border-radius:16px;padding:22px 22px;background:#fff;
  position:relative;display:flex;flex-direction:column}
.brm-card.feat{border:1.5px solid var(--ink)}
.brm-card .pin{position:absolute;top:-11px;left:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--amber);color:var(--ink);padding:3px 9px;border-radius:5px;font-weight:600}
.brm-card .name{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.brm-card .price{font-family:var(--disp);font-weight:900;font-size:40px;letter-spacing:-.02em;margin:8px 0 0;line-height:1}
.brm-card .price small{font-size:16px;font-weight:600;color:var(--steel);font-family:var(--body)}
.brm-card .pricelbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);display:block;margin-top:6px}

/* checkmark list: green checks = included, dashes = not (research: checks carry the sale) */
.brm-checks{list-style:none;margin:14px 0 0;padding:0}
.brm-checks li{font-size:14px;color:var(--ink);padding:9px 0 9px 26px;position:relative;border-top:1px solid var(--line);display:block}
.brm-checks li:first-child{border-top:none}
.brm-checks li::before{content:"";position:absolute;left:0;top:12px;width:15px;height:15px;border-radius:50%;
  background:var(--good-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231E8F55' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}
.brm-checks li.no{color:var(--steel)}
.brm-checks li.no::before{background:#EDF0F4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 24 24' stroke='%238A929C' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}
.brm-checks li.carve{color:var(--steel);font-family:var(--mono);font-size:11.5px;line-height:1.5;padding-left:26px}
.brm-checks li.carve::before{background:transparent;background-image:none;border:1px solid var(--line2);border-radius:3px;top:13px;width:11px;height:11px}
.brm-card .ccta{margin-top:16px}
.brm-card .liab{font-family:var(--mono);font-size:11.5px;color:var(--steel);line-height:1.6;border-top:1px solid var(--line);padding-top:14px;margin-top:16px}

/* one-line social proof sitting right next to the CTA (research: proximity lifts 10-20%) */
.brm-proof{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--steel);margin-top:12px}
.brm-proof .brm-livedot{margin-right:1px}
.brm-proof b{color:var(--ink);font-weight:600}

/* ---------- objection dropdowns (accordion, cloned from .faq) ---------- */
.brm-faqs{margin-top:18px}
.brm-faqs details{border-top:1px solid var(--line)}
.brm-faqs details:last-child{border-bottom:1px solid var(--line)}
.brm-faqs summary{font-family:var(--disp);font-weight:700;font-size:14.5px;padding:14px 30px 14px 0;cursor:pointer;
  list-style:none;position:relative;letter-spacing:-.01em}
.brm-faqs summary::-webkit-details-marker{display:none}
.brm-faqs summary::after{content:"+";position:absolute;right:2px;top:12px;font-family:var(--mono);font-size:19px;color:var(--amber);transition:transform .2s}
.brm-faqs details[open] summary::after{content:"\2013"}
.brm-faqs .ans{font-size:13.5px;color:var(--steel);padding:0 0 16px;max-width:60ch;line-height:1.6}
.brm-faqs .ans b{color:var(--ink)}

/* ---------- add-on snap-rail (the $50/$100/$25 module strip) ---------- */
.brm-addons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:620px){.brm-addons{grid-template-columns:1fr}}
.brm-addon{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff}
.brm-addon .box{width:18px;height:18px;border:1.5px solid var(--line2);border-radius:5px;margin-top:2px;flex-shrink:0}
.brm-addon b{font-family:var(--disp);font-weight:700;display:block}
.brm-addon .amt{color:var(--amber)}
.brm-addon span{font-size:13px;color:var(--steel)}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ---------- ACCESSIBILITY: reduced-motion catch-all (verbatim contract) ----------
   graphics.js ALSO paints a static finalState when reduce is set; this is the CSS belt-and-suspenders. */
@media(prefers-reduced-motion:reduce){
  .brm-kit *, .brm-stage *{animation:none!important;transition:none!important}
}