/* ==========================================================================
   MTD Performance - site.css
   One stylesheet for every page. Shop pages (store, product, cart, checkout,
   order, partner) reuse everything from section 1 to section 12 and the
   shared header and footer markup. Index-only styling starts at section 13.

   Table of contents
    1. Tokens
    2. Reset and base
    3. Typography
    4. Layout: .container .section .kicker
    5. Buttons: .btn .btn-primary .btn-ghost
    6. Surfaces: .card .chip .panel
    7. Form fields
    8. Header, nav, mobile sheet
    9. Footer and floating WhatsApp button
   10. Background environment layer, particles, the rake, tick dividers
   11. Entrances (IntersectionObserver .in, stagger, retired delays)
   12. Toast
   13. REL VOLTASE, the signature rail
   14. Index sections A to I
   15. Reduced motion, paused tabs, short screens
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root{
  /* --- surfaces: the owner's pure black -------------------------------- */
  --canvas:#000000;        /* pure black, asked for by name in this restyle.
                              The house rule "never pure black" is deliberately
                              overruled here: the group site it copies is
                              rgb(0,0,0) and the owner named the colour. */
  --panel:#0B0B0B;         /* cards and raised surfaces */
  --panel-2:#141414;       /* nested surfaces, inputs, hover */

  /* --- the group red ---------------------------------------------------- */
  --accent:#E9202A;        /* focus ring, borders, one emphasised word per section.
                              Measured 4.70:1 on --canvas, 4.41:1 on --panel and
                              4.13:1 on --panel-2: it clears 3:1 as an interface
                              border everywhere and 4.5:1 as type on the canvas
                              only, so small accent type still uses --accent-label. */
  --accent-fill:#D11A22;   /* derived from --accent: the value a solid button
                              needs so the #FFFFFF label clears 4.5:1. Measured
                              5.41:1 at the gradient's light end and 6.69:1 at
                              --accent-hover, its dark end. */
  --accent-hover:#B7151C;
  --accent-muted:#5A0F13;  /* inactive rail ticks, seated notches, quiet hairlines, particles */
  --accent-on-media:#FF7A72; /* derived from --accent: small type over live footage,
                              where a red this dark cannot clear 4.5:1 on any frame */
  --accent-label:#FF7A72;  /* the same lightened red on the flat surfaces: kickers,
                              numbers, legends and other small accent type.
                              Measured 8.28:1 on --canvas, 7.76:1 on --panel and
                              7.26:1 on --panel-2. --accent stays on fills,
                              borders, focus rings and display-size emphasis. */
  --readout-blue:#4EA8E0;  /* micro accent, at most three uses per screen */
  --status-ok:#4EE08A;     /* the one non-brand hue on the site: a paid order's
                              status dot and flag. Measured 11.58:1 on --panel */

  /* --- type ------------------------------------------------------------- */
  --text-primary:#FFFFFF;  /* 21:1 on --canvas */
  --text-secondary:#B3B3B3;/* 10.02:1 on --canvas, 9.39:1 on --panel,
                              8.79:1 on --panel-2 */

  /* --- hairlines --------------------------------------------------------- */
  --line:#1F1F1F;          /* decorative hairlines: dividers, card edges, rules.
                              Decorative only, it is far under 3:1 by design. */
  --line-strong:#3A3A3A;   /* the loud decorative hairline: card hover edges,
                              the rail spine, dial tracks. 1.85:1 on --canvas,
                              so it is never the only edge of a control. */
  --line-interactive:#5A5A5A; /* derived from --line-strong: the value an
                              interactive border (input, select, textarea, cart
                              button, burger, ghost button) needs to clear 3:1
                              on pure black. Measured 3.04:1. */

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* the three-layer text shadow for type over live footage */
  --tshadow:0 1px 2px rgba(0,0,0,.95),0 3px 12px rgba(0,0,0,.78),0 10px 44px rgba(0,0,0,.8);

  /* type */
  --display:"Saira","Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Outfit","Avenir Next",system-ui,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",ui-monospace,monospace;

  /* metrics */
  --rail-w:56px;
  --nav-h:74px;

  --radius:12px;           /* cards, every time */
  --gutter:clamp(20px,4vw,40px);
  --maxw:1240px;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;       /* declared first as the fallback */
  overflow-x:clip;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 16px);
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(15px,.35vw + 14px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  opacity:0;
  transition:opacity .7s var(--ease-out);
}
body.ready{opacity:1}

/* --- the fixed page-corner chevron decoration ---------------------------
   The reference pins two rotated hexagon textures to the top-left and the
   bottom-right page corners, behind everything. Ours is the MTD chevron tile.
   Both corners are body pseudo-elements, so every page gets them without a
   line of markup; both are position:fixed, so they never scroll; both carry
   pointer-events:none, so they can never intercept a click on the header, the
   rail, the WhatsApp button, the mobile sheet or a toast; and both sit at
   z-index 0, the bottom of the fixed ladder this site uses:

      -1  .env               an optional full-page environment layer
       0  body::before/after the corners
       1  main, .site-footer all content
      80  .rail
      85  .wa-float
      88  .nav-sheet
      90  .site-header
     120  .toast
     200  .skip-link

   html and body carry overflow-x:clip above (with the hidden fallback), so
   the -12deg rotation can never widen the page. */
body::before,body::after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  width:max(64vw,340px);
  height:max(64vh,300px);
  background:url("../img/brand/mtd-chevron-red.svg") 0 0/200px 120px repeat;
  opacity:.22;
  transform:rotate(-12deg);
}
body::before{
  top:-7vh;left:-7vw;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 10% 12%,#000 0%,rgba(0,0,0,.55) 38%,transparent 100%);
          mask-image:radial-gradient(ellipse 60% 58% at 10% 12%,#000 0%,rgba(0,0,0,.55) 38%,transparent 100%);
}
body::after{
  right:-7vw;bottom:-7vh;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 90% 88%,#000 0%,rgba(0,0,0,.55) 38%,transparent 100%);
          mask-image:radial-gradient(ellipse 60% 58% at 90% 88%,#000 0%,rgba(0,0,0,.55) 38%,transparent 100%);
}
/* on a phone the corners are close enough to running type to compete, so the
   tile drops to a whisper */
@media (max-width:720px){
  body::before,body::after{opacity:.16}
}

/* content rides above the corners */
main{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
svg{display:block}

a{color:inherit;text-decoration:none}
a:hover{color:var(--text-primary)}

button{font:inherit;color:inherit;background:none;border:0;margin:0}

::selection{background:var(--accent);color:var(--text-primary)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:12px;top:12px;z-index:200;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  background:var(--accent-fill);color:var(--text-primary);
  padding:12px 18px;border-radius:var(--radius);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

main:focus{outline:none}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-stretch:87%;
  line-height:1.02;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}

h1{font-size:clamp(38px,5.4vw,74px)}
h2{font-size:clamp(30px,3.6vw,52px)}
h3{font-size:clamp(19px,1.35vw,24px);font-weight:700;line-height:1.16;letter-spacing:0}
h4{font-size:clamp(16px,1vw,18px);font-weight:700;line-height:1.25;letter-spacing:0}

.italic{font-style:italic}

p{margin:0}

.lede{
  font-size:clamp(16px,.6vw + 14px,19px);
  color:var(--text-secondary);
  line-height:1.68;
  max-width:62ch;
}

.body-text{color:var(--text-secondary);max-width:66ch}

.mono{
  font-family:var(--mono);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

.em-word{color:var(--accent)}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:clamp(72px,9vw,132px);
}
.section + .section{padding-top:clamp(64px,8vw,118px)}

.kicker{
  display:inline-flex;align-items:baseline;gap:.7em;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-label);
  margin-bottom:18px;
}
.kicker .kicker-num{color:var(--text-secondary);font-weight:400}

/* One accented word inside a heading. It began life as a hero-only rule in
   pages.css; index.html now also uses it in the feature-block headline, and
   any page may want it, so the colour lives here. pages.css keeps the hero's
   own treatment on top of this. */
.hl-red{color:var(--accent)}

.section-head{margin-bottom:clamp(34px,4vw,56px)}
.section-head h2{max-width:20ch}
.section-head .lede{margin-top:18px}

.row-baseline{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:baseline}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:44px;                /* the touch floor is unconditional: a browser
                                     that does not report a coarse pointer still
                                     gets thumbs on it */
  padding:14px 24px;
  border-radius:var(--radius);
  font-family:var(--body);
  font-weight:600;
  font-size:15px;
  letter-spacing:.005em;
  line-height:1.1;
  cursor:pointer;
  overflow:hidden;
  border:1px solid transparent;
  transition:background-color .28s var(--ease-out),border-color .28s var(--ease-out),
             color .28s var(--ease-out),transform .28s var(--ease-out),box-shadow .28s var(--ease-out);
  text-shadow:none;               /* a shadowed label reads as grime */
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:linear-gradient(180deg,var(--accent-fill) 0%,var(--accent-hover) 100%);
  color:var(--text-primary);
  box-shadow:0 10px 30px -14px rgba(233,32,42,.9);
}
.btn-primary:hover{background:linear-gradient(180deg,var(--accent-hover) 0%,#8E1015 100%);color:var(--text-primary)}

.btn-ghost{
  background:rgba(20,20,20,.55);
  border-color:var(--line-interactive);
  color:var(--text-primary);
}
.btn-ghost:hover{border-color:var(--text-secondary);background:rgba(20,20,20,.9)}

.btn-quiet{
  padding:10px 0;
  color:var(--text-secondary);
  font-size:14px;
  border-bottom:1px solid var(--accent-muted);
  border-radius:0;
}
.btn-quiet:hover{color:var(--text-primary);border-color:var(--accent)}

.btn-wa .wa-glyph{width:17px;height:17px;flex:none;fill:currentColor}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-logo{min-height:44px;display:flex;align-items:center;padding:5px 0}
}

/* ==========================================================================
   6. Surfaces
   ========================================================================== */

.card{
  position:relative;
  background:linear-gradient(178deg,var(--panel) 0%,#050505 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),
             box-shadow .4s var(--ease-out);
}
.card:hover{
  transform:translateY(-3px);
  border-color:#4A4A4A;
  box-shadow:0 26px 48px -32px rgba(0,0,0,.95);
}
.card-body{padding:18px 18px 20px}
.product-card{display:flex;flex-direction:column}
.product-card .card-body{flex:1 1 auto;display:flex;flex-direction:column}

.chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:7px 12px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-secondary);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.chip-solid{
  background:var(--panel-2);
  border-color:var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  text-shadow:none;
}
.chip-accent{color:var(--accent);border-color:var(--accent-muted)}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,34px);
}

.price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.price-was{color:var(--text-secondary);font-weight:400;text-decoration:line-through;margin-left:.55em;font-size:.86em}

.discount-chip{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 9px;border-radius:6px;
  background:linear-gradient(180deg,var(--accent-fill) 0%,var(--accent-hover) 100%);
  color:var(--text-primary);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -10px rgba(0,0,0,.9);
}

/* --------------------------------------------------------------------------
   6b. The four shared decoration utilities (home.css reaches for these by name)

   .section--pattern  the chevron tile as a whisper texture inside a section,
                      vignetted so it fades OUT toward the section centre and
                      never sits behind running type. Drawn on ::before at
                      z-index:-1 inside the section's own stacking context.
                      The brief allows it on the product carousel and the
                      Garansi section only.
   .aura-top          the reference's 2px red-to-white-to-red hairline across
                      the top edge of a card. Also drawn on ::before, so never
                      put it on an element that already carries .rake: that
                      class owns the same pseudo-element.
   .glow-r / .glow-l  one red radial glow behind a block, thrown from the right
                      or from the left. Drawn on ::after, so a section can carry
                      .section--pattern and a glow at the same time. Never more
                      than one glow per viewport.
   .h-bar             the reference's section heading: a 4px red bar down the
                      left edge of an h2 or h3.

   All four are decoration: pointer-events:none everywhere, nothing animated,
   nothing that reads to a screen reader.
   -------------------------------------------------------------------------- */

.section--pattern{position:relative;isolation:isolate}
.section--pattern::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:url("../img/brand/mtd-chevron.svg") 0 0/200px 120px repeat;
  opacity:.48;
  -webkit-mask-image:radial-gradient(ellipse 74% 66% at 50% 50%,transparent 0%,transparent 38%,#000 100%);
          mask-image:radial-gradient(ellipse 74% 66% at 50% 50%,transparent 0%,transparent 38%,#000 100%);
}

.aura-top{position:relative}
.aura-top::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,
     rgba(233,32,42,0) 0%,
     var(--accent) 20%,
     var(--text-primary) 55%,
     var(--accent) 80%,
     rgba(233,32,42,0) 100%);
}

.glow-r,.glow-l{position:relative;isolation:isolate}
.glow-r::after,.glow-l::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
}
.glow-r::after{
  background:radial-gradient(60% 55% at 78% 30%,rgba(233,32,42,.22) 0%,rgba(233,32,42,0) 70%);
}
.glow-l::after{
  background:radial-gradient(60% 55% at 22% 30%,rgba(233,32,42,.22) 0%,rgba(233,32,42,0) 70%);
}

.h-bar{position:relative;padding-left:18px}
.h-bar::before{
  content:"";
  position:absolute;left:0;top:.1em;bottom:.1em;width:4px;
  border-radius:2px;
  background:var(--accent);
  pointer-events:none;
}

/* ==========================================================================
   7. Form fields (hooks the shop pages reuse)
   ========================================================================== */

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field > label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);
}
.input,.select,.textarea{
  width:100%;
  padding:13px 14px;
  background:var(--panel-2);
  border:1px solid var(--line-interactive);
  border-radius:var(--radius);
  color:var(--text-primary);
  font-family:var(--body);font-size:15px;line-height:1.4;
  transition:border-color .24s var(--ease-out),background-color .24s var(--ease-out);
}
.textarea{min-height:112px;resize:vertical}
.select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),
                   linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-secondary)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.input::placeholder,.textarea::placeholder{color:#8A8A8A}
.field-error{color:var(--accent-label);font-family:var(--mono);font-size:12px}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--accent)}

.checkline{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;cursor:pointer}
.checkline input[type=checkbox],.checkline input[type=radio]{
  width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none
}

/* ==========================================================================
   8. Header, nav, mobile sheet
   ========================================================================== */

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .42s var(--ease-out),border-color .42s var(--ease-out),
             backdrop-filter .42s var(--ease-out);
}
.site-header.is-scrolled{
  background:rgba(0,0,0,.88);
  border-bottom-color:var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-inner{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:22px;
}
.nav-logo{display:flex;align-items:center;flex:none}
/* the lockup carries PERFORMANCE on a band under the MTD block, about a fifth
   of the file's height. At 44px that row rendered around 8px of cap height and
   read as a smudge; 56px in a 74px row puts it near 10px, where it is a word
   again, and still leaves 9px of air above and below. */
.nav-logo img{height:56px;width:auto}
.nav-links{
  display:flex;align-items:center;gap:26px;
  margin-left:14px;
}
.nav-links a{
  position:relative;
  font-size:14.5px;font-weight:500;color:var(--text-secondary);
  padding:6px 0;
  transition:color .26s var(--ease-out);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease-out);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-spacer{flex:1 1 auto}
.nav-tools{display:flex;align-items:center;gap:12px;flex:none}

.cart-link{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;          /* the touch floor by default, not only under
                                      (pointer:coarse): touch laptops and some
                                      Android webviews never report coarse */
  border:1px solid var(--line-interactive);border-radius:var(--radius);
  color:var(--text-secondary);
  transition:border-color .26s var(--ease-out),color .26s var(--ease-out);
}
.cart-link:hover{border-color:var(--text-secondary);color:var(--text-primary)}
.cart-link svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.cart-count{
  position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;
  display:none;align-items:center;justify-content:center;
  padding:0 5px;border-radius:10px;
  background:var(--accent-fill);color:var(--text-primary);
  font-family:var(--mono);font-size:11px;font-weight:600;line-height:1;
}
.cart-count.is-on{display:inline-flex}

.nav-burger{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--line-interactive);border-radius:var(--radius);
  align-items:center;justify-content:center;
  cursor:pointer;
}
.nav-burger span{
  display:block;width:17px;height:1.5px;background:var(--text-primary);
  position:relative;
  transition:transform .3s var(--ease-out),background-color .3s var(--ease-out);
}
.nav-burger span::before,.nav-burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--text-primary);
  transition:transform .3s var(--ease-out),opacity .2s var(--ease-out);
}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
body.sheet-open .nav-burger span{background:transparent}
body.sheet-open .nav-burger span::before{transform:translateY(6px) rotate(45deg)}
body.sheet-open .nav-burger span::after{transform:translateY(-6px) rotate(-45deg)}

.nav-sheet{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:88;
  background:rgba(0,0,0,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:26px var(--gutter) 40px;
  display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out),visibility .34s;
}
.nav-sheet.is-open{opacity:1;visibility:visible;transform:none}
.nav-sheet a.sheet-link{
  display:flex;align-items:baseline;gap:12px;
  padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-stretch:87%;
  font-size:24px;letter-spacing:-.01em;color:var(--text-primary);
}
.nav-sheet a.sheet-link .sheet-num{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.14em;
  color:var(--accent-label);
}
.nav-sheet .btn{margin-top:24px;width:100%}
body.sheet-open{overflow:hidden}

@media (max-width:1024px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
}
@media (min-width:1025px){
  .nav-sheet{display:none}
}
/* on a phone the header row is tight and the burger has to share it, so the
   lockup goes back to 44px: smaller than the desktop mark, but still the
   44px touch target the standard asks for */
@media (max-width:720px){
  .nav-logo img{height:44px}
}

/* ==========================================================================
   9. Footer and the floating WhatsApp button
   ========================================================================== */

