/* ============================================================
   Yooz — landing pages SEA
   Feuille partagée : tokens de marque + composants communs.
   Les six autres pages réutilisent ce fichier tel quel.
   ============================================================ */

:root{
  --yz-rich-blue:#14354E;
  --yz-pink:#E0185E;
  --yz-pink-wash:#FCE7EE;
  --yz-grey-10:#FEFEFE;
  --yz-grey-20:#F5F5F5;
  --yz-grey-30:#EAEAEA;
  --yz-grey-40:#E6E6E6;
  --yz-grey-50:#DEDEE0;
  --yz-grey-60:#CCCDD2;
  --yz-grey-70:#A0A7AF;
  --yz-grey-80:#616C7A;
  --yz-grey-90:#46515E;
  --yz-grey-100:#3C4857;
  --yz-teal:#00BFA5;
  --yz-blue:#006AFF;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  color:var(--yz-rich-blue);
  background:var(--yz-grey-10);
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block;}
.wrap{max-width:1280px;margin:0 auto;}

/* ---------- en-tête ---------- */
.yz-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 32px;background:var(--yz-rich-blue);
}
.yz-logo{
  display:block;line-height:0;text-decoration:none;
  width:93px;height:30px;
  background:url("data:image/png;base64,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") no-repeat center/contain;
}
.yz-footer .yz-logo{width:68px;height:22px;opacity:.72;}

/* ---------- boutons ---------- */
.yz-btn{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid transparent;border-radius:999px;
  font:inherit;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.yz-btn svg{width:18px;height:18px;flex:none;}
.yz-btn--sm{padding:8px 18px;font-size:14px;}
.yz-btn--md{padding:11px 22px;font-size:15px;}
.yz-btn--lg{padding:15px 28px;font-size:16px;}
.yz-btn--primary{background:var(--yz-pink);color:var(--yz-grey-10);}
.yz-btn--primary:hover{background:#c2144f;}
.yz-btn--outline{
  background:transparent;color:var(--yz-rich-blue);border-color:var(--yz-rich-blue);
}
.yz-btn--outline:hover{background:var(--yz-rich-blue);color:var(--yz-grey-10);}
.yz-btn--inverse{background:var(--yz-grey-10);color:var(--yz-rich-blue);}
.yz-btn--inverse:hover{background:var(--yz-rich-blue);color:var(--yz-grey-10);}

/* ---------- typographie ---------- */
h1,h2,h3{font-weight:300;letter-spacing:-0.02em;margin:0;}
h1{font-size:58px;line-height:1.02;text-wrap:pretty;}
.yz-h2{font-size:40px;line-height:1.08;}
.yz-h2--sm{font-size:36px;line-height:1.08;}
.yz-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--yz-grey-80);
}
.yz-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:var(--yz-pink);color:var(--yz-grey-10);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- hero ---------- */
.yz-hero{
  position:relative;overflow:hidden;
  background:var(--yz-rich-blue);color:var(--yz-grey-10);
  padding:64px 32px 72px;
}
.yz-hero::before{
  content:"";position:absolute;top:-180px;right:-160px;width:620px;height:620px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,rgba(224,24,94,.55) 0%,rgba(224,24,94,0) 62%);
}
.yz-hero .wrap{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,448px);
  gap:64px;align-items:start;
}
.yz-hero h1{color:var(--yz-grey-10);margin-top:22px;}
.yz-hero h1 em{font-style:normal;color:var(--yz-pink);}
.yz-hero .yz-lede{
  margin:22px 0 0;font-size:19px;line-height:1.55;
  color:rgba(254,254,254,.85);max-width:34em;text-wrap:pretty;
}
.yz-usps{
  margin:34px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;max-width:38em;
}
.yz-usp{
  display:flex;gap:10px;align-items:flex-start;padding:14px;
  border:1px solid rgba(254,254,254,.18);border-radius:12px;
  background:rgba(254,254,254,.05);
  font-size:15px;line-height:1.4;color:var(--yz-grey-10);
}
.yz-usp svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--yz-pink);}

/* ---------- carte formulaire ---------- */
.yz-formcard{
  min-width:0;background:var(--yz-grey-10);border-radius:20px;padding:28px;
  box-shadow:0 24px 64px rgba(20,53,78,.35);
}
.yz-formcard h2{font-size:28px;line-height:1.12;margin-bottom:18px;}
.yz-formnote{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--yz-grey-80);}

/* mise en forme du formulaire HubSpot embarqué */
.hs-form{font-family:inherit!important;}
.hs-form .hs-form-field{margin-bottom:14px;}
.hs-form label{
  display:block;font-size:13px;font-weight:600;
  color:var(--yz-rich-blue);margin-bottom:6px;
}
.hs-form label .hs-form-required{color:var(--yz-pink);}
.hs-form input[type=text],
.hs-form input[type=email],
.hs-form input[type=tel],
.hs-form select,
.hs-form textarea{
  width:100%!important;padding:11px 13px;font:inherit;font-size:15px;
  color:var(--yz-rich-blue);background:var(--yz-grey-10);
  border:1px solid var(--yz-grey-50);border-radius:10px;
}
.hs-form input:focus,.hs-form select:focus,.hs-form textarea:focus{
  outline:2px solid var(--yz-pink);outline-offset:1px;border-color:var(--yz-pink);
}
.hs-form .hs-error-msg{font-size:12px;color:var(--yz-pink);margin-top:5px;display:block;}
.hs-form .hs-button{
  width:100%;padding:15px 28px;border:0;border-radius:999px;
  background:var(--yz-pink);color:var(--yz-grey-10);
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;
}
.hs-form .hs-button:hover{background:#c2144f;}
.hs-form .hs-button:padding-top{padding-top:15px}
.hs-form .hs-richtext{font-size:12px;line-height:1.5;color:var(--yz-grey-80);}
.hs-form fieldset{max-width:none!important;}

/* ---------- bandeaux ---------- */
.yz-stats{
  padding:10px 32px;background:var(--yz-grey-10);
  border-bottom:1px solid var(--yz-grey-40);
}
.yz-stats .wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;
}
.yz-stat{padding:15px 0;}
.yz-stat b{display:block;font-size:40px;font-weight:300;letter-spacing:-0.02em;line-height:1.1;}
.yz-stat--accent b{color:var(--yz-pink);}
.yz-stat span{font-size:14px;color:var(--yz-grey-80);}

.yz-logos{padding:24px 32px;background:var(--yz-grey-20);}
.yz-logos .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;font-size:16px;
}
.hs-button.primary.large {
  margin-top: 15px;
}
/* ---------- sections ---------- */
.yz-section{padding:48px 32px 32px;background:var(--yz-grey-10);}
.yz-section--tight{padding:32px 32px 56px;}
.yz-section--wide{padding:48px 32px;}
.yz-section--cta{padding:72px 32px;}

/* cartes "ce qu'ajoute une couche AP" */
.yz-cards{
  margin-top:28px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;
}
.yz-card{
  border:1px solid var(--yz-grey-40);border-radius:16px;padding:26px;
  background:var(--yz-grey-10);
  transition:box-shadow .18s ease,transform .18s ease;
}
.yz-card:hover{box-shadow:0 12px 32px rgba(20,53,78,.12);transform:translateY(-2px);}
.yz-card .yz-ico{
  width:44px;height:44px;border-radius:12px;background:var(--yz-pink-wash);
  display:flex;align-items:center;justify-content:center;
}
.yz-card .yz-ico svg{width:24px;height:24px;color:var(--yz-pink);}
.yz-card h3{margin:16px 0 8px;font-size:23px;}
.yz-card p{margin:0;font-size:15px;line-height:1.55;color:var(--yz-grey-90);}

/* avant / après */
.yz-swap{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;}
.yz-swap > div{
  display:grid;gap:6px;align-content:start;
  padding-top:16px;border-top:1px solid var(--yz-grey-40);
}
.yz-swap .from{font-size:13px;line-height:1.4;color:var(--yz-grey-80);}
.yz-swap h3{font-size:21px;line-height:1.18;}
.yz-swap p{margin:0;font-size:14px;line-height:1.45;color:var(--yz-grey-90);}
.yz-statement{
  margin:32px 0 0;font-weight:300;font-size:22px;line-height:1.3;
  letter-spacing:-0.02em;max-width:34em;
}

/* comparaison module natif / couche dédiée */
.yz-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:56px;align-items:start;
}
.yz-compare{
  margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--yz-grey-50);border:1px solid var(--yz-grey-50);
  border-radius:16px;overflow:hidden;
}
.yz-compare > div{background:var(--yz-grey-10);padding:24px;}
.yz-compare .pick{border-top:3px solid var(--yz-pink);}
.yz-compare .pick .yz-eyebrow{color:var(--yz-pink);}
.yz-compare p{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--yz-grey-90);}
.yz-compare p strong{font-weight:600;color:var(--yz-rich-blue);}
.yz-footnote{margin:20px 0 0;font-size:15px;line-height:1.55;color:var(--yz-grey-80);max-width:44em;}

/* citation */
.yz-quote{
  min-width:0;background:var(--yz-rich-blue);color:var(--yz-grey-10);
  border-radius:16px;padding:28px;
}
.yz-quote svg{width:28px;height:28px;color:var(--yz-pink);}
.yz-quote blockquote{
  margin:12px 0 0;font-weight:300;font-size:20px;line-height:1.4;letter-spacing:-0.01em;
}
.yz-quote .who{margin-top:18px;font-size:14px;line-height:1.5;color:rgba(254,254,254,.72);}
.yz-quote .badges{
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(254,254,254,.2);
  display:grid;gap:10px;font-size:14px;color:rgba(254,254,254,.85);
}

/* panneau CTA en dégradé */
.yz-panel{
  border-radius:24px;padding:56px 48px;
  background:linear-gradient(120deg,var(--yz-rich-blue) 0%,#2B2A6E 55%,var(--yz-pink) 100%);
  color:var(--yz-grey-10);
  display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;
}
.yz-panel h2{color:var(--yz-grey-10);}
.yz-panel p{margin:14px 0 0;font-size:17px;line-height:1.55;max-width:34em;}

/* ---------- pied de page ---------- */
.yz-footer{
  padding:24px 32px;background:var(--yz-rich-blue);
  color:rgba(254,254,254,.72);font-size:13px;
}
.yz-footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;}
.yz-footer a{color:rgba(254,254,254,.72);}
.yz-footer .links{display:flex;gap:20px;}

