/* Hypha · JV partner · document: the impressive paperwork. Pitch-deck covers in the generic gloss of a presentation
   (big type, a gradient, a rising line with no numbers), the beautiful proposal, a platform's invitation page.
   A deck can be turned face down (.face, J.turn): its back is a plain grey sheet.

   <article class="doc deck dk-a"><p class="dk-k">Presentation</p><h3 class="dk-h">Title</h3><i class="dk-rule"></i></article>
   <article class="doc deck dk-up"> … <svg class="dk-line" viewBox="0 0 200 80"><path d="…"/></svg></article>
   <div class="face"><article class="doc deck dk-b face-a">…</article><div class="doc dk-back face-b"></div></div>
   <article class="doc proposal"> … <article class="doc platform"> (below) */

.deck {
  --w: 400px;
  width: var(--w);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 26px;
  --f-app: var(--f-sys);
  font-family: var(--f-app, var(--f-sheet));
  color: #fff;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
}
.dk-a { background: radial-gradient(120% 120% at 100% 0%, #3d7bfd 0%, #1d3fa8 38%, #0c1a4a 100%); }
.dk-b { background: radial-gradient(120% 130% at 0% 100%, #ff8a3d 0%, #d6461f 30%, #3b1308 92%); }
.dk-c { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #2563eb 100%); }
.dk-up { background: linear-gradient(160deg, #111827 0%, #1f2937 100%); }
.dk-k { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; }
.dk-h { margin-top: 8px; font-size: 27px; font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.dk-rule { display: block; width: 46px; height: 4px; margin-top: 14px; border-radius: 2px; background: rgb(255 255 255 / 0.85); }
.dk-line { position: absolute; right: 22px; top: 20px; width: 52%; height: auto; overflow: visible; }
.dk-line path { fill: none; stroke: #ffb020; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dk-line .dk-area { fill: rgb(255 176 32 / 0.16); stroke: none; }
.dk-back { background: #e4e6e8; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06); }
@media (max-width: 899px) {
  .deck { --w: min(300px, calc(100vw - 60px)); padding: 16px 18px; }
  .dk-k { font-size: 12px; }
  .dk-h { font-size: 20px; margin-top: 6px; }
  .dk-rule { margin-top: 10px; width: 36px; height: 3px; }
}

/* ---------- the beautiful proposal: a designed cover, their own grey logo box ---------- */
.proposal { --f-app: var(--f-sys); width: 300px; aspect-ratio: 1 / 1.33; display: flex; flex-direction: column; font-family: var(--f-app, var(--f-sheet)); color: #102a43; border-radius: 4px; }
.pp-hero { flex: 1.25; position: relative; padding: 22px 22px; background: linear-gradient(150deg, #0b3954 0%, #087e8b 60%, #bfd7ea 140%); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.pp-hero .po-logo { position: absolute; left: 22px; top: 20px; width: 70px; height: 26px; background: rgb(255 255 255 / 0.24); }
.pp-k { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.pp-h { margin-top: 6px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.pp-toc { flex: 1; padding: 16px 22px 18px; }
.pp-toc li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid #e6ecf1; font-size: 13px; color: #334e68; }
.pp-toc li b { width: 1.4em; color: #087e8b; font-weight: 700; }
.pp-toc .fld { flex: 1; width: auto; height: 9px; }
@media (max-width: 899px) {
  .proposal { width: 200px; }
  .pp-hero { padding: 14px; }
  .pp-hero .po-logo { left: 14px; top: 12px; width: 50px; height: 18px; }
  .pp-h { font-size: 21px; }
  .pp-toc { padding: 10px 14px 12px; }
  .pp-toc li { font-size: 12px; padding: 4px 0; }
}

/* ---------- a platform's invitation: a big button nobody presses ---------- */
.platform { --f-app: var(--f-sys); width: 320px; padding: 24px 24px 22px; font-family: var(--f-app, var(--f-sheet)); color: #1f1f1f; text-align: center; border-radius: 12px; }
.pf-logo { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 12px; background: var(--field); }
.pf-h { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.pf-sub { margin-top: 8px; font-size: 13.5px; color: #5f6368; }
.pf-btn { display: inline-block; margin-top: 16px; padding: 10px 26px; border-radius: 999px; background: #0f62fe; color: #fff; font-size: 14px; font-weight: 600; }
@media (max-width: 899px) {
  .platform { width: 236px; padding: 16px 16px 16px; }
  .pf-logo { width: 34px; height: 34px; margin-bottom: 10px; border-radius: 9px; }
  .pf-h { font-size: 17px; }
  .pf-btn { margin-top: 12px; padding: 8px 20px; font-size: 13px; }
}