/* ───────────────────────────────────────────────────────────────────────────
   perk-up-surfaces.css — FAITHFUL reproductions of the real app surfaces, scoped
   under `.pk-real` so they can't collide with the marketing styles. Extracted from
   app/site (perch broadsheet, Town Square cards, co-founder deck, chat, kanban,
   unified application). Fonts normalized to the page's vars (Playfair / Inter / mono).
   ─────────────────────────────────────────────────────────────────────────── */

/* app-only custom props the surfaces reference (the marketing page doesn't define these) */
.pk-real {
  --surface: #fff;
  --accent-terracotta-soft: rgba(198, 90, 54, .10);
  --accent-sage-soft: rgba(125, 148, 113, .14);
  --accent-maroon: #8c4a3c;
  color: var(--text-primary); font-family: var(--font-sans);
}
.pk-real *, .pk-real *::before, .pk-real *::after { box-sizing: border-box; }

/* ════════ Perch broadsheet (full, with backdrop) ════════ */
.pk-real .perch { --bg:#15110d; --ink:#f6f0e6; --ink2:#cfc6b9; --ink3:#9a9082; --acc:#e07a54; --acc-d:#c8603c; --sage:#aebb8f;
  --line:rgba(239,233,223,.09); background:var(--bg); color:var(--ink); padding-bottom:24px; font-family:var(--font-serif); -webkit-font-smoothing:antialiased; }
