/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4
 * Pages métiers (logiciel d'apport d'affaires par métier), fr/en/es.
 * Jetons : ~/Code/referaly/DESIGN-SYSTEM.md (verrouillé). Header et footer restent ceux de layout.js.
 */
.mt{
  --rf-primary:#7C3AED; --rf-primary-pressed:#5B21B6; --rf-primary-tint:#F1EBFE; --rf-primary-tint2:#E4D8FC;
  --rf-ink:#1B1726; --rf-ink2:#625C73; --rf-ink3:#8A8499; --rf-rule:#E8E4F0; --rf-paper:#F8F7FB; --rf-card:#FFFFFF;
  --rf-success:#15803D; --rf-success-tint:#E7F6EC; --rf-wa:#128C4B;
  --rf-shadow:0 24px 48px -24px rgba(46,16,101,.35);
  --rf-font:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  font-family:var(--rf-font); color:var(--rf-ink); background:var(--rf-paper);
  overflow-x:clip;
}
.mt *{box-sizing:border-box}
.mt h1,.mt h2,.mt h3{font-family:var(--rf-font);font-style:normal;color:var(--rf-ink);min-width:0;overflow-wrap:anywhere;text-wrap:balance}
.mt p{text-wrap:pretty}
.mt a{color:var(--rf-primary)}
.mt-wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.mt-wrap{padding:0 32px}}
.mt-sec{padding:64px 0}
.mt-sec--white{background:var(--rf-card);border-top:1px solid var(--rf-rule);border-bottom:1px solid var(--rf-rule)}
.mt-h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0 0 12px;max-width:22ch}
.mt-lead{font-size:17px;line-height:1.6;color:var(--rf-ink2);margin:0;max-width:60ch}
.mt-label{display:inline-block;font-size:12px;font-weight:700;color:var(--rf-primary);background:var(--rf-primary-tint);border-radius:999px;padding:4px 12px;margin:0 0 16px}

/* Boutons : arrondi 14, hauteur 48, le texte dit ce qu'il fait */
.mt-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.mt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:14px;font-family:var(--rf-font);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .2s,transform .15s}
.mt-btn:active{transform:translateY(1px)}
.mt-btn:focus-visible{outline:2px solid var(--rf-primary);outline-offset:3px}
.mt .mt-btn--p{background:var(--rf-primary);color:#fff}
.mt .mt-btn--p:hover{background:var(--rf-primary-pressed)}
.mt .mt-btn--s{background:var(--rf-primary-tint);color:var(--rf-primary)}
.mt .mt-btn--s:hover{background:var(--rf-primary-tint2)}
.mt-note{font-size:13px;color:var(--rf-ink3);margin:12px 0 0}
@media(max-width:480px){.mt-cta{flex-direction:column}.mt-btn{width:100%}}

/* Captures réelles de l'app : figure + filet, pas de faux téléphone */
.mt-shot{margin:0;justify-self:center;width:100%;max-width:300px}
.mt-shot img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid var(--rf-rule);background:var(--rf-card);box-shadow:var(--rf-shadow)}
.mt-shot figcaption{font-size:12px;font-weight:600;color:var(--rf-ink3);margin-top:12px;text-align:center}

/* Hero en deux colonnes */
.mt-hero{padding:48px 0 56px}
.mt-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
@media(min-width:900px){.mt-hero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px}.mt-hero{padding:72px 0 80px}}
.mt-hero h1{font-size:clamp(32px,5vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0 0 20px}
.mt-hero h1 span{color:var(--rf-primary)}
.mt-hero .mt-lead{font-size:18px}

/* Comment ça marche : 4 étapes, capture à chaque étape */
.mt-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media(min-width:640px){.mt-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}}
@media(min-width:1024px){.mt-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.mt-step{display:grid;grid-template-rows:auto auto 1fr;gap:12px}
.mt-step__n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:12px;background:var(--rf-primary);color:#fff;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.mt-step h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.mt-step p{font-size:15px;line-height:1.55;color:var(--rf-ink2);margin:0 0 8px}
.mt-step .mt-shot{max-width:240px;align-self:end}

/* Exemple chiffré, marqué comme exemple */
.mt-ex{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:48px 0 0;background:var(--rf-card);border:1px solid var(--rf-rule);border-radius:20px;padding:24px}
@media(min-width:768px){.mt-ex{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));align-items:center;padding:28px 32px}}
.mt-ex__t{font-size:15px;line-height:1.55;color:var(--rf-ink2);margin:0}
.mt-ex__t strong{color:var(--rf-ink)}
.mt-ex__v{border-left:1px solid var(--rf-rule);padding-left:16px}
.mt-ex__v b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rf-ink)}
.mt-ex__v span{font-size:12px;font-weight:600;color:var(--rf-ink3)}
.mt-ex__v--ok b{color:var(--rf-success)}

/* Fonctions : liste éditoriale en deux colonnes, filets, pas de cartes */
.mt-feat__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media(min-width:900px){.mt-feat__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}}
.mt-feat__intro{align-self:start}
@media(min-width:900px){.mt-feat__intro{position:sticky;top:96px}}
.mt-feat__list{list-style:none;margin:0;padding:0}
.mt-feat__list li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:24px 0;border-top:1px solid var(--rf-rule)}
.mt-feat__list li:last-child{border-bottom:1px solid var(--rf-rule)}
@media(min-width:640px){.mt-feat__list li{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px}}
.mt-feat__list h3{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:0}
.mt-feat__list p{font-size:15px;line-height:1.6;color:var(--rf-ink2);margin:0}

/* Prix + preuve, côte à côte */
.mt-offer{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media(min-width:900px){.mt-offer{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.mt-price{background:var(--rf-card);border:1.5px solid var(--rf-primary-tint2);border-radius:20px;padding:28px;box-shadow:var(--rf-shadow)}
.mt-price__amount{font-size:44px;font-weight:800;letter-spacing:-.035em;color:var(--rf-ink);font-variant-numeric:tabular-nums;line-height:1}
.mt-price__unit{font-size:15px;font-weight:600;color:var(--rf-ink2)}
.mt-price__who{font-size:14px;color:var(--rf-ink2);margin:12px 0 0;line-height:1.55}
.mt-price ul{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--rf-rule);display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media(min-width:560px){.mt-price ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt-price li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--rf-ink)}
.mt-price li::before{content:"";position:absolute;left:2px;top:3px;width:14px;height:14px;border-radius:999px;background:var(--rf-success-tint)}
.mt-price li::after{content:"";position:absolute;left:7px;top:5px;width:4px;height:7px;border:solid var(--rf-success);border-width:0 2px 2px 0;transform:rotate(45deg)}
.mt-price .mt-cta{margin-top:24px}
.mt-free{background:var(--rf-primary-tint);border-radius:20px;padding:24px 28px}
.mt-free h3{font-size:17px;font-weight:700;margin:0 0 8px}
.mt-free p{font-size:15px;line-height:1.55;color:var(--rf-ink2);margin:0}
.mt-side{display:grid;gap:24px;align-content:start}
.mt-proof{border-left:3px solid var(--rf-primary);padding:4px 0 4px 20px}
.mt-proof p{font-size:15px;line-height:1.6;color:var(--rf-ink2);margin:0}
.mt-proof a{text-decoration:underline;text-underline-offset:2px}

/* FAQ : questions visibles en deux colonnes, sans accordéon */
.mt-faq{display:grid;grid-template-columns:minmax(0,1fr);gap:0 48px;margin:32px 0 0}
@media(min-width:900px){.mt-faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt-faq div{padding:20px 0;border-top:1px solid var(--rf-rule)}
.mt-faq h3{font-size:16px;font-weight:700;line-height:1.4;margin:0 0 8px}
.mt-faq p{font-size:15px;line-height:1.6;color:var(--rf-ink2);margin:0}

/* Pour aller plus loin */
.mt-more{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media(min-width:900px){.mt-more{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}}
.mt-more ul{list-style:none;margin:0;padding:0}
.mt-more li{border-top:1px solid var(--rf-rule)}
.mt-more li:last-child{border-bottom:1px solid var(--rf-rule)}
.mt-more li a{display:block;padding:16px 0;font-size:15px;font-weight:600;color:var(--rf-ink);text-decoration:none;transition:color .2s}
.mt-more li a:hover{color:var(--rf-primary)}
.mt-more li a::after{content:" →";color:var(--rf-primary)}

/* Dernier appel */
.mt-end{text-align:left;background:var(--rf-ink);border-radius:20px;padding:40px 28px;margin:0 0 64px}
@media(min-width:768px){.mt-end{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:48px}}
.mt-end h2{color:#fff;font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
.mt-end p{color:var(--rf-ink3);margin:0;font-size:15px}
.mt-end .mt-cta{margin:24px 0 0}
@media(min-width:768px){.mt-end .mt-cta{margin:0}}

@media(prefers-reduced-motion:reduce){.mt-btn{transition:none}}
@media(max-width:899px){.mt-hero .mt-shot{max-width:260px}}

/* Professions réglementées : contrat sans commission */
.mt-reg{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;background:var(--rf-primary-tint);border-radius:20px;padding:24px;margin:0 0 56px}
@media(min-width:768px){.mt-reg{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;padding:28px 32px;align-items:center}}
.mt-reg h2{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin:0}
.mt-reg p{font-size:15px;line-height:1.6;color:var(--rf-ink2);margin:0}