/* @journey M1.1 M1.3 M1.5 M1.6 · @ask asks/prod-review-2026-10-19.md entry 4 · @mock none (R-program-57: the first pictures are the mock) · @rulings R-mkt-32 R-mkt-33 R-design-75 R-design-80 R-prov-KT-50 · SITE-2 */
/* The first screens, site v7 (SITE-2; the founder 2026-10-19, dump entry 4: "the other pages, when I go to them, it's basically the exact same
   thing … the hero section is just like clipped, and it's just like so much empty space around it"). One kind per page job, never one template:
   each runs to the window's width less the site's hero inset (--site-hero-inset, the layer's "site v7" block) and is whole at 1512 × 911,
   1024 × 768 and 375 × 812. Every static page links this sheet after its own style, so a kind's rules win and a page keeps only its content.
   kinds/site.md § The pages names the kind each page takes. A picture's height is held by the window's height (--fs-room) through its width,
   so the take keeps its own proportions (v7.js places a crop by the shot's data-aspect). */
:root { --fs-display: clamp(2.5rem, 2.6vw + 1.25rem, 3.75rem); --fs-gap: 32px; --fs-top: 32px; }
@media (max-width: 47.99rem) { :root { --fs-gap: 24px; } }

/* every kind: the page's words left-aligned, at the site's hero width */
.fs { padding-top: var(--fs-top); }
.fs > .wrap { max-width: none; padding-inline: max(var(--gutter), var(--site-hero-inset)); }
.fs .fs-head { display: grid; gap: 14px; justify-items: start; text-align: left; }
.fs .fs-head .kicker { color: var(--t2); }
.fs .page-display { font-size: var(--fs-display); line-height: 1.04; }
.fs .lede { max-width: 52ch; }
.fs .acts { justify-content: flex-start; margin-top: 0; }
/* the head row: the line on the left, the lede and the acts on the right, their feet on one line (the home's head row, without its window) */
.fs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: end; column-gap: 56px; row-gap: 18px; }
.fs-row > .fs-side { display: grid; gap: 16px; justify-items: start; padding-bottom: 4px; }
@media (max-width: 79.99rem) { .fs-row { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 48rem) and (max-width: 79.99rem) { .fs-row > .fs-side { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; } }

/* 1 · the instrument (Product): the screens listed beside the window, the list the scene's control (R-design-80); .rev turns it round,
   .top lays the list across the window's head as steps */
.fs-inst .inst { margin-top: var(--fs-gap); grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.fs-inst .inst .winbox { justify-self: start; width: min(100%, calc((100svh - var(--fs-above, 300px)) * var(--fs-aspect, 1.5))); }
.fs-inst .inst .list [data-seg] { padding: 12px 0 14px; }
.fs-inst.rev .inst { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
.fs-inst.rev .inst .list, .fs-inst.rev .inst .foot { grid-column: 2; }
.fs-inst.rev .inst .winbox { grid-column: 1; justify-self: end; }
.fs-inst.top .inst { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 16px; width: min(100%, calc((100svh - var(--fs-above, 300px)) * var(--fs-aspect, 1.5))); margin-inline: auto; } /* the steps run the window's width, so their edges are the window's */
.fs-inst.top .inst .winbox { width: 100%; }
.fs-inst.top .inst .list { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(var(--fs-steps, 3), minmax(0, 1fr)); column-gap: 24px; }
.fs-inst.top .inst .foot { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.fs-inst.top .inst .winbox { grid-column: 1 / 3; grid-row: 2; justify-self: center; }
@media (min-width: 48rem) { .fs-inst.top .inst .list [data-seg] .d { display: none; } .fs-inst.top .inst .list [data-seg] { padding: 8px 0 12px; } }
.fs .note { text-align: left; }
.fs .wl { justify-content: flex-start; }
@media (min-width: 48rem) and (max-width: 79.99rem) { .fs-inst .inst .list [data-seg] .d { display: none; } .fs-inst .inst { column-gap: 28px; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } .fs-inst.rev .inst { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); } }

/* 2 · the plans first (Pricing): the head row, then the two plans 50/50 and the Both-together band, whole in the first screen */
.fs-plans .plans { margin-top: var(--fs-gap); }
@media (min-width: 48rem) and (max-width: 79.99rem) { .fs-plans .plans { margin-top: 20px; } .fs-plans .plan { padding: 22px 24px; gap: 10px; } .fs-plans .plan .price { font-size: 48px; } .fs-plans .plan ul { row-gap: 10px; padding-top: 12px; } .fs-plans .plan > p + p { display: none; } }

/* 3 · one block (Company): the words beside the page's one block (about: the rules; trust: the commitments; roadmap: the line) */
.fs-block > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: center; min-height: calc(100svh - 68px - var(--fs-top) - 24px); }
.fs-block.stack > .wrap { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: var(--fs-gap); min-height: 0; }
.fs-block .fs-block-body, .fs-block .stage { min-width: 0; width: 100%; margin: 0; }
.fs-block .fs-block-body > .kicker { display: block; margin: 0 0 12px; font: 500 14.5px/1.3 var(--ui); letter-spacing: -.003em; text-transform: none; color: var(--t2); }
.fs-block .fs-block-body > .kicker + * { margin-top: 0; }
.fs-block .fs-block-body :is(.rules, .cells) > * { align-content: start; } /* a cell's name sits on its words, whatever its neighbour's height */
/* between the phone and the desk (1024 × 768), the block's cards set closer so the first screen stays whole */
@media (min-width: 48rem) and (max-width: 79.99rem) { .fs-block .fs-block-body :is(.rules > *, .cells > .c) { padding: 14px 20px 16px; } .fs-block .fs-block-body :is(.rules span, .w) { font-size: 14px; line-height: 1.45; } .fs-block .fs-block-body .v { font-size: 44px; } .fs-block .fs-block-body .rules b { font-size: 16.5px; } .fs-block > .wrap { column-gap: 40px; } }
@media (max-width: 63.99rem) { .fs-block > .wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--fs-gap); min-height: 0; align-content: start; } }

