/* /cofounders — the one block the /perky family has no layout for: what's free and what's paid (DISPATCH-2026-10-01b). */
.cf-plans .pk-inner { max-width: 760px; }
.cf-plan-grid { display: grid; gap: 14px; text-align: left; }
@media (min-width: 700px) { .cf-plan-grid { grid-template-columns: 1fr 1fr; } }
.cf-plan { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px 20px; }
.cf-plan-k { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-terracotta); margin-bottom: 8px; }
.cf-plan p { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.55; }
.cf-plan b { color: var(--text-primary); }
.cf-plan-mcp, .cf-plan-more { margin: 18px 0 0; color: var(--text-secondary); font-size: .95rem; }
.cf-plan-mcp a, .cf-plan-more a { color: var(--accent-terracotta); font-weight: 500; text-decoration: none; }
/* a compact block, not a full-screen beat: .pk-scene's min-height would leave it floating in an empty band */
.pk-scene.cf-plans { min-height: 0; padding-top: 88px; padding-bottom: 88px; }
.cf-plan-grid { gap: 18px; }
.cf-plan { border-radius: 18px; padding: 22px 24px; }
.cf-plan.cf-plan-hot { border: 2px solid var(--accent-terracotta); }

/* ════════ MOTION PASS (DISPATCH-2026-10-03a, from wiki/vision/cofounders-mock-2026-10-02.html) ════════
   ⭐ THE BASE STATE OF EVERY ELEMENT BELOW IS ITS FINAL, READABLE STATE. Animations attach only under
   `.cfm-anim.cfm-run`, a class cofounders.js adds while the scene is on screen and removes when it leaves (so a
   loop restarts from its beginning each visit, and nothing off screen runs). That makes reduced motion free:
   the media query at the bottom drops the run rules and the page is the final frame. Nothing is ever hidden by
   default, so a script that fails to load leaves a complete page.
   ⛔ Keyframes attach by CLASS, never inline `style="animation:…"` (it failed in the design canvas). A stagger
   uses a class (`cfm-d1`…) for the same reason.
   ⭐ THE APP'S DECK REUSES THREE OF THESE (DISPATCH-2026-10-03b): the stamp, the sage glow ring and the pop. The app
   plays each ONCE on the real event, so it carries one-shot cuts of the same frames (`cfStamp`, `cfHlOnce`,
   `cfPairIn` in app/site/styles.css) — same colours, rotation and ring — rather than these loops. The two sites
   share no stylesheet, so a change to the look here is owed there too. */