/* ---------- accessibilité ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--yz-pink);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .yz-hero .wrap,.yz-split{grid-template-columns:1fr;gap:40px;}
  .yz-swap{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  h1{font-size:40px;}
  .yz-h2,.yz-h2--sm{font-size:30px;}
  .yz-hero{padding:44px 20px 52px;}
  .yz-section,.yz-section--tight,.yz-section--wide,.yz-section--cta{padding:40px 20px;}
  .yz-header,.yz-logos,.yz-stats,.yz-footer{padding-left:20px;padding-right:20px;}
  .yz-swap,.yz-compare{grid-template-columns:1fr;}
  .yz-panel{padding:36px 24px;}
  .yz-stat b{font-size:32px;}
}
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 20px; padding-bottom: 20px;
}
.site-header__logo { height: 32px; width: auto; }
.site-header__aside { display: flex; align-items: center; gap: 20px; }
.site-header__note { font-size: 14px; color: #616C7A; letter-spacing: -0.01em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px;
  font-family: "Noto Sans", sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer; text-decoration: none;
  transition: background 140ms cubic-bezier(.2,.6,.2,1), color 140ms cubic-bezier(.2,.6,.2,1), transform 140ms cubic-bezier(.2,.6,.2,1);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: #E0185E; color: #FEFEFE; }
.btn--primary:hover { background: #C2144F; color: #FEFEFE; }
.btn--sm { height: 40px; padding: 0 22px; font-size: 15px; }

@media (max-width: 760px) { .site-header__note { display: none; } }

/* ==========================================================================
   YOOZ LP — /ad-ap-automation
   Self-contained stylesheet. Nothing external except the two Google Font
   links above. Brand values per Yooz July 2025 refresh guidelines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand primaries */
  --yz-rich-blue:        #14354E;  /* rgb(20, 53, 78)      primary type, dark slabs */
  --yz-rich-blue-hover:  #0E2739;  /* rgb(14, 39, 57) */
  --yz-pink:             #E0185E;  /* rgb(224, 24, 94)     accent, CTA — 10% of surface max */
  --yz-pink-hover:       #C2144F;  /* rgb(194, 20, 79) */
  --yz-pink-wash:        #FDEDF3;  /* rgb(253, 237, 243) */
  --yz-teal:             #00BFA5;  /* rgb(0, 191, 165)     tick marks only */

  /* Neutrals — Grey-10 is the brand white, never use #FFFFFF */
  --yz-grey-100:         #3C4857;  /* rgb(60, 72, 87) */
  --yz-grey-90:          #46515E;  /* rgb(70, 81, 94)      body copy */
  --yz-grey-80:          #616C7A;  /* rgb(97, 108, 122)    microcopy */
  --yz-grey-70:          #A0A7AF;  /* rgb(160, 167, 175)   placeholders */
  --yz-grey-60:          #CCCDD2;  /* rgb(204, 205, 210) */
  --yz-grey-50:          #DEDEE0;  /* rgb(222, 222, 224)   form control borders */
  --yz-grey-40:          #E6E6E6;  /* rgb(230, 230, 230)   card borders */
  --yz-grey-30:          #EAEAEA;  /* rgb(234, 234, 234)   table row rules */
  --yz-grey-20:          #F5F5F5;  /* rgb(245, 245, 245)   sunken panels */
  --yz-grey-10:          #FEFEFE;  /* rgb(254, 254, 254)   brand white */

  /* Ink on the Rich Blue slab */
  --on-blue:             rgba(254,254,254,1);
  --on-blue-88:          rgba(254,254,254,0.88);
  --on-blue-82:          rgba(254,254,254,0.82);
  --on-blue-65:          rgba(254,254,254,0.65);
  --on-blue-dots:        rgba(254,254,254,0.13);

  /* Type */
  --font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fw-light: 300;      /* all headings */
  --fw-regular: 400;    /* body */
  --fw-semibold: 600;   /* links, labels, small emphasis */
  --tracking-tight: -0.02em;
  --tracking-ui: -0.01em;
  --tracking-eyebrow: 0.08em;
  --lh-heading: 1.1;
  --lh-body: 1.55;

  /* Layout */
  --container: 1180px;
  --gutter: 24px;
  --section-gap: 64px;       /* vertical rhythm between sections */
  --section-gap-lg: 88px;    /* before major bands */

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Elevation — Rich Blue tinted, never neutral black */
  --shadow-form: 0 24px 64px rgba(9,28,41,0.32);
  --shadow-sm: 0 1px 2px rgba(20,53,78,0.06);

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-state: 140ms;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--yz-rich-blue);
  background: var(--yz-grey-10);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); margin: 0; text-wrap: pretty; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--yz-pink); text-decoration: none; }
a:hover { color: var(--yz-pink-hover); text-decoration: underline; }
:focus-visible { outline: none; border-color: var(--yz-rich-blue); box-shadow: 0 0 0 3px rgba(224,24,94,0.28); }

.material-symbols-outlined, .yz-icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-gap); }
.section--lg { padding-top: var(--section-gap-lg); }
.grid { display: grid; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }

.eyebrow {
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--yz-pink); margin-bottom: 18px;
}
.lede  { font-size: 17px; line-height: var(--lh-body); color: var(--yz-grey-90); max-width: 74ch; }
.body  { font-size: 16px; line-height: var(--lh-body); color: var(--yz-grey-90); }
.micro { font-size: 13px; line-height: 1.5; color: var(--yz-grey-80); }

.h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; }
.h2 { font-size: clamp(28px, 3.2vw, 40px); }
.h2--lg { font-size: clamp(30px, 3.6vw, 44px); }
.h3 { font-size: 22px; line-height: 1.2; }

/* --------------------------------------------------------------------------
   4. BUTTONS — pill, solid fills, no opacity fades
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: inherit; font-size: 16px; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-ui); cursor: pointer; text-decoration: none;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--yz-pink); color: var(--yz-grey-10); }
.btn--primary:hover { background: var(--yz-pink-hover); color: var(--yz-grey-10); }
.btn--outline { background: transparent; border-color: var(--yz-rich-blue); color: var(--yz-rich-blue); }
.btn--outline:hover { background: var(--yz-rich-blue); color: var(--yz-grey-10); }
.btn--sm { height: 40px; padding: 0 22px; font-size: 15px; }
.btn--lg { height: 52px; padding: 0 30px; font-size: 17px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.site-header__logo { height: 32px; width: auto; }
.site-header__aside { display: flex; align-items: center; gap: 20px; }
.site-header__note { font-size: 14px; color: var(--yz-grey-80); letter-spacing: var(--tracking-ui); }

/* --------------------------------------------------------------------------
   6. HERO — Rich Blue slab + brand dot texture, form on the first screen
   -------------------------------------------------------------------------- */
.hero {
  background-color: var(--yz-rich-blue);
  background-image: radial-gradient(var(--on-blue-dots) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--yz-grey-10);
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,430px);
  gap: 56px; align-items: start;
  padding-top: 56px; padding-bottom: 64px;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--yz-pink); }
.hero__sub { font-size: 20px; font-weight: var(--fw-light); line-height: 1.45; letter-spacing: var(--tracking-tight); color: rgba(254,254,254,0.92); max-width: 62ch; margin-bottom: 20px; }
.hero__arg { font-size: 16px; line-height: 1.6; color: var(--on-blue-82); max-width: 68ch; margin-bottom: 28px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; letter-spacing: var(--tracking-ui); }
.ticks .yz-icon { font-size: 20px; color: var(--yz-teal); }

/* --------------------------------------------------------------------------
   7. FORM CARD
   -------------------------------------------------------------------------- */
.form-card { background: var(--yz-grey-10); color: var(--yz-rich-blue); border-radius: var(--r-md); padding: 28px; box-shadow: var(--shadow-form); min-width: 0; }
.form-card h2 { font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
.form-card__body { font-size: 15px; line-height: 1.5; color: var(--yz-grey-90); margin-bottom: 20px; }
.form-fields { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-ui); color: var(--yz-rich-blue); }
.input, .select {
  width: 100%; height: 44px; padding: 0 12px;
  font-family: inherit; font-size: 15px; color: var(--yz-rich-blue);
  background: var(--yz-grey-10); border: 1px solid var(--yz-grey-50); border-radius: var(--r-sm);
  transition: border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.input::placeholder { color: var(--yz-grey-70); }
.input:hover, .select:hover { border-color: var(--yz-grey-60); }
.input:focus, .select:focus { outline: none; border-color: var(--yz-rich-blue); box-shadow: 0 0 0 3px rgba(224,24,94,0.28); }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2314354E' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.form-card__legal { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--yz-grey-80); }

/* --------------------------------------------------------------------------
   8. STAT BAND
   -------------------------------------------------------------------------- */
.stat-band { background: var(--yz-grey-20); border-bottom: 1px solid var(--yz-grey-40); }
.stat-band__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.stat__figure { font-size: 52px; font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); line-height: 1; }
.stat__label { font-size: 15px; color: var(--yz-grey-90); margin-top: 6px; }

/* --------------------------------------------------------------------------
   9. CARDS — 16px radius, hairline stroke, flat fill, no rest shadow
   -------------------------------------------------------------------------- */
.card { border: 1px solid var(--yz-grey-40); border-radius: var(--r-md); background: var(--yz-grey-10); min-width: 0; }
.card--media { overflow: hidden; }
.card__media { width: 100%; height: 180px; object-fit: cover; background: var(--yz-grey-20); display: block; }
.card__pad { padding: 22px; }
.card--text { padding: 26px; }
.card .yz-icon { font-size: 24px; color: var(--yz-rich-blue); }
.card h3 { margin: 12px 0 10px; }
.card--media h3 { margin: 0 0 10px; }
.step__no { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--yz-pink); margin-bottom: 10px; }

.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.section__head { margin-bottom: 40px; }
.section__head h2 { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   10. ERP PANEL
   -------------------------------------------------------------------------- */
.panel { border-radius: var(--r-lg); background: var(--yz-grey-20); padding: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 40px; align-items: center; }
.panel h2 { margin-bottom: 14px; }
.panel__body { font-size: 16px; line-height: 1.6; color: var(--yz-grey-90); max-width: 60ch; margin-bottom: 22px; }
.counter { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.counter__figure { font-size: 64px; font-weight: var(--fw-light); letter-spacing: -0.03em; line-height: 1; color: var(--yz-pink); }
.counter__label { font-size: 16px; color: var(--yz-grey-90); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: var(--r-pill); background: var(--yz-grey-10);
  border: 1px solid var(--yz-grey-50); font-size: 15px; color: var(--yz-grey-90);
  letter-spacing: var(--tracking-ui);
  transition: border-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.chip:hover { border-color: var(--yz-rich-blue); color: var(--yz-rich-blue); }
.chip--accent { border-color: var(--yz-pink); color: var(--yz-pink); font-weight: var(--fw-semibold); }
.chip--accent:hover { border-color: var(--yz-pink-hover); color: var(--yz-pink-hover); text-decoration: none; }

/* --------------------------------------------------------------------------
   11. CUSTOMER PROOF
   -------------------------------------------------------------------------- */
.proof { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 48px; align-items: start; }
.quote { margin: 0; min-width: 0; }
.quote p { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-light); line-height: 1.35; letter-spacing: var(--tracking-tight); margin-bottom: 18px; }
.quote .mark { color: var(--yz-pink); }
.quote footer { font-size: 15px; font-weight: var(--fw-semibold); color: var(--yz-grey-90); }
.proof__stats { border-left: 1px solid var(--yz-grey-40); padding-left: 32px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.proof__stats .stat__figure { font-size: 32px; }
.proof__stats .stat__label { margin-top: 4px; }

/* --------------------------------------------------------------------------
   12. COMPARISON TABLE — plain HTML, horizontal scroll on mobile
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--yz-grey-40); border-radius: var(--r-md); }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.cmp thead tr { background: var(--yz-grey-20); }
.cmp th, .cmp td { text-align: left; padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--yz-grey-30); border-left: 1px solid var(--yz-grey-30); }
.cmp thead th { padding: 14px 18px; font-size: 14px; font-weight: var(--fw-semibold); border-bottom: 1px solid var(--yz-grey-40); }
.cmp th:first-child, .cmp td:first-child { border-left: 0; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-size: 15px; font-weight: var(--fw-semibold); color: var(--yz-rich-blue); }
.cmp td { color: var(--yz-grey-90); }
.cmp .col-yooz { background: var(--yz-pink-wash); color: var(--yz-rich-blue); }
.cmp .verify { color: var(--yz-grey-70); font-style: italic; }
.concession { margin: 18px 0 10px; font-size: 16px; line-height: 1.6; color: var(--yz-rich-blue); }
.footnotes { font-size: 13px; line-height: 1.5; color: var(--yz-grey-80); }

/* --------------------------------------------------------------------------
   13. PAIN-POINT BAND — category benchmarks, visually separate from Yooz proof
   -------------------------------------------------------------------------- */
.band-blue { margin-top: var(--section-gap); background: var(--yz-rich-blue); color: var(--yz-grey-10); }
.band-blue__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 32px; padding-top: 44px; padding-bottom: 44px; }
.band-blue .stat__figure { font-size: 40px; }
.band-blue .stat__label { font-size: 15px; line-height: 1.5; margin-top: 8px; color: var(--on-blue-88); }
.band-blue .source { display: block; font-size: 13px; color: var(--on-blue-65); }
.band-blue__note { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: rgba(254,254,254,0.6); }

/* --------------------------------------------------------------------------
   14. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); gap: 10px; align-items: start; }
.faq details { border: 1px solid var(--yz-grey-40); border-radius: var(--r-md); padding: 20px 22px; background: var(--yz-grey-10); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-ui);
  color: var(--yz-rich-blue); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { font-size: 22px; color: var(--yz-pink); flex: none; transition: transform var(--dur-state) var(--ease); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--yz-grey-90); }

/* --------------------------------------------------------------------------
   15. CLOSING CTA + FOOTER
   -------------------------------------------------------------------------- */
.cta-final {
  border-radius: var(--r-lg);
  background-color: var(--yz-rich-blue);
  background-image: radial-gradient(var(--on-blue-dots) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--yz-grey-10); padding: 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.cta-final h2 { font-size: 26px; margin-bottom: 6px; }
.cta-final p { font-size: 15px; line-height: 1.5; color: rgba(254,254,254,0.85); max-width: 60ch; }
.site-footer { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--yz-grey-40); margin-top: 64px; padding-top: 40px; padding-bottom: 56px; }
.site-footer img { height: 26px; width: auto; }

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__inner { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .proof { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .proof__stats { border-left: 0; border-top: 1px solid var(--yz-grey-40); padding-left: 0; padding-top: 24px; }
}
@media (max-width: 760px) {
  :root { --section-gap: 48px; --section-gap-lg: 56px; }
  .cols-3, .cols-4 { grid-template-columns: minmax(0,1fr); }
  .panel { padding: 28px; }
  .cta-final { padding: 36px 24px; }
  .site-header__note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* ==========================================================================
   YOOZ LP — /ad-ap-automation
   Self-contained stylesheet. Nothing external except the two Google Font
   links above. Brand values per Yooz July 2025 refresh guidelines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand primaries */
  --yz-rich-blue:        #14354E;  /* rgb(20, 53, 78)      primary type, dark slabs */
  --yz-rich-blue-hover:  #0E2739;  /* rgb(14, 39, 57) */
  --yz-pink:             #E0185E;  /* rgb(224, 24, 94)     accent, CTA — 10% of surface max */
  --yz-pink-hover:       #C2144F;  /* rgb(194, 20, 79) */
  --yz-pink-wash:        #FDEDF3;  /* rgb(253, 237, 243) */
  --yz-teal:             #00BFA5;  /* rgb(0, 191, 165)     tick marks only */

  /* Neutrals — Grey-10 is the brand white, never use #FFFFFF */
  --yz-grey-100:         #3C4857;  /* rgb(60, 72, 87) */
  --yz-grey-90:          #46515E;  /* rgb(70, 81, 94)      body copy */
  --yz-grey-80:          #616C7A;  /* rgb(97, 108, 122)    microcopy */
  --yz-grey-70:          #A0A7AF;  /* rgb(160, 167, 175)   placeholders */
  --yz-grey-60:          #CCCDD2;  /* rgb(204, 205, 210) */
  --yz-grey-50:          #DEDEE0;  /* rgb(222, 222, 224)   form control borders */
  --yz-grey-40:          #E6E6E6;  /* rgb(230, 230, 230)   card borders */
  --yz-grey-30:          #EAEAEA;  /* rgb(234, 234, 234)   table row rules */
  --yz-grey-20:          #F5F5F5;  /* rgb(245, 245, 245)   sunken panels */
  --yz-grey-10:          #FEFEFE;  /* rgb(254, 254, 254)   brand white */

  /* Ink on the Rich Blue slab */
  --on-blue:             rgba(254,254,254,1);
  --on-blue-88:          rgba(254,254,254,0.88);
  --on-blue-82:          rgba(254,254,254,0.82);
  --on-blue-65:          rgba(254,254,254,0.65);
  --on-blue-dots:        rgba(254,254,254,0.13);

  /* Type */
  --font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fw-light: 300;      /* all headings */
  --fw-regular: 400;    /* body */
  --fw-semibold: 600;   /* links, labels, small emphasis */
  --tracking-tight: -0.02em;
  --tracking-ui: -0.01em;
  --tracking-eyebrow: 0.08em;
  --lh-heading: 1.1;
  --lh-body: 1.55;

  /* Layout */
  --container: 1180px;
  --gutter: 24px;
  --section-gap: 64px;       /* vertical rhythm between sections */
  --section-gap-lg: 88px;    /* before major bands */

  /* Radii */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Elevation — Rich Blue tinted, never neutral black */
  --shadow-form: 0 24px 64px rgba(9,28,41,0.32);
  --shadow-sm: 0 1px 2px rgba(20,53,78,0.06);

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-state: 140ms;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--yz-rich-blue);
  background: var(--yz-grey-10);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); line-height: var(--lh-heading); margin: 0; text-wrap: pretty; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--yz-pink); text-decoration: none; }
a:hover { color: var(--yz-pink-hover); text-decoration: underline; }
:focus-visible { outline: none; border-color: var(--yz-rich-blue); box-shadow: 0 0 0 3px rgba(224,24,94,0.28); }

.material-symbols-outlined, .yz-icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-gap); }
.section--lg { padding-top: var(--section-gap-lg); }
.grid { display: grid; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }

.eyebrow {
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--yz-pink); margin-bottom: 18px;
}
.lede  { font-size: 17px; line-height: var(--lh-body); color: var(--yz-grey-90); max-width: 74ch; }
.body  { font-size: 16px; line-height: var(--lh-body); color: var(--yz-grey-90); }
.micro { font-size: 13px; line-height: 1.5; color: var(--yz-grey-80); }

.h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; }
.h2 { font-size: clamp(28px, 3.2vw, 40px); }
.h2--lg { font-size: clamp(30px, 3.6vw, 44px); }
.h3 { font-size: 22px; line-height: 1.2; }

/* --------------------------------------------------------------------------
   4. BUTTONS — pill, solid fills, no opacity fades
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: inherit; font-size: 16px; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-ui); cursor: pointer; text-decoration: none;
  transition: background var(--dur-state) var(--ease), color var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--yz-pink); color: var(--yz-grey-10); }
.btn--primary:hover { background: var(--yz-pink-hover); color: var(--yz-grey-10); }
.btn--outline { background: transparent; border-color: var(--yz-rich-blue); color: var(--yz-rich-blue); }
.btn--outline:hover { background: var(--yz-rich-blue); color: var(--yz-grey-10); }
.btn--sm { height: 40px; padding: 0 22px; font-size: 15px; }
.btn--lg { height: 52px; padding: 0 30px; font-size: 17px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; }
.site-header__logo { height: 32px; width: auto; }
.site-header__aside { display: flex; align-items: center; gap: 20px; }
.site-header__note { font-size: 14px; color: var(--yz-grey-80); letter-spacing: var(--tracking-ui); }



/* --------------------------------------------------------------------------
   8. STAT BAND
   -------------------------------------------------------------------------- */
.stat-band { background: var(--yz-grey-20); border-bottom: 1px solid var(--yz-grey-40); }
.stat-band__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 32px; padding-top: 40px; padding-bottom: 40px; }
.stat__figure { font-size: 52px; font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); line-height: 1; }
.stat__label { font-size: 15px; color: var(--yz-grey-90); margin-top: 6px; }

/* --------------------------------------------------------------------------
   9. CARDS — 16px radius, hairline stroke, flat fill, no rest shadow
   -------------------------------------------------------------------------- */
.card { border: 1px solid var(--yz-grey-40); border-radius: var(--r-md); background: var(--yz-grey-10); min-width: 0; }
.card--media { overflow: hidden; }
.card__media { width: 100%; height: 180px; object-fit: cover; background: var(--yz-grey-20); display: block; }
.card__pad { padding: 22px; }
.card--text { padding: 26px; }
.card .yz-icon { font-size: 24px; color: var(--yz-rich-blue); }
.card h3 { margin: 12px 0 10px; }
.card--media h3 { margin: 0 0 10px; }
.step__no { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--yz-pink); margin-bottom: 10px; }

.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.section__head { margin-bottom: 40px; }
.section__head h2 { margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   10. ERP PANEL
   -------------------------------------------------------------------------- */
.panel { border-radius: var(--r-lg); background: var(--yz-grey-20); padding: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 40px; align-items: center; }
.panel h2 { margin-bottom: 14px; }
.panel__body { font-size: 16px; line-height: 1.6; color: var(--yz-grey-90); max-width: 60ch; margin-bottom: 22px; }
.counter { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.counter__figure { font-size: 64px; font-weight: var(--fw-light); letter-spacing: -0.03em; line-height: 1; color: var(--yz-pink); }
.counter__label { font-size: 16px; color: var(--yz-grey-90); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: var(--r-pill); background: var(--yz-grey-10);
  border: 1px solid var(--yz-grey-50); font-size: 15px; color: var(--yz-grey-90);
  letter-spacing: var(--tracking-ui);
  transition: border-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.chip:hover { border-color: var(--yz-rich-blue); color: var(--yz-rich-blue); }
.chip--accent { border-color: var(--yz-pink); color: var(--yz-pink); font-weight: var(--fw-semibold); }
.chip--accent:hover { border-color: var(--yz-pink-hover); color: var(--yz-pink-hover); text-decoration: none; }

/* --------------------------------------------------------------------------
   11. CUSTOMER PROOF
   -------------------------------------------------------------------------- */
.proof { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 48px; align-items: start; }
.quote { margin: 0; min-width: 0; }
.quote p { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-light); line-height: 1.35; letter-spacing: var(--tracking-tight); margin-bottom: 18px; }
.quote .mark { color: var(--yz-pink); }
.quote footer { font-size: 15px; font-weight: var(--fw-semibold); color: var(--yz-grey-90); }
.proof__stats { border-left: 1px solid var(--yz-grey-40); padding-left: 32px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.proof__stats .stat__figure { font-size: 32px; }
.proof__stats .stat__label { margin-top: 4px; }

/* --------------------------------------------------------------------------
   12. COMPARISON TABLE — plain HTML, horizontal scroll on mobile
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--yz-grey-40); border-radius: var(--r-md); }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15px; }
.cmp thead tr { background: var(--yz-grey-20); }
.cmp th, .cmp td { text-align: left; padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--yz-grey-30); border-left: 1px solid var(--yz-grey-30); }
.cmp thead th { padding: 14px 18px; font-size: 14px; font-weight: var(--fw-semibold); border-bottom: 1px solid var(--yz-grey-40); }
.cmp th:first-child, .cmp td:first-child { border-left: 0; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-size: 15px; font-weight: var(--fw-semibold); color: var(--yz-rich-blue); }
.cmp td { color: var(--yz-grey-90); }
.cmp .col-yooz { background: var(--yz-pink-wash); color: var(--yz-rich-blue); }
.cmp .verify { color: var(--yz-grey-70); font-style: italic; }
.concession { margin: 18px 0 10px; font-size: 16px; line-height: 1.6; color: var(--yz-rich-blue); }
.footnotes { font-size: 13px; line-height: 1.5; color: var(--yz-grey-80); }

/* --------------------------------------------------------------------------
   13. PAIN-POINT BAND — category benchmarks, visually separate from Yooz proof
   -------------------------------------------------------------------------- */
.band-blue { margin-top: var(--section-gap); background: var(--yz-rich-blue); color: var(--yz-grey-10); }
.band-blue__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 32px; padding-top: 44px; padding-bottom: 44px; }
.band-blue .stat__figure { font-size: 40px; }
.band-blue .stat__label { font-size: 15px; line-height: 1.5; margin-top: 8px; color: var(--on-blue-88); }
.band-blue .source { display: block; font-size: 13px; color: var(--on-blue-65); }
.band-blue__note { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: rgba(254,254,254,0.6); }

/* --------------------------------------------------------------------------
   14. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); gap: 10px; align-items: start; }
.faq details { border: 1px solid var(--yz-grey-40); border-radius: var(--r-md); padding: 20px 22px; background: var(--yz-grey-10); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-ui);
  color: var(--yz-rich-blue); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { font-size: 22px; color: var(--yz-pink); flex: none; transition: transform var(--dur-state) var(--ease); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--yz-grey-90); }

/* --------------------------------------------------------------------------
   15. CLOSING CTA + FOOTER
   -------------------------------------------------------------------------- */
.cta-final {
  border-radius: var(--r-lg);
  background-color: var(--yz-rich-blue);
  background-image: radial-gradient(var(--on-blue-dots) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--yz-grey-10); padding: 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.cta-final h2 { font-size: 26px; margin-bottom: 6px; }
.cta-final p { font-size: 15px; line-height: 1.5; color: rgba(254,254,254,0.85); max-width: 60ch; }
.site-footer { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--yz-grey-40); margin-top: 64px; padding-top: 40px; padding-bottom: 56px; }
.site-footer img { height: 26px; width: auto; }

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__inner { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .proof { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .proof__stats { border-left: 0; border-top: 1px solid var(--yz-grey-40); padding-left: 0; padding-top: 24px; }
}
@media (max-width: 760px) {
  :root { --section-gap: 48px; --section-gap-lg: 56px; }
  .cols-3, .cols-4 { grid-template-columns: minmax(0,1fr); }
  .panel { padding: 28px; }
  .cta-final { padding: 36px 24px; }
  .site-header__note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0s !important; transition-duration: 0s !important; }
}

.hs-form .input,
.hs-form .select {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}

.invoice-steps-section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.yz-demo-title {color: var(--yz-rich-blue); }

.steps-centered {
  --steps-gap: 24px; /* mettez ici le même gap que votre .cols-3 */
  grid-column: 1 / -1;   /* si .cols-3 est une grille */
  flex: 0 0 100%;        /* si .cols-3 est en flex */
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--steps-gap);
}
.steps-centered > .card {
  flex: 0 0 calc((100% - 2 * var(--steps-gap)) / 3);
  max-width: calc((100% - 2 * var(--steps-gap)) / 3);
  margin: 0;
}
@media (max-width: 600px) {
  .steps-centered { flex-direction: column; }
  .steps-centered > .card { flex-basis: auto; max-width: 100%; }
}

.lp-hcap{
  --rb:#14354E;--rb-h:#0E2739;--pk:#E0185E;--pk-h:#C2144F;--pk-wash:#FDEDF3;
  --g10:#FEFEFE;--g20:#F5F5F5;--g40:#E6E6E6;--g50:#DEDEE0;--g80:#616C7A;--g90:#46515E;
  --grad:linear-gradient(135deg,#006AFF 0%,#14354E 50%,#E0185E 100%);
  --logo:url("/wp-content/uploads/lp/yooz-wordmark-white.svg");
  --ease:cubic-bezier(.2,.6,.2,1);
  font-family:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--rb);background:var(--g10);line-height:1.55;-webkit-font-smoothing:antialiased;
}
.lp-hcap *,.lp-hcap *::before,.lp-hcap *::after{box-sizing:border-box}
.lp-hcap a{color:var(--pk);text-decoration:none}
.lp-hcap a:hover{color:var(--pk-h)}
.lp-hcap .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lp-hcap .lp-ico{font-family:"Material Symbols Outlined";font-weight:300;font-style:normal;font-size:20px;line-height:1;display:inline-block;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}
.lp-hcap .lp-wrap,.lp-hcap .wrap{max-width:1280px;margin:0 auto}
.lp-hcap .lp-eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g80)}

