/* The YC update (Nov 2026): the listening room as a genre showcase, the uniform feature grid, the check
   lists on the plans and the footer's link columns. Same type, colours and surfaces as the rest. */

/* ---------- Listening room: every take in a two-column list beside the player ---------- */
.sounds .sample-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--row);align-content:start}
/* Every group starts with the same 32 px row (its name, or with the filters showing, only its note), so the first
   take of any group sits on the same line whether the group has a note or not. */
.sample-group{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;gap:16px;min-height:32px;font-size:var(--small);line-height:1.3;color:var(--muted);padding:0 2px 4px;margin:0}
.strip-filter:not([hidden]) ~ .sample-block .sample-group{min-height:24px}
.sounds .sample-button{min-height:78px;padding:16px 18px;gap:12px}
.sounds .sample-text{gap:4px}
.sounds .sample-text strong{font-size:17px}
.sounds .sample-text>span{font-size:13px}
.sounds .sample-length{font-size:14px}
.sounds .sample-button svg{width:16px;height:16px}
.sounds .sample-note{grid-column:1/-1;margin-top:calc(var(--note) - var(--row))}
.prompt-details .prompt-label{font-size:var(--small);color:var(--muted);padding-bottom:4px}
.track-lyrics [data-lyrics]{white-space:pre-line}
.track-song-note{font-size:var(--small);color:var(--muted);margin-top:14px}
@media (max-width:1100px){.sounds .sample-length{display:block}}
@media (max-width:520px){.sounds .sample-button{min-height:66px;padding:13px 12px;gap:8px}.sounds .sample-text strong{font-size:15px}.sounds .sample-text>span{font-size:12px}.sounds .sample-length{font-size:12px}.sounds .sample-button svg{display:none}.sounds .strip-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.strip-filter button{justify-content:space-between;padding:10px 12px;font-size:14px}}
@media (max-width:340px){.sounds .sample-list{grid-template-columns:1fr}}

.sample-block{display:contents}
.strip-filter{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--row);margin-bottom:var(--row)}
.strip-filter button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:0;background:var(--surface-raised);color:var(--ink);font-size:15px;font-weight:500;transition:background-color 180ms ease}
.strip-filter button:hover{background:var(--surface-active)}
.strip-filter button span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.strip-filter button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.strip-filter button[aria-pressed=true] span{color:#4a4b46}
.track-markers{position:relative;height:18px;margin:-14px 0 14px}
.track-markers span{position:absolute;top:0;padding-left:6px;border-left:1px solid var(--muted);font-size:11px;line-height:18px;letter-spacing:.08em;color:var(--muted)}

/* ---------- Everything in one studio: uniform cards, one subgrid row per card ---------- */
.feature-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.feature-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;background:var(--surface);padding:var(--pad);min-width:0}
.feature-card h3{font-size:clamp(22px,1.7vw,26px);line-height:1.2;letter-spacing:-.025em;margin-bottom:10px}
.feature-card>p{font-size:16px;line-height:1.5;color:var(--muted);max-width:44ch;margin-bottom:26px}
/* Twelve frames, one treatment: a 4:3 window, the capture filling it edge to edge, every crop taken at the same
   scale (1000 by 750 px of the 2x capture, so the app's text is the same size in every frame). */
.feature-shot{position:relative;aspect-ratio:4/3;margin:0;background:#181614;border:1px solid var(--surface-active);border-radius:10px;overflow:hidden;align-self:end}
.feature-shot img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focus,50% 50%)}
@media (max-width:1100px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-card{padding:28px}}
@media (max-width:640px){.feature-grid{grid-template-columns:minmax(0,1fr)}.feature-card{padding:24px}}

/* ---------- Plans: what each includes ---------- */
.price-list{list-style:none;margin:0 0 44px;padding:26px 0 0;border-top:1px solid var(--surface-active);display:grid;gap:12px;align-content:start;font-size:17px;line-height:1.4}
.price-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.price-list svg{width:20px;height:20px;margin-top:1px}
.price-list .price-not{color:var(--muted)}
/* one plan, full width: its list in two columns where there is room */
@media (min-width:801px){.price-field .price-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}}
.price-field>p{margin-bottom:30px}
@media (max-width:520px){.price-list{font-size:16px;gap:10px}}

/* ---------- Footer: what Layrs is, then product, resources and company ---------- */
.site-footer .footer-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:var(--gap)}
.footer-intro{grid-column:1/7}
.footer-col{grid-column:span 2}
.footer-intro p{font-size:20px;line-height:1.3;margin-bottom:10px}
.footer-col{display:grid;gap:2px;font-size:16px}
.footer-col p{font-size:var(--small);color:var(--muted);margin-bottom:8px}
.footer-col a{display:flex;align-items:center;min-height:36px;width:fit-content;transition:color 180ms ease}
.footer-col a:hover{color:var(--accent)}
@media (max-width:800px){.site-footer .footer-top{row-gap:28px}.footer-intro{grid-column:1/-1}.footer-col{grid-column:span 4}}
@media (max-width:520px){.footer-col{grid-column:span 6}.footer-col a{min-height:44px}}

/* With the filters showing, the filter names the group, so each group's own heading keeps only its note. */
.strip-filter:not([hidden]) ~ .sample-block .sample-group>span:first-child{visibility:hidden}
/* Light and dark: the same Studio screen in both appearances, a divider you drag between them */
.compare .compare-top{clip-path:inset(0 0 0 var(--split));-webkit-clip-path:inset(0 0 0 var(--split))}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background:var(--accent);pointer-events:none}
.compare-handle::after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.compare-chip{position:absolute;top:12px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.4;pointer-events:none}
.compare-chip-dark{left:12px;background:rgba(0,0,0,.72);color:#f4f5ef}
.compare-chip-light{right:12px;background:rgba(255,255,255,.85);color:#141414}
.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare-range:focus-visible+.compare-handle,.compare:focus-within .compare-handle{outline:2px solid #fff;outline-offset:2px}