/* the Pips behind the opener (/pips.js draws them; lanes avoid .pk-inner) */
.cfm-pips { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.pk-open .pk-inner { position: relative; z-index: 1; }

/* the two halves */
.cfm-halves { position: relative; height: 300px; max-width: 760px; margin: 48px auto 0; }
.cfm-half { position: absolute; top: 30px; width: 300px; background: var(--surface-card); border-radius: 20px; padding: 20px 22px;
  text-align: left; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.cfm-half-l { left: calc(50% - 306px); }
.cfm-half-r { left: calc(50% + 6px); }
.cfm-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-terracotta); }
.cfm-k-sage { color: var(--accent-sage-deep); }
.cfm-who { font-family: var(--font-serif); font-weight: 600; font-size: 22px; line-height: 1.1; margin-top: 8px; color: var(--text-primary); }
.cfm-sm { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.cfm-half .cf-brings { margin-top: 12px; }
.cfm-needs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cfm-need { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600;
  line-height: 1.4; border: 1px dashed var(--border-emphasis); color: var(--text-secondary); background: #fff; }
.cfm-seam { position: absolute; left: 50%; top: 18px; bottom: 40px; width: 2px; transform: translateX(-50%);
  background: linear-gradient(#e8906c, transparent); }
.cfm-click { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 2; background: var(--accent-sage-deep); color: #fff;
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; }
/* static (no run): the halves sit together with the seam lit, which is the loop's held frame */
.cfm-seam { opacity: .9; }

/* the person perch (beat 01) — base state is the built card */
.cfm-type .cfm-w { display: inline; }

/* beat 02 */
.cfm-match { position: relative; display: grid; grid-template-columns: 220px minmax(0, 440px); gap: 36px; align-items: center; width: 100%; max-width: 700px; }
.cfm-you { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px 16px 18px; }
.cfm-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.cfm-lbl-2 { margin-top: 16px; }
.cfm-col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 0; }
.cfm-you .cf-brings.cfm-col { margin-top: 0; }
.pk-real .cfm-hl { transition: none; }
.cfm-deck { display: grid; }
.cfm-deck > .cf-deck-card { grid-area: 1 / 1; }
.cfm-c2 { transform: translateY(14px) scale(.95); opacity: .8; overflow: hidden; }
.cfm-c1 { position: relative; z-index: 2; }
.cfm-stamp { position: absolute; top: 20px; right: 20px; z-index: 3; border: 3px solid var(--accent-sage-deep); color: var(--accent-sage-deep);
  background: rgba(255,253,250,.9); font-size: 15px; font-weight: 700; letter-spacing: .1em; padding: 4px 10px; border-radius: 8px;
  transform: rotate(10deg); opacity: 0; pointer-events: none; }
.cfm-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.cfm-links path { fill: none; stroke: var(--accent-sage); stroke-width: 2.2; stroke-dasharray: 4 6; stroke-linecap: round; opacity: 0; }
.cfm-fitline { margin: 0; font-size: 13px; font-weight: 600; color: var(--accent-sage-deep); text-align: center; }
.cfm-drawer { width: 100%; max-width: 700px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden; text-align: left; }
.cfm-drawer summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 15px; }
.cfm-drawer summary::-webkit-details-marker { display: none; }
.cfm-drawer summary span { color: var(--accent-terracotta); font-size: 20px; line-height: 1; transition: transform .2s; }
.cfm-drawer[open] summary span { transform: rotate(45deg); }
.cfm-drawer summary:focus-visible { outline: 3px solid #e8906c; outline-offset: -3px; }
.cfm-full { padding: 0 20px 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cfm-full p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 760px) {
  .cfm-match { grid-template-columns: 1fr; max-width: 440px; gap: 22px; }
  .cfm-col { flex-direction: row; flex-wrap: wrap; }
  .cfm-links { display: none; }
  .cfm-full { grid-template-columns: 1fr; }
}

/* beat 03 */
.cfm-mutual { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 560px; }
.cfm-pair { display: flex; gap: 14px; width: 100%; justify-content: center; }
.cfm-mcard { flex: 1 1 0; max-width: 240px; min-width: 0; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: 16px; box-shadow: 0 30px 50px -36px rgba(45,37,32,.6); text-align: left; }
.cfm-mname { font-family: var(--font-serif); font-weight: 600; font-size: 21px; color: var(--text-primary); }
.cfm-mcard .cf-brings { gap: 6px; }
.cfm-yes { display: inline-block; margin-top: 12px; background: var(--accent-terracotta); color: #fff; border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600; }
.cfm-mutual > .pk-real { width: 100%; }
.cfm-rA, .cfm-rB { transform-box: fill-box; transform-origin: center; }

/* beat 04 */
.cfm-build { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr); gap: 18px; width: 100%; max-width: 860px; align-items: start; }
.cfm-build .msg-thread { max-width: none; }
.cfm-slot { position: relative; display: flex; flex-direction: column; }
.cfm-typing { position: absolute; left: 0; top: 0; display: flex; gap: 4px; padding: 10px 14px; background: #f4f1ec; border-radius: 11px; opacity: 0; }
.cfm-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); }
.cfm-seat { background: var(--bg-tertiary); color: var(--text-on-dark); border-radius: 20px; padding: 18px 18px 20px; text-align: left; }
.cfm-lbl-dark { color: #a8a098; }
.cfm-team { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.cfm-av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 600; font-size: 16px; }
.cfm-av-d { background: var(--accent-gold); color: var(--text-primary); }
.cfm-av-p { background: var(--accent-sage); color: #fff; }
.cfm-plus { color: var(--text-tertiary); }
.cfm-cap { font-size: 13px; line-height: 1.5; color: #c9bfb4; margin: 10px 0 0; }
@media (max-width: 760px) { .cfm-build { grid-template-columns: 1fr; } }

/* phone: the halves stack and come from above and below; no seam */
@media (max-width: 700px) {
  .cfm-halves { height: 400px; margin-top: 36px; }
  .cfm-half { width: min(300px, calc(100vw - 48px)); left: 50%; transform: translateX(-50%); }
  .cfm-half-l { top: 0; }
  .cfm-half-r { top: auto; bottom: 0; }
  .cfm-seam { display: none; }
  .cfm-click { top: 50%; transform: translate(-50%, -50%); }
  .cfm-pips { display: none; }
}

/* ── the loops, only while the scene is on screen ── */
@media (prefers-reduced-motion: no-preference) {
  .cfm-run .cfm-half-l { animation: cfmHalfL 7s cubic-bezier(.6,0,.3,1) infinite; }
  .cfm-run .cfm-half-r { animation: cfmHalfR 7s cubic-bezier(.6,0,.3,1) infinite; }
  .cfm-run .cfm-seam { animation: cfmSeam 7s ease-in-out infinite; }
  .cfm-run .cfm-click { animation: cfmClick 7s ease-out infinite; }

  .cfm-run .cfm-pop { animation: cfmPopLoop 9s ease-out infinite both; }
  .cfm-run .cfm-d1 { animation-delay: .4s; } .cfm-run .cfm-d2 { animation-delay: .8s; }
  .cfm-run .cfm-d3 { animation-delay: 1.2s; } .cfm-run .cfm-d4 { animation-delay: 1.6s; }
  .cfm-run .cfm-w { animation: cfmWord 9s steps(1, end) infinite both; animation-delay: calc(2s + var(--i) * 70ms); }

  .cfm-run .cfm-hl { animation: cfmHlLoop 8s ease-in-out infinite; }
  .cfm-run .cfm-fitline { animation: cfmFit 8s ease-out infinite; }
  .cfm-run .cfm-links path { animation: cfmDraw 8s ease-out infinite; }
  .cfm-run .cfm-stamp { animation: cfmStampLoop 8s ease-out infinite; }
  .cfm-run .cfm-c1 { animation: cfmSwipe 8s cubic-bezier(.5,0,.3,1) infinite; }
  .cfm-run .cfm-c2 { animation: cfmRise 8s ease-in-out infinite; }
  .cfm-run .cfm-press { animation: cfmPress 8s ease-out infinite; }

  .cfm-run .cfm-ml { animation: cfmMeetL 8s ease-in-out infinite; }
  .cfm-run .cfm-mr { animation: cfmMeetR 8s ease-in-out infinite; }
  .cfm-run .cfm-mname { animation: cfmUnblur 8s ease-in-out infinite; }
  .cfm-run .cfm-rA { animation: cfmRingA 8s ease-in-out infinite; }
  .cfm-run .cfm-rB { animation: cfmRingB 8s ease-in-out infinite; }
  .cfm-run .cfm-banner { animation: cfmBanner 8s ease-out infinite; }

  .cfm-run .cfm-msg { animation: cfmMsg 10s ease-out infinite both; }
  .cfm-run .cfm-m1 { animation-delay: .3s; } .cfm-run .cfm-m2 { animation-delay: 1.6s; } .cfm-run .cfm-m3 { animation-delay: 3.4s; }
  .cfm-run .cfm-typing { animation: cfmTyping 10s infinite; }
  .cfm-run .cfm-typing i { animation: cfmDot 1s infinite; }
  .cfm-run .cfm-typing i:nth-child(2) { animation-delay: .15s; } .cfm-run .cfm-typing i:nth-child(3) { animation-delay: .3s; }
  .cfm-run .cfm-av-p { animation: cfmSeatLoop 10s ease-out infinite; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  .cfm-run .cfm-half-l { animation-name: cfmHalfT; }
  .cfm-run .cfm-half-r { animation-name: cfmHalfB; }
  .cfm-run .cfm-click { animation-name: cfmClickPhone; }
}

@keyframes cfmHalfL { 0% { transform: translateX(-140px) rotate(-4deg); opacity: 0; } 12% { opacity: 1; } 40%, 78% { transform: none; opacity: 1; } 100% { transform: translateX(-140px) rotate(-4deg); opacity: 0; } }
@keyframes cfmHalfR { 0% { transform: translateX(140px) rotate(4deg); opacity: 0; } 12% { opacity: 1; } 40%, 78% { transform: none; opacity: 1; } 100% { transform: translateX(140px) rotate(4deg); opacity: 0; } }
@keyframes cfmHalfT { 0% { transform: translate(-50%, -40px); opacity: 0; } 15%, 80% { transform: translateX(-50%); opacity: 1; } 100% { transform: translateX(-50%); opacity: 0; } }
@keyframes cfmHalfB { 0% { transform: translate(-50%, 40px); opacity: 0; } 15%, 80% { transform: translateX(-50%); opacity: 1; } 100% { transform: translateX(-50%); opacity: 0; } }
@keyframes cfmSeam { 0%, 38% { opacity: 0; } 46%, 74% { opacity: .9; } 84%, 100% { opacity: 0; } }
@keyframes cfmClick { 0%, 42% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 48% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 52%, 74% { opacity: 1; transform: translate(-50%, 0) scale(1); } 82%, 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes cfmClickPhone { 0%, 30% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 36% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 40%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 84%, 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes cfmPopLoop { 0% { opacity: 0; transform: translateY(6px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes cfmWord { 0% { opacity: 0; } 4%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cfmHlLoop { 0%, 10% { box-shadow: 0 0 0 0 rgba(125,148,113,0); } 18%, 50% { box-shadow: 0 0 0 3px rgba(125,148,113,.38); border-color: var(--accent-sage); } 60%, 100% { box-shadow: 0 0 0 0 rgba(125,148,113,0); } }
@keyframes cfmFit { 0%, 14% { opacity: 0; } 20%, 50% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes cfmDraw { 0%, 10% { stroke-dashoffset: 300; opacity: 0; } 14% { opacity: 1; } 30%, 50% { stroke-dashoffset: 0; opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes cfmStampLoop { 0%, 40% { opacity: 0; transform: rotate(10deg) scale(1.4); } 46%, 60% { opacity: 1; transform: rotate(10deg) scale(1); } 66%, 100% { opacity: 0; transform: rotate(10deg) scale(1); } }
@keyframes cfmSwipe { 0%, 52% { transform: none; opacity: 1; } 68% { transform: translateX(160%) rotate(14deg); opacity: 0; } 69%, 86% { transform: translateY(14px) scale(.95); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cfmRise { 0%, 58% { transform: translateY(14px) scale(.95); opacity: .8; } 74%, 90% { transform: none; opacity: 1; } 100% { transform: translateY(14px) scale(.95); opacity: .8; } }
@keyframes cfmPress { 0%, 40% { transform: none; } 44% { transform: scale(.94); } 48%, 100% { transform: none; } }
@keyframes cfmMeetL { 0%, 20% { transform: translateX(-14px); } 44%, 86% { transform: none; } 100% { transform: translateX(-14px); } }
@keyframes cfmMeetR { 0%, 20% { transform: translateX(14px); } 44%, 86% { transform: none; } 100% { transform: translateX(14px); } }
@keyframes cfmUnblur { 0%, 46% { filter: blur(7px); } 56%, 86% { filter: blur(0); } 96%, 100% { filter: blur(7px); } }
@keyframes cfmRingA { 0%, 20% { transform: translateX(-6px); } 44%, 86% { transform: none; } 100% { transform: translateX(-6px); } }
@keyframes cfmRingB { 0%, 20% { transform: translateX(6px); } 44%, 86% { transform: none; } 100% { transform: translateX(6px); } }
@keyframes cfmBanner { 0%, 50% { opacity: 0; transform: translateY(10px); } 58%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes cfmMsg { 0% { opacity: 0; transform: translateY(8px); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes cfmTyping { 0%, 18% { opacity: 0; } 22%, 33% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes cfmDot { 50% { transform: translateY(-3px); } }
@keyframes cfmSeatLoop { 0%, 72% { opacity: 0; transform: scale(.6); } 78%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }

/* ════════ THE DECK CARD, AS THE APP DRAWS IT TODAY (Bret 2026-10-03, after the 2026-09-09 ruling) ════════
   Copied from app/site/styles.css (`.cf-chiprow`, `.cf-pairmark`, `.cf-factline`, `.ts-mini-nameRow .cf-viewfull`)
   and scoped under `.pk-real`. ⚠ HAND-COPIED, like every surface on this page (see feeling-perky-surfaces.css):
   when the app's card changes shape, this replica does not follow on its own. */
.pk-real .cf-chiprow { display: flex; align-items: baseline; gap: 8px; margin: 7px 0 0; min-width: 0; flex-wrap: wrap; }
.pk-real .cf-chiprow:first-of-type { margin-top: 2px; }
.pk-real .cf-chiprow-l { flex: 0 0 auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.pk-real .cf-chiprow-v { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pk-real .cf-chip { font-size: 11.5px; line-height: 1.5; padding: 2px 9px; border-radius: 999px; background: var(--bg-secondary);
  color: var(--text-secondary); white-space: nowrap; border: 1px solid transparent; }
.pk-real .cf-chiprow-bring .cf-chip { background: var(--accent-terracotta-soft); }
.pk-real .cf-chiprow-seek .cf-chip { background: var(--accent-sage-soft); }
.pk-real .cf-pairmark { display: flex; align-items: stretch; gap: 8px; margin: 10px 0 0; flex-wrap: wrap; }
.pk-real .cf-pairtile { flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px;
  border-radius: 9px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); text-align: left; }
.pk-real .cf-pairtile-l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.pk-real .cf-pairtile-v { font-family: var(--font-serif); font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.pk-real .cf-pairmark-ic { flex: 0 0 auto; align-self: center; display: block; }
.pk-real .cf-pairmark-ic svg { width: 30px; height: 17px; display: block; }
.pk-real .cf-factline { margin: 9px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary); }
.pk-real .cf-sectors { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.pk-real .ts-mini-nameRow { display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap; }
.pk-real .ts-mini-nameRow .cf-viewfull { flex: none; margin: 0 0 0 4px; padding: 4px 10px; border-radius: 999px;
  background: rgba(20, 15, 10, .5); color: var(--text-on-dark); font-size: 11.5px; white-space: nowrap; }
/* beat 03's caption: the beat-02 deck caption's look, italic — but NOT its fade loop, which `.cfm-run .cfm-fitline`
   would otherwise hand it (beat 03 is a `.cfm-anim` scene too). It stays put. */
.cfm-caption-i { font-style: italic; }
.cfm-run .cfm-caption-i { animation: none; }