/* Driver Updater landing page content (services/driver-updater.html).
   Everything is scoped to .du and uses du- class names so it never collides
   with main.css or touches the shared header and footer. */
.du{
  --du-white:#FFFFFF;
  --du-panel:#F5F7FA;
  --du-ink:#0F1B2D;
  --du-ink-2:#2B3648;
  --du-muted:#5A6474;
  --du-line:#E3E7EE;
  --du-brand:#4B3BFF;
  --du-brand-dark:#3627E0;
  --du-brand-tint:#F1EFFF;
  --du-good:#0F7B4F;
  --du-bad:#B42318;
  --du-font:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --du-font-win:'Segoe UI Variable Text','Segoe UI',-apple-system,Roboto,Arial,sans-serif;
  background:var(--du-white);
  color:var(--du-ink);
  font-family:var(--du-font);
  font-size:17px;
  line-height:1.6;
}
.du h1,.du h2,.du h3,.du h4{font-family:var(--du-font);font-weight:600;color:var(--du-ink);letter-spacing:-.02em;text-wrap:balance}
.du a:hover{text-decoration:none}
.du-wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.du-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 16px/1 var(--du-font);padding:14px 22px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.du-btn-primary{background:var(--du-brand);color:#fff}
.du-btn-primary:hover{background:var(--du-brand-dark);color:#fff}
.du-btn-secondary{background:var(--du-white);color:var(--du-ink);border-color:#C9D0DC}
.du-btn-secondary:hover{border-color:var(--du-ink);color:var(--du-ink)}

/* hero */
.du-hero{padding-block:64px 0}
.du-crumbs{font-size:14px;color:var(--du-muted)}
.du-crumbs a{color:var(--du-muted)}
.du-crumbs a:hover{color:var(--du-brand)}
.du-tag{display:inline-block;margin-top:22px;font-size:14px;font-weight:500;color:var(--du-brand);background:var(--du-brand-tint);padding:5px 12px;border-radius:999px}
.du-hero h1{font-size:50px;line-height:1.1;letter-spacing:-.025em;margin-top:18px;max-width:20ch}
.du-lead{font-size:20px;color:var(--du-ink-2);margin-top:22px;max-width:62ch;line-height:1.55}
.du-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.du-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
.du-included{border:1px solid var(--du-line);border-radius:14px;padding:28px;background:var(--du-white)}
.du .du-included h2{font-size:18px;letter-spacing:-.01em}
.du-included ul{list-style:none;margin:8px 0 0;padding:0}
.du-included li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--du-line)}
.du-included li:last-child{border-bottom:0;padding-bottom:0}
.du-included strong{display:block;font-weight:600;font-size:16px;color:var(--du-ink);line-height:1.35}
.du-included span:not(.du-ico){display:block;font-size:14.5px;color:var(--du-muted);line-height:1.45;margin-top:2px}
@media (max-width:960px){.du-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}}
@media (max-width:640px){.du-hero{padding-block:40px 0}.du-hero h1{font-size:36px}.du-lead{font-size:17px}}

