/* Listener, Broadcaster, Coming Soon, and the legal and Help Shape pages (#14, #1587): listening and broadcasting side by side on a computer. */
.home-grid { display: grid; gap: 0 var(--s3); align-items: stretch; }
@media (min-width: 900px) {
    .home-grid { grid-template-columns: 1fr 1fr; }
    .home-grid-listener, .home-grid-broadcaster { align-items: start; }
    .home-grid-listener #listening, .home-grid-broadcaster #plans { align-self: stretch; }
    .home-grid-listener #listening { grid-row: span 2; }
    .home-grid-broadcaster #plans { grid-column: 2; grid-row: 1 / span 3; }
}
/* The terms and the privacy policy: long text with headings but no sections. */
.legal h2 { margin-top: var(--s4); }
/* A reading measure for long prose; every other page uses the full frame (docs/design.md, Layout). */
.legal p, .legal li, .legal-short li { max-width: 75ch; }
/* The privacy "In Short" box sits above the text. */
.legal-short h2 { margin: 0 0 var(--s1); font-size: 20px; }
.legal-short ul { margin: 0 0 var(--s1); padding-left: 1.2em; display: grid; gap: 4px; }
.legal-short > :last-child { margin-bottom: 0; }
/* Help Shape Mix the Mix (#705, #1588, #1999). */
.shape-intro, .shape-contact { display: grid; gap: 12px; align-content: start; }
.shape-contact h2 { margin: 0; }
.chip { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: 22px; background: none; color: var(--text); font-family: var(--font-ui); font-size: 16px; text-decoration: none; cursor: pointer; }
.chip:hover { background: var(--bg); color: var(--text); }
/* The Help Shape questionnaire (#1595). */
.shape-form { display: grid; gap: var(--s2); }
.shape-form h2, .shape-form h3, .shape-form form p { margin: 0; }
.shape-form form, .shape-fields { display: grid; gap: var(--s2); }
.shape-step { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.shape-step legend { font-family: var(--font-ui); font-weight: 600; color: var(--silver); padding: 0; margin-bottom: var(--s1); }
.shape-choices { display: flex; flex-wrap: wrap; gap: var(--s1); }
.shape-choices .chip { gap: var(--s1); }
.shape-choices .chip:has(input:checked) { border-color: var(--copper); }
.shape-form textarea { width: 100%; box-sizing: border-box; }
.shape-form [hidden] { display: none; }
.shape-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* Refer a Broadcaster is shown to the same roles as the home page's panel (listen.css; js/first-paint.js sets them). */
.shape-refer { display: none; }
html[data-roles~="referrer"] .shape-refer { display: block; }
html:not([data-roles~="recommender"]) .shape-refer .refer-form, html[data-roles~="recommender"] .shape-refer .refer-hint { display: none; }
/* Get the App and Get the Extension (#1588): the requirements as ticks, and one row per store. */
.ticks { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: 4px; }
.ticks li::before { content: "✓"; color: var(--copper-light); margin-right: var(--s1); }
.store-list { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: var(--s1); }
.store-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); }
.store-list .btn { min-width: 11em; }
/* Coming Soon (#1587): the items of each group in columns from a tablet up. */
.soon-grid { display: grid; gap: 0 var(--s3); margin-bottom: var(--s3); }
@media (min-width: 700px) { .soon-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.soon-for { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.soon-grid h3 { margin-top: 0; }
/* The Broadcaster page's plans: read only, a card each; an odd last card spans the row. */
.plan-cards { display: grid; gap: var(--s1); margin: 0 0 var(--s2); }
@media (min-width: 560px) { .plan-cards { grid-template-columns: 1fr 1fr; } }
.plan-card { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: var(--s2); display: grid; gap: 4px; align-content: start; }
.plan-card h3 { margin: 0; }
.plan-card p { margin: 0; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .plan-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }