/* NEXA site: page CSS. Only what sits inside a visual and the kit lacks, one --p-h per card group,
   and the few heights that keep a section on its screens. */

/* the parts of the page the browser draws */
::selection { background: color-mix(in oklab, var(--p-accent) 24%, transparent); }
:root { accent-color: var(--p-accent); }

/* a window holding one of the app's own screens */
.shot { background: #fff; color: #16181a; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 30px 70px -30px rgb(0 0 0 / .45); }
.shot__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: #fff; border-bottom: 1px solid rgb(0 0 0 / .07); font: 400 13px/1 var(--font-text); color: #5d6268; }
.shot__bar > img { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.shot__ctl { margin-inline-start: auto; display: flex; gap: 16px; align-items: center; }
.shot__ctl i { width: 10px; height: 10px; border: 1px solid #9aa0a6; }
.shot__ctl i:first-child { height: 0; border-width: 1px 0 0; }
.shot__ctl i:last-child { border: 0; background: linear-gradient(45deg, transparent 46%, #9aa0a6 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #9aa0a6 46% 54%, transparent 54%); }
.shot > .shot__img { display: block; width: 100%; height: auto; max-width: none; }
/* a piece of a screen at true size: the picture is --sw wide and shifted to the part the card names */
.shot--crop { width: var(--sw, 1180px); }
.shot--crop > .shot__img { width: var(--sw, 1180px); margin-left: var(--sx, 0px); margin-top: var(--sy, 0px); }
.stage > .shot.at-corner:not(.shot--crop) { --ax: 56px; --ay: 56px; width: 1200px; }
.stage > .shot--crop.at-corner { --ax: 32px; --ay: 32px; }

/* the hero: the till wider than its frame, cut by the frame's far side and its bottom */
.hero__art > .ly-piece--main.shot { width: 1100px; }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
.d-card { background: #fff; color: #16181a; border-radius: 12px; padding: 14px 16px; font: 400 14px/1.4 var(--font-text); text-align: left; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 14px 32px -18px rgb(0 0 0 / .35); }
.d-card__t { margin: 0 0 4px; font: 500 14px/1.3 var(--font-text); color: #16181a; }
.d-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.d-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 13px; font-weight: 500; background: #e7f4ec; color: #17673f; white-space: nowrap; }
.d-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); }
.d-note__line:first-of-type { border-top: 0; }
.d-note__line > svg { width: 18px; height: 18px; padding: 4px; border-radius: 50%; flex: none; background: #e7f4ec; color: #17673f; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-note__line > svg.warn { background: #fdf0dc; color: #8a5300; }
.d-note__line b { font-weight: 500; color: #16181a; }
.hero__proof { font-size: var(--t-small); color: var(--ink); }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 270px; } .hero__art > .ly-piece--main.shot { width: 900px; } }
@media (max-width: 639px) { .hero__art > .ly-piece--main.shot { width: 720px; } }

/* the product window across the wrap */
.app.ui.shot { margin-top: var(--s-7); display: flex; flex-direction: column; position: relative; }
.app.ui.shot > .shot__img { flex: 1 1 0; min-height: 0; object-fit: cover; object-position: left top; }
.app.ui.shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, #fff); pointer-events: none; }

/* one panel height for the till's four cards */
#selling .panel { --p-h: 336px; }

/* the chosen tab in the page's one filled colour; its words keep one height, so the frame never moves */
.tab[aria-selected="true"] { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.m-tab-ind { background: var(--action); }

/* the nav word of the section on screen carries the same 2px bar as a current page */
.nav__link[aria-current="location"]::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; }
.tabpanels { min-height: 4lh; }

/* a plan: its name and price on one row; the price with its printer and reader at the card's foot */
.plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.plan__hw { margin-top: auto; }
.price .t-stat, .rows__value { font-variant-numeric: tabular-nums; }

/* the questions: the head and the picture under it in one column, the answers beside them */
@media (min-width: 1024px) {
  .faq-split { grid-template-rows: auto minmax(0, 1fr); }
  .faq-split > .faq-split__head { grid-row: 1; }
  .faq-split > .faq { grid-row: 1 / span 2; }
  .faq-split > .frame { grid-row: 2; grid-column: 1 / span 6; align-self: stretch; margin-top: var(--s-5); height: auto; min-height: 0; aspect-ratio: auto; }
}

/* the name across the wrap: its four letters spread from line to line, sized by the room the screen leaves */
.close__word { display: flex; justify-content: space-between; overflow: visible; line-height: 1; letter-spacing: 0; margin-inline: 0;
  font-size: clamp(56px, min(22.6vw, 100svh - 650px), 326px); }
@media (max-width: 639px) { .close__word { font-size: clamp(56px, min(23vw, 100svh - 700px), 96px); } }

/* a short screen has no room for the name set wide */
@media (min-width: 640px) and (max-height: 819px) { .close__word { display: none; } }

/* motion: the first screen arrives in order on load; each later block rises once as it comes on screen.
   Everything is visible without the script, and nothing moves under reduced motion. */
@keyframes nx-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes nx-art { from { opacity: 0; translate: 0 18px; scale: .985; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__text > * { animation: nx-rise .7s cubic-bezier(.23, 1, .32, 1) both; }
  .hero__text > :nth-child(2) { animation-delay: 70ms; }
  .hero__text > :nth-child(3) { animation-delay: 140ms; }
  .hero__text > :nth-child(4) { animation-delay: 210ms; }
  .hero__art { animation: nx-art .9s cubic-bezier(.23, 1, .32, 1) 120ms both; }
  .hero__art > .ly-piece--note { animation: nx-rise .6s cubic-bezier(.23, 1, .32, 1) 700ms both; }
  html.rv-on .rv { opacity: 0; translate: 0 16px; }
  html.rv-on .rv.rv-in { opacity: 1; translate: 0 0; transition: opacity .6s cubic-bezier(.23, 1, .32, 1) var(--rv-d, 0ms), translate .7s cubic-bezier(.23, 1, .32, 1) var(--rv-d, 0ms); }
  html.rv-on .close__word > .rv { translate: 0 40%; }
  /* a tab's screen settles in when it is chosen */
  .stage > .shot[role="img"]:not([hidden]) { animation: nx-rise .45s cubic-bezier(.23, 1, .32, 1); }
  .btn:active { scale: .97; transition: scale 120ms ease-out; }
}

/* a plan card answers the pointer like every other linked card */
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .card--plan { transition: transform 200ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms cubic-bezier(.23, 1, .32, 1); }
  html:not([data-motion="off"]) .card--plan:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 14px 32px -18px rgb(0 0 0 / .4); }
  html:not([data-motion="off"]) .card--plan.is-featured:hover { box-shadow: inset 0 0 0 1px var(--action), 0 1px 2px rgb(0 0 0 / .06), 0 14px 32px -18px rgb(0 0 0 / .4); }
}
@media (prefers-reduced-motion: reduce) { html:not([data-motion="off"]) .card--plan, html:not([data-motion="off"]) .card--plan:hover { transition: none; transform: none; } }

/* heights that keep each section on its screens */
@media (max-width: 1279px) {
  #selling .panel { --p-h: 290px; }
  .faq > .faq__item { padding-block: var(--s-4); }
}
@media (min-width: 1024px) and (max-width: 1279px) { .hero--collage h1 { font-size: 46px; } }
@media (max-width: 1023px) {
  /* the till's cards run down to each screen's foot here too, as the kit does from 1024 */
  #selling > .wrap > .grid:last-child, #selling > .wrap > .group > .grid:last-child { align-self: stretch; flex: 1 1 auto; min-height: 0; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #pricing { --h: 2; }
  .faq-split > .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter, 24px); }
  .faq-split > .faq > .faq__item:first-child { padding-top: var(--s-4); }
  .closing__links > .grid > :first-child { grid-column: 1 / -1; }
  /* the four link columns (Support is the fourth) share the row */
  .closing__links > .grid > .footer__col { grid-column: auto / span 3; }
}
@media (max-width: 639px) {
  #selling .panel { --p-h: 136px; }
  #selling h2 > .muted { display: none; }
  #offline .rows > li:nth-child(n+4) { display: none; }
  /* the footer on one phone screen: the name set wide stands for the small logo and its line */
  .closing__links > .grid > :first-child { display: none; }
}

/* a fact row's value wraps under long words instead of running over its name */
:is(#offline, #online) .rows > li { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
:is(#offline, #online) .rows__name { white-space: nowrap; }
:is(#offline, #online) .rows__value { white-space: normal; text-align: end; }

/* on a phone the home screen keeps a size that reads: the window shows its near half, cut by the far side */
@media (max-width: 639px) {
  .app.ui.shot > .shot__img { width: 720px; flex: 1 1 0; min-height: 0; }
}

/* the menu's picture card keeps its own height, so its title and line stay together */
.nav__menu .menu-card { align-self: start; align-content: start; }
.nav__menu .menu-card > .t-small { margin-top: calc(-1 * var(--s-2)); }

/* ── the order and support pages (/order, /tickets): the words on one side, the form on the surface on the other ──
   The section grows with its form instead of keeping to one screen: a form that shows its faults, or its answer,
   must never be cut or overlap the footer. Nothing here is in site.js's reveal list but the aside's lead and
   facts, so the form itself never starts hidden. */
/* doubled classes: the kit's height rules (one screen, a phone's lvh) carry a :not() that outweighs one class */
main > section.form-page.form-page.form-page { height: auto; min-height: calc(100svh - var(--nav)); display: block; padding-top: calc(var(--nav) + var(--s-8)); padding-bottom: var(--s-9); }
main > section.form-page.form-page.form-page > .wrap { height: auto; display: block; }
@media (max-width: 639px) { main > section.form-page.form-page.form-page { padding-top: calc(var(--nav) + var(--s-6)); padding-bottom: var(--s-8); } }
/* a footer without the trial ask (the order page, a download link's page): the name and the links at their own
   height, not a screen of ground over them */
footer.closing.closing--quiet.closing--quiet { height: auto; min-height: 0; }
footer.closing.closing--quiet.closing--quiet > .wrap { height: auto; }
.form-page__aside { display: grid; gap: var(--s-5); align-content: start; }
.form-page__aside h1 { font-size: var(--t-h2); }
.form-page__facts { margin-top: var(--s-2); }
.form-page__facts .rows__value { white-space: normal; text-align: end; }
.form-page__urgent { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.form-page__urgent h2 { font-size: var(--t-card, 20px); line-height: 1.3; }
@media (min-width: 1024px) { .form-page__aside { position: sticky; top: calc(var(--nav) + var(--s-6)); } }
@media (max-width: 1023px) { .form-page__grid { row-gap: var(--s-7); } }

.form-panel { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-7); }
@media (max-width: 639px) { .form-panel { padding: var(--s-5) var(--s-4); margin-inline: calc(-1 * var(--s-2)); } }
.form-panel { --fault: #a3261f; }
.form { row-gap: var(--s-5); }
.form__note { font-size: var(--t-small); color: var(--muted); }
.req { color: var(--fault); }
.field-cell { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.field > label { color: var(--ink); }
.field :is(input, select, textarea):hover { border-color: color-mix(in oklab, var(--ink) 40%, transparent); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--action); outline-offset: 1px; border-color: var(--action); }
.field :is(input, textarea)[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--fault); }
.field__hint { font-size: var(--t-small); color: var(--muted); line-height: 1.5; }
.field__error { font-size: var(--t-small); font-weight: 500; color: var(--fault); line-height: 1.5; }

/* choice cards: native radios, the whole card their label */
.choices { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-3); }
.choices > legend { padding: 0; margin-bottom: var(--s-3); font-size: var(--t-small); font-weight: 500; }
.choices__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-4); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); background: var(--bg); cursor: pointer; transition: border-color var(--dur, 160ms) var(--ease, ease), box-shadow var(--dur, 160ms) var(--ease, ease); }
.choice:hover { border-color: color-mix(in oklab, var(--ink) 40%, transparent); }
.choice:has(input:checked) { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.choice > input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--action); }
.choice__text { display: grid; gap: var(--s-1); }
.choice__title { font-weight: 500; line-height: 1.35; }
.choice__line { font-size: var(--t-small); color: var(--muted); line-height: 1.45; }
.choice__price { margin-top: var(--s-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.choices--fault .choice { border-color: var(--fault); }

/* a tick: a native checkbox and its words */
.tick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; cursor: pointer; font-size: var(--t-small); }
.tick > input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--action); }
.tick__text { display: grid; gap: 2px; }
.tick__text > :first-child { font-weight: 500; }
.tick__hint { color: var(--muted); }

