/* gc-dossier.css — shared "intelligence dossier" design system, extracted from the v4 report/
   grant-page mockups: dev-assets/monetization-2026-07-20/v4-report.html + v4-grant-page.html.
   Both mockups independently converged on the same visual language for paid-content pages
   (the report + the grant-page Win Brief) — this file is that language, made reusable.

   NAMESPACING: every class here is prefixed `gcd-` (GrantCompass Dossier) so it can be dropped
   onto any page without colliding with existing site CSS (gc-report.css, us-hub.css, etc). The
   v4 design tokens are scoped under a `.gcd` root class instead of `:root` for the same reason —
   wrap the page/section that uses this system in `<div class="gcd">…</div>` (or put the class on
   a page's main content wrapper) and every component below resolves its custom properties from
   there. The custom-property NAMES are kept identical to v4 (--cream, --ink, --accent, etc.) so
   v4 mockup markup ports over with no find-and-replace.

   PRODUCTION CHANGE — redaction bars: in the v4 mockups the "locked" Win Brief rows hide REAL
   copy with a CSS trick (`color:transparent`/`filter:blur()`) — the true text sits in the DOM,
   just visually masked, which a curious user can select-all/inspect to read. That is fine for a
   local design-review mockup but wrong for production: the whole point of a $9/$29 paywall is
   that gated copy never reaches an unpaid visitor's browser. So `.gcd-redact` here is NOT a mask
   over real text — it is a fixed-width empty ink strip (`<span class="gcd-redact" style="--w:
   72%"></span>`, no text node inside at all). The server simply never sends the locked fields;
   this class only exists to make "there is intelligence here, gate it" visually legible while
   the DOM contains nothing to unmask.

   MOTION: every `transition`/`animation` declaration in this file lives inside a
   `@media (prefers-reduced-motion: no-preference)` block. Each component's base (un-media-
   queried) rules render its FINAL state — fully legible and usable with zero motion — and the
   motion-permitted media block is what adds the hidden/initial state plus the transition or
   animation that reveals it. So a `prefers-reduced-motion: reduce` visitor never receives an
   animated property at all, rather than receiving one and having it neutralized.
*/

/* ============================================================
   1. DESIGN TOKENS — v4's :root block, scoped to .gcd (union of
      the report + grant-page token sets; same property names).
   ============================================================ */
.gcd{
  --cream:#FAF7F2; --paper:#FFFDFB; --ink:#1C1917; --ink-soft:#4a443c;
  --muted:#1C191799; --faint:#1C191766; --line:#1C19171f; --line-soft:#1C191712;
  --accent:#C4532B; --accent-deep:#9A3F1F; --accent-tint:#C4532B14;
  --forest:#1F7A4D; --forest-deep:#1f4d39; --forest-tint:#1F7A4D14; --forest-tint2:#ecf3ef;
  --amber-tint:#f4e7c4; --amber-ink:#8a5a14;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px #1c191706, 0 12px 32px -20px #1c191738;
  --shadow-lg:0 2px 6px #1c19170a, 0 32px 64px -32px #1c191759;
  --ease:cubic-bezier(.22,1,.36,1);
  color:var(--ink);
}

/* ============================================================
   2. PAPER-GRAIN OVERLAY — opt-in noise texture (v4 body::after).
      `.gcd-grain` = absolutely-positioned overlay; add to a
      `position:relative` container. `.gcd-grain-fixed` = the v4
      body-level variant (position:fixed, for wrapping the whole
      viewport). Pure static texture — no motion, nothing to gate
      behind the reduced-motion media query.
   ============================================================ */
.gcd-grain{position:relative}
.gcd-grain::after,
.gcd-grain-fixed::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gcd-grain-fixed{position:relative}
.gcd-grain-fixed::after{position:fixed;z-index:90}

