/* Motorlark - Pit lane identity. Dark carbon, Gulf powder blue, livery orange. */
@font-face{font-family:"Saira X";src:url(fonts/saira-italic-x.woff2) format("woff2");font-weight:600 900;font-style:italic;font-display:swap}
@font-face{font-family:"Saira X";src:url(fonts/saira-x.woff2) format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted";src:url(fonts/schibsted-var.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"RH Mono";src:url(fonts/redhatmono-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{
 --carbon:#0C0D10;--carbon2:#14161B;--panel:#1B1E25;--panel2:#232731;--line:#2C313C;
 --on:#F4F6F8;--on-mut:#A9B1BE;
 --paper:#EEF1F4;--white:#fff;--ink:#0C0D10;--mut:#465062;--rule:#D3D9E1;
 --gulf:#8FD0F0;--gulf-d:#1F6E96;--orange:#FF6A1A;--orange-d:#B5420A;--lime:#C6F432;
 --amz:#FF9900;--ok:#36C47A;
 --disp:"Saira X","Arial Black",system-ui,sans-serif;--body:"Schibsted",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"RH Mono",ui-monospace,Menlo,monospace;
 --w:1240px;--r:4px;--cut:22px;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}html.lock{overflow:hidden}
body{margin:0;background:var(--carbon);color:var(--on);font:400 17px/1.65 var(--body);overflow-x:clip}
img,svg{display:block;max-width:100%}a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gulf);color:var(--ink);padding:10px 14px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--gulf);outline-offset:3px}
.disp{font-family:var(--disp);font-style:italic;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;line-height:.92}
.kick{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gulf)}
.mono{font-family:var(--mono)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;font:800 14px/1 var(--disp);font-style:italic;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .2s,background .2s}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateX(3px)}
.btn-gulf{background:var(--gulf);color:var(--ink)}.btn-gulf:hover{background:#B5E2F7}
.btn-ghost{background:transparent;color:var(--on);box-shadow:inset 0 0 0 2px #4A5363;clip-path:none;border-radius:2px}
.btn-amz{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;background:var(--amz);color:#111;font:700 15px/1 var(--body);text-decoration:none;border-radius:var(--r);box-shadow:0 6px 0 -2px #B86E00;transition:transform .15s,box-shadow .15s}
.btn-amz svg{width:17px;height:17px}.btn-amz:hover{transform:translateY(2px);box-shadow:0 3px 0 -2px #B86E00}
.amz-note{margin:8px 0 0;font-size:12.5px;line-height:1.4;color:var(--mut)}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(12,13,16,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(var(--gulf) 0 50%,var(--orange) 50% 100%)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:900 italic 24px/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.logo .rd{width:40px;height:40px;flex:none}
.logo b{color:var(--gulf);font-weight:900}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{position:relative;white-space:nowrap;padding:12px 14px;font:700 13px/1 var(--disp);font-style:normal;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--on-mut);transition:color .2s}
.nav a::before{content:"";position:absolute;inset:4px 0;background:var(--panel2);transform:skewX(-14deg) scaleX(.6);opacity:0;transition:.25s;z-index:-1}
.nav a:hover,.nav a[aria-current]{color:var(--on)}.nav a:hover::before,.nav a[aria-current]::before{opacity:1;transform:skewX(-14deg) scaleX(1)}
.nav a[aria-current]::after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:3px;background:var(--orange);transform:skewX(-14deg)}
.hdr .btn{min-height:44px;padding:0 20px;font-size:13px}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:10px;min-height:48px;padding:0 14px;background:var(--panel);color:var(--on);border:0;font:800 italic 13px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.menu-btn i{display:grid;gap:5px}.menu-btn b{display:block;width:22px;height:3px;background:var(--gulf);transform:skewX(-20deg);transition:.3s}.menu-btn b:nth-child(2){width:15px;background:var(--orange)}
.menu-btn[aria-expanded=true] b:first-child{transform:translateY(4px) rotate(45deg)}.menu-btn[aria-expanded=true] b:nth-child(2){width:22px;transform:translateY(-4px) rotate(-45deg)}
.sheet{visibility:hidden;position:fixed;z-index:49;inset:78px 0 0 0;background:var(--carbon);padding:28px 24px 40px;transform:translateX(-102%);transition:transform .45s cubic-bezier(.7,0,.2,1),visibility 0s .45s;display:flex;flex-direction:column;gap:6px;overflow:auto}
.sheet::before{content:"";position:absolute;right:-60px;top:0;bottom:0;width:120px;background:repeating-linear-gradient(-14deg,transparent 0 22px,rgba(143,208,240,.08) 22px 26px)}
.sheet.open{visibility:visible;transition-delay:0s;transform:none}
.sheet .big{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font:900 italic 36px/1 var(--disp);text-transform:uppercase;text-decoration:none}
.sheet .big span{font:600 12px/1 var(--mono);color:var(--orange);letter-spacing:.1em}
.sheet .sm{color:var(--on-mut);font-size:15px;padding:10px 0;text-decoration:none}
.sheet .btn{margin-top:18px;align-self:flex-start}
/* hero */
.hero{position:relative;min-height:calc(100vh - 72px);max-height:900px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;background:radial-gradient(120% 70% at 70% 30%,#163246 0,#0E1720 38%,var(--carbon) 70%)}
.scene{position:absolute;inset:0;z-index:-1}
.scene svg{position:absolute;width:100%;height:100%;left:0;top:0}
.speed{position:absolute;inset:0;z-index:-1;overflow:hidden}
.speed i{position:absolute;height:2px;background:linear-gradient(90deg,transparent,rgba(143,208,240,.7),transparent);animation:zip 1.6s linear infinite}
@keyframes zip{from{transform:translateX(60vw)}to{transform:translateX(-120vw)}}
.road{animation:road .55s linear infinite}
@keyframes road{to{transform:translateX(-160px)}}
.wheel{transform-box:fill-box;transform-origin:center;animation:spin .5s linear infinite}
@keyframes spin{to{transform:rotate(-360deg)}}
.beam{transform-box:fill-box;transform-origin:0 50%;animation:beam 4s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.75;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.06) rotate(-1deg)}}
.car{animation:bob 1.1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-2px)}}
.hero-copy{position:relative;width:100%;padding:0 0 46px}
.hero h1{margin:16px 0 0;font-size:clamp(46px,8vw,118px)}
.hero h1 .o{color:var(--gulf)}
.hero h1 .st{display:inline-block;position:relative}
.hero h1 .st::after{content:"";position:absolute;left:2%;right:-2%;bottom:.06em;height:.12em;background:var(--orange);transform:skewX(-20deg) scaleX(0);transform-origin:left;animation:stripe 1s .6s cubic-bezier(.7,0,.2,1) forwards;z-index:-1}
@keyframes stripe{to{transform:skewX(-20deg) scaleX(1)}}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:26px}
.hero-row p{max-width:520px;margin:0;color:#C9D0DA;font-size:19px;line-height:1.55}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-tag{position:absolute;right:24px;top:32px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(20,22,27,.72);backdrop-filter:blur(6px);border:1px solid #2F3643;font:600 12px/1 var(--mono);letter-spacing:.06em;color:var(--on)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(54,196,122,.18);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(54,196,122,0)}}
/* telemetry strip */
.tele{background:var(--carbon2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tele .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.tele .wrap>div{padding:26px 22px;border-left:1px solid var(--line)}.tele .wrap>div:first-child{border-left:0;padding-left:0}
.tele b{display:block;font:900 italic 30px/1 var(--disp);color:var(--on);text-transform:uppercase}
.tele b em{font-style:italic;color:var(--gulf)}
.tele span{display:block;margin-top:8px;font:500 13px/1.4 var(--mono);color:var(--on-mut)}
/* section heads */
.sec{padding:110px 0}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px}
.sh h2{margin:12px 0 0;font-size:clamp(34px,4.6vw,64px)}
.sh p{max-width:420px;margin:0;color:var(--on-mut)}
/* starting grid of guides */
.grid-start{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.grid-start .gc:nth-child(even){transform:translateY(70px)}
.gc{position:relative;display:block;text-decoration:none;background:var(--panel);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));transition:transform .35s,background .3s}
.gc:hover{background:var(--panel2)}
.gc .art{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0F2230}
.gc .art svg{width:100%;height:100%;transition:transform .6s}
.gc:hover .art svg{transform:scale(1.04)}
.gc .pos{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:10px;font:900 italic 15px/1 var(--disp);text-transform:uppercase}
.gc .pos b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);font-size:20px;box-shadow:0 0 0 4px var(--orange)}
.gc .body{padding:24px 26px 30px}
.gc h3{margin:8px 0 10px;font:800 italic 27px/1.08 var(--disp);text-transform:uppercase}
.gc p{margin:0;color:var(--on-mut);font-size:16px}
.gc .meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font:500 12.5px/1 var(--mono);color:var(--on-mut)}
.gc .meta span{display:inline-flex;gap:6px;align-items:center}
.gc .meta span::before{content:"";width:6px;height:6px;background:var(--gulf);transform:skewX(-20deg)}
.gc.wip{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.gc.wip .art{display:none}.gc.wip{background:repeating-linear-gradient(-45deg,#101318 0 14px,#13171D 14px 28px);box-shadow:none;border:1px dashed #343B48}.gc.wip .body{padding:56px 26px 28px}
.gc.wip .tag{position:absolute;right:18px;top:18px;padding:7px 10px;background:var(--orange);color:#111;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* bays */
.bays{background:var(--paper);color:var(--ink)}
.bays .kick{color:var(--gulf-d)}.bays .sh p{color:var(--mut)}
.bay-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bay{position:relative;display:flex;flex-direction:column;min-height:340px;padding:26px 26px 80px;text-decoration:none;background:var(--white);border-top:6px solid var(--ink);transition:transform .3s,box-shadow .3s}
.bay:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(12,13,16,.45)}
.bay .n{font:600 12px/1 var(--mono);color:var(--mut);letter-spacing:.1em}
.bay .ic{height:150px;margin:18px 0 auto;display:grid;place-items:center}
.bay .ic svg{height:140px;width:auto}
.bay h3{margin:18px 0 6px;font:900 italic 24px/1 var(--disp);text-transform:uppercase}
.bay p{margin:0;font-size:15px;color:var(--mut);line-height:1.5}
.bay .go{position:absolute;right:20px;bottom:22px;width:40px;height:40px;display:grid;place-items:center;background:var(--ink);color:#fff;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.bay .go svg{width:18px}
.bay:nth-child(1){border-color:var(--orange)}.bay:nth-child(2){border-color:var(--gulf-d)}.bay:nth-child(3){border-color:var(--ink)}.bay:nth-child(4){border-color:#6A7486}
/* method: sector bars */
.method{background:var(--carbon2)}
.meth{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.sectors{display:flex;height:64px;margin:30px 0 18px;gap:4px}
.sectors i{display:flex;align-items:flex-end;padding:8px 10px;font:700 13px/1 var(--mono);color:var(--ink);transform:skewX(-14deg);transform-origin:bottom}
.sectors i span{transform:skewX(14deg)}
.leg{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.leg li{display:grid;grid-template-columns:16px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.leg li i{width:14px;height:14px;transform:skewX(-14deg)}
.leg li b{font:700 15px/1 var(--mono)}
.steps{display:grid;gap:18px;counter-reset:s}
.step{position:relative;padding:24px 24px 24px 86px;background:var(--panel);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;left:22px;top:20px;font:900 italic 38px/1 var(--disp);color:var(--gulf)}
.step h3{margin:0 0 6px;font:800 italic 20px/1.1 var(--disp);text-transform:uppercase}
.step p{margin:0;color:var(--on-mut);font-size:15.5px}
/* promise band */
.promise{position:relative;overflow:hidden;padding:110px 0 170px;background:var(--gulf);color:var(--ink)}
.promise::before{content:"";position:absolute;left:-10%;right:-10%;bottom:34px;height:56px;background:var(--orange);transform:rotate(-6deg);box-shadow:0 26px 0 var(--ink)}
.promise .wrap{position:relative}
.promise blockquote{margin:0;max-width:1040px;font:900 italic clamp(34px,5vw,74px)/.98 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.promise cite{display:block;margin-top:34px;font:600 14px/1 var(--mono);font-style:normal;letter-spacing:.08em}
/* pit board newsletter */
.pit{padding:100px 0}
.pitbox{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:56px;background:var(--panel);border-left:10px solid var(--orange)}
.pitbox h2{margin:12px 0 10px;font-size:clamp(30px,3.8vw,52px)}
.pitbox p{margin:0;color:var(--on-mut)}
.pitform{display:flex;gap:0}
.pitform label{position:absolute;left:-999px}
.pitform input{flex:1;min-width:0;min-height:58px;padding:0 18px;background:var(--carbon);border:2px solid #3A4250;border-right:0;color:var(--on);font:500 16px var(--mono)}
.pitform input::placeholder{color:#8E97A6}
.pitform .btn{min-height:58px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.small{font-size:13px;color:var(--on-mut);margin-top:12px}
/* footer */
.ftr{position:relative;background:var(--carbon);padding:0 0 30px;overflow:hidden}
.ftr .liv{height:28px;background:linear-gradient(var(--gulf) 0 55%,var(--orange) 55% 100%)}
.ftr .word{margin:60px 0 40px;font:900 italic clamp(40px,11.2vw,166px)/.86 var(--disp);text-transform:uppercase;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:2px #39404D;white-space:nowrap}
.ftr .word b{color:var(--gulf);-webkit-text-stroke:0}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.fcols h4{margin:0 0 16px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gulf)}
.fcols a{display:block;padding:7px 0;color:#D0D6DF;text-decoration:none;font-size:15px}
.fcols a:hover{color:#fff;text-decoration:underline}
.fcols p{margin:0;color:var(--on-mut);font-size:15px}
.fbase{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font:500 12.5px/1.6 var(--mono);color:var(--on-mut)}
/* reveal */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}
html.js .grid-start .gc.rv.in:nth-child(even){transform:translateY(70px)}
/* ---------- ARTICLE ---------- */
.progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;z-index:60}
.ahero{position:relative;overflow:hidden;padding:56px 0 64px;background:radial-gradient(90% 80% at 85% 20%,#1A3A50 0,#0E1720 45%,var(--carbon) 80%)}
.ahero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font:500 13px/1 var(--mono);color:var(--on-mut)}
.crumbs a{color:var(--on-mut)}.crumbs a:hover{color:#fff}
.ahero h1{margin:22px 0 18px;font-size:clamp(40px,5.6vw,82px)}
.ahero h1 .o{color:var(--gulf)}
.dek{max-width:640px;margin:0 0 26px;font-size:20px;line-height:1.5;color:#C9D0DA}
.by{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;font-size:15px}
.by .av{width:46px;height:46px;flex:none}
.by .who b{display:block}
.by .who span{color:var(--on-mut);font-size:14px}
.verified{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(54,196,122,.12);border:1px solid rgba(54,196,122,.4);font:600 12.5px/1 var(--mono);color:#9BE8BE}
.verified i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.disc{margin:16px 0 0;font-size:14px;color:var(--on-mut)}.disc a{color:var(--gulf)}
.ahero .pack{position:relative}
.ahero .pack svg{width:100%;height:auto;filter:drop-shadow(0 40px 40px rgba(0,0,0,.5))}
/* article body is light for long reading */
.abody{background:var(--paper);color:var(--ink)}
.alay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding:56px 24px 90px}
.answer{position:relative;margin:-110px 0 48px;padding:34px 36px 30px;background:var(--white);border-left:10px solid var(--orange);box-shadow:0 40px 60px -40px rgba(12,13,16,.5);z-index:2}
.answer .kick{color:var(--orange-d)}
.answer .big{margin:12px 0 22px;font-size:21px;line-height:1.5}
.answer .big strong{background:linear-gradient(transparent 62%,rgba(143,208,240,.6) 62%)}
.pole{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pole a{display:block;padding:16px 16px 18px;background:var(--paper);text-decoration:none;border-top:4px solid var(--rule);transition:border-color .2s,background .2s}
.pole a:hover{background:#E3E8EE}
.pole a.p1{border-color:var(--orange);background:#FFF3EB}
.pole .k{display:block;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.pole .nm{display:block;margin:8px 0 6px;font:800 italic 18px/1.1 var(--disp);text-transform:uppercase}
.pole .sp{display:block;font:500 13px/1.3 var(--mono);color:var(--mut)}
.prose h2{margin:64px 0 16px;font:900 italic clamp(28px,3vw,40px)/1 var(--disp);text-transform:uppercase}
.prose h3{margin:28px 0 8px;font:800 19px/1.3 var(--body)}
.prose p,.prose li{max-width:70ch}
.prose p{margin:0 0 16px}
/* lap timing table */
.lap{margin:26px 0 8px;background:var(--carbon);color:var(--on);overflow:clip}
.lap table{width:100%;border-collapse:collapse;font-size:15px}
.lap caption{text-align:left;padding:18px 22px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gulf);border-bottom:1px solid var(--line)}
.lap th{position:sticky;top:78px;background:var(--carbon2);text-align:left;padding:12px 16px;font:600 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-mut);z-index:1}
.lap td{padding:16px;border-top:1px solid var(--line);vertical-align:middle}
.lap tr:hover td{background:#14171D}
.lap .p{font:900 italic 22px/1 var(--disp);color:var(--gulf)}
.lap tr.first .p{color:var(--orange)}
.lap .m b{display:block;font:800 15.5px/1.25 var(--body)}
.lap .m span{font-size:13px;color:var(--on-mut)}
.sbar{display:block;position:relative;width:120px;height:8px;background:#2A2F39;transform:skewX(-20deg)}
.sbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--gulf),#C7EBFB)}
.sv{display:block;margin-bottom:8px;font:600 13.5px/1 var(--mono)}
.tier{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--mono);white-space:nowrap}
.tier .d{color:var(--orange)}.tier .d s{text-decoration:none;color:#4A5262}
.abody .tier .d s{color:#B8C0CC}
.lap .btn-amz{min-height:42px;padding:0 14px;font-size:13.5px;white-space:nowrap}
.lapnote{font-size:13px;color:var(--mut);margin:10px 0 0}
/* product cards */
.prod{position:relative;margin:34px 0;background:var(--white);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);box-shadow:0 1px 0 var(--rule)}
.prod-top{display:grid;grid-template-columns:300px 1fr;}
.prod .pic{position:relative;background:#0F2230;min-height:300px;display:grid;place-items:center;overflow:hidden}
.prod .pic svg{position:absolute;inset:0;width:100%;height:100%}
.prod .rd{position:absolute;left:16px;top:16px;width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);font:900 italic 26px/1 var(--disp);box-shadow:0 0 0 5px var(--orange)}
.prod .info{padding:28px 30px 26px}
.prod .award{display:inline-block;padding:7px 12px;background:var(--ink);color:#fff;font:700 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.prod.first .award{background:var(--orange);color:#111}
.prod h3{margin:14px 0 6px;font:900 italic 28px/1.02 var(--disp);text-transform:uppercase}
.prod .bf{margin:0 0 18px;color:var(--mut);font-size:16px}.prod .bf b{color:var(--ink)}
.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.readouts div{padding:12px 12px 10px;background:var(--carbon);color:var(--on)}
.readouts span{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-mut)}
.readouts b{display:block;margin-top:6px;font:700 16px/1.15 var(--mono);color:var(--gulf)}
.buy{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.buy .tier{font-size:14px}
.buy .tier small{display:block;font:500 11px/1 var(--mono);color:var(--mut);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.pc{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.pc>div{padding:22px 30px}
.pc>div+div{border-left:1px solid var(--rule)}
.pc h4{margin:0 0 10px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.pc .pros h4{color:#1B7A47}.pc .cons h4{color:var(--orange-d)}
.pc ul{margin:0;padding:0;list-style:none}
.pc li{position:relative;padding:5px 0 5px 24px;font-size:15.5px;line-height:1.5}
.pc .pros li::before{content:"+";position:absolute;left:0;font:800 17px/1.4 var(--mono);color:#1B7A47}
.pc .cons li::before{content:"–";position:absolute;left:0;font:800 17px/1.4 var(--mono);color:var(--orange-d)}
.prose .themes,.themes{max-width:none;margin:0;padding:16px 30px 22px;border-top:1px dashed var(--rule);font-size:15px;color:var(--mut)}
.themes b{color:var(--ink)}
/* method box */
.mbox{margin:40px 0;padding:32px;background:var(--carbon);color:var(--on)}
.mbox h2{margin-top:0!important;color:#fff}
.mbox p{color:#C9D0DA}
.mbox .sectors i{color:#111}
.mbox .leg li{border-color:var(--line)}
/* faq */
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font:800 18px/1.35 var(--body);cursor:pointer;list-style:none;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;background:var(--ink);clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--orange-d)}
.faq details p{margin:0 0 20px;color:var(--mut)}
.src{font-size:14px;color:var(--mut)}.src li{margin:6px 0;overflow-wrap:anywhere}
.endcta{margin:56px 0 0;padding:36px;background:var(--gulf);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.endcta h2{margin:0!important;font-size:30px!important}
.endcta p{margin:6px 0 0}
.author{display:grid;grid-template-columns:72px 1fr;gap:20px;margin:48px 0 0;padding:26px;background:var(--white);border-top:6px solid var(--gulf-d)}
.author p{margin:6px 0 0;font-size:15.5px;color:var(--mut)}
.related{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.related a{display:block;padding:22px;background:var(--carbon);color:#fff;text-decoration:none;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.related a b{display:block;margin-top:8px;font:800 italic 20px/1.1 var(--disp);text-transform:uppercase}
/* rail */
.rail{position:sticky;top:104px;align-self:start}
.rail .qp{background:var(--carbon);color:var(--on);padding:22px}
.rail h4{margin:0 0 14px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gulf)}
.rail ol{margin:0;padding:0;list-style:none}
.rail li a{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none}
.rail li .n{font:900 italic 20px/1 var(--disp);color:var(--gulf)}
.rail li:first-child .n{color:var(--orange)}
.rail li b{display:block;font:700 14.5px/1.25 var(--body)}
.rail li span{font:500 12px/1.3 var(--mono);color:var(--on-mut)}
.rail .btn-amz{width:100%;margin-top:14px}
.toc{margin-top:16px;padding:20px 22px;background:var(--white)}
.toc a{display:block;padding:7px 0;font-size:14.5px;color:var(--mut);text-decoration:none;border-left:3px solid transparent;padding-left:10px}
.toc a:hover{color:var(--ink);border-color:var(--orange)}
.toc h4{color:var(--gulf-d)}
.mob-bar{display:none}
/* ---------- responsive ---------- */
@media (max-width:1100px){.alay{grid-template-columns:1fr}.rail{display:none}.bay-row{grid-template-columns:1fr 1fr}}
@media (max-width:960px){
 html.js .nav,html.js .hdr .btn-gulf{display:none}html.js .menu-btn{display:inline-flex}
 .meth,.pitbox{grid-template-columns:1fr}
 .ahero .wrap{grid-template-columns:1fr}
 .ahero .pack{max-width:420px}
}
@media (max-width:640px){
 body{font-size:17px}
 .wrap{padding:0 20px}
 .hdr .wrap{height:66px;gap:12px}.sheet{inset:72px 0 0 0}
 .logo{font-size:20px}.logo .rd{width:34px;height:34px}
 .hero{min-height:760px;max-height:none}
 .hero-tag{left:20px;right:20px;top:18px;justify-content:flex-start}.hero-tag .chip{padding:8px 10px;font-size:11px}
 .scene svg{max-width:none;width:706px;height:441px;left:calc(50% - 446px);top:6px}
 .hero-copy{padding-bottom:36px}.ctas{flex-direction:column}.ctas .btn{width:100%}
 .hero h1{font-size:50px;line-height:.92}
 .hero-row{flex-direction:column;align-items:flex-start;gap:22px;margin-top:20px}
 .hero-row p{font-size:17px}
 .ctas{width:100%}.ctas .btn{flex:1;justify-content:center;padding:0 16px}
 .tele .wrap{grid-template-columns:1fr 1fr}
 .tele .wrap>div{padding:20px 14px 20px 14px;border-left:0;border-top:1px solid var(--line)}
 .tele .wrap>div:nth-child(-n+2){border-top:0}.tele .wrap>div:nth-child(odd){padding-left:0}.tele .wrap>div:nth-child(even){border-left:1px solid var(--line)}
 .tele b{font-size:24px}
 .sec{padding:72px 0}.sh{flex-direction:column;align-items:flex-start;margin-bottom:30px}
 .grid-start{grid-template-columns:1fr;gap:20px}.grid-start .gc:nth-child(even),.grid-start .gc.rv.in:nth-child(even){transform:none}
 .gc h3{font-size:23px}
 .bay-row{grid-template-columns:1fr;gap:12px}
 .bay{min-height:0;display:grid;grid-template-columns:96px 1fr;gap:0 16px;padding:20px 20px 20px 16px;align-items:center}
 .bay .ic{height:96px;margin:0;grid-row:1/4}.bay .ic svg{height:88px}
 .bay h3{margin:6px 0 4px;font-size:20px}.bay p{font-size:14px;padding-right:40px}.bay .go{width:34px;height:34px;bottom:auto;top:50%;margin-top:-17px;right:14px}
 .promise{padding:72px 0 130px}.promise::before{height:36px;bottom:30px}
 .pitbox{padding:30px 22px;border-left-width:6px}
 .pitform{flex-direction:column;gap:10px}.pitform input{border-right:2px solid #3A4250}.pitform .btn{clip-path:none;justify-content:center}
 .fcols{grid-template-columns:1fr 1fr;gap:28px}.fcols>div:first-child{grid-column:1/-1}
 .ftr .word{margin:40px 0 28px}
 /* article */
 .ahero{padding:28px 0 120px}
 .ahero h1{font-size:37px;margin:14px 0 12px}
 .dek{font-size:17.5px}
 .ahero .pack{width:160px;margin:0 auto -70px}
 .by{font-size:14px}
 .alay{padding:0 20px 60px;gap:0}
 .answer{margin:-90px 0 36px;padding:24px 20px 20px;border-left-width:6px}
 .answer .big{font-size:18.5px}
 .pole{grid-template-columns:1fr;gap:8px}
 .pole a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-top:0;border-left:4px solid var(--rule)}
 .pole a.p1{border-left-color:var(--orange)}
 .pole .nm{margin:4px 0 0;font-size:16px}.pole .sp{grid-column:2;grid-row:1/3;align-self:center;text-align:right}
 /* table -> cards */
 .lap{background:transparent;overflow:visible}
 .lap caption{display:block;width:100%;padding:0 0 12px;color:var(--gulf-d);border:0;line-height:1.4}
 .lap table,.lap tbody,.lap tr,.lap td{display:block}
 .lap thead{position:absolute;left:-9999px}
 .lap tr{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-bottom:12px;padding:18px 18px 18px 70px;background:var(--carbon);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
 .lap tr:hover td{background:none}
 .lap td{padding:4px 0;border:0}
 .lap td.p{position:absolute;left:18px;top:18px;font-size:30px}
 .lap td[data-l]::before{content:attr(data-l);display:block;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-mut);margin:10px 0 5px}
 .lap td.m,.lap td.cta,.lap td[data-l="Engine rating"]{grid-column:1/-1}.lap td.cta{padding-top:14px}.lap .btn-amz{width:100%;min-height:48px}
 .sbar{width:100%}
 .prod{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
 .prod-top{grid-template-columns:1fr}.prod .pic{min-height:230px}
 .prod .info{padding:22px 20px}
 .prod h3{font-size:24px}
 .readouts{grid-template-columns:1fr 1fr}.readouts div:last-child{grid-column:1/-1}
 .buy{flex-direction:column;align-items:stretch;gap:14px}.buy .btn-amz{width:100%}
 .pc{grid-template-columns:1fr}.pc>div{padding:18px 20px}.pc>div+div{border-left:0;border-top:1px solid var(--rule)}
 .themes{padding:14px 20px 18px}
 .mbox{padding:24px 20px;margin:32px -20px}
 .sectors{height:54px}.sectors i{padding:6px;font-size:11.5px}
 .endcta{grid-template-columns:1fr;padding:26px 20px}.endcta .btn-amz{width:100%}
 .related{grid-template-columns:1fr}
 .author{grid-template-columns:56px 1fr;padding:20px}
 .mob-bar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:40;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:var(--carbon);color:var(--on);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);border-top:4px solid var(--orange);transform:translateY(140%);transition:transform .35s}
 .mob-bar.show{transform:none}
 .mob-bar span{flex:1;min-width:0;font:600 12px/1.3 var(--mono);color:var(--on-mut)}
 .mob-bar span b{display:block;font:900 italic 15px/1.1 var(--disp);color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mob-bar .btn-amz{min-height:48px;padding:0 14px;font-size:14px;flex:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv,html.js .rv,html.js .rv.in{opacity:1!important;transform:none!important}.hero h1 .st::after{transform:skewX(-20deg)}}

/* ---------- Motorlark design v1: ml-* template translation ----------
   Same mockup variables, colours and fonts as above. No content, URL,
   rel or disclosure changes. This section styles the existing ml-*
   template markup so the real page set looks like the mockup.
   New UI text added here uses no em dashes. */
body.ml-body{
  margin:0;background:var(--carbon);color:var(--on);
  font:400 17px/1.65 var(--body);overflow-x:clip;
}
.ml-body a{color:inherit}
.ml-body a:focus-visible,.ml-body button:focus-visible,.ml-body summary:focus-visible{
  outline:3px solid var(--gulf);outline-offset:3px;
}
.ml-container{max-width:1240px;margin:0 auto;padding:0 24px}
.ml-skip{
  position:absolute;left:-999px;top:8px;background:var(--gulf);color:var(--ink);
  padding:10px 14px;z-index:99;text-decoration:none;font-weight:700;
}
.ml-skip:focus{left:8px}
/* Header: sticky carbon bar, Gulf/orange stripe, as in the mockup header */
.ml-site-header{
  position:sticky;top:0;z-index:50;background:rgba(12,13,16,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ml-site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;
  background:linear-gradient(var(--gulf) 0 50%,var(--orange) 50% 100%);
}
.ml-header-inner{display:flex;align-items:center;gap:28px;min-height:72px;flex-wrap:nowrap}
.ml-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
/* Recolour the existing logo SVG for a dark header, by CSS only.
   The SVG markup itself is unchanged. */
.ml-logo svg{width:180px;height:36px;display:block}
.ml-logo svg circle:first-of-type{fill:var(--gulf)}
.ml-logo svg circle:nth-of-type(2){fill:var(--orange)}
.ml-logo svg text{fill:#F4F6F8;font-family:var(--disp);font-style:italic;font-weight:900}
.ml-tagline{margin:0;color:#A9B1BE;font-size:13px;letter-spacing:.04em;display:none}
.ml-site-nav{margin-left:auto}
.ml-site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.ml-site-nav a,.ml-navlink{
  position:relative;white-space:nowrap;padding:12px 14px;
  font:700 13px/1 var(--disp);font-style:normal;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--on-mut);
}
.ml-site-nav a:hover,.ml-navlink:hover,.ml-site-nav a:focus-visible,.ml-navlink:focus-visible{color:var(--on)}
.ml-site-nav a::before,.ml-navlink::before{
  content:"";position:absolute;inset:4px 0;background:var(--panel2);
  transform:skewX(-14deg) scaleX(.6);opacity:0;transition:.25s;z-index:-1;
}
.ml-site-nav a:hover::before,.ml-navlink:hover::before{opacity:1;transform:skewX(-14deg) scaleX(1)}
/* Mobile menu button and sheet, same style as the mockup menu */
.ml-menu-btn{
  display:none;margin-left:auto;align-items:center;gap:10px;min-height:48px;
  padding:0 14px;background:var(--panel);color:var(--on);border:0;
  font:800 italic 13px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.ml-menu-lines{display:grid;gap:5px}
.ml-menu-lines b{display:block;width:22px;height:3px;background:var(--gulf);transform:skewX(-20deg);transition:.3s}
.ml-menu-lines b:nth-child(2){width:15px;background:var(--orange)}
.ml-menu-btn[aria-expanded="true"] .ml-menu-lines b:first-child{transform:translateY(4px) rotate(45deg)}
.ml-menu-btn[aria-expanded="true"] .ml-menu-lines b:nth-child(2){width:22px;transform:translateY(-4px) rotate(-45deg)}
.ml-sheet{
  visibility:hidden;position:fixed;z-index:49;inset:78px 0 0 0;background:var(--carbon);
  padding:28px 24px 40px;transform:translateX(-102%);
  transition:transform .45s cubic-bezier(.7,0,.2,1),visibility 0s .45s;
  display:flex;flex-direction:column;gap:6px;overflow:auto;
}
.ml-sheet.open{visibility:visible;transition-delay:0s;transform:none}
.ml-sheet-nav a,.ml-sheet-footer-nav a{
  display:block;padding:12px 0;border-bottom:1px solid var(--line);
  font:900 italic 26px/1 var(--disp);text-transform:uppercase;text-decoration:none;color:var(--on);
}
.ml-sheet-footer-nav a{font-size:16px;font-weight:700;font-style:normal;text-transform:none}
/* Breadcrumb bar, part of the dark top band */
.ml-breadcrumb-bar{background:var(--carbon);color:#A9B1BE;padding:12px 0 2px}
.ml-breadcrumbs{font:500 13px/1.5 var(--mono)}
.ml-breadcrumbs a{color:#A9B1BE;text-decoration:none}
.ml-breadcrumbs a:hover{color:#fff;text-decoration:underline}
.ml-breadcrumbs ol,.ml-breadcrumbs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ml-breadcrumbs li{display:flex;gap:6px;align-items:center}
.ml-breadcrumbs li + li::before{content:"/";color:var(--orange);font-weight:700}
/* Hero: dark, large italic uppercase headings, Gulf accent word */
.ml-hero{
  position:relative;overflow:hidden;padding:56px 0 64px;color:var(--on);
  background:radial-gradient(90% 80% at 85% 20%,#1A3A50 0,#0E1720 45%,var(--carbon) 80%);
}
.ml-h1{
  margin:16px 0 18px;font-family:var(--disp);font-style:italic;font-weight:900;
  letter-spacing:-.01em;text-transform:uppercase;line-height:.92;
  font-size:clamp(40px,5.6vw,82px);color:var(--on);
}
/* Mockup headline stripe, CSS only, no text change. The H1 text itself
   is kept word for word from the original page (see CHANGES.md for the
   home H1 brand-name conflict). */
.ml-hero .ml-h1::after{
  content:"";display:block;width:120px;height:8px;background:var(--orange);
  transform:skewX(-20deg);margin-top:18px;
}
.ml-hero-answer{max-width:640px;margin:0 0 26px;font-size:20px;line-height:1.5;color:#C9D0DA}
.ml-kicker{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gulf);margin:0 0 10px}
.ml-meta{display:flex;flex-wrap:wrap;gap:14px 18px;font-size:15px;color:#C9D0DA;margin:0 0 18px}
.ml-meta-label{font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-mut);margin-right:4px}
/* Mockup verified pill/badge, using the existing last_verified meta item only. */
.ml-meta-verified{
  display:inline-flex;align-items:center;gap:8px;padding:9px 12px;
  background:rgba(54,196,122,.12);border:1px solid rgba(54,196,122,.4);
  font:600 12.5px/1 var(--mono);color:#9BE8BE;
}
.ml-meta-verified::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.ml-disclosure{
  margin:16px 0 0;padding:12px 14px;font-size:14px;line-height:1.55;color:#C9D0DA;
  background:rgba(255,255,255,.08);border-left:4px solid var(--orange);max-width:760px;
}
.ml-disclosure a{color:var(--gulf)}
/* Mockup hero CTA row, using the existing trust strip links only.
   No new link text or URL is added; the links are restyled as buttons. */
.ml-trust-strip{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px;color:#C9D0DA}
.ml-trust-strip a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border:2px solid #4A5363;color:var(--on);text-decoration:none;
  font:800 italic 13px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;
}
.ml-trust-strip a:hover{border-color:var(--gulf);color:#fff}
.ml-trust-strip span::before{content:">";color:var(--orange);font-weight:700;margin-right:6px}
/* Mockup CTA button, using the existing how-we-choose link only. */
.ml-how-link{margin:0 0 24px}
.ml-how-link a{
  display:inline-flex;align-items:center;min-height:52px;padding:0 26px;
  background:var(--gulf);color:var(--ink);text-decoration:none;
  font:800 italic 14px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.ml-how-link a:hover{color:var(--ink)}
/* Article and page body: light paper background for long reading */
.ml-main{background:var(--paper);color:var(--ink)}
.ml-layout{padding-top:28px;padding-bottom:36px}
.ml-article{min-width:0;background:transparent;color:var(--ink)}
.ml-article-wide{padding-top:28px;padding-bottom:36px;max-width:860px}
.ml-article p{margin-top:0;margin-bottom:16px}
.ml-article ul,.ml-article ol{margin-top:0;margin-bottom:16px;padding-left:22px}
.ml-article li{margin-bottom:6px}
.ml-article a{color:var(--gulf-d);text-underline-offset:2px}
.ml-article a:hover{color:var(--orange-d)}
.ml-section{margin:0 0 36px}
.ml-h2{
  font-family:var(--disp);font-style:italic;font-weight:900;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.08;margin:28px 0 14px;padding-bottom:10px;
  border-bottom:3px solid var(--ink);font-size:clamp(28px,3vw,40px);color:var(--ink);
}
.ml-h2::after{content:"";display:block;width:52px;height:4px;background:var(--orange);margin-top:10px}
.ml-h3{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:22px;color:var(--ink)}
/* TOC: collapsible on mobile, sticky rail on desktop (right rail, as in mockup) */
.ml-toc-col{margin-bottom:24px}
.ml-toc{background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--orange)}
.ml-toc-desktop{display:none}
.ml-toc-mobile{display:block}
.ml-toc-title{
  font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:17px;margin:0;padding:14px 16px;cursor:pointer;color:var(--ink);
}
.ml-toc-desktop .ml-toc-title{cursor:default}
.ml-toc ul{list-style:none;margin:0;padding:0 16px 16px}
.ml-toc li{border-top:1px solid var(--rule)}
.ml-toc li:first-child{border-top:0}
.ml-toc a,.ml-toc-link{display:block;padding:9px 0;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.45}
.ml-toc a:hover,.ml-toc-link:hover{color:var(--orange-d)}
.ml-toc-mobile summary{list-style-position:inside}
.ml-toc-mobile summary::-webkit-details-marker{color:var(--orange-d)}
/* Takeaways: white card with orange left bar, as in mockup answer box */
.ml-takeaways{background:var(--white);border:1px solid var(--rule);border-left:10px solid var(--orange);padding:24px 26px;box-shadow:0 24px 40px -32px rgba(12,13,16,.45)}
.ml-takeaways .ml-h2{border-bottom:0;padding-bottom:0;margin-top:0}
.ml-takeaways .ml-h2::after{display:none}
/* Product box: white card with cut corner, dark fact strip, orange Amazon button */
.ml-item{
  background:var(--white);border:1px solid var(--rule);margin:0 0 32px;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
  box-shadow:0 1px 0 var(--rule);
}
.ml-item-strip{background:var(--carbon);color:var(--on);display:flex;flex-direction:column}
.ml-fact{padding:14px 16px;border-bottom:1px solid #3F3F46}
.ml-fact:last-child{border-bottom:0}
.ml-fact-label{display:block;font:700 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#A9B1BE;margin-bottom:3px}
.ml-fact-value{display:block;font-weight:700;line-height:1.4;color:var(--gulf)}
.ml-fact-cta{display:flex;align-items:center}
.ml-fact-cta .ml-cta{width:100%}
.ml-item-body{padding:22px 24px}
.ml-item-title{font-family:var(--disp);font-style:italic;font-weight:900;text-transform:uppercase;font-size:26px;line-height:1.05;margin:0 0 12px;color:var(--ink)}
.ml-spec-sheet{border-top:1px solid var(--rule);margin:16px 0}
.ml-spec-sheet .ml-spec-row,.ml-spec-row{
  display:flex;justify-content:space-between;gap:16px;padding:10px 12px;
  border-bottom:1px solid var(--rule);font-size:15px;line-height:1.5;
}
.ml-spec-sheet .ml-spec-row:nth-child(odd),.ml-spec-row:nth-child(odd){background:var(--paper)}
.ml-spec-label{color:var(--mut)}
.ml-spec-value{font-weight:700;text-align:right}
/* Buttons: Amazon button in mockup orange, other buttons in carbon */
.ml-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;
  padding:0 22px;background:var(--amz);color:#111;text-decoration:none;border-radius:4px;
  font-weight:700;font-size:15px;line-height:1;box-shadow:0 6px 0 -2px #B86E00;
  transition:transform .15s,box-shadow .15s;text-align:center;
}
.ml-cta:hover{transform:translateY(2px);box-shadow:0 3px 0 -2px #B86E00;color:#111}
.ml-btn{
  display:inline-block;background:var(--carbon);color:var(--on);text-decoration:none;
  font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:15px;line-height:1.3;padding:12px 26px;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);border:0;cursor:pointer;
}
.ml-btn:hover{background:var(--panel2);color:var(--on)}
/* Tables: dark header, scroll wrapper, sticky first column */
.ml-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);background:var(--white)}
.ml-table-wrap.ml-is-scrolled{box-shadow:inset -12px 0 12px -12px rgba(0,0,0,.25)}
.ml-table-wrap table{border-collapse:collapse;width:100%;min-width:680px;font-size:15px;line-height:1.5;color:var(--ink)}
.ml-table-wrap th,.ml-table-wrap td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.ml-table-wrap thead th{background:var(--carbon);color:var(--on);font-family:var(--disp);font-style:italic;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.ml-table-wrap tbody th,.ml-table-wrap tbody td:first-child{font-weight:700}
.ml-table-wrap th:first-child,.ml-table-wrap td:first-child{position:sticky;left:0;z-index:1;background:var(--white)}
.ml-table-wrap thead th:first-child{background:var(--carbon);z-index:2}
.ml-table-wrap tbody tr:nth-child(even) td:not(:first-child){background:var(--paper)}
/* Verdict, pros/cons, team box, research note */
.ml-verdict{background:var(--carbon);color:var(--on);padding:22px;margin:0 0 32px;border-top:5px solid var(--orange)}
.ml-verdict-title{font-family:var(--disp);font-style:italic;font-weight:900;text-transform:uppercase;font-size:24px;margin:0 0 10px;color:var(--on)}
.ml-verdict p:last-child{margin-bottom:0}
.ml-proscons{margin:0 0 32px}
.ml-proscons ul{list-style:none;padding-left:0}
.ml-proscons li{padding-left:22px;position:relative}
.ml-teambox{background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--carbon);padding:20px;margin:0 0 32px}
.ml-teambox-title{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;font-size:19px;margin:0 0 8px;color:var(--ink)}
.ml-teambox p:last-child{margin-bottom:0}
.ml-research-note{background:var(--paper);border-left:4px solid var(--carbon);padding:12px 14px;font-size:15px;color:var(--ink)}
/* FAQ: native details, works with JS off */
.ml-faq details{background:var(--white);border:1px solid var(--rule);margin-bottom:10px}
.ml-faq summary{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;padding:14px 16px;cursor:pointer;color:var(--ink)}
.ml-faq summary::marker{color:var(--orange-d)}
.ml-faq details > p,.ml-faq details > div{padding:0 16px 16px;margin:0}
/* Cards: cut-corner cards, 2 column grid on desktop, single column on mobile */
.ml-card-list{display:grid;grid-template-columns:1fr;gap:18px}
.ml-card{
  background:var(--white);border:1px solid var(--rule);border-top:6px solid var(--ink);
  padding:22px 24px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}
.ml-card:nth-child(1){border-top-color:var(--orange)}
.ml-card:nth-child(2){border-top-color:var(--gulf-d)}
.ml-card-title{font-family:var(--disp);font-style:italic;font-weight:900;text-transform:uppercase;font-size:22px;line-height:1.1;margin:0 0 8px;color:var(--ink)}
.ml-card-title a{color:var(--ink);text-decoration:none}
.ml-card-title a:hover{color:var(--orange-d)}
.ml-card-text{margin:0 0 8px;color:var(--mut)}
.ml-card-meta{margin:0;color:var(--mut);font-size:14px}
/* Sponsored note, kept class name, styled as a plain card */
.mkg-sponsored{background:var(--white);border:1px solid var(--rule);border-left:6px solid var(--gulf-d);padding:18px 20px;margin:0 0 32px}
.mkg-sponsored-label{font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gulf-d);margin:0 0 8px}
.mkg-sponsored-text{margin:0;color:var(--mut)}
/* Footer: carbon, Gulf/orange stripe, large outline wordmark */
.ml-site-footer{position:relative;background:var(--carbon);color:#D0D6DF;padding:0 0 30px;overflow:hidden}
.ml-site-footer::before{content:"";display:block;height:6px;background:linear-gradient(var(--gulf) 0 55%,var(--orange) 55% 100%)}
.ml-footer-word{
  margin:40px 0 28px;font:900 italic clamp(40px,11.2vw,140px)/.86 var(--disp);
  text-transform:uppercase;letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:2px #39404D;white-space:nowrap;overflow:hidden;
}
.ml-footer-word span{color:var(--gulf);-webkit-text-stroke:0}
.ml-footer-nav ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.ml-footer-nav a{color:var(--on);text-decoration:none;font-family:var(--disp);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.ml-footer-nav a:hover{text-decoration:underline}
.ml-footer-note,.ml-footer-copy{font-size:14px;line-height:1.6;margin:0 0 10px;max-width:760px;color:var(--on-mut)}
.ml-footer-copy{margin-bottom:0}
/* Forms in core pages: keep fields, style inputs in mockup pit form style */
.ml-article input,.ml-article textarea,.ml-article select{
  width:100%;max-width:100%;min-height:52px;padding:0 16px;background:var(--white);
  border:2px solid #3A4250;color:var(--ink);font:500 16px var(--mono);box-sizing:border-box;
}
.ml-article textarea{min-height:140px;padding:14px 16px}
.ml-article button[type="submit"]{
  min-height:52px;padding:0 26px;background:var(--gulf);color:var(--ink);border:0;cursor:pointer;
  font:800 italic 14px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
/* Responsive: menu at 960px and below, as in mockup */
@media (min-width:640px){
  .ml-h1{font-size:52px}
  .ml-item-strip{flex-direction:row;flex-wrap:wrap}
  .ml-fact{flex:1 1 160px;border-bottom:0;border-right:1px solid #3F3F46}
  .ml-fact:last-child{border-right:0}
  .ml-fact-cta{flex:1 1 200px}
  .ml-item-body{padding:24px}
  .ml-card-list{grid-template-columns:1fr 1fr}
  .ml-proscons{display:flex;gap:20px}
}
@media (min-width:1024px){
  .ml-tagline{display:block}
  .ml-h1{font-size:60px}
  .ml-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
  .ml-toc-col{grid-column:2;grid-row:1;position:sticky;top:104px;margin-bottom:0}
  .ml-article{grid-column:1;grid-row:1}
  .ml-toc-desktop{display:block}
  .ml-toc-mobile{display:none}
  .ml-article-wide{max-width:860px}
}
/* Reviewer rule 2, menu part: without JS, the primary nav stays visible
   and wraps on mobile, with 44px tap targets, and the menu button stays
   hidden. Only when html has the js class does the nav hide and the
   menu button show. The sheet itself is a duplicate menu, never the
   only copy of the nav links. */
@media (max-width:960px){
  .ml-site-nav a,.ml-navlink{min-height:44px;display:inline-flex;align-items:center}
  html.js .ml-site-nav,html.js .ml-tagline{display:none}
  html.js .ml-menu-btn{display:inline-flex}
  .ml-header-inner{gap:12px}
  html:not(.js) .ml-header-inner{flex-wrap:wrap}
  html:not(.js) .ml-site-nav{flex-basis:100%;margin-left:0;display:flex;flex-wrap:wrap;gap:4px 14px}
}
@media (max-width:640px){
  .ml-container{padding:0 20px}
  .ml-header-inner{min-height:66px}
  .ml-sheet{inset:72px 0 0 0}
  .ml-hero{padding:28px 0 48px}
  .ml-h1{font-size:37px}
  .ml-hero-answer{font-size:17.5px}
  .ml-card-list{grid-template-columns:1fr}
  .ml-footer-word{margin:28px 0 20px}
  .ml-table-wrap table{min-width:100%}
  .ml-table-wrap th:first-child,.ml-table-wrap td:first-child{position:static}
}
@media (max-width:760px){
  main table,article table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  main img,main svg{max-width:100%;height:auto}
  main a{overflow-wrap:anywhere}
  html,body{overflow-x:clip;max-width:100%}
  .ml-toc li,.ml-toc a{white-space:normal;min-width:0;max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto}
  .rv,html.js .rv,html.js .rv.in{opacity:1 !important;transform:none !important}
}

/* Home headline markup from hero_title_html (mockup .o and .st spans) */
.ml-hero .ml-h1 .o{color:var(--gulf)}
.ml-hero .ml-h1 .st{display:inline-block;position:relative;z-index:0}
.ml-hero .ml-h1 .st::after{content:"";position:absolute;left:2%;right:-2%;bottom:.06em;height:.12em;background:var(--orange);transform:skewX(-20deg);z-index:-1}
.ml-hero .ml-h1:has(.st)::after{display:none}