/* the field no person sees: clipped to nothing (not moved off screen, which widens a right-to-left page), out of the tab order (tabIndex -1) and hidden from screen readers */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* what the form says back: a refusal, the question about the request already sent, nothing sent */
.form__alert, .form__ask, .form__said { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line-strong); }
.form__alert { border-color: var(--fault); }
.form__alert > p:first-child, .form__ask > h3 { font-weight: 500; }
.form__ask { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.form__ask > h3 { font-size: var(--t-body); line-height: 1.5; }
.form__ask:focus { outline: none; }
.form__ask .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.form__said { font-size: var(--t-small); }
.wa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.form__send { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.form__send .btn[disabled] { opacity: .65; cursor: progress; }
@media (max-width: 639px) { .form__send .btn, .form__ask .btn { width: 100%; justify-content: center; } }

/* the thank-you that takes the form's place */
.form-done { display: grid; gap: var(--s-4); outline: none; }
.form-done h2 { font-size: var(--t-h2); }
.form__said-line { margin-top: var(--s-2); font-size: var(--t-small); color: var(--muted); }

/* ── a one-time download link's page (/download/<token>): the file on one side, what the link lets him do on the other ──
   The same two halves as the order page (.form-page); the panel is the surface the forms sit on. */
.dl-panel { display: grid; gap: var(--s-5); }
.dl-box { display: grid; gap: var(--s-4); align-content: start; outline: none; }
.dl-box > h2 { font-size: var(--t-h3); line-height: 1.25; }
.dl-form { display: grid; gap: var(--s-4); }
/* six digits read as one word, left to right on the Arabic page too */
.dl-code.dl-code { max-width: 14ch; font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.375rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: left; }
.dl-box > .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 639px) { .dl-box > .btn-row .btn { width: 100%; justify-content: center; } .dl-code.dl-code { max-width: none; } }
.dl-ask { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg); }
.dl-ask > h3 { font-size: var(--t-body); font-weight: 500; line-height: 1.5; }
/* the file's name can be long: it wraps rather than widen the row */
.form-page__facts .dl-file { overflow-wrap: anywhere; }
/* the file's fingerprint, small: whoever checks it copies it from here */
.dl-sha { display: grid; gap: var(--s-1); font-size: var(--t-small); color: var(--muted); }
.dl-sha > span:first-child { color: var(--ink); font-weight: 500; }
.dl-sha code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-all; color: var(--ink); text-align: left; }

