/* Publieke platformpagina's (kaal domein).
 *
 * Bewust een eigen tokenset en NIET de --az-* thematokens van de app: de app
 * heeft een themakiezer per salon, deze pagina's dragen het platformmerk en
 * moeten er bij elke bezoeker hetzelfde uitzien. Om die reden staat dit
 * bestand ook bewust buiten de doelwitlijst van scripts/check_hardcoded_css.sh.
 */
:root {
    --lp-bg: #EFE9DC;
    --lp-surface: #FBF8F2;
    --lp-ink: #14312A;
    --lp-text: #1E3A32;
    --lp-muted: #5C6B60;
    --lp-border: #DCD2C0;
    --lp-border-strong: #C4B69F;
    --lp-teal: #0F6F66;
    --lp-teal-bright: #14B8A6;
    --lp-night: #0E2A26;
    --lp-on-night: #EAF2EE;
    --lp-on-night-muted: #9FBDB4;
    --lp-shadow: 0 1px 2px rgba(48, 38, 20, .06), 0 8px 24px -12px rgba(48, 38, 20, .22);
}




/* =====================================================================
 * Landingspagina (aurazenix.nl). Eigen tokenset en vaste look; zie de
 * toelichting bovenaan dit bestand.
 * ===================================================================== */
:root{
    --bg:#EFE9DC;            /* zand met een groenzweem, past bij het pijngroen */
    --surface:#FBF8F2;
    --surface-2:#E5DDCC;
    --ink:#14312A;
    --text:#1E3A32;
    --muted:#5C6B60;
    --border:#DCD2C0;
    --border-strong:#C4B69F;
    --teal:#0F6F66;
    --teal-bright:#14B8A6;
    --teal-soft:#DFEAE3;
    --brass:#8A6522;
    --brass-soft:#EFE3CB;
    --night:#0E2A26;
    --on-night:#EAF2EE;
    --on-night-muted:#9FBDB4;
    --night-line:rgba(234,242,238,.14);
    /* donker paneel voor ritme: in licht thema donker, in donker thema juist lichter */
    --panel:#123430;
    --on-panel:#EAF2EE;
    --on-panel-muted:#9FBDB4;
    --panel-line:rgba(234,242,238,.16);
    --panel-card:rgba(234,242,238,.05);
    --shadow-sm:0 1px 2px rgba(48,38,20,.06), 0 6px 18px -10px rgba(48,38,20,.20);
    --shadow-lg:0 2px 4px rgba(48,38,20,.06), 0 24px 60px -28px rgba(30,45,35,.38);
  }
  /* Bewust één vaste look: dit is de commerciële site, niet de app.
     De app heeft een themakiezer per salon; de landingspagina draagt juist het
     platformmerk uit en ziet er bij iedere bezoeker hetzelfde uit — ook bij een
     systeem dat in donkere modus staat. */

  *{box-sizing:border-box}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:500;margin:0;text-wrap:balance;color:var(--ink)}
  p{margin:0}
  a{color:inherit}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  .narrow{max-width:760px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px;border-radius:6px}

  /* ---------------- nav ---------------- */
  .nav{position:sticky;top:0;z-index:40;background:var(--night);border-bottom:1px solid var(--night-line)}
  .nav-in{display:flex;align-items:center;gap:28px;height:66px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
  .logo span{font-family:Fraunces,Georgia,serif;font-size:1.16rem;color:var(--on-night);font-weight:500}
  .nav-links{display:flex;gap:24px;margin-left:auto;align-items:center}
  .nav-links a{color:var(--on-night-muted);text-decoration:none;font-size:.92rem;font-weight:500}
  .nav-links a:hover{color:var(--on-night)}
  .nav-login{
    border:1px solid rgba(234,242,238,.32);color:var(--on-night)!important;
    padding:8px 18px;border-radius:8px;font-weight:700;font-size:.9rem;
  }
  .nav-login:hover{background:rgba(234,242,238,.08)}

  /* ---------------- hero ---------------- */
  .hero{background:var(--night);color:var(--on-night);position:relative;overflow:hidden;padding:88px 0 0}
  .hero h1{
    color:var(--on-night);font-size:clamp(2.6rem,6.4vw,4.5rem);line-height:1.02;
    letter-spacing:-.03em;max-width:15ch;margin-bottom:22px;
  }
  .eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:24px}
  .hero .eyebrow{color:var(--on-night-muted)}
  .hero .sub{color:var(--on-night-muted);font-size:1.16rem;max-width:52ch}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
  .btn{
    font-family:Karla,sans-serif;font-weight:700;font-size:.98rem;text-decoration:none;
    padding:14px 26px;border-radius:10px;border:1px solid transparent;display:inline-block;
    transition:transform .15s ease, background .15s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--teal-bright);color:#04201C;border-color:var(--teal-bright)}
  .btn-outline{border-color:rgba(234,242,238,.32);color:var(--on-night)}
  .btn-outline:hover{background:rgba(234,242,238,.08)}
  .trust{
    display:flex;gap:12px 34px;flex-wrap:wrap;margin-top:44px;padding-bottom:76px;
    font-size:.95rem;color:var(--on-night);font-weight:600;
  }
  .trust span{display:flex;align-items:center;gap:10px}
  .hero-wave{display:block;width:100%;height:auto;margin-bottom:-1px}

  /* ---------------- day spine ---------------- */
  .day{padding:92px 0 24px}
  .sectionhead{margin-bottom:56px}
  .kicker{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--brass);margin-bottom:16px}
  h2{font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.025em;line-height:1.12;margin-bottom:16px}
  .sectionhead p{color:var(--muted);max-width:58ch;font-size:1.06rem}

  .beat{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,.92fr);gap:0 40px;padding-bottom:60px;position:relative}
  .beat::before{content:"";position:absolute;left:calc(88px + 19px);top:14px;bottom:-14px;width:1px;background:linear-gradient(var(--border-strong), var(--border))}
  .beat:last-of-type::before{display:none}
  .time{font-variant-numeric:tabular-nums;font-weight:700;font-size:.86rem;color:var(--teal);text-align:right;padding-top:9px;letter-spacing:.04em}
  .beat-main{position:relative}
  .beat-main::before{content:"";position:absolute;left:-21px;top:12px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--teal)}
  .beat h3{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:12px}
  .beat .body{color:var(--muted);margin-bottom:18px}
  .beat ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
  .beat li{display:flex;gap:11px;align-items:flex-start;font-size:.97rem}
  .beat li .bullet{flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-top:10px}
  .beat li b{font-weight:700}

  .zshot{margin:0;align-self:start;background:#FFFFFF;border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
  .zshot img{display:block;width:100%;height:auto}
  .zshot figcaption{padding:11px 14px;border-top:1px solid var(--border);background:var(--surface);font-size:.82rem;color:var(--muted)}
  .bonshot img{width:auto;max-width:min(340px,100%);margin:0 auto;background:#FFFFFF;padding:8px 0}
  .bonshot{background:#FFFFFF}

  /* ---------------- vignettes ---------------- */
  .vig{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);font-size:.82rem;align-self:start}
  .vig-title{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between}
  .slot{border-radius:8px;padding:8px 10px;margin-bottom:7px;border-left:3px solid var(--teal);background:var(--teal-soft)}
  .slot.free{background:transparent;border:1px dashed var(--border-strong);color:var(--muted)}
  .slot .t{font-variant-numeric:tabular-nums;font-weight:700;font-size:.76rem;color:var(--teal)}
  .slot .n{font-weight:600}
  .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--border)}
  .row:last-child{border-bottom:0}
  .row .amt{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
  .total{margin-top:8px;padding-top:10px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;font-weight:700}
  .total .amt{font-variant-numeric:tabular-nums}
  .vig-note{margin-top:14px;color:var(--muted);font-size:.78rem}
  .stamps{display:flex;gap:6px;margin-top:4px}
  .stamp{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-strong)}
  .stamp.on{background:var(--teal);border-color:var(--teal)}
  .zline{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;padding:5px 0}
  .zline.ok{color:var(--teal);font-weight:700}
  .pill{display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--brass-soft);color:var(--brass)}
  .docflow{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
  .docflow .node{background:var(--teal-soft);color:var(--teal);border-radius:7px;padding:6px 10px;font-weight:700;font-size:.76rem}
  .docflow .arr{color:var(--muted)}

  /* ---------------- analytics panel ---------------- */
  .analytics{background:var(--panel);color:var(--on-panel);padding:96px 0;border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line)}
  .analytics h2,.analytics h3{color:var(--on-panel)}
  .analytics .kicker{color:var(--teal-bright)}
  .analytics .sectionhead p{color:var(--on-panel-muted)}
  .panelshot{border:1px solid var(--panel-line);border-radius:16px;overflow:hidden;background:var(--panel-card)}
  .panelshot img{display:block;width:100%;height:auto}
  .panelshot-cap{
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:14px 20px;border-top:1px solid var(--panel-line);
    font-size:.86rem;color:var(--on-panel-muted);
  }
  .panelshot-cap b{color:var(--on-panel);font-weight:700}
  .dash{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:8px}
  .panelcard{background:var(--panel-card);border:1px solid var(--panel-line);border-radius:16px;padding:22px}
  .panelcard .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--on-panel-muted);margin-bottom:14px}
  .kpi{font-family:Fraunces,Georgia,serif;font-size:2.6rem;line-height:1;color:var(--on-panel);font-variant-numeric:tabular-nums}
  .delta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--teal-bright);font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums}
  .bars{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:6px}
  .bars div{flex:1;background:var(--teal-bright);border-radius:4px 4px 0 0;opacity:.45}
  .bars div.now{opacity:1}
  .barscale{display:flex;justify-content:space-between;margin-top:8px;font-size:.7rem;color:var(--on-panel-muted);font-variant-numeric:tabular-nums}
  .listrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--panel-line);font-size:.94rem}
  .listrow:last-child{border-bottom:0}
  .listrow .amt{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
  .meter{margin-bottom:14px}
  .meter:last-child{margin-bottom:0}
  .meter .top{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:6px;font-variant-numeric:tabular-nums}
  .meter .track{height:7px;border-radius:99px;background:var(--panel-line);overflow:hidden}
  .meter .fill{height:100%;background:var(--teal-bright);border-radius:99px}

  /* ---------------- screenshot slot ---------------- */
  .proof{padding:92px 0;background:var(--surface);border-bottom:1px solid var(--border)}
  .shot{margin-top:36px;border:1px solid var(--border-strong);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg)}
  .shot-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border)}
  .shot-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--border-strong)}
  .shot-bar .u{font-size:.76rem;color:var(--muted);margin-left:10px}
  .shot img{display:block;width:100%;height:auto}
  .shots2{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
  @media (max-width:720px){ .shots2{grid-template-columns:1fr} }
  .shot-sm{border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--bg)}
  .shot-sm img{display:block;width:100%;height:auto}
  .shot-sm .cap{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);font-size:.86rem;color:var(--muted)}
  .shot-sm .cap b{display:block;color:var(--text);font-family:Fraunces,Georgia,serif;font-weight:500;font-size:1rem;margin-bottom:2px}
  .shot-caption{
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:14px 18px;border-top:1px solid var(--border);background:var(--surface);
    font-size:.84rem;color:var(--muted);
  }
  .shot-caption b{color:var(--text);font-weight:700}
  .shot-area{
    min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;padding:60px 28px;text-align:center;
    background:repeating-linear-gradient(135deg,transparent,transparent 12px,var(--surface-2) 12px,var(--surface-2) 13px);
  }
  .shot-area .t{font-family:Fraunces,Georgia,serif;font-size:1.3rem;color:var(--ink)}
  .shot-area .d{color:var(--muted);font-size:.95rem;max-width:46ch}

  /* ---------------- domains ---------------- */
  .band{background:var(--bg);padding:92px 0}
  .cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:40px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px}
  .card h3{font-size:1.24rem;margin-bottom:10px}
  .card p{color:var(--muted);font-size:.95rem}
  .card .ico{width:40px;height:40px;border-radius:11px;background:var(--teal-soft);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .secondary{display:flex;gap:14px 32px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--border);color:var(--muted);font-size:.95rem}
  .secondary span{display:block;line-height:1.5}
  .secondary b{color:var(--text);font-weight:700}

  /* ---------------- price ---------------- */
  .price{padding:92px 0;background:var(--surface-2)}
  .pricebox{background:var(--night);color:var(--on-night);border-radius:20px;padding:clamp(30px,5vw,58px);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;align-items:center;box-shadow:var(--shadow-lg)}
  .pricebox h2{color:var(--on-night);margin-bottom:14px}
  .pricebox p{color:var(--on-night-muted)}
  .pricehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 4px}
  .pricehead .bedrag{font-family:Fraunces,Georgia,serif;font-size:clamp(3rem,7vw,4.6rem);line-height:.95;color:var(--teal-bright);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .pricehead .per{font-size:1.05rem;color:var(--on-night)}
  .pricelater{color:var(--on-night-muted);font-size:.95rem;margin-top:14px;max-width:44ch}
  .pricefine{color:var(--on-night-muted);font-size:.86rem;margin-top:10px}
  .plekken{
    display:inline-flex;align-items:center;gap:9px;font-size:.78rem;letter-spacing:.12em;
    text-transform:uppercase;font-weight:700;color:#04201C;background:var(--teal-bright);
    padding:6px 14px;border-radius:99px;
  }
  .inclusief{display:grid;gap:12px;margin:0;padding:0;list-style:none}
  .inclusief li{display:flex;gap:12px;align-items:flex-start;color:var(--on-night);font-size:.98rem}
  .inclusief li svg{flex:none;margin-top:4px}
  .exclusief{
    margin-top:22px;padding-top:18px;border-top:1px solid var(--night-line);
    color:var(--on-night-muted);font-size:.88rem;line-height:1.55;
  }
  .exclusief b{color:var(--on-night);font-weight:700}
  .zerolist{display:grid;gap:14px}
  .zero{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--night-line);padding-bottom:12px}
  .zero:last-child{border-bottom:0}
  .zero .amt{font-family:Fraunces,Georgia,serif;font-size:2rem;color:var(--teal-bright);line-height:1;font-variant-numeric:tabular-nums;min-width:2.4ch}
  .zero .lbl{color:var(--on-night)}
  .zero .lbl small{display:block;color:var(--on-night-muted);font-size:.86rem}

  /* ---------------- login ---------------- */
  .login{padding:92px 0;background:var(--bg)}
  .choices{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:36px}
  .choice{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;text-decoration:none;display:block;transition:border-color .15s ease, transform .15s ease;box-shadow:var(--shadow-sm)}
  .choice:hover{border-color:var(--teal);transform:translateY(-2px)}
  .choice h3{font-size:1.32rem;margin-bottom:6px}
  .choice .who{color:var(--muted);font-size:.95rem;margin-bottom:20px}
  .choice .go{display:flex;align-items:center;gap:9px;color:var(--teal);font-weight:700;font-size:.95rem}

  /* ---------------- contact ---------------- */
  .contact{padding:96px 0;background:var(--panel);color:var(--on-panel)}
  .contact h2{color:var(--on-panel)}
  .contact .kicker{color:var(--teal-bright)}
  .contact .sectionhead p{color:var(--on-panel-muted)}
  .contactgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:36px}
  .mailcard{background:var(--panel-card);border:1px solid var(--panel-line);border-radius:16px;padding:26px}
  .mailcard .lbl{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--on-panel-muted);margin-bottom:10px}
  .mailcard a{font-family:Fraunces,Georgia,serif;font-size:1.24rem;color:var(--teal-bright);text-decoration:none;display:block;margin-bottom:6px;word-break:break-word}
  .mailcard a:hover{text-decoration:underline}
  .mailcard p{color:var(--on-panel-muted);font-size:.92rem}

  /* ---------------- contactformulier ---------------- */
  .contactgrid{align-items:start}
  .formcard{
    background:var(--panel-card);border:1px solid var(--panel-line);border-radius:16px;
    padding:clamp(22px,3vw,32px);
  }
  .formrow{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:18px}
  .field{display:flex;flex-direction:column;gap:7px}
  .field label{font-size:.86rem;font-weight:700;color:var(--on-panel)}
  .field .hint{font-size:.78rem;color:var(--on-panel-muted);font-weight:400}
  .field input,.field select,.field textarea{
    font-family:Karla,sans-serif;font-size:.98rem;color:var(--on-panel);
    background:rgba(0,0,0,.22);border:1px solid var(--panel-line);border-radius:9px;
    padding:12px 14px;width:100%;
  }
  .field textarea{min-height:110px;resize:vertical}
  .field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--on-panel-muted) 75%,transparent)}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--teal-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal-bright) 22%,transparent);
  }
  .field select{appearance:none;background-image:none}
  .consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 22px;font-size:.88rem;color:var(--on-panel-muted)}
  .consent input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--teal-bright)}
  .consent a{color:var(--teal-bright)}
  .formfoot{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
  .btn-submit{
    font-family:Karla,sans-serif;font-weight:700;font-size:.98rem;border:0;cursor:pointer;
    background:var(--teal-bright);color:#04201C;padding:14px 28px;border-radius:10px;
  }
  .btn-submit:hover{filter:brightness(1.06)}
  .formfoot .promise{font-size:.88rem;color:var(--on-panel-muted)}
  /* Succes-status die na verzending het hele formulier vervangt. */
  .formsuccess{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:14px;min-height:340px;
    border-color:color-mix(in srgb,var(--teal-bright) 45%,var(--panel-line));
  }
  .formsuccess h3{font-family:Fraunces,Georgia,serif;font-size:1.6rem;color:var(--on-panel)}
  .formsuccess p{color:var(--on-panel-muted);font-size:.98rem;max-width:44ch}
  .formsuccess .mailnote{font-size:.88rem}
  .formsuccess .mailnote a{color:var(--teal-bright)}
  .formsuccess .btn-submit{display:inline-block;text-decoration:none;margin-top:8px}
  .formdone{
    display:none;gap:14px;align-items:flex-start;
    border:1px solid var(--teal-bright);border-radius:12px;padding:20px 22px;
    background:color-mix(in srgb,var(--teal-bright) 12%,transparent);
  }
  .formdone.is-visible{display:flex}
  .formdone h3{font-size:1.1rem;margin-bottom:5px;color:var(--on-panel)}
  .formdone p{color:var(--on-panel-muted);font-size:.92rem}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .asidecard{background:var(--panel-card);border:1px solid var(--panel-line);border-radius:16px;padding:24px;margin-bottom:16px}
  .asidecard:last-child{margin-bottom:0}
  .asidecard .lbl{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--on-panel-muted);margin-bottom:10px}
  .asidecard a{font-family:Fraunces,Georgia,serif;font-size:1.16rem;color:var(--teal-bright);text-decoration:none;display:block;margin-bottom:6px;word-break:break-word}
  .asidecard a:hover{text-decoration:underline}
  .asidecard p{color:var(--on-panel-muted);font-size:.9rem}
  .reassure{display:grid;gap:11px;margin-top:4px}
  .reassure span{display:block;font-size:.9rem;line-height:1.5;color:var(--on-panel-muted)}
  .reassure b{color:var(--on-panel);font-weight:700}
  @media (max-width:860px){ .contactgrid{grid-template-columns:1fr} }

  footer{background:var(--night);color:var(--on-night-muted);padding:56px 0 40px;font-size:.9rem}
  .foot-legal{
    display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:22px;padding-top:18px;
    border-top:1px solid var(--night-line);font-size:.8rem;color:var(--on-night-muted);
    opacity:.85;
  }
  .foot{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
  /* Het voetmerk staat kleiner dan het navigatiemerk (.logo span, 1.16rem). */
  .foot .logo span{font-size:1rem}
  .foot a{color:var(--on-night-muted);text-decoration:none}
  .foot a:hover{color:var(--on-night)}
  .foot .sp{margin-left:auto}

  @media (max-width:860px){
    .beat{grid-template-columns:58px minmax(0,1fr);gap:0 20px;padding-bottom:48px}
    /* De verticale lijn zou hier dwars door de kaartjes lopen, want die staan
       op smalle schermen onder de tekst in plaats van ernaast. */
    .beat::before{display:none}
    .beat-main::before{left:-13px;width:9px;height:9px}
    .beat h3{font-size:1.32rem}
    .vig{grid-column:1 / -1;margin-top:20px}
    .zshot{grid-column:1 / -1;margin-top:20px}
    .nav-links a:not(.nav-login){display:none}
  }
  /* ---------------- juridische pagina's (/privacy) ----------------
     Zelfde merkstijl als de landingspagina: donkere kop met golf, daarna een
     rustige leeskolom op het zand. De inhoud komt uit de superadmin-editor
     (gesanitiseerde HTML), dus de opmaak stuurt op elementniveau. */
  .nav-lang{display:flex;align-items:center;gap:4px;font-size:.88rem}
  .nav-lang a{color:var(--on-night-muted);text-decoration:none;font-weight:600;padding:4px 7px;border-radius:6px}
  .nav-lang a:hover{color:var(--on-night)}
  .nav-lang a.is-active{color:var(--on-night);background:rgba(234,242,238,.1)}
  .nav-lang .sep{color:var(--night-line)}

  .legal-hero{background:var(--night);color:var(--on-night);position:relative;overflow:hidden;padding:72px 0 0}
  .legal-hero h1{
    color:var(--on-night);font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.06;
    letter-spacing:-.025em;margin-bottom:14px;
  }
  .legal-hero .eyebrow{color:var(--on-night-muted)}
  .legal-meta{color:var(--on-night-muted);font-size:.92rem;padding-bottom:56px}
  .legal-hero .hero-wave{margin-top:0}

  .legal-body{padding:56px 0 96px;background:var(--bg)}
  .legal-article{max-width:760px}
  .legal-article h1,.legal-article h2{font-size:1.5rem;letter-spacing:-.02em;margin:44px 0 12px}
  .legal-article h3{font-size:1.14rem;margin:28px 0 8px}
  .legal-article h1:first-child,.legal-article h2:first-child,.legal-article p:first-child{margin-top:0}
  .legal-article p{margin:0 0 14px;color:var(--text)}
  .legal-article p em{color:var(--muted)}
  .legal-article ul,.legal-article ol{margin:0 0 16px;padding-left:22px;display:grid;gap:8px}
  .legal-article li{color:var(--text)}
  .legal-article li::marker{color:var(--teal)}
  .legal-article a{color:var(--teal);font-weight:600;text-decoration:none}
  .legal-article a:hover{text-decoration:underline}
  .legal-article hr{border:0;border-top:1px solid var(--border);margin:32px 0}
  .legal-article table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:.95rem}
  .legal-article th,.legal-article td{border:1px solid var(--border-strong);padding:9px 12px;text-align:left;vertical-align:top}
  .legal-article th{background:var(--surface);font-weight:700}
  .legal-article img{max-width:100%;height:auto;border-radius:10px}

  /* Previewbalk voor de superadmin (vervangt de Bootstrap-alert van de app). */
  .legal-preview{
    background:var(--brass-soft);border:1px solid var(--brass);border-radius:14px;
    padding:20px 24px;margin-bottom:36px;color:var(--ink);
    display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
  }
  .legal-preview .versie{font-size:.8rem;color:var(--brass);font-weight:700;letter-spacing:.08em}
  .legal-preview .btn-primary{border:0;cursor:pointer}
  .legal-preview .ok{color:var(--teal);font-weight:700;font-size:.92rem}

  /* De mobiele nav-regel hierboven verbergt links in .nav-links; de
     taalkeuze moet op de juridische pagina's ook mobiel bereikbaar blijven. */
  @media (max-width:860px){ .nav-links .nav-lang a{display:inline-block} }

  /* Nette nietsgevonden-variant in dezelfde stijl. */
  .legal-empty{min-height:46vh;display:flex;align-items:center}
  .legal-empty .wrap{text-align:center}
  .legal-empty h1{font-size:clamp(1.6rem,3.6vw,2.2rem);margin-bottom:12px}
  .legal-empty p{color:var(--muted);max-width:52ch;margin:0 auto 26px}

  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}