/* ═════════════════════════════════════════════════════════════════
   THE STAGE — aligned to THE BAND, 2026-08-21.

   `.stage` is the section wrapper on /perche/, /portfolio/ and the product
   landings. It ran at 1620px while `section` ran at 680 and the bands at
   1180: three widths on one site, and a page that mixed them read as three
   pages stapled together.

   It is the band's width and the band's rhythm now, and `.point` is the
   band's card. The markup did not have to change for any of it — which is
   the whole reason to keep a shared component honest rather than rewriting
   eight sections by hand.
   ═════════════════════════════════════════════════════════════════ */
.stage {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(3.4rem, 8vw, 5.5rem) clamp(1rem, 4vw, 2rem) 0;
}
.stage:last-of-type { padding-bottom: clamp(2rem, 5vw, 3rem); }
.stage-head { text-align: center; max-width: 64ch; margin: 0 auto clamp(1.5rem, 3.5vw, 2.3rem); }
.stage-head h2 {
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 800; line-height: 1.18; letter-spacing: -0.012em;
    text-transform: none; background: none; -webkit-text-fill-color: currentColor;
    color: var(--text-primary); margin: 0.5rem 0 0;
}
.stage-head p {
    color: var(--text-secondary);
    font-size: 1rem; font-weight: 300; line-height: 1.7;
    max-width: 60ch; margin: 0.85rem auto 0;
}
/* The section label: the same object as `.band-kicker` and `.lp-cat-label`. */
.stage-head .section-eyebrow, .stage .section-eyebrow {
    display: inline-block;
    font-size: 0.76rem; font-weight: 700;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--note);
    margin-bottom: 0;
}

/* ── .point-grid / .point — the band's card, under another name ────── */
.point-grid, .point-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: clamp(0.6rem, 1.4vw, 0.95rem);
    text-align: left;
    margin-top: 0;
}
.point {
    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;
}
.point:hover { border-color: rgb(var(--note-rgb) / 0.5); background: var(--surface-hover); }
.point-ico {
    display: grid; place-items: center;
    width: 2.7rem; height: 2.7rem;
    border-radius: 0.8rem;
    margin-bottom: 0.85rem;
    color: var(--note);
    background: rgb(var(--note-rgb) / 0.12);
    border: 1px solid rgb(var(--note-rgb) / 0.3);
}
.point-ico svg { width: 1.4rem; height: 1.4rem; }
.point h3 {
    font-size: 1.02rem; font-weight: 700; line-height: 1.3;
    color: var(--text-primary); margin: 0 0 0.35rem;
}
.point p {
    font-size: 0.96rem; font-weight: 300; line-height: 1.68;
    color: var(--text-secondary); margin: 0;
}
.point p + p { margin-top: 0.6rem; }
/* `.prezzo` inside a point is a METRIC, not a price: the line that says how
   the claim above it can be checked. Same object as `.band-card-metric`. */
.point .prezzo {
    display: block;
    margin-top: 0.6rem; padding-top: 0.6rem;
    border-top: 1px solid rgb(var(--note-rgb) / 0.22);
    font-size: 0.82rem; font-weight: 600; line-height: 1.5;
    color: var(--note);
}

/* ── The opening of a stage page — no more `.hero` ────────────────
   `.hero` was the marketing era: an aura, a gradient eyebrow, a promise, two
   buttons. What a page actually opens with is its name and one paragraph. */
.hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(2.4rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 0;
    text-align: center;
}
.hero-aura { display: none; }             /* the breathing glow behind the old hero */
.hero-eyebrow {
    display: inline-block;
    font-size: 0.76rem; font-weight: 700;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--note);
    margin-bottom: 0.9rem;
}
.hero-title {
    font-size: clamp(1.6rem, 3.6vw, 2.5rem);
    font-weight: 800; line-height: 1.12; letter-spacing: -0.015em;
    color: var(--text-primary); margin: 0;
}
.hero-sub, .hero-promise {
    max-width: 62ch; margin: 1rem auto 0;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    font-weight: 300; line-height: 1.7;
    color: var(--text-secondary);
}
.hero-promise strong { color: var(--text-primary); font-weight: 700; }
.hero-cta-row {
    display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center;
    margin-top: 1.6rem;
}

/* ⚠ THE TYPE, THE RESET AND THE GROUND ARE NOT IN THIS FILE. The five
   @font-face declarations, `* { margin:0 }`, the `html`/`body` base and the
   note-tinted `body::before` vignette are `home/css/house.css`, which every
   shell loads BEFORE this one. They were here, and the two request shells do
   not load this file: /pacchetto-…/ had no vignette and no weight 300.

   ⚠ THE PALETTE, THE MENU, THE TILE GRAMMAR, THE BAND, THE BUTTON AND THE
   FIELD are in that same file. If a `var(--note)` below resolves to nothing,
   house.css did not load. */


/* ═══════════════════════════════════════════════════════════════════
   LANDING — HERO: typographic, value proposition + CTA
   ═══════════════════════════════════════════════════════════════════ */

/* ⚠ `.cta-button.secondary` is THE OTHER OPTION now — house.css, `.btn--quiet`. */

@media (max-width: 700px) {
    .hero { padding: 3.5rem 1.25rem 3rem; }
    .hero-cta-row .cta-button { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADLINES — readable title under each small eyebrow
   ═══════════════════════════════════════════════════════════════════ */

.section-headline {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-top: -1.25rem;
    margin-bottom: 1.75rem;
    text-align: left;
    /* neutralize the `section h2` kicker rule — headlines are now real <h2> elements */
    text-transform: none;
    background: none;
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}
#come-funziona-teaser .section-headline,
.cta-final .section-headline { text-align: center; }

/* ── Chi c'è dietro — compressed trust block ───────────────────── */
.chi-section { text-align: left; }
.chi-section p {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0.85rem;
}
.chi-section p:last-child { margin-bottom: 0; }
/* the headline here has always rendered as muted body text (it used to be a <p>
   caught by `.chi-section p`) — keep that look now that it is the section <h2> */
.chi-section .section-headline {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0.85rem;
}
.chi-section strong { color: var(--text-primary); font-weight: 600; }

@media (max-width: 700px) {
    .section-headline { font-size: 1.25rem; }
}

/* ── Hero pipeline (infra → design → seo, connected) ───────────── */
.pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2.75rem;
}
.pipe-node {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}
.pipe-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--note);
}
.pipe-link {
    width: 26px; height: 2px;
    border-radius: 2px;
    background: var(--note);
    opacity: 0.45;
}
@media (max-width: 520px) { .pipe-link { width: 16px; } .pipe-node { padding: 0.5rem 0.85rem; font-size: 0.78rem; } }

/* ── Pillars — the full stack, icon cards ──────────────────────── */
.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: left;
}
.pillar {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 1.6rem 1.4rem;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.pillar:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px -22px rgb(var(--note-rgb) / 0.42);
    border-color: var(--border-medium);
}
.pillar-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    border-radius: 14px;
    margin-bottom: 1rem;
    color: #fff;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 10px 26px -10px rgb(var(--note-rgb) / 0.5), 0 6px 18px -10px rgb(var(--note-rgb) / 0.32), 0 4px 14px -8px rgb(var(--note-rgb) / 0.3);
}
.pillar-ico svg { width: 25px; height: 25px; }
.pillar h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
.pillar p  { font-size: 0.92rem; font-weight: 400; color: var(--text-secondary); line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }

/* ── VS — typical agency vs Arrow ──────────────────────────────── */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
.vs-col {
    border-radius: 16px;
    padding: 1.5rem 1.4rem;
    border: 1px solid var(--border-soft);
}
.vs-them { background: #f6f3f4; }
.vs-us {
    background: linear-gradient(165deg, #fff0f6, #ffe3ee);
    border-color: var(--border-medium);
    box-shadow: var(--shadow-card);
}
.vs-head {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 1rem;
}
.vs-them .vs-head { color: var(--text-muted); }
.vs-us .vs-head   { color: var(--note); }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.vs-col li {
    position: relative;
    padding-left: 1.7rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.vs-them li { color: var(--text-muted); }
.vs-them li::before {
    content: '✕';
    position: absolute; left: 0; top: 0;
    color: #b9a9af;
    font-weight: 700;
    font-size: 0.85rem;
}
.vs-us li { color: var(--text-primary); font-weight: 500; }
.vs-us li::before {
    content: '✓';
    position: absolute; left: 0; top: 0;
    color: var(--note);
    font-weight: 800;
    font-size: 0.9rem;
}
@media (max-width: 560px) { .vs-grid { grid-template-columns: 1fr; } }

/* ── Tutto incluso — icon-bullet grid ──────────────────────────── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    text-align: left;
}
.feature {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}
.feature-ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgb(var(--note-rgb) / 0.42), 0 4px 12px -9px rgb(var(--note-rgb) / 0.3);
}
.feature-ico svg { width: 19px; height: 19px; }
@media (max-width: 760px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .feature-grid { grid-template-columns: 1fr; } }

/* ── Showcase sections (websites / web apps) ───────────────────── */
.showcase-sub {
    text-align: left;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: -1rem 0 1.5rem;
}
.bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1.4rem;
    text-align: left;
}
.bullets li {
    position: relative;
    padding-left: 1.7rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}
.bullets li::before {
    content: '✓';
    position: absolute; left: 0; top: 0;
    color: var(--note);
    font-weight: 800;
    font-size: 0.9rem;
}
@media (max-width: 560px) { .bullets { grid-template-columns: 1fr; } }

/* Proof cards — recent portfolio work */
.proof-row { margin-top: 2rem; }
.proof-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
    text-align: left;
}
.proof-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.proof-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}
.proof-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -20px rgb(var(--note-rgb) / 0.4); }
.proof-media { display: block; height: 124px; overflow: hidden; }
.proof-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-body { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 1rem; }
.proof-body strong { font-size: 0.92rem; color: var(--text-primary); }
.proof-visit { font-size: 0.78rem; font-weight: 700; color: var(--note); white-space: nowrap; }
@media (max-width: 460px) { .proof-cards { grid-template-columns: 1fr; } }

/* ── Dal blog + audit ──────────────────────────────────────────── */
.blog-audit-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1rem; text-align: left; }
.posts-col { display: flex; flex-direction: column; gap: 0.8rem; }
.post-card {
    display: block;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.post-card:hover { transform: translateY(-2px); border-color: var(--border-medium); box-shadow: 0 18px 40px -20px rgb(var(--note-rgb) / 0.38); }
.post-cat {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--note);
    background: rgb(var(--note-rgb) / 0.14);
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    margin-bottom: 0.6rem;
}
.post-title { display: block; font-size: 1.02rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 0.35rem; }
.post-excerpt { display: block; font-size: 0.88rem; font-weight: 400; color: var(--text-secondary); line-height: 1.55; margin-bottom: 0.6rem; }
.post-meta { font-size: 0.78rem; font-weight: 600; color: var(--note); }
.posts-empty { color: var(--text-muted); font-size: 0.92rem; padding: 1rem 0; }
.audit-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    background: linear-gradient(165deg, rgba(229,68,127,0.16), rgb(var(--note-rgb) / 0.12));
    border: 1px solid var(--border-medium);
    border-radius: 16px;
    padding: 1.4rem 1.4rem;
    box-shadow: var(--shadow-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: transform 0.2s, box-shadow 0.2s;
}
.audit-card:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -18px rgb(var(--note-rgb) / 0.5); }
.audit-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.85rem;
    color: #fff;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 10px 24px -10px rgb(var(--note-rgb) / 0.5), 0 6px 16px -10px rgb(var(--note-rgb) / 0.32);
}
.audit-ico svg { width: 22px; height: 22px; }
.audit-card strong { font-size: 1.02rem; color: var(--text-primary); line-height: 1.3; margin-bottom: 0.5rem; }
.audit-body { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 0.9rem; }
.audit-cta { font-size: 0.82rem; font-weight: 700; color: var(--note); }
@media (max-width: 620px) { .blog-audit-grid { grid-template-columns: 1fr; } }

/* ── Appuntamento — booking CTA block ──────────────────────────── */
.appt-section { padding-top: 1rem; }
.appt-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 2.75rem 2rem;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: var(--shadow-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    text-align: center;
}
.appt-card::before {          /* logo-spectrum glow line on top */
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--note); opacity: 0.7;
}
.appt-eyebrow {
    display: block;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.22em; color: var(--note); margin-bottom: 1rem;
}
.appt-headline {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -0.02em;
    color: var(--text-primary); margin-bottom: 1rem; text-transform: none;
    opacity: 1;
}
.appt-sub {
    font-size: 1.02rem; font-weight: 400; color: var(--text-secondary);
    line-height: 1.6; max-width: 480px; margin: 0 auto 1.75rem;
}
.appt-note { display: block; margin-top: 1rem; font-size: 0.82rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   LANDING — PYRAMID BOTTOM: homepage sections
   ═══════════════════════════════════════════════════════════════════ */

section {
    padding: 3rem 2rem;
    max-width: 680px;
    margin: 0 auto;
}

section h2 {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--note);
    margin-bottom: 2rem;
}

/* Same look as `section h2` above (keep in lockstep) — the semantic-outline swap
   turned paired kickers into <span>s so the visible headline can be the <h2>. */
.section-eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--note);
    margin-bottom: 2rem;
}

/* ── Servizi cards ─────────────────────────────────────────────── */
.servizi-stack { display: flex; flex-direction: column; gap: 1rem; }

.servizio-card {
    display: block;
    text-decoration: none;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 1.6rem 1.7rem 1.4rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.servizio-card:hover {
    border-color: var(--border-medium);
    background: var(--surface-hover);
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -20px rgb(var(--note-rgb) / 0.4);
}
.servizio-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.servizio-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    margin: 0;
}
.servizio-card p {
    font-size: 0.97rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1rem;
}
/* Price is plain information — not a badge, not a selling point. */
.prezzo {
    display: inline-block;
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/* Inside value tiles, .prezzo carries wrapping links (e.g. respira sources), not a price — let them wrap. */
.point .prezzo { white-space: normal; }

/* «Ne hanno scritto» — press coverage cards under the Taranto Respira showcase. */
.press-wrap { max-width: 900px; margin: 2.4rem auto 0; text-align: center; }
.press-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--note); margin-bottom: 1rem; }
.press-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .press-row { grid-template-columns: 1fr; } }
.press-card { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; min-width: 0;
    text-decoration: none; padding: 1.2rem 1.3rem; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border-soft);
    transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.press-card:hover { border-color: rgb(var(--note-rgb) / 0.5); transform: translateY(-2px); background: var(--surface-hover); }
.press-card strong { font-size: 0.95rem; color: var(--text-primary); font-weight: 800; }
.press-quote { font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.press-date { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.card-arrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--note);
    letter-spacing: 0.05em;
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.15s;
}
.servizio-card:hover .card-arrow { opacity: 1; transform: translateX(3px); }

/* ── Perché grid ──────────────────────────────────────────────── */
.perche-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    text-align: left;
}
.perche-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s, background 0.2s;
}
.perche-card:hover { border-color: var(--border-medium); background: var(--surface-hover); }
.perche-card-body h3 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.perche-card-body p {
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 460px) { .perche-grid { grid-template-columns: 1fr; } }

/* ── Come funziona teaser ─────────────────────────────────────── */
#come-funziona-teaser { text-align: center; }
.teaser-lede {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
    font-style: italic;
}
.section-more { text-align: center; margin-top: 1.75rem; font-size: 0.9rem; }

/* ⚠ `.inline-link` is THE OTHER OPTION now — house.css, `.btn--quiet`. */

/* ⚠ THE BUTTON MOVED to house.css (2026-08-21): one object site-wide, in the
   action's pink. What stood here was a glass pill with a four-layer coloured
   glow, competing with the newsletter's button and nidi's slab for the same
   meaning. `.cta-button`, `.cta-button.secondary` and `.inline-link` are in
   the compatibility list there and should shrink out of it.  */

/* ═══════════════════════════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════════════════════════ */

#contatti p,
#contatti-landing p {
    margin-bottom: 1.75rem;
    font-weight: 300;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

form { display: flex; flex-direction: column; gap: 0.9rem; text-align: left; }

form input,
form textarea {
    font-family: var(--font);
    font-size: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    line-height: 1.5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
form input:focus,
form textarea:focus { border-color: var(--act); background: var(--surface-hover); }
form input::placeholder,
form textarea::placeholder { color: var(--text-muted); font-weight: 300; }


/* WhatsApp — THE EDGE AND THE GLYPH ARE GREEN, THE BUTTON IS NOT.
   Nicolas: *"cut the full green background on the button, it hurts — borders
   and icon coloured green are fine."* He is right twice over. It was a
   saturated two-stop gradient with a coloured glow under it, in ALL CAPS, and
   it was the loudest object on any page it appeared on — louder than the pink
   button, which is the one thing on this site allowed to mean "this happens if
   you press". And a FILL means exactly that here: one per view. WhatsApp is a
   destination, so it is the quiet button wearing WhatsApp's green on its edge
   and its mark — still recognisable at a glance, which was the whole reason
   the colour was there.

   ⚠ This is `.btn--quiet` with a green edge. If the two ever disagree, the
   house is right and this is wrong. */
.wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid rgba(37,211,102,0.55);
    box-shadow: none;
    transition: border-color 0.16s, background 0.16s;
}
.wa-btn:hover {
    border-color: rgba(37,211,102,0.9);
    background: rgba(37,211,102,0.10);
    transform: none;
    box-shadow: none;
}
.wa-btn svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: #4ade80; }
.appt-wa-row { margin: 0.25rem 0 1.25rem; }
@media (max-width: 700px) {
    .hero-cta-row .wa-btn { width: 100%; }
}

.form-success {
    background: rgb(var(--note-rgb) / 0.14);
    border: 1px solid rgba(138,180,162,0.3);
    border-radius: 10px;
    padding: 1.5rem;
    color: var(--note);
    font-weight: 600;
    text-align: center;
}
.form-error {
    background: rgba(107,45,78,0.15);
    border: 1px solid rgba(199,104,144,0.3);
    border-radius: 10px;
    padding: 1.5rem;
    color: var(--note);
    font-weight: 600;
    text-align: center;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    margin-top: 0.3rem;
}
.consent-label input[type="checkbox"] {
    margin-top: 3px;
    width: 16px; height: 16px;
    flex-shrink: 0;
    accent-color: var(--note);
}
.consent-label a { color: var(--note); text-decoration: underline; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   SUBPAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    text-align: left;
}

.page-hero {
    padding: 2.75rem 0 2.25rem;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
}
.page-hero h1 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
    line-height: 1.2;
}
.page-lede {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto 0.7rem;
}
.page-sub {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto;
    font-style: italic;
}
@media (min-width: 768px) {
    .page-hero h1 { font-size: 2.4rem; }
    .page-lede    { font-size: 1.2rem; }
}

/* ── Page blocks ──────────────────────────────────────────────── */
.page-block {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-soft);
    max-width: none;
    margin: 0;
}
.page-block:last-child { border-bottom: none; }

.page-block h2 {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--note);
    margin-bottom: 1.5rem;
    opacity: 0.85;
    text-align: left;
}
.page-block p {
    font-size: 0.96rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 0.85rem;
}
.page-block p:last-child { margin-bottom: 0; }
.page-block em { font-style: italic; color: var(--text-primary); }