/* the pricing's per-PC words (one licence per PC): the line under each price, the PCs line, and the note under the plans */
.plan__per { margin-block-start: -8px; }
.plan__pcs { color: var(--p-accent); font-weight: 500; }
.plan-note { margin-block-start: clamp(24px, 4vw, 40px); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-card, 16px); background: var(--p-surface); }
.plan-note h3 { margin-block-end: 12px; }

/* the hub's centre: the round NEXA mark (the app icon's wave-N cut to a circle) in place of the ink pill, its name
   under it; the diagram's ripple follows the circle */
.dg .dg-node:is(.dg-node--core-pill, .dg-node--core):has(> .dg-ic[data-icon*="nexa-orb"]) { width: 52px; height: 52px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; border-color: transparent; background: transparent;
  box-shadow: 0 0 0 2px rgb(255 255 255 / .6), 0 10px 22px -8px rgb(46 95 140 / .55), 0 0 26px rgb(90 166 184 / .3); }
.dg .dg-node:is(.dg-node--core-pill, .dg-node--core):has(> .dg-ic[data-icon*="nexa-orb"]) .dg-ic { width: 100%; height: 100%; }
.dg .dg-node:is(.dg-node--core-pill, .dg-node--core):has(> .dg-ic[data-icon*="nexa-orb"]) .dg-ic img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.dg .dg-node:is(.dg-node--core-pill, .dg-node--core):has(> .dg-ic[data-icon*="nexa-orb"]) .dg-label { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; white-space: nowrap; font-size: 12px; font-weight: 560; color: var(--dg-ink); }
.dg .dg-node:is(.dg-node--core-pill, .dg-node--core):has(> .dg-ic[data-icon*="nexa-orb"])::before, .dg .dg-node:is(.dg-node--core-pill, .dg-node--core):has(> .dg-ic[data-icon*="nexa-orb"])::after { border-radius: 50%; }
.dg[data-tier="c"] .dg-node:is(.dg-node--core-pill, .dg-node--core):has(> .dg-ic[data-icon*="nexa-orb"]) { width: 44px; height: 44px; border-radius: 50%; }

