/* PromptShare guest landing. Tokens only. Honest page: the hero IS the product; no stars, counts, testimonials or badges. */

.ps-land { background: var(--bg); overflow-x: clip; }
.ps-land main { max-width: calc(var(--page-w) + var(--sp-12)); margin: var(--sp-0) auto; padding: var(--sp-0) var(--sp-6); }

/* hero */
/* minor 9: the copy column is shorter than the panel, so centring left ~290px of dead band under it. */
.ps-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-12); align-items: start; padding: var(--sp-20) var(--sp-0) var(--sp-16); }
.ps-hero-copy { position: sticky; top: calc(var(--nav-h) + var(--sp-8)); }
.ps-hero-kicker { color: var(--text-3); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-medium); margin-bottom: var(--sp-4); }
.ps-hero-title { font-family: var(--font-display); font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-medium); letter-spacing: var(--ls-hero); text-wrap: balance; }
.ps-hero-sub { margin-top: var(--sp-5); color: var(--text-2); font-size: var(--fs-read); line-height: var(--lh-read); max-width: 58ch;   /* MA5-8: 52ch was below the prose floor — the hero's sub is prose, not a panel line */ text-wrap: pretty; }
.ps-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8); }
.ps-hero-fine { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-label); line-height: var(--lh-label); }

/* try-it editor: one surface, sections divided by hairlines (no box in box) */
.ps-try { border-radius: var(--r-xl); border: var(--sp-px) solid var(--border-strong); background: var(--surface-1); box-shadow: var(--e-3); display: grid; min-width: 0; }
.ps-try > * { padding-inline: var(--sp-6); }
.ps-try-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-5); }
.ps-try-title { font-family: var(--font-display); font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); }
.ps-try-note { color: var(--text-3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.ps-try-samples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-top: var(--sp-3); padding-bottom: var(--sp-4); }
.ps-try-or { color: var(--text-3); font-size: var(--fs-meta); margin-right: var(--sp-1); }
.ps-try-editor { background: var(--bg); border-block: var(--sp-px) solid var(--border); padding-block: var(--sp-5); min-height: calc(var(--sp-24) * 1.5); }
/* MA4-6: this was the same `max-width: none` exemption MA3-3 was filed about, one file over, at 74.4ch on a
   guest's first contact with a prompt. The law has no exemptions. */
.ps-try-editor .ps-prompt { outline: none; }
.ps-try-found { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); }
.ps-try-found .ps-h { color: var(--var); }
.ps-try-found .ps-h .ps-i { width: var(--sp-3); height: var(--sp-3); }
.ps-try-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: center; padding-top: var(--sp-3); padding-bottom: var(--sp-5); }
.ps-try-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-4); padding-bottom: var(--sp-4); border-top: var(--sp-px) solid var(--border); }
.ps-try-save { margin-left: auto; color: var(--accent); }
.ps-try-save:hover { border-color: var(--accent); }

/* sections */
/* rhythm: 96px around a section, 80px between the verb rows inside one, 48px from a head to its content */
.ps-sec-l { padding: var(--sp-24) var(--sp-0); border-top: var(--sp-px) solid var(--border); }
.ps-sec-head { max-width: 60ch; margin-bottom: var(--sp-12); }
.ps-sec-l--tight { padding: var(--sp-20) var(--sp-0); }
.ps-sec-title { font-family: var(--font-display); font-size: var(--fs-head); line-height: var(--lh-head); font-weight: var(--fw-medium); letter-spacing: var(--ls-hero); text-wrap: balance; }
/* three blocks found by check-measure.mjs once it ran at more than 1440: at 768 they reached 77ch, 88ch and
   83ch against a 76ch prose ceiling. Only the width coverage was new; the defects had been there all along. */
.ps-sec-sub { margin-top: var(--sp-3); max-width: var(--measure); color: var(--text-2); font-size: var(--fs-read); line-height: var(--lh-read); text-wrap: pretty; }