/* Buttons */
.lp-hcap .lp-btn,.lp-hcap .yz-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;font:600 16px/1 "Noto Sans",sans-serif;padding:0 24px;height:52px;cursor:pointer;transition:background .14s var(--ease),transform .14s var(--ease)}
.lp-hcap .lp-btn:active,.lp-hcap .yz-btn:active{transform:scale(.98)}
.lp-hcap .lp-btn--primary,.lp-hcap .yz-btn--primary{background:var(--pk);color:var(--g10)}
.lp-hcap .lp-btn--primary:hover,.lp-hcap .yz-btn--primary:hover{background:var(--pk-h);color:var(--g10)}
.lp-hcap .yz-btn--inverse{background:var(--g10);color:var(--rb)}
.lp-hcap .yz-btn--inverse:hover{background:var(--g20);color:var(--rb)}
.lp-hcap .yz-btn--sm{height:36px;padding:0 16px;font-size:14px}
.lp-hcap .yz-btn--lg{height:52px;padding:0 28px}
.lp-hcap .lp-btn--block{width:100%}
.lp-hcap .lp-btn .lp-ico,.lp-hcap .yz-btn .lp-ico{font-size:18px}

/* Header */
.lp-hcap .yz-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 32px;background:var(--rb)}
.lp-hcap .yz-logo{display:block;width:96px;height:28px;background:var(--logo) left center/contain no-repeat}

/* Hero */
.lp-hcap .lp-hero{position:relative;overflow:hidden;background:var(--rb);color:var(--g10);padding:56px 32px 64px}
.lp-hcap .lp-hero::before{content:"";position:absolute;top:-200px;right:-180px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(224,24,94,.5) 0%,rgba(224,24,94,0) 62%);pointer-events:none}
.lp-hcap .lp-hero__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:start}
.lp-hcap .lp-hero__copy{min-width:0}
.lp-hcap .lp-pill{display:inline-flex;padding:6px 14px;border-radius:999px;background:var(--pk);color:var(--g10);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.lp-hcap .lp-h1{margin:22px 0 0;font-weight:300;font-size:clamp(36px,4.6vw,56px);line-height:1.04;letter-spacing:-.02em;text-wrap:pretty;color:var(--g10)}
.lp-hcap .lp-h1 span{color:var(--pk)}
.lp-hcap .lp-lead{margin:22px 0 0;font-size:19px;line-height:1.55;color:rgba(254,254,254,.88);max-width:34em;text-wrap:pretty}
.lp-hcap .lp-checks{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px;max-width:36em}
.lp-hcap .lp-checks li{display:flex;align-items:center;gap:14px;font-size:17px;line-height:1.4;color:rgba(254,254,254,.88)}
.lp-hcap .lp-checks strong{font-weight:600;color:var(--g10)}
.lp-hcap .lp-check{width:28px;height:28px;border-radius:50%;background:var(--pk);color:var(--g10);display:flex;align-items:center;justify-content:center;flex:none}
.lp-hcap .lp-check .lp-ico{font-size:18px}
.lp-hcap .lp-soc{margin:18px 0 0;display:flex;gap:10px;align-items:flex-start;max-width:36em;font-size:14px;line-height:1.5;color:rgba(254,254,254,.85)}
.lp-hcap .lp-soc .lp-ico{color:var(--pk);flex:none;margin-top:1px}

/* Form */
.lp-hcap .lp-form{min-width:0;background:var(--g10);color:var(--rb);border-radius:20px;padding:28px;box-shadow:0 24px 64px rgba(20,53,78,.35);scroll-margin-top:24px}
.lp-hcap .lp-form__title{margin:0;font-weight:300;font-size:27px;line-height:1.12;letter-spacing:-.02em;color:var(--rb)}
.lp-hcap .lp-form__intro{margin:8px 0 18px;font-size:14px;line-height:1.5;color:var(--g90)}
.lp-hcap .lp-form__fields{display:grid;gap:12px;margin:0}
.lp-hcap .lp-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-hcap .lp-field{display:grid;gap:6px;margin:0;padding:0;border:0;min-width:0}
.lp-hcap .lp-field>span,.lp-hcap .lp-field legend{font-size:14px;font-weight:600;color:var(--rb);padding:0;margin-bottom:6px}
.lp-hcap .lp-field input,.lp-hcap .lp-field select{width:100%;height:44px;padding:0 12px;border:1px solid var(--g50);border-radius:8px;background:var(--g10);color:var(--rb);font:400 15px "Noto Sans",sans-serif;transition:border-color .14s,box-shadow .14s}
.lp-hcap .lp-field input::placeholder{color:#A0A7AF}
.lp-hcap .lp-field input:focus,.lp-hcap .lp-field select:focus{outline:none;border-color:var(--rb);box-shadow:0 0 0 3px rgba(224,24,94,.28)}
.lp-hcap .lp-locs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lp-hcap .lp-locs label{position:relative;cursor:pointer}
.lp-hcap .lp-locs input{position:absolute;opacity:0;pointer-events:none}
.lp-hcap .lp-locs label span{display:block;height:40px;line-height:38px;text-align:center;border:1px solid var(--g50);border-radius:8px;font-size:14px;transition:background .14s,border-color .14s}
.lp-hcap .lp-locs label:hover span{border-color:var(--rb)}
.lp-hcap .lp-locs input:checked+span{background:var(--rb);border-color:var(--rb);color:var(--g10)}
.lp-hcap .lp-locs input:focus-visible+span{box-shadow:0 0 0 3px rgba(224,24,94,.28)}
.lp-hcap .lp-form__legal{margin:0;font-size:12px;line-height:1.5;color:var(--g80)}

/* ERP strip */
.lp-hcap .lp-erps{padding:22px 32px;background:var(--g20);border-bottom:1px solid var(--g40)}
.lp-hcap .lp-erps__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;font-size:16px}

/* Sections */
.lp-hcap .lp-sec{padding:72px 32px}
.lp-hcap .lp-sec--white{background:var(--g10)}
.lp-hcap .lp-sec--grey{background:var(--g20)}
.lp-hcap .lp-sec--tight{padding-top:24px}
.lp-hcap .lp-h2{margin:12px 0 0;font-weight:300;font-size:40px;line-height:1.08;letter-spacing:-.02em;text-wrap:pretty;color:var(--rb)}
.lp-hcap .lp-h2:first-child{margin-top:0}
.lp-hcap .lp-h2--narrow{max-width:22em}
.lp-hcap .lp-body{margin:20px 0 0;font-size:17px;line-height:1.55;color:var(--g90);text-wrap:pretty}
.lp-hcap .lp-body--sm{font-size:15px;margin-top:14px;max-width:40em}
.lp-hcap .lp-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:56px;align-items:start}
.lp-hcap .lp-split>*{min-width:0}

/* Approval flow */
.lp-hcap .lp-flow{border:1px solid var(--g40);border-radius:16px;padding:28px}
.lp-hcap .lp-flow__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lp-hcap .lp-badge{display:inline-flex;padding:4px 10px;border-radius:999px;background:var(--g20);color:var(--g90);font-size:12px;font-weight:600}
.lp-hcap .lp-flow__list{list-style:none;margin:22px 0 0;padding:0}
.lp-hcap .lp-flow__list li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding-bottom:22px}
.lp-hcap .lp-flow__list li:not(:last-child)::before{content:"";position:absolute;left:21.5px;top:44px;bottom:0;width:1px;background:var(--g50)}
.lp-hcap .lp-flow__n{width:44px;height:44px;border-radius:50%;background:var(--rb);color:var(--g10);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600}
.lp-hcap .lp-flow__list div{padding-top:10px}
.lp-hcap .lp-flow__list strong{display:block;font-weight:300;font-size:21px;letter-spacing:-.02em}
.lp-hcap .lp-flow__list small{display:block;margin-top:2px;font-size:14px;color:var(--g80)}
.lp-hcap .lp-note{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--g80)}

/* Testimonials */
.lp-hcap .lp-quotes{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.lp-hcap .lp-quote{margin:0;min-width:0;border:1px solid var(--g40);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:16px}
.lp-hcap .lp-quote__tags{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g80)}
.lp-hcap .lp-quote__name{color:var(--pk)}
.lp-hcap .lp-quote blockquote{margin:0;padding:0;border:0;font-weight:300;font-size:22px;line-height:1.38;letter-spacing:-.01em;color:inherit}
.lp-hcap .lp-quote figcaption{font-size:14px;color:var(--g80)}
.lp-hcap .lp-quote p{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--g40);font-size:14px;line-height:1.55;color:var(--g90)}
.lp-hcap .lp-quote--dark{background:var(--rb);border-color:var(--rb);color:var(--g10)}
.lp-hcap .lp-quote--dark .lp-quote__tags,.lp-hcap .lp-quote--dark figcaption{color:rgba(254,254,254,.8)}
.lp-hcap .lp-quote--dark .lp-quote__name{color:var(--g10)}
.lp-hcap .lp-quote--dark p{color:rgba(254,254,254,.85);border-top-color:rgba(254,254,254,.2)}
.lp-hcap .lp-quote .lp-btn{align-self:flex-start}
.lp-hcap .lp-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.lp-hcap .lp-textlink{font-size:15px;font-weight:600}

/* Steps */
.lp-hcap .lp-steps{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.lp-hcap .lp-step{background:var(--g10);border:1px solid var(--g40);border-radius:16px;padding:24px;display:grid;gap:10px;align-content:start}
.lp-hcap .lp-step__head{display:flex;align-items:center;gap:12px}
.lp-hcap .lp-step h3{margin:0;font-weight:300;font-size:22px;letter-spacing:-.02em;color:var(--rb)}
.lp-hcap .lp-step p{margin:0;font-size:14px;line-height:1.55;color:var(--g90)}
.lp-hcap .lp-tile{width:44px;height:44px;border-radius:12px;background:var(--pk-wash);color:var(--pk);display:flex;align-items:center;justify-content:center;flex:none}
.lp-hcap .lp-tile .lp-ico{font-size:24px}

/* Clickable cards (security + FAQ) — open card spans the full row */
.lp-hcap .lp-cards{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:16px}
.lp-hcap .lp-card{background:var(--g10);border:1px solid var(--g40);border-radius:16px;transition:box-shadow .14s var(--ease),transform .14s var(--ease),border-color .14s}
.lp-hcap .lp-card:hover{box-shadow:0 12px 32px rgba(20,53,78,.12);transform:translateY(-2px)}
.lp-hcap .lp-card[open]{grid-column:1/-1;border-color:var(--pk)}
.lp-hcap .lp-card summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;padding:24px;height:100%}
.lp-hcap .lp-card summary::-webkit-details-marker{display:none}
.lp-hcap .lp-card summary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(224,24,94,.28);border-radius:16px}
.lp-hcap .lp-card__title{flex:1;min-width:0;font-weight:300;font-size:21px;line-height:1.28;letter-spacing:-.01em;color:var(--rb)}
.lp-hcap .lp-card .lp-tile+.lp-card__title{font-size:26px;letter-spacing:-.02em;align-self:center}
.lp-hcap .lp-card__toggle{color:var(--pk);font-size:22px;flex:none}
.lp-hcap .lp-card__toggle::before{content:"add"}
.lp-hcap .lp-card[open] .lp-card__toggle::before{content:"remove"}
.lp-hcap .lp-card[open] summary{height:auto;padding-bottom:0}
.lp-hcap .lp-card p{margin:0;padding:14px 24px 24px;font-size:15px;line-height:1.55;color:var(--g90);max-width:60em}

/* Final CTA */
.lp-hcap .yz-section--cta{padding:72px 32px;background:var(--g10)}
.lp-hcap .yz-panel{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;padding:48px;border-radius:24px;background:var(--grad);color:var(--g10)}
.lp-hcap .yz-h2{margin:0;font-weight:300;font-size:40px;line-height:1.08;letter-spacing:-.02em;color:var(--g10)}
.lp-hcap .yz-panel p{margin:14px 0 0;font-size:17px;line-height:1.55;max-width:40em;color:var(--g10)}

/* Footer */
.lp-hcap .yz-footer{padding:24px 32px;background:var(--rb);color:rgba(254,254,254,.72);font-size:13px}
.lp-hcap .yz-footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.lp-hcap .yz-footer .yz-logo{width:70px;height:20px}
.lp-hcap .yz-footer .links{display:flex;gap:20px;flex-wrap:wrap}
.lp-hcap .yz-footer .links a{color:rgba(254,254,254,.72)}
.lp-hcap .yz-footer .links a:hover{color:var(--g10)}

/* Responsive */
@media (max-width:1100px){.lp-hcap .lp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .lp-hcap .yz-header,.lp-hcap .lp-hero,.lp-hcap .lp-sec,.lp-hcap .lp-erps,.lp-hcap .yz-section--cta,.lp-hcap .yz-footer{padding-left:20px;padding-right:20px}
  .lp-hcap .lp-hero{padding-top:36px}
  .lp-hcap .lp-form{padding:22px}
  .lp-hcap .lp-cards{grid-template-columns:1fr}
  .lp-hcap .lp-h2,.lp-hcap .yz-h2{font-size:32px}
  .lp-hcap .yz-panel{padding:32px 24px}
}
@media (prefers-reduced-motion:reduce){.lp-hcap *{transition:none!important}}

.lp-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start; /* les cartes fermées gardent leur hauteur quand une autre s'ouvre */
}

/* La carte ouverte reste dans sa colonne */
.lp-cards > .lp-card,
.lp-cards > .lp-card[open] {
  grid-column: auto;
  flex-basis: auto;
  width: auto;
  max-width: none;
}

/* Le texte s'adapte à la largeur de la carte */
.lp-card p {
  max-width: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lp-cards { grid-template-columns: 1fr; }
}


.lp-cards.lp-cards--faq {
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 900px; /* optionnel, pour garder une ligne de lecture confortable */
}

.lp-cards--faq .lp-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.lp-cards--faq .lp-card p {
  max-width: 75ch;
}

/* Pas de changement de colonnes en responsive pour la FAQ */
@media (max-width: 1024px) {
  .lp-cards.lp-cards--faq { grid-template-columns: 1fr; }
}

/* FAQ : 4 cartes par ligne, côte à côte */
.lp-cards.lp-cards--faq {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: none;
  align-items: start; /* une carte ouverte s'allonge sans étirer les autres */
}

/* Même hauteur pour toutes les cartes fermées */
.lp-cards--faq .lp-card summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 5.5em; /* ajuste si une question fait plus de 3 lignes */
}

.lp-cards--faq .lp-card p {
  max-width: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .lp-cards.lp-cards--faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lp-cards.lp-cards--faq { grid-template-columns: 1fr; }
}

.lp-cards--faq .lp-card summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 0; /* annule la règle précédente */
}

/* Chaque titre réserve exactement 3 lignes, quelle que soit sa longueur */
.lp-cards--faq .lp-card__title {
  line-height: 1.35;
  min-height: calc(3 * 1.35em);
}

/* LP Yooz Brand SEA — scoped under .lp-brand */
.lp-brand{
  --blue:#14354E;--blue-hover:#0E2739;
  --pink:#E0185E;--pink-hover:#C2144F;
  --g100:#3C4857;--g90:#46515E;--g50:#DEDEE0;--g40:#E6E6E6;--g30:#EAEAEA;--g20:#F5F5F5;--g10:#FEFEFE;
  --ease:cubic-bezier(.2,.6,.2,1);
  --ring:0 0 0 3px rgba(224,24,94,.28);
  --shadow:0 12px 32px rgba(20,53,78,.12);
  background:var(--g10);color:var(--blue);
  font-family:"Plus Jakarta Sans","Noto Sans",-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.lp-brand *,.lp-brand *::before,.lp-brand *::after{box-sizing:border-box}
.lp-brand a{color:var(--pink);text-decoration:none}
.lp-brand a:hover{color:var(--pink-hover)}
.lp-brand a:focus-visible,.lp-brand button:focus-visible,.lp-brand summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.lp-brand img{display:block;max-width:100%}
.lp-brand .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lp-brand [hidden]{display:none!important}

/* Icons (Material Symbols Rounded) */
.lp-brand-icon{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;display:inline-flex;flex:none;overflow:hidden;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;-webkit-font-smoothing:antialiased}
.lp-brand-icon--fill{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.lp-brand-icon--18{font-size:18px;width:18px;height:18px}
.lp-brand-icon--22{font-size:22px;width:22px;height:22px}
.lp-brand-icon--24{font-size:24px;width:24px;height:24px}
.lp-brand-icon--44{font-size:44px;width:44px;height:44px}
.lp-brand-icon--pink{color:var(--pink)}

/* Layout */
.lp-brand-wrap{max-width:1280px;margin:0 auto}
.lp-brand-section{padding:80px 32px}
.lp-brand-section--grey{background:var(--g20)}
.lp-brand-section--tight{padding-top:56px;padding-bottom:56px}
.lp-brand-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px 64px;align-items:start}
.lp-brand-split--center{align-items:center}
.lp-brand-split > div{min-width:0}

/* Type */
.lp-brand-h2{margin:0;font-weight:300;font-size:40px;line-height:1.1;letter-spacing:-.02em;text-wrap:pretty;color:var(--blue)}
.lp-brand-h3{margin:32px 0 0;font-weight:600;font-size:18px;line-height:1.3;color:var(--blue)}
h2.lp-brand-h3{margin:0;font-weight:300;font-size:30px;letter-spacing:-.02em}
.lp-brand-lead{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--g100);text-wrap:pretty}
.lp-brand-lead--flush{margin:0}
.lp-brand-muted{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--g90);text-wrap:pretty}
.lp-brand-small{margin:0;font-size:14px;line-height:1.55;color:var(--g90)}

/* Buttons */
.lp-brand-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid transparent;font-family:inherit;font-weight:600;cursor:pointer;text-align:center;transition:background 140ms var(--ease),color 140ms var(--ease),transform 140ms var(--ease)}
.lp-brand-btn:active{transform:scale(.98)}
.lp-brand-btn--primary{background:var(--pink);color:var(--g10)}
.lp-brand a.lp-brand-btn--primary,.lp-brand a.lp-brand-btn--primary:hover{color:var(--g10)}
.lp-brand-btn--primary:hover{background:var(--pink-hover)}
.lp-brand-btn--outline{border-color:var(--blue);background:transparent}
.lp-brand a.lp-brand-btn--outline{color:var(--blue)}
.lp-brand a.lp-brand-btn--outline:hover{background:var(--blue);color:var(--g10)}
.lp-brand-btn--inverse{background:var(--g10)}
.lp-brand a.lp-brand-btn--inverse,.lp-brand a.lp-brand-btn--inverse:hover{color:var(--blue)}
.lp-brand-btn--inverse:hover{background:var(--g20)}
.lp-brand-btn--md{height:48px;padding:0 24px;font-size:15px}
.lp-brand-btn--lg{height:52px;padding:0 28px;font-size:16px}
.lp-brand-btn--block{width:100%}
.lp-brand-split .lp-brand-h2 + .lp-brand-btn{margin-top:28px}