/* a section whose content is taller than its screens (a short window, the plans with their per-PC lines, the
   questions, a diagram) grows past them rather than run into the next section; one that fits keeps its height */
main > :is(section, .section):not(.hero, .section--hero), footer.closing {
  height: auto; min-height: calc(var(--h, 1) * 100vh); min-height: calc(var(--h, 1) * 100svh); display: flex; flex-direction: column;
}
main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
main > :is(section, .section) > .wrap > .fill, .group > .fill { flex: 1 0 auto; }
@media (max-width: 639px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing {
    height: auto; min-height: calc(var(--hm, var(--h, 1)) * 100vh); min-height: calc(var(--hm, var(--h, 1)) * 100svh); display: flex; flex-direction: column;
  }
  main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
}
@media (max-width: 639px) {
  /* a frame that fills what the screen leaves keeps at least its own height, so it never runs into the next section */
  main > :is(section, .section) > .wrap > .fill, .group > .fill { flex: 1 0 auto; }
  /* the hero grows past the screen on a small phone rather than lay its picture over the next heading */
  main > .hero { height: auto; min-height: 100vh; min-height: 100svh; }
  main > .hero > .wrap { height: auto; grid-template-rows: auto auto; }
}

/* the till cards' ground: the still gradient mesh drawn once into a picture (no WebGL canvas for a ground that never moves) */
.panel--mesh { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* the two diagrams keep their own shape on every screen: square, at most 640px tall (they no longer stretch to a
   tall screen's height, nor squash on a short phone) */
main section .grid.fill > .frame--fill:has(> .dg) { flex: none; width: 100%; height: auto; min-height: 0; aspect-ratio: 1 / 1; max-height: 640px; align-self: start; }

/* the boxes that hold the moving art and the app's screens keep one shape on every window: the shape each has at
   1440x900, the size the page was drawn for (a tall window no longer stretches them, a short one no longer flattens
   them); a section that is taller than its boxes keeps its screen's height with room under them */
main section .hero__art,
main section#selling .card .panel,
main section#modules .frame,
main section#questions .frame,
main section#product .app { flex: none; width: 100%; height: auto; min-height: 0; max-height: none; align-self: start; }
main section .hero__art { aspect-ratio: 7 / 8; }
main section#selling .card .panel { aspect-ratio: 3 / 2; }
main section#selling .grid, main section#selling .group { flex: none; align-self: stretch; }
main section#selling .card { height: auto; align-self: start; }
main section#modules .frame { aspect-ratio: 8 / 9; }
main section#questions .frame { aspect-ratio: 6 / 5; }
main section#product .app { aspect-ratio: 9 / 4; }
/* a tablet: one column, the boxes as wide as the page */
@media (max-width: 1023px) {
  main section .hero__art { aspect-ratio: 3 / 2; }
  main section#modules .frame { aspect-ratio: 4 / 3; }
  main section#questions .frame, main section#product .app { aspect-ratio: 16 / 10; }
}
/* a phone: the screens at the app's own 16:10, the till cards a little wider */
@media (max-width: 639px) {
  main section .hero__art { aspect-ratio: 16 / 11; }
  main section#selling .card .panel { aspect-ratio: 16 / 9; }
  main section#modules .frame, main section#questions .frame, main section#product .app { aspect-ratio: 16 / 10; }
}
/* the hero, like every section, grows past a short window rather than lay its picture over the next section */
main > .hero { height: auto; min-height: 100vh; min-height: 100svh; }
main > .hero > .wrap { height: auto; grid-template-rows: auto auto; }

/* «آراء العملاء»: the reviews list, the team's replies, the star picker */
.rvw__list { display: grid; gap: var(--s-4); align-content: start; }
.rvw__card { margin: 0; display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); border-radius: var(--r-md, 12px); background: var(--bg, transparent); }
.rvw__card blockquote { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rvw__stars { color: var(--action); letter-spacing: 2px; }
.rvw__stars > span { opacity: .25; }
.rvw__reply { display: grid; gap: var(--s-1); padding: var(--s-3); border-inline-start: 3px solid var(--action); background: color-mix(in oklab, var(--ink) 5%, transparent); }
.rvw__reply p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rvw__rate { border: 0; padding: 0; margin: 0; }
.rvw__pick { display: flex; gap: 4px; }
.rvw__star { appearance: none; border: 0; background: none; cursor: pointer; font-size: 28px; line-height: 1; color: color-mix(in oklab, var(--ink) 25%, transparent); padding: 2px; }
.rvw__star[data-on] { color: var(--action); }
.rvw__star:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }