/* Landing A — «5,35 % fixe», pagina semplice col modulo dentro.
   Composizione da supplemento finanziario: il numero è il titolo grafico, la foto sta
   in una finestra a frontone (il tetto del marchio, 45°). Un solo momento orchestrato:
   l'apertura (frontone che si disegna → rulli → testo e modulo). Il resto è fermo. */

/* ---------- testata ---------- */
.site-head { position: relative; z-index: 2; }
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.site-head__cta {
  display: none; align-items: center; min-height: 44px; padding-inline: 4px;
  font-size: var(--fs-s); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ligne-forte);
  text-underline-offset: 0.35em; transition: text-decoration-color var(--t-fast);
}
.site-head__cta:hover { text-decoration-color: currentColor; }
@media (min-width: 900px) { .site-head__cta { display: inline-flex; } }

/* ---------- apertura ---------- */
.hero { padding-block: clamp(18px, 3vw, 24px) clamp(64px, 9vw, 120px); }
.hero__grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  grid-template-areas:
    "rate  rate"
    "title gable"
    "sub   sub"
    "card  card";
  column-gap: clamp(16px, 4vw, 40px);
  align-items: end;
}

/* il numero: titolo grafico a rulli. Supera --fs-3xl di proposito (come nelle creatività) */
/* Misure dal font (Source Serif 4: ascendente 1,036, discendente 0,335, cifre 0,66 em):
   in una riga alta 1,12 em la linea di base sta a 0,91 em dall'alto e la cima delle cifre a 0,25 em.
   I margini negativi tagliano l'aria: il riquadro va dalla cima delle cifre alla linea di base. */
.rate {
  grid-area: rate; display: flex; margin: 0 0 calc(0.17em + clamp(8px, 2vw, 18px));
  font-size: var(--fs-hero-num);
  font-size: min(15rem, 100cqi / 1.98); /* riempie la colonna; senza unità cq resta il token */
}
.rate__vis { display: inline-flex; align-items: flex-start; }
.rate__num {
  display: inline-flex; font-family: var(--serif); font-variation-settings: "opsz" 60;
  line-height: 1.12; height: 1.12em; letter-spacing: -0.035em; white-space: nowrap;
  margin-block: -0.22em -0.21em;
  clip-path: inset(0.215em -0.1em 0.04em -0.1em); /* la finestra dei rulli: alta quanto le cifre (+ la virgola) */
}
.rate__num .od__d, .rate__num .od__c { letter-spacing: -0.035em; }
.rate__side { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; margin-left: 0.07em; }
.rate__pct { font-family: var(--serif); font-variation-settings: "opsz" 60; font-size: 0.4em; line-height: 0.82; letter-spacing: -0.01em; }
.rate__fixe {
  font-family: var(--serif); font-variation-settings: "opsz" 36; font-size: max(0.19em, 1rem);
  line-height: 1; margin-bottom: -0.15em; /* la linea di base di «fixe» = quella delle cifre */
  color: var(--gris); padding-left: 0.06em;
}

.hero__title {
  grid-area: title; align-self: end;
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.75rem);
  font-variation-settings: "opsz" 48; line-height: 1.08; letter-spacing: -0.02em;
  padding-bottom: 2px;
}
.hero__sub {
  grid-area: sub; margin-top: clamp(16px, 3vw, 24px); max-width: 44ch;
  font-size: var(--fs-l); line-height: 1.5; color: var(--gris);
}

/* la finestra a frontone: tetto a 45° come il chevron del marchio. Riquadro sempre 4:5,
   così il 40 % dell'altezza è esattamente metà larghezza e l'angolo non si deforma. */
.gable { grid-area: gable; position: relative; margin: 0; aspect-ratio: 4 / 5; align-self: end; }
.gable__glass {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%);
}
.gable__glass picture { display: contents; }
.gable__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; background: #938579; /* colore medio, finché la foto arriva */ }
.gable__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gable__line path { fill: none; stroke: var(--encre); stroke-width: 1.25; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }

/* ---------- carta del modulo ---------- */
.lead-card {
  grid-area: card; margin-top: clamp(24px, 5vw, 36px);
  padding: 26px 20px 22px; border-radius: var(--r-l);
  background: color-mix(in srgb, white 58%, var(--papier)); box-shadow: var(--ombre);
  scroll-margin-top: 12px;
}
.lead-card:focus { outline: none; }
.lead-card__title { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); font-variation-settings: "opsz" 36; letter-spacing: -0.01em; }
.lead-card__meta { margin-top: 8px; font-size: var(--fs-s); color: var(--gris); }
.lead-form { margin-top: 20px; display: grid; gap: 18px; }
.lead-form__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 12px; }
.field--half { grid-column: span 3; }
.field--full { grid-column: 1 / -1; }
.field--phone { grid-column: span 4; }
.field--zip { grid-column: span 2; }
.lead-card .field__input { background: color-mix(in srgb, white 82%, var(--papier)); }
.lead-card .field__input:focus { background: white; }
.lead-card .field__input:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; } /* l'anello del componente (14 %) da solo è troppo tenue */
.lead-card .field__label { white-space: nowrap; }
.lead-form__consent { display: grid; gap: 6px; }
.lead-form .check__text { font-size: 0.8125rem; line-height: 1.5; }
.lead-form__submit { margin-top: 2px; }
.lead-card__fine { font-size: var(--fs-xs); line-height: 1.5; color: var(--gris); }