/* Hero */
.lp-brand-hero{position:relative;overflow:hidden;background:var(--blue);color:var(--g10);padding:64px 32px 80px}
.lp-brand-hero::before{content:"";position:absolute;top:-180px;right:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(224,24,94,.55) 0%,rgba(224,24,94,0) 62%);pointer-events:none}
.lp-brand-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:start}
.lp-brand-hero__copy{min-width:0;padding-top:8px}
.lp-brand-pill{display:inline-flex;margin:0;padding:6px 14px;border-radius:999px;background:var(--pink);color:var(--g10);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.lp-brand-hero h1{margin:22px 0 0;font-weight:300;font-size:clamp(40px,5.4vw,68px);line-height:1.04;letter-spacing:-.02em;text-wrap:pretty;color:var(--g10)}
.lp-brand-hero h1 span{color:var(--pink)}
.lp-brand-hero__lead{margin:24px 0 0;font-size:19px;line-height:1.55;max-width:34em;text-wrap:pretty;color:var(--g10)}
.lp-brand-hero__sub{margin:16px 0 0;font-size:16px;line-height:1.55;max-width:36em;color:rgba(254,254,254,.82);text-wrap:pretty}
.lp-brand-hero__ratings{margin:36px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;color:rgba(254,254,254,.85)}
.lp-brand-hero__ratings li{display:flex;align-items:center;gap:8px}
.lp-brand-hero__ratings strong{font-weight:600;color:var(--g10)}

/* Form card */
.lp-brand-form-card{min-width:0;width:100%;background:var(--g10);color:var(--blue);border-radius:20px;padding:28px;box-shadow:0 24px 64px rgba(20,53,78,.35);scroll-margin-top:24px}
.lp-brand-form-card h2{margin:0;font-weight:300;font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--blue)}
.lp-brand-form-card__intro{margin:8px 0 20px;font-size:14px;line-height:1.5;color:var(--g90)}
.lp-brand-form{display:grid;gap:14px}
.lp-brand-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.lp-brand-field{display:grid;gap:6px;min-width:0}
.lp-brand-field label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;font-weight:600;color:var(--blue)}
.lp-brand-req{color:var(--pink);margin-right:auto;margin-left:2px}
.lp-brand-opt{margin-left:auto;font-weight:400;font-size:13px;color:var(--g90)}
.lp-brand-field input,.lp-brand-field select{width:100%;height:44px;padding:0 12px;border:1px solid var(--g50);border-radius:8px;background:var(--g10);color:var(--blue);font:inherit;font-size:15px;transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.lp-brand-field input::placeholder{color:var(--g90);opacity:.7}
.lp-brand-field select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);background-position:calc(100% - 19px) 19px,calc(100% - 14px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.lp-brand-field input:focus,.lp-brand-field select:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.lp-brand-field__error{display:none;font-size:13px;color:var(--pink)}
.lp-brand-field.is-invalid input,.lp-brand-field input[aria-invalid="true"]{border-color:var(--pink)}
.lp-brand-field.is-invalid .lp-brand-field__error,.lp-brand-field input[aria-invalid="true"] ~ .lp-brand-field__error{display:block}
.lp-brand-form__legal{margin:0;font-size:12px;line-height:1.5;color:var(--g90)}
.lp-brand-form__legal a{font-weight:600}
.lp-brand-form-success{display:grid;gap:12px;padding:12px 0}
.lp-brand-form-success p{margin:0;font-size:15px;line-height:1.55;color:var(--g90)}

/* Proof */
.lp-brand-proof{padding:40px 32px 16px;background:var(--g10)}
.lp-brand-proof__grid{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 32px}
.lp-brand-stat{display:flex;flex-direction:column-reverse;gap:6px}
.lp-brand-stat__value{margin:0;font-weight:300;font-size:48px;line-height:1.05;letter-spacing:-.02em;color:var(--blue)}
.lp-brand-stat--accent .lp-brand-stat__value{color:var(--pink)}
.lp-brand-stat__label{font-size:14px;color:var(--g90)}
.lp-brand-proof__note{margin:20px 0 0;font-size:12px;line-height:1.5;color:var(--g90);max-width:70em}

/* Security panel */
.lp-brand-panel{min-width:0;display:grid;gap:14px;padding:28px;border:1px solid var(--g40);border-radius:16px;background:var(--g10)}
.lp-brand-panel__head{display:flex;align-items:center;gap:12px}
.lp-brand-panel__badge{display:flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--g20)}
.lp-brand-panel h3{margin:0;font-weight:300;font-size:26px;line-height:1.15;letter-spacing:-.02em;color:var(--blue)}
.lp-brand-panel p{margin:0;font-size:15px;line-height:1.6;color:var(--g100)}
.lp-brand-panel p.lp-brand-small{font-size:14px;color:var(--g90)}

/* Demo */
.lp-brand-checklist{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.lp-brand-checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--g100)}
.lp-brand-checklist li::before{content:"check_circle";font-family:"Material Symbols Rounded";font-size:18px;line-height:1;width:18px;height:18px;overflow:hidden;flex:none;margin-top:3px;color:var(--pink);font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 20}
.lp-brand-demo-cta{min-width:0;align-self:center;display:grid;gap:16px;justify-items:start;padding:40px;border-radius:16px;background:var(--blue);color:var(--g10)}
.lp-brand-demo-cta h3{margin:0;font-weight:300;font-size:32px;line-height:1.1;letter-spacing:-.02em;color:var(--g10)}
.lp-brand-demo-cta p{margin:0;font-size:16px;line-height:1.55;color:rgba(254,254,254,.85)}
.lp-brand-demo-cta .lp-brand-btn{margin-top:8px}

/* Testimonial + reviews */
.lp-brand-ratings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px;align-items:stretch}
.lp-brand-quote{margin:0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:40px;border-radius:16px;background:var(--blue);color:var(--g10)}
.lp-brand-quote blockquote{margin:0}
.lp-brand-quote blockquote::before{content:"\201C";display:block;height:40px;font-size:72px;line-height:1;font-weight:300;color:var(--pink)}
.lp-brand-quote blockquote p{margin:0;font-weight:300;font-size:26px;line-height:1.3;letter-spacing:-.02em;text-wrap:pretty}
.lp-brand-quote figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:20px;border-top:1px solid rgba(254,254,254,.2)}
.lp-brand-quote__who{font-size:15px;line-height:1.5;color:rgba(254,254,254,.78)}
.lp-brand-quote__who strong{display:block;font-weight:600;color:var(--g10)}
.lp-brand-quote__stat{max-width:16em;text-align:right;font-size:14px;line-height:1.4;color:rgba(254,254,254,.85)}
.lp-brand-quote__stat b{display:block;font-weight:300;font-size:40px;letter-spacing:-.02em;color:var(--g10)}
.lp-brand-reviews{min-width:0;display:grid;gap:20px;align-content:start}
.lp-brand-reviews .lp-brand-h2{font-size:34px}
.lp-brand-reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.lp-brand-review{display:grid;gap:4px;padding:22px;border:1px solid var(--g40);border-radius:16px;background:var(--g10);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease),transform 140ms var(--ease)}
.lp-brand a.lp-brand-review,.lp-brand a.lp-brand-review:hover{color:var(--blue)}
.lp-brand-review:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}
.lp-brand-review__name{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g90)}
.lp-brand-review__score{font-weight:300;font-size:44px;line-height:1.05;letter-spacing:-.02em}
.lp-brand-review__score small{font-size:20px;color:var(--g90)}
.lp-brand-review__meta{font-size:14px;color:var(--g90)}

/* Existing customers */
.lp-brand-customers__grid{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.lp-brand-customer-link{display:flex;align-items:center;gap:14px;height:100%;padding:18px 20px;border:1px solid var(--g40);border-radius:16px;background:var(--g10);font-size:15px;font-weight:600;transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.lp-brand a.lp-brand-customer-link,.lp-brand a.lp-brand-customer-link:hover{color:var(--blue)}
.lp-brand-customer-link:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.lp-brand-customer-link::after{content:"arrow_outward";margin-left:auto;font-family:"Material Symbols Rounded";font-weight:normal;font-size:18px;line-height:1;width:18px;height:18px;overflow:hidden;flex:none}

/* FAQ — clickable boxes, 3 per row */
.lp-brand-faq__list{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.lp-brand-faq__item{min-width:0;border:1px solid var(--g40);border-radius:16px;background:var(--g10);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
.lp-brand-faq__item:hover,.lp-brand-faq__item[open]{border-color:var(--blue);box-shadow:var(--shadow)}
.lp-brand-faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;min-height:120px;padding:24px 28px;font-weight:300;font-size:21px;line-height:1.3;letter-spacing:-.02em;color:var(--blue);text-wrap:pretty}
.lp-brand-faq__item summary::-webkit-details-marker{display:none}
.lp-brand-faq__item summary::after{content:"expand_more";font-family:"Material Symbols Rounded";font-weight:normal;letter-spacing:normal;font-size:24px;line-height:1;width:24px;height:24px;overflow:hidden;flex:none;margin-top:2px;color:var(--pink);transition:transform 220ms var(--ease)}
.lp-brand-faq__item[open] summary::after{transform:rotate(180deg)}
.lp-brand-faq__item p{margin:0;padding:0 28px 26px;font-size:15px;line-height:1.6;color:var(--g100);text-wrap:pretty}

/* Final CTA */
.lp-brand-cta-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:56px 48px;border-radius:24px;background:linear-gradient(135deg,#006AFF 0%,#14354E 50%,#E0185E 100%);color:var(--g10)}
.lp-brand-cta-panel__copy{min-width:0;flex:1 1 320px;max-width:38em}
.lp-brand-cta-panel h2{margin:0;font-weight:300;font-size:40px;line-height:1.1;letter-spacing:-.02em;color:var(--g10)}
.lp-brand-cta-panel p{margin:14px 0 0;font-size:17px;line-height:1.55;color:var(--g10)}

/* Responsive */
@media (max-width:1024px){
  .lp-brand-faq__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .lp-brand-hero__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .lp-brand-form-card{max-width:560px}
}
@media (max-width:640px){
  .lp-brand-section,.lp-brand-hero,.lp-brand-proof{padding-left:20px;padding-right:20px}
  .lp-brand-section{padding-top:56px;padding-bottom:56px}
  .lp-brand-h2,.lp-brand-cta-panel h2{font-size:32px}
  .lp-brand-faq__list{grid-template-columns:minmax(0,1fr)}
  .lp-brand-faq__item summary{min-height:0}
  .lp-brand-cta-panel{padding:36px 24px}
  .lp-brand-quote,.lp-brand-demo-cta{padding:28px}
  .lp-brand-quote__stat{text-align:left}
  .lp-brand-form-card{padding:22px}
}
@media (prefers-reduced-motion:reduce){.lp-brand *{transition:none!important}}

#bookit-form:empty { min-height: 320px; }
#bookit-form { min-height: 0 !important; height: auto !important; }
#bookit-form .hs-form { gap: 10px !important; }
#bookit-form .hs-form > *:empty,
#bookit-form .hs_error_rollup:empty,
#bookit-form .hs_recaptcha:empty,
#bookit-form .hs-richtext p:empty,
#bookit-form .hs-form-field[style*="display: none"],
#bookit-form fieldset:not(:has(.hs-form-field:not([style*="display: none"]))):not(:has(.hs-richtext)):not(:has(.legal-consent-container)) { display: none !important; }
#bookit-form .hs-form-field > label:empty { display: none; }
#bookit-form .legal-consent-container p { margin: 0 !important; }

/* Email tracking consent — scoped styles. All selectors prefixed .email-tracking-consent */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300,0,0&display=swap");

.email-tracking-consent,
.email-tracking-consent-header,
.email-tracking-consent-footer {
  --email-tracking-consent-rich-blue: #14354E;
  --email-tracking-consent-rich-blue-hover: #0E2739;
  --email-tracking-consent-pink: #E0185E;
  --email-tracking-consent-pink-hover: #C2144F;
  --email-tracking-consent-pink-press: #A31041;
  --email-tracking-consent-teal: #00BFA5;
  --email-tracking-consent-grey-80: #616C7A;
  --email-tracking-consent-grey-70: #A0A7AF;
  --email-tracking-consent-grey-50: #DEDEE0;
  --email-tracking-consent-grey-40: #E6E6E6;
  --email-tracking-consent-grey-30: #EAEAEA;
  --email-tracking-consent-grey-20: #F5F5F5;
  --email-tracking-consent-grey-10: #FEFEFE;
  --email-tracking-consent-focus-ring: 0 0 0 3px rgba(224, 24, 94, .28);
  --email-tracking-consent-ease: cubic-bezier(.2, .6, .2, 1);

  font-family: "Noto Sans", system-ui, sans-serif;
  color: var(--email-tracking-consent-rich-blue);
  -webkit-font-smoothing: antialiased;
}
.email-tracking-consent {
  background-color: var(--email-tracking-consent-grey-20);
  background-image: radial-gradient(circle, rgba(20, 53, 78, .18) 1px, transparent 1.2px);
  background-size: 24px 24px;
  /* Header = 76px de haut ; 76 % 24 = 4 → décalage pour que les pois continuent sans rupture */
  background-position: 0 -4px;
}
.email-tracking-consent *, .email-tracking-consent *::before, .email-tracking-consent *::after,
.email-tracking-consent-header *, .email-tracking-consent-header *::before, .email-tracking-consent-header *::after,
.email-tracking-consent-footer *, .email-tracking-consent-footer *::before, .email-tracking-consent-footer *::after { box-sizing: border-box; }

.email-tracking-consent a { color: var(--email-tracking-consent-pink); text-decoration: none; font-weight: 600; }
.email-tracking-consent a:hover { color: var(--email-tracking-consent-pink-hover); }

.email-tracking-consent__icon, .email-tracking-consent-header__icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  display: inline-block; flex: 0 0 auto;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
}

.email-tracking-consent__container { max-width: 1280px; margin: 0 auto; padding: 40px 24px 120px; }

.email-tracking-consent__breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--email-tracking-consent-grey-80); }
.email-tracking-consent__breadcrumb a { color: var(--email-tracking-consent-grey-80); font-weight: 400; }
.email-tracking-consent__breadcrumb a:hover { color: var(--email-tracking-consent-rich-blue); }
.email-tracking-consent__breadcrumb-current { color: var(--email-tracking-consent-rich-blue); }

.email-tracking-consent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 64px; align-items: start; margin-top: 72px;
}