/* align-items: start — a 5-line copy block beside a tall shot left 400–500px of dead column three times */
.ps-verb { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-12); align-items: start; }
.ps-verb + .ps-verb { margin-top: var(--sp-20); padding-top: var(--sp-20); border-top: var(--sp-px) solid var(--border); }
.ps-verb--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.ps-verb--flip .ps-verb-copy { order: 2; }
.ps-verb-shot { justify-self: start; max-width: 100%; }
.ps-verb--flip .ps-verb-shot { justify-self: end; }
.ps-verb-n { width: var(--sp-6); height: var(--sp-6); display: grid; place-items: center; border-radius: var(--r-pill); border: var(--sp-px) solid var(--border-strong); color: var(--text-2); font-size: var(--fs-meta); margin-bottom: var(--sp-4); }
.ps-verb-title { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); }
.ps-verb-body { margin-top: var(--sp-3); color: var(--text-2); font-size: var(--fs-read); line-height: var(--lh-read); text-wrap: pretty; max-width: 44ch; }
.ps-verb-replaces { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--sp-px) solid var(--border); color: var(--text-3); font-size: var(--fs-label); line-height: var(--lh-label); max-width: 40ch; }
.ps-verb-replaces b { color: var(--text-2); font-weight: var(--fw-medium); }
.ps-verb-fig { display: grid; gap: var(--sp-3); margin: var(--sp-0); }
.ps-verb-cap { color: var(--text-3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.ps-verb-cap b { color: var(--text-2); font-weight: var(--fw-medium); }
.ps-verb-shot, .ps-recipient-shot { margin: var(--sp-0); border-radius: var(--r-lg); border: var(--sp-px) solid var(--border-strong); overflow: hidden; background: var(--surface-1); box-shadow: var(--e-2); }
.ps-verb-shot img, .ps-recipient-shot img { display: block; width: 100%; height: auto; }

.ps-recipient { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-16); align-items: center; }
.ps-recipient-privacy { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: var(--sp-px) solid var(--border); color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-read); max-width: 56ch; }
.ps-recipient-privacy .ps-i { margin-top: var(--sp-1); color: var(--text-3); }
.ps-recipient-shot { max-width: calc(var(--sp-24) * 3.5); justify-self: end; border-radius: var(--r-xl); }

.ps-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-0); border-block: var(--sp-px) solid var(--border); }
.ps-loop li + li { border-left: var(--sp-px) solid var(--border); }
.ps-loop a { display: grid; gap: var(--sp-1); align-content: start; height: 100%; padding: var(--sp-6) var(--sp-5); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); transition: background var(--t-fast) var(--ease-out); }
.ps-loop li:first-child a { padding-left: var(--sp-0); }
.ps-loop a:hover { background: var(--surface-1); }
.ps-loop strong { color: var(--text); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.ps-loop-ic { color: var(--accent); margin-bottom: var(--sp-3); }

.ps-plans-wrap { overflow-x: auto; }
.ps-plans { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: var(--lh-body); }
.ps-plans th, .ps-plans td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: var(--sp-px) solid var(--border); font-weight: var(--fw-regular); }
.ps-plans thead th { font-family: var(--font-display); font-size: var(--fs-title); font-weight: var(--fw-medium); color: var(--text); padding-bottom: var(--sp-4); width: 18%; }
.ps-plans tbody th { color: var(--text-2); padding-left: var(--sp-0); }
.ps-plans td { color: var(--text); }
.ps-plans td .ps-i { color: var(--success); }
.ps-plans tbody tr:hover { background: var(--surface-1); }
.ps-plans-foot { margin-top: var(--sp-5); max-width: var(--measure); color: var(--text-3); font-size: var(--fs-label); }

