/* Learn to Drive · Signage design (2026-09-23)
   German road-sign identity: traffic blue guide signs, traffic yellow plates, asphalt and lane markings.
   Loaded after every earlier layer (app → experience → polish → atlas → brand), so it only restyles;
   markup, routes and behaviour are unchanged. Fonts are self-hosted (SIL OFL): Barlow family,
   IBM Plex Sans Arabic for Arabic, and Sofia Sans / Sofia Sans Semi Condensed for Cyrillic (Russian). */

/* ---------- 1. Fonts ---------- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/vendor/fonts/barlow-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/barlow-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/barlow-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/vendor/fonts/barlow-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/barlow-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/barlow-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/barlow-semi-condensed-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/barlow-semi-condensed-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/barlow-semi-condensed-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/barlow-condensed-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/vendor/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* Cyrillic (Russian pages only: the stacks below name these faces under html[lang=ru]) */
@font-face{font-family:'Sofia Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/vendor/fonts/sofia-sans-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Sofia Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/sofia-sans-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Sofia Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/sofia-sans-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Sofia Sans Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/sofia-sans-semi-condensed-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Sofia Sans Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/vendor/fonts/sofia-sans-semi-condensed-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* ---------- 2. Tokens (the earlier layers read --bg, --ink, --lime …) ---------- */
:root{
  --sg-blue:#0B4EA2;--sg-blue-deep:#083A7A;--sg-blue-soft:#EAF1FB;--sg-blue-line:#BCD0EC;--sg-on-blue:#DCE6F5;
  --sg-yellow:#FFC20E;--sg-yellow-hover:#FFD24D;--sg-red:#C8102E;--sg-green:#1A7F4B;
  --sg-ink:#111418;--sg-ink2:#2A3036;--sg-muted:#4A525C;--sg-line:#D5DAE0;--sg-line2:#E6E9ED;
  --sg-concrete:#EEF0F2;--sg-bg:#F4F5F6;--sg-asphalt:#1E2227;--sg-night:#13202F;--sg-marking:#E8E8E2;--sg-post:#8B949E;
  --sg-font:'Barlow','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sg-display:'Barlow Semi Condensed','IBM Plex Sans Arabic','Barlow',system-ui,sans-serif;
  --sg-num:'Barlow Condensed','Barlow Semi Condensed',system-ui,sans-serif;
  --sg-gutter:max(20px,calc((100% - 1280px)/2));
  --bg:var(--sg-bg);--ink:var(--sg-ink);--muted:var(--sg-muted);--line:var(--sg-line);--panel:#fff;--panel2:var(--sg-concrete);
  --lime:var(--sg-blue);--accent:var(--sg-blue);--accent-soft:var(--sg-blue-soft);--radius:12px;--shadow:none;--warn:#8A5300;
  font-size:16px;color-scheme:light
}
html[lang=ar]{--sg-font:'IBM Plex Sans Arabic','Barlow',system-ui,sans-serif;--sg-display:'IBM Plex Sans Arabic','Barlow Semi Condensed',system-ui,sans-serif}
html[lang=ru]{--sg-font:'Barlow','Sofia Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--sg-display:'Barlow Semi Condensed','Sofia Sans Semi Condensed','Barlow','Sofia Sans',system-ui,sans-serif;--sg-num:'Barlow Condensed','Sofia Sans Semi Condensed',system-ui,sans-serif}
/* Russian, Polish, Romanian: long words (e.g. «конфиденциальности») must not push past narrow screens */
html:is([lang=ru],[lang=pl],[lang=ro]) :is(h1,h2,h3,h4){overflow-wrap:break-word}
html:is([lang=ru],[lang=pl],[lang=ro]) :is(h3,h4){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}
@media (max-width:359px){html:is([lang=ru],[lang=pl],[lang=ro]) .page-heading h1{font-size:24px}}
.conversion-page{--cv-ink:var(--sg-ink);--cv-muted:var(--sg-muted);--cv-blue:var(--sg-blue);--cv-line:var(--sg-line);--cv-lavender:var(--sg-blue-soft)}

/* ---------- 3. Base ---------- */
body,input,button,select,textarea{font-family:var(--sg-font)}
body{background:var(--sg-bg);color:var(--sg-ink);font-size:16px;line-height:1.55}
body[data-surface=marketing]{background:#fff}
h1,h2,h3,h4,summary,.side-title{font-family:var(--sg-display)}
h1,h2,h3{letter-spacing:0}
::selection{background:var(--sg-yellow);color:var(--sg-ink)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible,.button:focus-visible{outline:3px solid var(--sg-blue);outline-offset:3px}
.eyebrow{font-family:var(--sg-display);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-blue)}
[lang=ar] .eyebrow,[lang=ar] .pill,[lang=ar] .block-type,[lang=ar] .sidebar-label{letter-spacing:0}
.small{font-size:14px}
.muted{color:var(--sg-muted)}
strong,b{font-weight:700}

/* ---------- 4. Logo ---------- */
.sign-logo,.top-brand .site-logo,.sidebar .brand .site-logo,.footer-brand .site-logo{display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;max-width:none;line-height:1;color:var(--sg-ink);direction:ltr}
.sign-logo-mark{width:40px;height:40px;flex:none;display:block}
.sign-logo-text{font-family:'Barlow Semi Condensed',system-ui,sans-serif;font-weight:700;font-size:23px;letter-spacing:.005em;white-space:nowrap}
.sidebar .brand{padding-inline:8px;margin-bottom:30px}
.sidebar .brand small{font-family:var(--sg-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-muted);margin-top:12px}
.footer-brand .sign-logo{color:#fff}

/* ---------- 5. Top bar ---------- */
.topbar,body[data-surface=marketing] .topbar{background:#fff;border-bottom:5px solid var(--sg-yellow);backdrop-filter:none;box-shadow:none}
.topbar{height:72px}
body[data-surface=marketing] .topbar{height:78px}
.crumb{font-family:var(--sg-display);font-weight:600;font-size:17px;color:var(--sg-ink2);letter-spacing:0;text-transform:none}
.country-label{background:var(--sg-blue)!important;color:#fff!important;border:0!important;border-radius:4px!important;font-family:var(--sg-display);font-weight:700;font-size:13px!important;letter-spacing:.06em!important;padding:4px 7px!important}
body[data-surface=marketing] .marketing-nav a{font-family:var(--sg-display);font-weight:600;font-size:18px;color:var(--sg-ink2)}
body[data-surface=marketing] .marketing-nav a:hover,body[data-surface=marketing] .marketing-nav a[aria-current=page]{color:var(--sg-ink);box-shadow:inset 0 -4px 0 var(--sg-yellow)}
.language>span{font-family:var(--sg-display);font-weight:600;font-size:13px;color:var(--sg-muted)}
.language select,body[data-surface=marketing] .language select{min-height:40px;max-width:130px;padding:0 6px;border:2px solid var(--sg-ink);border-radius:6px;background:#fff;color:var(--sg-ink);font-family:var(--sg-display);font-weight:700;font-size:16px;cursor:pointer}
.profile-link{font-family:var(--sg-display);font-weight:700;font-size:17px;color:var(--sg-blue)}
.top-plan-link{font-family:var(--sg-display);font-weight:600;font-size:17px;color:var(--sg-ink2)}
.top-start{min-height:46px;padding:8px 18px;font-size:17px}

/* ---------- 6. Sidebar (learning pages) ---------- */
.sidebar{background:#fff;border-inline-end:1px solid var(--sg-line);box-shadow:none}
.sidebar-label{font-family:var(--sg-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sg-muted)}
.nav{font-family:var(--sg-display);font-weight:600;font-size:17px;color:var(--sg-ink2);border:2px solid transparent;border-radius:8px;min-height:46px}
.nav:hover{background:var(--sg-concrete);color:var(--sg-ink)}
.nav.active,.nav[aria-current=page]{background:var(--sg-blue);border-color:var(--sg-blue);color:#fff;box-shadow:inset 0 0 0 2px #fff}
.nav.active>span,.nav.active .nav-index,.nav[aria-current=page] .nav-index{color:#fff}
.nav-index{color:var(--sg-muted)!important}
.nav.active .nav-index{color:#fff!important}
.side-bottom{background:var(--sg-yellow);border:0;border-radius:10px;box-shadow:inset 0 0 0 3px var(--sg-ink);color:var(--sg-ink)}
.side-bottom p{color:var(--sg-ink2);font-size:14px}
.side-title{font-family:var(--sg-display);font-weight:700;font-size:20px;line-height:1.1;color:var(--sg-ink)}
.side-bottom .button{background:var(--sg-ink);border-color:var(--sg-ink);color:#fff;min-height:44px;font-size:16px}
.side-bottom .button:hover:not(:disabled){background:var(--sg-ink2)}
.side-bottom .side-account,.side-bottom a:not(.button){color:var(--sg-ink);font-weight:700;font-size:15px}

/* ---------- 7. Buttons, links, plates ---------- */
.button{align-items:center;justify-content:center;gap:12px;min-height:50px;padding:10px 20px;background:var(--sg-yellow);color:var(--sg-ink);border:3px solid var(--sg-ink);border-radius:8px;font-family:var(--sg-display);font-weight:700;font-size:18px;line-height:1.1;letter-spacing:.005em;box-shadow:none;transform:none;text-decoration:none}
.button:hover:not(:disabled){background:var(--sg-yellow-hover);color:var(--sg-ink);transform:none}
.button:active:not(:disabled){transform:translateY(1px)}
.button.secondary{background:#fff;color:var(--sg-ink);border-color:var(--sg-ink)}
.button.secondary:hover:not(:disabled){background:var(--sg-concrete)}
.button:disabled,.button[aria-disabled=true]{background:var(--sg-line2);border-color:#AEB6C0;color:var(--sg-muted);cursor:not-allowed}
.button span{font-size:inherit;font-weight:700}
.button:not(.secondary) .atlas-arrow,.button .atlas-arrow{filter:none}
.sg-arrow{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
[dir=rtl] .sg-arrow,[dir=rtl] .sg-dir-h{transform:scaleX(-1)}
.text-button,.quiet-link{font-family:var(--sg-display);font-weight:700;font-size:17px;color:var(--sg-blue);align-items:center;gap:8px;min-height:44px}
.text-button:hover,.quiet-link:hover{color:var(--sg-blue-deep);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pill,.badge{align-items:center;padding:3px 9px;background:#fff;color:var(--sg-ink);border:2px solid var(--sg-ink);border-radius:6px;font-family:var(--sg-display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.notice{gap:10px;background:var(--sg-blue-soft);border:2px solid var(--sg-blue-line);border-radius:10px;color:var(--sg-ink2);font-size:15px;line-height:1.6;padding:14px 18px}
.panel{background:#fff;border:2px solid var(--sg-line);border-radius:12px;box-shadow:none}

/* ---------- 8. Page headings: a blue guide sign ---------- */
.page-heading{position:relative;max-width:none;margin:10px 0 32px;padding:26px 32px 28px;background:var(--sg-blue);color:#fff;border:4px solid #fff;border-radius:16px;box-shadow:0 0 0 3px var(--sg-blue)}
.page-heading .eyebrow{color:var(--sg-on-blue)}
.page-heading h1{color:#fff;font-family:var(--sg-display);font-weight:700;font-size:clamp(32px,3.2vw,50px);line-height:1.04;letter-spacing:0;margin:10px 0 0;text-wrap:balance}
.page-heading:has(+ .question-reference) h1{font-size:clamp(26px,2.4vw,36px);line-height:1.15}
.page-heading>p{color:var(--sg-on-blue);font-size:18px;line-height:1.5;margin:12px 0 0;max-width:780px}
.page-heading a{color:#fff}
.lesson-back,.guide-breadcrumb a{font-family:var(--sg-display);font-weight:700;font-size:16px;color:var(--sg-blue)}
.lesson-back{align-items:center;min-height:40px}
.guide-breadcrumb{font-size:15px;color:var(--sg-muted)}
.section-title h2,.session-intro h2{font-family:var(--sg-display);font-weight:700;font-size:clamp(26px,2.4vw,34px);color:var(--sg-ink);letter-spacing:0}

/* ---------- 9. Cards ---------- */
.lesson-card,.topic-card,.guide-card,.sign-card,.city-card,.practice-choice,.journey-card{background:#fff;border:2px solid var(--sg-line);border-radius:12px;box-shadow:none;transform:none}
.lesson-card:hover,.topic-card:hover,.guide-card:hover,.sign-card:hover,.city-card:hover,.practice-choice:hover,.journey-card:hover{border-color:var(--sg-blue);background:#fff;transform:none}
.lesson-card h3,.topic-card h3,.sign-card h3,.guide-card h3,.city-card h3,.practice-choice h2{font-family:var(--sg-display);font-weight:700;font-size:21px;line-height:1.2;color:var(--sg-ink);letter-spacing:0}
.lesson-card h3,.topic-card h3,.sign-card h3,.guide-card h3,.city-card h3,.sg-family strong,.search-paths .atlas-entry h3,.sign-card p,.lesson-card p,.topic-card p,.guide-card p,.area-row,.lesson-signs span{hyphens:auto;overflow-wrap:anywhere}
.sign-detail p{font-size:17px;line-height:1.65;color:var(--sg-ink2)}
.sign-detail h2{font-family:var(--sg-display);font-weight:700;font-size:26px}
.lesson-card p,.topic-card p,.sign-card p,.guide-card p,.practice-choice p{font-size:15px;line-height:1.55;color:var(--sg-muted)}
.lesson-card small,.lesson-card .card-end,.topic-card small,.topic-card a{font-size:14px}
.lesson-card>small,.topic-card>small,.sign-card small{font-family:var(--sg-num);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--sg-blue)}
.sign-card>div,.lesson-signs a,.question-sign{background:var(--sg-concrete);border-radius:8px}
.sign-card>span,.card-end span,.choice-arrow{color:var(--sg-blue)}
.lesson-symbol,.guide-card .lesson-symbol{display:grid;place-items:center;background:var(--sg-blue);color:#fff;border-radius:8px;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--sg-blue)}
.practice-choice:first-child{background:#fff;border:3px solid var(--sg-ink)}
.practice-options .practice-choice .practice-count{font-family:var(--sg-num);font-weight:700;background:var(--sg-yellow);color:var(--sg-ink);border:0;border-radius:8px;box-shadow:inset 0 0 0 3px var(--sg-ink)}
.filter-tabs button{min-height:40px;padding:6px 14px;border:2px solid var(--sg-line);border-radius:6px;background:#fff;color:var(--sg-ink2);font-family:var(--sg-display);font-weight:600;font-size:16px;cursor:pointer}
.filter-tabs button:hover{border-color:var(--sg-ink)}
.filter-tabs button.active,.filter-tabs button[aria-pressed=true]{background:var(--sg-blue);border-color:var(--sg-blue);color:#fff}
.filter-tabs button small{font-family:var(--sg-num);font-size:14px;opacity:.85}
.sign-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.browser-toolbar select,input[type=search],input[type=email],input[type=text],input[type=number],input[type=date],textarea{border:2px solid var(--sg-line);border-radius:8px;background:#fff;color:var(--sg-ink);font-size:16px;min-height:46px}
.search-field{display:flex;align-items:center;gap:10px;padding:0 14px;background:#fff;border:2px solid var(--sg-line);border-radius:10px;box-shadow:none}
.search-field:focus-within{border-color:var(--sg-blue);box-shadow:0 0 0 3px var(--sg-blue-line)}
.search-field>span{font-size:20px;color:var(--sg-muted)}
.search-field input,.search-field input[type=search]{flex:1;border:0!important;box-shadow:none!important;background:transparent;min-height:50px;padding:0;outline:none}
.search-field input:focus,input:focus,select:focus,textarea:focus{border-color:var(--sg-blue);box-shadow:0 0 0 3px var(--sg-blue-line)}

/* ---------- 10. Lessons ---------- */
.learning-block{background:#fff;border:2px solid var(--sg-line);border-radius:12px;padding:26px 30px}
.learning-block h3{font-family:var(--sg-display);font-weight:700;font-size:26px;line-height:1.15;color:var(--sg-ink);letter-spacing:0;margin:14px 0 10px}
.learning-block p,.learning-block li{font-size:17px;line-height:1.7;color:var(--sg-ink2)}
.learning-block strong{color:var(--sg-ink)}
.block-type{display:inline-flex;align-items:center;padding:3px 10px;border-radius:6px;background:var(--sg-blue);color:#fff;font-family:var(--sg-display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.type-warning .block-type{background:#fff;color:var(--sg-red);box-shadow:inset 0 0 0 2px var(--sg-red)}
.type-tip .block-type,.type-check .block-type{background:var(--sg-yellow);color:var(--sg-ink);box-shadow:inset 0 0 0 2px var(--sg-ink)}
.type-scene .block-type,.type-signs .block-type,.type-simulator .block-type{background:var(--sg-ink);color:#fff}
.type-tip{background:#FFFAE6;border-color:#EFD37A}
.learning-block details{border:2px solid var(--sg-line);border-radius:10px;background:#fff}
.learning-block summary{font-family:var(--sg-display);font-weight:700;font-size:18px;color:var(--sg-blue)}
.lesson-toc{background:#fff;border:2px solid var(--sg-line);border-radius:12px}
.lesson-toc h2{font-family:var(--sg-display);font-weight:700;font-size:20px}
.lesson-toc ol{font-size:15px;color:var(--sg-muted)}
.lesson-toc a{color:var(--sg-ink2)}
.lesson-toc a:hover{color:var(--sg-blue)}
.lesson-signs a{border:2px solid transparent}
.lesson-signs a:hover{border-color:var(--sg-blue)}
.lesson-signs span{font-size:14px;color:var(--sg-ink2)}
.scene-figure{margin:18px 0 6px;padding:14px;background:var(--sg-concrete);border-radius:12px;text-align:center}
.scene-figure svg{width:100%;max-width:440px;height:auto;display:block;margin-inline:auto}
.comparison-grid>div{border:2px solid var(--sg-line);border-radius:10px}
.stopping-calc{border:2px solid var(--sg-line);border-radius:10px}

/* ---------- 11. Practice questions ---------- */
.question-card{border-radius:14px}
.question-card h2{font-family:var(--sg-display);font-weight:700;font-size:clamp(24px,2.3vw,32px);line-height:1.2;color:var(--sg-ink);letter-spacing:0}
.quiz-top{font-family:var(--sg-display);font-weight:600;font-size:16px;color:var(--sg-muted)}
.answer-option{border:2px solid var(--sg-line);border-radius:10px;background:#fff;color:var(--sg-ink2);font-size:17px;line-height:1.55;padding:16px 18px}
.answer-option:hover{border-color:var(--sg-ink)}
.answer-option>span{border:2px solid var(--sg-ink);border-radius:5px;width:24px;height:24px;min-width:24px}
.answer-option.selected,.answer-option:has(input:checked){border-color:var(--sg-blue);background:var(--sg-blue-soft);color:var(--sg-ink);box-shadow:inset 0 0 0 1px var(--sg-blue)}
.answer-option.good{border-color:var(--sg-green);background:#EAF6EF;color:var(--sg-ink)}
.answer-option.bad{border-color:var(--sg-red);background:#FDECEE;color:var(--sg-ink)}
.answer-explanation{border-radius:10px}
.progress-meter{accent-color:var(--sg-blue)}
.quiz-progress{height:10px;background:var(--sg-line2);border-radius:3px}
.quiz-progress i{background:var(--sg-blue);border-radius:3px}
.quiz-meta span{font-family:var(--sg-display);font-weight:600;font-size:16px;color:var(--sg-ink2)}
.quiz-meta small{display:block;font-family:var(--sg-num);font-size:14px;color:var(--sg-muted)}
.answer-explanation{border:2px solid var(--sg-blue-line);border-radius:10px;background:var(--sg-blue-soft)}
.answer-explanation p{font-size:16px;line-height:1.6;color:var(--sg-ink2)}

/* ---------- 12. Sign pages and the sign drill ---------- */
.sign-detail>img{background:var(--sg-concrete);border-radius:12px;padding:16px;box-sizing:border-box}
.sign-drill-question{font-family:var(--sg-display);font-weight:700;font-size:22px;margin:0}
.sign-drill-options{display:grid;gap:10px}
.sign-drill-option{min-height:52px;padding:10px 16px;text-align:start;border:2px solid var(--sg-ink);border-radius:10px;background:#fff;font-family:var(--sg-display);font-weight:600;font-size:18px;line-height:1.2;color:var(--sg-ink);cursor:pointer}
.sign-drill-option:hover:not(:disabled){background:var(--sg-concrete)}
.sign-drill-option.is-right{background:var(--sg-blue);border-color:var(--sg-blue);color:#fff}
.sign-drill-option.is-wrong{background:var(--sg-red);border-color:var(--sg-red);color:#fff}
.sign-drill-feedback{font-size:17px;margin:0}
.sign-drill-feedback a{color:var(--sg-blue);font-weight:700}
.area-row{border-radius:10px}
.area-row:hover{background:var(--sg-blue-soft)}

/* ---------- 13. FAQ ---------- */
.faq-section details{border:2px solid var(--sg-line);border-radius:10px;background:#fff;padding:0 18px;margin:0 0 10px}
.faq-section details[open]{border-color:var(--sg-ink)}
.faq-section summary{font-weight:700;font-size:20px;line-height:1.25;min-height:58px;display:flex;align-items:center;cursor:pointer;color:var(--sg-ink)}
.faq-section details p{font-size:17px;line-height:1.65;color:var(--sg-ink2);margin:0 0 18px}

/* ---------- 14. Footer: asphalt with a lane marking ---------- */
footer,body[data-surface=marketing] footer{position:relative;max-width:none;margin:56px 0 0;padding:46px max(24px,calc((100% - 1280px)/2)) 40px;background:var(--sg-asphalt);color:#C9CED6;border-top:0}
footer::before{content:"";position:absolute;inset-inline:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--sg-marking) 0 48px,transparent 48px 84px)}
footer p,footer small,.footer-note{color:#C9CED6}
footer p{font-size:15px;line-height:1.6;max-width:760px}
footer a{color:#fff}
footer a:hover{color:var(--sg-yellow)}
footer>div:not(.footer-brand){font-family:var(--sg-display);font-weight:600;font-size:16px}
footer .footer-brand>span,footer .footer-brand>span:last-child{max-width:none;color:#C9CED6;font-family:var(--sg-display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;line-height:1.4;text-align:start}
.footer-brand .sign-logo-text{color:#fff;font-weight:700;font-size:22px;letter-spacing:.005em}
footer>div:not(.footer-brand){display:flex;flex-wrap:wrap;gap:6px 24px}
[lang=ar] footer .footer-brand>span{letter-spacing:0}
body[data-surface=marketing] footer>div:not(.footer-brand) a{color:#fff}
body[data-page=home] footer{margin-top:0}

/* ---------- 15. Home: gantry hero ---------- */
body[data-page=home] main{max-width:none;padding:0}
.sg-hero{position:relative;isolation:isolate;overflow:hidden;margin:0;padding:104px var(--sg-gutter) 210px;background:var(--sg-night);color:#fff}
.sg-road{position:absolute;left:0;right:0;bottom:0;width:100%;height:56%;display:block;z-index:-2}
.sg-lane{animation:sg-lane 1.15s linear infinite}
@keyframes sg-lane{to{stroke-dashoffset:-152}}
.sg-gantry{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sg-beam{position:absolute;top:var(--beam,40px);left:3.5%;right:3.5%;height:18px;background:var(--sg-post);box-shadow:0 28px 0 -6px #7B848E}
.sg-beam::after{content:"";position:absolute;left:10px;right:10px;top:18px;height:10px;background:repeating-linear-gradient(90deg,#7B848E 0 5px,transparent 5px 72px)}
.sg-post{position:absolute;top:var(--beam,40px);bottom:0;left:4.5%;width:18px;background:#6E7781}
.sg-post-end{left:auto;right:4.5%}
.sg-hero-inner{position:relative;max-width:1280px;margin:0 auto}
.sg-sign-row{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:44px;align-items:start}
.sg-sign{position:relative;background:var(--sg-blue);color:#fff;border:5px solid #fff;border-radius:18px;box-shadow:0 0 0 4px var(--sg-blue),0 22px 44px -22px #000}
.sg-sign::before,.sg-sign::after{content:"";position:absolute;z-index:-1;top:-52px;height:48px;width:7px;inset-inline-start:22%;background:#6E7781}
.sg-sign::after{inset-inline-start:auto;inset-inline-end:22%}
.sg-sign-main{padding:28px 36px 32px}
.sg-kicker{display:flex;align-items:center;gap:12px;margin:0}
.sg-shield{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:38px;padding:0 6px;border:3px solid #fff;border-radius:8px;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:23px;line-height:1}
.sg-sign .eyebrow{color:var(--sg-on-blue);font-size:15px}
.sg-hero h1{margin:18px 0 0;color:#fff;font-family:var(--sg-display);font-weight:700;font-size:clamp(42px,4.8vw,70px);line-height:.98;letter-spacing:-.005em;max-width:none;text-wrap:balance}
.sg-hero h1 span{display:block;margin:6px 0 0;color:var(--sg-yellow);font-size:1em;letter-spacing:inherit}
[lang=ar] .sg-hero h1{line-height:1.25}
.sg-lead{max-width:640px;margin:18px 0 0;color:var(--sg-on-blue);font-size:19px;line-height:1.5}
.sg-board{display:flex;flex-direction:column;padding:8px 24px}
.sg-board a{display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 0;color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.55)}
.sg-board a:last-child{border-bottom:0}
.sg-board .sg-dir{width:36px;height:36px;flex:none}
.sg-board-label{flex:1;min-width:0;font-family:var(--sg-display);font-weight:600;font-size:24px;line-height:1.05;hyphens:auto}
.sg-board-label::first-letter{text-transform:uppercase}
.sg-board b{font-family:var(--sg-num);font-weight:700;font-size:36px;line-height:1}
.sg-board a:hover .sg-board-label{text-decoration:underline;text-decoration-color:var(--sg-yellow);text-decoration-thickness:3px;text-underline-offset:6px}
.sg-board a:focus-visible{outline-color:var(--sg-yellow)}
.sg-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.sg-hero .button{min-height:60px;padding:12px 26px;font-size:20px}
.sg-ghost{display:inline-flex;align-items:center;min-height:60px;padding:0 24px;border:3px solid #fff;border-radius:8px;color:#fff;font-family:var(--sg-display);font-weight:700;font-size:20px;text-decoration:none;box-sizing:border-box}
.sg-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.sg-hero a:focus-visible,.sg-hero .button:focus-visible{outline-color:var(--sg-yellow)}
.sg-hero .start-reassurance{margin:14px 0 0;color:var(--sg-on-blue);font-size:15px}

/* ---------- 16. Home: plates, context, signpost ---------- */
.sg-plates{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:28px var(--sg-gutter);background:#fff;border-bottom:2px solid var(--sg-line2)}
.sg-plate{margin:0;padding:10px 18px;border:3px solid var(--sg-ink);border-radius:8px;background:#fff;color:var(--sg-ink);font-family:var(--sg-display);font-weight:600;font-size:18px;line-height:1.3;text-align:center}
.sg-context{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;margin:0;padding:72px var(--sg-gutter);background:#fff;border:0}
.sg-context h2,.sg-route h2,.sg-section-head h2,.sg-quiz h2,.sg-studio h2,.sg-benefits h2,.sg-exits h2,.sg-account h2,.sg-faq h2{font-family:var(--sg-display);font-weight:700;font-size:clamp(32px,3.4vw,50px);line-height:1.03;letter-spacing:0;color:var(--sg-ink);max-width:none;margin:10px 0 0}
.sg-context p{margin:0 0 24px;font-size:18px;line-height:1.65;color:var(--sg-ink2);max-width:none}
.sg-context .sg-context-links{display:flex;flex-wrap:wrap;gap:12px}
.sg-arrow-plate{--tip:26px;position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:6px calc(var(--tip) + 14px) 6px 18px;box-sizing:border-box;background:var(--sg-yellow);color:var(--sg-ink);font-family:var(--sg-display);font-weight:700;font-size:20px;line-height:1.1;text-decoration:none;clip-path:polygon(0 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,0 100%)}
.sg-arrow-plate.sg-flip,[dir=rtl] .sg-arrow-plate{padding:6px 18px 6px calc(var(--tip) + 14px);clip-path:polygon(var(--tip) 0,100% 0,100% 100%,var(--tip) 100%,0 50%)}
[dir=rtl] .sg-arrow-plate.sg-flip{padding:6px calc(var(--tip) + 14px) 6px 18px;clip-path:polygon(0 0,calc(100% - var(--tip)) 0,100% 50%,calc(100% - var(--tip)) 100%,0 100%)}
.sg-arrow-plate b{font-family:var(--sg-num);font-weight:700;font-size:25px}
.sg-arrow-plate.sg-blue{background:var(--sg-blue);color:#fff}
.sg-arrow-plate:hover{background:var(--sg-yellow-hover);color:var(--sg-ink)}
.sg-arrow-plate.sg-blue:hover{background:var(--sg-blue-deep);color:#fff}
.sg-context .sg-arrow-plate{color:var(--sg-ink);text-decoration:none;font-size:19px}
.sg-p{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--sg-blue);color:#fff;font-family:'Barlow',sans-serif!important;font-size:21px!important}
.sg-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;align-items:center;padding:84px var(--sg-gutter);background:var(--sg-concrete)}
.sg-route .section-intro{max-width:580px;margin:16px 0 0;font-size:19px;line-height:1.55;color:var(--sg-ink2)}
.sg-dest{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:20px}
.sg-dest li{display:flex;gap:14px;align-items:flex-start}
.sg-dest-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#fff;border:2px solid var(--sg-line);color:var(--sg-blue)}
.sg-dest-icon svg{width:26px;height:26px}
.sg-dest a{font-family:var(--sg-display);font-weight:700;font-size:21px;line-height:1.2;color:var(--sg-ink);text-decoration:none}
.sg-dest a:hover{color:var(--sg-blue);text-decoration:underline;text-underline-offset:4px}
.sg-dest p{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--sg-muted)}
.sg-post-wrap{position:relative;display:flex;flex-direction:column;gap:16px;padding:14px 0 56px}
.sg-post-pole{position:absolute;top:0;bottom:0;inset-inline-start:50%;width:18px;margin-inline-start:-9px;background:var(--sg-post);border-radius:4px 4px 0 0}
.sg-post-wrap .sg-arrow-plate{width:calc(50% + 5px);margin-inline-start:calc(50% - 9px);align-self:flex-start}
.sg-post-wrap .sg-arrow-plate.sg-flip{margin-inline-start:4px}

/* ---------- 17. Home: sign families, quiz, parking, benefits ---------- */
.sg-families{padding:84px var(--sg-gutter);background:#fff}
.sg-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:34px}
.sg-section-head p{max-width:480px;margin:0;font-size:18px;line-height:1.55;color:var(--sg-muted)}
.sg-family-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sg-family{display:flex;flex-direction:column;padding:24px;background:#fff;border:2px solid var(--sg-line);border-radius:12px;color:var(--sg-ink);text-decoration:none;transition:border-color .15s}
.sg-family:hover{border-color:var(--sg-blue)}
.sg-family-signs{display:flex;gap:10px;align-items:center;min-height:68px}
.sg-family-signs svg{width:60px;height:60px}
.sg-family-de{align-self:flex-start;margin-top:18px;padding:2px 8px;border:2px solid var(--sg-ink);border-radius:5px;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:14px}
.sg-family strong{margin-top:12px;font-family:var(--sg-display);font-weight:700;font-size:24px;line-height:1.1}
.sg-family-signs+strong{margin-top:18px}
.sg-family-desc{margin-top:8px;font-size:16px;line-height:1.5;color:var(--sg-ink2)}
.sg-family-link{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--sg-display);font-weight:700;font-size:18px;color:var(--sg-blue)}
.sg-quiz{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:84px var(--sg-gutter);background:var(--sg-concrete)}
.sg-quiz-copy p{margin:16px 0 8px;font-size:18px;line-height:1.55;color:var(--sg-ink2)}
.sg-drill{min-height:380px;padding:28px;background:#fff;border:3px solid var(--sg-ink);border-radius:16px;box-sizing:border-box}
.sg-drill .sign-drill-stage,.sg-drill-static{display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:28px;row-gap:12px;align-items:start}
.sg-drill .sign-drill-stage>*,.sg-drill-static>*{grid-column:2}
.sg-drill .sign-drill-stage>p.small{grid-column:1/-1;margin:0;font-family:var(--sg-display);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--sg-muted)}
.sg-drill .sign-drill-image{grid-column:1;grid-row:2/span 5;width:170px;height:170px;padding:14px;box-sizing:border-box;object-fit:contain;background:var(--sg-concrete);border-radius:12px}
.sg-drill-static .sign-drill-image{grid-row:1/span 3}
.sg-drill .sign-drill-stage>.button{justify-self:start;margin-top:4px}
.sg-drill .sign-drill-score{font-family:var(--sg-display);font-weight:700;font-size:26px;margin:0;grid-column:1/-1}
.sg-drill .sign-drill-stage>.button.secondary{grid-column:1/-1}
.sg-studio{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;margin:0;padding:84px var(--sg-gutter);background:#fff;border:0}
.sg-studio p{max-width:460px;margin:16px 0 26px;font-size:18px;line-height:1.6;color:var(--sg-ink2)}
.sg-scene{position:relative;display:block;overflow:hidden;line-height:0;background:#3A4047;border:3px solid var(--sg-ink);border-radius:16px}
.sg-scene>svg,.sg-card-art>svg,.sg-scene-art{display:block;width:100%;height:auto}
.cv-signup-art.sg-scene{display:block;height:auto;margin-top:25px;border-radius:14px;object-fit:initial}
.sg-scene-art-wrap{display:block;width:100%}
.landing-visual .sg-scene,.drive-preview .sg-scene{border-radius:14px}
.sg-scene>span{position:absolute;bottom:12px;inset-inline-end:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;border-radius:6px;box-shadow:inset 0 0 0 2px var(--sg-ink);font-family:var(--sg-display);font-weight:600;font-size:14px;line-height:1.2;color:var(--sg-ink)}
.sg-benefits{padding:84px var(--sg-gutter);background:var(--sg-concrete)}
.sg-benefits .section-title{margin-bottom:30px}
.sg-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sg-benefit-grid article{padding:26px;background:#fff;border:2px solid var(--sg-line);border-radius:12px}
.sg-benefit-icon{width:56px;height:56px;display:block}
.sg-benefit-grid h3{margin:16px 0 10px;font-family:var(--sg-display);font-weight:700;font-size:24px;line-height:1.15;color:var(--sg-ink)}
.sg-benefit-grid p{margin:0;font-size:16px;line-height:1.6;color:var(--sg-ink2)}

/* ---------- 18. Home: exits, account, FAQ, final call ---------- */
.sg-exits{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;margin:0;padding:84px var(--sg-gutter);background:#fff;border:0;border-radius:0}
.sg-exits p{max-width:480px;margin:16px 0 26px;font-size:18px;line-height:1.6;color:var(--sg-ink2)}
.sg-exits ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.sg-exits li a{display:flex;align-items:center;gap:18px;padding:18px 22px;background:var(--sg-blue);color:#fff;border-radius:12px;box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--sg-blue);text-decoration:none}
.sg-exits li a:hover{background:var(--sg-blue-deep)}
.sg-exits li a:focus-visible{outline-color:var(--sg-yellow);outline-offset:5px}
.sg-exit-no{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:#fff;color:var(--sg-blue);font-family:var(--sg-num);font-weight:700;font-size:30px}
.sg-exit-text{flex:1;display:flex;flex-direction:column;gap:2px}
.sg-exit-text strong{font-family:var(--sg-display);font-weight:700;font-size:23px;line-height:1.15}
.sg-exit-text small{font-size:15px;color:var(--sg-on-blue)}
.sg-exits li .sg-arrow{width:26px;height:26px}
.sg-account{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:center;margin:0;padding:76px var(--sg-gutter);background:var(--sg-yellow);border-radius:0}
.sg-account .eyebrow{color:var(--sg-ink)}
.sg-account p{max-width:580px;margin:16px 0 0;font-size:18px;line-height:1.55;color:var(--sg-ink)}
.sg-account .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
.sg-account .button{background:var(--sg-ink);color:#fff;border-color:var(--sg-ink)}
.sg-account .button:hover:not(:disabled){background:var(--sg-ink2);color:#fff}
.sg-account .quiet-link{color:var(--sg-ink)}
.sg-account .button:focus-visible,.sg-account a:focus-visible{outline-color:var(--sg-ink)}
.sg-price-plate{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px;background:#fff;border-radius:14px;box-shadow:inset 0 0 0 3px var(--sg-ink);transform:none}
.sg-price-plate strong{font-family:var(--sg-num);font-weight:700;font-size:78px;line-height:1;color:var(--sg-ink)}
.sg-price-plate p{margin:0;font-size:16px;line-height:1.5;color:var(--sg-ink2)}
.sg-price-plate a{display:inline-flex;align-items:center;gap:8px;font-family:var(--sg-display);font-weight:700;font-size:18px;color:var(--sg-blue)}
.sg-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;margin:0;padding:84px var(--sg-gutter);background:#fff}
.sg-faq>div:first-child p{font-size:17px;line-height:1.6;color:var(--sg-muted)}
.sg-final{position:relative;display:flex;justify-content:space-between;align-items:center;gap:32px;margin:0;padding:64px var(--sg-gutter) 78px;background:var(--sg-night);color:#fff;border:0;border-radius:0}
.sg-final::after{content:"";position:absolute;inset-inline:0;bottom:26px;height:6px;background:repeating-linear-gradient(90deg,var(--sg-marking) 0 56px,transparent 56px 100px)}
.sg-final h2{margin:0;color:#fff;font-family:var(--sg-display);font-weight:700;font-size:clamp(30px,3vw,44px);line-height:1.05}
.sg-final p{margin:8px 0 0;color:#C9D3E0;font-size:18px}
.sg-final .button{background:var(--sg-yellow);color:var(--sg-ink);border-color:var(--sg-ink)}
.sg-final .button:hover:not(:disabled){background:var(--sg-yellow-hover);color:var(--sg-ink)}
.sg-final .button:focus-visible{outline-color:var(--sg-yellow)}
.sg-returning{margin:0;padding:28px var(--sg-gutter);background:var(--sg-blue-soft);border-bottom:2px solid var(--sg-blue-line)}
body[data-page=home] .search-paths{margin:0;padding:72px var(--sg-gutter);background:#fff;border-top:2px solid var(--sg-line2)}

/* ---------- 19. Landing pages and cards (drawn scenes) ---------- */
.search-paths .section-title h2{font-size:clamp(26px,2.4vw,34px)}
.search-paths .atlas-entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.search-paths .atlas-entry{display:flex;flex-direction:column;padding:0 0 18px;overflow:hidden;background:#fff;border:2px solid var(--sg-line);border-radius:12px;color:var(--sg-ink);text-decoration:none;transition:border-color .15s}
.search-paths .atlas-entry:hover{border-color:var(--sg-blue)}
.search-paths .atlas-entry:hover h3{color:var(--sg-blue)}
.sg-card-art{display:block;line-height:0;border-bottom:2px solid var(--sg-line)}
.search-paths .atlas-entry h3{display:flex;justify-content:space-between;gap:12px;margin:16px 18px 8px;font-family:var(--sg-display);font-weight:700;font-size:21px;line-height:1.2}
.search-paths .atlas-entry p{margin:0 18px;font-size:15px;line-height:1.55;color:var(--sg-muted);max-width:none}
.atlas-landing h1{font-family:var(--sg-display);font-weight:700;font-size:clamp(38px,4vw,58px);line-height:1;letter-spacing:0}
.atlas-landing h1 span{color:var(--sg-blue)}
.atlas-landing-copy>p{max-width:480px;font-size:18px;line-height:1.55;color:var(--sg-ink2)}
.atlas-landing .start-reassurance{font-size:15px;color:var(--sg-muted)}
.atlas-landing .atlas-scene.sg-scene{border-radius:16px}
.atlas-exercises a{font-family:var(--sg-display);font-weight:700;font-size:17px;color:var(--sg-blue);border-bottom:2px solid var(--sg-blue-line)}
.atlas-how li>span{width:40px;height:40px;border:0;border-radius:8px;background:var(--sg-blue);color:#fff;font-family:var(--sg-num);font-weight:700;font-size:22px;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--sg-blue)}
.atlas-how h3{font-family:var(--sg-display);font-weight:700;font-size:20px}
.atlas-how p{font-size:15px;line-height:1.6}
.answer-summary{background:#fff;border:2px solid var(--sg-line)}
.answer-summary p{font-size:17px;line-height:1.65;color:var(--sg-ink2)}
.content-credit{font-size:14px;color:var(--sg-muted)}

/* ---------- 20. Guides, licence tool, pricing, account ---------- */
.guide-article .learning-block{background:#fff}
.guide-toc{background:#fff;border:2px solid var(--sg-line);border-radius:12px}
.guide-takeaway,.guide-disclosure{border-radius:12px}
.licence-result{border-radius:12px}
.conversion-page .cv-button{border-radius:8px;box-shadow:none;font-family:var(--sg-display);font-weight:700}
.conversion-page .cv-plan.price-card,.cv-access-card{background:#fff;border:2px solid var(--sg-line);border-radius:14px}
.conversion-page .cv-plan-premium.price-card,.cv-purchase-intent.price-card{background:var(--sg-blue-soft);border-color:var(--sg-blue-line)}
.cv-kicker{color:var(--sg-blue)}
.cv-auth-tabs a[aria-current=page]{background:var(--sg-blue);color:#fff}
.cv-signup-steps li[aria-current=step]{color:var(--sg-blue);border-color:var(--sg-blue)}
.cv-comparison-table thead th:last-child,.cv-comparison-table td:last-child{background:var(--sg-blue-soft);color:var(--sg-ink)}
.cv-plan-symbol svg,.cv-plan-premium .cv-feature-list svg{stroke:var(--sg-blue)}
.conversion-page h1,.conversion-page h2,.conversion-page h3{font-family:var(--sg-display);font-weight:700;letter-spacing:0}
.conversion-page .button.cv-button:not(.secondary):not(:disabled){background:var(--sg-yellow);color:var(--sg-ink);border:3px solid var(--sg-ink)}
.conversion-page .button.cv-button.secondary:not(:disabled){background:#fff;color:var(--sg-ink);border:3px solid var(--sg-ink)}
.conversion-page .button.cv-button:disabled{background:var(--sg-line2);border:3px solid #AEB6C0;color:var(--sg-muted)}
.cv-learning-path .cv-path-number,.cv-learning-path li:nth-child(2) .cv-path-number,.cv-learning-path li:nth-child(3) .cv-path-number{background:var(--sg-blue);border-color:var(--sg-blue);color:#fff;border-radius:8px;box-shadow:inset 0 0 0 2px #fff;font-family:var(--sg-num);font-weight:700}
.cv-coming-badge{background:#fff;border:2px solid var(--sg-ink);color:var(--sg-ink);border-radius:6px;font-family:var(--sg-display);font-weight:700}
.licence-tools .small,.licence-field small,.licence-tool .small{font-size:14px}
.licence-field>span,.licence-field legend{font-family:var(--sg-display);font-weight:700;font-size:17px;color:var(--sg-ink)}

/* ---------- 21. Entry pages (language choice, 404) ---------- */
body:not([data-page]){background:var(--sg-night)}
body:not([data-page]) main{background:#fff;border:4px solid #fff;border-radius:18px;box-shadow:0 0 0 4px var(--sg-blue)}
body:not([data-page]) .brand .sign-logo-text{color:var(--sg-ink)}
body:not([data-page]) h1{font-family:var(--sg-display);font-weight:700;letter-spacing:0}
body:not([data-page]) .languages a{border:2px solid var(--sg-line);border-radius:10px;font-family:var(--sg-display);font-weight:700}
body:not([data-page]) .languages a:hover,body:not([data-page]) .languages a:focus-visible{border-color:var(--sg-blue);background:var(--sg-blue-soft)}
body:not([data-page]) .actions a{background:var(--sg-yellow);color:var(--sg-ink);border:3px solid var(--sg-ink);border-radius:8px;font-family:var(--sg-display);font-weight:700}

/* ---------- 22. Responsive ---------- */
@media (max-width:1150px){
  .sg-sign-row{grid-template-columns:minmax(0,1fr) 300px;gap:34px}
  .sg-board-label{font-size:21px}
  .sg-board a{gap:12px}
  .sg-board b{font-size:30px}
  .sg-route{grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:44px}
  .sg-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .sg-hero{padding-top:96px;padding-bottom:170px}
  .sg-sign-row{grid-template-columns:1fr;gap:32px}
  .sg-board::before,.sg-board::after{display:none}
  .sg-context,.sg-route,.sg-quiz,.sg-studio,.sg-exits,.sg-account,.sg-faq{grid-template-columns:1fr;gap:34px}
  .sg-section-head{flex-direction:column;align-items:flex-start;gap:14px}
  .sg-post-wrap{max-width:560px;width:100%;justify-self:center}
  .sg-benefit-grid{grid-template-columns:1fr}
  .sg-final{flex-direction:column;align-items:flex-start}
  .search-paths .atlas-entry-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .topbar{height:64px}
  body[data-surface=marketing] .topbar{height:66px}
  .sign-logo-mark{width:34px;height:34px}
  .sign-logo-text{font-size:20px}
  .menu,.topbar .menu{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:2px solid var(--sg-ink);border-radius:8px;background:#fff;color:var(--sg-ink);font-family:var(--sg-display);font-weight:700;font-size:15px!important}
  .menu svg{width:20px;height:20px}
  .language select,body[data-surface=marketing] .language select{min-height:40px;max-width:110px;font-size:15px}
  .page-heading{padding:20px 20px 22px;border-width:3px;margin:6px 0 24px}
  .page-heading h1{font-size:clamp(28px,8vw,36px)}
  .page-heading:has(+ .question-reference) h1{font-size:24px}
  .page-heading>p{font-size:16px}
  .learning-block{padding:20px}
  .learning-block h3{font-size:23px}
  .learning-block p,.learning-block li{font-size:16.5px}
  .mobile-shortcut{gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#fff;border-top:3px solid var(--sg-yellow);backdrop-filter:none;justify-content:space-around}
  .mobile-shortcut a{flex:1;flex-direction:column;gap:3px;min-height:54px;padding:6px 4px;border-radius:8px;color:var(--sg-ink2);font-family:var(--sg-display);font-weight:600;font-size:13px;line-height:1.1;text-align:center;white-space:nowrap}
  .mobile-shortcut a svg{width:22px;height:22px}
  .mobile-shortcut a[aria-current=page]{background:var(--sg-blue);color:#fff}
  .workspace{padding-bottom:0}
  footer,body[data-surface=marketing] footer{padding:40px 20px calc(112px + env(safe-area-inset-bottom));margin-top:40px}
  .sg-hero{padding:92px 16px 250px}
  .sg-road{height:300px}
  .sg-beam{left:0;right:0}
  .sg-post{left:10px}
  .sg-post-end{left:auto;right:10px}
  .sg-sign{border-width:4px;box-shadow:0 0 0 3px var(--sg-blue),0 18px 36px -18px #000}
  .sg-sign-main{padding:20px 20px 24px}
  .sg-sign::before,.sg-sign::after{top:-48px;height:44px;width:6px}
  .sg-hero h1{font-size:clamp(36px,10.5vw,46px)}
  .sg-lead{font-size:17px}
  .sg-board{padding:4px 18px}
  .sg-board a{min-height:64px}
  .sg-board-label{font-size:20px}
  .sg-board b{font-size:30px}
  .sg-hero-actions{flex-direction:column;align-items:stretch;margin-top:32px}
  .sg-hero .button,.sg-ghost{justify-content:center;min-height:58px;font-size:20px}
  .sg-plates{padding:22px 16px}
  .sg-plate{font-size:16px;padding:8px 12px}
  .sg-context,.sg-route,.sg-families,.sg-quiz,.sg-studio,.sg-benefits,.sg-exits,.sg-account,.sg-faq{padding:56px 16px}
  body[data-page=home] .search-paths{padding:56px 16px}
  .sg-final{padding:48px 16px 70px}
  .sg-family-grid{grid-template-columns:1fr}
  .sg-drill{padding:20px;min-height:0}
  .sg-drill .sign-drill-stage,.sg-drill-static{grid-template-columns:1fr}
  .sg-drill .sign-drill-stage>*,.sg-drill-static>*{grid-column:1}
  .sg-drill .sign-drill-image,.sg-drill-static .sign-drill-image{grid-row:auto;width:130px;height:130px;justify-self:center}
  .sg-arrow-plate{font-size:18px;min-height:50px}
  .sg-post-wrap .sg-arrow-plate{width:calc(50% + 40px)}
  .sg-post-wrap .sg-arrow-plate:not(.sg-flip){margin-inline-start:calc(50% - 44px)}
  .sg-price-plate strong{font-size:64px}
  .search-paths .atlas-entry-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .sg-post-wrap .sg-arrow-plate{width:calc(100% - 8px);margin-inline-start:4px!important}
  .sg-post-pole{inset-inline-start:auto;inset-inline-end:14px}
}
@media (prefers-reduced-motion:reduce){
  .sg-lane{animation:none}
  .button,.sg-family,.search-paths .atlas-entry{transition:none}
}
@media print{
  .sg-hero{background:#fff;color:#000;padding:20px 0}
  .sg-road,.sg-gantry{display:none}
  footer::before{display:none}
}

/* ---------- 23. Landing pages: theory test, parking and manual simulators ----------
   Same gantry as the home page; the right-hand panel is the page's drawn scene on a display
   housing. Below: glance plate, feature signs, the steps as a road with numbered exits,
   questions, and a night band with a blue board of related guides. */
body[data-template=landing] main{max-width:none;padding:0}
body[data-template=landing] footer{margin-top:0}
.sg-hero.sg-landing-hero{--beam:58px;padding:122px var(--sg-gutter) 190px}
.sg-crumbs{position:absolute;top:15px;inset-inline:var(--sg-gutter);z-index:1;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;line-height:28px;color:#AFC0D4}
.sg-crumbs a{color:#fff;font-family:var(--sg-display);font-weight:700;font-size:16px;text-decoration:none}
.sg-crumbs a:hover{color:var(--sg-yellow);text-decoration:underline;text-underline-offset:3px}
.sg-landing-hero .sg-sign-row{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:40px}
.sg-landing-hero h1{font-size:clamp(38px,4.1vw,60px);line-height:1.02;overflow-wrap:break-word;hyphens:auto}
[lang=ar] .sg-landing-hero h1{line-height:1.3}
.sg-landing-hero .sg-lead{font-size:19px}
.sg-sign-exits{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:2px solid rgba(255,255,255,.5)}
.sg-sign-exits a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px;border:2px solid #fff;border-radius:8px;color:#fff;font-family:var(--sg-display);font-weight:700;font-size:18px;line-height:1.1;text-decoration:none}
.sg-sign-exits a:hover{background:rgba(255,255,255,.14)}
.sg-sign-exits .sg-dir{width:22px;height:22px;flex:none}
.sg-display{position:relative;display:block;padding:10px 10px 0;background:#0A0D11;border-radius:14px;box-shadow:0 0 0 3px #6E7781,0 22px 44px -22px #000;line-height:0;color:var(--sg-ink);text-decoration:none}
.sg-display::before,.sg-display::after{content:"";position:absolute;z-index:-1;top:-53px;height:50px;width:7px;inset-inline-start:22%;background:#6E7781}
.sg-display::after{inset-inline-start:auto;inset-inline-end:22%}
.sg-display-screen{display:block;overflow:hidden;border-radius:6px}
.sg-display-screen>svg{display:block;width:100%;height:auto}
.sg-display-label{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 6px 11px;font-family:var(--sg-display);font-weight:600;font-size:15px;line-height:1.2;color:#C9D3E0}
.sg-display-label .sg-arrow{width:18px;height:18px}
.sg-display:hover .sg-display-label{color:var(--sg-yellow)}
.sg-display:focus-visible{outline:3px solid var(--sg-yellow);outline-offset:6px}
.sg-glance{padding:56px var(--sg-gutter) 44px;background:#fff}
.sg-glance-plate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;padding:28px 32px;background:#fff;border:3px solid var(--sg-ink);border-radius:14px}
.sg-glance-plate p{margin:10px 0 0;max-width:920px;font-size:19px;line-height:1.6;color:var(--sg-ink2)}
.sg-glance-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 28px;margin-top:24px}
.sg-glance .content-credit{margin:0}
.sg-jump{display:flex;flex-wrap:wrap;gap:10px}
.sg-jump a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;background:#fff;border:2px solid var(--sg-ink);border-radius:8px;color:var(--sg-ink);font-family:var(--sg-display);font-weight:700;font-size:16px;line-height:1.15;text-decoration:none}
.sg-jump a:hover{background:var(--sg-yellow)}
.sg-down{width:18px;height:18px;flex:none}
.sg-how{margin-top:40px}
.sg-how>h2{margin:0 0 20px;font-size:15px}
.sg-how-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sg-how-list li{display:flex;gap:16px;align-items:flex-start;padding:20px 22px 22px;background:var(--sg-blue);color:#fff;border-radius:12px;box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--sg-blue)}
.sg-how-list .sg-exit-no{width:46px;height:46px;font-size:27px}
.sg-how-list h3{margin:2px 0 6px;color:#fff;font-family:var(--sg-display);font-weight:700;font-size:22px;line-height:1.15}
.sg-how-list p{margin:0;color:var(--sg-on-blue);font-size:16px;line-height:1.5}
.sg-features{padding:84px var(--sg-gutter);background:var(--sg-concrete)}
.sg-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0}
.sg-feature-grid>div{padding:26px 26px 28px;background:#fff;border:2px solid var(--sg-line);border-radius:12px}
.sg-feature-grid dt{display:flex;flex-direction:column;align-items:flex-start;gap:18px;font-family:var(--sg-display);font-weight:700;font-size:24px;line-height:1.15;color:var(--sg-ink)}
.sg-feature-icon{width:60px;height:60px;display:block;flex:none}
.sg-feature-grid dd{margin:10px 0 0;font-size:16.5px;line-height:1.6;color:var(--sg-ink2)}
.sg-steps-head h2,.sg-landing-faq h2{margin:10px 0 0;font-family:var(--sg-display);font-weight:700;font-size:clamp(32px,3.4vw,50px);line-height:1.03;letter-spacing:0;color:var(--sg-ink)}
.sg-steps{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px;align-items:start;padding:84px var(--sg-gutter);background:#fff}
.sg-steps-head{position:sticky;top:112px}
.sg-step-route{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:20px}
.sg-step-route::before{content:"";position:absolute;top:-12px;bottom:-12px;inset-inline-start:15px;width:32px;background:var(--sg-asphalt);border-radius:6px}
.sg-step-route::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:29px;width:4px;background:repeating-linear-gradient(180deg,var(--sg-marking) 0 18px,transparent 18px 34px)}
.sg-step-route li{position:relative;z-index:1;display:flex;gap:24px;align-items:flex-start}
.sg-step-no{flex:none;display:grid;place-items:center;width:62px;height:62px;margin-top:8px;border-radius:10px;background:var(--sg-blue);color:#fff;font-family:var(--sg-num);font-weight:700;font-size:32px;line-height:1;box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--sg-blue)}
.sg-step-card{flex:1;min-width:0;padding:20px 24px 22px;background:#fff;border:2px solid var(--sg-line);border-radius:12px}
.sg-step-card h3{margin:0 0 8px;font-family:var(--sg-display);font-weight:700;font-size:23px;line-height:1.2;color:var(--sg-ink)}
.sg-step-card p{margin:0;font-size:16.5px;line-height:1.65;color:var(--sg-ink2)}
.sg-landing-faq{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px;align-items:start;padding:84px var(--sg-gutter);background:var(--sg-concrete)}
.sg-qa{display:grid;gap:14px}
.sg-qa section{padding:22px 26px 24px;background:#fff;border:2px solid var(--sg-line);border-radius:12px}
.sg-qa h3{display:flex;gap:14px;align-items:flex-start;margin:0;font-family:var(--sg-display);font-weight:700;font-size:22px;line-height:1.25;color:var(--sg-ink)}
.sg-qa h3::before{content:"?";content:"?"/"";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:7px;background:var(--sg-yellow);box-shadow:inset 0 0 0 2px var(--sg-ink);font-family:var(--sg-num);font-size:21px;line-height:1;color:var(--sg-ink)}
[dir=rtl] .sg-qa h3::before{content:"؟";content:"؟"/""}
.sg-qa p{margin:10px 0 0;padding-inline-start:46px;font-size:16.5px;line-height:1.65;color:var(--sg-ink2)}
.sg-landing-final{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:56px;align-items:center;padding:84px var(--sg-gutter) 116px}
.sg-landing-final .eyebrow{color:var(--sg-yellow)}
.sg-landing-final h2{margin:12px 0 0;font-size:clamp(30px,3.2vw,46px);line-height:1.06;text-wrap:balance}
.sg-landing-final p{margin:14px 0 28px}
.sg-related{display:flex;flex-direction:column;padding:12px 26px 14px}
.sg-related::before,.sg-related::after{display:none}
.sg-final .sg-related-title{margin:12px 0 6px;color:var(--sg-on-blue);font-family:var(--sg-display);font-weight:600;font-size:15px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
[lang=ar] .sg-final .sg-related-title{letter-spacing:0}
.sg-related a{display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 0;border-bottom:2px solid rgba(255,255,255,.5);color:#fff;font-family:var(--sg-display);font-weight:600;font-size:20px;line-height:1.2;text-decoration:none}
.sg-related a:last-child{border-bottom:0}
.sg-related .sg-dir{width:28px;height:28px;flex:none}
.sg-related a:hover span{text-decoration:underline;text-decoration-color:var(--sg-yellow);text-decoration-thickness:3px;text-underline-offset:5px}
.sg-related a:focus-visible{outline-color:var(--sg-yellow)}
@media (max-width:1150px){
  .sg-landing-hero .sg-sign-row{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:32px}
}
@media (max-width:900px){
  .sg-hero.sg-landing-hero{padding-bottom:170px}
  .sg-landing-hero .sg-sign-row{grid-template-columns:1fr;gap:28px}
  .sg-display{max-width:600px}
  .sg-display::before,.sg-display::after{display:none}
  .sg-glance-plate{grid-template-columns:1fr;gap:22px}
  .sg-glance-plate .button{justify-self:start}
  .sg-how-list,.sg-feature-grid{grid-template-columns:1fr}
  .sg-steps,.sg-landing-faq,.sg-landing-final{grid-template-columns:1fr;gap:30px}
  .sg-steps-head{position:static}
}
@media (max-width:700px){
  .sg-hero.sg-landing-hero{--beam:52px;padding:112px 16px 150px}
  .sg-crumbs{top:12px;inset-inline:16px;font-size:14px}
  .sg-crumbs a{font-size:15px}
  .sg-landing-hero h1{font-size:clamp(32px,9vw,42px)}
  .sg-landing-hero .sg-lead{font-size:17px}
  .sg-display{padding:6px 6px 0;border-radius:12px}
  .sg-display-label{padding:8px 4px 9px;font-size:14px}
  .sg-glance{padding:40px 16px 32px}
  .sg-glance-plate{padding:22px 20px}
  .sg-glance-plate p{font-size:17px}
  .sg-glance-plate .button{justify-self:stretch}
  .sg-features,.sg-steps,.sg-landing-faq{padding:56px 16px}
  .sg-landing-final{padding:56px 16px 90px}
  .sg-step-route li{gap:16px}
  .sg-step-no{width:48px;height:48px;font-size:26px}
  .sg-step-route::before{inset-inline-start:10px;width:28px}
  .sg-step-route::after{inset-inline-start:22px}
  .sg-step-card{padding:16px 18px 18px}
  .sg-step-card h3{font-size:21px}
  .sg-qa section{padding:18px 18px 20px}
  .sg-qa p{padding-inline-start:0}
  .sg-related{padding:8px 18px 10px}
  .sg-related a{font-size:18px;min-height:56px}
}
@media print{
  .sg-hero.sg-landing-hero{padding:20px 0}
  .sg-crumbs{position:static;color:#000}
  .sg-display,.sg-jump,.sg-step-route::before,.sg-step-route::after{display:none}
}

/* ---------- 24. Analytics consent panel (injected by lib/analytics.mjs) ---------- */
.analytics-consent{padding:24px 24px 22px;border:3px solid var(--sg-ink);border-radius:14px;background:#fff;color:var(--sg-ink);box-shadow:0 18px 50px -18px rgba(17,20,24,.45);font:16px/1.55 var(--sg-font)}
.analytics-consent h2{margin:0 0 8px;font-family:var(--sg-display);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:0;color:var(--sg-ink)}
.analytics-consent p{margin:0 0 10px;font-size:15px;color:var(--sg-ink2)}
.analytics-consent a{font-size:14px;font-weight:600;color:var(--sg-blue)}
.analytics-actions button{min-height:48px;border:3px solid var(--sg-ink);border-radius:8px;background:#fff;color:var(--sg-ink);font:700 16px/1.1 var(--sg-display)}
.analytics-actions button:hover{background:var(--sg-concrete)}
.analytics-actions button:last-child{background:var(--sg-yellow);color:var(--sg-ink)}
.analytics-actions button:last-child:hover{background:var(--sg-yellow-hover)}
.analytics-consent :focus-visible,.analytics-settings:focus-visible{outline-color:var(--sg-blue)}
footer .analytics-settings{font-family:var(--sg-font);font-size:14px;color:#C9CED6}
footer .analytics-settings:hover{color:var(--sg-yellow)}

/* ---------- 25. Free calculators (hub, four tools, cards) ----------
   Night hero with the page's blue sign and fact plates; the calculator is a console card that
   overlaps the hero; results use a validated three-colour series set (blue, amber, aqua). */
:root{--sg-series-1:#0B4EA2;--sg-series-2:#EDA100;--sg-series-3:#1BAF7A}
body[data-template=tool] main,body[data-page=tools] main{max-width:none;padding:0}
body[data-page=tools] footer{margin-top:0}
.sg-tool-page{background:var(--sg-concrete)}
.sg-tool-hero{position:relative;padding:20px var(--sg-gutter) 118px;background:var(--sg-night);color:#fff;overflow:hidden}
.sg-tool-hero::after{content:"";position:absolute;inset-inline:0;bottom:30px;height:6px;background:repeating-linear-gradient(90deg,var(--sg-marking) 0 56px,transparent 56px 100px);opacity:.85}
.sg-tools-hub-hero{padding-top:56px;padding-bottom:104px}
.sg-tool-hero .sg-crumbs{position:static;max-width:1280px;margin:0 auto 26px}
.sg-tool-hero-row{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:36px;align-items:center}
.sg-tool-page .sg-tool-hero::after{display:none}
.sg-tools-board{padding:8px 24px}
.sg-tools-board::before,.sg-tools-board::after{display:none}
.sg-tools-board .sg-board-label{font-size:22px}
.sg-tool-sign{padding:26px 32px 30px}
.sg-tool-sign::before,.sg-tool-sign::after{display:none}
.sg-tool-sign .sg-kicker .sg-tool-icon{width:44px;height:44px;flex:none}
.sg-tool-sign h1{margin:16px 0 0;color:#fff;font-family:var(--sg-display);font-weight:700;font-size:clamp(34px,3.6vw,54px);line-height:1.04;letter-spacing:0;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
[lang=ar] .sg-tool-sign h1{line-height:1.3}
.sg-tool-sign .sg-lead{font-size:18px;max-width:720px}
.sg-tool-facts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sg-tool-facts li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:14px 18px;background:#fff;border-radius:10px;box-shadow:inset 0 0 0 3px var(--sg-ink);color:var(--sg-ink)}
.sg-tool-facts b{flex:none;font-family:var(--sg-num);font-weight:700;font-size:28px;line-height:1}
.sg-tool-facts span{font-size:15px;line-height:1.35;color:var(--sg-ink2)}

/* Console */
.sg-console{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);width:min(1280px,calc(100% - 40px));margin:-78px auto 0;background:#fff;border:3px solid var(--sg-ink);border-radius:18px;box-shadow:0 30px 60px -30px rgba(17,20,24,.5)}
.sg-console-stopping{grid-template-columns:1fr}
.sg-controls{padding:28px 30px 24px;min-width:0}
.sg-results-col{min-width:0;background:var(--sg-concrete);border-inline-start:3px solid var(--sg-ink);border-start-end-radius:15px;border-end-end-radius:15px}
.sg-results{position:sticky;top:96px;min-width:0;padding:28px 30px}
.sg-console-stopping .sg-results-col{border-inline-start:0;border-top:3px solid var(--sg-ink);border-radius:0 0 15px 15px}
.sg-console-stopping .sg-results{position:static}
.sg-group{margin:0 0 20px;padding:0;border:0;min-width:0}
.sg-group+.sg-group{margin-top:30px}
.sg-group legend{padding:0;margin:0 0 12px;font-family:var(--sg-display);font-weight:700;font-size:20px;color:var(--sg-ink)}
.sg-field{margin:0 0 16px;min-width:0}
.sg-field>label,.sg-label{display:block;margin:0 0 8px;font-family:var(--sg-display);font-weight:600;font-size:17px;line-height:1.25;color:var(--sg-ink)}
.sg-hint{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--sg-muted)}
.sg-field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.sg-num,.sg-console input[type=number]{width:100%;min-height:50px;padding:0 14px;box-sizing:border-box;border:2px solid var(--sg-line);border-radius:8px;background:#fff;font-family:var(--sg-num);font-weight:700;font-size:21px;color:var(--sg-ink)}
.sg-num:hover{border-color:#AEB6C0}
.sg-chips{display:flex;flex-wrap:wrap;gap:8px}
.sg-chips-sm{margin-top:10px}
.sg-chip{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:6px 12px;border:2px solid var(--sg-line);border-radius:8px;background:#fff;font-family:var(--sg-display);font-weight:600;font-size:16px;line-height:1.1;color:var(--sg-ink2);cursor:pointer}
.sg-chip small{font-family:var(--sg-num);font-weight:700;font-size:14px;color:var(--sg-muted)}
.sg-chip:hover{border-color:var(--sg-ink)}
.sg-chip[aria-pressed=true]{background:var(--sg-blue);border-color:var(--sg-blue);color:#fff}
.sg-chip[aria-pressed=true] small{color:var(--sg-on-blue)}
.sg-range{display:flex;align-items:center;gap:14px}
.sg-range output{flex:none;min-width:60px;padding:5px 10px;box-sizing:border-box;text-align:center;background:var(--sg-ink);color:#fff;border-radius:6px;font-family:var(--sg-num);font-weight:700;font-size:22px;line-height:1.2}
.sg-console input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;width:100%;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;cursor:pointer}
.sg-console input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--sg-blue) var(--fill,50%),var(--sg-line) var(--fill,50%))}
[dir=rtl] .sg-console input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(270deg,var(--sg-blue) var(--fill,50%),var(--sg-line) var(--fill,50%))}
.sg-console input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border-radius:8px;background:var(--sg-yellow);border:3px solid var(--sg-ink)}
.sg-console input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:var(--sg-line)}
.sg-console input[type=range]::-moz-range-progress{height:10px;border-radius:5px;background:var(--sg-blue)}
.sg-console input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:8px;background:var(--sg-yellow);border:3px solid var(--sg-ink)}
.sg-console input[type=range]:focus-visible{outline:3px solid var(--sg-blue);outline-offset:4px}
.sg-fixed{list-style:none;margin:4px 0 0;padding:12px 14px;display:grid;gap:6px;background:var(--sg-concrete);border-radius:10px}
.sg-fixed li{display:flex;align-items:baseline;gap:8px;font-size:15px;color:var(--sg-ink2)}
.sg-fixed li span{flex:1}
.sg-fixed b{font-family:var(--sg-num);font-weight:700;font-size:18px;color:var(--sg-ink)}
.sg-fixed small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sg-muted)}
.sg-switch{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;cursor:pointer;font-weight:600;font-size:16px;color:var(--sg-ink)}
.sg-switch input{position:absolute;opacity:0;width:1px;height:1px}
.sg-switch-ui{position:relative;flex:none;width:48px;height:28px;border-radius:14px;background:#AEB6C0;transition:background .15s}
.sg-switch-ui::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s}
.sg-switch input:checked+.sg-switch-ui{background:var(--sg-blue)}
.sg-switch input:checked+.sg-switch-ui::after{transform:translateX(20px)}
[dir=rtl] .sg-switch input:checked+.sg-switch-ui::after{transform:translateX(-20px)}
.sg-switch input:focus-visible+.sg-switch-ui{outline:3px solid var(--sg-blue);outline-offset:3px}
.sg-reset{min-height:44px;padding:0;background:none;border:0;color:var(--sg-blue);font-family:var(--sg-display);font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.sg-live-total{display:none}
.sg-tip{position:absolute;z-index:5;max-width:260px;padding:7px 10px;background:var(--sg-ink);color:#fff;border-radius:6px;font-size:14px;font-weight:600;line-height:1.3;pointer-events:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}

/* Results */
.sg-total{display:flex;flex-direction:column;gap:4px}
.sg-total-label{font-family:var(--sg-display);font-weight:600;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--sg-muted)}
[lang=ar] .sg-total-label{letter-spacing:0}
.sg-total-value{font-family:var(--sg-font);font-weight:700;font-size:clamp(48px,5vw,70px);line-height:1;color:var(--sg-ink)}
.sg-total-note{font-size:15px;line-height:1.45;color:var(--sg-ink2)}
.sg-scale{position:relative;height:40px;margin:10px 0 14px;direction:ltr}
.sg-scale-track{position:absolute;left:0;right:0;top:12px;height:6px;border-radius:3px;background:#C9D0D8}
.sg-scale-avg{position:absolute;top:6px;left:var(--at);width:2px;height:18px;margin-left:-1px;background:var(--sg-muted)}
.sg-scale-you{position:absolute;top:0;left:var(--at);width:18px;height:20px;margin-left:-9px;background:var(--sg-ink);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);transition:left .25s}
.sg-scale-min,.sg-scale-max{position:absolute;bottom:0;font-family:var(--sg-num);font-weight:700;font-size:12px;color:var(--sg-muted)}
.sg-scale-min{left:0}
.sg-scale-max{right:0}
.sg-stack{display:flex;gap:2px;height:46px;margin:0 0 12px;direction:ltr}
.sg-seg{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 var(--w);min-width:4px;background:var(--c);transition:flex-basis .25s}
.sg-seg:first-child{border-radius:4px 0 0 4px}
.sg-seg:last-child{border-radius:0 4px 4px 0}
.sg-seg:only-child{border-radius:4px}
.sg-seg:focus-visible{outline:3px solid var(--sg-ink);outline-offset:2px}
.sg-seg-label{font-family:var(--sg-font);font-weight:700;font-size:14px;color:#fff}
.sg-seg.is-school .sg-seg-label,.sg-seg.is-official .sg-seg-label{color:var(--sg-ink)}
.sg-legend{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.sg-legend li{display:flex;align-items:center;gap:10px;font-size:15px}
.sg-legend i{flex:none;width:14px;height:14px;border-radius:4px;background:var(--c)}
.sg-legend span{flex:1;color:var(--sg-ink2)}
.sg-legend b{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:var(--sg-ink)}
.sg-insight{margin:12px 0;padding:12px 14px;background:#fff;border-inline-start:5px solid var(--sg-yellow);border-radius:6px;font-size:15.5px;line-height:1.5;color:var(--sg-ink2)}
.sg-breakdown{width:100%;margin-top:16px;border-collapse:collapse;font-size:15px}
.sg-breakdown caption{margin:0 0 6px;text-align:start;font-family:var(--sg-display);font-weight:700;font-size:18px;color:var(--sg-ink)}
.sg-breakdown th{padding:7px 0;text-align:start;font-weight:500;color:var(--sg-ink2);border-bottom:1px solid var(--sg-line)}
.sg-breakdown td{padding:7px 0 7px 12px;text-align:end;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--sg-ink);border-bottom:1px solid var(--sg-line)}
.sg-breakdown tbody th::before{content:"";display:inline-block;width:9px;height:9px;margin-inline-end:8px;border-radius:2px;background:var(--c,var(--sg-series-1))}
.sg-breakdown tr.is-school{--c:var(--sg-series-2)}
.sg-breakdown tr.is-official{--c:var(--sg-series-3)}
.sg-breakdown th small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sg-muted)}
.sg-breakdown tfoot th,.sg-breakdown tfoot td{padding-top:10px;border-bottom:0;font-family:var(--sg-display);font-weight:700;font-size:18px;color:var(--sg-ink)}

/* Error points */
.sg-steppers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sg-stepper{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 12px;background:var(--sg-concrete);border-radius:12px}
.sg-pts{display:grid;place-items:center;width:46px;height:46px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 3px var(--sg-ink);font-family:var(--sg-num);font-weight:700;font-size:26px;line-height:1;color:var(--sg-ink)}
.sg-stepper.is-five .sg-pts{background:var(--sg-yellow)}
.sg-stepper-label{font-family:var(--sg-display);font-weight:600;font-size:17px;line-height:1.2;color:var(--sg-ink)}
.sg-stepper-ctl{display:flex;align-items:center;gap:8px}
.sg-stepper-ctl button{display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--sg-ink);border-radius:8px;background:#fff;font-family:var(--sg-font);font-weight:700;font-size:24px;line-height:1;color:var(--sg-ink);cursor:pointer}
.sg-stepper-ctl button:hover:not(:disabled){background:var(--sg-yellow)}
.sg-stepper-ctl button:disabled{opacity:.35;cursor:default}
.sg-stepper-ctl output{min-width:34px;text-align:center;font-family:var(--sg-num);font-weight:700;font-size:28px;color:var(--sg-ink)}
.sg-meter{position:relative;max-width:340px;margin:0 auto 14px;direction:ltr}
.sg-meter svg{display:block;width:100%;height:auto}
.sg-meter-track{fill:none;stroke:#C9D0D8;stroke-width:16;stroke-linecap:round}
.sg-meter-fill{fill:none;stroke:var(--sg-blue);stroke-width:16;stroke-linecap:round}
.sg-meter.is-over .sg-meter-fill{stroke:var(--sg-red)}
.sg-meter-limit{stroke:var(--sg-ink);stroke-width:4}
.sg-meter text{font-family:var(--sg-num);font-weight:700;font-size:12px;fill:var(--sg-muted)}
.sg-meter-value{position:absolute;left:0;right:0;bottom:4%;text-align:center}
.sg-meter-value strong{display:block;font-family:var(--sg-font);font-weight:700;font-size:64px;line-height:1;color:var(--sg-ink)}
.sg-meter-value span{font-family:var(--sg-display);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--sg-muted)}
[lang=ar] .sg-meter-value span{letter-spacing:0}
.sg-verdict{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:#fff;border:3px solid var(--st,var(--sg-ink));border-radius:12px}
.sg-verdict.is-good,.sg-checks .is-good{--st:var(--sg-green)}
.sg-verdict.is-warn,.sg-checks .is-warn{--st:var(--warn)}
.sg-verdict.is-bad,.sg-checks .is-bad{--st:var(--sg-red)}
.sg-verdict-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--st);color:#fff;font-family:var(--sg-font);font-weight:700;font-size:22px;line-height:1}
.sg-verdict strong{display:block;font-family:var(--sg-display);font-weight:700;font-size:23px;line-height:1.2;color:var(--sg-ink)}
.sg-verdict p{margin:4px 0 0;font-size:15.5px;line-height:1.5;color:var(--sg-ink2)}
.sg-tool-extra{padding:26px var(--sg-gutter) 0}
.sg-tool-extra>*{max-width:1280px;margin-inline:auto}
.sg-quick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sg-quick li{padding:16px 18px;background:#fff;border:2px solid var(--sg-line);border-radius:12px}
.sg-quick b{display:block;font-family:var(--sg-display);font-weight:700;font-size:22px;line-height:1.15;color:var(--sg-ink)}
.sg-quick span{font-size:14px;color:var(--sg-muted)}
.sg-reform{padding:18px 22px;background:#fff;border:2px solid var(--sg-blue-line);border-inline-start:8px solid var(--sg-blue);border-radius:12px}
.sg-reform strong{font-family:var(--sg-display);font-weight:700;font-size:19px;color:var(--sg-ink)}
.sg-reform p{margin:6px 0 0;font-size:15.5px;line-height:1.6;color:var(--sg-ink2)}

/* Stopping distance */
.sg-controls-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:30px;align-items:start}
.sg-controls-row .sg-field{margin:0}
.sg-speed{display:flex;align-items:center;gap:18px}
.sg-speed-num{flex:none;display:flex;align-items:baseline;gap:6px;font-family:var(--sg-display);font-weight:700;font-size:18px;color:var(--sg-ink)}
.sg-speed-num input[type=number]{width:104px;min-height:58px;text-align:center;border:3px solid var(--sg-ink);border-radius:10px;font-size:32px}
.sg-limits{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sg-limit{display:grid;place-items:center;width:56px;height:56px;padding:0;border-radius:50%;background:#fff;border:7px solid var(--sg-red);box-shadow:0 0 0 2px #fff,0 0 0 3px #C9D0D8;font-family:var(--sg-num);font-weight:700;font-size:20px;line-height:1;color:var(--sg-ink);cursor:pointer;transition:transform .12s}
.sg-limit:hover{transform:scale(1.05)}
.sg-limit[aria-pressed=true]{transform:scale(1.08);box-shadow:0 0 0 2px #fff,0 0 0 5px var(--sg-ink)}
.sg-toggle{display:inline-flex;border:2px solid var(--sg-ink);border-radius:10px;overflow:hidden}
.sg-toggle button{min-height:48px;padding:0 16px;border:0;background:#fff;font-family:var(--sg-display);font-weight:700;font-size:16px;line-height:1.15;color:var(--sg-ink);cursor:pointer}
.sg-toggle button+button{border-inline-start:2px solid var(--sg-ink)}
.sg-toggle button[aria-pressed=true]{background:var(--sg-ink);color:#fff}
.sg-toggle button:focus-visible{outline:3px solid var(--sg-blue);outline-offset:-5px}
.sg-toggle-wide{display:flex;width:100%}
.sg-toggle-wide button{flex:1}
.sg-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:10px}
.sg-kpis>div{padding:14px 16px;background:#fff;border-radius:12px;border-top:6px solid var(--c)}
.sg-kpis .is-reaction{--c:var(--sg-series-2)}
.sg-kpis .is-braking{--c:var(--sg-series-1)}
.sg-kpis .is-total{--c:var(--sg-yellow);background:var(--sg-ink)}
.sg-kpis span{display:block;font-family:var(--sg-display);font-weight:600;font-size:14px;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;color:var(--sg-muted)}
[lang=ar] .sg-kpis span{letter-spacing:0}
.sg-kpis .is-total span{color:#C9D3E0}
.sg-kpis strong{display:block;margin-top:4px;font-family:var(--sg-font);font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.05;color:var(--sg-ink)}
.sg-kpis .is-total strong{color:#fff}
.sg-roadviz{padding-top:34px;margin:0 0 14px;direction:ltr}
.sg-roadviz-road{position:relative;height:100px;background:var(--sg-asphalt);border-radius:12px}
.sg-roadviz-road::before{content:"";position:absolute;left:12px;right:12px;top:14px;height:3px;background:repeating-linear-gradient(90deg,var(--sg-marking) 0 22px,transparent 22px 40px);opacity:.55}
.sg-roadviz-road::after{content:"";position:absolute;left:12px;right:12px;bottom:14px;height:3px;background:var(--sg-marking);opacity:.55}
.sg-roadviz-car{position:absolute;left:10px;top:31px;width:64px;height:30px}
.sg-roadviz-car svg{display:block;width:100%;height:100%}
.sg-roadviz-lane{position:absolute;left:78px;right:18px;top:0;bottom:0}
.sg-roadviz-seg{position:absolute;top:34px;height:26px;left:var(--from);width:var(--w);background:var(--c);transition:left .3s,width .3s}
.sg-roadviz-seg.is-reaction{--c:var(--sg-series-2);border-radius:3px 0 0 3px}
.sg-roadviz-seg.is-braking{--c:var(--sg-series-1);left:calc(var(--from) + 2px);width:calc(var(--w) - 2px);border-radius:0 3px 3px 0}
.sg-roadviz-seg em{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sg-num);font-weight:700;font-style:normal;font-size:14px;color:var(--sg-ink);white-space:nowrap}
.sg-roadviz-seg.is-braking em{color:#fff}
.sg-roadviz-stop{position:absolute;top:18px;bottom:18px;left:var(--at);width:6px;margin-left:-3px;border-radius:3px;background:repeating-linear-gradient(180deg,#fff 0 8px,var(--sg-red) 8px 16px);transition:left .3s}
.sg-roadviz-stop b{position:absolute;bottom:calc(100% + 26px);left:50%;transform:translateX(-50%);padding:3px 9px;white-space:nowrap;background:#fff;border-radius:6px;box-shadow:inset 0 0 0 2px var(--sg-ink);font-family:var(--sg-num);font-weight:700;font-size:16px;color:var(--sg-ink)}
.sg-roadviz-ticks{position:relative;height:22px;margin:6px 18px 0 78px}
.sg-roadviz-ticks span{position:absolute;left:var(--at);transform:translateX(-50%);font-family:var(--sg-num);font-weight:700;font-size:12px;color:var(--sg-muted)}
.sg-formulas{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.sg-formulas li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;background:#fff;border-radius:10px}
.sg-formulas span{font-family:var(--sg-display);font-weight:600;font-size:15px;color:var(--sg-ink2)}
.sg-formulas code{font-family:var(--sg-num);font-weight:700;font-size:17px;color:var(--sg-ink);background:none;padding:0;overflow-wrap:anywhere}
.sg-follow{padding:14px 16px;background:#fff;border:2px solid var(--sg-line);border-radius:12px}
.sg-follow strong{display:block;margin:0 0 8px;font-family:var(--sg-display);font-weight:700;font-size:17px;color:var(--sg-ink)}
.sg-follow ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sg-follow li{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--sg-ink2)}
.sg-follow b{font-family:var(--sg-num);font-weight:700;font-size:17px;color:var(--sg-ink);white-space:nowrap}

/* Readiness */
.sg-device-box{margin:14px 0 0;padding:14px 16px;background:var(--sg-blue-soft);border:2px solid var(--sg-blue-line);border-radius:10px}
.sg-device-box p{margin:0;font-size:15.5px;line-height:1.5;color:var(--sg-ink2)}
.sg-manual{margin-top:18px}
.sg-checks{list-style:none;margin:14px 0;padding:0;display:grid;gap:8px}
.sg-checks li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;background:#fff;border-radius:10px;border-inline-start:6px solid var(--st)}
.sg-check-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--st);color:#fff;font-family:var(--sg-font);font-weight:700;font-size:16px;line-height:1}
.sg-checks strong{display:block;font-family:var(--sg-display);font-weight:700;font-size:17px;line-height:1.2;color:var(--sg-ink)}
.sg-checks li div span{display:block;margin-top:2px;font-size:14px;line-height:1.35;color:var(--sg-muted)}
.sg-checks em{font-family:var(--sg-display);font-weight:700;font-style:normal;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--st);white-space:nowrap}
[lang=ar] .sg-checks em{letter-spacing:0}
.sg-ready-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sg-note{flex-basis:100%;margin:2px 0 0;font-size:14px;color:var(--sg-muted)}

/* Explanations, questions, sources, next steps */
.sg-tool-how{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px;margin-top:56px;padding:72px var(--sg-gutter);background:#fff}
.sg-tool-how h2,.sg-tool-more h2{margin:10px 0 0;font-family:var(--sg-display);font-weight:700;font-size:clamp(30px,3vw,44px);line-height:1.05;letter-spacing:0;color:var(--sg-ink)}
.sg-tool-how p{margin:0 0 16px;font-size:17.5px;line-height:1.7;color:var(--sg-ink2)}
.sg-tool-sources{padding:40px var(--sg-gutter);background:#fff;border-top:2px solid var(--sg-line2)}
.sg-tool-sources h2{margin:0;font-family:var(--sg-display);font-weight:700;font-size:21px;color:var(--sg-ink)}
.sg-tool-sources ul{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.sg-tool-sources a{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-weight:600;font-size:15.5px;color:var(--sg-blue)}
.sg-tool-sources .sg-dir{width:16px;height:16px;flex:none}
.sg-tool-sources p{margin:0;font-size:14px;color:var(--sg-muted)}
.sg-tool-more{padding:56px var(--sg-gutter);background:var(--sg-concrete)}
.sg-tool-more h2{margin:0 0 22px;font-size:clamp(26px,2.4vw,34px)}
.sg-tool-next{position:relative;padding:44px var(--sg-gutter) 80px;background:var(--sg-night);color:#fff}
.sg-tool-next::after{content:"";position:absolute;inset-inline:0;bottom:26px;height:6px;background:repeating-linear-gradient(90deg,var(--sg-marking) 0 56px,transparent 56px 100px)}
.sg-tool-next>div{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;max-width:1280px;margin:0 auto}
.sg-tool-next p{margin:0;color:#C9D3E0;font-size:16px}
.sg-tool-next .button:focus-visible{outline-color:var(--sg-yellow)}
.sg-tools-list{padding:44px var(--sg-gutter) 64px;background:var(--sg-concrete)}
.sg-tools-list>h2{margin:0 0 18px}

/* Tool cards (hub, home band, learning hubs) */
.sg-tool-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sg-tool-cards.is-compact{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sg-tool-card{display:flex;flex-direction:column;gap:10px;padding:22px;background:#fff;border:2px solid var(--sg-line);border-radius:14px;color:var(--sg-ink);text-decoration:none;transition:border-color .15s,transform .15s}
.sg-tool-card:hover{border-color:var(--sg-blue);transform:translateY(-2px)}
.sg-tool-card .sg-tool-icon{width:64px;height:64px}
.sg-tool-cards.is-compact .sg-tool-icon{width:48px;height:48px}
.sg-tool-card-teaser{align-self:flex-start;padding:3px 10px;border-radius:6px;background:var(--sg-yellow);font-family:var(--sg-display);font-weight:700;font-size:14px;line-height:1.3;color:var(--sg-ink)}
.sg-tool-card strong{font-family:var(--sg-display);font-weight:700;font-size:22px;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.sg-tool-card-text{font-size:15px;line-height:1.5;color:var(--sg-muted)}
.sg-tool-card-link{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font-family:var(--sg-display);font-weight:700;font-size:17px;color:var(--sg-blue)}
.sg-tools-band{padding:84px var(--sg-gutter);background:var(--sg-blue-soft)}
.sg-tools-inline .sg-tool-cards{margin-top:4px}

@media (max-width:1150px){
  .sg-tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-quick{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .sg-tool-hero-row{grid-template-columns:1fr;gap:20px}
  .sg-tool-facts{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .sg-console{grid-template-columns:1fr}
  .sg-results-col{border-inline-start:0;border-top:3px solid var(--sg-ink);border-radius:0 0 15px 15px}
  .sg-results{position:static}
  .sg-console-errors .sg-results-col,.sg-console-ready .sg-results-col{order:-1;border-top:0;border-bottom:3px solid var(--sg-ink);border-radius:15px 15px 0 0}
  .sg-live-total{position:sticky;top:74px;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-8px -10px 18px;padding:10px 14px;background:var(--sg-ink);color:#fff;border-radius:10px}
  .sg-live-total span{font-family:var(--sg-display);font-weight:600;font-size:14px}
  .sg-live-total strong{font-family:var(--sg-num);font-weight:700;font-size:24px;color:var(--sg-yellow)}
  .sg-controls-row{grid-template-columns:1fr;gap:22px}
  .sg-tool-how{grid-template-columns:1fr;gap:18px}
}
@media (max-width:700px){
  .sg-tool-hero{padding:16px 16px 104px}
  .sg-tools-hub-hero{padding-top:32px}
  .sg-tool-hero .sg-crumbs{margin-bottom:18px}
  .sg-tool-sign{padding:20px 20px 24px}
  .sg-tool-sign h1{font-size:clamp(30px,8.6vw,40px)}
  .sg-tool-sign .sg-lead{font-size:16.5px}
  .sg-tool-facts li{padding:10px 14px}
  .sg-tool-facts b{font-size:24px}
  .sg-console{width:calc(100% - 24px);margin-top:-80px;border-radius:14px}
  .sg-controls{padding:20px 16px 18px}
  .sg-results{padding:20px 16px}
  .sg-results-col,.sg-console-stopping .sg-results-col{border-radius:0 0 11px 11px}
  .sg-console-errors .sg-results-col,.sg-console-ready .sg-results-col{border-radius:11px 11px 0 0}
  .sg-live-total{top:68px;margin:-4px -4px 16px}
  .sg-field-row{grid-template-columns:1fr;gap:0}
  .sg-stepper{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .sg-stepper-ctl{grid-column:1/-1;justify-content:flex-end}
  .sg-kpis{grid-template-columns:1fr 1fr}
  .sg-kpis .is-total{grid-column:1/-1}
  .sg-formulas li{grid-template-columns:1fr;gap:4px}
  .sg-roadviz-road{height:88px}
  .sg-roadviz-car{top:27px;width:52px;height:24px}
  .sg-roadviz-lane{left:66px;right:14px}
  .sg-roadviz-ticks{margin-left:66px;margin-right:14px}
  .sg-roadviz-seg{top:30px;height:24px}
  .sg-quick{grid-template-columns:1fr 1fr}
  .sg-tool-cards{grid-template-columns:1fr}
  .sg-tool-how{margin-top:40px;padding:48px 16px}
  .sg-tool-sources,.sg-tool-more{padding:40px 16px}
  .sg-tool-next{padding:36px 16px 72px}
  .sg-tools-band{padding:56px 16px}
  .sg-tools-list{padding:32px 16px 48px}
}
@media (prefers-reduced-motion:reduce){
  .sg-seg,.sg-roadviz-seg,.sg-roadviz-stop,.sg-scale-you,.sg-tool-card,.sg-limit,.sg-switch-ui,.sg-switch-ui::after{transition:none}
}
@media print{
  .sg-tool-hero{background:#fff;color:#000;padding:10px 0}
  .sg-tool-hero::after,.sg-tool-next,.sg-tool-more{display:none}
  .sg-console{margin:10px 0;box-shadow:none}
}