.email-tracking-consent__intro { display: flex; flex-direction: column; gap: 28px; max-width: 560px; }
.email-tracking-consent__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--email-tracking-consent-pink); }
.email-tracking-consent__title { margin: 0; font-size: clamp(44px, 6vw, 72px); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
.email-tracking-consent__lead { margin: 0; font-size: 20px; font-weight: 300; letter-spacing: -.02em; line-height: 1.45; text-wrap: pretty; }

.email-tracking-consent__effects { display: flex; flex-direction: column; gap: 16px; padding: 28px 0 0; margin: 0; border-top: 1px solid var(--email-tracking-consent-grey-50); }
.email-tracking-consent__effects-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.email-tracking-consent__effects-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.email-tracking-consent__effect { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.55; letter-spacing: -.01em; }
.email-tracking-consent__effect .email-tracking-consent__icon, .email-tracking-consent-header__icon { font-size: 22px; color: var(--email-tracking-consent-rich-blue); }

.email-tracking-consent__card { background: var(--email-tracking-consent-grey-10); border: 1px solid var(--email-tracking-consent-grey-40); border-radius: 16px; overflow: hidden; }
.email-tracking-consent__card-strip {
  height: 14px; border-bottom: 1px solid var(--email-tracking-consent-grey-30);
  background-color: var(--email-tracking-consent-grey-10);
  background-image: radial-gradient(circle, var(--email-tracking-consent-pink) 1px, transparent 1.3px);
  background-size: 8px 8px;
}
.email-tracking-consent__card-body { padding: clamp(28px, 4vw, 48px); }

.email-tracking-consent__panel { display: flex; flex-direction: column; gap: 24px; }
.email-tracking-consent__panel[hidden] { display: none; }
.email-tracking-consent__panel-head { display: flex; flex-direction: column; gap: 10px; }
.email-tracking-consent__panel-title { margin: 0; font-size: 32px; font-weight: 300; letter-spacing: -.02em; line-height: 1.15; }
.email-tracking-consent__panel-text { margin: 0; font-size: 16px; line-height: 1.55; letter-spacing: -.01em; color: var(--email-tracking-consent-grey-80); text-wrap: pretty; }
.email-tracking-consent__panel-text strong { color: var(--email-tracking-consent-rich-blue); font-weight: 600; word-break: break-all; }

.email-tracking-consent__field { display: flex; flex-direction: column; gap: 6px; }
.email-tracking-consent__label { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.email-tracking-consent__required { color: var(--email-tracking-consent-pink); margin-left: 3px; }
.email-tracking-consent__input-wrap { position: relative; }
.email-tracking-consent__input-wrap .email-tracking-consent__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--email-tracking-consent-grey-70); pointer-events: none; }
.email-tracking-consent__input {
  width: 100%; height: 52px; padding: 0 14px 0 42px; margin: 0;
  font-family: inherit; font-size: 16px; font-weight: 400; letter-spacing: -.01em;
  color: var(--email-tracking-consent-rich-blue); background: var(--email-tracking-consent-grey-10);
  border: 1px solid var(--email-tracking-consent-grey-50); border-radius: 8px; outline: none;
  transition: border-color 140ms var(--email-tracking-consent-ease), box-shadow 140ms var(--email-tracking-consent-ease);
}
.email-tracking-consent__input::placeholder { color: var(--email-tracking-consent-grey-70); }
.email-tracking-consent__input:focus { border-color: var(--email-tracking-consent-rich-blue); box-shadow: var(--email-tracking-consent-focus-ring); }
.email-tracking-consent__input[aria-invalid="true"] { border-color: var(--email-tracking-consent-pink); }
.email-tracking-consent__hint { font-size: 13px; color: var(--email-tracking-consent-grey-80); }
.email-tracking-consent__error { font-size: 13px; color: var(--email-tracking-consent-pink); }
.email-tracking-consent__hint[hidden], .email-tracking-consent__error[hidden] { display: none; }

.email-tracking-consent__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; letter-spacing: -.01em; line-height: 1;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  height: 44px; padding: 0 22px; font-size: 15px;
  transition: background 140ms var(--email-tracking-consent-ease), color 140ms var(--email-tracking-consent-ease), border-color 140ms var(--email-tracking-consent-ease), transform 80ms var(--email-tracking-consent-ease);
}
.email-tracking-consent__btn:active { transform: scale(.98); }
.email-tracking-consent__btn:focus-visible { outline: none; box-shadow: var(--email-tracking-consent-focus-ring); }
.email-tracking-consent__btn .email-tracking-consent__icon, .email-tracking-consent-header__icon { font-size: 18px; }
.email-tracking-consent__btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.email-tracking-consent__btn--full { width: 100%; }
.email-tracking-consent__btn--primary { background: var(--email-tracking-consent-pink); color: var(--email-tracking-consent-grey-10); }
.email-tracking-consent__btn--primary:hover { background: var(--email-tracking-consent-pink-hover); color: var(--email-tracking-consent-grey-10); }
.email-tracking-consent__btn--primary:active { background: var(--email-tracking-consent-pink-press); }
.email-tracking-consent__btn--primary[disabled] { opacity: .4; cursor: not-allowed; }
.email-tracking-consent__btn--outline { background: transparent; color: var(--email-tracking-consent-rich-blue); border-color: var(--email-tracking-consent-rich-blue); }
.email-tracking-consent__btn--outline:hover { background: var(--email-tracking-consent-rich-blue); color: var(--email-tracking-consent-grey-10); }
.email-tracking-consent a.email-tracking-consent__btn--ghost { background: transparent; color: var(--email-tracking-consent-rich-blue); }
.email-tracking-consent a.email-tracking-consent__btn--ghost:hover { background: #EDF1F4; color: var(--email-tracking-consent-rich-blue); }

.email-tracking-consent__legal { margin: 0; font-size: 13px; line-height: 1.5; color: var(--email-tracking-consent-grey-80); }
.email-tracking-consent__success-icon { font-size: 44px; color: var(--email-tracking-consent-teal); font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48; }
.email-tracking-consent__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Header ===== */
.email-tracking-consent-header {
  position: relative; z-index: 40;
  background-color: var(--email-tracking-consent-grey-20);
  background-image: radial-gradient(circle, rgba(20, 53, 78, .18) 1px, transparent 1.2px);
  background-size: 24px 24px;
}
.email-tracking-consent-header__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 76px; display: flex; align-items: center; gap: 32px; }
.email-tracking-consent-header__logo { display: flex; flex: 0 0 auto; }
.email-tracking-consent-header__logo img { height: 28px; width: auto; display: block; }
.email-tracking-consent-header__nav { display: flex; gap: 24px; flex: 1; }
.email-tracking-consent-header__link { font-size: 15px; letter-spacing: -.01em; color: var(--email-tracking-consent-rich-blue); text-decoration: none; white-space: nowrap; }
.email-tracking-consent-header__link:hover { color: var(--email-tracking-consent-pink); }
.email-tracking-consent-header__actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.email-tracking-consent-header__lang { font-size: 14px; color: var(--email-tracking-consent-grey-80); }
.email-tracking-consent-header__login { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--email-tracking-consent-rich-blue); text-decoration: none; white-space: nowrap; }
.email-tracking-consent-header__login:hover { color: var(--email-tracking-consent-pink); }
.email-tracking-consent-header__cta {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
  background: var(--email-tracking-consent-pink); color: var(--email-tracking-consent-grey-10);
  transition: background 140ms var(--email-tracking-consent-ease);
}
.email-tracking-consent-header__cta:hover { background: var(--email-tracking-consent-pink-hover); color: var(--email-tracking-consent-grey-10); }
.email-tracking-consent-header__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto;
  background: transparent; border: 0; border-radius: 999px; cursor: pointer; color: var(--email-tracking-consent-rich-blue);
}
.email-tracking-consent-header__toggle:hover { background: #EDF1F4; }
.email-tracking-consent-header__toggle .email-tracking-consent-header__icon { font-size: 26px; }
.email-tracking-consent-header__mobile { display: none; }

@media (max-width: 1080px) {
  .email-tracking-consent-header__nav, .email-tracking-consent-header__actions { display: none; }
  .email-tracking-consent-header__toggle { display: inline-flex; }
  .email-tracking-consent-header__mobile[data-open="true"] {
    display: flex; flex-direction: column; gap: 4px; padding: 8px 24px 24px;
    border-top: 1px solid var(--email-tracking-consent-grey-30);
  }
  .email-tracking-consent-header__mobile .email-tracking-consent-header__link { display: block; padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--email-tracking-consent-grey-30); }
  .email-tracking-consent-header__mobile-actions { display: flex; align-items: center; gap: 18px; padding-top: 16px; }
}