/* ── Human block — pyramid middle layer on inner pages ────────── */
.page-block.page-human {
    border-bottom: 1px solid var(--border-soft);
}
.page-block.page-human p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: 0.85rem;
}
.page-block.page-human p:last-child { margin-bottom: 0; }
.page-block.page-human strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Include list ─────────────────────────────────────────────── */
.include-list { display: flex; flex-direction: column; gap: 1rem; }
.include-item {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.2s, background 0.2s;
}
.include-item:hover { border-color: var(--border-medium); background: var(--surface-hover); }
.include-item h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.include-item p {
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}
.include-item.emphasis { border-color: rgba(199,104,144,0.28); background: rgba(107,45,78,0.08); }
.include-item.emphasis h3 { color: var(--note); }
.include-item.emphasis p  { color: var(--text-primary); }

/* ── Price block ──────────────────────────────────────────────── */
.price-block {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.4rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin-bottom: 1.25rem;
}
.price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1.4;
}
.price-amount { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.price-unit   { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.price-detail { font-size: 0.88rem; font-weight: 300; color: var(--text-secondary); }
.price-footnote { font-size: 0.85rem; font-style: italic; color: var(--text-muted) !important; line-height: 1.7; }

@media (min-width: 768px) { .price-amount { font-size: 1.9rem; } }

/* ── Negative list ────────────────────────────────────────────── */
.negative-list { font-size: 0.95rem !important; line-height: 1.9 !important; }
.negative-line { font-size: 0.92rem; color: var(--text-muted); line-height: 1.7; text-align: left; margin-top: -1rem; }

/* ── Page CTA ─────────────────────────────────────────────────── */
.page-cta { text-align: center; }
.page-cta h2 { text-align: center; }
.page-cta p  { max-width: 460px; margin: 0 auto 1.5rem; text-align: center; }
.page-cta .cta-button { margin-top: 0.5rem; }

/* ═══════════════════════════════════════════════════════════════════
   PERCHÉ — manifesto
   ═══════════════════════════════════════════════════════════════════ */

.manifesto p { font-size: 1rem; line-height: 1.85; color: var(--text-primary); }
.manifesto p strong { color: var(--note); font-weight: 700; }

/* ── Tech details expandable ──────────────────────────────────── */
.tech-details {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    overflow: hidden;
    transition: border-color 0.2s;
}
.tech-details:hover { border-color: var(--border-medium); }
.tech-details[open] { border-color: rgba(199,104,144,0.25); }
.tech-details summary {
    padding: 0.95rem 1.2rem;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
    position: relative;
    transition: background 0.15s;
}
.tech-details summary::-webkit-details-marker { display: none; }
.tech-details summary::after {
    content: '+';
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--note);
    font-weight: 300;
    font-size: 1.25rem;
}
.tech-details[open] summary::after { content: '−'; }
.tech-details summary:hover { background: var(--surface-hover); }
.tech-body {
    padding: 0.4rem 1.2rem 1.2rem;
    border-top: 1px solid var(--border-soft);
}
.tech-body p { font-size: 0.88rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 0.75rem; }
.tech-body p:last-child { margin-bottom: 0; }
.tech-body strong { color: var(--text-primary); font-weight: 700; }
.tech-body code {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    background: rgba(199,104,144,0.1);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    color: var(--note);
}

/* ═══════════════════════════════════════════════════════════════════
   COME FUNZIONA — steps
   ═══════════════════════════════════════════════════════════════════ */

.steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.step-item {
    display: flex;
    gap: 1.1rem;
    padding: 1.25rem 1.3rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.2s, background 0.2s;
}
.step-item:hover { border-color: var(--border-medium); background: var(--surface-hover); }
.step-num {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 8px 20px -10px rgb(var(--note-rgb) / 0.5), 0 5px 14px -10px rgb(var(--note-rgb) / 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 2px 12px rgba(107,45,78,0.35);
}
.step-body { flex: 1; min-width: 0; }
.step-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.45rem; }
.step-body p  { font-size: 0.93rem; font-weight: 300; color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.6rem; }
.step-body p:last-child { margin-bottom: 0; }
.step-callout { font-style: italic; color: var(--note) !important; font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════════
   THE FOOT — 2026-08-21.

   It was four centred paragraphs of the same size, the same weight and the
   same fade: a newsletter pitch, three legal links, a company line and an
   address, all reading as one grey block that nobody could scan. They are
   four different KINDS of thing and now they look like four:

     · the newsletter — the one thing here that asks something of you;
     · the contact    — the one thing here you might actually want. Loudest;
     · the legal      — three destinations, so: the tile grammar, small;
     · the identity   — the quietest line on the page. It is a fact, not an
                        offer, and it is the rename session's line to edit.
   ═══════════════════════════════════════════════════════════════════ */

footer {
    padding: 2.6rem 2rem 3rem;
    border-top: 1px solid var(--border-soft);
    text-align: center;
    max-width: 720px;
    margin: 3rem auto 0;
    /* Room for the launcher pair, which floats over the bottom of every page
       and would otherwise sit on top of the last line of the site. */
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px) + 6rem);
}

