/* Teddy Axle Co. site styles.
   Look: white pages, real shop photos, one upright grotesque, the logo's red used sparingly.
   Dark is kept for three places only: the photo hero, the numbers band and the closing call. */
:root{
  color-scheme:light;
  --red:#df0011;            /* logo red: primary actions and accents */
  --red-d:#b8000e;          /* hover */
  --red-hi:#c8000f;         /* red text on white */
  --red-ink:#fff;
  --ink:#151515; --ink-2:#444; --ink-3:#6c6c6c;
  --line:#e4e4e3; --line-2:#cfcfce;
  --bg:#fff; --bg-2:#f5f5f4; --dark:#141414;
  --r:4px;
  --sh:0 1px 2px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.07);
  --f:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --g:clamp(16px,4vw,48px);
  /* older names still referenced by the portal and inline bits */
  --blk:var(--dark); --floor:var(--bg); --bench:var(--bg-2); --panel:#fff; --rule:var(--line-2); --rule-soft:var(--line);
  --sheet:#fff; --sheet-2:var(--bg-2); --sheet-rule:var(--line);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:#fff}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wrap{max-width:1280px;margin-inline:auto;padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r);padding:15px 24px;font:700 16px/1 var(--f);text-decoration:none;color:#fff;background:var(--red);transition:background .15s}
