/* ════════════════════════════════════════════════════════════════════
   THE ELEVEN — /web-apps/, 2026-08-21.

   Nicolas: "we cut all the text thing and it's full tiles, with images.
   'Apri una demo' without an in-tile image is suicidal — nobody opens a
   door blindsighted. The dropdown is the worst thing."

   So the page IS the eleven doors. What was a <select> — eleven
   destinations a crawler could not see and a visitor could not compare —
   is eleven frames you can look at.

   THE FRAME IS THE WHOLE POINT. Every well is 3:4 — A PHONE — every shot
   is written at 444x592 by `manage.py web11_shots`, and a trade with no
   picture yet holds its own MARK in the identical box. If a picture does
   not fit the frame, the PICTURE gets fixed. The frame does not move.

   Portrait because the eleven were shot on a phone, and because that is
   the honest picture of this product: the promise is a site you run from
   the phone in your pocket, so the tile shows the phone.

   ── THE SECOND PASS, same day ────────────────────────────────────────
   His verdict on the first: *"the text in between is a bit weird, like
   it's made not to be read"*, and *"it needs to take space, not apologise
   for being there"*. He was right, and it was structural: the gallery ran
   at 1180px and then every word under it was crammed into a 680px column
   at 0.86rem in muted grey, borrowed from `style.css`'s generic `section`.
   A page cannot show you something at full width and then whisper the
   explanation.

   So this page stopped using `section` and got BANDS: one width for the
   whole page, one rhythm, numbered, and every argument in a card with
   the note on its border and its icon. Nothing on it is small any more.
   ════════════════════════════════════════════════════════════════════ */

/* ── THE BAND NOTES ──────────────────────────────────────
   Nicolas: *"I cannot stand the purple-only accent all over and the white
   text with no border — everything is a little boring. More colours, like
   we have on the landing. Colours for sections and icons, white text."*

   So each band takes its own note, and it flows to that band's kicker, its
   card borders and its icons — one variable, no other rule changes. The
   text stays white everywhere: colour marks the SECTION, never the words.
   Same grammar as the front door's four categories, five bands deep. */