/* ── The contact. Loudest, because it is the only line here anyone came for. */
.ft-contact {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    margin: 2.2rem 0 0;
}
.ft-contact a { color: var(--text-primary); border-bottom: 1px solid rgb(var(--act-rgb) / 0.45); }
.ft-contact a:hover { border-bottom-color: var(--act); }

/* ── The legal. Three destinations — so they are separated like destinations
      and not run together with interpuncts you cannot aim at on a phone. */
.ft-legal {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.35rem 1.35rem;
    margin: 1.5rem 0 0;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
}

/* ── The identity. A fact. The quietest thing on the page. */
.ft-id {
    margin: 1.1rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    opacity: 0.7;
}

footer a { color: var(--text-secondary); text-decoration: none; transition: color 0.15s, border-color 0.15s; }
footer a:hover { color: var(--text-primary); }

/* ── The newsletter ──────────────────────────────────────────────────
   ONE FIELD AND ONE BUTTON, in one piece of glass. It used to be a bare
   input beside a solid gold slab with a glow on it — the single loudest
   object in the site, on every page, asking for an email before the page
   under it had finished saying anything.

   The field and the button share one shell now, so they read as one
   object; the shell lights up in the ACTION's pink when you are typing in
   it, which is the only colour on this site that means "this does
   something". The consent line sits under it, quiet, where a consent line
   belongs. */
