/* ==========================================================================
   Cyber City · front page, under the first screen v0.2 · 2026-10-02 (M3.1)
   The rest of the front page: the departments, "We explain. You decide.", lease-to-own said straight, the store
   and its repair bench, the questions people ask, a calm closing. The first screen is in pages.css and is not
   touched here. Load order: tokens.css, fonts.css, pixel-kit.css, foundations.css, motifs.css, motion.css,
   shell.css, pages.css, then this file. Loaded on the front page only. Pairs with js/home.js; without it the page
   is finished and still.

   Rules of this file (the same as pages.css; tools/check-pages.mjs reads them as a lint)
   · Every class starts with ecc-. The department tiles are the pixel kit's own (.pk-tile, in the markup): this file
     sizes them through a second class of its own on the same element and writes no pk- class.
   · Every colour, font, radius, duration and space is a token. Sizes the scale does not have are built from it with
     calc(); the only written lengths are hairlines (1px, 2px) and the breakpoints.
   · No letter-spacing, no font-size of its own: type comes from the system's helpers and the type tokens.
   · Movement is the system's: the power-on of motion.css (.ecc-boot, which home.js gives a section when it is
     reached) and the current on a rule. This file declares no animation and no transition. It holds the standby look
     of a section that waits (data-ecc-armed), and it turns that look off where motion is reduced or on pause.
   · Nothing here picks a theme: Day is the default, Night is <html data-theme="night">.
   · Mobile first: the phone layout is the base, 761px and 1181px add the wider ones.

   Contents
   0 sections, their heads, the grid, standby · 1 departments · 2 we explain · 3 lease-to-own · 4 the store and
   repair · 5 questions · 6 closing · 7 print
   ========================================================================== */

/* ============================================================ 0 · SECTIONS */
/* A section stands a clear step under the one before it; its modules are one gap apart, like every module. */
.ecc-hsec { margin-top: var(--ecc-s-7); }
.ecc-hsec__head { display: grid; gap: var(--ecc-s-2); margin-bottom: var(--ecc-gap); padding: 0 var(--ecc-s-2); }
.ecc-hsec__kicker, .ecc-hsec__label, .ecc-explain__kicker { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-ink-2); }
.ecc-hsec__title { max-width: 18em; text-wrap: balance; }
.ecc-hsec__rule { margin-top: var(--ecc-s-2); }

/* the grid of a section: one column on a phone (two for the department tiles), twelve from 761px */
.ecc-hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-gap); }
.ecc-hgrid > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
/* a sentence of a line that holds two: the line breaks between them, never inside the first */
.ecc-sent { display: inline-block; }

/* Standby: a section that starts under the fold waits dim (never invisible) until home.js gives it the system's
   power-on. Where motion is reduced or on pause nothing waits, whatever the script did. */
[data-ecc-armed] [data-ecc-module] { opacity: var(--ecc-standby); translate: 0 var(--ecc-rise); }
html[data-ecc-motion="paused"] [data-ecc-armed] [data-ecc-module] { opacity: 1; translate: none; }
html[data-ecc-motion="paused"] .ecc-hsec.ecc-boot [data-ecc-module],
html[data-ecc-motion="paused"] .ecc-hsec.ecc-boot [data-ecc-module] .ecc-pip { animation: none; }
@media (prefers-reduced-motion: reduce) {
  [data-ecc-armed] [data-ecc-module] { opacity: 1; translate: none; }
}

