/* Phone layout for /index.html (loaded at (max-width: 760px)). */
/* What changes on a phone:
- 16px side gutters everywhere, smaller hero type, shorter section gaps.
- Primary CTAs and every card button go full width and >= 44px tall.
- Plan cards keep their order but tighten, so the three plans read fast.
- Library cards turn into compact rows (layout thumbnail left, name and
votes right, tags and buttons below) instead of 20 full-width cards at
~460px each; filter and sort chips become one sideways-scrolling row. */
/* ---------- gutters + section rhythm ---------- */
.hero { padding: 40px 16px 8px; }
.how, .demo-sec, .pricing, .library, .faq { margin-top: 56px; padding: 0 16px; }
.closer { margin-top: 64px; padding: 0 16px; }
.foot { margin-top: 64px; }
/* Mono labels sit at .74rem (11.8px) on desktop; nudge them to 12px+. */
.section-label { font-size: .76rem; margin-bottom: 14px; }
/* Section headings: the desktop 1.7rem is fine, but the pricing h2 carries
an inline font-size, so it is matched here only by the shared rule. */
.how h2, .demo-sec h2, .library h2, .faq h2 { font-size: 1.5rem; line-height: 1.15; }
.pricing h2 { font-size: 1.5rem !important; line-height: 1.15; } /* beats the inline style="font-size:1.7rem" */
.how-sub, .demo-sub, .lib-sub, .faq-sub { font-size: 1rem; margin-bottom: 20px; }
/* ---------- hero ---------- */
/* The eyebrow is 50 characters of spaced mono; let it wrap as a balanced
pair of lines instead of one long line plus an orphan word. */
.hero .eyebrow { text-wrap: balance; line-height: 1.6; font-size: .76rem; }
.hero h1 { font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.08; margin: 12px 0 14px; text-wrap: balance; }
.hero .lede { font-size: 1rem; line-height: 1.6; }
.hero .cta-row { margin-top: 24px; }
.hero .cta-row .btn { width: 100%; min-height: 52px; justify-content: center; }
/* ---------- how it works ---------- */
.steps { grid-template-columns: 1fr; gap: 12px; }
.step { padding: 18px 18px 16px; }
.step .num { font-size: .76rem; margin-bottom: 8px; }
.step p { font-size: .95rem; }
/* ---------- demo ---------- */
.demo video { border-radius: 10px; }
.demo figcaption { font-size: .78rem; }
/* ---------- pricing ---------- */
.free-plan { padding: 16px; gap: 12px; margin-bottom: 16px; }
.free-plan > div { flex-basis: 100%; }
.free-plan p { font-size: .95rem; }
.free-plan .btn { width: 100%; min-height: 44px; justify-content: center; }
.price-grid { grid-template-columns: 1fr; gap: 14px; }
.price-card { padding: 22px 18px 18px; }
.price-card .tag { top: 18px; right: 16px; font-size: .76rem; }
.price-card .big { font-size: 1.85rem; }
.price-card p { font-size: .95rem; }
.price-card ul { margin: 14px 0 18px; gap: 7px; font-size: .92rem; }
.price-card .cta-row .btn { width: 100%; min-height: 48px; justify-content: center; }
.payg-grid { grid-template-columns: 1fr; gap: 12px; }
.payg-card { padding: 18px; }
.payg-card ul { font-size: .9rem; }
.payg-card p { font-size: .95rem; }
.payg-card .btn { align-self: stretch; min-height: 48px; justify-content: center; }
.payg { padding: 14px 16px; font-size: .95rem; }
/* "Sign in" in the payments note is the one text link a returning buyer
needs; give it a finger-sized hit area without changing how it looks. */
#pricingSignin a { display: inline-block; padding: 10px 0; margin: -10px 0; }
/* ---------- track library: tools ---------- */
.lib-tools { gap: 10px; margin-bottom: 16px; }
.lib-search { max-width: none; }
.lib-search input { font-size: 16px; min-height: 46px; } /* 16px stops iOS zooming on focus */
/* Tag filter + sort chips: one row each that scrolls sideways (bleeding to
the screen edge) instead of wrapping into three rows of small pills. */
.lib-tools .lib-filter, .lib-sort .lib-filter {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
overscroll-behavior-x: contain; margin: 0 -16px; padding: 0 16px;
}
.lib-tools .lib-filter::-webkit-scrollbar { display: none; }
.lib-filter .chip { flex: none; min-height: 40px; padding: 0 15px; font-size: .78rem; white-space: nowrap; }
.lib-controls { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; } /* nowrap: a wrapping column sizes to its widest chip row */
.lib-controls .lbl { font-size: .76rem; min-width: 4.5em; flex: none; }
.lib-select { width: 100%; }
.lib-select select { flex: 1; min-width: 0; max-width: none; min-height: 44px; font-size: 16px; } /* 16px: no iOS zoom; min-width 0 so a long country name can't widen the page */
.lib-sort { flex-wrap: nowrap; min-width: 0; }
.lib-sort .lib-filter { margin: 0 -16px 0 0; padding: 0 16px 0 0; min-width: 0; }
/* ---------- track library: compact cards ----------
.lib-thumb and .lib-body are flattened (display: contents) so their
children sit straight on the card's grid: thumbnail left, name / meta /
votes beside it, tags then buttons across the full width. The vote
buttons leave the thumbnail (where they were tiny overlays) for the row
next to it. Comments open under the buttons. */
.lib-grid { grid-template-columns: 1fr; gap: 12px; }
/* The middle column only exists so the two buttons split the card 50/50:
112px + gap + (50% - 130px) = 50% - 6px, the same as the last column. */
.lib-card {
display: grid; grid-template-columns: 112px calc(50% - 130px) minmax(0, 1fr);
grid-template-areas:
"thumb name name"
"thumb meta meta"
"thumb votes votes"
"tags tags tags"
"cbtn cbtn dl"
"talk talk talk";
grid-template-rows: auto auto 1fr;
column-gap: 12px; padding: 12px;
}
.lib-card:hover { transform: none; } /* no hover lift on touch */
.lib-thumb, .lib-body { display: contents; }
.lib-layout, .lib-thumb .ph {
grid-area: thumb; position: relative; inset: auto; align-self: start;
width: 112px; height: 112px; padding: 8px; border-radius: 8px;
border: 1px solid var(--contour); box-sizing: border-box;
}
.lib-thumb .ph { font-size: 1.3rem; }
.lib-body h3 { grid-area: name; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; }
.lib-meta { grid-area: meta; margin-top: 4px; font-size: .76rem; }
.lib-line { display: none; } /* always empty; it only spaced the desktop card */
.lib-thumbs { grid-area: votes; position: static; align-self: end; margin-top: 8px; }
.lib-thumbs button { min-height: 40px; padding: 0 14px; font-size: .82rem; }
.lib-tags {
grid-area: tags; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
margin: 12px -12px 0; padding: 0 12px;
}
.lib-tags::-webkit-scrollbar { display: none; }
.lib-tags .chip { flex: none; min-height: 40px; padding: 0 13px; font-size: .76rem; white-space: nowrap; }
.lib-cbtn, .lib-dl {
margin-top: 10px; min-height: 44px; padding: 0 10px; font-size: .88rem;
justify-content: center; text-align: center; white-space: nowrap;
}
.lib-cbtn { grid-area: cbtn; }
.lib-dl { grid-area: dl; }
.lib-dl.none { white-space: normal; line-height: 1.2; }
.lib-comments { grid-area: talk; }
.lib-comment { font-size: .92rem; }
.lib-comment-form textarea { font-size: 16px; min-height: 44px; } /* 16px: no iOS zoom */
.lib-comment-form .btn { min-height: 44px; }
/* ---------- pager ---------- */
.lib-pager { gap: 6px; margin-top: 20px; }
.lib-pager .chip { min-height: 44px; min-width: 44px; padding: 0 14px; font-size: .82rem; }
.lib-note { font-size: .88rem; }
/* ---------- FAQ + closer ---------- */
.faq summary { padding: 16px; font-size: 1rem; line-height: 1.4; display: flex; gap: 12px; justify-content: space-between; }
.faq summary::after { float: none; flex: none; }
.faq details p { padding: 0 16px 16px; font-size: .95rem; }
.closer h2 { font-size: 1.6rem; }
.closer .btn { width: 100%; min-height: 52px; justify-content: center; }
/* Narrowest phones (360px): the thumbnail gives a little room back. */
@media (max-width: 380px) {
.lib-card { grid-template-columns: 96px calc(50% - 111px) minmax(0, 1fr); column-gap: 10px; }
.lib-layout, .lib-thumb .ph { width: 96px; height: 96px; padding: 6px; }
.lib-thumbs button { padding: 0 11px; }
.lib-cbtn, .lib-dl { font-size: .84rem; }
}