/* The reference footer is a diagonal dark stripe over a texture with a red
   radial glow thrown from the bottom right. Ours is the same three layers:
   ::before lays the chevron tile, ::after lays the stripe (the lighter band is
   where the tile shows through) and the glow over it, and the container rides
   above both. Both pseudo-elements are decoration: pointer-events:none. */
.site-footer{
  position:relative;z-index:1;
  isolation:isolate;
  overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--canvas);
  padding-block:clamp(48px,6vw,76px) 28px;
}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/brand/mtd-chevron.svg") 0 0/200px 120px repeat;
  opacity:.5;
}
.site-footer::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 56% 74% at 90% 108%,rgba(233,32,42,.3) 0%,rgba(233,32,42,0) 70%),
    linear-gradient(115deg,
      rgba(0,0,0,.9) 0 38%,
      rgba(255,255,255,.05) 38% 46%,
      rgba(255,255,255,.022) 46% 60%,
      rgba(0,0,0,.9) 60%);
}
.site-footer > .container{position:relative;z-index:1}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(28px,3.4vw,52px);
  align-items:start;
}
.footer-brand img{height:44px;width:auto;margin-bottom:16px}
.footer-brand p{color:var(--text-secondary);font-size:14.5px;max-width:34ch}
.footer-col h3{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:14px;
  font-stretch:normal;
}
/* the padding carries the hit box and the gap gives the height back, so a
   footer link is a 33px target on a mouse and 45px under a finger, while the
   rows sit at the rhythm they always did */
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.footer-col a{
  display:inline-block;
  padding-block:7px;
  font-size:14.5px;color:var(--text-secondary);
  transition:color .24s var(--ease-out);
}
.footer-col a:hover{color:var(--text-primary)}

.mark-ledger{
  margin-top:clamp(36px,4vw,56px);
  padding-top:26px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:26px 48px;
}
.mark-ledger h3{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:14px;font-stretch:normal;
}
/* the payment and logistics marks are dark-on-light files, so they sit on one
   readable light card rather than six separate chips, the way the reference's
   "We Accept" card does. The card is opaque, so the footer stripe and glow
   behind it never touch the marks. */
.mark-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:12px 14px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius);
}
.mark-row img{
  height:26px;width:auto;
  object-fit:contain;
}
.footer-base{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:baseline;
}
.footer-base p{font-family:var(--mono);font-size:12px;color:var(--text-secondary);letter-spacing:.03em}

@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .mark-ledger{grid-template-columns:1fr}
}

.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:85;
  display:inline-flex;align-items:center;gap:0;
  height:54px;padding:0 17px;
  border-radius:27px;
  background:var(--accent-fill);
  color:var(--text-primary);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06) inset;
  transition:gap .34s var(--ease-out),padding .34s var(--ease-out),
             background-color .28s var(--ease-out),transform .34s var(--ease-out);
}
.wa-float:hover{gap:10px;padding-right:22px;background:var(--accent-hover);transform:translateY(-2px);color:var(--text-primary)}
.wa-float svg{width:23px;height:23px;fill:currentColor;flex:none}
.wa-float .wa-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-weight:600;font-size:14.5px;
  transition:max-width .34s var(--ease-out);
}
.wa-float:hover .wa-label,.wa-float:focus-visible .wa-label{max-width:120px}
@media (max-width:720px){.wa-float{right:14px;bottom:14px;height:50px}}

/* ==========================================================================
   10. Background environment layer, particles, the rake, tick dividers
   ========================================================================== */

.env{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--canvas);
  overflow:hidden;
}
/* The GROUP's hexagon broach used to be injected here by site.js. This restyle
   replaces it with the MTD chevron on the page corners above, so
   buildEnvironment() now builds only .env-glow and .env keeps just its soft
   red wash. Nothing on any page carries .env-hex any more. */
.env-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 52% 38% at 18% 14%,rgba(90,15,19,.22) 0%,rgba(90,15,19,0) 62%),
    radial-gradient(ellipse 44% 34% at 84% 62%,rgba(90,15,19,.16) 0%,rgba(90,15,19,0) 64%);
  animation:env-breathe 96s var(--ease-in-out) infinite;
  animation-delay:-24s;
  will-change:transform,opacity;
}
@keyframes env-breathe{
  0%,100%{transform:scale(1) translate3d(0,0,0);opacity:.72}
  50%{transform:scale(1.07) translate3d(1.5%,-1.5%,0);opacity:1}
}

/* whisper-level dust motes, transform only */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes circle{fill:var(--text-secondary);opacity:.2}
.anim-on .mote{animation:mote-drift var(--md,30s) var(--ease-in-out) infinite;animation-delay:var(--mdl,-4s)}
@keyframes mote-drift{
  0%{transform:translate3d(0,0,0);opacity:.06}
  30%{opacity:.26}
  70%{opacity:.18}
  100%{transform:translate3d(var(--mx,14px),var(--my,-70px),0);opacity:0}
}

/* the rake: one 1px specular line travelling an element's top edge */
.rake{position:relative}
.rake::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,
     rgba(255,255,255,0) 0%,
     rgba(255,255,255,0) 24%,
     rgba(255,255,255,.9) 50%,
     rgba(255,255,255,0) 76%,
     rgba(255,255,255,0) 100%);
  transform:translateX(-100%);
  opacity:0;
  pointer-events:none;
}
.rake.in::before{animation:rake-pass 1.1s var(--ease-out) .18s both}
.rake:hover::before{animation:rake-pass .85s var(--ease-out) both}
@keyframes rake-pass{
  0%{transform:translateX(-100%);opacity:0}
  16%{opacity:1}
  84%{opacity:1}
  100%{transform:translateX(100%);opacity:0}
}

/* tick dividers, drawn from the rail's tick spacing */
.tick-divider{width:100%;height:14px;overflow:visible}
.tick-divider line{stroke:var(--accent-muted);stroke-width:1}
.tick-divider .tick-long{stroke:var(--accent)}
.tick-divider .tick-rule{
  stroke:var(--line);
  stroke-dasharray:var(--dl,1200);
  stroke-dashoffset:var(--dl,1200);
  transition:stroke-dashoffset 1.5s var(--ease-out);
}
.tick-divider.in .tick-rule,.tick-divider.drawn .tick-rule{stroke-dashoffset:0}

/* ==========================================================================
   11. Entrances
   ========================================================================== */

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .82s var(--ease-out),transform .82s var(--ease-out);
}
[data-reveal].in{opacity:1;transform:none}

[data-reveal="left"]{transform:translateX(-20px)}
[data-reveal="left"].in{transform:none}
[data-reveal="scale"]{transform:scale(.972)}
[data-reveal="scale"].in{transform:none}

/* stagger: children arrive in sequence */
.stagger > *{
  opacity:0;transform:translateY(20px);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out);
}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:90ms}
.stagger.in > *:nth-child(3){transition-delay:180ms}
.stagger.in > *:nth-child(4){transition-delay:270ms}
.stagger.in > *:nth-child(5){transition-delay:360ms}
.stagger.in > *:nth-child(6){transition-delay:450ms}
.stagger.in > *:nth-child(n+7){transition-delay:540ms}

/* retire the stagger delays once the entrance is finished, at a specificity
   that beats the :nth-child rules above, so later hovers never lag. */
.stagger.in.done > *:nth-child(n){transition-delay:0ms}

/* ==========================================================================
   12. Toast
   ========================================================================== */

.toast{
  position:fixed;left:50%;bottom:26px;z-index:120;
  transform:translate(-50%,18px);
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out),visibility .32s;
  font-size:14.5px;
}
.toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-muted)}

/* ==========================================================================
   13. REL VOLTASE, the signature rail
   ========================================================================== */

.rail{
  position:fixed;left:0;top:calc(var(--nav-h) + 10px);bottom:26px;width:var(--rail-w);z-index:80;
  pointer-events:none;
  display:none;                       /* armed at >=1024px, see the media query */
}
.rail svg{position:absolute;inset:0;width:100%;height:100%}
.rail .rail-spine{stroke:var(--line);stroke-width:1}
.rail .rail-tick{stroke:var(--accent-muted);stroke-width:1;opacity:.55}
.rail .rail-notch{
  stroke:var(--accent-muted);stroke-width:2;
  transition:stroke .5s var(--ease-out),opacity .5s var(--ease-out);
  opacity:.7;
}
.rail .rail-notch.seated{stroke:var(--accent);opacity:1}

.rail-hit{
  position:absolute;left:0;width:var(--rail-w);height:26px;
  transform:translateY(-13px);
  pointer-events:auto;cursor:pointer;
  background:none;border:0;
}
.rail-hit:hover ~ span,.rail-hit:focus-visible{outline-offset:-4px}

.rail-num{
  position:absolute;left:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--text-secondary);opacity:.5;
  transform:translateY(-50%);
  transition:color .45s var(--ease-out),opacity .45s var(--ease-out);
  pointer-events:none;
}
.rail-num.seated{color:var(--accent);opacity:1}

.rail-traveler{
  position:absolute;left:0;width:var(--rail-w);height:0;
  transform:translateY(0);
  will-change:transform;
}
.rail-traveler .tr-line{
  position:absolute;left:6px;right:6px;top:0;height:1px;
  background:var(--readout-blue);
  box-shadow:0 0 10px rgba(78,168,224,.7);
  transition:background-color .6s var(--ease-out),box-shadow .6s var(--ease-out);
}
.rail.at-cta .tr-line{background:var(--accent);box-shadow:0 0 12px rgba(233,32,42,.75)}

.rail-readout{
  position:absolute;left:calc(var(--rail-w) - 4px);top:-13px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.16);
  border-radius:7px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;
  letter-spacing:.04em;color:var(--text-secondary);
  white-space:nowrap;
  transition:color .5s var(--ease-out),border-color .5s var(--ease-out);
}
.rail.locked .rail-readout{color:var(--text-primary);border-color:var(--accent-muted)}
.rail-readout .ro-dot{
  width:5px;height:5px;border-radius:50%;background:var(--accent-muted);flex:none;
  transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.rail.locked .rail-readout .ro-dot{background:var(--readout-blue);box-shadow:0 0 8px rgba(78,168,224,.9)}

/* the speed streak: the brand's warm gradient, once on the whole site */
.rail-streak{
  position:absolute;left:6px;right:6px;top:-1px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent) 0%,#F07A18 52%,#F5C542 100%);
  opacity:0;transform:scaleX(.2);transform-origin:left;
}
.rail-streak.flash{animation:streak-flash 1.15s var(--ease-out) both}
@keyframes streak-flash{
  0%{opacity:0;transform:scaleX(.12)}
  22%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1)}
}

@media (min-width:1024px) and (min-height:561px){
  .rail{display:block}
  .container{padding-left:calc(var(--gutter) + var(--rail-w) * .62)}
}

/* ==========================================================================
   14. Index sections A to I
   ========================================================================== */

/* --- A. 01 KERJANYA SATU: numbered list hanging off the rail ----------- */

.work-grid{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(30px,4vw,70px);align-items:start;
}
.work-list{list-style:none;margin:0;padding:0}
.work-item{
  display:grid;grid-template-columns:auto 1fr;gap:0 20px;
  padding:22px 0;
  border-top:1px solid var(--line);
  align-items:baseline;
}
.work-item:last-child{border-bottom:1px solid var(--line)}
.work-num{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  color:var(--accent-label);padding-top:.25em;
}
.work-item h3{grid-column:2}
.work-item p{grid-column:2;margin-top:9px;color:var(--text-secondary);max-width:52ch;font-size:15px}

.honesty-box{
  margin-top:30px;
  border:1px solid var(--accent-muted);
  border-radius:var(--radius);
  background:linear-gradient(170deg,rgba(90,15,19,.14) 0%,rgba(11,11,11,.7) 100%);
  padding:clamp(18px,2vw,26px);
}
.honesty-box .box-label{
  display:block;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-label);margin-bottom:12px;
}
.honesty-box p{color:var(--text-primary);max-width:54ch;font-size:15.5px}

@media (max-width:880px){.work-grid{grid-template-columns:1fr}}

