/* ============================================================
   Release Assurance — "white & black sections" light preview
   Override layer loaded AFTER styles.css.

   Strategy: token-context theming.
   - :root is redefined to a LIGHT palette, so every component
     that reads the design tokens flips to light automatically.
   - A .dark utility re-declares the ORIGINAL dark tokens, so the
     same component CSS renders correctly on the black feature
     bands (hero, five-questions, quote band, beta offer, closing
     Dreamforce band, and the inline "screenshot" panels).
   This mirrors the /s3 rhythm: mostly white, punctuated by black.
   ============================================================ */

/* ---------- 1. LIGHT palette (default context) ---------- */
:root{
  --bg:#ffffff;
  --bg-soft:#f5f8fc;
  --panel:#ffffff;
  --panel-2:#f8fbff;
  --elev:#ffffff;

  --line:rgba(17,34,60,.10);
  --line-2:rgba(17,34,60,.15);
  --line-3:rgba(17,34,60,.24);

  --text:#3a485e;        /* body copy on light */
  --head:#0c1828;        /* headings + strong on light */
  --muted:#5d6b81;
  --faint:#8392a6;

  --acc:#10b981;
  --acc-bright:#0a9568;   /* darker green — readable on white */
  --acc-glow:#34d399;
  --acc-deep:#065f46;
  --acc-soft:rgba(16,185,129,.10);
  --acc-line:rgba(16,185,129,.26);

  --amber:#f59e0b;
  --amber-bright:#b45309;  /* darker amber — readable on white */
  --amber-soft:rgba(245,158,11,.12);
  --amber-line:rgba(245,158,11,.34);

  --sky:#0284c7;
  --sky-soft:rgba(2,132,199,.08);
  --sky-line:rgba(2,132,199,.24);

  --red:#dc2626;
  --red-soft:rgba(220,38,38,.10);
  --red-line:rgba(220,38,38,.26);

  --shadow:0 24px 60px rgba(17,34,60,.13);
  --shadow-sm:0 12px 30px rgba(17,34,60,.09);
  --glow:0 16px 34px rgba(10,149,104,.22);
}

/* ---------- 2. DARK token context (the black bands) ---------- */
.dark{
  --bg:#06090f;
  --bg-soft:#090d15;
  --panel:#0d121c;
  --panel-2:#111826;
  --elev:#16202f;

  --line:rgba(150,172,206,.10);
  --line-2:rgba(150,172,206,.20);
  --line-3:rgba(150,172,206,.30);

  --text:#eaf0f8;
  --head:#ffffff;
  --muted:#9aabc2;
  --faint:#647387;

  --acc-bright:#2fe3a6;
  --acc-glow:#7afcd0;
  --acc-soft:rgba(22,201,142,.12);
  --acc-line:rgba(47,227,166,.32);

  --amber-bright:#ffc56b;
  --amber-soft:rgba(255,167,38,.12);
  --amber-line:rgba(255,167,38,.34);

  --sky:#5fd2ff;
  --sky-soft:rgba(95,210,255,.10);
  --sky-line:rgba(95,210,255,.26);

  --red:#ff6b6b;

  --shadow:0 30px 70px rgba(0,0,0,.55);
  --shadow-sm:0 14px 34px rgba(0,0,0,.42);
  --glow:0 20px 56px rgba(10,143,99,.34);

  color:var(--text);
}

body{background:var(--bg);color:var(--text)}

/* ---------- 3. headings + strong text follow the context ---------- */
h1,h2,h3,h4{color:var(--head)}
.brand,.nav-burger,
.score,.score-foot,
.qc .qn,
.cost-line b,.cov-note b,.steps-note b,
.sec-list b,.fmeta .fn,
.brief-from .fn,.brief-subj,
.qa h4,.foot-col h4,
.why .w h4,.done .big,
.band .bq,
.strip .si b{color:var(--head)}
.nav-links a:hover,.btn-ghost:hover,.foot-col a:hover{color:var(--head)}
.fq p{color:var(--text)}
.done p{color:var(--muted)}

/* ---------- 4. light-context fixups ---------- */

/* hero needs an explicit dark base (it has no background of its own) */
.hero{background:var(--bg);padding-top:54px}