.btn:hover{background:var(--red-d)}
.btn-sm{padding:11px 16px;font-size:14.5px}
.btn-line{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.arrow{display:inline-block;border:0;background:none;padding:0;font:700 15.5px/1.2 var(--f);text-decoration:none;color:var(--ink);cursor:pointer}
.arrow::after{content:" \2192";color:var(--red)}
.arrow:hover{color:var(--red-hi)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:32px;min-height:74px}
.brand{display:block;flex:none;line-height:0}
.brand img{display:block;height:52px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;min-width:0}
.nav a{font:600 15px/1 var(--f);text-decoration:none;color:var(--ink-2);white-space:nowrap;padding-block:12px}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.top-cta{display:flex;align-items:center;gap:18px;flex:none}
.top-phone{font:700 15px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;user-select:all}
.menu{display:none;border:1.5px solid var(--ink);border-radius:var(--r);background:none;padding:10px 14px;font:700 14.5px/1 var(--f);color:var(--ink)}
.menu[aria-expanded="true"]{background:var(--ink);color:#fff}
@media (max-width:1180px){
  .menu{display:block;margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line-2);box-shadow:0 18px 30px rgba(0,0,0,.08);padding:4px max(var(--g),env(safe-area-inset-right,0px)) 12px max(var(--g),env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav a{padding:15px 0;font-size:16.5px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]{box-shadow:none;color:var(--red-hi)}
}
@media (max-width:560px){.top-phone{display:none}.top-in{gap:10px;min-height:64px}.brand img{height:44px}.top .btn-sm{padding:10px 13px;font-size:13.5px}.menu{padding:9px 11px;font-size:13.5px}}

/* home: photo hero */
.hero-photo{position:relative;isolation:isolate;display:grid;place-items:center;min-height:clamp(460px,72vh,680px);padding:clamp(56px,8vw,104px) 0;color:#fff;text-align:center;background:#1b1b1b center 64%/cover no-repeat;border-bottom:6px solid var(--red)}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,13,13,.64),rgba(13,13,13,.76))}
.hero-photo h1{font:800 clamp(34px,5.4vw,66px)/1.05 var(--f);letter-spacing:-.025em;max-width:18ch;margin-inline:auto;text-wrap:balance}
.hero-photo p{font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:#eee;max-width:60ch;margin:22px auto 0;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin-top:32px}

/* section headings */
.band{padding-block:clamp(56px,7vw,104px)}
.band-alt{background:var(--bg-2)}
.head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px 56px;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.head h1,.stats h1{font:800 clamp(34px,4.6vw,58px)/1.05 var(--f);letter-spacing:-.025em;text-wrap:balance}
.head h2,.h2{font:800 clamp(28px,3.5vw,44px)/1.1 var(--f);letter-spacing:-.02em;text-wrap:balance}
.head h1::before,.stats h1::before,.head h2::before,.h2::before{content:"";display:block;width:44px;height:4px;background:var(--red);margin-bottom:20px}
.head p.sub,.sub{font-size:18.5px;line-height:1.55;color:var(--ink-2);max-width:48ch}
@media (max-width:860px){.head{grid-template-columns:minmax(0,1fr)}}

/* ---------- teardown ---------- */
.tear{padding-top:clamp(48px,6vw,84px)}
.tear .head{margin-bottom:clamp(22px,2.6vw,34px)}
.h2 .apart{display:inline-block;letter-spacing:calc(-.02em + var(--pull,0)*.08em);color:var(--red)}
.stage{position:relative;height:clamp(540px,calc(100vh - 150px),860px);background:linear-gradient(180deg,#fbfbfb 0%,#f2f2f1 60%,#e7e7e6 100%);border-block:1px solid var(--line);overflow:hidden;--sg:max(var(--g),env(safe-area-inset-left,0px));--sgr:max(var(--g),env(safe-area-inset-right,0px))}
.vp{position:absolute;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;outline-offset:-4px}
#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ld{stroke:var(--ink);stroke-width:1;opacity:.55}
.dm,.dx{stroke:var(--red-hi);fill:none;stroke-width:1.5}
.dx{stroke-dasharray:3 3;opacity:.75}
.dt{fill:var(--red-hi);font:700 13px var(--f);paint-order:stroke;stroke:#fff;stroke-width:5px}
#balloons{position:absolute;inset:0;pointer-events:none}
.bl{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:700 12px/1 var(--f);font-variant-numeric:tabular-nums;padding:0;pointer-events:auto;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bl:hover,.bl.on{background:var(--red);border-color:var(--red);color:#fff}
.tip{position:absolute;left:0;top:0;z-index:3;pointer-events:none;background:var(--dark);color:#fff;border-radius:var(--r);padding:7px 10px;font:600 13px/1 var(--f);white-space:pre}
.hint{position:absolute;left:var(--sg);bottom:104px;font:500 14px/1 var(--f);color:var(--ink-3);pointer-events:none;transition:opacity .5s}
.hint.gone{opacity:0}
.glfail{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--ink-2)}
.glfail strong{display:block;font:800 24px/1.1 var(--f);color:var(--ink);margin-bottom:10px}
.pane{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh)}
.lbl{font:600 13px/1 var(--f);color:var(--ink-3)}

.bar{position:absolute;z-index:2;top:16px;left:var(--sg);right:calc(var(--sgr) + 336px);display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;pointer-events:none}
.bar>*{pointer-events:auto}
.seg,.chips,.tools{display:flex;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden}
.seg button,.chips button,.tools button{border:0;background:none;padding:10px 13px;font:600 14px/1 var(--f);color:var(--ink-2);white-space:nowrap}
.seg button+button,.chips button+button{border-left:1px solid var(--line)}
.seg button:hover,.chips button:hover,.tools button:hover{color:var(--ink);background:var(--bg-2)}
.seg button[aria-pressed="true"],.chips button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg-type button{font-weight:700;padding:10px 17px}
.chips{align-items:stretch}
.chips .lbl{display:flex;align-items:center;padding:0 11px;border-right:1px solid var(--line)}
.chips button{font-variant-numeric:tabular-nums;padding:10px 10px}
.tools{margin-left:auto}
.tools button{padding:10px 11px;display:flex;align-items:center;gap:7px}
.tools button[aria-pressed]::before{content:"";width:13px;height:13px;border:1.5px solid var(--ink-3);border-radius:3px;flex:none}
.tools button[aria-pressed="true"]{color:var(--ink)}
.tools button[aria-pressed="true"]::before{background:var(--red);border-color:var(--red);box-shadow:inset 0 0 0 2px #fff}
.tools .sep{width:1px;background:var(--line);margin-block:7px}
.tools .zb{font-size:18px;font-weight:600;padding:7px 11px}

.bom{position:absolute;z-index:2;top:16px;bottom:16px;right:var(--sgr);width:320px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.bom-h{padding:15px 16px 13px;border-bottom:1px solid var(--line)}
.bom-t{display:block;font:800 17px/1 var(--f);letter-spacing:-.01em}
.bom-sub{display:block;margin-top:6px;font:500 13.5px/1.2 var(--f);color:var(--ink-3)}
.bom-list{overflow-y:auto;flex:1;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.bom-list li{border-bottom:1px solid var(--line)}
.bom-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:6px 16px;min-height:37px}
.bom-row:hover,.bom-row.hov{background:var(--bg-2)}
.bom-row .bn{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font:700 11px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.bom-row .bname{font:600 15px/1.2 var(--f);color:var(--ink)}
.bom-row .bq{font:500 13px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.bom-row[aria-expanded="true"]{background:#fdf1f1}
.bom-row[aria-expanded="true"] .bn{background:var(--red);border-color:var(--red);color:#fff}
.bom-d{padding:4px 16px 16px 50px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.tags{display:grid;gap:4px;margin-top:10px}
.tags li{font:700 13.5px/1.3 var(--f);color:var(--ink);padding-left:14px;position:relative}
.tags li::before{content:"";position:absolute;left:0;top:.42em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.bom-a{display:flex;gap:16px;margin-top:12px}
.bom-a button{border:0;background:none;padding:0;font:700 14px/1 var(--f);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.bom-a button:hover,.bom-a button[aria-pressed="true"]{color:var(--red-hi);text-decoration-color:var(--red)}

.dock{position:absolute;z-index:2;left:var(--sg);right:calc(var(--sgr) + 336px);bottom:16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:10px 16px}
.play{display:flex;align-items:center;gap:10px;border:0;background:none;padding:6px 2px;font:700 15px/1 var(--f);color:var(--ink);min-width:10.5em}
.play:hover{color:var(--red-hi)}
.play i{width:34px;height:34px;border-radius:50%;background:var(--red);display:grid;place-items:center;flex:none}
.play i::before{content:"";border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;margin-left:3px}
.play.rev i::before{transform:scaleX(-1);margin-left:-3px}
.pull{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.pull input{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;margin:0;--p:0}
.pull input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--red) calc(var(--p)*1%),var(--line-2) calc(var(--p)*1%))}
.pull input::-moz-range-track{height:6px;border-radius:3px;background:var(--line-2)}
.pull input::-moz-range-progress{height:6px;border-radius:3px;background:var(--red)}
.pull input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border:3px solid #fff;border-radius:50%;background:var(--red);box-shadow:0 1px 6px rgba(0,0,0,.35);cursor:ew-resize}
.pull input::-moz-range-thumb{width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:var(--red);box-shadow:0 1px 6px rgba(0,0,0,.35);cursor:ew-resize}
.ticks{display:none}
.tourbtn{border:0;border-radius:var(--r);background:none;box-shadow:inset 0 0 0 1.5px var(--ink);padding:11px 15px;font:700 14.5px/1 var(--f);white-space:nowrap}
.tourbtn:hover{background:var(--ink);color:#fff}

.tour{position:absolute;z-index:3;left:var(--sg);bottom:98px;width:min(400px,calc(100% - var(--sg)*2));padding:18px 20px}
.tour-n{font:700 13px/1 var(--f);color:var(--red-hi)}
.tour h3,.pc h3{font:800 21px/1.15 var(--f);letter-spacing:-.01em;margin:8px 0 6px}
.tour p,.pc p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.tour-nav{display:flex;align-items:center;gap:16px;margin-top:14px}
.tour-nav .txt{border:0;background:none;padding:0;font:600 14px/1 var(--f);color:var(--ink-2)}
.tour-nav .txt:hover{color:var(--ink)}
.tour-nav .end{margin-left:auto}
.pc{display:none}

@media (max-width:1180px){.bar,.dock{right:calc(var(--sgr) + 296px)}.bom{width:280px}.play{min-width:0}.play span{display:none}}
@media (max-width:900px){
  .stage{height:auto;overflow:visible;display:flex;flex-direction:column;background:#fff;border-bottom:0}
  .vp{position:relative;inset:auto;height:clamp(320px,58vh,460px);background:linear-gradient(180deg,#fbfbfb 0%,#f2f2f1 60%,#e7e7e6 100%);overflow:hidden}
  .hint{left:16px;bottom:12px}
  .dock,.bar,.bom,.tour{position:static;width:auto}
  .pane.dock,.pane.tour{border-width:1px 0;border-radius:0;box-shadow:none}
  .dock{order:1;margin:0;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));gap:12px}
  .pull{grid-template-columns:minmax(0,1fr)}
  .pull .lbl{display:none}
  .tour{order:0;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .bar{order:2;padding:14px max(16px,env(safe-area-inset-right,0px)) 4px max(16px,env(safe-area-inset-left,0px))}
  .chips{flex-wrap:wrap;max-width:100%}
  .tools{margin-left:0;flex-wrap:wrap}
  .bom{order:3;margin:14px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));box-shadow:none}
  .bom-list{overflow:visible}
  .pc.show{display:block;position:absolute;z-index:3;left:8px;right:8px;bottom:8px;padding:12px 44px 12px 14px}
  .pc h3{font-size:18px;margin:0 0 4px}
  .pc p{font-size:14px;line-height:1.45}
  .pc button{position:absolute;top:4px;right:4px;width:36px;height:36px;border:0;background:none;font:600 22px/1 var(--f);color:var(--ink-2)}
  .pc.show~.hint{display:none}
}

/* numbers band */
.stats{background:var(--dark);color:#f3f3f3;padding-block:clamp(48px,6vw,88px)}
.stats h1::before{background:var(--red)}
.stats-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px}
.stats h1+.stats-in{margin-top:clamp(32px,4vw,52px)}
.stats-in.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{border-top:3px solid var(--red);padding-top:18px}
.stat b{display:block;font:800 clamp(34px,4vw,54px)/1 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.stat b small{font-size:.42em;font-weight:700;letter-spacing:0;margin-left:.3em;color:#cfcfcf}
.stat span{display:block;margin-top:12px;font-size:16.5px;line-height:1.5;color:#bdbdbd;max-width:32ch}
@media (max-width:980px){.stats-in.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.stats-in,.stats-in.four{grid-template-columns:minmax(0,1fr)}}

/* text beside a photo */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,76px);align-items:center}
.split img,.photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--bg-2)}
.split p{margin-top:16px;font-size:18px;color:var(--ink-2);max-width:52ch}
.split .checks{margin-top:22px}
.split .hero-actions{justify-content:flex-start;margin-top:28px}
.checks{display:grid;gap:10px;font-size:17px;color:var(--ink)}
.checks li{padding-left:30px;position:relative;font-weight:600}
.checks li::before{content:"";position:absolute;left:2px;top:.36em;width:14px;height:8px;border:solid var(--red);border-width:0 0 3px 3px;transform:rotate(-45deg)}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.split.flip img{order:-1}}

/* home: doors into the other pages */
.teasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}
.teaser{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.teaser img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--bg-2)}
.teaser div{padding-top:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.teaser h3{font:800 22px/1.2 var(--f);letter-spacing:-.01em}
.teaser p{font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.teaser span{margin-top:6px;font:700 15px/1.2 var(--f);color:var(--ink)}
.teaser span::after{content:" \2192";color:var(--red)}
.teaser:hover h3,.teaser:hover span{color:var(--red-hi)}
@media (max-width:980px){.teasers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.teasers{grid-template-columns:minmax(0,1fr)}}

/* how it's built */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;counter-reset:step}
.step{counter-increment:step;border-top:1px solid var(--line-2);padding:22px 0 38px}
.step::before{content:counter(step,decimal-leading-zero);display:block;font:800 15px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--red-hi);margin-bottom:14px}
.step h3{font:800 21px/1.2 var(--f);letter-spacing:-.01em}
.step p{font-size:16.5px;color:var(--ink-2);margin-top:8px}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;margin-top:16px}
.shots img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);background:var(--bg-2)}
.shots figcaption{font:500 15px/1.4 var(--f);color:var(--ink-2);margin-top:10px}
.built-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:40px}
.built-cta p{color:var(--ink-3);font-size:15.5px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.steps,.shots{grid-template-columns:minmax(0,1fr)}.step{padding-bottom:26px}}

/* why Teddy */
.proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.proof{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:28px 30px 30px}
.proof h3{font:800 22px/1.2 var(--f);letter-spacing:-.01em}
.proof>p{font-size:16.5px;color:var(--ink-2);margin-top:8px;max-width:58ch}
.bars{display:grid;gap:14px;margin-top:22px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.bar-row span{font:600 14.5px/1.2 var(--f);color:var(--ink-2)}
.bar-row i{display:flex;align-items:center;justify-content:flex-end;height:34px;padding-right:11px;border-radius:2px;background:#8a8a8a;font:700 15px/1 var(--f);font-style:normal;font-variant-numeric:tabular-nums;color:#fff}
.bar-row.hi i{background:var(--red)}
.axis{display:flex;justify-content:space-between;font:500 13px/1 var(--f);color:var(--ink-3);margin-top:8px}
.rig{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;margin-top:18px}
.rig svg{width:100%;height:auto;display:block;max-width:420px}
.rig .s1{stroke:var(--ink-3);fill:none;stroke-width:1.5}
.rig .s2{fill:var(--ink)}
.rig .beam{stroke:var(--ink);fill:none;stroke-width:11;stroke-linecap:round}
.rig .ram{fill:var(--red)}
.count{text-align:right}
.count b{display:block;font:800 clamp(32px,4.2vw,48px)/1 var(--f);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink)}
.count span{display:block;font:600 14px/1 var(--f);color:var(--ink-3);margin:8px 0 16px}
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 48px;margin-top:clamp(44px,5.6vw,72px);padding-top:32px;border-top:1px solid var(--line-2)}
.points h3{font:800 20px/1.2 var(--f);letter-spacing:-.01em;margin-bottom:8px}
.points p{font-size:16.5px;color:var(--ink-2)}
@media (max-width:920px){.proofs{grid-template-columns:minmax(0,1fr)}.points{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.rig{grid-template-columns:minmax(0,1fr)}.count{text-align:left}}

/* quote spec card */
.plate{margin-top:28px;max-width:460px;padding:22px 24px;border:1px solid var(--line-2);border-top:4px solid var(--red);border-radius:var(--r);background:#fff}
.plate-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.plate-h b{font:800 20px/1 var(--f);letter-spacing:-.01em}
.plate-h span{font:600 13px/1 var(--f);color:var(--ink-3)}
.plate dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 20px}
.plate dt{font:500 14.5px/1.3 var(--f);color:var(--ink-3)}
.plate dd{font:700 15.5px/1.3 var(--f)}

/* spring or torsion */
.load{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:14px 20px;margin-bottom:24px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r)}
.load label{font:700 15px/1 var(--f)}
.load input[type=range]{flex:1 1 220px;min-width:0;accent-color:var(--red);height:28px}
.load output{font:700 15px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--red-hi);min-width:7.5em}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.type{border:1px solid var(--line-2);border-radius:var(--r);background:#fff;display:flex;flex-direction:column;overflow:hidden}
.type svg{display:block;width:100%;height:auto;background:var(--bg-2);border-bottom:1px solid var(--line)}
.dg .fr{fill:var(--ink)}
.dg .st{stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg .fl{fill:var(--ink-3)}
.dg .tire{stroke:var(--ink);fill:none;stroke-width:14}
.dg .rim{stroke:var(--ink-3);fill:none;stroke-width:1.25}
.dg .gnd{stroke:var(--line-2);stroke-width:2}
.dg .sp{stroke:var(--red);fill:none;stroke-width:4;stroke-linecap:round}
.dg .rub{fill:var(--red)}
.dg .arm{stroke:var(--ink-2);stroke-width:12;stroke-linecap:round}
.dg .hs{fill:#fff;stroke:var(--ink-2);stroke-width:2.5}
.dg .bar{fill:var(--ink-2)}
.dg text{fill:var(--ink-3);font:600 12px var(--f)}
.dg text.y{fill:var(--red-hi)}
.type-b{padding:26px 28px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.type-b h3{font:800 28px/1.1 var(--f);letter-spacing:-.02em}
.type-b h3 small{display:block;font:600 15px/1 var(--f);letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--red-hi);margin-top:10px}
.type-b ul{display:grid;gap:9px;font-size:16.5px;color:var(--ink-2)}
.type-b li{padding-left:16px;position:relative}
.type-b li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.type-b .arrow{align-self:flex-start;margin-top:auto}
@media (max-width:820px){.duo{grid-template-columns:minmax(0,1fr)}}

/* capacities + warranty */
.sheet{background:#fff}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:660px;font-variant-numeric:tabular-nums}
th{font:700 13.5px/1.2 var(--f);text-align:left;padding:14px 18px;background:var(--bg-2);color:var(--ink-2);border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:11px 18px;border-bottom:1px solid var(--line);font-size:16px;vertical-align:middle}
tr:last-child td{border-bottom:0}
td.cap{font:800 20px/1 var(--f);letter-spacing:-.01em;white-space:nowrap}
td.cap small{font:500 14px/1 var(--f);color:var(--ink-3)}
td.spec{font:500 15.5px/1.2 var(--f);color:var(--ink-2);white-space:nowrap}
td .na{color:var(--line-2)}
tr.cur td{background:#fdf1f1}
.v3{border:0;border-radius:var(--r);background:none;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);padding:8px 12px;font:700 13.5px/1 var(--f);white-space:nowrap}
.v3:hover{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--ink);color:#fff}
.fine{font-size:14.5px;color:var(--ink-3);margin-top:14px;max-width:80ch}
.warr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:start}
.yrs{display:grid;gap:12px}
.yr{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr);gap:8px 16px;align-items:center}
.yr span{font:700 16px/1.2 var(--f)}
.yr i{display:block;height:38px;border-radius:2px;background:var(--ink);position:relative;min-width:84px}
.yr i b{position:absolute;right:11px;top:50%;transform:translateY(-50%);font:700 15px/1 var(--f);font-style:normal;color:#fff;white-space:nowrap}
.yr.max i{background:var(--red)}
.yr-axis{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr);gap:16px;font:500 13px/1 var(--f);color:var(--ink-3);margin-top:4px}
.yr-axis div{display:flex;justify-content:space-between;border-top:1px solid var(--line-2);padding-top:7px}
@media (max-width:860px){.warr{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.yr,.yr-axis{grid-template-columns:minmax(0,1fr)}.yr-axis span:first-child{display:none}.yr span{font-size:15px}}

/* components */
.kits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 36px}
.kit{border-top:1px solid var(--line-2);padding:20px 0 8px}
.kit h3{font:800 20px/1.2 var(--f);letter-spacing:-.01em;margin-bottom:8px}
.kit p{font-size:16.5px;color:var(--ink-2)}
@media (max-width:980px){.kits{grid-template-columns:repeat(2,minmax(0,1fr))}.kit{padding-bottom:26px}}
@media (max-width:560px){.kits{grid-template-columns:minmax(0,1fr)}}

/* forms */
.quote{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:44px 64px;align-items:start}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.f{display:grid;gap:7px;min-width:0;align-content:start}
.f.w{grid-column:1/-1}
.f label{font:600 14.5px/1.2 var(--f);color:var(--ink)}
.f label em{font-style:normal;color:var(--red-hi)}
.f input,.f select,.f textarea{width:100%;min-width:0;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:12px 13px;font-size:16px;color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,21,21,.1)}
.f textarea{min-height:96px;resize:vertical}
.f input[aria-invalid="true"]{border-color:var(--red-hi)}
.err{font-size:14px;font-weight:600;color:var(--red-hi)}
.err:empty{display:none}
.f.unit{position:relative}
.f.unit input{padding-right:40px}
.f.unit::after{content:"in";position:absolute;right:13px;bottom:13px;font:600 14px/1.4 var(--f);color:var(--ink-3)}
.form-end{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
.form-end p{font-size:15px;color:var(--ink-3)}
.aside{position:sticky;top:98px;display:grid;gap:28px}
.aside .plate{margin-top:0;max-width:none}
.contact{display:grid;gap:16px;font-size:16px;color:var(--ink-2)}
.contact b{display:block;font:700 14px/1 var(--f);color:var(--ink-3);margin-bottom:7px}
.contact .tel{font:800 26px/1 var(--f);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink);user-select:all}
.copy{border:0;background:none;padding:0;margin-left:14px;font:700 14px/1 var(--f);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.copy:hover{color:var(--red-hi)}
.done{grid-column:1/-1;border:1px solid var(--line-2);border-top:4px solid var(--red);border-radius:var(--r);padding:24px 26px;background:#fff}
.done h3{font:800 24px/1.15 var(--f);letter-spacing:-.01em}
.done p{font-size:16px;color:var(--ink-2);margin-top:8px;max-width:60ch}
.done pre{margin:16px 0;padding:14px 16px;background:var(--bg-2);border-radius:var(--r);font:500 14.5px/1.6 var(--f);font-variant-numeric:tabular-nums;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.done .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;font-weight:700}
@media (max-width:920px){.quote{grid-template-columns:minmax(0,1fr)}.aside{position:static}}
@media (max-width:520px){form{grid-template-columns:minmax(0,1fr)}}

/* reading pages */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.blk{border-top:1px solid var(--line-2);padding-top:22px}
.blk h2{font:800 22px/1.2 var(--f);letter-spacing:-.01em;margin-bottom:10px}
.blk p{color:var(--ink-2);max-width:60ch}
.blk p+p{margin-top:10px}
.blk ul{display:grid;gap:8px;color:var(--ink-2);max-width:60ch}
.blk li{padding-left:16px;position:relative}
.blk li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.note{margin-top:36px;padding:18px 22px;background:var(--bg-2);border-left:4px solid var(--red);border-radius:0 var(--r) var(--r) 0;font-size:16px;color:var(--ink-2);max-width:80ch}
.note b{color:var(--ink)}
.duo-img{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px}
.duo-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.posts a{display:block;border-top:1px solid var(--line-2);padding:20px 0 28px;text-decoration:none;color:var(--ink)}
.posts h2{font:800 20px/1.25 var(--f);letter-spacing:-.01em}
.posts p{font-size:16.5px;color:var(--ink-2);margin-top:6px}
.posts a:hover h2{color:var(--red-hi)}
.doc{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:26px 28px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r)}
.doc h2{font:800 24px/1.15 var(--f);letter-spacing:-.01em}
.doc p{color:var(--ink-2);margin-top:6px;max-width:56ch}
.doc .btn{margin-left:auto}
@media (max-width:820px){.cols,.posts,.duo-img{grid-template-columns:minmax(0,1fr)}.doc .btn{margin-left:0}}

/* manuals index */
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.docc{display:flex;flex-direction:column;gap:10px;padding:26px 26px 24px;border:1px solid var(--line-2);border-top:4px solid var(--red);border-radius:var(--r);background:#fff;text-decoration:none;color:var(--ink)}
.docc small{font:600 13.5px/1 var(--f);color:var(--ink-3)}
.docc h2{font:800 23px/1.15 var(--f);letter-spacing:-.015em}
.docc p{font-size:16px;color:var(--ink-2)}
.docc ul{display:grid;gap:4px;font-size:15px;color:var(--ink-2);margin-top:2px}
.docc li{padding-left:14px;position:relative}
.docc li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.docc span{margin-top:auto;padding-top:12px;font:700 15px/1.2 var(--f)}
.docc span::after{content:" \2192";color:var(--red)}
.docc:hover{border-color:var(--ink);border-top-color:var(--red)}
@media (max-width:980px){.docs{grid-template-columns:minmax(0,1fr)}}

/* closing call + footer */
.cta{background:var(--dark);color:#fff;padding-block:clamp(44px,5.6vw,76px)}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px}
.cta h2{font:800 clamp(26px,3.2vw,40px)/1.1 var(--f);letter-spacing:-.02em}
.cta p{color:#bdbdbd;margin-top:8px;font-size:17px}
.cta-b{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.cta .arrow{color:#fff}
.cta .arrow:hover{color:#fff;text-decoration:underline}
.cta .btn-line{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.cta .btn-line:hover{background:#fff;color:var(--ink)}
.foot{background:#fff;border-top:1px solid var(--line);padding-block:52px calc(36px + env(safe-area-inset-bottom,0px));font-size:15.5px;color:var(--ink-2)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr));gap:32px 44px}
.foot-logo{display:block;width:210px;max-width:100%;height:auto}
.foot p{margin-top:16px;max-width:38ch;color:var(--ink-3)}
.foot b{display:block;font:700 14px/1 var(--f);color:var(--ink);margin-bottom:14px}
.foot li{margin-bottom:8px}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--red-hi)}
.foot .portal{display:inline-block;margin-top:4px;padding:9px 13px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--ink);font:700 14px/1 var(--f);color:var(--ink)}
.foot .portal:hover{background:var(--ink);color:#fff}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
@media (max-width:980px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-in>div:first-child{grid-column:1/-1}}
@media (max-width:520px){.foot-in{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}