.ps-faqs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-16); align-items: start; }
.ps-faq { border-bottom: var(--sp-px) solid var(--border); }
.ps-faq:first-child { border-top: var(--sp-px) solid var(--border); }
.ps-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--sp-14); padding: var(--sp-3) var(--sp-0); cursor: pointer; list-style: none; font-size: var(--fs-read); line-height: var(--lh-title); font-weight: var(--fw-medium); color: var(--text); }
.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary .ps-i { color: var(--text-3); transition: transform var(--t-med) var(--ease-out); }
.ps-faq[open] summary .ps-i { transform: rotate(180deg); }
.ps-faq summary:hover .ps-i { color: var(--text); }
.ps-faq p { padding: var(--sp-0) var(--sp-10) var(--sp-5) var(--sp-0); color: var(--text-2); font-size: var(--fs-read); line-height: var(--lh-read); max-width: 64ch; text-wrap: pretty; }

.ps-close { display: grid; justify-items: center; text-align: center; gap: var(--sp-0); padding: var(--sp-24) var(--sp-0); border-top: var(--sp-px) solid var(--border); }
.ps-close-title { font-family: var(--font-display); font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-medium); letter-spacing: var(--ls-hero); margin-bottom: var(--sp-8); text-wrap: balance; }

/* The hero, the verb rows and the FAQ stack at the same width the app drops its detail pane. */
@media (max-width: 1279.98px) {
  .ps-hero { grid-template-columns: 1fr; gap: var(--sp-12); padding: var(--sp-14) var(--sp-0) var(--sp-16); }
  .ps-verb, .ps-recipient, .ps-faqs { grid-template-columns: 1fr; gap: var(--sp-8); }
  .ps-verb--flip .ps-verb-copy { order: 0; }
  .ps-recipient-shot { justify-self: start; }
  .ps-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-loop li:nth-child(3) { border-left: 0; }
  .ps-loop li:nth-child(n+3) { border-top: var(--sp-px) solid var(--border); }
  .ps-loop li:nth-child(3) a { padding-left: var(--sp-0); }
  .ps-sec-l { padding: var(--sp-16) var(--sp-0); }
}
@media (max-width: 767.98px) {
  .ps-land main { padding: var(--sp-0) var(--gutter); }
  .ps-hero { padding: var(--sp-10) var(--sp-0) var(--sp-12); gap: var(--sp-10); }
  .ps-hero-cta .ps-btn { flex: 1 1 auto; }
  .ps-try { border-radius: var(--r-lg); margin: var(--sp-0) calc(var(--sp-1) * -1); }
  .ps-try > * { padding-inline: var(--sp-4); }
  .ps-try-head { flex-direction: column; gap: var(--sp-half); }
  .ps-try-fields { grid-template-columns: max-content minmax(0, 1fr); }
  .ps-try-fields .ps-input { height: var(--target); font-size: var(--fs-input); }
  .ps-try-actions .ps-btn, .ps-try-actions .ps-split { flex: 1 1 100%; --_h: var(--sp-12); }
  .ps-try-actions .ps-split .ps-btn:first-child { flex: 1; }
  .ps-try-actions .ps-split .ps-btn:last-child { flex: none; width: var(--sp-12); }
  .ps-try-save { margin-left: var(--sp-0); }
  .ps-sec-l { padding: var(--sp-12) var(--sp-0); }
  .ps-sec-head { margin-bottom: var(--sp-8); }
  .ps-verb + .ps-verb { margin-top: var(--sp-12); }
  .ps-loop { grid-template-columns: 1fr; }
  .ps-loop li + li { border-left: 0; border-top: var(--sp-px) solid var(--border); }
  .ps-loop a, .ps-loop li:first-child a { padding: var(--sp-5) var(--sp-0); }
  .ps-plans th, .ps-plans td { padding: var(--sp-3) var(--sp-2); font-size: var(--fs-label); }
  .ps-plans thead th { font-size: var(--fs-body); width: auto; }
  .ps-faq p { padding-right: var(--sp-0); }
  .ps-close { padding: var(--sp-16) var(--sp-0); }
}