/* ==========================================================================
   Das Experten — dasexperten.de marketing page
   Implements ui_kits/marketing from the Das Experten Design System.
   Tokens come from colors_and_type.css; this file is layout only.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--paper);overflow-x:hidden}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto}

.skip{position:absolute;left:-999px;top:0;background:var(--brand-schwarz);color:var(--paper);padding:10px 16px;z-index:200}
.skip:focus{left:0}

/* ---------- top ribbon ---------- */
.ribbon{background:var(--brand-schwarz);color:var(--paper);padding:8px 32px;font:600 11px/1 var(--font-narrow);letter-spacing:.16em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px}
.ribbon>span{opacity:.9;text-align:center;max-width:100%}
.ribbon .lang{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:100%;row-gap:5px}
.ribbon .lang a{color:var(--paper);opacity:.55;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.ribbon .lang a:hover{opacity:.85}
.ribbon .lang a.active{opacity:1;border-bottom:1.5px solid var(--brand-gold);padding-bottom:3px}
.ribbon .lang .flag{width:16px;height:16px;border-radius:50%;display:block;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* ---------- nav ---------- */
nav.top{display:flex;align-items:center;gap:22px;padding:16px 32px;background:rgba(251,250,246,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border-hairline)}
nav.top .logo{display:flex;align-items:center;flex:0 0 auto}
nav.top .logo img{height:34px;width:auto;max-width:none;flex:0 0 auto}
nav.top .links{display:flex;gap:10px;flex:1}
nav.top a.link{font:600 12px/1 var(--font-body);color:var(--fg-1);text-decoration:none;position:relative;padding:6px 0}
nav.top a.link::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand-rot);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-standard)}
nav.top a.link.active::after,nav.top a.link:hover::after{transform:scaleX(1)}
nav.top .right{display:flex;gap:10px;align-items:center}
.iconbtn{width:44px;height:44px;border-radius:var(--radius-sm);display:grid;place-items:center;background:transparent;border:none;cursor:pointer;font-size:16px;color:var(--fg-1);touch-action:manipulation}
.iconbtn:hover{background:var(--bone)}
.cta{font:700 13px/1 var(--font-display);padding:11px 15px;border-radius:var(--radius-sm);background:var(--brand-rot);color:var(--paper);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:background var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);touch-action:manipulation}
.cta:hover{background:var(--cta-hover);transform:translateY(-1px)}
a.link:focus-visible,button:focus-visible,.cta:focus-visible,.pcard:focus-visible,.ribbon .lang a:focus-visible{outline:2px solid var(--brand-rot);outline-offset:3px;border-radius:2px}
.convert .cta-dark:focus-visible{outline-color:var(--brand-gold)}
.cta-ghost{background:transparent;color:var(--fg-1);border:1px solid var(--border-strong)}
.cta-ghost:hover{background:var(--bone);transform:translateY(-1px)}
.badge-count{background:rgba(255,255,255,.2);padding:2px 6px;border-radius:2px;font-size:10px}
.burger{display:none;background:none;border:none;font-size:24px;color:var(--fg-1);cursor:pointer;line-height:1;width:44px;height:44px;touch-action:manipulation}

/* ---------- HERO ---------- */
.hero{padding:64px 32px 72px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative}
.hero .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.hero .eyebrow .dx-ribbon-rule{width:48px}
/* Global: the German-flag rule sits inside every .eyebrow; give it a width so it always renders
   (base .dx-ribbon-rule is width:0, so uncontextualized eyebrows lost the flag). */
.eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eyebrow .dx-ribbon-rule{width:48px;flex:0 0 48px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;height:6px;overflow:hidden;border-radius:2px}
.eyebrow .dx-ribbon-rule>i{min-width:0;height:6px}
.eyebrow .dx-eyebrow{min-width:0;overflow-wrap:break-word}
/* Long words (esp. German compounds) must break inside the frame, never spill it. */
h1,h2,h3,h4,p,li,.lead,.gd-lead,.gd-intro,.kicker,.dx-eyebrow,.h2{overflow-wrap:break-word}
:lang(de) h1,:lang(de) h2,:lang(de) .h2,:lang(de) .hero h1,:lang(de) .page-hero h1{hyphens:auto}
.hero h1{font:900 clamp(46px,7vw,104px)/.95 var(--font-display);letter-spacing:-.035em;margin:0 0 24px;color:var(--fg-1)}
.hero h1 em{font-style:normal;color:var(--brand-rot)}
.hero .lede{font:400 19px/1.5 var(--font-body);color:var(--fg-2);max-width:52ch;margin-bottom:32px}
.hero .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero .actions .cta{padding:14px 20px;font-size:14px}
.hero .trust{display:flex;gap:24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--border-hairline);flex-wrap:wrap}
.trust-item{display:flex;flex-direction:column;gap:4px}
.trust-item .n{font:700 28px/1 var(--font-accent);color:var(--fg-1)}
.trust-item .l{font:600 10px/1.2 var(--font-narrow);text-transform:uppercase;letter-spacing:.16em;color:var(--fg-3)}
.hero-visual{position:relative;aspect-ratio:4/5;background:#FBFAF6;border-radius:var(--radius-lg);overflow:hidden}
.hero-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,0) 0%,rgba(13,25,158,.04) 80%)}
.hero-visual .stripe{position:absolute;top:24px;left:0;right:0;height:4px;background:#0D199E}
.hero-visual .pkg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-visual .badge{position:absolute;top:28px;right:28px;width:92px;height:92px;border-radius:50%;background:var(--brand-gold);display:grid;place-items:center;transform:rotate(-8deg);padding:8px;text-align:center;font:900 11px/1.15 var(--font-display);letter-spacing:.04em;color:var(--brand-schwarz-ink);text-transform:uppercase;z-index:2}

/* ---------- VILLAIN ---------- */
.villain{background:var(--brand-schwarz);color:var(--paper);padding:96px 32px}
.villain .inner{display:grid;grid-template-columns:.4fr .6fr;gap:48px;align-items:start}
.gold-eyebrow{color:var(--brand-gold);margin-bottom:20px}
.villain .lead{font:900 clamp(30px,4vw,44px)/1.05 var(--font-display);letter-spacing:-.03em;color:var(--paper)}
.villain .lead em{font-style:italic;font-family:var(--font-accent);font-weight:500;color:var(--brand-gold)}
.villain ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
.villain li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.32)}
.villain li:last-child{border-bottom:none}
.villain .x{width:36px;height:36px;border-radius:6px;background:var(--brand-rot);display:grid;place-items:center;font:900 18px/1 var(--font-display);color:var(--paper)}
.villain .claim{font:700 19px/1.3 var(--font-body);color:var(--paper);margin-bottom:4px}
.villain .claim strong{color:var(--brand-gold)}
.villain .expl{font:400 14px/1.5 var(--font-body);color:var(--stone-200)}