/* --- B. 02 PRODUK: card grid ------------------------------------------ */

.product-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);
}
.product-card .pc-media{
  position:relative;aspect-ratio:1/1;background:var(--panel-2);overflow:hidden;
}
.product-card .pc-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out)}
.product-card:hover .pc-media img{transform:scale(1.04)}
.product-card h3{font-size:16px;line-height:1.3;min-height:2.6em}
.pc-variants{
  display:block;margin-top:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-secondary);
}
.pc-price{margin-top:12px;font-size:16px;color:var(--text-primary)}
.pc-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px}
.pc-actions .btn{flex:1 1 auto;padding:11px 12px;font-size:13.5px}

@media (max-width:1080px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.product-grid{grid-template-columns:1fr}}

.section-foot{margin-top:clamp(28px,3vw,44px)}

/* --- C. 03 COBA SENDIRI: full-bleed photograph, one control ----------- */

.try-section{
  position:relative;
  padding-block:clamp(84px,10vw,150px);
  overflow:hidden;
  isolation:isolate;
}
/* the photograph is not fetched at load: the section sits below the fold and
   the request competed with the hero for a phone's bandwidth. The entrance
   observer already adds .in to [data-anim] as the section approaches, and the
   url arrives with it. Without scripting the noscript block in index.html
   hands the same url straight to this element. */
.try-bg{
  position:absolute;inset:0;z-index:-2;
  background-color:var(--canvas);
  background-size:cover;background-position:58% 50%;
  opacity:0;
  transition:opacity .6s var(--ease-out);
}
.try-section.in .try-bg{
  background-image:url("../img/products/powerup-installed-red.jpg");
  opacity:1;
}
.try-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.88) 40%,rgba(0,0,0,.5) 72%,rgba(0,0,0,.66) 100%),
    radial-gradient(ellipse 70% 80% at 22% 50%,rgba(0,0,0,.66) 0%,rgba(0,0,0,0) 72%);
}
.try-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4vw,64px);align-items:center;
}
.try-copy h2{max-width:16ch}
.try-copy .lede{margin-top:18px;max-width:44ch;color:var(--text-primary)}
.try-instruction{margin-top:22px}

.try-panel{
  background:rgba(0,0,0,.84);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:clamp(20px,2.4vw,30px);
}
.trace-wrap{position:relative}
.trace-svg{width:100%;height:auto;display:block}
.trace-svg .trace-grid-line{stroke:var(--line);stroke-width:1;opacity:.6}
.trace-svg .trace-target{stroke:var(--accent-muted);stroke-width:1;stroke-dasharray:3 5}
.trace-svg .trace-line{
  fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(233,32,42,.45));
  transition:stroke .7s var(--ease-out),filter .7s var(--ease-out);
}
.hold-done .trace-svg .trace-line{
  stroke:var(--readout-blue);
  filter:drop-shadow(0 0 8px rgba(78,168,224,.55));
}

.hold-row{display:flex;align-items:center;gap:18px;margin-top:22px}
.dial{
  width:96px;height:96px;flex:none;
  border-radius:50%;
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  background:none;border:0;padding:0;
  transition:transform .3s var(--ease-out);
}
.dial:active{transform:scale(.97)}
.dial svg{width:100%;height:100%}
.dial .dial-body{fill:url(#dialGrad);stroke:var(--line-strong);stroke-width:1}
.dial .dial-knurl{stroke:var(--text-secondary);stroke-width:1.1;opacity:.5}
.dial .dial-mark{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.dial .dial-track{fill:none;stroke:var(--line-strong);stroke-width:3;opacity:.9}
.dial .dial-progress{
  fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:239;
  stroke-dashoffset:calc(239 - 239 * var(--hold,0));
}
.hold-done .dial .dial-progress{stroke:var(--readout-blue)}
.dial .dial-rotor{
  transform-box:fill-box;transform-origin:center;
  transform:rotate(calc(var(--hold,0) * 260deg));
}

.hold-readout{
  font-family:var(--mono);font-size:clamp(20px,2vw,28px);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--text-secondary);
  transition:color .6s var(--ease-out);
}
.hold-done .hold-readout{color:var(--readout-blue)}

.hold-results{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.hold-results li{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--display);font-weight:700;font-stretch:87%;font-size:19px;
  color:var(--text-primary);
  opacity:.16;transform:translateY(8px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.hold-results li::before{
  content:"";width:16px;height:1px;background:var(--accent);flex:none;transform:translateY(-5px)
}
.hold-results li.lit{opacity:1;transform:none}

@media (max-width:900px){
  .try-grid{grid-template-columns:1fr}
  .try-scrim{background:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.9) 60%,rgba(0,0,0,.96) 100%)}
}

/* --- D. 04 SPESIFIKASI: two-column ledger with mono leaders ----------- */

.spec-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,4vw,64px);align-items:start}
.spec-table{list-style:none;margin:0;padding:0}
.spec-row{
  position:relative;
  display:grid;grid-template-columns:minmax(140px,.62fr) 1fr;
  gap:8px 18px;align-items:baseline;
  padding:13px 0;
  border-top:1px solid var(--line);
}
.spec-row:last-child{border-bottom:1px solid var(--line)}
.spec-row dt,.spec-row .sr-key{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);
}
.spec-row dd,.spec-row .sr-val{
  margin:0;font-size:15px;color:var(--text-primary);
}
.spec-row .pip{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--readout-blue);margin-left:9px;position:relative;
  vertical-align:middle;
}
.spec-row .pip::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  box-shadow:0 0 12px 3px rgba(78,168,224,.85);
  opacity:0;
}
.anim-on .spec-row .pip::after{animation:pip-glow 6s var(--ease-in-out) infinite;animation-delay:-2.4s}
@keyframes pip-glow{0%,100%{opacity:.12}50%{opacity:.75}}

