/* Layouts, picked per proposal with "layout" in its file or ?layout= in the link.
   studio:  the long proposal page (cover, numbered sections, closing).
   compact: one screen, the preview with the cards beside it.
   letter:  compact, with a short signed note from the founder as the first card. */

/* About Hyperdesk, shared by the side card and the studio section; the badge closes it */
.cred { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 28px; padding: 3px 12px 3px 4px; border-radius: 999px; background: #FFF1E8; color: #8A3A10; font-size: 13px; font-weight: 500; white-space: nowrap; }
.yc-mark { flex: none; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: #F26522; color: #FFFFFF; font: 600 13px/1 var(--font); }
.why { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.why-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; }
.why-text { margin: 0; color: var(--text-2); }
.why-more { margin: 0; color: var(--muted); }
.why .cred, .about .cred { margin-top: 2px; }
.why-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.why-points li { display: flex; gap: 8px; align-items: flex-start; }
.why-points svg { flex: none; margin-top: 2px; color: var(--muted); }
.quotes { display: grid; gap: 10px; }
.quote { margin: 0; padding: 16px; border-radius: 16px; background: var(--soft); display: flex; flex-direction: column; gap: 8px; }
.quote p { margin: 0; }
.quote cite { font-style: normal; font-size: 13px; color: var(--muted); }

.about { display: flex; flex-direction: column; gap: 24px; }
.about .why-text { font-family: var(--serif); font-size: 36px; line-height: 1.08; letter-spacing: -0.015em; color: var(--text); max-width: 30ch; text-wrap: balance; }
.about .why-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; font-size: 15px; }
.about .why-more { max-width: 62ch; font-size: 17px; }
.about .quotes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Letter: a signed note from the founder */
.letter { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.letter img { height: 20px; width: auto; align-self: flex-start; margin-bottom: 6px; }
.letter-hi { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -0.015em; }
.letter p { margin: 0; color: var(--text-2); }
.letter-sign { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.1; color: var(--text); }
.letter-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hair); }

.head-lead { display: none; }

/* Studio keeps the side panel short; its about section lives in the page */
body.layout-studio .why { display: none; }

/* Compact and letter: one screen, no long page */
body:not(.layout-studio) .doc-only { display: none !important; }
body:not(.layout-studio) .head .sec { display: none; }
@media (min-width: 900px) {
  body:not(.layout-studio) .head-lead { display: flex; }
  body.layout-compact .who { display: flex; }
}

@media (max-width: 899px) {
  .about .why-text { font-size: 28px; }
  .about .why-points { grid-template-columns: minmax(0, 1fr); }
  /* Compact and letter open straight into the full-screen preview */
  body:not(.layout-studio) .explore-close { display: none; }
  body:not(.layout-studio) .head { padding-left: max(20px, env(safe-area-inset-left, 0px)); }
  .why, .letter { padding: 16px 20px; border-radius: 0; }
  .letter img { display: none; }
  .letter-hi { font-size: 26px; }
  body.layout-letter .who { display: none; }
}

.field select { min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--soft); font: 400 15px/1 var(--font); color: var(--text); }
@media (min-width: 900px) { body.focus .head-lead { color: var(--paper); } }

/* The call card stays right under the plan; the proof card follows it */
.panel .actions { order: 1; }
.panel .why { order: 2; }