/* DesiGenetics V32 chrome + legacy skin.
   Loaded LAST on pages that still use the older page layouts (guides, tools, legal).
   It brings the V32 header, footer, colours, type and buttons without touching
   page-specific logic. Do not load on pages built with site-v32.css. */
:root{
  --black:#000000;
  --near:#0A0A0A;
  --deep:#111111;
  --line:#292929;
  --line-2:#262626;
  --crimson:#D30B18;
  --crimson-hi:#E8202D;
  --white:#FFFFFF;
  --silver:#CFCFCF;
  --dim:#8F8F8F;
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1200px;
  color-scheme:dark;
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.02em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn-red{background:var(--crimson);color:var(--white)}
.btn-red:hover{background:var(--crimson-hi)}
.btn-ghost{border-color:var(--line);color:var(--white);background:transparent}
.btn-ghost:hover{border-color:var(--silver)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.mark{font-family:var(--display);font-weight:900;font-size:26px;text-transform:uppercase;text-decoration:none;letter-spacing:.01em;display:flex;align-items:center;gap:10px}
.mark .logo{display:block;height:28px;width:auto;max-width:62vw}
.links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.links a{text-decoration:none;color:var(--silver);font-size:15px;font-weight:500}
.links a:hover{color:var(--white)}
.links .btn{min-height:40px;padding:0 16px;color:var(--white)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--white);height:40px;padding:0 14px;font:600 14px var(--body);cursor:pointer}
@media (max-width:820px){
  .menu-btn{display:inline-flex;align-items:center;gap:10px}
  .menu-btn .bars{position:relative;width:18px;height:12px}
  .menu-btn .bars i{position:absolute;left:0;right:0;height:2px;background:var(--white);transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s,top .3s}
  .menu-btn .bars i:nth-child(1){top:0}.menu-btn .bars i:nth-child(2){top:5px}.menu-btn .bars i:nth-child(3){top:10px}
  .nav.open .menu-btn{border-color:var(--crimson)}
  .nav.open .menu-btn .bars i:nth-child(1){top:5px;transform:rotate(45deg)}
  .nav.open .menu-btn .bars i:nth-child(2){opacity:0}
  .nav.open .menu-btn .bars i:nth-child(3){top:5px;transform:rotate(-45deg)}
  .links{position:absolute;left:0;right:0;top:64px;display:none;flex-direction:column;align-items:stretch;gap:0;background:var(--near);border-bottom:2px solid var(--crimson);box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 100vmax rgba(0,0,0,.55);clip-path:inset(0 0 -100vmax 0);padding-bottom:16px}
  .nav.open .links{display:flex;animation:drop .35s cubic-bezier(.16,1,.3,1)}
  @keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .links li a{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 var(--gutter);border-top:1px solid var(--line-2);font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;color:var(--white)}
  .links li:not(:last-child) a::after{content:"";width:8px;height:8px;border-top:2px solid var(--crimson);border-right:2px solid var(--crimson);transform:rotate(45deg)}
  .links li a:active{background:var(--deep)}
  .links li:last-child a.btn{display:flex;justify-content:center;align-items:center;margin:16px var(--gutter) 0;min-height:52px;border-top:0;font-family:var(--body);font-size:16px;font-weight:700;text-transform:none}
}
footer{padding-block:48px;color:var(--dim);font-size:14px}
footer .wrap{display:grid;gap:24px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--white)}
.foot-legal{border-top:1px solid var(--line-2);padding-top:20px;max-width:none}
.btn{position:relative;overflow:hidden;transition:background .15s,border-color .15s,color .15s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-red::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-red:hover::after{left:130%}
.nav{transition:background .3s,box-shadow .3s}
.nav.scrolled{box-shadow:0 1px 0 rgba(211,11,24,.55),0 10px 30px rgba(0,0,0,.6)}
.skip{position:fixed;left:12px;top:8px;z-index:99;transform:translateY(-160%);background:var(--white);color:var(--black);padding:10px 14px;font-weight:700}
.skip:focus{transform:none}
.links a[aria-current="page"]{color:var(--white);box-shadow:inset 0 -2px 0 var(--crimson)}
@media (max-width:820px){.links a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--crimson)}}
.nav .wrap>.mark{margin-right:auto}
.nav .wrap{gap:10px}
.links{order:2}.nav-cta{order:3}.menu-btn{order:4}
.nav-cta{order:3}
.nav.cta-on .nav-cta{display:inline-flex;animation:ctaIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes ctaIn{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
@media (max-width:420px){.nav.cta-on .menu-label{display:none}.nav.cta-on .menu-btn{padding:0 11px}}
@media (max-width:360px){.nav.cta-on .mark .logo{height:20px}}

/* ---------- Neutralise legacy chrome rules that collide with V32 class names ---------- */
.v32-skin header.nav{max-width:none;height:auto;margin:0;padding:0;display:block;gap:0;border-bottom:1px solid var(--line-2)}
.v32-skin header.nav .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.v32-skin footer .mark .logo,.v32-skin header .mark .logo{display:block!important;height:28px!important;width:auto!important;max-width:62vw!important;filter:none!important}
.v32-skin footer{border-top:1px solid var(--line-2);background:var(--black)}
.v32-skin footer .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.v32-skin footer .foot-legal{margin:0}
.v32-skin .links,.v32-skin .links li{list-style:none}
.v32-skin .menu-btn .bars i{font-style:normal}
.v32-skin .header,.v32-skin .dg-page-intro,.v32-skin .dg-pointer-light{display:none!important}
.v32-skin.menu-open{overflow:visible}

/* ---------- Brand tokens over legacy variables ---------- */
.v32-skin{--red:#D30B18;--muted:#9a9a9a;--line:#292929;--near:#0A0A0A}
.v32-skin{background:var(--black);color:var(--white);font-family:var(--body)!important;font-size:16px}
.v32-skin main{font-family:var(--body)}
.v32-skin main p,.v32-skin main li,.v32-skin main td,.v32-skin main label,.v32-skin main input,.v32-skin main select,.v32-skin main textarea,.v32-skin main button{font-family:var(--body)}

/* Headlines in the V32 display face */
.v32-skin main h1,.v32-skin main h2,.v32-skin main h3,.v32-skin main .tool-title,.v32-skin main [class*="hero"] h1{
  font-family:var(--display)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.005em!important;text-wrap:balance}
.v32-skin main h1{line-height:.88!important}
.v32-skin main h2{line-height:.92!important}
.v32-skin main h3{line-height:1!important}
.v32-skin main .red,.v32-skin main h1 .red,.v32-skin main h2 .red{color:var(--crimson-hi)!important}
.v32-skin main .outline{-webkit-text-stroke-color:var(--silver)!important}

/* Small labels */
.v32-skin main .kicker,.v32-skin main .eyebrow{font-family:var(--body)!important;font-weight:600!important;font-size:12px!important;letter-spacing:.1em!important;color:var(--crimson-hi)!important}

/* Breadcrumbs */
.v32-skin main [class*="breadcrumb"]{font-family:var(--body)!important;font-size:13px!important;letter-spacing:.02em!important;color:var(--dim)!important;text-transform:none!important}
.v32-skin main [class*="breadcrumb"] a{color:var(--silver)!important;text-decoration:none}
.v32-skin main [class*="breadcrumb"] strong{color:var(--dim)!important;font-weight:500}

/* Buttons */
.v32-skin main .btn,.v32-skin main button.btn,.v32-skin main a.btn,.v32-skin main .tool-action,.v32-skin main button[type="submit"]{
  border-radius:0!important;font-family:var(--body)!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:none!important;min-height:50px}
.v32-skin main .btn.primary,.v32-skin main .tool-action,.v32-skin main button[type="submit"]:not(.ghost){background:var(--crimson)!important;color:var(--white)!important;border-color:var(--crimson)!important}
.v32-skin main .btn.primary:hover,.v32-skin main .tool-action:hover,.v32-skin main button[type="submit"]:not(.ghost):hover{background:var(--crimson-hi)!important}
.v32-skin main .btn.ghost{background:transparent!important;border:1px solid var(--line)!important;color:var(--white)!important}
.v32-skin main .btn.ghost:hover{border-color:var(--silver)!important}

/* Form fields */
.v32-skin main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.v32-skin main select,.v32-skin main textarea{
  border-radius:0!important;background:var(--black)!important;border:1px solid var(--line)!important;color:var(--white)!important;font-size:16px!important}
.v32-skin main input:focus,.v32-skin main select:focus,.v32-skin main textarea:focus{border-color:var(--silver)!important;outline:none}
.v32-skin main input[type="checkbox"],.v32-skin main input[type="radio"],.v32-skin main input[type="range"]{accent-color:var(--crimson)}

/* Fixed-header offsets are no longer needed: the V32 header sits in the page flow */
.v32-skin main>:first-child{padding-top:clamp(40px,6vw,80px)!important;margin-top:0!important}

/* Article reading comfort */
.v32-skin main article p,.v32-skin main .article-body p,.v32-skin main [class*="article"] p{line-height:1.75}
.v32-skin main a:not(.btn):not([class]){text-decoration-color:var(--crimson);text-underline-offset:3px}

@media (max-width:820px){.v32-skin header.nav .links{top:64px}}
.v32-skin header.nav a,.v32-skin header.nav button,.v32-skin footer a,.v32-skin footer p{text-transform:none!important;font-family:var(--body)!important;letter-spacing:.01em!important}
.v32-skin header.nav .btn{font-size:14px!important;font-weight:700!important}
.v32-skin footer{font-size:14px}
.v32-skin main h1{font-size:clamp(38px,10.5vw,128px)!important}
.v32-skin main h1 *{font-size:inherit!important}