.pk-real .perch.acc-terracotta{ --acc:#e07a54; --acc-d:#c8603c; }
.pk-real .perch.acc-indigo{ --acc:#7c83d3; --acc-d:#5a62b8; }
.pk-real .perch.acc-moss{ --acc:#8a9b6e; --acc-d:#6f8055; }
.pk-real .perch.acc-rose{ --acc:#d36c84; --acc-d:#b8506a; }
.pk-real .perch .wrap{ max-width:760px; margin:0 auto; padding:0 28px; }
.pk-real .perch .hero{ position:relative; }
.pk-real .perch .backdrop{ position:absolute; inset:0; height:300px; overflow:hidden; }
.pk-real .perch .backdrop .img{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.7; }
.pk-real .perch .backdrop::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,17,13,.15) 0%, rgba(21,17,13,.55) 55%, var(--bg) 100%); }
.pk-real .perch .backdrop .grain{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:20px 20px; }
.pk-real .perch .hero-inner{ position:relative; padding:34px 0 28px; }
.pk-real .perch .lock{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; color:rgba(246,240,230,.65); background:rgba(21,17,13,.5); padding:6px 12px; border-radius:20px; border:1px solid rgba(239,233,223,.12); margin-bottom:64px; }
.pk-real .perch .lock svg{ width:12px; height:12px; }
.pk-real .perch .eyebrow{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--acc); margin-bottom:18px; background:rgba(21,17,13,.55); border:1px solid rgba(239,233,223,.12); border-radius:6px; padding:5px 10px; }
.pk-real .perch .idrow{ display:flex; align-items:flex-end; gap:20px; }
.pk-real .perch .p-avatar{ width:64px; height:64px; border-radius:14px; background:linear-gradient(140deg,var(--acc),var(--acc-d)); display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:600; font-size:26px; color:#fff; flex-shrink:0; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.pk-real .perch h1{ font-family:var(--font-serif); font-weight:600; font-size:44px; line-height:.98; letter-spacing:-.025em; color:var(--ink); margin:0; }
.pk-real .perch .sub{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:rgba(246,240,230,.6); margin-top:9px; }
.pk-real .perch .oneliner{ font-family:var(--font-serif); font-style:italic; font-size:20px; line-height:1.46; color:#ddd4c6; max-width:680px; margin:24px 0 0; }
.pk-real .perch .tags{ display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; }
.pk-real .perch .tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border:1px solid rgba(174,187,143,.32); border-radius:2px; color:var(--sage); }
.pk-real .perch .stats{ display:flex; gap:46px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.pk-real .perch .stat .n{ font-family:var(--font-serif); font-weight:600; font-size:30px; color:var(--acc); line-height:1; }
.pk-real .perch .stat .l{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); margin-top:8px; }
.pk-real .perch .section{ padding:32px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:150px 1fr; gap:30px; }
.pk-real .perch .section h2{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); font-weight:500; padding-top:5px; margin:0; }
.pk-real .perch .section p{ font-size:17px; line-height:1.62; color:var(--ink2); margin:0; white-space:pre-wrap; }
.pk-real .perch .section.featured p{ color:var(--ink); font-size:18px; }
.pk-real .perch .voice{ padding:44px 0; border-bottom:1px solid var(--line); }
.pk-real .perch .voice .vlabel{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:18px; }
.pk-real .perch .voice blockquote{ font-family:var(--font-serif); font-weight:500; font-size:27px; line-height:1.34; letter-spacing:-.012em; color:var(--ink); max-width:680px; margin:0; }
.pk-real .perch .matsec{ padding:34px 0 8px; }
.pk-real .perch .matsec h2{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); font-weight:500; margin:0 0 18px; }
.pk-real .perch .gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pk-real .perch .pcardlink{ border:1px solid var(--line); border-radius:5px; background:linear-gradient(160deg,rgba(174,187,143,.06),rgba(224,122,84,.06)); display:flex; flex-direction:column; gap:12px; padding:16px; text-decoration:none; }
.pk-real .perch .pcardlink .ic{ width:24px; height:24px; color:var(--sage); }
.pk-real .perch .pcardlink .ck{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); }
.pk-real .perch .pcardlink .cn{ font-family:var(--font-serif); font-size:16px; color:#e8e0d3; margin-top:3px; word-break:break-word; }

/* ════════ Shared mini-Snapshot hero (Town Square + co-founder thumbnail) ════════ */
.pk-real .ts-mini { display:block; width:100%; text-align:left; cursor:pointer; border:none; padding:0; font:inherit; background:#15110d; }
.pk-real .ts-mini-hero { position:relative; min-height:130px; padding:18px 22px 16px; display:flex; flex-direction:column; justify-content:flex-end; background-size:cover; background-position:center; }
.pk-real .ts-mini-hero.acc-terracotta { --acc:#e07a54; } .pk-real .ts-mini-hero.acc-indigo { --acc:#7c83d3; }
.pk-real .ts-mini-hero.acc-moss { --acc:#8a9b6e; } .pk-real .ts-mini-hero.acc-rose { --acc:#d36c84; }
.pk-real .ts-mini-hero.img-photo::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,17,13,.35) 0%, rgba(21,17,13,.84) 100%); }
.pk-real .ts-mini-grain { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size:20px 20px; }
.pk-real .ts-mini-ov { position:relative; }
.pk-real .ts-mini-eyebrow { font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); margin-bottom:8px; }
.pk-real .ts-mini-name { font-family:var(--font-serif); font-weight:600; font-size:26px; line-height:1.02; letter-spacing:-.02em; color:#f6f0e6; margin:0; }
.pk-real .ts-mini-quote { font-family:var(--font-serif); font-size:14.5px; line-height:1.4; color:#cfc6b9; margin:7px 0 0; max-width:52ch; }

/* ════════ Town Square card ════════ */
.pk-real .ts-card { --acc:#e07a54; border:1px solid var(--border-subtle); border-radius:14px; overflow:hidden; box-shadow:0 8px 26px rgba(45,37,32,.08); }
.pk-real .ts-card.acc-terracotta { --acc:#e07a54; } .pk-real .ts-card.acc-indigo { --acc:#7c83d3; }
.pk-real .ts-card.acc-moss { --acc:#8a9b6e; } .pk-real .ts-card.acc-rose { --acc:#d36c84; }
.pk-real .ts-mini-foot { display:flex; align-items:center; gap:12px; padding:11px 16px; background:#fff; border-top:1px solid var(--border-subtle); }
.pk-real .ts-mini-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.pk-real .ts-mini-sub { font-size:12.5px; color:var(--text-tertiary); }
.pk-real .ts-mini-tag { font-size:10.5px; color:var(--text-secondary); background:var(--bg-secondary); border-radius:999px; padding:2px 8px; }
.pk-real .ts-mini-stat { margin-left:auto; display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.pk-real .ts-mini-stat-n { font-family:var(--font-serif); font-weight:600; font-size:15px; color:var(--text-primary); }
.pk-real .ts-mini-stat-l { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-tertiary); }
.pk-real .ts-mini-expand { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--accent-sage); white-space:nowrap; }
.pk-real .ts-exp-ic { width:13px; height:13px; flex:none; }
.pk-real .ts-cardbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; background:#fff; border-top:1px solid var(--border-subtle); }
.pk-real .ts-cardbar .perch-followbar { margin:0; border:none; padding:0; background:none; }
.pk-real .perch-followbar { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.pk-real .perch-followbar .pfb-count { font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--text-tertiary); }
.pk-real .perch-followbar .pfb-btn { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:8px 16px; border-radius:4px; background:none; border:1px solid var(--border-emphasis); color:var(--text-secondary); cursor:pointer; }
.pk-real .btn-sage { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent-sage); color:#fff; border:none; border-radius:var(--radius-sm); padding:10px 18px; font:600 13.5px var(--font-sans); cursor:pointer; margin-left:auto; }

/* ════════ Co-founder deck ════════ */
.pk-real .cf-swipe { display:flex; flex-direction:column; align-items:center; gap:20px; }
.pk-real .cf-deck { position:relative; width:min(440px,100%); }
.pk-real .match-card { position:relative; background:var(--surface); border:1px solid var(--border-subtle); }
.pk-real .cf-card { position:relative; padding:18px 18px 16px; border-radius:12px; box-shadow:0 1px 2px rgba(26,26,26,.04); }
.pk-real .cf-card .mc-name { font-size:16.5px; font-weight:600; line-height:1.3; }
.pk-real .cf-deck-card { width:100%; padding:24px 22px 22px; border-radius:16px; box-shadow:0 14px 36px rgba(26,26,26,.13); }
.pk-real .cf-hero-thumb { border-radius:10px; overflow:hidden; min-height:116px; margin-bottom:13px; }
.pk-real .cf-deck-card .cf-hero-thumb { min-height:132px; }
.pk-real .cf-brings { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.pk-real .cf-bring-pill { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:5px 13px 5px 5px; border-radius:999px; border:1px solid transparent; line-height:1; }
.pk-real .cf-bring-pill.cf-bring-r1 { background:var(--accent-terracotta-soft); color:var(--accent-terracotta); border-color:rgba(198,90,54,.3); }
.pk-real .cf-bring-pill.cf-bring-r2 { background:var(--accent-sage-soft); color:var(--accent-sage); border-color:rgba(125,148,113,.3); }
.pk-real .cf-bring-rank { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:999px; font-size:10px; font-weight:700; color:var(--text-on-dark); }
.pk-real .cf-bring-r1 .cf-bring-rank { background:var(--accent-terracotta); } .pk-real .cf-bring-r2 .cf-bring-rank { background:var(--accent-sage); }
.pk-real .cf-seek-line { font-size:13px; line-height:1.5; color:var(--text-secondary); margin-top:11px; }
.pk-real .mc-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.pk-real .mc-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--text-tertiary); background:var(--bg-secondary); border-radius:999px; padding:3px 9px; }
.pk-real .cf-blurb { font-size:13px; color:var(--text-secondary); margin-top:10px; line-height:1.5; }
.pk-real .cf-viewfull { margin-top:12px; padding:0; border:0; background:none; font:inherit; font-size:12px; font-weight:600; color:var(--accent-terracotta); cursor:pointer; }
.pk-real .cf-deck-acts { display:flex; gap:14px; width:min(440px,100%); }
.pk-real .cf-act-btn { flex:1; padding:13px 12px; border-radius:11px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; border:1px solid var(--border-emphasis); background:var(--surface); color:var(--text-secondary); }
.pk-real .cf-act-yes { background:var(--accent-terracotta); border-color:var(--accent-terracotta); color:#fff; }
.pk-real .cf-deck-count { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-tertiary); }
.pk-real .cf-match-ov { position:relative; display:flex; align-items:center; justify-content:center; background:rgba(26,26,26,.34); border-radius:16px; padding:40px 24px; }
.pk-real .cf-match-card { background:var(--surface); border:1px solid var(--border-subtle); border-radius:16px; padding:30px 30px 24px; max-width:380px; width:calc(100% - 40px); text-align:center; box-shadow:0 24px 70px rgba(26,26,26,.26); }
.pk-real .cf-match-mark svg { width:60px; height:40px; margin:0 auto 14px; display:block; }
.pk-real .cf-match-head { font-family:var(--font-serif); font-weight:500; font-size:21px; color:var(--text-primary); }
.pk-real .cf-match-sub { margin-top:8px; font-size:14px; line-height:1.5; color:var(--text-secondary); }
.pk-real .cf-match-row { display:flex; gap:12px; justify-content:center; margin-top:22px; }
.pk-real .cf-match-row .btn-gold, .pk-real .cf-match-row .btn-quiet { margin:0; }

/* ════════ Chat thread ════════ */
.pk-real .msg-thread { display:flex; flex-direction:column; min-height:380px; border:1px solid var(--border-subtle); border-radius:8px; background:#fff; overflow:hidden; box-shadow:0 20px 50px rgba(45,37,32,.12); }
.pk-real .th-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-subtle); }
.pk-real .th-who { font-weight:600; font-size:14px; }
.pk-real .th-body { flex:1; display:flex; flex-direction:column; gap:8px; padding:16px; overflow-y:auto; max-height:440px; }
.pk-real .th-msg { max-width:78%; padding:8px 12px; border-radius:11px; background:#f4f1ec; align-self:flex-start; }
.pk-real .th-msg.mine { align-self:flex-end; background:var(--accent-sage-soft); }
.pk-real .th-text { font-size:13.5px; line-height:1.45; white-space:pre-wrap; }
.pk-real .th-time { font-size:10px; color:var(--text-tertiary); margin-top:3px; }
.pk-real .th-foot { display:flex; gap:8px; padding:11px 14px; border-top:1px solid var(--border-subtle); }
.pk-real .th-input { flex:1; font:inherit; font-size:13.5px; padding:8px 11px; resize:none; border:1px solid var(--border-subtle); border-radius:6px; background:#fff; color:var(--text-primary); }
.pk-real .th-send { flex:none; align-self:flex-end; }

/* ════════ Kanban pipeline (scoped overrides under .board so it doesn't touch cf cards) ════════ */
.pk-real .board { display:flex; gap:14px; padding:4px; overflow-x:auto; }
.pk-real .col { flex:1 0 200px; min-width:200px; display:flex; flex-direction:column; background:var(--bg-secondary); border-radius:var(--radius-md); padding:12px 10px 12px; }
.pk-real .col-head { display:flex; align-items:baseline; gap:8px; padding:0 6px 10px; }
.pk-real .col-head .name { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-secondary); }
.pk-real .col-head .count { font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); }
.pk-real .col-cards { display:flex; flex-direction:column; gap:8px; }
.pk-real .board .match-card { border-left:3px solid var(--accent-sage); border-radius:var(--radius-sm); padding:11px 13px; }
.pk-real .board .mc-head { display:flex; align-items:baseline; gap:8px; }
.pk-real .board .mc-name { font-weight:600; font-size:14px; line-height:1.3; }
.pk-real .board .mc-domain { font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); text-decoration:none; margin-left:auto; white-space:nowrap; }
.pk-real .board .mc-tag { font-family:var(--font-mono); font-size:10px; color:var(--accent-sage); background:var(--accent-sage-soft); border-radius:var(--radius-sm); padding:2px 6px; }
.pk-real .board .mc-thesis { font-size:12px; line-height:1.5; color:var(--text-secondary); margin-top:8px; }
.pk-real .board .mc-meta { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; font-family:var(--font-mono); font-size:11px; color:var(--text-secondary); }
.pk-real .board .mc-act { margin-top:9px; }
.pk-real .board .mc-foot { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid var(--border-subtle); }
.pk-real .board .mc-prov { font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-tertiary); }
.pk-real .gl-card { background:var(--surface); border:1px solid var(--border-subtle); border-left-width:3px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:11px 14px; }
.pk-real .gl-resting { border-left-color:var(--accent-maroon); } .pk-real .gl-pending { border-left-color:var(--accent-gold); } .pk-real .gl-greenlit { border-left-color:var(--accent-sage); }
.pk-real .gl-head { display:flex; align-items:center; gap:8px; }
.pk-real .gl-dot { width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:var(--accent-maroon); }
.pk-real .gl-pending .gl-dot { background:var(--accent-gold); } .pk-real .gl-greenlit .gl-dot { background:var(--accent-sage); }
.pk-real .gl-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.pk-real .gl-menu-btn { margin-left:auto; background:none; border:none; color:var(--text-tertiary); cursor:pointer; font-size:16px; line-height:1; padding:0 4px; }
.pk-real .gl-line { margin-top:4px; font-size:12.5px; color:var(--text-secondary); }
.pk-real .gl-greenlit .gl-line { color:var(--accent-sage); font-weight:600; }
.pk-real .gl-align { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.pk-real .gl-tick { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--text-tertiary); border:1px solid var(--border-subtle); border-radius:999px; padding:1px 8px; }
.pk-real .gl-tick-mark { color:var(--accent-sage); font-weight:700; }
.pk-real .gl-actions { display:flex; align-items:center; gap:9px; margin-top:10px; flex-wrap:wrap; }
.pk-real .gl-btn { font:inherit; font-size:12.5px; font-weight:600; color:var(--text-primary); background:var(--surface); border:1px solid var(--border-emphasis); border-radius:var(--radius-sm); padding:5px 12px; cursor:pointer; }
/* solid-green achieved opt-in state (matches the app's .opt-done) */
.gl-btn.opt-done, .pk-real .gl-btn.opt-done { background:var(--accent-sage, #7d9471); color:#17130f; border-color:transparent; opacity:1; cursor:default; }
.pk-real .gl-note { font-size:10.5px; color:var(--text-tertiary); }

/* ════════ Unified application doc ════════ */
.pk-real .app-doc { max-width:680px; margin:0 auto; }
.pk-real .doc-lineage { font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--text-tertiary); margin:0 0 18px; }
.pk-real .doc-sec, .pk-real .doc-struct { margin-bottom:24px; }
.pk-real .doc-h { font-family:var(--font-serif); font-weight:500; font-size:17px; color:var(--text-primary); margin:0 0 10px; }
.pk-real .doc-frozen { font-size:15px; line-height:1.6; color:var(--text-secondary); white-space:pre-wrap; padding-left:14px; border-left:2px solid var(--border-subtle); }
.pk-real .doc-note { font-size:12.5px; color:var(--text-tertiary); margin:-4px 0 10px; line-height:1.45; max-width:52ch; }
.pk-real .doc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px 16px; }
.pk-real .doc-materials .doc-grid { grid-template-columns:1fr; }
.pk-real .doc-field { display:flex; flex-direction:column; gap:3px; }
.pk-real .doc-flabel { font-size:11.5px; color:var(--text-tertiary); }
.pk-real .doc-fval { font-size:14px; color:var(--text-secondary); }
.pk-real .doc-link { font-size:14px; color:var(--accent-terracotta); text-decoration:none; word-break:break-all; }
.pk-real .doc-foot { display:flex; align-items:center; gap:16px; margin-top:26px; padding-top:18px; border-top:1px solid var(--border-subtle); }
.pk-real .doc-status { font-size:12.5px; color:var(--text-tertiary); } .pk-real .doc-status-saved { color:var(--accent-sage); }

/* ════════ Shared buttons (canonical) ════════ */
.pk-real .btn-gold { margin-left:auto; font-size:14px; font-weight:600; color:var(--text-primary); background:var(--accent-gold); border:none; padding:9px 18px; border-radius:var(--radius-sm); cursor:pointer; }
.pk-real .btn-quiet { font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--text-primary); background:none; border:1px solid var(--border-emphasis); border-radius:var(--radius-sm); padding:7px 14px; cursor:pointer; }
/* "Interest sent" confirmed state (Town Square — already-clicked) */
.pk-real .ts-interest.sent { background:var(--accent-sage-soft); color:var(--accent-sage); border:none; cursor:default; margin-left:auto; }