/* ---------- SCIENCE ---------- */
.science{padding:96px 32px;background:var(--paper)}
.science .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:32px}
.science h2{font:900 clamp(36px,5vw,56px)/1.02 var(--font-display);letter-spacing:-.03em;margin:0;max-width:12ch}
.science h2 em{font-style:italic;font-family:var(--font-accent);font-weight:500}
.science .rail{font:400 16px/1.55 var(--font-body);color:var(--fg-2);max-width:40ch}
.science .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sci-card{background:var(--paper-raised);border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-hairline);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.sci-card .num{font:700 72px/1 var(--font-accent);color:var(--brand-rot);letter-spacing:-.02em}
.sci-card h3{font:800 22px/1.15 var(--font-display);letter-spacing:-.015em;margin:0}
.sci-card p{font:400 14px/1.5 var(--font-body);color:var(--fg-2);margin:0}
.sci-card .ing{margin-top:auto;padding-top:14px;border-top:1px solid var(--border-hairline);font:500 11px/1.5 var(--font-mono);color:var(--fg-3)}

/* ---------- SHOP ---------- */
.shop{padding:96px 32px;background:var(--paper-sunk)}
.shop .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.shop h2{font:900 clamp(32px,4vw,44px)/1 var(--font-display);letter-spacing:-.03em;margin:0}
.shop h2 em{font-style:italic;font-family:var(--font-accent);font-weight:500;color:var(--brand-rot)}
.shop .view{font:600 13px/1 var(--font-body);color:var(--fg-1);text-decoration:none;border-bottom:2px solid var(--brand-rot);padding-bottom:3px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{background:var(--paper-raised);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-hairline);position:relative;cursor:pointer;transition:all var(--dur-base) var(--ease-standard);text-decoration:none;color:inherit;display:block}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.pcard .strip{height:4px}
.pcard .shot{aspect-ratio:1/1;background:#FBFAF6;overflow:hidden}
.pcard .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-standard)}
.pcard:hover .shot img{transform:scale(1.035)}
.pcard .de em{font-style:italic;color:var(--fg-1)}
.pcard .more{font:700 11px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.12em;color:var(--brand-rot)}
.pcard .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.pcard .line{font:700 14px/1 'Eras Bold ITC',var(--font-display);letter-spacing:0}
.pcard .nm{font:700 21px/1.1 var(--font-product);letter-spacing:0;margin-top:4px;text-transform:lowercase}
.pn{font-family:var(--font-product);font-weight:700;letter-spacing:0;text-transform:lowercase}
.pcard .de{font:400 12px/1.4 var(--font-body);color:var(--fg-2);margin-top:4px}
.pcard .foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-hairline)}
.pcard .price{font:700 16px/1 var(--font-accent)}
.pcard .vol{font:500 10px/1 var(--font-mono);color:var(--fg-3)}
.pcard.new::after{content:'New';position:absolute;top:12px;right:12px;background:var(--brand-schwarz);color:var(--paper);font:700 9px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.18em;padding:6px 10px;border-radius:3px;z-index:2}

/* ---------- QUOTE ---------- */
.quote{padding:96px 32px;text-align:center}
.quote .dx-ribbon-rule{width:80px;margin:0 auto 28px}
.quote blockquote{font:italic 500 clamp(28px,4vw,40px)/1.25 var(--font-accent);color:var(--fg-1);margin:0 auto;max-width:22ch;letter-spacing:-.01em}
.quote cite{display:block;margin-top:28px;font:600 11px/1.4 var(--font-narrow);text-transform:uppercase;letter-spacing:.22em;color:var(--fg-3);font-style:normal}

/* ---------- shared content primitives (brushes + subpages) ---------- */
.h2{font:900 clamp(30px,4.4vw,52px)/1.04 var(--font-display);letter-spacing:-.03em;margin:0;color:var(--fg-1)}
.h2 em{font-style:italic;font-family:var(--font-accent);font-weight:500;color:var(--brand-rot)}
.kicker{font:700 11px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.2em;color:var(--brand-rot);margin:0 0 14px}
.lead{font:400 18px/1.6 var(--font-body);color:var(--fg-2);max-width:60ch}

