/* Pagina „Materiale gratuite”: formularul, pașii de după trimitere și cardurile materialelor.
   Se încarcă doar pe pagina cu formularul, după stilul site-ului; folosește culorile și spațiile lui. */
.mat-section { scroll-margin-top: var(--header) }
.mat-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: start }
.mat-form, .mat-done { grid-column: 1; grid-row: 1 }
.mat-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header) + 24px) }
.mat-radios { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.mat-radios .radio b { font-size: 15px; line-height: 1.35 }
.mat-radios .radio small { margin-top: 4px; line-height: 1.4 }
.mat-radios + .err { margin-top: 10px }
.mat-form [data-mat-submit][disabled] { opacity: .6; cursor: wait }
.mat-done:focus { outline: none }
.mat-done > p { color: var(--muted); margin-top: 10px }
.mat-done > p b { color: var(--ink) }
.mat-steps { counter-reset: ms; display: grid; gap: 16px; margin: 14px 0 28px }
.mat-steps li { counter-increment: ms; position: relative; padding-left: 44px; color: var(--muted); font-size: 15.5px; line-height: 1.55 }
.mat-steps li::before { content: counter(ms); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-ink); font-weight: 720; font-size: 14px; display: flex; align-items: center; justify-content: center }
.mat-steps b { color: var(--ink) }
.mat-person { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper) }
.mat-person p { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45 }
.mat-person span { color: var(--muted) }
.mat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap) }
.mat-card { display: flex; flex-direction: column; gap: 12px; background: var(--mist); border-radius: var(--r-lg); padding: var(--card-pad); scroll-margin-top: calc(var(--header) + 24px) }
.mat-card h3 { font-size: 19px }
.mat-card p:not(.eyebrow) { color: var(--muted); font-size: 15px }
.mat-card .mat-guide { font-size: 14px }
.mat-card .mat-guide a { color: var(--teal-ink) }
.mat-card .text-link { margin-top: auto; align-self: flex-start }
@media (max-width: 980px) {
  .mat-grid { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .mat-aside { grid-column: 1; grid-row: auto; position: static }
  .mat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .mat-radios, .mat-cards { grid-template-columns: minmax(0, 1fr) }
}
.mat-done .btn-primary { color: var(--ink) }
/* Casetele mat-hook din prima pagină: sub cele trei garanții din hero și sub ghiduri. */
.callout.mat-hook { margin: 28px 0 0 }
/* Previzualizările materialelor: desene SVG în pagină, cu textul real din fișiere, sus pe fiecare card și în primul ecran. */
.mat-card .mat-art { display: block; width: calc(100% + 2 * var(--card-pad)); max-width: none; height: auto; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 8px; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 1px solid var(--line-2); overflow: hidden }
.cover-fan .mat-art { position: absolute; width: 72%; height: auto; border-radius: 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden }
.cover-fan .mat-art:nth-child(1) { left: 4%; top: 5%; transform: rotate(-6deg) }
.cover-fan .mat-art:nth-child(2) { right: 4%; top: 31%; transform: rotate(5deg) }
.cover-fan .mat-art:nth-child(3) { left: 13%; bottom: 5%; transform: rotate(-1.5deg) }