/* invio riuscito: il disco-freccia diventa spunta, poi si passa a /merci/ */
.btn.is-done::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316232B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  animation: done-pop 0.42s var(--spring) both;
}
@keyframes done-pop { from { transform: scale(0.6) rotate(-20deg); } to { transform: none; } }

/* ---------- tablet e desktop ---------- */
/* Da 640 px il numero e la casa stanno sulla stessa riga e poggiano sulla stessa linea di terra
   (base delle cifre = base del frontone); il titolo va sotto, largo, nelle due frasi dell'annuncio. */
@media (min-width: 640px) {
  .hero__grid {
    --g: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
    grid-template-areas:
      "rate  gable"
      "title title"
      "sub   sub"
      "card  card";
    column-gap: var(--g);
  }
  .rate { margin-bottom: 0; font-size: min(15rem, (100cqi - var(--g)) / 1.52 / 1.95); }
  .hero__title { margin-top: clamp(40px, 6vw, 64px); font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem); }
  .hero__title span { display: block; }
  .lead-card { padding: 32px 32px 28px; max-width: 620px; }
}
@media (min-width: 900px) {
  .hero__grid {
    --card: clamp(340px, 30vw, 400px);
    --g: clamp(28px, 3.4vw, 56px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) var(--card);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "rate  gable card"
      "title title card"
      "sub   sub   card";
  }
  .rate { font-size: min(15rem, (100cqi - var(--card) - 2 * var(--g)) / 1.72 / 1.95); }
  .hero__title, .hero__sub { align-self: start; }
  .hero__sub { margin-top: 20px; }
  .gable__img { object-position: 100% 50%; } /* 16:9: la coppia è a destra, la si porta sotto il colmo */
  .lead-card { margin-top: 0; max-width: none; align-self: start; padding: 30px 30px 26px; }
}

/* ---------- i tre motivi: elenco tipografico a filetti ---------- */
.reasons { padding-block: clamp(40px, 7vw, 96px) clamp(72px, 10vw, 136px); }
.reasons__list { position: relative; border-top: 1px solid var(--ligne-forte); }
.reasons__list::before { /* l'unico terracotta della sezione: la soglia del marchio */
  content: ""; position: absolute; left: 0; top: -2px; width: 36px; height: 3px; border-radius: 2px; background: var(--terre);
}
.reason { display: grid; gap: 8px; padding-block: 26px 28px; border-bottom: 1px solid var(--ligne-forte); }
.reason__title {
  font-family: var(--serif); font-variation-settings: "opsz" 48;
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance;
}
.reason__text { color: var(--gris); max-width: 40ch; }
@media (min-width: 760px) {
  .reason { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); align-items: baseline; padding-block: 34px 36px; }
  .reason__text { font-size: var(--fs-l); }
}

/* ---------- simulatore: la sola fascia scura ---------- */
.sim { background: var(--encre); color: var(--papier); padding-block: clamp(64px, 10vw, 136px); }
.sim__title { font-size: var(--fs-2xl); }
.sim__lead { margin-top: 14px; max-width: 30ch; font-size: var(--fs-l); line-height: 1.45; color: color-mix(in srgb, var(--papier) 80%, transparent); }
.sim__panel { margin-top: 40px; }
.sim__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sim__label { font-size: var(--fs-s); font-weight: 500; color: color-mix(in srgb, var(--papier) 78%, transparent); }
.sim__amount { font-family: var(--serif); font-variation-settings: "opsz" 48; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; }
.sim__range { margin-top: 6px; }
.sim__chips { margin-top: 6px; }
.sim__result { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ligne-inverse); }
.sim__interest {
  margin-top: 4px; font-family: var(--serif); font-variation-settings: "opsz" 60;
  font-size: clamp(3.75rem, 2.4rem + 6vw, 7rem); line-height: 1.12; letter-spacing: -0.035em;
}
.sim__interest .od__d, .sim__interest .od__c, .sim__amount .od__d, .sim__amount .od__c { letter-spacing: inherit; }
.sim__note { margin-top: 20px; max-width: 64ch; font-size: var(--fs-xs); line-height: 1.55; color: color-mix(in srgb, var(--papier) 72%, transparent); }
.sim__cta { margin-top: 32px; }
.sim__cta--wide { display: none; }
html:not(.js) .sim__range, html:not(.js) .sim__chips { display: none; }
@media (min-width: 900px) {
  .sim__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(48px, 8vw, 120px); align-items: start; }
  .sim__panel { margin-top: 8px; }
  .sim__cta--wide { display: inline-flex; margin-top: 40px; }
  .sim__cta--narrow { display: none; }
}