.fit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fit-list li{
  display:flex;gap:12px;align-items:baseline;
  color:var(--text-primary);font-size:15px;
}
.fit-list li::before{
  content:"";width:9px;height:9px;flex:none;
  border:1px solid var(--accent);transform:rotate(45deg) translateY(-1px);
}
.use-strip{
  margin-top:clamp(30px,3.4vw,48px);
  padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 14px;
}
.use-strip .strip-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-secondary);margin-right:6px;
}
@media (max-width:880px){.spec-grid{grid-template-columns:1fr}}

/* --- E. 05 CARA PESAN: three steps on a self-drawing connector line --- */

.steps-wrap{position:relative}
.connector{
  position:absolute;left:0;right:0;top:30px;height:2px;overflow:visible;z-index:0;
}
.connector line{
  stroke:var(--accent-muted);stroke-width:2;
  stroke-dasharray:var(--cl,1200);stroke-dashoffset:var(--cl,1200);
  transition:stroke-dashoffset 1.8s var(--ease-out) .2s;
}
.connector.in line,.connector.drawn line{stroke-dashoffset:0}
.steps{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);
  list-style:none;margin:0;padding:0;
}
.step .step-dot{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--canvas);border:1px solid var(--accent-muted);
  font-family:var(--mono);font-size:14px;color:var(--accent-label);
  margin-bottom:20px;
}
.step h3{max-width:18ch}
.step p{margin-top:10px;color:var(--text-secondary);font-size:15px;max-width:40ch}

.trust-ledger{
  margin-top:clamp(38px,4.4vw,62px);
  display:grid;grid-template-columns:1fr 1fr;gap:22px 48px;
  padding-top:26px;border-top:1px solid var(--line);
}
.trust-ledger h4{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-label);margin-bottom:12px;font-stretch:normal;
}
.trust-ledger p{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--text-secondary);
  line-height:1.9;
}
@media (max-width:780px){
  .steps{grid-template-columns:1fr}
  .connector{display:none}
  .trust-ledger{grid-template-columns:1fr}
}

/* --- F. 06 PARTNER: split panel --------------------------------------- */

.partner-split{
  display:grid;grid-template-columns:.92fr 1.08fr;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--panel);
}
.partner-plate{
  position:relative;min-height:300px;
  background:linear-gradient(150deg,#0B0B0B 0%,#161616 54%,#060606 100%);
  overflow:hidden;
}
.partner-plate svg{position:absolute;inset:0;width:100%;height:100%}
.partner-plate .plate-hex{stroke:var(--accent-muted);stroke-width:1;fill:none;opacity:.5}
.partner-plate .plate-rule{stroke:var(--line);stroke-width:1}
.partner-plate .plate-mark{fill:var(--accent);opacity:.9}
.partner-plate .plate-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 32% 62%,rgba(233,32,42,.2) 0%,rgba(233,32,42,0) 70%);
}
.partner-copy{padding:clamp(24px,3vw,46px);display:flex;flex-direction:column;justify-content:center}
.partner-copy h2{max-width:14ch}
.partner-copy p{margin-top:16px;color:var(--text-secondary);max-width:50ch}
.partner-copy .btn-row{margin-top:26px}
@media (max-width:820px){.partner-split{grid-template-columns:1fr}}

/* --- G. 07 FAQ: accordion, one open at a time ------------------------- */

.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  padding:20px 0;text-align:left;cursor:pointer;
  font-family:var(--display);font-weight:700;font-stretch:87%;
  font-size:clamp(16px,1.15vw,19px);line-height:1.28;color:var(--text-primary);
  transition:color .28s var(--ease-out);
}
.faq-q:hover{color:var(--accent-label)}
.faq-q .faq-sign{
  position:relative;width:15px;height:15px;flex:none;margin-top:.35em;
}
.faq-q .faq-sign::before,.faq-q .faq-sign::after{
  content:"";position:absolute;background:var(--accent);
  transition:transform .34s var(--ease-out),opacity .34s var(--ease-out);
}
.faq-q .faq-sign::before{left:0;right:0;top:7px;height:1.5px}
.faq-q .faq-sign::after{top:0;bottom:0;left:7px;width:1.5px}
.faq-item.is-open .faq-q .faq-sign::after{transform:scaleY(0);opacity:0}
.faq-a{
  overflow:hidden;height:0;
  transition:height .44s var(--ease-in-out),opacity .36s var(--ease-out);
  opacity:0;
}
.faq-item.is-open .faq-a{opacity:1}
.faq-a-inner{padding:0 0 24px;color:var(--text-secondary);max-width:74ch;font-size:15.5px}

/* --- H. 08 GARANSI & RETUR: two mono columns on the panel plane ------- */

.ledger-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.ledger-col{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,32px);
}
.ledger-col h3{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-label);margin-bottom:18px;font-stretch:normal;
}
.ledger-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ledger-col li{
  padding:13px 0;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--text-secondary);
  letter-spacing:.01em;
}
.ledger-col li:first-child{border-top:0;padding-top:0}
@media (max-width:760px){.ledger-grid{grid-template-columns:1fr}}

/* --- I. Final CTA block ----------------------------------------------- */

.cta-block{
  position:relative;
  overflow:hidden;isolation:isolate;
  border-top:1px solid var(--line);
  background:linear-gradient(178deg,#0B0B0B 0%,#000000 100%);
  padding-block:clamp(74px,9vw,128px);
}
.cta-checker{
  position:absolute;left:0;top:0;width:100%;height:16px;z-index:1;
}
.cta-glow{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 58% 62% at 50% 108%,rgba(233,32,42,.2) 0%,rgba(233,32,42,0) 70%);
}
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-inner h2{max-width:18ch;font-style:italic;padding-bottom:.06em}
.cta-inner p{margin-top:18px;color:var(--text-secondary);max-width:52ch}
.cta-inner .btn-row{margin-top:30px;justify-content:center}
.cta-inner .cta-micro{
  margin-top:18px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-secondary);
}

/* ==========================================================================
   15. Reduced motion, paused tabs, short screens
   ========================================================================== */

/* One body class pauses every animation, pseudo-elements included, on a
   hidden tab. animation-play-state does not inherit, so it is set on all. */
body.paused *,body.paused *::before,body.paused *::after{
  animation-play-state:paused!important;
}

