:root{--bg:#090a0c;--panel:#111418;--panel2:#15191d;--line:#2a2f34;--text:#f7f7f3;--muted:#b9c0c6;--orange:#ff6200;--red:#d22d2d;--green:#1f9c54}
*{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden}
body.safety-page{background:var(--bg);color:var(--text);min-height:100vh}
.safety-page main{overflow:clip}
.safety-page img{max-width:100%;height:auto}

.safety-header{height:74px;position:sticky;top:0;z-index:1000;background:rgba(8,9,10,.96);backdrop-filter:blur(14px);border-bottom:1px solid #24272a;display:flex;align-items:center;justify-content:space-between;padding-inline:max(18px,calc((100vw - 1200px)/2));gap:16px}
.safety-brand{display:flex;align-items:center;min-width:0}.safety-brand img{width:128px;display:block}
.safety-header-actions{display:flex;align-items:center;gap:10px;min-width:0}.safety-back{font:900 11px/1 Inter,Arial,sans-serif;letter-spacing:.1em;color:#fff;text-decoration:none;border:1px solid #303338;padding:12px 15px;white-space:nowrap}
.safety-header .mf-language{position:relative;z-index:1100}.safety-header .mf-language-panel{right:0;left:auto;max-width:calc(100vw - 24px)}

.safety-hero{min-height:500px;display:flex;align-items:center;background:radial-gradient(circle at 80% 20%,rgba(255,98,0,.18),transparent 35%),linear-gradient(135deg,#0b0c0e 0%,#111419 100%);border-bottom:1px solid #24272a;padding-block:56px}
.safety-hero-inner,.safety-content{width:min(1160px,calc(100% - 40px));margin-inline:auto;min-width:0}
.safety-hero-inner>span,.safety-section-title>span,.control-card span{font:900 10px/1.35 Inter,Arial,sans-serif;letter-spacing:.18em;color:var(--orange)}
.safety-hero h1{font:900 clamp(4rem,8.5vw,8.5rem)/.8 "Barlow Condensed",Arial,sans-serif;letter-spacing:-.04em;font-style:italic;margin:22px 0;color:#fff;max-width:100%;overflow-wrap:normal}
.safety-hero h1 span,.safety-hero h1 em{display:block;white-space:normal}.safety-hero h1 span{font-size:.72em;line-height:.95}.safety-hero h1 em{font-size:1em;line-height:.82;color:var(--orange);font-style:italic}
.safety-hero p{font:900 15px/1.45 Inter,Arial,sans-serif;letter-spacing:.08em;max-width:760px;margin:0}
.safety-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}.safety-quick b{padding:11px 14px;border:1px solid #313438;background:#111316;font:900 10px/1 Inter,Arial,sans-serif;letter-spacing:.1em}

.safety-content{padding-block:88px}.safety-section-title h2,.safety-first h2{font:900 clamp(3.25rem,6vw,5.875rem)/.82 "Barlow Condensed",Arial,sans-serif;letter-spacing:-.035em;font-style:italic;margin:15px 0 40px;color:#fff}.safety-section-title h2 em,.safety-first h2 em{color:var(--orange);font-style:italic}
.control-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.control-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:start;background:var(--panel);color:var(--text);padding:28px;min-height:190px;border:1px solid var(--line);min-width:0}.control-card.wide{grid-column:1/-1;min-height:auto}.control-card h3,.rules-list h3{font:900 30px/1.02 "Barlow Condensed",Arial,sans-serif;font-style:italic;margin:8px 0 12px;overflow-wrap:anywhere}.control-card p,.rules-list p,.safety-first p{font:600 13px/1.65 Inter,Arial,sans-serif;color:var(--muted);margin:0;overflow-wrap:anywhere}.control-icon,.pedal{height:62px;width:62px;display:grid;place-items:center;background:#111;color:#fff;font:900 26px/1 "Barlow Condensed",Arial,sans-serif}.pedal{font-size:15px}.gas .pedal{background:var(--green)}.brake .pedal,.warning .control-icon{background:var(--red)}.warning{background:#17191d;border-color:#3a3030}.warning p{color:#c8cbd0}

.rules-wrap{background:#0d0f11;color:var(--text);border-top:1px solid #24272a;border-bottom:1px solid #24272a}.rules-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.rules-list article{display:grid;grid-template-columns:58px minmax(0,1fr);gap:20px;padding:26px;background:#13161a;border:1px solid var(--line);min-height:165px;min-width:0}.rules-list article>b{font:900 30px/1 "Barlow Condensed",Arial,sans-serif;font-style:italic;color:var(--orange)}.rules-list h3{font-size:25px;margin-top:0;color:#fff}

.safety-first{padding:96px max(20px,calc((100vw - 1160px)/2));text-align:center;background:radial-gradient(circle at 50% 0%,rgba(255,98,0,.18),transparent 38%),var(--bg)}.safety-first>span{color:var(--orange);font:900 12px/1 Inter,Arial,sans-serif;letter-spacing:.16em}.safety-first h2{font-size:clamp(3rem,6vw,5.75rem);margin:22px auto}.safety-first p{max-width:780px;margin:0 auto;color:#b7bcc1;font-size:14px}

.safety-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:110px;padding:26px max(20px,calc((100vw - 1160px)/2));border-top:1px solid #25282b;background:var(--bg)}.safety-footer-brand{display:flex;align-items:center;gap:16px;min-width:0}.safety-footer-brand img{width:104px;flex:0 0 auto}.safety-footer-brand span{color:#8c9298;font:600 10px/1.4 Inter,Arial,sans-serif}.safety-footer-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}.safety-footer-links a{color:#c5c9cd;text-decoration:none;font:800 10px/1 Inter,Arial,sans-serif;letter-spacing:.06em;white-space:nowrap}.safety-footer-links a:hover{color:var(--orange)}

@media(max-width:900px){
  .safety-header{height:68px;padding-inline:16px}.safety-brand img{width:112px}
  .safety-hero{min-height:440px;padding-block:48px}.safety-hero h1{font-size:clamp(3.7rem,9.5vw,6.5rem)}
  .safety-content{padding-block:72px}.control-grid,.rules-list{grid-template-columns:1fr}
  .control-card.wide{grid-column:auto}.control-card{min-height:auto}.rules-list article{min-height:auto}
  .safety-footer{padding-inline:20px}
}

@media(max-width:720px){
  .safety-header{height:62px;padding-inline:12px}.safety-brand img{width:98px}.safety-back{display:none}
  .safety-header .mf-language-toggle{min-width:62px;min-height:40px}
  .safety-header .mf-language-panel{position:fixed;top:68px;right:12px;left:12px;width:auto!important;max-width:none!important;max-height:calc(100dvh - 80px);overflow:auto}
  .safety-hero{min-height:auto;padding:42px 0 38px;align-items:flex-start}.safety-hero-inner,.safety-content{width:calc(100% - 28px)}
  .safety-hero-inner>span{display:block;font-size:9px;letter-spacing:.14em}
  .safety-hero h1{font-size:clamp(3rem,14vw,4.7rem);line-height:.84;margin:16px 0 18px;letter-spacing:-.025em}
  .safety-hero h1 span{font-size:.55em;line-height:1.02;margin-bottom:7px;white-space:normal}
  .safety-hero h1 em{font-size:1em;line-height:.86;white-space:normal}
  .safety-hero p{font-size:11px;line-height:1.5;letter-spacing:.04em;max-width:100%}
  .safety-quick{display:grid;grid-template-columns:1fr;gap:7px;margin-top:22px}.safety-quick b{width:100%;text-align:left}
  .safety-content{padding-block:54px}.safety-section-title h2{font-size:clamp(2.75rem,12vw,4.1rem);line-height:.85;margin:12px 0 26px}
  .control-grid,.rules-list{gap:9px}.control-card{grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px}.control-icon,.pedal{width:46px;height:46px;font-size:20px}.pedal{font-size:12px}.control-card h3{font-size:23px}.control-card p{font-size:12px;line-height:1.58}
  .rules-list article{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px}.rules-list article>b{font-size:22px}.rules-list h3{font-size:22px;line-height:1.04;margin-bottom:8px}.rules-list p{font-size:12px;line-height:1.56}
  .safety-first{padding:64px 16px}.safety-first h2{font-size:clamp(2.65rem,11.5vw,3.8rem);line-height:.86;margin:18px auto 22px}.safety-first p{font-size:12px;line-height:1.6}
  .safety-footer{flex-direction:column;align-items:stretch;gap:18px;min-height:0;padding:28px 18px calc(28px + env(safe-area-inset-bottom))}.safety-footer-brand{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px}.safety-footer-brand img{width:92px}.safety-footer-brand span{font-size:10px;white-space:normal}.safety-footer-links{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid #24272a}.safety-footer-links a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid #24272a;font-size:11px;white-space:normal}
}

@media(max-width:420px){
  .safety-hero-inner,.safety-content{width:calc(100% - 24px)}
  .safety-hero h1{font-size:clamp(2.7rem,13vw,3.5rem)}
  .safety-hero h1 span{font-size:.52em}
  .control-card{grid-template-columns:42px minmax(0,1fr);padding:16px;gap:12px}.control-icon,.pedal{width:40px;height:40px;font-size:18px}.pedal{font-size:11px}.control-card h3{font-size:21px}
  .rules-list article{grid-template-columns:34px minmax(0,1fr);padding:16px;gap:12px}.rules-list article>b{font-size:20px}.rules-list h3{font-size:20px}
}

@media(max-width:340px){
  .safety-hero h1{font-size:2.55rem}.safety-hero h1 span{font-size:.48em}
  .control-card{grid-template-columns:1fr}.control-icon,.pedal{margin-bottom:2px}
  .rules-list article{grid-template-columns:1fr}.rules-list article>b{margin-bottom:2px}
}


/* isolate Safety header from homepage global <header> rules */
.safety-page .safety-header{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.safety-page .safety-brand{display:flex!important;visibility:visible!important;opacity:1!important}
.safety-page .safety-brand img{display:block!important;visibility:visible!important;opacity:1!important;max-width:none!important}


/* stable Safety header at every viewport
   Root cause fixed: square logo was sized by WIDTH, making it taller than the header. */
.safety-page .safety-header{
  height:72px!important;
  min-height:72px!important;
  padding:8px max(14px,calc((100vw - 1200px)/2))!important;
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  align-items:center!important;
  gap:14px!important;
  overflow:visible!important;
}

.safety-page .safety-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:auto!important;
  height:56px!important;
  min-width:56px!important;
  overflow:visible!important;
  line-height:0!important;
}

.safety-page .safety-brand img{
  width:auto!important;
  height:56px!important;
  max-width:56px!important;
  max-height:56px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}

.safety-page .safety-header-actions{
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  min-width:0!important;
  height:100%!important;
}

.safety-page .safety-back{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 13px!important;
  margin:0!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
  font-size:10px!important;
  line-height:1!important;
}

.safety-page .safety-header .mf-language{
  position:relative!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  inset:auto!important;
  transform:none!important;
}

.safety-page .safety-header .mf-language-toggle{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  width:auto!important;
  min-width:62px!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 11px!important;
  transform:none!important;
  inset:auto!important;
}

.safety-page .safety-header .mf-language-panel{
  top:calc(100% + 8px)!important;
  right:0!important;
  left:auto!important;
  transform:none!important;
}

/* Tablet */
@media(max-width:900px){
  .safety-page .safety-header{
    height:66px!important;
    min-height:66px!important;
    padding:7px 14px!important;
    gap:10px!important;
  }
  .safety-page .safety-brand{
    height:50px!important;
    min-width:50px!important;
  }
  .safety-page .safety-brand img{
    height:50px!important;
    max-height:50px!important;
    max-width:50px!important;
  }
}

/* Phones: keep ALL THREE controls visible: logo, back, language */
@media(max-width:720px){
  .safety-page .safety-header{
    height:60px!important;
    min-height:60px!important;
    padding:6px 10px!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:8px!important;
  }
  .safety-page .safety-brand{
    height:46px!important;
    min-width:46px!important;
  }
  .safety-page .safety-brand img{
    height:46px!important;
    max-height:46px!important;
    max-width:46px!important;
  }
  .safety-page .safety-header-actions{
    width:100%!important;
    gap:7px!important;
  }
  .safety-page .safety-back{
    display:inline-flex!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 10px!important;
    font-size:9px!important;
    letter-spacing:.07em!important;
  }
  .safety-page .safety-header .mf-language-toggle{
    min-width:58px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 9px!important;
  }
  .safety-page .safety-header .mf-language-panel{
    position:fixed!important;
    top:66px!important;
    right:10px!important;
    left:10px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 78px)!important;
    overflow:auto!important;
  }
}

/* Very narrow phones */
@media(max-width:380px){
  .safety-page .safety-header{
    padding-inline:8px!important;
    gap:6px!important;
  }
  .safety-page .safety-brand{
    height:42px!important;
    min-width:42px!important;
  }
  .safety-page .safety-brand img{
    height:42px!important;
    max-height:42px!important;
    max-width:42px!important;
  }
  .safety-page .safety-header-actions{gap:5px!important}
  .safety-page .safety-back{
    padding:0 8px!important;
    font-size:8px!important;
    letter-spacing:.045em!important;
  }
  .safety-page .safety-header .mf-language-toggle{
    min-width:54px!important;
    padding:0 7px!important;
    gap:4px!important;
  }
}

/* 320px safety net */
@media(max-width:335px){
  .safety-page .safety-brand{
    height:38px!important;
    min-width:38px!important;
  }
  .safety-page .safety-brand img{
    height:38px!important;
    max-height:38px!important;
    max-width:38px!important;
  }
  .safety-page .safety-back{
    padding:0 6px!important;
    font-size:7.5px!important;
  }
  .safety-page .safety-header .mf-language-toggle{
    min-width:50px!important;
    padding:0 6px!important;
  }
}

/* FINAL V3 — optional rule category label */
.rules-list .rule-kicker{
  display:block;
  margin:0 0 7px;
  color:#ff6200;
  font:900 9px/1 Inter,Arial,sans-serif;
  letter-spacing:.16em;
  font-style:normal;
}


/* FINAL V5 — desktop pedal layout mirrors the real kart:
   LEFT = BRAKE | RIGHT = GAS */
@media(min-width:721px){
  .control-grid .control-card.brake{
    grid-column:1;
    grid-row:2;
  }
  .control-grid .control-card.gas{
    grid-column:2;
    grid-row:2;
  }
}