/* 4 · the pair (Who it's for, kids): the desk's window with the parent's phone in front of its corner, the words on the right */
.fs-pair > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: 64px; align-items: center; }
.fs-pair .pair { position: relative; justify-self: end; width: min(100%, calc((100svh - 68px - var(--fs-top) - 40px) * var(--fs-aspect, 1.2))); padding: 0 48px 40px 0; }
@media (max-width: 79.99rem) { .fs-pair > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); column-gap: 40px; } }
.fs-pair .pair > .win { box-shadow: var(--shot-shadow); }
.fs-pair .pair > .handset { position: absolute; right: 0; bottom: 0; width: 26%; min-width: 180px; border-radius: var(--radius-block); padding: 6px; background: var(--surface); box-shadow: var(--e-panel); }
.fs-pair .pair > .handset .win { border-radius: var(--radius-modal); box-shadow: none; }
@media (max-width: 63.99rem) { .fs-pair > .wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--fs-gap); } .fs-pair .pair { order: 2; } }
@media (max-width: 47.99rem) { .fs-pair .pair { padding: 0; width: 100%; } .fs-pair .pair > .handset { position: static; width: 100%; min-width: 0; padding: 0; background: none; box-shadow: none; } .fs-pair .pair > .handset .win { border-radius: var(--radius-card); box-shadow: var(--shot-shadow); } }

/* 5 · one card (Apply, Sign in, Sign up): text first, one centred card on the arrival's ground, the pill above (the Svelte pages: app.css) */

/* dark: the rules card's last cell (the roadmap) is a raised cell, never the ground's black cut into the card (verify F13: --well is the
   ground in dark) */
:root[data-site-theme="dark"] .fs-block .rules > a.next { background: var(--soft); }

/* the second shape on a phone (SITE-3, N4): three steps across the window's head, their words set to the third of the width each (Operate's "Cancellations") */
@media (max-width: 47.99rem) { .fs-inst.top .inst .list [data-seg] .t { font-size: 14px; letter-spacing: -0.01em; overflow-wrap: anywhere; } .fs-inst.top .inst .list [data-seg] { min-width: 0; } .fs-inst.top .inst .list [data-seg] .d { overflow-wrap: anywhere; font-size: 13px; } }

/* 1024 × 768 (SITE-3): from the phone's edge to the wide desk and no taller than a laptop, the head row keeps two columns (the line left, the words and acts right),
   the first screen's gaps close a step, and the section's foot padding is the gutter, so the page's first screen is whole in the window */
@media (min-width: 48rem) and (max-width: 79.99rem) and (max-height: 820px) {
  :root { --fs-top: 20px; --fs-gap: 16px; }
  .fs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: 32px; align-items: end; }
  .fs-row > .fs-side { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fs .page-display { font-size: clamp(2.25rem, 3.2vw + 0.75rem, 3rem); }
  .fs .fs-head { gap: 10px; }
  .ph.fs { padding-bottom: 24px; }
  .fs-inst.top .winbox .shot { max-height: 280px; overflow: hidden; } /* the window is cropped at the foot (its mask fades it), never shrunk */
  .fs-block.stack .stage .win { max-height: 440px; overflow: hidden; }
}