/* ---------- comment ça marche: una vera sequenza ---------- */
.steps { padding-block: clamp(72px, 10vw, 136px) clamp(32px, 5vw, 64px); }
.steps__title { font-size: var(--fs-2xl); }
.steps__list { margin-top: clamp(28px, 4vw, 48px); display: grid; }
.step { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; align-content: start; column-gap: 12px; padding-block: 20px 22px; border-top: 1px solid var(--ligne-forte); }
.step:last-child { border-bottom: 1px solid var(--ligne-forte); }
.step__n {
  font-family: var(--serif); font-variation-settings: "opsz" 60; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  line-height: 1; color: var(--ardoise); font-variant-numeric: lining-nums;
}
.step__text { font-family: var(--serif); font-variation-settings: "opsz" 36; font-size: var(--fs-l); line-height: 1.3; }
@media (min-width: 900px) {
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 56px); }
  .step, .step:last-child { grid-template-columns: 1fr; row-gap: 18px; padding-block: 28px 0; border-bottom: 0; }
  .step__text { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); text-wrap: balance; }
}

/* ---------- la pausa onesta ---------- */
.pause { padding-block: clamp(64px, 10vw, 144px); }
.pause__quote {
  font-family: var(--serif); font-variation-settings: "opsz" 60;
  font-size: clamp(2.375rem, 1.4rem + 4.4vw, 5rem); line-height: 1.04; letter-spacing: -0.03em;
}
.pause__quote span { display: block; text-wrap: balance; }
.pause__cta { margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .pause__in { padding-left: calc((100% + 56px) / 12 * 2); } }

/* ---------- domande ---------- */
.faq-sec { padding-block: clamp(24px, 4vw, 48px) clamp(72px, 10vw, 136px); }
.faq-sec__title { font-size: var(--fs-2xl); margin-bottom: clamp(20px, 3vw, 32px); }
.faq .faq__body p { max-width: 62ch; }
@media (min-width: 900px) {
  .faq-sec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .faq-sec__title { margin-bottom: 0; padding-top: 14px; }
}

/* ---------- piè di pagina ---------- */
.legal-foot__in { display: grid; gap: 24px; }
.legal-foot__brand .brand__word { font-size: 1.25rem; }
.legal-foot__brand .brand__mark { width: 34px; height: 34px; }
.legal-foot__links { margin-bottom: 0; }
.legal-foot__links a, .legal-foot__links button { min-height: 44px; display: inline-flex; align-items: center; }
.legal-foot__text { max-width: 78ch; }
.legal-foot__text p + p { margin-top: 10px; }
@media (max-width: 899px) { .page-a .legal-foot { padding-bottom: calc(56px + 92px + env(safe-area-inset-bottom)); } }

/* ---------- barra fissa (mobile) ---------- */
.sticky-cta .btn { min-height: 56px; }
.sticky-cta .btn::after { width: 40px; height: 40px; }

/* ---------- sequenza di apertura ----------
   Senza JS nulla è nascosto (.js manca). Con JS gli elementi partono invisibili e una rete
   di sicurezza li mostra comunque a 2,6 s se a.js non arriva; a.js mette .seq-go e prende il comando. */
.js .hero [data-seq] { animation: seq-failsafe 1ms linear 2.6s both; }
@keyframes seq-failsafe { from { opacity: 0; } to { opacity: 1; } }

.seq-go .hero [data-seq] { animation: none; }
.seq-go .gable__line { animation: wipe-down 760ms var(--ease-in-out) both; }
.seq-go .gable__glass .gable__img { animation: glass-in 1100ms var(--ease-out) 300ms both; }
.seq-go .hero [data-seq="rate"] { animation: fade-in 260ms linear 560ms both; }
.seq-go .hero [data-seq="title"] { animation: compose 720ms var(--ease-out) 1000ms both; }
.seq-go .hero [data-seq="sub"] { animation: compose 720ms var(--ease-out) 1120ms both; }
.seq-go .hero [data-seq="card"] { animation: card-in 820ms var(--ease-out) 1220ms both; }

@keyframes wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes glass-in {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes compose { from { opacity: 0; transform: translateY(0.35em); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero [data-seq], .seq-go .hero [data-seq], .seq-go .gable__line, .seq-go .gable__glass .gable__img {
    animation: none !important; opacity: 1; clip-path: none; transform: none; filter: none;
  }
  .btn.is-done::after { animation: none; }
}