/* ============================================================================
   playbook-unlock.css — $19 one-time Playbook Unlock UI
   ============================================================================
   Phase 1 of the FIND/DECIDE/APPLY pricing reframe (Apr 20 2026).
   Spec: docs/superpowers/specs/2026-04-20-playbook-unlock-spec.md

   Scope:
     1. .gp-lock-note--dual       — Enhanced two-CTA lock note
     2. .gp-unlock-link--primary  — lead offer button (post-Q1-flip 2026-07-02: Premium $39/mo)
     3. .gp-unlock-link--secondary — anchor offer ghost link (post-Q1-flip: $19 one-time Playbook)
     4. .gp-unlock-link--pulse    — post-auth attention-grabber animation
     5. .gp-unlock-toast          — success toast on return from Stripe
     6. .gp-upsell-banner         — multi-unlock subscription upsell

   Uses CSS custom properties from grant-page.css (:root): --gp-forest,
   --gp-sienna, --gp-ink, --gp-cream-warm, --gp-r, --gp-sp-*, etc.

   Integration: include AFTER grant-page.css in HTML load order.
============================================================================ */

/* ── 1. Dual-CTA lock note — upgrade of the existing .gp-lock-note ─────── */

/* The dual variant is visually richer and horizontally laid out on desktop,
   vertically stacked on mobile. Overrides the base .gp-lock-note (which is
   a single-line compact note). */