/* Decorations that have no room on a short screen */
@media (max-height:560px){
  .rail{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  body{opacity:1}
  /* every choreographed element shows its final finished state */
  [data-reveal],.stagger > *{opacity:1!important}
  [data-reveal],[data-reveal="left"],[data-reveal="scale"]{transform:none!important}
  .stagger > *{transform:none!important}
  .hold-results li{opacity:1!important;transform:none!important}
  .tick-divider .tick-rule,.connector line{stroke-dashoffset:0!important}
  .rake::before{display:none}
  /* the slider's copy blocks are laid out with grid and carry no positional
     transform, so nothing here has to be re-declared: the blanket kills above
     are scoped to [data-reveal] and .stagger and never touch the copy lane. */
}

/* The same final states applied live when the user flips reduced motion on
   mid-session. site.js adds body.pinned through pinToFinalStates(). */
body.pinned [data-reveal],body.pinned .stagger > *{opacity:1;transform:none;transition:none}
body.pinned .tick-divider .tick-rule,body.pinned .connector line{stroke-dashoffset:0;transition:none}
body.pinned .hold-results li{opacity:1;transform:none}
body.pinned .rake::before{display:none}
body.pinned .try-bg{transition:none}

/* --- additions wired by the index markup ------------------------------- */

/* the WhatsApp button in the nav gives way to the sheet on small phones */
@media (max-width:560px){.nav-cta{display:none}}

/* the living element every section shares: the kicker number breathes */
.anim-on .kicker .kicker-num{animation:num-breathe 7s var(--ease-in-out) infinite;animation-delay:-2.1s}
@keyframes num-breathe{0%,100%{opacity:.5}50%{opacity:1}}

/* section C: the target line label on the voltage trace */
.trace-svg .trace-label{
  fill:var(--text-secondary);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
}
.try-instruction{margin-top:24px}

/* section F: the drawn plate breathes behind the mark */
.anim-on .partner-plate .plate-glow{animation:plate-breathe 11s var(--ease-in-out) infinite;animation-delay:-3.5s}
@keyframes plate-breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* section I: the motes sit above the glow and below the copy */
.cta-block .motes{z-index:0}
.cta-block .container{position:relative;z-index:2}
.cta-checker{pointer-events:none}

/* --- touch targets, after every base rule so these win ------------------ */
@media (pointer:coarse){
  /* the header controls already carry the 44px box; the rule stays as the
     floor's own statement of it, and the footer links gain their padding */
  .cart-link,.nav-burger{width:44px;height:44px}
  .footer-col ul{gap:0}
  .footer-col a{padding-block:13px}
}

/* ==========================================================================
   Partner patch wall (index.html partner section and partner.html)
   The partners already on board sit on sewn patches: a dark rim, a dashed
   stitch line, the logo on its own face (white or black, whichever the mark
   was drawn for). Open patches hold the chevron tile at whisper level for
   the rest of the roster. Each patch is tilted a degree or so and squares up
   on hover; transform only, and reduced motion pins them flat.
   ========================================================================== */
.patch-wall{margin-top:clamp(28px,4vw,44px)}
.patch-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-bottom:18px}
.patch-title{
  margin:0;
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,26px);letter-spacing:.01em;line-height:1.1;
}
.patch-note{margin:0;color:var(--text-secondary);font-size:15px}
.patch-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,20px);
}
.patch{
  position:relative;aspect-ratio:4 / 3;
  border-radius:16px;
  background:var(--panel-2);
  border:1px solid var(--line-strong);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
  transform:rotate(var(--tilt,0deg));
  transition:transform .4s var(--ease-out),border-color .3s var(--ease-out);
}
/* the stitch */
.patch::after{
  content:"";position:absolute;inset:6px;border-radius:12px;
  border:2px dashed rgba(255,255,255,.34);
  pointer-events:none;
}
.patch-face{
  position:absolute;inset:11px;border-radius:9px;overflow:hidden;
  background:#fff;display:block;
}
.patch-face img{width:100%;height:100%;object-fit:cover;display:block}
.patch--dark .patch-face{background:#0A0A0A}
.patch--empty{border-style:dashed;background:var(--panel)}
.patch--empty::after{border-color:rgba(255,255,255,.14)}
.patch--empty .patch-face{background:#000 url("../img/brand/mtd-chevron.svg") center / 160px 96px repeat}
.patch:nth-child(8n+1){--tilt:-1.4deg}
.patch:nth-child(8n+2){--tilt:.9deg}
.patch:nth-child(8n+3){--tilt:-.7deg}
.patch:nth-child(8n+4){--tilt:1.3deg}
.patch:nth-child(8n+5){--tilt:.8deg}
.patch:nth-child(8n+6){--tilt:-1.1deg}
.patch:nth-child(8n+7){--tilt:1deg}
.patch:nth-child(8n+8){--tilt:-.6deg}
.patch:hover{transform:rotate(0deg) translateY(-4px);border-color:var(--accent)}
.partner-proof{padding-top:0}
@media (max-width:900px){.patch-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){
  .patch-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .patch-face{inset:9px}
  .patch::after{inset:5px}
}
@media (prefers-reduced-motion:reduce){
  .patch,.patch:hover{transform:none;transition:none}
}
body.pinned .patch,body.pinned .patch:hover{transform:none;transition:none}

/* the partner picture box carries the patches: a 3x2 wall on the plate,
   the glow breathing behind it, the note under it */
.partner-plate--patches{
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(18px,3vw,30px);
}
.partner-plate--patches .patch-grid{position:relative;z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.partner-plate--patches .patch{border-radius:14px}
.partner-plate--patches .patch::after{inset:5px;border-radius:10px}
.partner-plate--patches .patch-face{inset:9px;border-radius:8px}
.partner-plate--patches .patch-note{position:relative;z-index:1;text-align:center;font-size:13.5px;margin:0}
@media (max-width:820px){.partner-plate--patches{min-height:0}}
@media (max-width:420px){.partner-plate--patches .patch-grid{gap:9px}.partner-plate--patches .patch-face{inset:7px}.partner-plate--patches .patch::after{inset:4px}}