/* ============================================================
   3. POINTER-GLOW — opt-in radial highlight for dark dossier/
      pricing cards (v4 .wb::after / .pricecard::after). Set
      `--gcd-mx`/`--gcd-my` via a `pointermove` listener on the
      host element for a mouse-follow effect; without JS it just
      sits centered, which is a harmless, static default.
   ============================================================ */
.gcd-glow{position:relative; overflow:hidden}
.gcd-glow::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--gcd-mx,50%) var(--gcd-my,50%), rgba(240,169,136,.09), transparent 65%);
  opacity:0;
}
.gcd-glow:hover::after,.gcd-glow:focus-within::after,.gcd-glow.is-active::after{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .gcd-glow::after{transition:opacity .4s}
}

/* ============================================================
   4. REDACTION BAR — the gated-content motif. `.gcd-redact` is a
      fixed-width ink strip with NO text content (see production-
      change note at the top of this file); width comes from the
      inline custom property `--w` (e.g. `style="--w:72%"`).
      `.gcd-redact-tail` = optional trailing caption ("— tracked
      monthly"). `.gcd-lock-icon` = optional trailing lock glyph.
      Group several bars inline to suggest a longer redacted
      phrase: `<span class="gcd-redact" style="--w:35%">
      </span><span class="gcd-redact" style="--w:22%"></span>`.
   ============================================================ */
/* The bar must read as deliberately struck-out ink, not as content that failed to load.
   The original #463c30->#262019 fill sat only ~1.3:1 against the card's brown gradient, so
   on the live page the rows looked like broken/skeleton UI. This is near-black with a hair
   of warm edge light — unmistakably a redaction on a document. */