@media (min-width: 761px) {
  .ecc-hsec { margin-top: var(--ecc-s-8); }
  .ecc-hgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ========================================================== 1 · DEPARTMENTS */
/* Four tiles of the pixel kit (the approved tile: a lit stage, the product's name, the way into the department, the
   dots), two to a row on a phone and on a tablet, four from 1181px. One tile changes its product at a time and the
   set rests after two cycles (the kit). Under them, every department with its icon (the list of pages.css). */
.ecc-hgrid > .ecc-dept { grid-column: span 1; }
.ecc-dept .ecc-dept__stage { height: calc(var(--ecc-s-9) * 2); }
.ecc-dept .ecc-dept__body { gap: var(--ecc-s-1); padding: var(--ecc-s-3) var(--ecc-s-3) var(--ecc-s-2); }
.ecc-dept .ecc-dept__name { font-size: var(--ecc-t-body); }
.ecc-dept .ecc-dept__dots { min-height: var(--ecc-hit); } /* the dots arrive with the script: their row is kept for them */
.ecc-dept .ecc-dept__num { display: none; } /* a phone tile is too narrow for the label and the number side by side */
.ecc-hdepts { display: grid; gap: var(--ecc-s-3); }
@media (min-width: 761px) {
  .ecc-hgrid > .ecc-dept { grid-column: span 6; }
  .ecc-dept .ecc-dept__stage { height: calc(var(--ecc-s-9) * 3); }
  .ecc-dept .ecc-dept__body { gap: var(--ecc-s-2); padding: var(--ecc-s-4) var(--ecc-s-5) var(--ecc-s-3); }
  .ecc-dept .ecc-dept__name { font-size: var(--ecc-t-h3); }
  .ecc-dept .ecc-dept__num { display: block; }
}
@media (min-width: 1181px) {
  .ecc-hgrid > .ecc-dept { grid-column: span 3; }
  .ecc-dept .ecc-dept__stage { height: calc(var(--ecc-s-9) * 3.5); }
}

/* =========================================================== 2 · WE EXPLAIN */
/* The heart of the position. A dark panel (.ecc-ctx-panel) carries the headline, with its second line in the logo's
   chrome, and the three promises as claims that open their answers. Beside it, six things a parent asks: each
   question is joined to the pillar that answers it by a trace (pad, level, one 45° turn, level). No spark on these
   lines: six in one view would be a flood. */
.ecc-explain__head { display: flex; flex-direction: column; padding: var(--ecc-s-5); }
.ecc-explain__title { margin-top: var(--ecc-s-7); }
.ecc-explain__lead { max-width: 24em; margin-top: var(--ecc-s-3); }
.ecc-explain__promises { display: grid; gap: var(--ecc-s-1); margin-top: var(--ecc-s-6); padding-top: var(--ecc-s-4); border-top: 1px solid var(--ecc-line-strong); }
.ecc-explain__hint { color: var(--ecc-ink-2); }
.ecc-explain__promises .ecc-claims { gap: var(--ecc-s-1); margin-top: var(--ecc-s-2); } /* three 44px targets, a step apart */

.ecc-explain__list { padding: var(--ecc-s-5) var(--ecc-s-4) var(--ecc-s-3); }
.ecc-qa { display: grid; margin: var(--ecc-s-3) 0 0; }
.ecc-qa__row { display: grid; gap: var(--ecc-s-2); padding: var(--ecc-s-4) 0; border-top: 1px solid var(--ecc-line); }
.ecc-qa__q { color: var(--ecc-ink-2); font-size: var(--ecc-t-body-lg); line-height: 1.35; text-wrap: balance; }
.ecc-qa__a { display: flex; align-items: flex-start; gap: var(--ecc-s-3); }
.ecc-qa__trace { flex: none; margin-top: var(--ecc-s-3); }
.ecc-qa__text { display: grid; gap: var(--ecc-s-1); min-width: 0; }
.ecc-qa__name { color: var(--ecc-ink-2); }
.ecc-qa__say { font-size: var(--ecc-t-h3); font-weight: var(--ecc-fw-strong); font-stretch: var(--ecc-wdth-heading); line-height: 1.25; text-wrap: balance; }

@media (min-width: 761px) {
  .ecc-explain__head { padding: var(--ecc-s-6); }
  .ecc-explain__list { padding: var(--ecc-s-6) var(--ecc-s-6) var(--ecc-s-4); }
  .ecc-qa__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--ecc-s-5); }
}
@media (min-width: 1181px) {
  /* the list first, the dark panel on the right: the page zigzags (the first screen's panel is on the left) */
  .ecc-explain__head { grid-column: 8 / span 5; grid-row: 1; }
  .ecc-explain__list { grid-column: 1 / span 7; grid-row: 1; }
  .ecc-explain__title { margin-top: auto; padding-top: var(--ecc-s-7); }
}