/* ===== Footer ===== */
.email-tracking-consent-footer { background: var(--email-tracking-consent-rich-blue); color: var(--email-tracking-consent-grey-10); }
.email-tracking-consent-footer__inner { max-width: 1280px; margin: 0 auto; padding: 80px 24px 32px; display: flex; flex-direction: column; gap: 56px; }
.email-tracking-consent-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr); gap: 40px; }
.email-tracking-consent-footer__col { display: flex; flex-direction: column; gap: 12px; }
.email-tracking-consent-footer__heading { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(254, 254, 254, .6); }
.email-tracking-consent-footer__link { font-size: 15px; color: var(--email-tracking-consent-grey-10); text-decoration: none; }
.email-tracking-consent-footer__link:hover { color: var(--email-tracking-consent-grey-10); text-decoration: underline; }
.email-tracking-consent-footer__newsletter { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.email-tracking-consent-footer__newsletter-title { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: -.02em; line-height: 1.2; }
.email-tracking-consent-footer__form { display: flex; gap: 10px; flex-wrap: wrap; }
.email-tracking-consent-footer__input {
  flex: 1; min-width: 200px; height: 44px; padding: 0 14px; margin: 0;
  font-family: inherit; font-size: 16px; letter-spacing: -.01em; color: var(--email-tracking-consent-rich-blue);
  background: var(--email-tracking-consent-grey-10); border: 1px solid var(--email-tracking-consent-grey-50); border-radius: 8px; outline: none;
}
.email-tracking-consent-footer__input::placeholder { color: var(--email-tracking-consent-grey-70); }
.email-tracking-consent-footer__input:focus { box-shadow: var(--email-tracking-consent-focus-ring); }
.email-tracking-consent-footer__input[aria-invalid="true"] { border-color: var(--email-tracking-consent-pink); }
.email-tracking-consent-footer__submit {
  height: 44px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  background: var(--email-tracking-consent-pink); color: var(--email-tracking-consent-grey-10);
  transition: background 140ms var(--email-tracking-consent-ease), transform 80ms var(--email-tracking-consent-ease);
}
.email-tracking-consent-footer__submit:hover { background: var(--email-tracking-consent-pink-hover); }
.email-tracking-consent-footer__submit:active { transform: scale(.98); }
.email-tracking-consent-footer__status { margin: 0; font-size: 14px; font-weight: 600; }
.email-tracking-consent-footer__status[hidden] { display: none; }
.email-tracking-consent-footer__text { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(254, 254, 254, .72); }
.email-tracking-consent-footer__text a { color: var(--email-tracking-consent-grey-10); font-weight: 600; text-decoration: underline; }
.email-tracking-consent-footer__bottom { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(254, 254, 254, .16); }
.email-tracking-consent-footer__bottom img { height: 24px; width: auto; display: block; }
.email-tracking-consent-footer__copy { font-size: 13px; color: rgba(254, 254, 254, .72); }
.email-tracking-consent-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; padding: 0; list-style: none; }
.email-tracking-consent-footer__legal a { font-size: 13px; color: rgba(254, 254, 254, .72); text-decoration: none; }
.email-tracking-consent-footer__legal a:hover { color: var(--email-tracking-consent-grey-10); }

@media (max-width: 1080px) {
  .email-tracking-consent-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .email-tracking-consent-footer__newsletter { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .email-tracking-consent-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .email-tracking-consent-footer__legal { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .email-tracking-consent-header *, .email-tracking-consent-footer *,
  .email-tracking-consent *, .email-tracking-consent *::before, .email-tracking-consent *::after { transition-duration: 0ms !important; }
}

/* =========================================================
   Yooz — Header (bannière + navigation + méga-menus) & Footer
   CSS autonome : polices + tokens nécessaires inclus.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");

/* ---------- Tokens (extrait du design system Yooz) ---------- */
:root{
  --yz-rich-blue:#14354E;
  --yz-rich-blue-hover:#0E2739;
  --yz-pink:#E0185E;
  --yz-pink-hover:#C2144F;
  --yz-pink-press:#A31041;
  --yz-grey-80:#616C7A;
  --yz-grey-40:#E6E6E6;
  --yz-grey-30:#EAEAEA;
  --yz-grey-10:#FEFEFE;

  --font-sans:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-icon:"Material Symbols Outlined";

  --radius-md:8px;
  --radius-lg:16px;
  --radius-pill:999px;

  --shadow-md:0 2px 8px rgba(20,53,78,.08);
  --shadow-lg:0 12px 32px rgba(20,53,78,.10);
  --focus-ring:0 0 0 3px rgba(224,24,94,.28);

  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --duration-instant:80ms;
  --duration-fast:140ms;
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-instant:0ms;--duration-fast:0ms}
}

body{
  margin:0;
  background:var(--yz-grey-10);
  color:var(--yz-rich-blue);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Icônes Material Symbols ---------- */
.yz-icon{
  font-family:var(--font-icon);
  font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;
  text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24;
}

/* ---------- Bouton (équivalent du composant Button) ---------- */
.yz-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;
  font-family:var(--font-sans);font-weight:600;letter-spacing:-.01em;line-height:1;
  border:1px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             transform var(--duration-instant) var(--ease-standard);
}
.yz-btn--sm{font-size:13px;padding:0 16px;height:34px}
.yz-btn--md{font-size:15px;padding:0 22px;height:44px}
.yz-btn--primary,
.yz-btn--primary:hover,
.yz-header .yz-mega a.yz-btn--primary,
.yz-footer .yz-btn--primary{color:var(--yz-grey-10)}
.yz-btn--primary{background:var(--yz-pink)}
.yz-btn--primary:hover{background:var(--yz-pink-hover)}
.yz-btn--primary:active{background:var(--yz-pink-press);transform:scale(.98)}
.yz-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* =========================================================
   HEADER — barre transparente, pleine largeur
   ========================================================= */
.yz-header{
  /* Neutralise les styles globaux du site hôte (ex. header{display:flex}) */
  display:block !important;
  position:relative;z-index:50;
  background:transparent;
  box-sizing:border-box;
  padding:0;

  /* Pleine largeur : sort du conteneur centré du site
     pour couvrir tout l'écran, de bord à bord. */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
/* Header superposé à la section bleu marine qui suit */
.yz-header--overlay{margin-bottom:-77px}

/* Couleurs des textes du header — changez-les ici en une seule fois */
.yz-header{
  --yz-header-bg:var(--yz-rich-blue);        /* fond de la barre (bleu Yooz) */
  --yz-header-text:var(--yz-grey-10);        /* couleur des liens (blanc) */
  --yz-header-text-hover:#CCCDD2;            /* couleur au survol (gris clair) */
  color:var(--yz-header-text);
}
.yz-header__bar a,
.yz-header__bar button{color:var(--yz-header-text)}
.yz-header__bar a:hover,
.yz-header__bar button:hover{color:var(--yz-header-text-hover)}

/* Barre principale */
.yz-header__bar{
  width:100%;
  background:var(--yz-header-bg);
  border-bottom:0;
}
.yz-header__inner{
  /* Contenu étalé sur toute la largeur (logo à gauche, boutons à droite).
     Pour le recentrer sur 1280px, remplacez "none" par "1280px". */
  max-width:none;
  margin:0 auto;
  padding:0 clamp(24px,4vw,64px);
  min-height:76px;
  box-sizing:border-box;
  display:flex;align-items:center;gap:clamp(12px,2vw,32px);
  flex-wrap:nowrap;white-space:nowrap;
}
.yz-header__logo{display:flex}
.yz-header__logo img,
.yz-header__logo svg{height:30px;width:auto;display:block}

.yz-header__nav{display:flex;align-items:center;gap:4px}
.yz-header__navbtn,
.yz-header__navlink{
  display:flex;align-items:center;gap:2px;
  background:none;border:0;font:inherit;font-size:15px;letter-spacing:-.01em;
  color:var(--yz-header-text);text-decoration:none;
  padding:10px clamp(6px,.8vw,12px);cursor:pointer;
}
.yz-header__navbtn[aria-expanded="true"]{color:var(--yz-header-text-hover)}
.yz-header__navbtn .yz-icon{font-size:20px;transition:transform var(--duration-fast) var(--ease-standard)}
.yz-header__navbtn[aria-expanded="true"] .yz-icon{transform:rotate(180deg)}

.yz-header__spacer{flex:1}
.yz-header__actions{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.yz-header__login{font-size:15px;font-weight:600;text-decoration:none}

/* Bouton rose : texte toujours blanc, pas d'effet de transparence */
.yz-header a.yz-btn--primary,
.yz-header a.yz-btn--primary:hover{color:var(--yz-grey-10)}

/* Sélecteur de langue */
.yz-lang{position:relative}
.yz-lang__btn{
  display:flex;align-items:center;gap:2px;background:none;border:0;font:inherit;
  font-size:14px;font-weight:600;color:var(--yz-header-text);cursor:pointer;padding:8px 0;
}
.yz-lang__btn .yz-icon{font-size:18px}
.yz-lang__menu{
  position:absolute;top:100%;right:0;
  background:var(--yz-grey-10);border:1px solid var(--yz-grey-40);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:6px;display:grid;min-width:72px;
}
.yz-lang__menu[hidden]{display:none}
.yz-header .yz-lang__menu a{font-size:14px;text-decoration:none;padding:6px 10px;color:var(--yz-rich-blue)}
.yz-header .yz-lang__menu a:hover{color:var(--yz-pink)}

/* Méga-menus : panneaux blancs pleine largeur, texte bleu */
.yz-mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--yz-grey-10);border-bottom:1px solid var(--yz-grey-40);box-shadow:var(--shadow-lg);
}
.yz-mega[hidden]{display:none}
.yz-mega a{color:var(--yz-rich-blue)}
.yz-mega a:hover{color:var(--yz-pink)}
.yz-mega__inner{
  max-width:1280px;margin:0 auto;padding:36px 24px 40px;box-sizing:border-box;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;
}
.yz-mega__inner--wide{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.yz-mega__title{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--yz-pink);margin-bottom:14px;
}
.yz-mega__links{display:grid;gap:10px}
.yz-mega__link{font-size:15px;font-weight:300;letter-spacing:-.02em;text-decoration:none}
.yz-mega__address{margin:0 0 20px;font-size:15px;font-weight:300;letter-spacing:-.02em;line-height:1.55;color:var(--yz-rich-blue)}

.yz-header .yz-mega__promo{
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  background:var(--yz-rich-blue);color:var(--yz-grey-10);
  border-radius:var(--radius-lg);padding:24px;text-decoration:none;
}
.yz-header .yz-mega__promo:hover{background:var(--yz-rich-blue-hover);color:var(--yz-grey-10)}
.yz-mega__promo-kicker{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.yz-mega__promo-title{font-size:22px;font-weight:300;letter-spacing:-.02em;line-height:1.2}
.yz-mega__promo-cta{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.yz-mega__promo-cta .yz-icon{font-size:18px}

/* Évite une barre de défilement horizontale due au 100vw */
html,body{overflow-x:hidden}

/* =========================================================
   FOOTER
   ========================================================= */
.yz-footer{background:var(--yz-rich-blue);color:var(--yz-grey-10);padding:72px 24px 40px}
.yz-footer__inner{max-width:1280px;margin:0 auto}

.yz-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:40px}
.yz-footer__brand{display:flex;flex-direction:column;gap:20px}
.yz-footer__brand svg{height:44px;width:auto;align-self:flex-start;display:block}

.yz-footer__title{
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(254,254,254,.6);margin-bottom:16px;
}
.yz-footer__links{display:grid;gap:10px}
.yz-footer__link{
  font-size:15px;font-weight:300;letter-spacing:-.02em;
  color:rgba(254,254,254,.85);text-decoration:none;
}
.yz-footer__link:hover{color:var(--yz-grey-10);text-decoration:underline}

.yz-footer__middle{
  margin-top:56px;padding-top:40px;border-top:1px solid rgba(254,254,254,.15);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:48px;
}
.yz-footer__newsletter-title{font-size:20px;font-weight:300;letter-spacing:-.02em}
.yz-footer__form{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.yz-footer__input{
  flex:1;min-width:220px;height:44px;box-sizing:border-box;
  border-radius:var(--radius-md);border:1px solid rgba(254,254,254,.35);
  background:transparent;color:var(--yz-grey-10);
  font:inherit;font-size:15px;padding:0 14px;outline:none;
}
.yz-footer__input::placeholder{color:rgba(254,254,254,.6)}
.yz-footer__input:focus{border-color:var(--yz-grey-10);box-shadow:var(--focus-ring)}

.yz-footer__note{margin:14px 0 0;font-size:13px;line-height:1.55;color:rgba(254,254,254,.7)}
.yz-footer__note--tight{margin-top:8px}
.yz-footer__note a{color:var(--yz-grey-10);font-weight:600}

.yz-footer__bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(254,254,254,.15);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:13px;color:rgba(254,254,254,.7);
}
.yz-footer__legal{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.yz-footer__social{display:flex;gap:16px;flex-wrap:wrap}
.yz-footer__legal a,
.yz-footer__social a{color:rgba(254,254,254,.85);text-decoration:none}
.yz-footer__legal a:hover,
.yz-footer__social a:hover{color:var(--yz-grey-10)}