.gp-lock-note--dual {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 18px;
  font-family: var(--gp-sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gp-ink-2, #57534E);
  background: var(--gp-forest-04, rgba(45, 106, 79, 0.04));
  border: 1px solid rgba(45, 106, 79, 0.12);
  border-radius: var(--gp-r, 8px);
}

.gp-lock-note--dual .gp-lock-note__text {
  flex: 1 1 280px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gp-ink-2, #57534E);
}

.gp-lock-note--dual .gp-lock-note__icon {
  flex-shrink: 0;
  /* Sienna — matches the primary CTA color so the lock visually belongs
     to the unlock option (was forest-green, which signalled "info" to some users). */
  color: #B04A24;
  margin-top: 2px;
}

.gp-lock-note--dual .gp-lock-note__actions {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* CTA group = primary button + scope meta stacked vertically.
   Lets the meta line (One-time · This grant only · Yours forever) sit
   directly under the button as a trust strip, without breaking the
   horizontal flex flow of the lock-note actions row. */
.gp-lock-note__cta-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.gp-unlock-link__meta {
  display: block;
  font-family: var(--gp-sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--gp-ink-3, #6B6560);
  letter-spacing: 0.01em;
}

/* ── 2. Primary CTA — $19 one-time ─────────────────────────────────────── */

.gp-unlock-link--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  min-width: 240px;
  min-height: 44px; /* a11y touch target */
  /* Sienna is the brand CTA color; using a slightly darker shade here to
     bump text/bg contrast from 4.55 → 5.1:1 (still brand-on-scale). */
  background: #B04A24;
  color: #fff !important;
  font-family: var(--gp-sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.005em;
  border: 1px solid #B04A24;
  border-radius: var(--gp-r, 8px);
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
  box-shadow: 0 1px 2px rgba(196, 83, 43, 0.14);
}

.gp-unlock-link--primary:hover,
.gp-unlock-link--primary:focus-visible {
  background: var(--gp-sienna-hover, #A3401F);
  border-color: var(--gp-sienna-hover, #A3401F);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(196, 83, 43, 0.24);
}

.gp-unlock-link--primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(196, 83, 43, 0.18);
}

.gp-unlock-link--primary:focus-visible {
  outline: 2px solid var(--gp-forest, #2d6a4f);
  outline-offset: 3px;
}

/* ── 3. Secondary CTA — ghost link for trial fallback ──────────────────── */

.gp-unlock-link--secondary {
  font-family: var(--gp-sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-ink-3, #6B6560) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(107, 101, 96, 0.3);
  cursor: pointer;
  padding: 10px 6px;
  min-height: 44px; /* a11y — matches iOS touch target, was 32px */
  display: inline-flex;
  align-items: center;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.gp-unlock-link--secondary:hover,
.gp-unlock-link--secondary:focus-visible {
  color: var(--gp-ink, #1C1917) !important;
  text-decoration-color: var(--gp-ink, #1C1917);
}

.gp-unlock-link--secondary:focus-visible {
  outline: 2px solid var(--gp-forest, #2d6a4f);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── 4. Post-auth pulse animation ─────────────────────────────────────── */

@keyframes gp-unlock-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196, 83, 43, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(196, 83, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 83, 43, 0); }
}

.gp-unlock-link--pulse {
  animation: gp-unlock-pulse 1.2s ease-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .gp-unlock-link--pulse {
    animation: none;
  }
}

/* ── 5. Success toast ─────────────────────────────────────────────────── */

.gp-unlock-toast {
  position: fixed;
  top: 72px;   /* below the fixed nav, never over Sign Up / Start Premium */
  right: 20px;
  max-width: 440px;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: #fdf9ef;
  border: 1px solid #d8d2c6;
  border-left: 4px solid var(--gp-forest, #2d6a4f);
  border-radius: var(--gp-r-lg, 12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04);
  font-family: var(--gp-sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  transform: translateX(420px);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease;
}

.gp-unlock-toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.gp-unlock-toast--leaving {
  transform: translateX(420px);
  opacity: 0;
}

.gp-unlock-toast__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gp-forest, #2d6a4f);
  color: #fff;
  border-radius: 50%;
}

.gp-unlock-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}

.gp-unlock-toast__body strong {
  display: block;
  font-family: var(--gp-serif, 'Fraunces', Georgia, serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1f4a37;
  margin-bottom: 3px;
}

.gp-unlock-toast__body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4b463f;
}
.gp-unlock-toast__body a {
  color: #2d6a4f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Before the unlock is CONFIRMED for this account (2026-09-05): amber, not green. */
.gp-unlock-toast__btn {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: #2d6a4f;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
}
.gp-unlock-toast__btn:hover { background: #1f4a37; }
.gp-unlock-toast--pending { border-left-color: #b7791f; }
.gp-unlock-toast--pending .gp-unlock-toast__icon { background: #b7791f; }
.gp-unlock-toast--pending .gp-unlock-toast__body strong { color: #7a4f0e; }

.gp-unlock-toast__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--gp-ink-3, #6B6560);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 150ms ease, color 150ms ease;
}

.gp-unlock-toast__close:hover,
.gp-unlock-toast__close:focus-visible {
  background: var(--gp-cream-warm, #f5f0e8);
  color: var(--gp-ink, #1C1917);
}

.gp-unlock-toast__close:focus-visible {
  outline: 2px solid var(--gp-forest, #2d6a4f);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .gp-unlock-toast,
  .gp-unlock-toast--visible,
  .gp-unlock-toast--leaving {
    transition: opacity 150ms ease;
    transform: translateX(0);
  }
}

/* ── 6. Multi-unlock upsell banner ───────────────────────────────────── */

.gp-upsell-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 auto 20px;
  max-width: 900px;
  padding: 14px 20px;
  background: var(--gp-cream-warm, #f5f0e8);
  border: 1px solid rgba(45, 106, 79, 0.15);
  border-left: 3px solid var(--gp-forest, #2d6a4f);
  border-radius: var(--gp-r, 8px);
  font-family: var(--gp-sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}

.gp-upsell-banner__text {
  flex: 1 1 280px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gp-ink-2, #57534E);
}

.gp-upsell-banner__text strong {
  color: var(--gp-ink, #1C1917);
  font-weight: 700;
}

.gp-upsell-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.gp-upsell-banner__cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-forest, #2d6a4f) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.gp-upsell-banner__cta:hover,
.gp-upsell-banner__cta:focus-visible {
  color: var(--gp-forest-deep, #1B4332) !important;
}

.gp-upsell-banner__cta:focus-visible {
  outline: 2px solid var(--gp-forest, #2d6a4f);
  outline-offset: 2px;
  border-radius: 3px;
}

.gp-upsell-banner__dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--gp-ink-3, #6B6560);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 150ms ease, color 150ms ease;
}

.gp-upsell-banner__dismiss:hover,
.gp-upsell-banner__dismiss:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: var(--gp-ink, #1C1917);
}

.gp-upsell-banner__dismiss:focus-visible {
  outline: 2px solid var(--gp-forest, #2d6a4f);
  outline-offset: 1px;
}

/* ── Inline CTA dual variant (replaces legacy single-button block) ─────

   The legacy .gp-inline-cta was a full-width forest-green gradient callout
   with a single "Try Free for 7 Days" button. We keep the visual container
   from grant-page.css (.gp-inline-cta base styles — gradient, border, hover)
   but override the actions column to stack the dual CTA vertically.
*/

.gp-inline-cta--dual {
  /* Existing base gives us the gradient + border; we just need a bit more
     breathing room for the extra trust strip + anchor line. */
  padding: 20px 24px;
  align-items: center;
}

.gp-inline-cta--dual .gp-inline-cta__left {
  flex: 1 1 60%;
  min-width: 0;
}

.gp-inline-cta__anchor {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gp-ink-2, #57534E);
  font-style: italic;
  line-height: 1.4;
}

.gp-inline-cta--dual .gp-inline-cta__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* When dual CTA is in the larger inline-cta container, bump the button
   to feel like a stronger conversion surface than a compact lock-note. */
.gp-inline-cta--dual .gp-unlock-link--primary {
  min-width: 260px;
  font-size: 16px;
  padding: 13px 26px;
}

.gp-inline-cta--dual .gp-lock-note__cta-group {
  align-items: stretch;
  width: 100%;
}

/* ── Upsell banner (strengthened visual hierarchy) ───────────────────── */

.gp-upsell-banner {
  /* Was: 1px sienna-tinted border + 3px forest left bar + flat cream bg.
     Now: slightly darker cream + 4px forest left bar + subtle shadow,
     so it stops looking like page background. */
  background: var(--gp-cream-dark, #ede8de);
  border: 1px solid rgba(45, 106, 79, 0.20);
  border-left: 4px solid var(--gp-forest, #2d6a4f);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.05);
}

.gp-upsell-banner__text {
  font-size: 15px;
  color: var(--gp-ink, #1C1917);
  font-weight: 500;
}

.gp-upsell-banner__text strong {
  color: var(--gp-forest-deep, #1B4332);
  font-weight: 700;
}

.gp-upsell-banner__cta {
  font-weight: 700;
  padding: 10px 6px;
}

/* ── Mobile: stack the dual CTA vertically ───────────────────────────── */

@media (max-width: 640px) {
  .gp-lock-note--dual {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .gp-lock-note--dual .gp-lock-note__text {
    flex: 0 0 auto;
  }

  .gp-lock-note--dual .gp-lock-note__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  .gp-unlock-link--primary {
    width: 100%;
    min-width: 0;
    padding: 13px 18px;
    font-size: 15px;
  }

  .gp-unlock-link--secondary {
    text-align: center;
    padding: 10px;
    justify-content: center;
    width: 100%;
  }

  .gp-inline-cta--dual {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
  }

  .gp-inline-cta--dual .gp-inline-cta__actions {
    align-items: stretch;
    gap: 8px;
  }

  .gp-inline-cta--dual .gp-unlock-link--primary {
    min-width: 0;
    width: 100%;
  }

  .gp-unlock-toast {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }

  .gp-upsell-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .gp-upsell-banner__actions {
    justify-content: space-between;
  }
}

/* ─── Social proof badge (Apr 22 2026) ───────────────────────────
   Injected by grant-page.src.js into dual-CTA surfaces when this
   grant's unlock count exceeds the backend threshold (default 5).
   Small green chip-style indicator — low visual weight, high trust. */
.gp-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #14532d;
  background: rgba(20, 83, 45, 0.08);
  border-radius: 12px;
  letter-spacing: -0.005em;
  animation: gp-social-proof-fade 0.3s ease both;
}

@keyframes gp-social-proof-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.gp-float-cta--dual .gp-social-proof {
  margin-top: 4px;
  font-size: 11px;
  padding: 2px 6px;
}

@media (max-width: 600px) {
  .gp-float-cta--dual .gp-social-proof { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 1 CRO REFORM (Apr 22 2026) — reduce CTA density + concentrate value prop
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lightweight "Premium" cue — replaces the heavyweight lockNoteDual at each
   locked sub-section. Single-line badge + copy, no buttons. The heavy CTA
   work is concentrated in the deliverables card (above premium) + chapter-
   footer inlineCtaDual (below each premium chapter) + the float bar. */
.gp-lock-note--cue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  margin: 10px 0 14px;
  background: rgba(180, 83, 9, 0.06);
  border-left: 3px solid rgba(180, 83, 9, 0.4);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #5a4a2e;
}

.gp-lock-note--cue .gp-lock-note__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(180, 83, 9, 0.15);
  color: #92400e; /* 2026-09-18 deep QA: #b45309 was 3.4-3.7:1 on this tint at 11px (axe); #92400e is 4.8-5.3:1 */
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.gp-lock-note--cue .gp-lock-note__icon {
  color: #b45309;
}

/* Down-pointer from the "How to qualify" cue to the single priced block. */
.gp-lock-note--cue .gp-lock-note__link {
  color: var(--gp-forest, #2d6a4f);
  font-weight: 600;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.gp-lock-note--cue .gp-lock-note__text {
  font-size: 13px;
  color: #5a4a2e;
  font-style: italic;
}

/* The application chapter's manifest cue (2026-10-09): one statement of what the full guide holds, in place of five
   headings with nothing under them. Sections the page withholds stay out of the layout until the member's data fills
   them (`_renderWithheldContent` removes `data-locked-src`). Without :has() support the old bare headings show — a safe
   degrade. Counts are neutral ink on purpose: free vs paid is stated, not coloured. */
.gp-wh:has([data-locked-src]) {
  display: none;
}

.gp-lock-note--cue.gp-lock-note--manifest {
  align-items: flex-start;
}

.gp-lock-note--cue.gp-lock-note--manifest .gp-lock-note__text {
  font-family: var(--gp-body, 'DM Sans', system-ui, sans-serif);   /* never the typewriter face the base lock note inherits */
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #44403c;
  flex: 1 1 200px;
}

.gp-lock-note--cue.gp-lock-note--manifest .gp-manifest {
  flex: 1 0 100%;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  columns: 2;
  column-gap: 24px;
}

.gp-lock-note--cue.gp-lock-note--manifest .gp-manifest li {
  margin: 0;
  padding: 2px 0;
  break-inside: avoid;
  font-family: var(--gp-body, 'DM Sans', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  font-style: normal;
  font-weight: 400;
  color: #44403c;
  list-style: none;
}

.gp-lock-note--cue.gp-lock-note--manifest .gp-manifest b {
  font-weight: 700;
  color: #1c1917;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .gp-lock-note--cue.gp-lock-note--manifest .gp-manifest {
    columns: 1;
  }
}

/* Deliverables card — THE concentrated value-prop surface (replaces the
   decorative .gp-premium-divider as the primary conversion anchor above
   §4). Guests see one place with concrete per-grant counts + one pair of
   CTAs, not a scattered series of lock notes. */
.gp-deliverables-card {
  margin: 40px 0 24px;      /* ★ 2026-09-03 QA: 720px centred inside 880px neighbours read as a pasted widget */
  max-width: none;
  background: linear-gradient(180deg, #fff9ee 0%, #faf5e6 100%);
  border: 1.5px solid rgba(180, 83, 9, 0.25);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04),
              0 18px 40px -20px rgba(180, 83, 9, 0.18);
}

.gp-deliverables-card__header {
  margin-bottom: 18px;
}

.gp-deliverables-card__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(180, 83, 9, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.gp-deliverables-card__title {
  margin: 0 0 6px;
  font-family: var(--gp-font-display, 'Fraunces', serif);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 500;
  color: #1a1714;
  letter-spacing: -0.01em;
}

.gp-deliverables-card__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #57534e;
}

.gp-deliverables-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.gp-deliverables-card__list li {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  border-top: 1px solid rgba(180, 83, 9, 0.12);
}

.gp-deliverables-card__list li:first-child {
  border-top: 0;
}

.gp-deliverables-card__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 13px;
  width: 14px;
  height: 14px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232D6A4F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}

.gp-deliverables-card__list li strong {
  color: #1a1714;
  font-weight: 600;
}

.gp-deliverables-card__anchor {
  padding: 10px 14px;
  background: rgba(196, 83, 43, 0.08);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #7f3612;
  font-style: italic;
  margin-bottom: 16px;
}

.gp-deliverables-card__actions {
  display: flex;
  flex-direction: column;   /* offer-wall V1: the $19 line sits UNDER the button */
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

/* The one-time line is the ONLY place "$19" appears on a grant page (2026-09-03).
   Quiet grey underlined text, deliberately not a second button. */
.gp-deliverables-card__actions .gp-deliverables-card__onetime {
  font-size: 12.5px;
  color: #8a8272 !important;
  text-decoration: underline;
  text-decoration-color: rgba(138, 130, 114, 0.45);
  padding: 8px 2px;
  min-height: 40px;
}

.gp-deliverables-card__actions .gp-unlock-link--primary {
  padding: 11px 22px;
  font-size: 15px;
}

@media (max-width: 600px) {
  .gp-deliverables-card {
    padding: 22px 20px;
    margin: 28px 16px 20px;
  }
  .gp-deliverables-card__title {
    font-size: 1.25rem;
  }
  .gp-deliverables-card__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .gp-deliverables-card__actions .gp-unlock-link--primary,
  .gp-deliverables-card__actions .gp-unlock-link--secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Hide-on-unlock — the deliverables card disappears the moment the user
   unlocks this Playbook (or has Premium). Same sweep as existing
   .gp-lock-note / .gp-inline-cta. Handled by grant-page.js hidePremiumGating. */

/* ═══════════════════════════════════════════════════════════════════════════
   POST-UNLOCK ACTION BAR (Apr 22 2026 — Wave 2) — operationalization entry
   Injected by grant-page.js hidePremiumGating() above §5. Turns the locked-
   reference-document experience into a "you just bought intel, here's what
   to do with it" workspace entry.
   ═══════════════════════════════════════════════════════════════════════════ */

.gp-action-bar {
  max-width: 720px;
  margin: 40px auto 32px;
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #86efac;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 1px 2px rgba(20, 83, 45, 0.05),
              0 16px 36px -18px rgba(20, 83, 45, 0.2);
  animation: gpActionBarReveal 0.45s ease both;
}

@keyframes gpActionBarReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.gp-action-bar__header {
  margin-bottom: 14px;
}

.gp-action-bar__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #166534;
  background: rgba(22, 101, 52, 0.12);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.gp-action-bar__title {
  margin: 0;
  font-family: var(--gp-font-display, 'Fraunces', serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: #14532d;
  letter-spacing: -0.01em;
}

.gp-action-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gp-action-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #14532d;
  background: white;
  border: 1.5px solid rgba(20, 83, 45, 0.3);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.gp-action-bar__btn:hover {
  background: #f0fdf4;
  border-color: #14532d;
  transform: translateY(-1px);
}

.gp-action-bar__btn:focus-visible {
  outline: 2px solid #14532d;
  outline-offset: 3px;
}

.gp-action-bar__btn--primary {
  background: #14532d;
  color: white;
  border-color: #14532d;
}

.gp-action-bar__btn--primary:hover {
  background: #0f3e22;
  color: white;
}

.gp-action-bar__btn svg {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .gp-action-bar {
    margin: 32px 16px 24px;
    padding: 20px 18px;
  }
  .gp-action-bar__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .gp-action-bar__btn {
    justify-content: center;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 3 — POST-UNLOCK WORKSPACE (Apr 22 2026)
   Checkable documents + step status pills + stacking-partner cross-sell
   Activated by grant-page.js _activateWorkspace() in hidePremiumGating.
   localStorage-backed state per-grant — no Firestore writes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Document checklist progress bar ───────────────────── */
.gp-doc-progress,
.gp-step-progress {
  max-width: 100%;
  margin: 16px 0 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.gp-doc-progress__header,
.gp-step-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.gp-doc-progress__label,
.gp-step-progress__label {
  font-size: 12px;
  font-weight: 600;
  color: #57534e;
  letter-spacing: 0.02em;
}
.gp-doc-progress__count,
.gp-step-progress__count {
  font-size: 13px;
  font-weight: 600;
  color: #14532d;
  font-variant-numeric: tabular-nums;
}
.gp-doc-progress__bar,
.gp-step-progress__bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.gp-doc-progress__fill,
.gp-step-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e 0%, #14532d 100%);
  border-radius: 999px;
  transition: width 260ms ease-out;
}

.gp-doc-progress--complete,
.gp-step-progress--complete {
  background: #f0fdf4;
  border-color: #86efac;
}
.gp-doc-progress--complete .gp-doc-progress__label,
.gp-step-progress--complete .gp-step-progress__label {
  color: #14532d;
}
.gp-doc-progress--complete .gp-doc-progress__count::before,
.gp-step-progress--complete .gp-step-progress__count::before {
  content: '✓ ';
}

/* ─── Checkable document items ──────────────────────────── */
.gp-doc-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  margin-bottom: 4px;
  border-radius: 6px;
  transition: background 160ms ease;
}
.gp-doc-item:hover { background: rgba(20, 83, 45, 0.04); }

.gp-doc-cb {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  border: 1.5px solid #a8a29e;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease;
}
.gp-doc-cb:hover { border-color: #2d6a4f; }
.gp-doc-cb:checked {
  background: #2d6a4f;
  border-color: #2d6a4f;
}
.gp-doc-cb:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.gp-doc-cb:focus-visible {
  outline: 2px solid #2d6a4f;
  outline-offset: 2px;
}

.gp-doc-item--checked {
  background: rgba(20, 83, 45, 0.06);
}
.gp-doc-item--checked > *:not(.gp-doc-cb) {
  text-decoration: line-through;
  color: #8e8a85;
  opacity: 0.7;
}

/* ─── Step status pills ────────────────────────────────── */
.gp-step-item {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px !important;
  border-left: 3px solid #e5e7eb;
  background: white;
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
  transition: border-color 200ms ease;
}
.gp-step-item[data-status="in-progress"] { border-left-color: #d97706; background: #fffbeb; }
.gp-step-item[data-status="done"] { border-left-color: #2d6a4f; background: #f0fdf4; }
.gp-step-item[data-status="done"] .gp-step-num,
.gp-step-item[data-status="done"] strong { text-decoration: line-through; opacity: 0.7; }

.gp-step-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #57534e;
  cursor: pointer;
  transition: all 160ms ease;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  min-height: 44px; /* V1.1 Fix #9 (WCAG 2.5.5 — was 25px, Wave 3 workspace control) */
}
.gp-step-pill:hover { background: #e5e7eb; transform: translateY(-1px); }
.gp-step-pill:focus-visible { outline: 2px solid #2d6a4f; outline-offset: 2px; }

.gp-step-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a8a29e;
  flex-shrink: 0;
}
.gp-step-pill[data-status="in-progress"] {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}
.gp-step-pill[data-status="in-progress"] .gp-step-pill__dot {
  background: #d97706;
  animation: gpStepPillPulse 1.6s ease-in-out infinite;
}
@keyframes gpStepPillPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.gp-step-pill[data-status="done"] {
  background: #d1fae5;
  color: #14532d;
  border-color: #86efac;
}
.gp-step-pill[data-status="done"] .gp-step-pill__dot {
  background: #14532d;
  position: relative;
}
.gp-step-pill[data-status="done"] .gp-step-pill__dot::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

/* ─── Stacking-partner cross-sell ──────────────────────── */
.gp-stack-pill__unlock {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(180, 83, 9, 0.1);
  color: #b45309;
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: all 140ms ease;
  letter-spacing: 0.01em;
}
.gp-stack-pill__unlock:hover {
  background: #b45309;
  color: white;
  border-color: #b45309;
  transform: translateY(-1px);
}

/* ─── Completion toast (celebratory, non-blocking) ───── */
.gp-unlock-toast--completion {
  background: #dcfce7;
  color: #14532d;
  border: 1.5px solid #86efac;
}

/* ─── Mobile adjustments ───────────────────────────────── */
@media (max-width: 600px) {
  .gp-step-item {
    padding: 8px 10px !important;
  }
  .gp-step-pill {
    font-size: 10px;
    padding: 3px 8px;
  }
  .gp-stack-pill__unlock {
    display: inline-block;
    margin: 4px 0 0 6px;
    font-size: 10px;
  }
}

/* ============================================================
   Application Game Plan — downloadable PDF (2026-06-28)
   Action-bar download button + loading state, and the
   free-user conversion teaser (above §5).
   ============================================================ */

/* the Game Plan is the hero deliverable for unlocked users — give it a
   distinct forest-tinted treatment so it reads as "the thing you take away" */
.gp-action-bar__btn--gameplan {
  color: #fff;
  background: var(--gp-forest, #2d6a4f);
  border-color: var(--gp-forest, #2d6a4f);
}
.gp-action-bar__btn--gameplan:hover {
  background: var(--gp-forest-deep, #1B4332);
  border-color: var(--gp-forest-deep, #1B4332);
}
.gp-action-bar__btn--gameplan svg { stroke: #fff; }
.gp-action-bar__btn.is-loading { opacity: .85; cursor: progress; }
.gp-btn-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gp-btn-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes gp-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gp-btn-spinner { animation-duration: 1.6s; } }

/* ---- free-user teaser card ---- */
.gp-gpteaser {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  align-items: center;
  margin: 28px 0;
  padding: 24px 26px;
  background: linear-gradient(135deg, var(--gp-cream-warm, #f5f0e8) 0%, var(--gp-paper-warm, #FFFDF9) 100%);
  border: 1px solid var(--gp-cream-dark, #ede8de);
  border-left: 4px solid var(--gp-forest, #2d6a4f);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(27, 67, 50, 0.06);
}
.gp-gpteaser__preview {
  position: relative;
  line-height: 0;
}
.gp-gpteaser__preview img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--gp-cream-dark, #ede8de);
  box-shadow: 0 10px 26px rgba(27, 67, 50, 0.16);
}
.gp-gpteaser__ribbon {
  position: absolute;
  top: 10px; right: -6px;
  background: var(--gp-sienna, #C4532B);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(196, 83, 43, 0.3);
}
.gp-gpteaser__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gp-sienna, #C4532B);
  margin-bottom: 6px;
}
.gp-gpteaser__title {
  margin: 0 0 8px;
  font-size: 1.45rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--gp-forest-deep, #1B4332);
  letter-spacing: -0.01em;
}
.gp-gpteaser__sub {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gp-ink-2, #44403c);
}
.gp-gpteaser__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.gp-gpteaser__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--gp-ink, #1C1917);
}
.gp-gpteaser__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gp-forest, #2d6a4f);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' 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;
}
.gp-gpteaser__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
/* Offer-wall V1 (2026-09-03): the teaser's single action is an outlined
   pointer back UP to the Playbook card, never a second priced button. */
.gp-gpteaser__cta--outline {
  background: transparent !important;
  color: var(--gp-forest, #2d6a4f) !important;
  border: 1.5px solid var(--gp-forest, #2d6a4f) !important;
}
.gp-gpteaser__cta--outline:hover,
.gp-gpteaser__cta--outline:focus-visible {
  background: rgba(45, 106, 79, 0.08) !important;
}

.gp-gpteaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--gp-forest, #2d6a4f);
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.gp-gpteaser__cta:hover { background: var(--gp-forest-deep, #1B4332); transform: translateY(-1px); }
.gp-gpteaser__cta:focus-visible { outline: 2px solid var(--gp-sienna, #C4532B); outline-offset: 3px; }
.gp-gpteaser__alt {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gp-ink-3, #78716c);
  text-decoration: none;
  border-bottom: 1px solid rgba(120, 113, 108, 0.35);
}
.gp-gpteaser__alt:hover { color: var(--gp-sienna, #C4532B); border-bottom-color: var(--gp-sienna, #C4532B); }

@media (max-width: 680px) {
  .gp-gpteaser {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
    text-align: left;
  }
  .gp-gpteaser__preview { max-width: 168px; }
  .gp-gpteaser__list { grid-template-columns: 1fr; }
  .gp-gpteaser__title { font-size: 1.25rem; }
  .gp-gpteaser__cta { width: 100%; justify-content: center; }
}