/* brand logo → official single-line lockup (per brand standards) */
.brand .ra-logo{height:26px;width:auto;display:block}
.foot-brand .brand .ra-logo{height:26px}

/* The risk nobody owns → 6 problem cards (ported from /s1) */
.riskgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media(max-width:900px){.riskgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.riskgrid{grid-template-columns:1fr}}
.riskcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;transition:transform .2s,border-color .2s}
.riskcard:hover{transform:translateY(-4px);border-color:var(--line-2)}
.riskcard .rhead{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.riskcard .ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center}
.riskcard .ic svg{width:20px;height:20px}
.riskcard h3{font-size:1.04rem;margin:0;color:var(--head)}
.riskcard p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.55}

/* #trust → dark band + "short version" card (ported from trust.html) */
#trust{background:radial-gradient(900px 520px at 50% -12%,rgba(22,201,142,.08),transparent 60%),#080d15}
.tldr-card{max-width:940px;margin:6px auto 0;background:#fff;border:1px solid #e6ebf2;border-radius:20px;padding:28px 34px;box-shadow:0 34px 80px rgba(0,0,0,.5)}
.tldr-card .tldr-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0a9568;margin-bottom:16px}
.tldr-card .tldr-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0;padding:0}
.tldr-card .tldr-list li{position:relative;padding-left:22px;font-size:.95rem;color:#3a485e;line-height:1.6}
.tldr-card .tldr-list li::before{content:'';position:absolute;left:3px;top:9px;width:7px;height:7px;border-radius:50%;background:#10b981}
.tldr-card .tldr-list strong{color:#0c1828;font-weight:700}
.tldr-card .tldr-list code{font-family:var(--mono);font-size:.85em;background:#eef2f7;color:#0c1828;padding:1px 6px;border-radius:5px}
@media(max-width:560px){.tldr-card{padding:22px 20px}}

/* Founder's note — white band between the two dark sections */
.founderquote{background:#fff}
.founderquote .wrap{max-width:920px;text-align:center}
.founderquote .eyebrow{justify-content:center;margin-bottom:30px}
.fquote{margin:0;position:relative;padding-top:10px}
.fquote::before{content:"\201C";position:absolute;top:-32px;left:50%;transform:translateX(-50%);font-family:Georgia,'Times New Roman',serif;font-size:5.5rem;line-height:1;color:rgba(16,185,129,.22)}
.fquote p{font-size:clamp(1.22rem,2.05vw,1.6rem);line-height:1.52;color:#1c2942;font-weight:500;letter-spacing:-.01em;margin:0 0 18px}
.fquote p:last-child{margin-bottom:0}
.fquote .acc{color:#0a9568;font-weight:650}
.fbyline{display:inline-flex;align-items:center;gap:14px;margin-top:38px;padding:9px 18px 9px 9px;border:1px solid var(--line);border-radius:100px;transition:border-color .18s,background .18s,transform .18s}
.fbyline:hover{border-color:var(--acc-line);background:#f5fbf8;transform:translateY(-1px)}
.fbyline .fav{flex:0 0 auto;width:50px;height:50px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#04231a;font-weight:800;font-size:1.3rem}
.fbyline .ftext{display:flex;flex-direction:column;text-align:left;gap:2px}
.fbyline .fnm{font-weight:750;color:#0c1828;font-size:1.02rem}
.fbyline .frole{font-size:.8rem;color:var(--muted)}
.fbyline .flinkedin{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:.82rem;font-weight:700;color:#0a66c2}
.fbyline .flinkedin svg{width:18px;height:18px;flex:0 0 auto}
@media(max-width:560px){.fbyline{flex-wrap:wrap;justify-content:center;padding:14px 18px}.fbyline .flinkedin{margin-left:0;width:100%;justify-content:center;margin-top:6px}}

/* The leadership lens → four questions (was five) */
.qgrid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.qgrid{grid-template-columns:1fr}}

/* ribbon → soft green band with dark-green text */
.ribbon{background:#e9f8f0;border-bottom:1px solid #c7ecdb;color:#155e45}
.ribbon b,.ribbon .rlink{color:#06694e}
.ribbon .rlink{border-bottom-color:#9fdcc4}
.ribbon .rlink:hover{color:#04231a}

/* nav: status lockup beside the Apply button — a live green dot + a stacked
   "Closed beta · open / Jul 1 – Sep 30" label so it reads as the beta window,
   not a free-floating "running" pill. The dot gently pulses to draw the eye. */
.nav-cta .beta-status{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border:1px solid rgba(16,185,129,.28);border-radius:11px;background:rgba(16,185,129,.07);white-space:nowrap}
.nav-cta .beta-status .bs-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#10b981;flex:0 0 auto}
.nav-cta .beta-status .bs-dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(16,185,129,.5);animation:bsPulse 2.4s ease-out infinite}
@keyframes bsPulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.5);opacity:0}}
.nav-cta .beta-status .bs-text{display:inline-flex;flex-direction:column;gap:2px;line-height:1.05}
.nav-cta .beta-status .bs-label{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#0a7857}
.nav-cta .beta-status .bs-dates{font-family:var(--mono);font-size:11.5px;font-weight:700;color:#0f172a;letter-spacing:.02em}
.apply-pulse{position:relative}
.apply-pulse::after{content:'';position:absolute;inset:0;border-radius:100px;pointer-events:none;animation:applyPulse 2.4s ease-out infinite}
@keyframes applyPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 13px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@media(max-width:1000px){.nav-cta .beta-status{display:none}}
@media(prefers-reduced-motion:reduce){.apply-pulse::after,.nav-cta .beta-status .bs-dot::after{animation:none}}

/* nav → translucent white */
.nav{background:rgba(255,255,255,.82)}
.nav.scrolled{background:rgba(255,255,255,.95);border-color:var(--line)}

/* audience chips get a clean white fill */
.aud .who{background:#fff}

/* email briefing panel reads on white */
.brief-head{background:#f6fafe}
.evtag{background:#f1f5f9}

/* form fields → white with ink text */
.form input,.form textarea,.form select{
  background:#fff;color:var(--head);border:1px solid var(--line-2);
}
.form input:focus,.form textarea:focus,.form select:focus{
  border-color:var(--acc);background:#fff;box-shadow:0 0 0 4px rgba(16,185,129,.12);
}

/* outline buttons read on white, stay translucent on dark bands */
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--head)}
.btn-ghost:hover{background:#f5f8fc;border-color:var(--acc-line)}
.dark .btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line-2);color:var(--text)}
.dark .btn-ghost:hover{background:rgba(47,227,166,.06);border-color:var(--acc-line);color:#fff}

/* solid white button for the dark closing band */
.btn-muted{background:#fff;color:#0c1828;border-color:transparent;font-weight:700}
.btn-muted:hover{background:#eef2f7;transform:translateY(-2px)}

/* ---------- /s3-style contained beta panel (#beta) ---------- */
.offer .beta-panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
  gap:46px;padding:46px;border-radius:var(--r-xl);
  background:
    radial-gradient(circle at 8% 0,rgba(37,99,235,.28),transparent 38%),
    radial-gradient(circle at 92% 16%,rgba(22,201,142,.26),transparent 36%),
    #0b1626;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.offer .beta-copy h2{margin:18px 0 14px;font-size:clamp(2rem,3.7vw,2.9rem)}
.offer .beta-copy p{color:#d6deeb;font-size:1.06rem;max-width:60ch}
.offer .beta-copy .facts{justify-content:flex-start;margin:22px 0 0}
.offer .beta-copy .btn{margin-top:24px}
.offer .beta-stack{display:grid;gap:14px;align-content:center}
.offer .beta-stack article{
  padding:22px 24px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.offer .beta-stack b{
  display:block;margin-bottom:13px;color:#fff;
  font-family:var(--mono);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.offer .beta-stack ul{
  margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px;
  color:#cdd8e8;font-size:.92rem;line-height:1.5;
}
.offer .beta-stack .bnote{margin:13px 0 0;font-size:.86rem;color:#aeb9cb;line-height:1.55;text-transform:none;letter-spacing:0}
@media(max-width:860px){
  .offer .beta-panel{grid-template-columns:1fr;gap:28px;padding:28px}
}

/* ---------- 5. closing "Meet at Dreamforce" band ---------- */
.meet{background:#0e1726;padding:64px 0}
.meet .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.meet .eyebrow{margin-bottom:14px}
.meet h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:10px}
.meet p{color:var(--muted);max-width:62ch;font-size:1.05rem;margin:0}
.meet .mtext{flex:1 1 420px}
.meet .mbtn{flex:0 0 auto}
@media(max-width:720px){.meet .wrap{flex-direction:column;align-items:flex-start}}

/* ---------- /s1 reliability dashboard embed (in #proof) ---------- */
.dashboard-embed{
  margin:0;background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid #e2e8f0;box-shadow:0 20px 50px rgba(15,32,56,.10);
}
.dash-topbar{display:flex;align-items:center;padding:11px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.dash-dots{display:flex;gap:6px}
.dash-dot{width:10px;height:10px;border-radius:50%}
.dash-dot.r{background:#ef4444}.dash-dot.y{background:#f59e0b}.dash-dot.g{background:#22c55e}
.dash-url{margin-left:14px;background:#f1f5f9;border-radius:6px;padding:4px 12px;font-size:.75rem;color:#64748b;flex:1}
.rel-dashboard{padding:20px}
.rel-top{display:grid;grid-template-columns:1fr;gap:16px}
.rel-score-card{background:#fff;border-radius:16px;padding:24px;border:1px solid #e2e8f0}
.rel-score-label{font-size:.8rem;font-weight:700;color:#0a1628;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.rel-score-num{font-size:3.4rem;font-weight:900;color:#0a1628;line-height:1}
.rel-score-num small{font-size:1.9rem;font-weight:700}
.rel-score-sub{font-size:.9rem;color:#64748b;margin:10px 0 18px}
.rel-score-bar{height:12px;border-radius:12px;background:linear-gradient(90deg,#ef4444 0%,#f59e0b 25%,#eab308 50%,#22c55e 75%,#10b981 100%);position:relative}
.rel-score-bar::after{content:'';position:absolute;right:0;top:-4px;width:20px;height:20px;border-radius:50%;background:#10b981;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.rel-bar-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:.7rem;color:#94a3b8}
.rel-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rel-kpi{background:#fff;border-radius:14px;padding:16px;border:1px solid #e2e8f0}
.rel-kpi-label{font-size:.72rem;font-weight:700;color:#0a1628;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.rel-kpi-num{font-size:1.9rem;font-weight:800;color:#0a1628}
.rel-kpi-num small{font-size:1.05rem;font-weight:500;color:#94a3b8}
.rel-kpi-sub{font-size:.78rem;color:#64748b;margin-bottom:10px}
.rel-kpi-chart{height:38px;display:flex;align-items:flex-end;gap:3px}
.rel-kpi-chart .bar{flex:1;border-radius:2px;min-width:4px}
@media(max-width:520px){.rel-kpi-grid{grid-template-columns:1fr}}

/* ============ HERO: Vitals ECG (ported from /vitals VerificationsPage) ============ */
/* dark glass instrument frame so it settles into the hero (the salmon ECG
   screen + pulse stay; only the white surround melts to dark). */
#vitals-hero{align-self:start;margin-top:14px}
.vpanel{background:linear-gradient(180deg,#0f1a28,#0a1019);border:1px solid rgba(150,172,206,.16);border-radius:20px;overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.5),0 16px 58px rgba(10,143,99,.20)}
.vbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(150,172,206,.10);background:rgba(255,255,255,.015)}
.vbar .vorg{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#9aabc2;min-width:0}
.vbar .vorg .mlabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#647387}
.vbar .vlive{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7afcd0;background:rgba(22,201,142,.12);border:1px solid rgba(47,227,166,.30);border-radius:100px;padding:4px 9px}
.vbar .vlive .live-dot{background:#2fe3a6;box-shadow:none}
/* salmon ECG screen, recessed into the frame via an inset edge shadow */
.vstrip{position:relative;background:#fdf6f1;box-shadow:inset 0 17px 28px -17px rgba(6,11,18,.78),inset 0 -17px 28px -17px rgba(6,11,18,.78)}
.vstrip::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(220,38,38,.12) 1px,transparent 1px),linear-gradient(to right,rgba(220,38,38,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(220,38,38,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(220,38,38,.06) 1px,transparent 1px);background-size:46px 100%,9px 100%,100% 46px,100% 9px}
.vstrip svg{display:block;width:100%;height:176px;position:relative}
.vcards{padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:transparent;border-top:1px solid rgba(150,172,206,.10);min-height:74px}
.vcard{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;border:1px solid rgba(34,197,94,.22);background:rgba(22,165,90,.10);opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.vcard.in{opacity:1;transform:none}
.vcard.bad{border-color:rgba(239,68,68,.30);background:rgba(220,38,38,.10)}
.vcard .vico{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;background:#16a34a;box-shadow:0 4px 12px rgba(22,163,74,.4)}
.vcard.bad .vico{background:#dc2626;box-shadow:0 4px 12px rgba(220,38,38,.4)}
.vcard .vtx{display:flex;flex-direction:column;gap:3px;min-width:0;margin-right:10px}
.vcard .vtt{font-weight:700;font-size:.93rem;color:#eaf0f8;line-height:1.2}
.vcard.bad .vtt{color:#ff9aa8}
.vcard .vts{font-family:var(--mono);font-size:.69rem;color:#7e8aa0;margin-top:3px}
.vcard .vright{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7afcd0}
.vcard.bad .vright{color:#ff9aa8}

/* ============ PROOF: Suite RunGraph (ported from suites/RunGraph) ============ */
.ragraph{--ink:#0b1220;--ink-2:#273346;--muted:#647286;--muted-2:#98a4b5;--green-2:#22a565;--green-3:#46c98a;--green-soft:#e9f6ef;--red:#c8243c;--red-2:#e23b54;--red-soft:#fdeaed;--grey:#cdd6e2;--grey-2:#aab6c6}
.ragraph-canvas{position:relative;padding:10px 0 16px;overflow-x:auto;background:#fff radial-gradient(circle at 1px 1px,rgba(148,163,184,.16) 1px,transparent 0);background-size:30px 30px;border:1px solid #e6ebf2;border-radius:16px;box-shadow:0 20px 50px rgba(15,32,56,.10)}
.ragraph svg{display:block;margin:0 auto}
.ragraph .playhead{stroke:var(--green-3);stroke-width:2;opacity:0}
.ragraph .playhead.on{opacity:.9}
.ragraph .phGlow{fill:url(#ra-phg);opacity:0}
.ragraph .phGlow.on{opacity:1}
.ragraph .e{fill:none;stroke:var(--grey);stroke-width:2;transition:stroke .4s}
.ragraph .e.pass{stroke:var(--green-2)}
.ragraph .e.fail{stroke:var(--red-2)}
.ragraph .e.live{stroke-dasharray:7 9;animation:raflow .7s linear infinite}
.ragraph .e.live.pass{stroke:var(--green-3)}
@keyframes raflow{to{stroke-dashoffset:-16}}
.ragraph .ncap{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;fill:var(--muted-2);text-anchor:middle}
.ragraph .ng{opacity:.5;transition:opacity .3s}
.ragraph .ng.shown{opacity:1}
.ragraph .chip{fill:#fff;stroke:var(--grey-2);stroke-width:1.6;transition:fill .3s,stroke .3s;transform-box:fill-box;transform-origin:center}
.ragraph .cdot{fill:var(--grey-2);transition:fill .3s}
.ragraph .cname{font-family:var(--mono);font-size:11px;fill:var(--ink-2);transition:fill .3s}
.ragraph .ng.pass .chip{stroke:var(--green-2)}
.ragraph .ng.pass.shown .chip{fill:var(--green-soft)}
.ragraph .ng.pass .cdot{fill:var(--green-2)}
.ragraph .ng.fail .chip{stroke:var(--red);fill:var(--red-soft)}
.ragraph .ng.fail .cdot{fill:var(--red-2)}
.ragraph .ng.fail .cname{fill:var(--red);font-weight:700}
.ragraph .ng.stuck .chip{stroke:var(--grey-2);stroke-dasharray:4 4;fill:#fafbfd}
.ragraph .ng.stuck .cdot{fill:var(--grey)}
.ragraph .ng.stuck .cname{fill:var(--muted-2)}
.ragraph .ng.shown .chip{animation:rapop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes rapop{0%{transform:scale(.7)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.ragraph .ng.fail.boom .chip{animation:rashake .5s}
@keyframes rashake{10%,90%{transform:translateX(-1.6px)}30%,70%{transform:translateX(2.6px)}50%{transform:translateX(-2.6px)}}