/* ========================================================= 3 · LEASE-TO-OWN */
/* A message tile and a plain one. The message tile is dark in Day and in Night, and it carries the Voxel Current
   (data-ecc-field; motion.js mounts it): the field is quiet toward the bottom, where the words stand (fadeY). Until
   the field is there, and where it cannot run, the tile shows the quiet dot grid. The cost comes first. */
.ecc-lease__msg { display: flex; align-items: flex-end; min-height: calc(var(--ecc-s-9) * 3.5); overflow: hidden; isolation: isolate; }
.ecc-lease__msg::after { /* the tile's edge at night, drawn over the field */
  content: ""; position: absolute; inset: 0; z-index: var(--ecc-z-raised); border-radius: var(--ecc-r); box-shadow: var(--ecc-elev-module); pointer-events: none;
}
.ecc-lease__in { position: relative; display: grid; gap: var(--ecc-s-3); width: 100%; padding: var(--ecc-s-5); }
.ecc-lease__cost { max-width: 11em; text-wrap: balance; }
.ecc-lease__terms { color: var(--ecc-ink); }

.ecc-lease__how { display: flex; flex-direction: column; }
.ecc-steps { display: grid; margin: var(--ecc-s-3) 0 var(--ecc-s-4); padding: 0; list-style: none; }
.ecc-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ecc-s-4); min-height: var(--ecc-s-8); padding: var(--ecc-s-3) 0; border-top: 1px solid var(--ecc-line); }
.ecc-steps__say { font-size: var(--ecc-t-h3); font-weight: var(--ecc-fw-strong); font-stretch: var(--ecc-wdth-heading); line-height: 1.25; text-wrap: balance; }
.ecc-lease__who { max-width: 30em; margin-top: auto; color: var(--ecc-ink-2); }
.ecc-lease__how .ecc-linkline { align-self: flex-start; margin-top: var(--ecc-s-2); }

@media (min-width: 761px) {
  .ecc-lease__msg { grid-column: span 5; }
  .ecc-lease__how { grid-column: span 7; }
  .ecc-lease__in { padding: var(--ecc-s-6); }
}
@media (min-width: 1181px) {
  /* the three steps stand side by side, each under its number */
  .ecc-lease__msg { min-height: calc(var(--ecc-s-9) * 4); }
  .ecc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ecc-s-5); margin-top: var(--ecc-s-5); margin-bottom: var(--ecc-s-6); }
  .ecc-steps li { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: var(--ecc-s-3); padding: var(--ecc-s-4) 0 0; border-top: 2px solid var(--ecc-ink); }
}

/* ================================================= 4 · THE STORE AND REPAIR */
/* Store proof: one real photo of the storefront in a frame, the hours as a dot readout on a dark panel with the
   address (it opens directions) and the phone (it calls), and the repair bench of the same store. */
.ecc-store__photo { display: flex; flex-direction: column; padding: var(--ecc-gap) var(--ecc-gap) 0; }
.ecc-store__img { width: 100%; height: auto; aspect-ratio: 8 / 9; object-fit: cover; object-position: 50% 30%; border-radius: var(--ecc-r-sm); }
.ecc-store__cap { display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); padding: 0 var(--ecc-s-2); color: var(--ecc-ink-2); }

.ecc-store__facts { display: flex; flex-direction: column; padding: var(--ecc-s-5); }
.ecc-store__hours { margin-top: var(--ecc-s-3); }
.ecc-store__hours .ecc-readout { font-size: var(--ecc-t-h1); color: var(--ecc-ink); }
.ecc-store__list { margin-top: var(--ecc-s-5); }
.ecc-store__say { margin-top: auto; padding-top: var(--ecc-s-6); color: var(--ecc-ink); }
.ecc-store__map { grid-column: 1 / -1; min-width: 0; }