/* ---------- BRUSHES / in-use band ---------- */
.brushes{padding:clamp(64px,9vw,110px) 32px;background:var(--paper)}
.brushes-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.brushes-media{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-raised)}
.brushes-media img{width:100%;height:100%;object-fit:cover;display:block}
.brushes-copy .h2{margin-bottom:18px}
.brushes-copy .lead{margin-bottom:24px}
.brush-list{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.brush-list li{border-left:2px solid var(--brand-schwarz);padding:4px 0 4px 14px}
.brush-list strong{display:block;font:700 16px/1.2 var(--font-product);letter-spacing:0;text-transform:lowercase}
.brush-list span{font:500 12px/1.3 var(--font-narrow);color:var(--fg-3);text-transform:uppercase;letter-spacing:.08em}

/* ---------- subpage primitives ---------- */
.page-hero{padding:clamp(56px,8vw,104px) 32px clamp(32px,5vw,56px);background:var(--paper);max-width:1280px;margin:0 auto}
.page-hero .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.page-hero .eyebrow .dx-ribbon-rule{width:48px}
.page-hero h1{font:900 clamp(38px,6vw,76px)/1.0 var(--font-display);letter-spacing:-.035em;margin:0 0 20px;max-width:18ch}
.page-hero h1 em{font-style:normal;color:var(--brand-rot)}
.page-hero .lead{font-size:clamp(17px,2vw,21px);max-width:56ch}
/* Guide pages (/best/*): match the site's page-hero typography — big display H1 + eyebrow,
   left-aligned — instead of the small default heading the .gd block fell back to. */
.gd h1{font:900 clamp(38px,6vw,76px)/1.0 var(--font-display);letter-spacing:-.035em;margin:0 0 20px;max-width:22ch}
.gd h1 em{font-style:normal;color:var(--brand-rot)}
.gd .eyebrow{margin-bottom:16px}
.section-band{padding:clamp(48px,7vw,88px) 32px;max-width:1280px;margin:0 auto}
.section-band.alt{background:var(--paper-sunk);max-width:none}
.section-band.alt > .inner{max-width:1280px;margin:0 auto}
.section-band.dark{background:var(--brand-schwarz);color:var(--paper);max-width:none}
.section-band.dark > .inner{max-width:1280px;margin:0 auto}
.section-band.dark .h2{color:var(--paper)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.feature{background:var(--paper-raised);border-radius:var(--radius-md);padding:28px;box-shadow:var(--shadow-hairline)}
.feature .n{font:700 56px/1 var(--font-accent);color:var(--brand-rot);letter-spacing:-.02em}
.feature h3{font:800 20px/1.15 var(--font-display);letter-spacing:-.015em;margin:14px 0 8px}
.feature p{font:400 14px/1.55 var(--font-body);color:var(--fg-2);margin:0}
.feature .ing{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-hairline);font:500 11px/1.5 var(--font-mono);color:var(--fg-3)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;margin-top:8px}
.split .media{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-raised)}
.split .media img{width:100%;height:100%;object-fit:cover;display:block}
.split p+p{margin-top:1rem}
.reach-grid{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.reach-grid li{border-left:2px solid var(--brand-rot);padding:6px 0 6px 16px}
.reach-grid strong{display:block;font:800 16px/1.2 var(--font-display)}
.reach-grid span{font:500 12px/1.4 var(--font-narrow);color:var(--fg-3);text-transform:uppercase;letter-spacing:.08em}
.steps{counter-reset:s;list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;padding-bottom:16px;border-bottom:1px solid var(--border-hairline)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:700 22px/1 var(--font-accent);color:var(--brand-rot)}
.steps strong{font:800 17px/1.3 var(--font-display)}
.steps p{font:400 14px/1.55 var(--font-body);color:var(--fg-2);margin:4px 0 0}
.section-band.dark .steps p{color:rgba(251,250,246,.72)}
.section-band.dark .steps li{border-bottom-color:rgba(251,250,246,.14)}

/* ---------- WORLD carousel ---------- */
.world{background:var(--brand-schwarz);color:var(--paper);padding:clamp(64px,9vw,104px) 0}
.world .world-head{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.world .kicker{color:var(--brand-gold)}
.world h2{font:900 clamp(28px,4vw,46px)/1.05 var(--font-display);letter-spacing:-.03em;margin:0;color:var(--paper);max-width:18ch}
.world .world-sub{font:400 15px/1.6 var(--font-body);color:var(--stone-200);max-width:42ch;margin:0}
.world-nav{display:flex;gap:10px;margin-top:4px}
.world-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:var(--paper);font-size:18px;cursor:pointer;transition:all var(--dur-base) var(--ease-standard)}
.world-nav button:hover{background:var(--brand-rot);border-color:var(--brand-rot)}
.world-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:34px 32px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.world-track::-webkit-scrollbar{display:none}
.world-slide{flex:0 0 clamp(270px,80vw,380px);scroll-snap-align:center;position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-float)}
.world-slide img{width:100%;height:100%;object-fit:cover;display:block}
.world-slide .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,19,.85) 8%,rgba(20,16,19,.25) 48%,transparent 70%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.world-slide .loc{font:700 10px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.2em;color:var(--brand-gold);margin-bottom:10px}
.world-slide .wname{font:700 30px/1 var(--font-product);text-transform:lowercase;letter-spacing:0;color:var(--paper);margin-bottom:8px}
.world-slide .tag{font:700 16px/1.32 var(--font-body);color:var(--paper)}
.world-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.world-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:all var(--dur-base)}
.world-dots i.on{background:var(--brand-gold);width:20px;border-radius:4px}
@media (max-width:620px){ .world-track{padding-left:18px;padding-right:18px} }

/* ---------- SKU range grid ---------- */
.skugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.sku{background:var(--paper);border:1px solid var(--border-hairline);border-top:3px solid var(--brand-schwarz);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow-hairline);display:flex;flex-direction:column;gap:8px;overflow:hidden;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base)}
.skugrid-kids{grid-template-columns:repeat(2,1fr);max-width:760px}
.sku:hover{transform:translateY(-3px);box-shadow:var(--shadow-raised)}
.sku-shot{margin:-22px -22px 16px;aspect-ratio:1/1;background:#FBFAF6;overflow:hidden}
.sku-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-standard)}
.sku:hover .sku-shot img{transform:scale(1.04)}
.sku .cat{font:600 10px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.16em;color:var(--fg-3)}
.sku .nm{font:700 23px/1 var(--font-product);text-transform:lowercase;letter-spacing:0}
.sku .fn{font:400 13px/1.5 var(--font-body);color:var(--fg-2)}
.sku .best{font:600 11px/1.4 var(--font-narrow);color:var(--brand-rot)}
.sku .ing{margin-top:auto;font:500 11px/1.45 var(--font-mono);color:var(--fg-3);padding-top:12px;border-top:1px solid var(--border-hairline)}
.range-banner{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin:8px 0 4px;box-shadow:var(--shadow-raised)}
.range-banner img{width:100%;height:clamp(220px,30vw,360px);object-fit:cover;display:block}
.range-banner .cap{position:absolute;left:0;bottom:0;right:0;padding:28px 28px 22px;background:linear-gradient(0deg,rgba(26,21,25,.72),transparent);color:var(--paper)}
.range-banner .cap h2{font:900 clamp(26px,3.4vw,40px)/1.05 var(--font-display);letter-spacing:-.02em;margin:0;color:var(--paper)}
.range-banner .cap p{font:400 15px/1.5 var(--font-body);color:#e7e4dd;margin:8px 0 0;max-width:46ch}

/* ---------- legal / prose ---------- */
/* legal pages — deliberately modest / small (compliance docs, not marketing) */
.legal{max-width:680px;margin:0 auto;padding:clamp(28px,4vw,44px) 22px clamp(40px,6vw,64px)}
.legal h1{font:700 clamp(17px,1.9vw,20px)/1.25 var(--font-display);letter-spacing:-.01em;margin:0 0 4px;color:var(--fg-1)}
.legal h2{font:700 14px/1.3 var(--font-display);letter-spacing:0;margin:22px 0 6px;color:var(--fg-1)}
.legal h3{font:700 12.5px/1.4 var(--font-body);margin:12px 0 3px;color:var(--fg-2)}
.legal p,.legal li{font:400 12.5px/1.65 var(--font-body);color:var(--fg-3)}
.legal ul{padding-left:18px;margin:8px 0}
.legal strong{color:var(--fg-2)}
.legal a{color:var(--brand-rot)}
.legal .dl{display:grid;grid-template-columns:200px 1fr;gap:8px 20px;margin:14px 0;padding:16px;background:var(--paper-sunk);border-radius:var(--radius-md)}
.legal .dl dt{font:700 11px/1.5 var(--font-narrow);color:var(--fg-2);text-transform:uppercase;letter-spacing:.08em}
.legal .dl dd{margin:0;font:400 12.5px/1.5 var(--font-body);color:var(--fg-2)}
.legal .note{font:400 11px/1.55 var(--font-body);color:var(--fg-3);margin:16px 0 0;padding-top:10px;border-top:1px solid var(--border-hairline)}
.legal a:hover{color:var(--brand-rot);text-decoration:underline}
@media (max-width:900px){ .skugrid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .skugrid{grid-template-columns:1fr} .legal .dl{grid-template-columns:1fr;gap:4px 0} .legal .dl dd{margin-bottom:10px} }

/* ---------- QUIZ / FINDER ---------- */
.quiz{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,72px) 24px clamp(64px,9vw,110px)}
.quiz-progress{height:4px;background:var(--bone);border-radius:2px;overflow:hidden;margin-bottom:36px}
.quiz-progress i{display:block;height:100%;background:var(--brand-rot);width:0;transition:width var(--dur-base) var(--ease-standard)}
.quiz-step{display:none}
.quiz-step.on{display:block;animation:qfade .4s var(--ease-standard)}
@keyframes qfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quiz .qnum{font:700 11px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.2em;color:var(--brand-rot);margin-bottom:12px}
.quiz .qtitle{font:900 clamp(24px,3.4vw,34px)/1.12 var(--font-display);letter-spacing:-.02em;margin:0 0 28px;color:var(--fg-1)}
.quiz-options{display:grid;gap:12px}
.quiz-opt{text-align:left;background:var(--paper-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:18px 20px;font:500 16px/1.4 var(--font-body);color:var(--fg-1);cursor:pointer;transition:all var(--dur-fast) var(--ease-standard);display:flex;align-items:center;gap:14px}
.quiz-opt::before{content:'';flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);transition:all var(--dur-fast)}
.quiz-opt:hover{border-color:var(--brand-rot);transform:translateY(-1px);box-shadow:var(--shadow-card)}
.quiz-opt:hover::before{border-color:var(--brand-rot)}
.quiz-opt:focus-visible{outline:2px solid var(--brand-rot);outline-offset:2px}
.quiz-back{margin-top:24px;background:none;border:none;color:var(--fg-3);font:600 13px/1 var(--font-body);cursor:pointer;padding:6px 0}
.quiz-back:hover{color:var(--brand-rot)}
.quiz-result{text-align:center}
.quiz-result .rlabel{font:700 11px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.2em;color:var(--brand-rot);margin-bottom:14px}
.quiz-result .rname{font:700 clamp(40px,8vw,76px)/1 var(--font-product);letter-spacing:0;margin:0 0 10px}
.quiz-result .reyebrow{font:600 14px/1.3 var(--font-narrow);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);margin-bottom:22px}
.quiz-result .rblurb{font:400 18px/1.6 var(--font-body);color:var(--fg-2);max-width:52ch;margin:0 auto 18px}
.quiz-result .ring{display:inline-block;font:500 12px/1.5 var(--font-mono);color:var(--fg-3);background:var(--paper-sunk);border-radius:var(--radius-pill);padding:8px 16px;margin-bottom:30px}
.quiz-result .ractions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- system result (paste + brush) ---------- */
.quiz-result .sys-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin:8px 0 26px;text-align:left}
.sys-plus{display:flex;align-items:center;justify-content:center;font:700 32px/1 var(--font-accent);color:var(--brand-rot)}
.sys-col{display:flex;flex-direction:column;gap:10px}
.sys-tag{font:700 10px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-3)}
.sys-card{background:var(--paper-raised);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-card);flex:1;display:flex;flex-direction:column;gap:10px}
.sys-eyebrow{font:600 12px/1.3 var(--font-narrow);text-transform:uppercase;letter-spacing:.12em;color:var(--brand-rot)}
.sys-name{font:700 clamp(28px,4vw,40px)/1 var(--font-product);letter-spacing:0;text-transform:lowercase}
.sys-blurb{font:400 14px/1.55 var(--font-body);color:var(--fg-2);margin:0}
.sys-card .ring{margin-top:auto;align-self:flex-start;font:500 11px/1.4 var(--font-mono);color:var(--fg-3);background:var(--paper-sunk);border-radius:var(--radius-pill);padding:7px 13px}
.sys-cta-copy{font:400 17px/1.6 var(--font-body);color:var(--fg-1);max-width:60ch;margin:0 auto 22px;text-align:center}
@media (max-width:680px){
  .quiz-result .sys-grid{grid-template-columns:1fr;gap:14px}
  .sys-plus{transform:rotate(0)}
}

/* ---------- CONVERSION GATE ---------- */
.convert{background:var(--brand-schwarz);color:var(--paper);padding:72px 32px;text-align:center}
.convert-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px}
.convert h2{font:900 clamp(30px,4.4vw,52px)/1.04 var(--font-display);letter-spacing:-.03em;margin:0;color:var(--paper)}
.convert p{font:400 17px/1.6 var(--font-body);color:var(--stone-200);max-width:56ch;margin:0}
.convert .cta{padding:16px 26px;font-size:15px}
.convert .cta-dark{background:var(--brand-gold);color:var(--brand-schwarz-ink)}
.convert .cta-dark:hover{background:var(--brand-gold-hover);transform:translateY(-2px)}

/* ---------- FOOTER ---------- */
footer{background:var(--paper-sunk);padding:64px 32px 32px}
footer .ftop{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr .8fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--border-hairline)}
footer img.mark{height:34px;width:auto;margin-bottom:20px}
footer .col h4{font:700 11px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-1);margin:0 0 18px}
footer .col a{display:block;font:500 14px/2 var(--font-body);color:var(--fg-2);text-decoration:none}
footer .col a:hover{color:var(--fg-1)}
footer .col .soon{display:block;font:500 14px/2 var(--font-body);color:var(--fg-muted);cursor:default}
footer p.mission{font:400 14px/1.55 var(--font-body);color:var(--fg-2);max-width:30ch}
footer .fbottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;gap:16px;flex-wrap:wrap}
footer .fbottom .copy{font:500 11px/1 var(--font-narrow);color:var(--fg-3);letter-spacing:.12em;text-transform:uppercase}
footer .fbottom .ribbon-rule{width:160px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-standard),transform .7s var(--ease-standard)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:36px}
  .hero-visual{max-width:420px;margin:0 auto;width:100%}
  .villain .inner{grid-template-columns:1fr;gap:28px}
  .science .head{flex-direction:column;align-items:flex-start;gap:16px}
  .science .grid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .brushes-inner{grid-template-columns:1fr;gap:32px}
  .feature-grid{grid-template-columns:1fr 1fr}
  .reach-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:28px}
  footer .ftop{grid-template-columns:1fr 1fr 1fr;gap:28px}
}
/* Nav collapses to the burger below the wrap width: the full menu (products, routines,
   the four category items, dentists, about, partner, loyalty) only fits inside the 1280px
   wrap, so anything narrower would spill the menu past the ribbon's right edge. Below
   1280px the menu lives in the burger, keeping the nav row exactly as wide as the ribbon. */
