/* ─────────────────────────────────────────────────────────────
   Factorial Studio — shared stylesheet for service / landing pages
   Every page under /qa/, /marketing/, /development/… links this.
   Design tokens match the homepage so the whole site stays one brand.
   ───────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#06281c;--g900:#064e3b;--g700:#11704f;--g600:#15803d;
  --leaf:#7cb342;--leaf2:#a3d977;
  --gold:#fbbf24;--gold2:#f59e0b;--orange:#ff7043;
  --cream:#f6f3e7;--cream2:#fffdf6;
  --text:#eaf5ee;--muted:#a9c6b5;--ink-text:#123a2a;--ink-muted:#5f7d6c;
  --f-disp:'Bungee',cursive;--f-body:'Fredoka',sans-serif;
  --r:22px;--r-lg:30px;--shadow:0 18px 44px rgba(3,30,20,.35);
}
html{scroll-behavior:smooth;font-size:16px}
/* the roomier reading size starts where there is room for it. A flat 17px
   pushed card headings out of their boxes at 375px. */
@media (min-width:768px){html{font-size:17px}}

body{font-family:var(--f-body);color:var(--text);background:var(--ink);line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.disp{font-family:var(--f-disp);text-transform:uppercase;line-height:1.04;letter-spacing:.02em}

/* ── nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;background:rgba(6,40,28,.85);backdrop-filter:blur(14px);border-bottom:2px solid rgba(124,179,66,.18)}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:46px;height:46px;object-fit:contain}
.logo b{font-family:var(--f-disp);font-size:1.1rem;color:#fff;letter-spacing:.02em}
.logo b em{color:var(--gold);font-style:normal}
.nav-actions{display:flex;align-items:center;gap:20px}
.nav-back{font-weight:500;font-size:.9rem;color:var(--muted)}
.nav-back:hover{color:var(--gold)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-body);font-weight:600;
  font-size:.95rem;padding:13px 26px;border-radius:999px;cursor:pointer;border:none;
  transition:transform .2s,box-shadow .25s,border-color .25s}
.btn svg{width:18px;height:18px}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#3a2a06;box-shadow:0 6px 16px rgba(245,158,11,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(245,158,11,.38);color:#3a2a06}
.btn-ghost{background:rgba(255,255,255,.06);border:2px solid rgba(163,217,119,.4);color:var(--text)}
.btn-ghost:hover{border-color:var(--leaf);color:#fff;transform:translateY(-2px)}

/* ── hero + lead form (the conversion unit on every ad landing page) ── */
.hero{padding:132px 0 76px;background:radial-gradient(120% 100% at 80% -10%, #0c5a3f 0%, var(--g900) 45%, var(--ink) 100%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:start}
.crumbs{font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--gold)}.crumbs span{color:var(--muted);margin:0 9px}
.tag{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:#3a1405;background:var(--gold);padding:7px 15px;border-radius:999px;margin-bottom:20px}
.hero h1{font-family:var(--f-disp);font-size:clamp(2rem,4.4vw,3.3rem);color:#fff;line-height:1.06;margin-bottom:20px;letter-spacing:.01em}
/* the gold half of the headline is always its own line — without this the two
   halves run together ("PUBLISHA PRICE LIST") since the markup has no <br> */
.hero h1 em{color:var(--gold);font-style:normal;display:block}
.hero p{font-size:1.05rem;color:var(--muted);margin-bottom:22px}
.hero p b{color:#eaf5ee;font-weight:600}
.checks{list-style:none;display:flex;flex-direction:column;gap:11px}
.checks li{display:flex;align-items:flex-start;gap:11px;font-size:.95rem;color:var(--text);font-weight:500}
.checks svg{flex:none;width:19px;height:19px;color:var(--leaf2);margin-top:3px}
.nostrings{margin-top:22px;font-size:.86rem;color:var(--muted);border-left:3px solid var(--leaf);padding-left:14px}

.fcard{background:var(--cream2);border:2px solid #e7e2cf;border-radius:var(--r-lg);padding:30px 30px 32px;box-shadow:var(--shadow)}
.fcard h2{font-family:var(--f-disp);font-size:1.12rem;color:var(--g900);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
.fcard .sub{font-size:.88rem;color:var(--ink-muted);margin-bottom:20px}
.fcard label{display:block;font-weight:600;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--g700);margin:15px 0 7px}
.fcard input,.fcard select,.fcard textarea{width:100%;font-family:var(--f-body);font-size:.95rem;color:var(--ink-text);
  background:#fff;border:2px solid #e2ddc8;border-radius:14px;padding:12px 15px;outline:none;transition:border-color .2s}
.fcard input:focus,.fcard select:focus,.fcard textarea:focus{border-color:var(--leaf)}
.fcard textarea{min-height:78px;resize:vertical}
.fcard .btn{width:100%;margin-top:20px;font-size:1rem;padding:15px 26px}
.fmsg{margin-top:14px;font-size:.88rem;font-weight:600;text-align:center;min-height:20px}
.fmsg.ok{color:var(--g600)}.fmsg.err{color:#c2410c}
.fnote{margin-top:13px;font-size:.75rem;color:var(--ink-muted);text-align:center;line-height:1.5}

/* ── sections ── */
.section{padding:82px 0;position:relative}
.section.cream{background:var(--cream);color:var(--ink-text)}
.eyebrow{font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;color:var(--gold);
  margin-bottom:14px;display:flex;align-items:center;gap:10px}
.section.cream .eyebrow{color:var(--g600)}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:3px;background:currentColor}
h2.disp{font-size:clamp(1.65rem,3.4vw,2.5rem);color:#fff;margin-bottom:16px}
.section.cream h2.disp{color:var(--g900)}
h2.disp em{color:var(--gold);font-style:normal}
.section.cream h2.disp em{color:var(--gold2)}
.lead{font-size:1.01rem;color:var(--muted);max-width:700px;margin-bottom:42px}
.section.cream .lead{color:var(--ink-muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}

/* -- cards -- toon pass: hard outline, flat sticker shadow, and a big
   ghosted copy of the card's own icon bleeding out of the corner, so every
   category carries matching background art without a single extra file */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.tc{position:relative;overflow:hidden;background:var(--cream2);
  border:2.5px solid #1f6b4a;border-radius:22px;padding:26px;
  box-shadow:0 4px 0 #1f6b4a;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s}
.tc:hover{transform:translateY(-5px);box-shadow:0 9px 0 #1f6b4a}
.section:not(.cream) .tc{background:linear-gradient(158deg,#126b46,#083f29);
  border-color:rgba(163,217,119,.55);box-shadow:0 4px 0 rgba(4,26,18,.9)}
.section:not(.cream) .tc:hover{box-shadow:0 9px 0 rgba(4,26,18,.9)}

.tc-ico{width:58px;height:58px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  margin-bottom:15px;background:linear-gradient(160deg,#dcf3bd,#9fd66f);
  border:2.5px solid #1f6b4a;box-shadow:0 3px 0 #1f6b4a;
  transition:transform .2s cubic-bezier(.34,1.5,.64,1)}
.tc:hover .tc-ico{transform:rotate(-7deg) scale(1.06)}
.section:not(.cream) .tc-ico{background:linear-gradient(160deg,var(--gold),var(--gold2));
  border-color:rgba(251,191,36,.75);box-shadow:0 3px 0 rgba(4,26,18,.75)}
/* the icons carry no stroke attribute of their own. Without this they draw
   nothing at all, which is exactly how they shipped. */
.tc-ico svg{width:28px;height:28px;stroke:currentColor;stroke-width:2.2;fill:none;color:#0d4a32}
.section:not(.cream) .tc-ico svg{color:#3a2a06}

.tc-wm{position:absolute;right:-26px;bottom:-30px;width:158px;height:158px;
  pointer-events:none;opacity:.08;color:var(--g900);
  transition:opacity .25s,transform .25s}
.tc-wm svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.1;fill:none}
.tc:hover .tc-wm{opacity:.14;transform:rotate(-9deg) scale(1.07)}
.section:not(.cream) .tc-wm{color:var(--leaf2);opacity:.12}
.section:not(.cream) .tc:hover .tc-wm{opacity:.2}
.tc h3,.tc p,.tc-ico{position:relative;z-index:1}
.tc h3{font-family:var(--f-disp);font-size:.93rem;letter-spacing:.03em;color:var(--g900);margin-bottom:8px}
.section:not(.cream) .tc h3{color:#fff}
.tc p{font-size:.88rem;color:var(--ink-muted);line-height:1.55}
.section:not(.cream) .tc p{color:#cfe3d6}
@media (prefers-reduced-motion:reduce){
  .tc,.tc-ico,.tc-wm{transition:none}
  .tc:hover{transform:none}
  .tc:hover .tc-ico{transform:none}
  .tc:hover .tc-wm{transform:none}
}

/* ── bullet list block ── */
.blist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.blist li{display:flex;align-items:flex-start;gap:11px;font-size:.95rem;line-height:1.55}
.section:not(.cream) .blist li{color:#cfe3d6}
.section.cream .blist li{color:var(--ink-muted)}
.blist li b{color:#fff;font-weight:600}
.section.cream .blist li b{color:var(--ink-text)}
.blist li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:9px;
  box-shadow:0 0 8px rgba(251,191,36,.55)}

/* ── numbered steps ── */
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:20px;align-items:flex-start;background:rgba(255,255,255,.05);
  border:2px solid rgba(163,217,119,.18);border-left:4px solid var(--leaf);padding:22px 26px;border-radius:0 var(--r) var(--r) 0}
.section.cream .step{background:var(--cream2);border-color:#e7e2cf;border-left-color:var(--g600)}
.step .n{font-family:var(--f-disp);font-size:1.35rem;letter-spacing:.03em;color:var(--gold);min-width:44px}
.section.cream .step .n{color:var(--g600)}
.step h4{font-family:var(--f-disp);font-size:.98rem;letter-spacing:.03em;color:#fff;margin-bottom:6px}
.section.cream .step h4{color:var(--g900)}
.step p{font-size:.92rem;color:var(--muted)}
.section.cream .step p{color:var(--ink-muted)}
.step p b{color:#fff}.section.cream .step p b{color:var(--ink-text)}

/* ── results / proof strip ── */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.result{background:linear-gradient(158deg,#126b46,#083f29);border:2px solid rgba(251,191,36,.34);
  border-radius:var(--r);padding:28px 24px;text-align:center}
.result b{display:block;font-family:var(--f-disp);font-size:2rem;color:var(--gold);line-height:1;margin-bottom:10px}
.result span{font-size:.9rem;color:#cfe3d6;font-weight:500;line-height:1.5;display:block}

/* ── comparison table ── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vs-col{border-radius:var(--r-lg);padding:30px 28px}
.vs-a{background:rgba(255,255,255,.04);border:2px solid rgba(169,198,181,.22)}
.vs-b{background:linear-gradient(158deg,#126b46,#083f29);border:2px solid rgba(251,191,36,.36)}
.vs-col h3{font-family:var(--f-disp);font-size:1rem;letter-spacing:.03em;margin-bottom:16px}
.vs-a h3{color:var(--muted)}.vs-b h3{color:var(--gold)}
.vs-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.vs-col li{font-size:.92rem;display:flex;align-items:flex-start;gap:10px;line-height:1.55}
.vs-a li{color:var(--muted)}.vs-b li{color:#dff0e4}
.vs-col li svg{flex:none;width:17px;height:17px;margin-top:3px}
.vs-a li svg{color:#ff8a7a}.vs-b li svg{color:var(--leaf2)}

/* ── FAQ ── */
.faq{max-width:820px;margin:0 auto}
.fq{border-bottom:2px solid #e2ddc8;padding:20px 0}
.section:not(.cream) .fq{border-bottom-color:rgba(163,217,119,.2)}
.fq:last-child{border-bottom:none}
.fq h4{font-family:var(--f-disp);font-size:.94rem;letter-spacing:.03em;color:var(--g900);margin-bottom:8px}
.section:not(.cream) .fq h4{color:#fff}
.fq p{font-size:.93rem;color:var(--ink-muted)}
.section:not(.cream) .fq p{color:var(--muted)}
.fq p b{color:var(--ink-text)}.section:not(.cream) .fq p b{color:#fff}

/* ── related services ── */
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rel a{background:rgba(255,255,255,.05);border:2px solid rgba(163,217,119,.2);border-radius:16px;
  padding:16px 18px;font-weight:600;font-size:.9rem;color:var(--text);transition:all .2s;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.rel a:hover{border-color:var(--gold);color:#fff;transform:translateY(-3px)}
.rel a svg{width:15px;height:15px;color:var(--gold);flex:none}
/* on a cream section the default light text is invisible — these panels appear
   on both backgrounds, so both need a defined treatment */
.section.cream .rel a{background:var(--cream2);border-color:#e7e2cf;color:var(--ink-text)}
.section.cream .rel a:hover{border-color:var(--g600);color:var(--g900);background:#fff}
.section.cream .rel a svg{color:var(--g600)}

/* same latent problem on the comparison block, in case it ever moves to cream */
.section.cream .vs-a{background:var(--cream2);border-color:#e7e2cf}
.section.cream .vs-a h3{color:var(--ink-muted)}
.section.cream .vs-a li{color:var(--ink-muted)}

/* ── closing CTA ── */
/* the lead form moved to the bottom CTA, so the hero runs full width now */
.hero-grid.solo{grid-template-columns:1fr}
.hero-grid.solo>div{max-width:840px}
/* the card is a centred block, but the fields inside it stay left-aligned
   -- .cta centres everything, and centred form labels are unreadable */
.cta-form{max-width:560px;margin:0 auto;text-align:left}
.cta-form .fcard{padding:28px 28px 30px}
.cta .row{margin-top:26px}
.cta{text-align:center;padding:86px 0;background:radial-gradient(120% 100% at 50% 0%, #0c5a3f, var(--g900) 70%)}
.cta h2{font-family:var(--f-disp);font-size:clamp(1.8rem,4vw,3rem);color:#fff;margin-bottom:16px;letter-spacing:.01em}
.cta h2 em{color:var(--gold);font-style:normal}
.cta p{color:var(--muted);max-width:540px;margin:0 auto 30px}
.cta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}


/* ── client logo marquee (same block on every page, directly under the hero) ── */
.marq{background:#052e20;border-top:2px solid rgba(124,179,66,.16);
  border-bottom:2px solid rgba(124,179,66,.16);padding:30px 0 32px;overflow:hidden}
.marq-lab{text-align:center;font-weight:600;font-size:.72rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.marq-lab b{color:var(--gold);font-weight:600;letter-spacing:.1em}
.marq-vp{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* the track holds the same ten chips twice, so translating it exactly
   half its width lands on an identical frame and the loop never seams. */
.marq-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marq-vp:hover .marq-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq{flex:0 0 178px;height:90px;margin-right:18px;background:var(--cream2);
  border:2px solid rgba(163,217,119,.18);border-radius:16px;
  display:flex;align-items:center;justify-content:center;padding:11px 16px}
/* grey while it moves, full colour the moment you stop it — ten brand
   palettes side by side are noise otherwise */
.mq img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;
  filter:grayscale(1) opacity(.86);transition:filter .3s}
.marq-vp:hover .mq img{filter:grayscale(0) opacity(1)}
.mq b{font-family:var(--f-disp);font-size:.84rem;letter-spacing:.03em;color:var(--g900);text-align:center;line-height:1.2}
@media (max-width:640px){.mq{flex:0 0 142px;height:76px;margin-right:14px;padding:9px 13px}
  .marq{padding:24px 0 26px}
  /* eight country names need the tracking back to stay on two lines */
  .marq-lab{font-size:.68rem;letter-spacing:.1em;line-height:1.7;padding:0 4px}
  .marq-lab b{letter-spacing:.06em}}
/* reduced-motion: no crawl, swipe it instead */
@media (prefers-reduced-motion:reduce){.marq-track{animation:none}.marq-vp{overflow-x:auto}}

/* ── site directory (same block on every page, above the footer) ── */
.dir{background:#052018;border-top:2px solid rgba(124,179,66,.16);padding:64px 0 56px}
.dir-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.dir-col h4{font-family:var(--f-disp);font-size:.8rem;letter-spacing:.06em;color:var(--gold);
  margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid rgba(163,217,119,.18)}
.dir-col a{display:block;font-size:.9rem;font-weight:500;color:var(--muted);padding:7px 0;transition:color .18s}
.dir-col a:hover{color:#fff}
.dir-col a em{font-style:normal;color:var(--leaf2);font-size:.72rem;font-weight:600;margin-left:6px}
/* the page you're already on shouldn't look like somewhere to go */
.dir-col a[aria-current="page"]{color:var(--gold);cursor:default}
@media (max-width:900px){.dir-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:560px){.dir-grid{grid-template-columns:1fr}.dir{padding:48px 0 40px}}

/* ── footer ── */
footer{background:var(--ink);border-top:2px solid rgba(124,179,66,.18);padding:40px 0;text-align:center}
footer .fl{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
footer .fl a{color:var(--muted);font-weight:500;font-size:.84rem}
footer .fl a:hover{color:var(--gold)}
footer p{color:var(--muted);font-size:.82rem}

/* ── responsive ── */
@media (max-width:1000px){
  .hero-grid,.split,.vs{grid-template-columns:1fr;gap:34px}
  .cards,.cards.two{grid-template-columns:1fr 1fr}
  .results{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr 1fr}
  .blist{grid-template-columns:1fr}
  .nav-back{display:none}
}
@media (max-width:620px){
  .cards,.cards.two{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr}
  .step{flex-direction:column;gap:8px}
  .hero{padding-top:118px}
  nav{padding:12px 16px}
  .logo img{width:34px;height:34px}
  .logo b{font-size:.9rem}
  .nav-actions{gap:10px}
  /* nowrap matters: several pages carry 20-character CTAs ("Free Project
     Estimate", "Get Results Like These") which otherwise break onto a second
     line and push the button into the logo */
  .nav-actions .btn{padding:10px 14px;font-size:.78rem;white-space:nowrap}
}
@media (max-width:430px){
  /* below this the wordmark and the CTA cannot both fit — the emblem alone
     still identifies the brand, and the CTA is the thing being paid for */
  .logo b{display:none}
  .logo{gap:0}
}

/* -- legible small headings --------------------------------------------
   The display face is a poster font: caps-only, heavy, tight. It carries
   h1/h2 at clamp() sizes. Below ~1.05rem it stops being read and starts
   being texture, so every smaller heading uses the body face instead,
   one step larger and in its authored sentence case. */
.tc h3,.step h4,.fq h4,.vs-col h3,.d-card h3,.c-card h3,.driver h4,.feat-row h4,
.ba-col h4,.h-card h3,.miss-card h3,.pl-stage h4,.play-name,.pname,
.ceo-name,.eng-card h3,.model h3,.cw-card h3,.mod h4,.pill-card h3{
  font-family:var(--f-body);font-weight:700;font-size:1.07rem;
  letter-spacing:.004em;line-height:1.32;text-transform:none}
/* column labels stay caps -- they are signposts, not sentences -- but the
   body face holds together at this size where the display face does not */
.dir-col h4{font-family:var(--f-body);font-weight:700;font-size:.84rem;
  letter-spacing:.1em}
/* short all-caps labels: same swap, size kept, tracking opened up */
.pl-cap,.hc-stat,.p-tag,.mq b,.hc-g-info b,.testi-who b,.t-who b,
.play-hold b,.logo-card b,.sc-count,.ci b,.p-vs,.qa-count,.qa-clean{
  font-family:var(--f-body);font-weight:600;letter-spacing:.07em}

/* the container was tuned for a 1280-1440 screen. On a 2000px monitor it
   used 57% of the width and body copy fell to 57 characters a line, which
   is under the readable range, not over it. So it steps up with the screen
   -- never to full width, which would push lines past 150 characters. */
@media (min-width:1400px){.wrap{max-width:1290px}}
@media (min-width:1800px){.wrap{max-width:1440px}html{font-size:18px}}
@media (min-width:2200px){.wrap{max-width:1560px}}


/* -- hero side panel ----------------------------------------------------
   The "what is this page" card that sits in the second hero cell. Reads as
   a report or log the service would actually produce, so the discipline is
   obvious before a word of body copy is read. Lifted out of the seven pages
   that each carried their own copy. */
.report{background:linear-gradient(165deg,#0e6347,#0a4d38);border:2px solid rgba(163,217,119,.25);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.rp-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:2px solid rgba(163,217,119,.15);background:rgba(0,0,0,.2)}
.rp-bar i{width:12px;height:12px;border-radius:50%}
.rr{background:#ff6b5e}
.ry{background:var(--gold)}
.rg{background:var(--leaf2)}
.rp-bar span{font-weight:600;font-size:.76rem;color:var(--muted);margin-left:6px}
.rp-body{padding:26px 26px 30px}
.rp-row{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;padding:7px 0;color:var(--muted)}
.rp-row b{color:#fff;font-weight:600;text-align:right}
.rp-ok{color:var(--leaf2);font-weight:600}
.rp-tags{margin-top:8px}
.rp-tag{display:inline-block;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf2);border:2px solid rgba(163,217,119,.3);padding:3px 9px;border-radius:999px;margin-right:6px;margin-top:6px}
.rp-repro{margin-top:14px;padding-top:14px;border-top:2px dashed rgba(163,217,119,.2);font-size:.78rem;color:var(--muted);line-height:1.8}
.rp-repro b{color:#fff}