/* Shared styles for Hingabe static content pages (process, after-an-accident, your-right-to-choose) */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#080a0c;color:#f4f6f8;font-family:Manrope,system-ui,sans-serif;font-size:16px;line-height:1.65}
a{color:#ff9783;text-decoration:none}
a:hover{color:#ffc4b8}
::selection{background:rgba(236,48,19,0.3)}
:focus{outline:none}
:focus-visible{outline:2px solid #ec3013;outline-offset:2px}

.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:64px;background:rgba(8,10,12,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(243,242,242,.2)}
.brand{display:flex;align-items:center;gap:12px;color:#f3f2f2}
.brand .mark{width:14px;height:14px;background:#ec3013}
.brand .name{display:flex;flex-direction:column;line-height:1}
.brand .name b{font-weight:800;font-size:18px;letter-spacing:0.12em}
.brand .name span{font-size:9px;letter-spacing:0.34em;color:rgba(243,242,242,0.6);font-weight:600;margin-top:3px}
.topbar-actions,.desktop-links{display:flex;align-items:center;gap:24px}
.desktop-links a{font-size:13px;font-weight:700;color:rgba(244,246,248,.72)}
.desktop-links a:hover{color:#fff}
.topbar .cta{background:#f04a2d;color:#f3f2f2;padding:10px 18px;border-radius:8px;font-weight:800;font-size:14px}
.topbar .cta:hover{background:#ff563c;color:#f3f2f2}
.article-menu{display:none;position:relative}
.article-menu summary{list-style:none;display:grid;place-items:center;min-width:48px;min-height:44px;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.12em;cursor:pointer}
.article-menu summary::-webkit-details-marker{display:none}
.article-menu-panel{position:absolute;top:52px;right:0;width:min(330px,calc(100vw - 28px));padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(8,10,12,.99);box-shadow:0 28px 70px rgba(0,0,0,.5)}
.article-menu-panel a{display:flex;align-items:center;min-height:46px;padding:8px 11px;border-radius:8px;color:rgba(244,246,248,.82);font-size:14px;font-weight:700}
.article-menu-panel a:last-child{justify-content:center;margin-top:6px;background:#f04a2d;color:#fff}

main{max-width:860px;margin:0 auto;padding:112px 28px 80px}
main:before{content:"";display:block;height:300px;margin:0 0 48px;background-image:linear-gradient(0deg,rgba(8,10,12,.94),rgba(8,10,12,.04) 62%),var(--article-photo);background-size:cover;background-position:center;border-bottom:1px solid rgba(243,242,242,.18);border-radius:0 0 18px 18px}
.process-page{--article-photo:url('./assets/precision-body-repair.jpg')}
.accident-page{--article-photo:url('./assets/hero-collision-center.jpg')}
.choice-page{--article-photo:url('./assets/parts-acquisition.jpg')}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:0.18em;color:#ff9783;margin-bottom:12px}
h1{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-0.015em;margin:0 0 14px;text-wrap:balance}
.lede{color:rgba(243,242,242,0.7);font-size:17px;margin:0 0 40px;text-wrap:pretty}
h2{font-size:22px;font-weight:800;margin:40px 0 10px}
p{color:rgba(243,242,242,0.75)}
li{color:rgba(243,242,242,0.75);margin-bottom:8px}

.step{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid rgba(243,242,242,0.14)}
.step:last-of-type{border-bottom:none}
.step .num{flex:0 0 44px;height:44px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;border:1px solid rgba(236,48,19,0.6);color:#ffc4b8}
.step.blue .num{border-color:#3e6df0;color:#9db8ff}
.step h3{margin:2px 0 6px;font-size:18px;font-weight:800}
.step p{margin:0;font-size:15px;color:rgba(243,242,242,0.68)}

.notice{padding:16px 20px;background:rgba(62,109,240,0.08);border-left:2px solid #3e6df0;font-size:14px;color:rgba(243,242,242,0.8);margin:32px 0}
.notice b{color:#c3d4ff}
.notice.red{background:rgba(236,48,19,0.08);border-left-color:#ec3013}
.notice.red b{color:#ffc4b8}

.cta-block{margin-top:48px;padding:28px;background:#201e1d;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.cta-block .txt{font-weight:800;font-size:18px}
.cta-block a{background:#ec3013;color:#f3f2f2;padding:14px 24px;font-weight:800;font-size:15px}
.cta-block a:hover{background:#ff563c}

footer{border-top:2px solid rgba(243,242,242,0.32);padding:28px;text-align:center;font-size:12px;color:rgba(243,242,242,0.55)}
footer a{color:rgba(243,242,242,0.7)}

@media (max-width:700px){
  h1{font-size:30px}
  .topbar{height:60px;padding:0 14px}
  .brand .name span{display:none}
  .desktop-links,.topbar>.topbar-actions>.cta{display:none}
  .article-menu{display:block}
  main{padding:84px 20px 60px}
  main:before{height:210px;margin-bottom:34px}
  .step{gap:14px}
  .step .num{flex-basis:40px;height:40px}
  .cta-block{padding:22px;align-items:stretch}
  .cta-block a{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}