@media (max-width:1279px){
  nav.top{flex-wrap:wrap;gap:10px}
  .burger{display:block;order:3;flex:none}
  nav.top .iconbtn{display:none}
  nav.top .right{order:2;margin-left:auto}
  nav.top .links{order:4;flex-basis:100%;flex-direction:column;gap:2px;display:none}
  nav.top .links.open{display:flex}
  nav.top a.link{padding:13px 0;border-bottom:1px solid var(--border-hairline)}
  nav.top a.link::after{display:none}
}
@media (max-width:720px){
  .ribbon{font-size:8px;padding:8px 14px;letter-spacing:.04em;gap:7px}
  .ribbon>span{white-space:normal;text-align:center;max-width:100%}
  .ribbon .lang{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:clamp(2px,1.1vw,8px);overflow:visible}
  .ribbon .lang a{gap:0;flex:0 0 auto;padding:2px 0}
  .ribbon .lang a.active{border-bottom:0;padding-bottom:0}
  .ribbon .lang a.active .flag{box-shadow:0 0 0 2px var(--brand-gold)}
  .ribbon .lang .code{display:none}
  .ribbon .lang .flag{width:clamp(11px,4.2vw,18px);height:clamp(11px,4.2vw,18px)}
  nav.top{gap:6px;padding:10px 10px;flex-wrap:wrap}
  nav.top .logo{flex:0 1 auto;min-width:0}
  nav.top .logo img{height:22px}
  nav.top .iconbtn{display:none}
  nav.top .right{order:2;margin-left:auto;gap:6px;flex-shrink:1;min-width:0}
  nav.top .right .cta{white-space:nowrap;flex:0 1 auto;min-width:0;max-width:38vw;overflow:hidden;text-overflow:ellipsis;padding:8px 10px;font-size:12px}
  .burger{display:block;order:3;flex:none}
  nav.top .links{order:4;flex-basis:100%;flex-direction:column;gap:2px;display:none}
  nav.top .links.open{display:flex}
  nav.top a.link{padding:13px 0;border-bottom:1px solid var(--border-hairline)}
  nav.top a.link::after{display:none}
  .hero,.villain,.science,.shop,.quote{padding-left:18px;padding-right:18px}
  .villain,.science,.shop,.quote{padding-top:64px;padding-bottom:64px}
  .science .grid,.pgrid{grid-template-columns:1fr}
  .brushes,.section-band,.page-hero{padding-left:18px;padding-right:18px}
  .feature-grid{grid-template-columns:1fr}
  .reach-grid{grid-template-columns:1fr 1fr}
  .brush-list{grid-template-columns:1fr 1fr}
  footer{padding:48px 18px 28px}
  footer .ftop{grid-template-columns:1fr 1fr;gap:24px}
  footer .fbottom{justify-content:center;text-align:center}
  footer .fbottom .ribbon-rule{order:-1;width:120px}
}
@media (max-width:480px){
  footer .ftop{grid-template-columns:1fr;gap:20px}
  .hero .trust{gap:16px}
  .reach-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto}
}

/* product names — Manrope ExtraBold (Eras removed) */
.pcard .nm,.pn,.sku .nm,.world-slide .wname,.sys-name,.dx-product-name,.brush-list strong,.quiz-result .rname{font-family:var(--font-product);font-weight:700;letter-spacing:-.01em}

/* hero rotating showcase (characters around the world) */
.hero-visual .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease-standard);z-index:1}
.hero-visual .hero-slide.on{opacity:1;z-index:2}
.hero-visual .hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visual .hov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,16,19,.82) 4%,rgba(20,16,19,.16) 46%,transparent 66%)}
.hero-cap{position:absolute;left:24px;right:24px;bottom:44px;z-index:3;display:flex;flex-direction:column;gap:7px}
.hero-cap .loc{font:700 10px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.2em;color:var(--brand-gold)}
.hero-cap .hnm{font-family:var(--font-product);font-weight:800;text-transform:lowercase;font-size:30px;line-height:1;color:var(--paper)}
.hero-cap .htag{font:700 14px/1.35 var(--font-body);color:var(--paper);max-width:32ch}
.hero-dots{position:absolute;bottom:18px;left:24px;z-index:4;display:flex;gap:7px}
.hero-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all var(--dur-base)}
.hero-dots i.on{background:var(--brand-gold);width:18px;border-radius:4px}

