/* The engine's own home page (engine/site/home-neutral.ts): plain layout for its sections, readable with no theme; a brand's
   site stylesheet restyles them by these classes. Linked after /site.css by that page only (its own file: site.css is the first
   paint of every page, and the sites that draw their product's home page do not use these). Uses the tokens site.css defines.
   Every class here is home-…, bar the frame's own it reuses (wrap, btn, lead, note): site.css styles the plain words of the other
   sites' pages. No motion here: a rule that animates (animation, transition, a transform) belongs under
   prefers-reduced-motion: no-preference, and the brand's theme carries it. */
.home-hero, .home-items, .home-plans, .home-card, .home-steps, .home-faq, .home-cta, .home-prices { padding-block: clamp(2.5rem, 7vw, 5rem); }
.home .home-alt { background: var(--stone-2); }
.home .home-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.home .home-head h2, .home-cta h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.home h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; margin-bottom: 1rem; }
.home em { font-style: normal; color: var(--accent); }
.home .home-actions { margin-block: 1.5rem .75rem; }
.home .home-media img, .home .home-media video, .home .home-items-list img, .home .home-plan > img, .home .home-steps-list img { display: block; max-width: 100%; height: auto; }
.home .home-media { margin-bottom: 1.5rem; }
.home-hero > .home-media, .home-cta > .home-media { margin-bottom: 0; }
/* A video made for a wider screen is a second <video> (a <source media> means nothing in one): one of the two is shown. */
.home .home-media video.home-size-desktop { display: none; }
@media (min-width: 720px) { .home .home-media video.home-size-phone { display: none; } .home .home-media video.home-size-desktop { display: block; } }
/* Reduced motion: a video that plays by itself does not play, with controls or without (2026-10-14: every film gives way to its
   still), unless it has captions (its words would be lost with it: it stays, with its controls). Its poster, a still <img
   class="home-poster"> beside it, is shown instead (the phone's below 720 px, the wider one from there); otherwise those are
   hidden, and a hidden lazy image is not fetched. One that waits to be played stays. */
.home .home-media img.home-poster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .home .home-media video[autoplay]:not(:has(track)), .home .home-media video[data-autoplay]:not(:has(track)) { display: none; }
  .home .home-media img.home-poster { display: block; }
  .home .home-media img.home-poster.home-size-desktop { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 720px) {
  .home .home-media img.home-poster.home-size-phone { display: none; }
  .home .home-media img.home-poster.home-size-desktop { display: block; }
}
/* A video below the first section that plays by itself (engine/site/video-on-view.ts) has no poster: its still, a lazy picture drawn
   before it, sits under it in the same cell (home-stack) until it plays, and stays for a visitor who asked for less motion (the video
   is hidden then, above) or without the script. Later in the cell paints on top: no z-index, so nothing rises over a look's words. */
.home .home-media.home-stack { display: grid; }
.home .home-media.home-stack > * { grid-area: 1 / 1; }
.home .home-media img.home-still.home-size-desktop { display: none; }
@media (min-width: 720px) { .home .home-media img.home-still.home-size-phone { display: none; } .home .home-media img.home-still.home-size-desktop { display: block; } }
.home .home-items-list img.home-icon { width: 24px; height: 24px; margin-bottom: .5rem; }
.home .home-items-list, .home .home-plans-list, .home .home-steps-list, .home .home-rows, .home .home-bullets { list-style: none; margin: 0; padding: 0; }
.home .home-items-list, .home .home-plans-list, .home .home-steps-list { display: grid; gap: 1.5rem; }
@media (min-width: 720px) {
  .home .home-items-list, .home .home-steps-list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .home .home-plans-list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
}
.home .home-items-list li, .home .home-steps-list li, .home .home-plan { min-width: 0; }
.home .home-items-list h3, .home .home-steps-list h3, .home .home-plan h3 { margin-block: .75rem .35rem; font-size: 1.25rem; }
.home .home-steps-list { counter-reset: home-step; }
.home .home-steps-list h3::before { counter-increment: home-step; content: counter(home-step) ". "; }
.home .home-bullets { margin-block: .75rem 1.25rem; }
.home .home-bullets li { padding-left: 1.25rem; position: relative; }
.home .home-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--good); }
.home .home-plan .btn { width: 100%; }
.home blockquote { margin: 0; font: 500 1.25rem/1.4 var(--serif); }
.home figcaption { margin-top: .5rem; color: var(--muted); font-size: .9375rem; }
.home .home-sample { max-width: 36rem; padding: 1.25rem 1.5rem; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.home .home-meta { color: var(--muted); margin-bottom: 1rem; }
.home .home-rows li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; border-top: 1px solid var(--line); }
.home .home-faq-list { max-width: 48rem; }
.home .home-faq-list details { border-bottom: 1px solid var(--line); }
.home .home-faq-list summary { cursor: pointer; padding-block: 1rem; font-weight: 600; min-height: 44px; }
.home .home-answer { padding-bottom: 1rem; color: var(--muted); }
.home-cta { text-align: center; }
.home-cta .home-line { max-width: 36rem; margin: 1rem auto 0; color: var(--muted); }
.home .note { margin-top: .5rem; }
/* The parts a section page may have since 2026-10-14 (specs/engine.md §44c): a text link beside a button, a tag over a name or a
   picture, a note under a section, and a pick section's pictures, each a link into the page's quiz. */
.home .home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.home .home-tag { margin: .75rem 0 0; font-size: .875rem; font-weight: 600; color: var(--muted); }
.home .home-note { max-width: 44rem; margin-top: 1.5rem; color: var(--muted); }
.home .home-pick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 720px) { .home .home-pick-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home .home-pick-list a, .home .home-pick-card { display: grid; gap: .5rem; text-decoration: none; color: var(--ink); }
.home .home-pick-list img { width: 100%; height: auto; border-radius: 12px; }
.home .home-pick-label { font-weight: 600; }
/* The prices section (2026-10-15, specs/engine.md §44c): a card for each price (the first set apart where the config says so), the
   ticked lines and a note under them; or how billing goes, in steps. */
.home .home-price-list, .home .home-ticks, .home .home-billing-list { list-style: none; margin: 0; padding: 0; }
.home .home-price-list { display: grid; gap: 1rem; }
@media (min-width: 720px) { .home .home-price-list { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.home .home-price { display: grid; align-content: start; gap: .35rem; min-width: 0; padding: 1.5rem; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.home .home-price h3 { margin: 0; font-size: 1rem; }
.home .home-price-amount { margin: .25rem 0 0; font-size: 2.5rem; line-height: 1; font-weight: 700; color: var(--ink); }
.home .home-price-for { margin: 0; color: var(--muted); }
.home .home-price-day { margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line); font-weight: 600; }
.home .home-price-then { margin: 0 0 1rem; font-weight: 600; }
.home .home-price .btn { justify-content: center; }
.home .home-ticks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; }
.home .home-ticks li { position: relative; padding-left: 1.5rem; font-weight: 600; }
.home .home-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--good); }
.home .home-price-note { margin-top: .75rem; color: var(--muted); font-size: .9375rem; }
.home .home-billing-list { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .home .home-billing-list { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.home .home-billing-list li { min-width: 0; }
.home .home-billing-list h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.home .home-billing-list p { margin: 0; }