.gcd-redact{
  display:inline-block; height:.9em; vertical-align:-.1em; border-radius:2px;
  width:var(--w,40%);
  background:linear-gradient(180deg,#171310,#0d0b09);
  box-shadow:inset 0 1px 0 rgba(250,247,242,.07), 0 1px 2px rgba(0,0,0,.35);
  transform:scaleX(1); transform-origin:left center;
}
.gcd-redact + .gcd-redact{margin-left:.3em}
.gcd-redact-tail{color:#FAF7F299; font-size:.84rem; margin-left:.35rem}
.gcd-lock-icon{margin-left:.45rem; opacity:.8; font-size:.78em; user-select:none}

/* Optional reveal state: if a page ever swaps real content in client-side (e.g. immediately
   after a checkout success, without a full reload) rather than waiting for the next server
   render, toggling `.is-revealed` collapses the bar out of the way of the real value sitting
   underneath it. Unused in the default "server never sent the field" flow. */
.gcd-redact.is-revealed{transform:scaleX(0); transform-origin:right center}
@media (prefers-reduced-motion:no-preference){
  .gcd-redact{transition:transform .5s var(--ease,cubic-bezier(.22,1,.36,1)); transition-delay:calc(var(--i,0)*65ms)}
}

/* ============================================================
   5. TOOLTIP GLOSSARY — the trigger + the one shared floating
      card. Pair with site/js/gc-glossary.js, which mounts
      `.gcd-tooltip` once and wires `[data-tt]` triggers. Put
      `.gcd-term` on the trigger element itself:
      `<span class="gcd-term" data-tt="ev" tabindex="0">$/hr</span>`.
      `.gcd-term--dark` = the light-on-dark variant for triggers
      that sit inside a `.gcd-glow`/dark dossier card.
   ============================================================ */
.gcd-term{
  border-bottom:1px dashed #1C191755; cursor:help; text-decoration:none;
}
.gcd-term:hover,.gcd-term:focus-visible{border-bottom-color:var(--accent,#C4532B); color:var(--accent-deep,#9A3F1F); outline:none}
.gcd-term--dark{border-bottom-color:#FAF7F255}
.gcd-term--dark:hover,.gcd-term--dark:focus-visible{border-bottom-color:#f0a988; color:#f0c9b0}
@media (prefers-reduced-motion:no-preference){
  .gcd-term{transition:border-color .15s, color .15s}
}

.gcd-tooltip{
  position:fixed; z-index:9999; width:250px; pointer-events:none;
  background:linear-gradient(170deg,#241f19,#1C1917); color:var(--cream,#FAF7F2);
  border:1px solid rgba(250,247,242,.14); border-radius:13px;
  box-shadow:0 18px 40px -14px rgba(28,25,23,.55);
  padding:.75rem .85rem;
  display:none;
}
.gcd-tooltip.is-visible{display:block}
.gcd-tooltip-title{
  font-family:var(--mono,monospace); font-size:.6rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#f0a988; margin-bottom:.3rem;
}
.gcd-tooltip-body{font-size:.78rem; line-height:1.5; color:#FAF7F2d0}
.gcd-tooltip-body b{color:#fff}
.gcd-tooltip::after{
  content:""; position:absolute; left:var(--gcd-tt-arrow-x,50%); transform:translateX(-50%);
  border:6px solid transparent;
}
.gcd-tooltip.above::after{top:100%; border-top-color:#1e1a15}
.gcd-tooltip.below::after{bottom:100%; border-bottom-color:#241f19}

@media (prefers-reduced-motion:no-preference){
  .gcd-tooltip{
    display:block; opacity:0; transform:translateY(5px) scale(.98);
    transition:opacity .18s var(--ease,cubic-bezier(.22,1,.36,1)), transform .18s var(--ease,cubic-bezier(.22,1,.36,1));
  }
  .gcd-tooltip.is-visible{opacity:1; transform:none; pointer-events:auto}
}

/* ============================================================
   6. REVEAL / STAGGER ANIMATION CLASSES
      `.gcd-reveal` — scroll-triggered fade+rise; toggle `.is-in`
      from an IntersectionObserver in page JS (this file has no
      JS of its own for it — the pattern is deliberately generic).
      `.gcd-anim` — hero/above-the-fold load-in stagger, keyed by
      the inline custom property `--d` (delay index; ms = --d*90).
      `.gcd-rise` — list/row entrance stagger, keyed by `--i`
      (ms = --i*45); pairs well with redaction-bar rows appearing
      one after another down a Win Brief.
   ============================================================ */
.gcd-reveal{opacity:1; transform:none}
.gcd-anim{opacity:1; transform:none}
.gcd-rise{opacity:1; transform:none}

@media (prefers-reduced-motion:no-preference){
  .gcd-reveal{
    opacity:0; transform:translateY(18px);
    transition:opacity .6s var(--ease,cubic-bezier(.22,1,.36,1)), transform .6s var(--ease,cubic-bezier(.22,1,.36,1));
  }
  .gcd-reveal.is-in{opacity:1; transform:none}

  .gcd-anim{
    opacity:0; transform:translateY(18px);
    animation:gcd-herorise .7s var(--ease,cubic-bezier(.22,1,.36,1)) forwards;
    animation-delay:calc(var(--d,0)*90ms);
  }
  @keyframes gcd-herorise{to{opacity:1; transform:none}}

  .gcd-rise{
    opacity:0; transform:translateY(14px);
    animation:gcd-rise .55s var(--ease,cubic-bezier(.22,1,.36,1)) both;
    animation-delay:calc(var(--i,0)*45ms);
  }
  @keyframes gcd-rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
}

/* ============================================================
   7. WIN BRIEF WIDGET — the grant-page dossier card, its sticky
      scroll-spy (#gc-spy) and deadline chip (#gc-countdown),
      driven by site/js/gc-win-brief.js. This is the STRUCTURAL
      shell the generic gcd- utilities above don't cover; it
      reuses the tokens (put `.gcd` on the widget root), the
      redaction/term/glow classes, and the same reduced-motion
      discipline (base rules = final legible state; motion only
      under `prefers-reduced-motion: no-preference`). Every token
      reference carries a literal fallback so the spy/countdown —
      which sit outside the dark card, possibly outside a `.gcd`
      wrapper — still render correctly. Namespaced `.gcwb`.
   ============================================================ */
.gcwb{
  position:relative; margin:2.4rem 0;
  background:linear-gradient(165deg,#211c17,#2b2419 58%,#1C1917);
  color:var(--cream,#FAF7F2); border-radius:22px;
  padding:1.8rem 1.6rem 1.7rem;
  box-shadow:0 26px 54px -22px rgba(28,25,23,.5), 0 2px 10px rgba(28,25,23,.16);
  border:1px solid rgba(250,247,242,.1);
  overflow:hidden;
}
.gcwb.is-unlocked{
  box-shadow:0 26px 54px -20px rgba(196,83,43,.34), 0 0 0 1px rgba(240,169,136,.22), 0 2px 10px rgba(28,25,23,.16);
}
.gcwb::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 88% -10%, rgba(196,83,43,.3) 0%, transparent 46%),
    radial-gradient(circle at -10% 110%, rgba(31,122,77,.2) 0%, transparent 42%);
}
.gcwb > *{position:relative; z-index:1}

/* header */
.gcwb__head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.4rem}
.gcwb__eyebrow{
  font-family:var(--mono,ui-monospace,monospace); font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#f0a988; margin-bottom:.5rem; display:block;
}
.gcwb__title{
  font-family:var(--serif,Georgia,serif); font-size:1.62rem; font-weight:560;
  color:var(--cream,#FAF7F2); letter-spacing:-.018em; line-height:1.12; margin:0;
  text-wrap:balance;
}
.gcwb__sub{
  font-size:.86rem; color:#FAF7F2a6; margin:.45rem 0 0; max-width:52ch; line-height:1.6;
  text-wrap:pretty;
}
.gcwb__chip{
  flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono,ui-monospace,monospace); font-size:.6rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:.4rem .7rem; border-radius:99px; white-space:nowrap;
}
.gcwb__chip--locked{color:#FAF7F299; border:1px solid rgba(250,247,242,.22)}
.gcwb__chip--open{background:rgba(216,230,223,.14); color:#bfe2ce; border:1px solid rgba(216,230,223,.3)}

/* PROOF STRIP — the locked card's credibility unit. Hard counts, set in the display
   serif at a size that reads as evidence rather than decoration, over mono captions.
   Hairline dividers instead of boxes so it stays part of the document, not a widget. */
.gcwb__proof{
  display:flex; flex-wrap:wrap; gap:1.1rem 0; margin-top:1.45rem;
  padding:1.05rem 1.35rem; border-radius:12px;
  background:rgba(250,247,242,.045); border:1px solid rgba(250,247,242,.09);
}
/* Items share the width evenly so the strip reads as one instrument panel rather than
   three left-huddled labels with a void on the right. */
.gcwb__proof-item{display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1 1 8.5rem}
.gcwb__proof-item + .gcwb__proof-item{
  padding-left:1.6rem; border-left:1px solid rgba(250,247,242,.13);
}
.gcwb__proof-item b{
  font-family:var(--serif,Georgia,serif); font-size:1.6rem; font-weight:560; line-height:1;
  color:#f7d9c6; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.gcwb__proof-item span{
  font-family:var(--mono,ui-monospace,monospace); font-size:.6rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:#FAF7F294; line-height:1.45;
}

/* rows */
.gcwb__rows{margin-top:1.5rem; border-top:1px solid rgba(250,247,242,.12)}
.gcwb-row{display:flex; gap:1.1rem; padding:.82rem 0; border-bottom:1px solid rgba(250,247,242,.09)}
.gcwb-row:last-child{border-bottom:0}
.gcwb-row__label{
  width:150px; flex-shrink:0; font-family:var(--mono,ui-monospace,monospace); font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:#FAF7F2a3; padding-top:.25rem; line-height:1.5;
}
.gcwb-row__val{
  flex:1; min-width:0; font-size:.9rem; line-height:1.6; color:#f4efe6;
  display:flex; flex-wrap:wrap; align-items:center; overflow-wrap:anywhere;
}
/* Locked rows stack the redaction line above its promise, so the promise reads as a
   sentence rather than as a caption trailing off the end of the bars. */
.gcwb-row__val--locked{flex-direction:column; align-items:flex-start; gap:.4rem}
.gcwb-row__bars{display:block; line-height:1}
.gcwb-row__val--locked .gcd-redact-tail{margin-left:0; font-size:.88rem; color:#FAF7F2c4; line-height:1.5}
.gcwb-redact-line{width:100%; display:flex; flex-wrap:wrap; align-items:center}
.gcwb-val{width:100%}
.gcwb-val b{color:#fff; font-weight:700}

/* offer / footer states */
.gcwb__foot{margin-top:.35rem; padding-top:1.5rem; border-top:1px solid rgba(250,247,242,.14)}
.gcwb__offer{display:flex; flex-direction:column; align-items:flex-start; gap:.9rem}
/* Price anchor — sets the $9 against the award on the table before the button is read. */
.gcwb__anchor{
  margin:0; font-family:var(--serif,Georgia,serif); font-size:1.14rem; line-height:1.45;
  color:#f4efe6; letter-spacing:-.01em; max-width:46ch; text-wrap:balance;
}
.gcwb__anchor b{color:#fff; font-weight:600}
.gcwb-buy-btn{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--cream,#FAF7F2); color:var(--ink,#1C1917); font-family:var(--sans,system-ui,sans-serif);
  font-weight:800; font-size:1rem; padding:.95rem 1.55rem; border-radius:10px;
  border:none; cursor:pointer; box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
}
.gcwb-buy-btn__price{
  font-weight:800; font-size:.94em; color:var(--accent-deep,#9A3F1F);
  padding-left:.7rem; border-left:1px solid #1C191722;
}
.gcwb-buy-btn small{font-weight:700; color:var(--accent-deep,#9A3F1F); font-size:.76em}
.gcwb-buy-btn:disabled{opacity:.72; cursor:default}
.gcwb-buy-btn:focus-visible{outline:2px solid #f0a988; outline-offset:3px}
/* Risk reversal — the three objections that stop a $9 impulse buy from an unfamiliar brand. */
.gcwb__trust{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  gap:.3rem .85rem; font-size:.78rem; color:#FAF7F2a8; line-height:1.5;
}
.gcwb__trust li{display:flex; align-items:center; gap:.4rem}
.gcwb__trust li::before{
  content:"✓"; color:#8fcfa8; font-weight:800; font-size:.85em;
}
.gcwb__upsell{
  font-size:.82rem; color:#FAF7F2ab; max-width:52ch; line-height:1.6;
  margin:1.25rem 0 0; padding-top:1.05rem; border-top:1px dashed rgba(250,247,242,.16);
}
.gcwb__upsell b{color:#f0c9b0; font-weight:700}
.gcwb__upsell a{color:#f0c9b0; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(240,169,136,.4); white-space:nowrap}
.gcwb__note{font-size:.86rem; color:#FAF7F299; line-height:1.6; margin:0}
.gcwb__note--research{color:#FAF7F2aa}
.gcwb__finalizing{display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:#f0c9b0}
.gcwb-dot{width:8px; height:8px; border-radius:50%; background:#f0a988; display:inline-block}

/* unlocked ribbon + Pro line */
.gcwb__ribbon{
  background:linear-gradient(90deg, rgba(196,83,43,.24), rgba(196,83,43,.08));
  border:1px solid rgba(240,169,136,.36); border-radius:12px;
  padding:.75rem 1.05rem; font-size:.86rem; font-weight:600; color:#ffe0cf;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.gcwb__ribbon-star{color:#f0a988}
.gcwb__ribbon a{color:#ffe9dd; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(240,169,136,.5); white-space:nowrap}
.gcwb__pro{
  margin-top:1rem; font-size:.79rem; color:#FAF7F280;
  padding-top:.9rem; border-top:1px dashed rgba(250,247,242,.16); line-height:1.55;
}
.gcwb__pro b{color:#FAF7F2c9}

@media (max-width:560px){
  .gcwb__head{flex-direction:column}
  .gcwb__chip{align-self:flex-start}
  .gcwb-row{flex-direction:column; gap:.3rem}
  .gcwb-row__label{width:auto}

  /* The 3-up proof strip wraps 2+1 at this width, which stranded the third item's
     vertical divider mid-card as a floating line. Below 560px each proof point
     becomes a full-width row — number left, caption right — separated by hairlines. */
  .gcwb__proof{flex-direction:column; gap:0; padding:.35rem 1rem}
  .gcwb__proof-item{
    flex:1 1 auto; flex-direction:row; align-items:baseline; gap:.7rem;
    padding:.6rem 0; width:100%;
  }
  .gcwb__proof-item + .gcwb__proof-item{
    padding-left:0; border-left:0; border-top:1px solid rgba(250,247,242,.13);
  }
  .gcwb__proof-item b{font-size:1.35rem; min-width:2.4rem; flex:none}
  .gcwb__proof-item span{font-size:.58rem; line-height:1.4}

  /* Full-bleed primary action — a 248px button in a 358px card reads as optional. */
  .gcwb-buy-btn{width:100%; justify-content:center}
}
@media (max-width:480px){
  .gcwb{padding:1.4rem 1.15rem}
}

/* Deadline chip — sits in the light hero (outside the dark card). */
.gcwb-countdown{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--mono,ui-monospace,monospace); font-size:.62rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:.3rem .65rem; border-radius:99px;
  background:var(--accent-tint,#C4532B14); color:var(--accent-deep,#9A3F1F);
}
.gcwb-countdown.is-hot{background:var(--accent,#C4532B); color:#fff}
.gcwb-countdown b{font-weight:800}

/* Sticky scroll-spy nav (#gc-spy) — light, outside the dark card. */
#gc-spy{
  position:sticky; top:0; z-index:80;
  background:#faf7f2e8; backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--line-soft,#1C191712);
}
#gc-spy .gcwb-spy__inner{
  max-width:720px; margin:0 auto; padding:0 1.2rem;
  display:flex; gap:.15rem; overflow-x:auto; scrollbar-width:none;
}
#gc-spy .gcwb-spy__inner::-webkit-scrollbar{display:none}
#gc-spy a{
  position:relative; flex:none; font-size:.8rem; font-weight:600; color:var(--faint,#1C191766);
  text-decoration:none; padding:.75rem .7rem .65rem; white-space:nowrap;
}
#gc-spy a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:-1px; height:2px;
  background:var(--accent,#C4532B); border-radius:2px; transform:scaleX(0); transform-origin:left;
}
#gc-spy a:hover{color:var(--ink,#1C1917)}
#gc-spy a.is-active{color:var(--accent-deep,#9A3F1F)}
#gc-spy a.is-active::after{transform:scaleX(1)}
#gc-spy a.gcwb-spy__buy{color:var(--accent,#C4532B); font-weight:700}

@media (prefers-reduced-motion:no-preference){
  /* staggered redaction→content reveal on unlock */
  .gcwb-val{
    opacity:0; transform:translateY(5px);
    transition:opacity .45s var(--ease,cubic-bezier(.22,1,.36,1)), transform .45s var(--ease,cubic-bezier(.22,1,.36,1));
    transition-delay:calc(var(--i,0)*65ms + 140ms);
  }
  .gcwb-val.is-in{opacity:1; transform:none}
  .gcwb-buy-btn{transition:transform .15s, background .15s}
  .gcwb-buy-btn:hover:not(:disabled){transform:translateY(-1px); background:#fff}
  .gcwb-dot{animation:gcwb-pulse 1s ease-in-out infinite}
  @keyframes gcwb-pulse{0%,100%{opacity:.3}50%{opacity:1}}
  #gc-spy a{transition:color .2s}
  #gc-spy a::after{transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1))}
}