/* example app window, Windows 11 style */
.du-stage{margin-top:56px;padding:40px 40px 0;background:var(--du-panel);border:1px solid var(--du-line);border-bottom:0;border-radius:16px 16px 0 0}
@media (max-width:640px){.du-stage{padding:16px 12px 0;margin-top:40px;border-radius:12px 12px 0 0}}
.du-win{font-family:var(--du-font-win);font-size:13.5px;color:#1B1B1B;background:#FBFBFB;border:1px solid #D6DAE1;border-bottom:0;border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 30px 60px -36px rgba(15,27,45,.45)}
.du-win-title{display:flex;align-items:center;gap:10px;height:40px;padding-left:14px;background:#F3F3F3}
.du-win-title .du-name{font-size:12.5px}
.du-mini{width:18px;height:18px;border-radius:4px;background:var(--du-brand);display:grid;place-items:center}
.du-win-ctrl{margin-left:auto;display:flex;height:100%}
.du-win-ctrl span{width:46px;display:grid;place-items:center}
.du-win-ctrl svg{width:10px;height:10px}
.du-win-body{display:grid;grid-template-columns:210px minmax(0,1fr);background:#F3F3F3}
.du-win-nav{padding:6px 6px 14px;display:flex;flex-direction:column;gap:3px}
.du-win-nav div{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:5px;position:relative}
.du-win-nav svg{width:16px;height:16px;flex:none}
.du-win-nav .du-sel{background:#EAEAEA}
.du-win-nav .du-sel::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--du-brand)}
.du-win-nav .du-bottom{margin-top:auto}
.du-win-main{background:#FFFFFF;border-top-left-radius:8px;border-left:1px solid #E5E5E5;border-top:1px solid #E5E5E5;padding:26px 28px;min-width:0}
.du .du-win-main h3{font-family:var(--du-font-win);font-size:24px;letter-spacing:-.01em}
.du-summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding:14px 16px;background:#FFF8E6;border:1px solid #F2DFAE;border-radius:6px}
.du-summary p{flex:1 1 260px}
.du-summary b{font-weight:600}
.du-win-btn{font-family:var(--du-font-win);font-size:13.5px;background:var(--du-brand);color:#fff;border:0;border-radius:4px;padding:7px 16px;cursor:default}
.du-win-btn.du-ghost{background:#FBFBFB;color:#1B1B1B;border:1px solid #D1D1D1}
.du-list{margin-top:20px;overflow-x:auto}
.du-list table{width:100%;border-collapse:collapse;min-width:560px}
.du-list th{font-weight:400;font-size:12.5px;color:#616161;text-align:left;padding:0 10px 8px;border-bottom:1px solid #E5E5E5}
.du-list td{padding:11px 10px;border-bottom:1px solid #EFEFEF;vertical-align:middle}
.du-list td.du-dev{display:flex;align-items:center;gap:12px}
.du-list td.du-dev svg{width:20px;height:20px;color:#444;flex:none}
.du-list td small{display:block;color:#616161;font-size:12px}
.du-list td.du-ver{font-variant-numeric:tabular-nums;white-space:nowrap;color:#333}
.du-st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.du-st::before{content:"";width:8px;height:8px;border-radius:50%}
.du-st.du-old::before{background:#C27C0E}
.du-st.du-miss::before{background:#C42B1C}
.du-st.du-ok::before{background:#0F7B0F}
.du-list td:last-child{text-align:right}
.du-win-foot{margin-top:16px;font-size:12.5px;color:#616161}
@media (max-width:760px){.du-win-body{grid-template-columns:minmax(0,1fr)}.du-win-nav{display:none}.du-win-main{border-left:0;border-radius:0;padding:20px 16px}}
/* real app screenshot in the stage */
.du-shot{margin-inline:0;margin-bottom:0}
.du-shot img{display:block;width:100%;height:auto;border:1px solid #D6DAE1;border-bottom:0;border-radius:10px 10px 0 0;box-shadow:0 30px 60px -36px rgba(15,27,45,.45)}
.du-caption{font-size:14px;color:var(--du-muted);padding-top:14px}

/* sections */
.du-section{padding-block:96px}
.du-section.du-tint{background:var(--du-panel)}
.du-section.du-rule{border-top:1px solid var(--du-line)}
.du-section h2{font-size:39px;line-height:1.15;max-width:24ch}
.du-intro{margin-top:14px;color:var(--du-ink-2);max-width:62ch;font-size:18px}
@media (max-width:640px){.du-section{padding-block:64px}.du-section h2{font-size:30px}}

/* why you need it */
.du-figures{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--du-line)}
.du-figure{padding:28px 32px 0 0;display:grid;gap:10px;align-content:start}
.du-figure + .du-figure{padding-left:32px;border-left:1px solid var(--du-line)}
.du-figure strong{font-size:39px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--du-ink);font-variant-numeric:tabular-nums}
.du-figure p{color:var(--du-muted);max-width:30ch}
@media (max-width:760px){.du-figures{grid-template-columns:minmax(0,1fr)}.du-figure,.du-figure + .du-figure{padding:24px 0;border-left:0;border-bottom:1px solid var(--du-line)}}

/* features */
.du-features{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px}
.du-feature{display:grid;gap:12px;align-content:start}
.du-ico{width:44px;height:44px;border-radius:10px;background:var(--du-brand-tint);color:var(--du-brand);display:grid;place-items:center}
.du-ico svg{width:22px;height:22px}
.du .du-feature h3{font-size:20px;margin-top:6px}
.du-feature p{color:var(--du-ink-2);font-size:16px}
.du-checks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:7px;font-size:15px;color:var(--du-muted)}
.du-checks li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px}
.du-checks li::before{content:"";width:16px;height:16px;margin-top:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B3BFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:960px){.du-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.du-features{grid-template-columns:minmax(0,1fr);gap:44px}}

/* advantage + how it works */
.du-advantage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}
.du-blocks{margin-top:40px;border-top:1px solid var(--du-line)}
.du-block{padding:24px 0;border-bottom:1px solid var(--du-line);display:grid;gap:6px}
.du .du-block h3{font-size:20px}
.du-block p{color:var(--du-ink-2);font-size:16px}
.du-how{background:var(--du-white);border:1px solid var(--du-line);border-radius:14px;padding:32px;position:sticky;top:100px}
.du .du-how h3{font-size:25px}
.du-how ol{list-style:none;margin:24px 0 0;padding:0;counter-reset:du-step}
.du-how li{counter-increment:du-step;display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;position:relative;font-weight:500;color:var(--du-ink)}
.du-how li::before{content:counter(du-step);width:32px;height:32px;border-radius:50%;background:var(--du-brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600;position:relative;z-index:1}
.du-how li:not(:last-child)::after{content:"";position:absolute;left:15.5px;top:46px;height:calc(100% - 32px);width:1px;background:#CFCAFF}
.du-how p{margin-top:20px;color:var(--du-muted);font-size:15px}
@media (max-width:960px){.du-advantage{grid-template-columns:minmax(0,1fr);gap:48px}.du-how{position:static}}

/* driver types */
.du-types{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--du-line);border-left:1px solid var(--du-line)}
.du-type{padding:28px;border-right:1px solid var(--du-line);border-bottom:1px solid var(--du-line);display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;align-items:start}
.du-type svg{width:26px;height:26px;color:var(--du-brand)}
.du .du-type h3{font-size:18px}
.du-type p{color:var(--du-muted);font-size:15px;margin-top:4px}
@media (max-width:900px){.du-types{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.du-types{grid-template-columns:minmax(0,1fr)}}

/* comparison */
.du-compare{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.du-side{border:1px solid var(--du-line);border-radius:14px;padding:32px}
.du-side.du-ours{border:2px solid var(--du-brand);padding:31px}
.du .du-side h3{font-size:20px}
.du-side ul{list-style:none;margin:20px 0 0;padding:0}
.du-side li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--du-line);color:var(--du-ink)}
.du-side li svg{width:20px;height:20px;margin-top:2px}
.du-ours li svg{color:var(--du-good)}
.du-manual{background:var(--du-panel)}
.du .du-manual h3{color:var(--du-ink-2)}
.du-manual li{color:var(--du-muted)}
.du-manual li svg{color:var(--du-bad)}
@media (max-width:760px){.du-compare{grid-template-columns:minmax(0,1fr)}}

/* coming soon / pro */
.du-pro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.du-status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--du-ink-2);margin-bottom:16px}
.du-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#E8A317}
.du-pro-list{border-top:1px solid var(--du-line)}
.du .du-pro-list h3{font-size:25px;padding-top:28px}
.du-pro-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:22px 0;border-bottom:1px solid var(--du-line)}
.du .du-pro-item h4{font-size:18px}
.du-pro-item p{color:var(--du-ink-2);font-size:16px;margin-top:4px}
.du-tip{margin-top:24px;padding:18px 20px;background:var(--du-white);border:1px solid var(--du-line);border-radius:10px;font-weight:500;color:var(--du-ink)}
@media (max-width:900px){.du-pro{grid-template-columns:minmax(0,1fr);gap:36px}}

/* get it today: form */
.du-get{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.du-contact-lines{margin-top:28px;display:grid;gap:6px;color:var(--du-ink-2)}
.du-form{background:var(--du-white);border:1px solid var(--du-line);border-radius:14px;padding:32px;display:grid;gap:18px}
.du-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.du-field{display:grid;gap:7px}
.du .du-field label{display:block;margin:0;font-size:15px;font-weight:500;color:var(--du-ink)}
.du .du-field input,.du .du-field textarea{font:inherit;font-size:16px;color:var(--du-ink);background:var(--du-white);border:1px solid #C9D0DC;border-radius:8px;padding:11px 13px;width:100%}
.du .du-field input:focus,.du .du-field textarea:focus{outline:2px solid var(--du-brand);outline-offset:0;border-color:var(--du-brand);box-shadow:none}
.du-form .du-btn{justify-self:start}
.du-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:900px){.du-get{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:520px){.du-row{grid-template-columns:minmax(0,1fr)}}