.nl-form { max-width: 430px; margin: 0 auto; text-align: left; letter-spacing: normal; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-title {
    font-size: 0.88rem; font-weight: 600; line-height: 1.5;
    color: var(--text-secondary); margin: 0 0 0.7rem;
}
.nl-row {
    display: flex;
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    background: rgba(255,255,255,0.045);
    overflow: hidden;
    transition: border-color 0.16s, box-shadow 0.16s;
}
.nl-row:focus-within {
    border-color: var(--act);
    box-shadow: 0 0 0 3px rgb(var(--act-rgb) / 0.16);
}
.nl-input {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: 0; outline: none;
    padding: 0.8rem 0.95rem;
    color: var(--text-primary); font-family: var(--font); font-size: 0.9rem;
}
.nl-input::placeholder { color: var(--text-muted); }
/* ⚠ It was pink-on-13%-pink with a hairline for a left edge, welded to the
   full height of the shell — which read as a LABEL stuck to the field, not
   as something you press. ("The iscriviti button is weird.") It is a button
   now: the action's pink, filled, dark ink, sitting INSIDE the shell with a
   margin so the shell still reads as one object. Small, and no glow — the
   thing that was wrong with the gold slab was its size and its halo, not
   the fact that a button is coloured. */
.nl-btn {
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0.3rem;
    border: 0;
    border-radius: 9px;
    padding: 0 1.2rem;
    font-family: var(--font); font-weight: 700; font-size: 0.85rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    color: var(--act-ink);
    background: var(--act);
    transition: filter 0.16s, transform 0.12s;
}
.nl-btn:hover, .nl-btn:focus-visible {
    /* a LIGHTER rose, not a brightness filter - `brightness()` washes the
       ink out with the fill and the label went grey with it. */
    background: color-mix(in srgb, var(--act) 68%, #ffffff);
    outline: none;
}
.nl-btn:active { transform: translateY(1px); }
.nl-consent {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin-top: 0.75rem;
    font-size: 0.74rem; font-weight: 300; line-height: 1.55;
    color: var(--text-muted); text-align: left;
}
.nl-consent input { margin-top: 0.15rem; accent-color: var(--act); flex-shrink: 0; }
.nl-consent a { color: var(--text-secondary); border-bottom: 1px solid rgb(var(--note-rgb) / 0.4); }
.nl-result { font-size: 0.82rem; margin-top: 0.6rem; }
.nl-result .nl-ok { color: #7fd0a5; }
.nl-result .nl-err { color: #ff9db0; }
@media (max-width: 420px) {
    .nl-row { flex-wrap: wrap; }
    .nl-btn { width: calc(100% - 0.6rem); padding: 0.65rem 1rem; margin-top: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   LEGAL PAGES
   ═══════════════════════════════════════════════════════════════════ */

.legal-section { max-width: 720px; margin: 0 auto; padding: 3rem 2rem 4rem; text-align: left; }
.legal-section h1 { font-size: 1.7rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
.legal-meta { font-size: 0.8rem; color: var(--note); letter-spacing: 0.06em; margin-bottom: 2.25rem; opacity: 0.85; }
.legal-section h2 {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--note);
    margin-top: 1.75rem;
    margin-bottom: 0.7rem;
    opacity: 0.9;
}
.legal-section p { font-size: 0.9rem; font-weight: 300; color: var(--text-secondary); line-height: 1.8; margin-bottom: 0.7rem; }
.legal-section strong { font-weight: 600; color: var(--text-primary); }
.legal-section code {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    background: rgba(199,104,144,0.1);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    color: var(--note);
}
.back-link {
    display: inline-block;
    margin-top: 2.5rem;
    color: var(--note);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
}
.back-link:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN v2 — glowing hero logo + Perché comparison grid
   ═══════════════════════════════════════════════════════════════════ */

/* Big Arrow logo at the top of the hero, with its own colours glowing behind. */
.hero-logo {
    position: relative;
    display: inline-block;
    line-height: 0;
    margin-bottom: 3.6rem;
}
.hero-logo img {
    position: relative;
    height: 70px;
    width: auto;
    max-width: 84vw;
}
.hero-logo-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 135%; height: 240%;
    transform: translate(-50%, -50%);
    background: var(--logo-gradient);
    filter: blur(48px);
    opacity: 0.42;
    border-radius: 50%;
    pointer-events: none;
    animation: logo-pulse 6s ease-in-out infinite alternate;
}
@keyframes logo-pulse {
    0%   { opacity: 0.30; transform: translate(-50%, -50%) scale(0.94); }
    100% { opacity: 0.50; transform: translate(-50%, -50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .hero-logo-glow { animation: none; } }
@media (max-width: 700px) { .hero-logo img { height: 54px; } }

/* Perché Arrow — Standard vs Arrow comparison grid (glassy, Arrow column lit). */
.compare {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.compare-row {
    display: grid;
    grid-template-columns: 1fr 84px 84px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    background: rgba(20,12,30,0.55);
    text-align: left;
}
.compare-feat { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.compare-std, .compare-arrow { text-align: center; }
.compare-arrow { background: rgba(229,68,127,0.07); border-radius: 8px; }

.compare-head .compare-std,
.compare-head .compare-arrow {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
    min-width: 0; overflow-wrap: break-word;
}
.compare-head .compare-std { color: var(--text-muted); }
.compare-head .compare-arrow { display: flex; align-items: center; justify-content: center; padding: 2px 0; }
.compare-head .compare-arrow img { max-width: 100%; max-height: 15px; width: auto; height: auto; }
.compare-row:not(.compare-head) .compare-std::before {
    content: '✕'; color: var(--text-muted); font-weight: 700; font-size: 0.95rem; opacity: 0.55;
}
.compare-row:not(.compare-head) .compare-arrow::before {
    content: '✓'; font-weight: 800; font-size: 1.05rem;
    color: var(--note);
}
@media (max-width: 480px) {
    .compare-row { grid-template-columns: 1fr 58px 58px; column-gap: 0.7rem; padding: 0.8rem 0.85rem; }
    .compare-feat { font-size: 0.84rem; }
}

/* ── Bare in-copy links (no component class): gold, never browser-blue ── */
main a:not([class]) { color: var(--note); text-decoration: none; border-bottom: 1px solid rgb(var(--note-rgb) / 0.45); }
main a:not([class]):hover { border-bottom-color: var(--note); }

/* ── Manifesto prose reads left, never centered-ragged ── */
.manifesto { text-align: left; margin: 1.4rem 0; }

/* ── Product wordmarks inside tiles: the name IS the logo ── */
.servizio-head .tile-mark { height: 34px; width: auto; display: block; }
h3.tile-mark-mn { font-weight: 800; font-size: 1.35rem; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary); }
h3.tile-mark-mn b { color: #f4c93e; font-weight: 800; }

/* ── Full-stage rows + big-icon points (the product-page rhythm, site skin) ── */
.stage-row { display: grid; gap: 14px; grid-template-columns: 1.5fr 1fr; align-items: center;
    margin-top: 14px; text-align: left; }
.stage-row.rev .stage-shot { order: 2; }
.stage-shot { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-soft); display: flex; align-items: center; }
.stage-shot img { width: 100%; height: auto; display: block; }
.stage-say { display: flex; flex-direction: column; justify-content: center;
    padding: 2.6rem 2.4rem; border-radius: 16px; background: var(--surface);
    border: 1px solid var(--border-soft); }
.stage-kicker { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--note); }
.stage-say h3 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.12; margin: 0.6rem 0 0;
    color: var(--text-primary); font-weight: 800; letter-spacing: -0.01em; }
.stage-say p { font-size: 1.1rem; line-height: 1.7; margin: 0.55rem 0 0; color: var(--text-secondary); }
.stage-say .prezzo { margin-top: 0.7rem; }
.stage-say .inline-link { margin-top: 1.3rem; align-self: flex-start; }
.stage-say .tile-mark { height: 56px; margin-top: 0.6rem; }
.stage-say h3.tile-mark-mn { font-size: clamp(1.5rem, 2.3vw, 2.2rem); }
@media (max-width: 1080px) { .stage-row { grid-template-columns: 1fr; }
    .stage-row.rev .stage-shot { order: 0; } }

.point-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 14px; text-align: left; }
@media (max-width: 760px) { .point-grid { grid-template-columns: 1fr; } }
.point { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 16px;
    padding: 2.4rem 2.2rem; min-width: 0; overflow-wrap: break-word; }
.point h3, .point p, .point a { overflow-wrap: anywhere; word-break: break-word; }
.point-ico { display: inline-flex; width: 64px; height: 64px; border-radius: 16px;
    align-items: center; justify-content: center; color: var(--note);
    background: rgb(var(--note-rgb) / 0.10); border: 1px solid rgb(var(--note-rgb) / 0.35); margin-bottom: 1.1rem; }
.point-ico svg { width: 32px; height: 32px; }
.point h3 { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.45rem; }
.point p { font-size: 1.02rem; line-height: 1.68; color: var(--text-secondary); margin: 0; }

/* ── The ROSE wordmark (Rose's own pink gradient, from her UI) ── */
.rose-wordmark { height: 2.5rem; width: auto; display: inline-block; vertical-align: middle;
    filter: drop-shadow(0 0 10px rgba(255,70,170,0.5)); }

/* ── Stage shots: uniform 16:10 box, image contained so nothing is edge-cropped ── */
.stage-shot { aspect-ratio: 16 / 10; }
.stage-shot img { width: 100%; height: 100%; object-fit: contain; }

/* ── Comanda text mark: the landing's silver-capitals lettering, crisp on dark ── */
.tile-mark-cm { font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    font-size: 1.15rem; line-height: 1;
    background: linear-gradient(180deg, #F4F6F8 0%, #C9CED4 48%, #8F979F 78%, #B9BFC7 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)); }
.stage-say .tile-mark-cm { font-size: 1.6rem; margin-top: 0.6rem; }


/* Stacked negative lines must not overlap (the single-line variant pulled up). */
.negative-list .negative-line { margin-top: 0.9rem; }

/* ── The real Comanda lockup (rail + capitals + ticket) inside tiles ── */
.tile-lockup-cm { display: inline-block; font-size: 20px; line-height: 1; }
.stage-say .tile-lockup-cm { font-size: 30px; margin-top: 0.7rem; }


/* The two door cards: equal height, buttons pinned to the same bottom line. */
.perche-grid.duo .perche-card-body { display: flex; flex-direction: column; height: 100%; }
.perche-grid.duo .perche-card-body p { flex: 1 0 auto; }
.perche-grid.duo .cta-button { margin-top: 1rem; align-self: flex-start; }

/* ── Stage prose: long arguments in two readable columns, never a skinny wall ── */
.stage-prose { max-width: 1100px; margin: 1.6rem auto 0; text-align: left;
    columns: 2; column-gap: 44px; }
@media (max-width: 860px) { .stage-prose { columns: 1; } }
.stage-prose p { break-inside: avoid; font-size: 1.05rem; line-height: 1.75;
    color: var(--text-secondary); margin: 0 0 1.1rem; }
.stage-prose p strong { color: var(--note); }
.point > p:only-child { margin: 0; }

/* ── Perche value sections — big stat line, full (un-cropped) proof shots, the
   Comanda PNG lockup at product-mark size, and the Rose icon strip. ── */
.stage-stat { text-align: center; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700;
    color: var(--text-secondary); line-height: 1.4; margin: 0.2rem auto 1.6rem; max-width: 40rem; }
.stage-stat b { color: var(--note); font-weight: 800; }
.pe-shot { margin: 1.8rem auto 0; max-width: 640px; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); background: #0c0e13; }
.pe-shot img { display: block; width: 100%; height: auto; }
.pe-shot.pe-shot-tall { max-width: 360px; }
.stage-say .tile-mark-cm-img { height: auto; max-height: 58px; width: auto; max-width: 280px; margin-top: 0.6rem; }
.rose-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin: 0 auto 1.7rem; }
.rose-icons span { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem;
    font-weight: 600; color: var(--text-secondary); }
.rose-icons svg { width: 18px; height: 18px; color: var(--note); flex: 0 0 auto; }

/* ⚠ RETIRED 2026-08-21 — `.home-value*`, `.value-tier*`, `.home-band*`,
   `.prod-row*` and `.prod-arrow`. Their only template was
   `home/_home_sections.html`, which came off the front door when the landing
   became a directory and was never reachable again. `.prod-arrow` was also the
   last corner arrow in the site — rule 2 forbids an arrow as the affordance,
   and the row was already the link. `git show` for the markup and the CSS. */



/* ── /perche/ — one note per section ──────────────────────────────────
   Nicolas: "I cannot stand the purple-only accent all over." Nine sections,
   nine notes, sweeping the Arrow spectrum the way the eleven tiles do — and
   the amber sixth skipped for the same reason. */
.pe-b1 { --note: #a87ae8; --note-rgb: 168 122 232; }
.pe-b2 { --note: #cf7f9c; --note-rgb: 207 127 156; }
.pe-b3 { --note: #d08468; --note-rgb: 208 132 104; }
.pe-b4 { --note: #6f9fd0; --note-rgb: 111 159 208; }
.pe-b5 { --note: #5cb0a6; --note-rgb:  92 176 166; }
.pe-b6 { --note: #6fae7a; --note-rgb: 111 174 122; }
.pe-b7 { --note: #8ab86f; --note-rgb: 138 184 111; }
.pe-b8 { --note: #5fb0c6; --note-rgb:  95 176 198; }
.pe-b9 { --note: #cf7f9c; --note-rgb: 207 127 156; }