.band--esempio  { --note: #a87ae8; --note-rgb: 168 122 232; }   /* the doors */
.band--pannello { --note: #63b4d4; --note-rgb:  99 180 212; }   /* what it does */
.band--spazio   { --note: #6fae7a; --note-rgb: 111 174 122; }   /* what it runs on */
.band--non      { --note: #cf8f7a; --note-rgb: 207 143 122; }   /* what is absent */
.band--demo     { --note: #cf7f9c; --note-rgb: 207 127 156; }   /* her pink: the ask */

/* ════════════════════════════════════════════════════════════════════
   01 · THE ELEVEN
   ════════════════════════════════════════════════════════════════════ */

/* ⚠ `flex: 0 0` — NOT the front door's `flex: 1 1`. Those tiles hold a
   word, so a short last row can stretch to the page's edge and nothing is
   distorted. These hold PHOTOGRAPHS: a stretched last row would show two
   of the eleven at a different shape from the nine above them, which is
   exactly the "irregular, inadapted frame" this pass exists to kill.
   Every card keeps its width; a short row centres. Eleven reads 3-3-3-2,
   the last two centred under the nine. */
.wa-grid {
    --wa-cols: 2;
    --wa-gap: clamp(0.8rem, 1.8vw, 1.3rem);
    display: grid;
    grid-template-columns: repeat(var(--wa-cols), minmax(0, 1fr));
    gap: var(--wa-gap);
}
/* ⚠ TWO ACROSS, NOT THREE. The pictures are composites of three phones now
   (tools/web11_beauty.py); at a third of 1180px they were a row of stamps.
   One column under 620px, where half of that is unreadable. */
@media (max-width: 620px) { .wa-grid { --wa-cols: 1; } }

/* ── A TILE: the name, then the picture ──────────────────────────────────
   Nicolas, on the version where the name sat ON the shot: *"the first section
   is ugly… put the title and the logo on top, not in the tile, and the tile
   with 0 hover effects on the shadows."*

   He is describing a cause, not a preference. A name printed over an unknown
   photograph needs contrast from somewhere, so the old tile had THREE devices
   supplying it — a scrim running to 94% black at the bottom, a two-layer
   text-shadow on every letter, and `brightness(0.86)` over the whole picture.
   All three existed to solve a problem the layout had created. Lift the name
   out of the frame and all three go with it, and the picture is finally
   allowed to be lit.

   What is left is the house's own object: a row that says what it is, a
   framed picture under it, one coloured edge, one coloured mark. */
.wa-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.85rem 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgb(var(--note-rgb) / 0.34);
    background: var(--surface);
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: none;
    transition: border-color 0.16s, background 0.16s;
    container-type: inline-size;    /* the name sizes off the TILE, never the viewport */
}
/* ⚠ NO LIFT, NO SCALE, NO COLOURED SHADOW. The edge and the ground answer,
   and nothing moves — *"0 hover effects on the shadows"*. */
.wa-card:hover,
.wa-card:focus-visible {
    border-color: rgb(var(--note-rgb) / 0.8);
    background: color-mix(in srgb, var(--note) 7%, var(--surface-hover));
    outline: none;
}

/* ── The head: the mark and the name, ABOVE the picture ───────── */
.wa-head { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.wa-ico {
    flex: 0 0 auto;
    width: 2.3rem; height: 2.3rem;
    border-radius: 0.65rem;
    display: grid; place-items: center;
    color: var(--note);
    background: rgb(var(--note-rgb) / 0.12);
    border: 1px solid rgb(var(--note-rgb) / 0.34);
}
.wa-ico .wa-mark { width: 1.25rem; height: auto; color: currentColor; }

/* ── The picture, in a frame of its own ─────────────────────────
   3:2, the ratio tools/web11_beauty.py writes at, so `cover` never actually
   crops one — it is there for the day somebody drops a file in by hand.
   ⚠ AND NO FILTER. Nothing is printed over it any more, so nothing has to be
   darkened to make room. */
.wa-frame {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 0.7rem;
    overflow: hidden;
    background: #0f1219;
    border: 1px solid var(--border-soft);
}
.wa-ground {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ═════════════════════════════════════════════════════════════════════
   THE ELEVEN NOTES

   One colour each, sampled along the Arrow spectrum in taxonomy order, so
   the grid sweeps warm to cool as you read it left to right, top to
   bottom. Each carries its tile's border, its icon and the line under its
   name — the same three jobs `--note` does everywhere else on the site.

   ⚠ THE AMBER SIXTH OF THE WHEEL IS SKIPPED, on purpose. That is where
   the retired gold lived (A-130), and one tile wearing it would read as
   the gold coming back rather than as one note among eleven. The sweep
   runs coral → rose → orchid → violet → periwinkle → blue → cyan →
   teal → green → olive, and closes on a muted crimson for the tattoo
   studio.
   ════════════════════════════════════════════════════════════════════ */
.wa-c-food        { --note: #d08468; --note-rgb: 208 132 104; }
.wa-c-beauty      { --note: #cf7f9c; --note-rgb: 207 127 156; }
.wa-c-retail      { --note: #c583c6; --note-rgb: 197 131 198; }
.wa-c-hospitality { --note: #a87ae8; --note-rgb: 168 122 232; }
.wa-c-health      { --note: #8b91de; --note-rgb: 139 145 222; }
.wa-c-pro         { --note: #6f9fd0; --note-rgb: 111 159 208; }
.wa-c-nonprofit   { --note: #5fb0c6; --note-rgb:  95 176 198; }
.wa-c-fitness     { --note: #5cb0a6; --note-rgb:  92 176 166; }
.wa-c-trades      { --note: #6fae7a; --note-rgb: 111 174 122; }
.wa-c-tours       { --note: #8ab86f; --note-rgb: 138 184 111; }
.wa-c-creative    { --note: #cc6f7f; --note-rgb: 204 111 127; }

/* ── The name, and what the tile does ─────────────────────────
   ⚠ The text-shadows are gone with the scrim: this sits on the tile's own
   ground now, not on somebody's photograph. */
.wa-name { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.wa-name b {
    font-size: clamp(1rem, 5cqw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.25;
    color: var(--text-primary);
}
.wa-name span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--note);
}

/* ── The honest note under the grid. Ten minutes, six at a time. ─── */
.wa-limits {
    max-width: 62ch;
    margin: 1.6rem auto 0;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   02 · WHAT IS IN ALL ELEVEN   ·   03 · WHAT THEY RUN ON

   Eight things and four things, and until today the page printed only
   their TITLES — the sentence explaining each one existed in `i18n.py`
   and went unrendered. So the section said "Foto e galleria" and left the
   visitor to guess. They are cards now, and they say what they do.
   ════════════════════════════════════════════════════════════════════ */
.band-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: clamp(0.6rem, 1.4vw, 0.95rem);
    text-align: left;
}
.band-cards--wide { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
.band-card {
    display: flex;
    gap: 1rem;
    padding: 1.3rem 1.35rem;
    border-radius: 0.95rem;
    border: 1px solid rgb(var(--note-rgb) / 0.24);
    background: var(--surface);
    transition: border-color 0.16s, background 0.16s;
}
.band-card:hover { border-color: rgb(var(--note-rgb) / 0.5); background: var(--surface-hover); }
.band-card-ico {
    flex: 0 0 auto;
    width: 2.7rem; height: 2.7rem;
    border-radius: 0.8rem;
    display: grid; place-items: center;
    color: var(--note);
    background: rgb(var(--note-rgb) / 0.12);
    border: 1px solid rgb(var(--note-rgb) / 0.3);
}
.band-card-ico svg { width: 1.4rem; height: 1.4rem; }
.band-card-body { min-width: 0; }
.band-card-body b {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.band-card-body p {
    font-size: 0.96rem;
    font-weight: 300;
    line-height: 1.68;
    color: var(--text-secondary);
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════════
   04 · WHAT IS NOT THERE

   Nicolas: *"the 'cinque cose' should show that those things are
   undesirable and that we do not do it, or we do it that way and it's
   nice — right now it looks like a fine line in a contract and looks
   suspicious."*

   It did, and the styling was the whole reason: five 0.92rem lines in
   `--text-muted`, run together, no cards, no marks. That is literally how
   a contract prints the clause you are not meant to read — so the honest
   thing on the page read as the shifty one.

   Five cards now, each with a struck ring, each thing named at full size
   and the sentence that follows saying what happens INSTEAD. Four of the
   five are plainly good news (no cookie banner, no platform rent, no
   vendor-locked code, no ticket queue); the fifth is a real limit, stated
   as plainly as the other four. That evenness is the point — a page that
   sizes its bad news like its good news is the one you can believe.
   ════════════════════════════════════════════════════════════════════ */
.wa-nots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: clamp(0.6rem, 1.4vw, 0.95rem);
    text-align: left;
}
.wa-not {
    display: flex;
    gap: 1rem;
    padding: 1.3rem 1.35rem;
    border-radius: 0.95rem;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,0.028);
}
/* A struck ring, not a red cross: this is "there is no such thing here",
   which is a fact, not an error. It wears the muted end of the page. */
.wa-not-x {
    flex: 0 0 auto;
    width: 2.7rem; height: 2.7rem;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04);
}
.wa-not-x svg { width: 1.3rem; height: 1.3rem; }
.wa-not-body { min-width: 0; }
.wa-not-body b {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.wa-not-body p {
    font-size: 0.96rem;
    font-weight: 300;
    line-height: 1.68;
    color: var(--text-secondary);
    margin: 0;
}
.wa-not-body a { color: var(--text-primary); border-bottom: 1px solid rgb(var(--note-rgb) / 0.5); text-decoration: none; }
.wa-not-body a:hover { border-bottom-color: var(--note); }

/* ⚠ RETIRED 2026-08-21 — the four-step "Come si parte" band and its
   `.wa-step*` rules. Nicolas: *"I think the 05 section is useless, it adds
   time and signature vocabulary where it is not needed."* It did: four cards
   about 48 hours, written offers and signing, on a page whose whole job is
   to get somebody to open a demo. `git show` this file for the CSS. */

/* ════════════════════════════════════════════════════════════════════
   06 · THE REQUEST — "La tua demo, senza impegno"

   The same eleven, the same taxonomy, a DIFFERENT VERB: up there you look
   at a trade, down here you ask for yours. Nicolas: *"the tiles to get
   their own demos are nice but it's not clear what they are — it must be
   more explicit."* So the band says what it is in its label, what happens
   when you click in the line above the tiles, and the tiles themselves
   stay small and plain: this is a chooser, not a gallery, and it must not
   look like one.
   ════════════════════════════════════════════════════════════════════ */
/* THE CHOOSER. Eleven label tiles, and NOT at the front door's three-per-row:
   at 1180px that is eleven 380px slabs holding one word each, which is the
   "three tiles and another giant one underneath" the house rule exists to
   kill, arriving by the other door. Four across, fixed height, a short last
   row centred — same tile, chooser density. (The panel makes the same move
   for the same reason; see house.css.) */
.wa-pick {
    --wa-cols: 4;
    --wa-gap: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wa-gap);
}
.wa-pick > .lp-tile {
    flex: 0 0 calc((100% - (var(--wa-cols) - 1) * var(--wa-gap)) / var(--wa-cols));
    min-width: 0;
    min-height: 0;
    height: 5.8rem;
    gap: 0.4rem;
}
.wa-pick .wa-mark { width: 1.4rem; color: currentColor; }
@media (max-width: 880px) { .wa-pick { --wa-cols: 3; } }
@media (max-width: 520px) { .wa-pick { --wa-cols: 2; } }

.wa-hint {
    max-width: 52ch;
    margin: 0 auto 1.2rem;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--note);
}

/* ── The price, at the END, one line, disclosed and not advertised ── */
.band-tail {
    max-width: 1180px;
    margin: clamp(3rem, 7vw, 4.5rem) auto 0;
    padding: 1.6rem clamp(1rem, 4vw, 2rem) 0;
    border-top: 1px solid var(--border-soft);
    text-align: center;
}
.band-tail p {
    max-width: 66ch;
    margin: 0 auto;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-muted);
}
.band-tail p b { color: var(--text-secondary); font-weight: 700; }
.band-tail p a { color: var(--text-secondary); border-bottom: 1px solid rgb(var(--note-rgb) / 0.45); text-decoration: none; }
.band-tail p a:hover { color: var(--text-primary); border-bottom-color: var(--note); }