.ecc-repair { display: flex; flex-direction: column; }
.ecc-repair__title { margin-top: var(--ecc-s-3); text-wrap: balance; }
.ecc-repair__lead { max-width: 30em; margin-top: var(--ecc-s-3); color: var(--ecc-ink-2); }
.ecc-repair__facts { display: grid; margin: var(--ecc-s-4) 0 0; padding: 0; list-style: none; }
.ecc-repair__facts li { display: flex; align-items: center; gap: var(--ecc-s-3); min-height: var(--ecc-hit); padding: var(--ecc-s-2) 0; border-top: 1px solid var(--ecc-line); font-weight: var(--ecc-fw-medium); line-height: 1.3; }
/* the repair time on an LED screen: a mono caption names it, the dot-matrix face writes it */
.ecc-repair__led { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecc-s-2) var(--ecc-s-4); min-height: var(--ecc-s-8); margin-top: var(--ecc-s-4); padding: var(--ecc-s-3) var(--ecc-s-4); }
.ecc-repair__cap { color: var(--ecc-on-panel-2); }
.ecc-repair__cta { align-self: flex-start; margin-top: var(--ecc-s-5); }

@media (min-width: 761px) {
  .ecc-store__photo, .ecc-store__facts { grid-column: span 6; }
  .ecc-store__facts { padding: var(--ecc-s-6); }
  /* in a row the photo takes the height of its neighbours and fills its frame */
  .ecc-store__img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}
@media (min-width: 1181px) {
  .ecc-store__photo, .ecc-store__facts, .ecc-repair { grid-column: span 4; }
  .ecc-store__img { min-height: calc(var(--ecc-s-9) * 4); } /* tall enough for the sign and the door under it */
  .ecc-repair__cta { margin-top: auto; }
  .ecc-repair__led { margin-bottom: var(--ecc-s-5); }
}

/* ============================================================ 5 · QUESTIONS */
/* The system's accordion (.ecc-acc), in two stacks from 1181px. A question is a heading inside its summary. */
.ecc-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--ecc-s-7); align-items: start; }
.ecc-faq__col + .ecc-faq__col .ecc-acc:first-of-type { border-top: 0; } /* stacked: the line above is the first stack's last line */
.ecc-faq__q { font-size: var(--ecc-t-body-lg); font-weight: var(--ecc-fw-strong); line-height: 1.3; text-wrap: balance; }
.ecc-faq .ecc-acc__body p { color: var(--ecc-ink); }
.ecc-faq .ecc-acc__body .ecc-faq__note { color: var(--ecc-ink-2); }
.ecc-faq .ecc-link { white-space: nowrap; } /* the phone number stays on one line: one target, 44px tall */
.ecc-faq__all { margin: var(--ecc-s-4) var(--ecc-s-2) 0; }
@media (min-width: 1181px) {
  .ecc-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-faq__col + .ecc-faq__col .ecc-acc:first-of-type { border-top: 1px solid var(--ecc-line-strong); }
}

/* ============================================================== 6 · CLOSING */
/* One sentence and two actions. The brand line is not here: it lives in the footer, with the logo. */
.ecc-hclose { display: grid; gap: var(--ecc-s-5); padding: var(--ecc-s-6) var(--ecc-s-5); }
.ecc-hclose__say { max-width: 14em; text-wrap: balance; }
.ecc-hclose__actions { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2) var(--ecc-s-3); }
.ecc-hclose__actions .ecc-btn { flex: 1 1 auto; }
@media (min-width: 761px) {
  .ecc-hclose { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--ecc-s-7) var(--ecc-s-6); }
  .ecc-hclose__actions .ecc-btn { flex: none; }
}

/* ================================================================ 7 · PRINT */
/* a printed page keeps the words and the photo: nothing waits in standby, and the actions step aside */
@media print {
  [data-ecc-armed] [data-ecc-module] { opacity: 1 !important; translate: none !important; }
  .ecc-hclose__actions, .ecc-repair__cta { display: none !important; }
}