/* social-proof bar */
.proofbar{background:var(--paper-sunk);border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.proofbar-inner{max-width:1280px;margin:0 auto;padding:15px 32px;display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;font:500 13px/1.4 var(--font-body);color:var(--fg-2);text-align:center}
.proofbar strong{color:var(--fg-1);font-weight:700}
.proofbar .dot{color:var(--fg-muted)}
@media(max-width:620px){.proofbar .dot{display:none}.proofbar-inner{gap:6px;flex-direction:column;padding:14px 18px}}

/* family / kids band */
.familyband{display:grid;grid-template-columns:1.45fr .55fr;gap:36px;align-items:center}
.familyband .h2{margin-bottom:14px}
.familyband .lead strong{color:var(--fg-1);font-family:var(--font-product);font-weight:800;text-transform:lowercase}
.familyband-cta{display:flex;justify-content:flex-end}
@media(max-width:760px){.familyband{grid-template-columns:1fr;gap:18px}.familyband-cta{justify-content:flex-start}}

/* product rating row (real data only, from ratings.js) */
.rating{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:6px 0 2px;font:600 12px/1 var(--font-narrow);color:var(--fg-2)}
.rating .stars{color:var(--brand-gold);letter-spacing:1px;font-size:13px;-webkit-text-stroke:.4px var(--stone-300)}
.rating b{color:var(--fg-1);font-weight:800}
.rating a{color:var(--fg-3);text-decoration:none;border-bottom:1px solid var(--border-subtle)}
.rating a:hover{color:var(--brand-rot)}
.rating .sep{color:var(--fg-muted)}


/* ---------- SYSTEM DIAGNOSTIC CHAMBER v15 ---------- */
body:has(#quiz) .page-hero{position:relative;padding-top:clamp(52px,7vw,90px);padding-bottom:16px;overflow:hidden}
body:has(#quiz) .page-hero::before{content:"";position:absolute;inset:auto 50% -40px auto;width:min(760px,88vw);height:260px;transform:translateX(50%);background:radial-gradient(circle at 50% 50%,rgba(229,32,44,.16),rgba(254,240,4,.08) 36%,transparent 70%);filter:blur(8px);z-index:-1}
.quiz{max-width:1120px;margin:0 auto;padding:clamp(32px,5vw,64px) 20px clamp(72px,9vw,120px)}
.quiz-progress{height:8px;background:var(--bone);border:1px solid rgba(40,34,41,.08);border-radius:999px;overflow:hidden;margin:0 auto 22px;max-width:920px;box-shadow:inset 0 1px 3px rgba(40,34,41,.1)}
.quiz-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-schwarz) 0%,var(--brand-rot) 58%,var(--brand-gold) 100%);width:0;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.quiz-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:stretch;background:linear-gradient(135deg,#1f1a21 0%,#2d252c 54%,#171318 100%);border:1px solid rgba(255,255,255,.12);border-radius:32px;padding:clamp(18px,3vw,30px);box-shadow:0 28px 80px rgba(40,34,41,.28);position:relative;overflow:hidden}
.quiz-shell::before{content:"";position:absolute;inset:-30% -12% auto auto;width:520px;height:520px;background:radial-gradient(circle,rgba(229,32,44,.28),rgba(254,240,4,.1) 34%,transparent 66%);filter:blur(2px);pointer-events:none}
.quiz-panel,.quiz-map,.quiz-result{position:relative;z-index:1}
.quiz-panel{background:rgba(255,252,244,.96);border:1px solid rgba(255,255,255,.55);border-radius:26px;padding:clamp(22px,3.5vw,42px);box-shadow:0 20px 60px rgba(0,0,0,.18)}
.quiz .qnum{display:inline-flex;align-items:center;gap:8px;font:800 11px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.22em;color:var(--brand-rot);margin-bottom:14px;background:rgba(229,32,44,.08);border:1px solid rgba(229,32,44,.18);border-radius:999px;padding:8px 11px}
.quiz .qnum::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-rot);box-shadow:0 0 0 5px rgba(229,32,44,.12)}
.quiz .qtitle{font:900 clamp(25px,3.4vw,40px)/1.04 var(--font-display);letter-spacing:-.035em;margin:0 0 16px;color:var(--brand-schwarz);max-width:16ch}
.qfact{font:600 15px/1.55 var(--font-body);color:var(--fg-2);max-width:62ch;margin:0 0 24px}
.qhl{color:var(--brand-rot);font-style:normal;font-weight:inherit}
.quiz-reveal .qhl{font-weight:800}
.quiz-options{display:grid;gap:12px}
.quiz-opt{position:relative;text-align:left;background:linear-gradient(180deg,var(--paper),var(--paper-sunk));border:1px solid rgba(40,34,41,.13);border-radius:20px;padding:18px 20px 18px 54px;font:700 15px/1.38 var(--font-body);color:var(--brand-schwarz);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;display:block;min-height:70px;box-shadow:0 8px 24px rgba(40,34,41,.06);touch-action:manipulation}
.quiz-opt::before{content:"";position:absolute;left:20px;top:21px;width:19px;height:19px;border-radius:50%;border:2px solid rgba(40,34,41,.38);background:var(--paper-raised);transition:all .18s ease}
.quiz-opt::after{content:"";position:absolute;left:26px;top:27px;width:7px;height:7px;border-radius:50%;background:transparent;transition:background .18s ease}
.quiz-opt:hover{border-color:rgba(229,32,44,.55);transform:translateY(-2px);box-shadow:0 16px 34px rgba(40,34,41,.12)}
.quiz-opt.is-selected{background:var(--brand-schwarz);color:var(--paper);border-color:var(--brand-rot);box-shadow:0 18px 44px rgba(229,32,44,.25)}
.quiz-opt.is-selected::before{border-color:var(--brand-gold);background:var(--brand-rot)}
.quiz-opt.is-selected::after{background:var(--brand-gold)}
.quiz-opt:focus-visible{outline:3px solid rgba(229,32,44,.35);outline-offset:3px}
.quiz-reveal{margin:14px 0 22px;border-radius:22px;padding:18px 20px;background:linear-gradient(135deg,rgba(229,32,44,.1),rgba(254,240,4,.1));border:1px solid rgba(229,32,44,.22);animation:qfade .24s ease}
.quiz-reveal span{display:block;font:900 10px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.22em;color:var(--brand-rot);margin-bottom:8px}
.quiz-reveal p{margin:0;font:700 15px/1.55 var(--font-body);color:var(--brand-schwarz)}
.quiz-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.quiz-back{margin:0;background:none;border:none;color:var(--fg-3);font:800 13px/1 var(--font-body);cursor:pointer;padding:10px 0;text-align:left;touch-action:manipulation}
.quiz-back:hover{color:var(--brand-rot)}
.quiz-next{border:0;white-space:nowrap}
.quiz-map{border-radius:26px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.13);color:var(--paper);min-height:100%;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.map-kicker{font:900 10px/1 var(--font-narrow);letter-spacing:.24em;text-transform:uppercase;color:var(--brand-gold);margin-bottom:14px}
.quiz-map h3{font:900 30px/1 var(--font-display);letter-spacing:-.035em;margin:0 0 10px;color:var(--paper)}
.quiz-map p{font:600 14px/1.55 var(--font-body);color:rgba(255,255,255,.72);margin:0 0 24px}
.map-axis{display:grid;gap:14px;margin-top:4px}
.axis-row{display:grid;gap:7px}
.axis-row span{font:800 11px/1 var(--font-narrow);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.axis-row b{display:block;height:9px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.axis-row i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-rot),var(--brand-gold));border-radius:999px;transition:width .35s ease}
.map-dots{display:flex;gap:8px;margin-top:26px}
.map-dots i{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.2)}
.map-dots i.done{background:var(--brand-gold)}.map-dots i.now{background:var(--brand-rot);box-shadow:0 0 0 6px rgba(229,32,44,.16)}
.quiz-result{grid-column:1/-1;background:rgba(255,252,244,.97);border-radius:26px;padding:clamp(24px,4vw,44px);text-align:center;color:var(--brand-schwarz)}
.quiz-result .rlabel{font:900 11px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.22em;color:var(--brand-rot);margin-bottom:12px}
.system-headline{font:900 clamp(32px,5vw,58px)/.98 var(--font-display);letter-spacing:-.045em;margin:0 auto 28px;max-width:11ch;color:var(--brand-schwarz)}
.quiz-result .sys-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin:8px 0 28px;text-align:left}
.sys-plus{display:flex;align-items:center;justify-content:center;font:900 34px/1 var(--font-accent);color:var(--brand-rot)}
.sys-col{display:flex;flex-direction:column;gap:10px}.sys-tag{font:900 10px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.22em;color:var(--fg-3)}
.sys-card{background:var(--paper-raised);border:1px solid rgba(40,34,41,.12);border-radius:24px;padding:20px;box-shadow:0 18px 45px rgba(40,34,41,.11);flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.sys-img{height:156px;border-radius:18px;background:linear-gradient(135deg,var(--paper-sunk),var(--paper));display:grid;place-items:center;overflow:hidden;margin-bottom:4px}
.sys-img img{max-width:100%;max-height:150px;object-fit:contain;display:block;filter:drop-shadow(0 16px 22px rgba(40,34,41,.18))}.sys-img--empty span{font:900 28px/1 var(--font-product);color:var(--brand-rot)}
.sys-eyebrow{font:900 11px/1.25 var(--font-narrow);text-transform:uppercase;letter-spacing:.14em;color:var(--brand-rot)}.sys-name{font:800 clamp(30px,4vw,44px)/.95 var(--font-product);letter-spacing:-.02em;text-transform:lowercase;color:var(--brand-schwarz)}.sys-blurb{font:600 14px/1.55 var(--font-body);color:var(--fg-2);margin:0}.sys-card .ring{margin-top:auto;align-self:flex-start;font:700 11px/1.4 var(--font-mono);color:var(--brand-schwarz);background:var(--paper-sunk);border-radius:999px;padding:8px 13px}.sys-cta-copy{font:700 17px/1.6 var(--font-body);color:var(--brand-schwarz);max-width:64ch;margin:0 auto 24px;text-align:center}.quiz-result .ractions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sys-readmap{max-width:480px;margin:0 auto 30px;text-align:left}
.sys-readmap .srm-title{font:900 10px/1 var(--font-narrow);text-transform:uppercase;letter-spacing:.22em;color:var(--brand-rot);margin-bottom:16px;text-align:center}
.srm-row{display:grid;gap:7px;margin-bottom:13px}
.srm-row span{font:800 11px/1 var(--font-narrow);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.srm-row b{display:block;height:9px;background:var(--bone);border-radius:999px;overflow:hidden;border:1px solid rgba(40,34,41,.07)}
.srm-row i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-rot),var(--brand-gold));border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.sys-foot-note{font:700 13px/1.5 var(--font-body);color:var(--status-success);margin:16px auto 0;max-width:46ch}
@media (max-width:900px){.quiz-shell{grid-template-columns:1fr}.quiz-map{order:-1;min-height:auto}.quiz .qtitle{max-width:none}.quiz-map h3{font-size:24px}.map-axis{grid-template-columns:1fr 1fr}.quiz-result .sys-grid{grid-template-columns:1fr}.sys-plus{min-height:20px}}
@media (max-width:520px){.quiz{padding-left:12px;padding-right:12px}.quiz-shell{border-radius:24px;padding:12px}.quiz-panel,.quiz-map,.quiz-result{border-radius:20px;padding:20px}.quiz-opt{padding:16px 16px 16px 48px;font-size:14px}.quiz-opt::before{left:17px}.quiz-opt::after{left:23px}.map-axis{grid-template-columns:1fr}.quiz-nav{align-items:stretch;flex-direction:column}.quiz-next{width:100%}.sys-img{height:132px}.quiz-map h3{font-size:18px}.quiz-map p{font-size:12px;margin-bottom:14px}.system-headline{font-size:26px}.sys-name{font-size:22px}}

/* ---------- RTL (Arabic) ---------- */
html[dir="rtl"]{direction:rtl}
[dir="rtl"] body{text-align:right}
[dir="rtl"] .skip{left:auto;right:-999px}
[dir="rtl"] .skip:focus{left:auto;right:0}
[dir="rtl"] nav.top a.link::after{transform-origin:right}
[dir="rtl"] .hero-visual .badge{right:auto;left:28px;transform:rotate(8deg)}
[dir="rtl"] .pcard.new::after{right:auto;left:12px}
[dir="rtl"] .brush-list li{border-left:0;border-right:2px solid var(--brand-schwarz);padding:4px 14px 4px 0}
[dir="rtl"] .reach-grid li{border-left:0;border-right:2px solid var(--brand-rot);padding:6px 16px 6px 0}
[dir="rtl"] .legal ul{padding-left:0;padding-right:20px}
[dir="rtl"] .quiz-opt{text-align:right;padding:18px 54px 18px 20px}
[dir="rtl"] .quiz-opt::before{left:auto;right:20px}
[dir="rtl"] .quiz-opt::after{left:auto;right:26px}
[dir="rtl"] .quiz-back,[dir="rtl"] .quiz-result .sys-grid,[dir="rtl"] .sys-readmap{text-align:right}
[dir="rtl"] .hero-cap{left:24px;right:24px}
[dir="rtl"] .hero-dots{left:auto;right:24px}
[dir="rtl"] .range-banner .cap{text-align:right}
[dir="rtl"] .eyebrow,[dir="rtl"] .dx-eyebrow,[dir="rtl"] .kicker{text-align:right}
@media (max-width:720px){[dir="rtl"] nav.top .right{margin-left:0;margin-right:auto}}