@charset "UTF-8";
/* =========================================================
   Aonminers — monochrome UI, one light theme
   Mineradoras ASIC USB. Recreated from references/hero.webp +
   references/cards.webp, rebuilt around the shop.

   Every colour is a token, and translucent UI is built on the
   --ink triplet. Two blocks are deliberately dark on this light
   page — the newsletter panel and the footer — and they get there
   by re-pointing these tokens locally, not by swapping a theme.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  color-scheme: light;

  --ink: 16,17,20;            /* foreground ink, as an rgb triplet */
  --bg-rgb: 255,255,255;      /* page background, for scrims */
  --shadow-rgb: 22,28,45;
  --shadow-buy: #B1F041;
  --bg:        #ffffff;
  --bg-soft:   #f4f5f8;
  --surface-1: #ffffff;       /* panel top */
  --surface-2: #f8f9fc;       /* panel bottom */
  --surface-3: #fbfcfe;       /* inset cell */
  --surface-4: #f1f3f8;       /* media well */
  --surface-5: #e9ecf2;       /* raised node */
  --footer-1:  #eff1f6;
  --footer-2:  #f4f5f8;
  --toast-bg:  rgba(255,255,255,.95);

  --line:        rgba(var(--ink), .09);
  --line-strong: rgba(var(--ink), .18);

  --fg:      #121316;
  --fg-dim:  #3d4149;
  --muted:   #62666e;
  --muted-2: #8b9099;

  --solid-bg: #121316;        /* inverted (primary) button */
  --solid-fg: #ffffff;
  --solid-hover: #2b2e34;

  /* the one green in the palette — reserved for the buy action */
  --buy: #a2dc3d;
  --buy-hover: #a2dc3d;
  --buy-fg: #ffffff;
  --buy-glass: rgba(22,163,74,.55);   /* hover fill, translucent so the blur reads */
  --note-bg:   #f5fbeb;               /* the manual's callout — --buy washed onto white */
  --note-line: #cde99d;               /* and the hairline around it */
  /* the manual's overclock rows: the one red on the page, marking the
     settings that shorten the chip's life */
  --warn-bg:   #fdf3f3;
  --warn-fg:   #a32b2b;

  --glow: rgba(var(--shadow-rgb), .15);   /* hover halo */
  --media-glow: rgba(var(--ink),.05);     /* pool behind the product shot */
  --grain-blend: multiply;
  --grain-opacity: .07;
  --spot-blend: multiply;
  --spot: rgba(16,17,20,.045);

  /* the one warm accent on the page — the rating star in "Nosso histórico" */
  --star: #e08a12;
  --star-glow: rgba(224,138,18,.3);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --pad: clamp(18px, 4vw, 40px);
  --container: 1320px;

  --ease: cubic-bezier(.22,.68,.24,1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Raleway", var(--font);   /* display type, hero headline only */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* the floating bar is 102px tall, so anchor jumps stop clear of it */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:130px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3,h4,p,ul,figure,dl,dd{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid rgba(var(--ink),.65); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--solid-bg); color:var(--solid-fg); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
select:disabled {
  background-color: var(--muted-2);
  cursor: default;
}
/* ---------- grain ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:var(--grain-opacity);
  mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(64px,9vw,130px); }

/* ---------- type ---------- */
.h2{
  font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.1; font-weight:600; letter-spacing:-.035em;
  text-wrap:balance;
}
.sub{
  color:var(--muted); font-size: 1.15rem;
  line-height:1.6; max-width:60ch;
}
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2);
}

/* ---------- buttons ---------- */
.btn{
  --h:40px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--h); padding:0 18px; border-radius:var(--r-pill);
  border:1px solid transparent; font-size:.875rem; font-weight:500; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--solid{ background:var(--solid-bg); color:var(--solid-fg); border-color:var(--solid-bg); }
.btn--solid:hover{ transform:translateY(-1px); background:var(--solid-hover); }
.btn--buy{
  background:var(--buy); color:var(--solid-bg); border-color:var(--buy);
  /* the blur sits under an opaque fill, so it only shows once the fill turns
     translucent on hover — no layer swap, so the fade stays smooth */
  -webkit-backdrop-filter:blur(14px) saturate(150%);
          backdrop-filter:blur(14px) saturate(150%);
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* hover: frosted glass and a shadow. Deliberately no transform — the button
   must not move. */
.btn--buy:hover{
  box-shadow:0 20px 45px -26px rgba(var(--shadow-buy),.6);
}
.btn--ghost{ border-color:var(--line-strong); color:var(--fg-dim); background:rgba(var(--ink),.02); }
.btn--ghost:hover{ color:var(--fg); border-color:rgba(var(--ink),.4); background:rgba(var(--ink),.06); }
.btn--lg{ --h:48px; padding:0 26px; font-size:.95rem; box-shadow:0 0 0 0 rgba(var(--ink),0); }
.btn--lg:hover{ box-shadow:0 10px 40px -12px rgba(var(--ink),.55); }
.btn--sm{ --h:36px; padding:0 15px; font-size:.82rem; }
.btn.is-done{ background:rgba(var(--ink),.08); color:var(--fg); border-color:var(--line-strong); }

/* =========================================================
   NAV
   ========================================================= */
/* floating bar — outlined at all times, 30px off the top edge */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  margin-top:30px;
}
.nav__inner{
  position:relative;
  display:flex; align-items:center; gap:clamp(14px,2vw,24px); height:72px;
  /*padding-inline:clamp(14px,1.6vw,22px);*/
  border:1px solid var(--line); border-radius:1rem;
  /* kept translucent on purpose — that is what lets the frosted blur read */
  background:rgba(var(--bg-rgb),.42);
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  backdrop-filter:blur(20px) saturate(165%);
  transition:background .4s var(--ease), border-color .4s var(--ease);
  padding: 2.4rem 2.5rem;
}
/* Scrolling only deepens the bar. The blur is deliberately NOT part of this
   state: swapping backdrop-filter rebuilds the blurred layer, and a box-shadow
   riding on that layer was what flashed for a frame mid-scroll. */
.nav.is-scrolled .nav__inner{
  border-color:var(--line-strong);
}
/* Once the footer's black block slides under the bar, the bar inverts with it
   (see main.js §1). Same trick as the footer itself: re-point the handful of
   tokens the nav reads — the glass, the ink, the hairlines, the shadow — so
   every child rule keeps working untouched. `color` is set too, because
   inherited colour is resolved on the parent. */
.nav.is-inverted{
  --ink: 255,255,255;
  --bg-rgb: 0,0,0;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.18);
  --fg: #f4f4f4;
  --fg-dim: #b6b6b6;
  --muted: #7c7c7c;
  --shadow-rgb: 0,0,0;
  color: var(--fg);
  color-scheme: dark;
}
/* The shadow gets its own plain layer, matched to the bar's box, faded with
   opacity (composited) instead of an animated box-shadow. */
.nav::after{
  content:""; position:absolute; inset:0 0 auto 0; z-index:-1;
  height:72px; max-width:var(--container); margin-inline:auto;
  border-radius:1rem; pointer-events:none;
  box-shadow:0 26px 60px -42px rgba(var(--shadow-rgb),.65);
  opacity:0; transition:opacity .45s var(--ease);
}
.nav.is-scrolled::after{ opacity:1; }
/* no backdrop-filter at all: fall back to a near-solid bar */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .nav__inner{ background:rgba(var(--bg-rgb),.94); }
}
.brand{ display:inline-flex; align-items:center; gap:10px; padding-right: 2rem;}
.brand__mark{ display:grid; place-items:center; color:var(--fg); }
.brand__name{ font-weight:600; letter-spacing:-.02em; font-size:.98rem; }
footer .brand__name{ padding-top: 0.1rem; }
/* links sit next to the logo; the action cluster is pushed to the far right */
.nav__links{ display:flex; gap:6px; }
.nav__links a{
  padding:9px 14px; border-radius:var(--r-pill);
  font-size:.855rem; color:var(--muted);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__links a:hover{ color:var(--fg); background:rgba(var(--ink),.06); }
.nav__actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav__burger{
  display:none; width:40px; height:40px; border-radius:12px;
  background:rgba(var(--ink),.04); border:1px solid var(--line);
  padding:0; position:relative; cursor:pointer;
}
.nav__burger span{
  position:absolute; left:11px; right:11px; height:1.5px; background:var(--fg); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger span:first-child{ top:16px; }
.nav__burger span:last-child{ bottom:16px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* icon buttons: cart, account */
.cart,.account{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:12px;
  border:1px solid var(--line); background:rgba(var(--ink),.03); color:var(--fg-dim);
  cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cart:hover,.account:hover{
  color:var(--fg); border-color:var(--line-strong); background:rgba(var(--ink),.07);
}
.cart__count{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--solid-bg); color:var(--solid-fg);
  font-family:var(--mono); font-size:.62rem; font-weight:500; line-height:18px; text-align:center;
}
.cart__count.is-pop{ animation:pop .45s var(--ease); }
@keyframes pop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.5) } 100%{ transform:scale(1) } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; isolation:isolate;
  padding-top:clamp(120px,17vw,190px);
  padding-bottom:clamp(30px,5vw,50px);
  overflow:hidden;
}
.hero__canvas{
  position:absolute; inset:0; z-index:-3; width:100%; height:100%;
  -webkit-mask-image:radial-gradient(125% 105% at 50% 42%, #000 58%, rgba(0,0,0,.5) 80%, transparent 100%);
          mask-image:radial-gradient(125% 105% at 50% 42%, #000 58%, rgba(0,0,0,.5) 80%, transparent 100%);
}
.hero__spot{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,30%), var(--spot), transparent 70%);
  mix-blend-mode:var(--spot-blend); opacity:0; transition:opacity .5s var(--ease);
}
.hero:hover .hero__spot{ opacity:1; }
.hero__fade{
  position:absolute; inset:auto 0 -1px 0; height:34%; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg) 82%);
}
/* clears the shards out from under the transparent navbar */
.hero__topfade{
  position:absolute; inset:0 0 auto 0; height:clamp(100px,13vw,150px); z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, var(--bg) 34%, transparent);
}
/* 50/50 — copy on the left, the miner itself on the right */
.hero__grid{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,60px);
  align-items:center;
}
.hero__copy{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  gap:clamp(16px,2vw,24px);margin-top: -5rem;
}
.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px 7px 11px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:rgba(var(--ink),.03);
  font-size:.8rem; text-transform:uppercase;font-weight: 500;
  color:var(--fg-dim); backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(var(--ink),.04), 0 0 40px -20px rgba(var(--ink),.6);
}
.badge__flag{
  flex:none; width:19px; height:13.6px; border-radius:2.5px;
  box-shadow:0 0 0 1px rgba(var(--ink),.14);
}

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(3rem,7.5vw,6rem);
  line-height:1.02; font-weight:600; letter-spacing:-.045em;
}
.hero__sub{
  color:var(--muted); max-width:46ch;
  font-size: 1.15rem; line-height:1.6;
}
.hero__cta{ margin-top:6px; display:flex; flex-wrap:wrap; gap:10px; }

/* the 3D stage */
.hero__stage{
  position:relative;
  height:clamp(300px,42vw,540px);
  display:grid; place-items:center;
}
.hero__model{
  width:100%; height:100%; display:block;
  touch-action:pan-y; cursor:grab;
}
.hero__stage.is-dragging .hero__model{ cursor:grabbing; }
.hero__loader{
  position:absolute; inset:0; display:grid; place-items:center;
  transition:opacity .5s var(--ease);
}
.hero__loader span{
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid rgba(var(--ink),.18); border-top-color:rgba(var(--ink),.6);
  animation:spin 1s linear infinite;
}
.hero__loader.is-off{ opacity:0; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* coin strip  */
.trust{ margin-top:clamp(32px,5.5vw,58px); }
.trust__marquee{
  overflow:hidden; padding-top:22px; border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.trust__row{
  display:flex; align-items:center; width:max-content;
  gap:clamp(22px,3.6vw,54px);
  padding-right:clamp(22px,3.6vw,54px);
  animation:coinDrift 42s linear infinite;
}
/* pause on hover, so a specific coin can be read */
.trust__marquee:hover .trust__row{ animation-play-state:paused; }
.trust__row img{ display:block; width:32px; height:32px; object-fit:contain; }
/* -50% is exactly one pass of the set, so the loop never shows a seam */
@keyframes coinDrift{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* =========================================================
   SHOP — produtos
   ========================================================= */
.shop__head{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,4vw,64px);
  align-items:end;
  padding:  0 0 10rem;
}
.shop__head-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:clamp(24px,3vw,34px) 0 clamp(22px,3vw,32px); }
.chip{
  padding:9px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:rgba(var(--ink),.02); color:var(--solid-hover);
  font-size:.82rem; white-space:nowrap;
  font-weight: 600;
  transition:color .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}

button.chip {
  cursor: pointer;
}

.chip.is-active{ background:var(--solid-bg); color:var(--solid-fg); border-color:var(--solid-bg); }

.products{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
.product{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product:hover{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:0 40px 70px -50px var(--glow);
}
.product.is-hidden{ display:none; }
.product.is-clipped{ display:none; }

/* media well */
.product__media{
  position:relative; aspect-ratio:14/10; display:grid; place-items:center;
  border-bottom:1px solid var(--line); overflow:hidden;
  background:
    radial-gradient(62% 56% at 50% 48%, var(--media-glow), transparent 74%),
    #FFF;
}
.product__img{
  position:relative; z-index:1;
  max-width:55%; max-height:76%; width:auto; height:auto;
  object-fit:contain;
  transition:transform .55s var(--ease);
}
.product:hover .product__img{ transform:translateY(-5px) scale(1.03); }

.product__body{ display:flex; flex-direction:column; flex:1; padding:clamp(16px,1.8vw,22px); }
.product__body h3{ font-size:1.02rem; font-weight:600; letter-spacing:-.02em; }
.product__desc{ font-size:.83rem; line-height:1.55; color:var(--muted); margin-top:8px; }

.product__specs{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  margin-top:16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--line); overflow:hidden;
}
.product__specs > div{ background:var(--surface-3); padding:9px 12px; }
/* An odd count leaves the last cell empty on purpose: the container's --line
   background shows through as a grey block, which is the look we want. */
.product__specs dt{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
}
.product__specs dd{ font-size:.82rem; color:var(--fg-dim); margin-top:3px; }

.product__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:18px;
}
.price{ display:flex; align-items:baseline; gap:9px; }
.price__now{ font-size:1.1rem; font-weight:600; letter-spacing:-.02em; }

.shop__note{
  margin-top:clamp(26px,3vw,38px); text-align:center;
  font-family:var(--mono); font-size:.69rem; letter-spacing:.05em; color:var(--muted-2);
}

/* three dots — a quiet hint that the catalogue continues below */
.products__more{
  display:none; justify-content:center; align-items:center; gap:14px;
  margin-top:clamp(44px,8vw,76px);
}
.products__more.is-on{ display:flex; }
.products__more i{
  width:12px; height:12px; border-radius:50%;
  background:rgba(var(--ink),.15);
}

/* =========================================================
   PÁGINA DE PRODUTO
   The shots on the left, everything else on the right. Built
   from the same recipes as the shop: .product__media for the
   well, .product__specs for the table, .chip / .btn / .price
   reused as-is.
   ========================================================= */
/* the floating bar is fixed, so the page has to start clear of it */
.pp-section{ padding-top:clamp(118px,15vw,168px); }

.pp{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(28px,4vw,58px); align-items:start;
}
.pp__left{ display:flex; flex-direction:column; gap:14px; }
.pp__gallery{ display:flex; gap:12px; align-items:flex-start; }

/* the well: just the shot on the page — no frame, no fill */
.pp__stage{
  position:relative; flex:1; min-width:0; aspect-ratio:10/11;
  /*display:grid;*/ place-items:center;
  border-radius:var(--r-lg); overflow:hidden;height: 27rem;
}
.pp__stage img{ max-width:95%; max-height:95%; width:auto; height:auto; object-fit:contain;height: 27rem; }

.pp__thumbs{ display:flex; flex-direction:column; gap:10px; flex:none; }
.pp__thumb{
  width:clamp(58px,6vw,78px); aspect-ratio:1;
  display:grid; place-items:center; padding:6px; cursor:pointer;
  overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
/* the shot is boxed, not slotted in: a definite height stops a tall photo from
   stretching the button out of square */
.pp__thumb img{ width:100%; height:100%; object-fit:contain; }
.pp__thumb:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
/* the selected shot wears a ring, the way the chip wears .is-active */
.pp__thumb.is-on{ border-color:var(--solid-bg); box-shadow:0 0 0 1px var(--solid-bg); }

/* ---------- info column ---------- */
.pp__info{ display:flex; flex-direction:column; gap:16px; }
.pp__meta{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
/* the product name: Inter at its bold weight, 4rem flat */
.pp__title{
  font-family:var(--font); font-weight:700; font-size:5rem;
  line-height:1; letter-spacing:-.045em;
}
.pp__sub{ font-size:1.8rem; line-height:1.2; color:var(--fg-dim); margin:16px 0 26px; }

.rating{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); }
.rating b{ color:var(--fg); font-weight:600; }
/* the stars are SVG now: rounded points instead of a spiky glyph, sized from
   the row's font-size so one number scales the whole group */
.rating__stars{ display:inline-flex; align-items:center; gap:.06em; font-size:1.05rem; color:var(--star); }
.rating__star{ width:1em; height:1em; flex:none; display:block; filter:drop-shadow(0 0 6px var(--star-glow)); }
/* the headline rating: 4× the inline one used inside the comments. The vw cap
   only matters on phones, where five 4.2rem stars would be wider than the
   column — on any desktop the 4.2rem term wins. */
.pp__meta .rating__stars{ font-size:2rem; gap:.08em; }
.pp__meta .chip {padding: 0.35rem 1rem;}

/* buy row: the primary action carries its own price and icon, then × then the
   quantity — the arrangement from the reference shot */
.pp__buy{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
/* two columns, as in the reference: the label sits over the price on the left,
   the cart gets its own column on the right */
.pp__add{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px;
  width:min(300px,100%); height:auto; padding:15px 18px;
  border-radius:var(--r-md); text-align:left; white-space:normal;
  padding: 1rem 2rem;
}
.pp__add:disabled {
  cursor: default;
}
.pp__add-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pp__add-label{ font-size:1rem; font-weight:400; line-height:1.3; opacity:.85; }
.pp__add .price__now{ font-size:1.3rem; }
.pp__add svg{ flex:none; width:48px; height:48px; }
.qty{
  width:70px; height:60px; padding:0 20px;
  font:inherit; font-size:.9rem; color:var(--fg-dim);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-3); cursor:pointer;
}
.pp__times{ font-size:.9rem; color:var(--muted-2); }

/* panels: the .step / .product card recipe */
.pp__panel{
  padding:clamp(18px,2vw,24px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 20% -10%, rgba(var(--ink),.06), transparent 60%),
    linear-gradient(180deg,var(--surface-1),var(--surface-2));
}
.pp__panel-title{ font-size:1.02rem; font-weight:600; letter-spacing:-.02em; }
.pp__panel p{ margin-top:12px; font-size:.86rem; line-height:1.7; color:var(--muted); }
.pp__panel p b{ color:var(--fg-dim); }
.pp__panel .product__specs{ margin-top:16px; }
/* the label above the spec table */
.pp__specs-title{ margin-top:20px; }

/* quiet info rows that sit under the shots */
.notice{
  display:flex; gap:13px; align-items:center;
  padding:15px 17px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
  font-size:1rem; line-height:1.6; color:var(--muted);
}
/* the icon is twice the size and centred, so it reads flush with the first and
   last line of the copy instead of hanging off the top */
.notice svg{ flex:none; width:32px; height:32px; color:var(--fg-dim); }
.notice a{ color:var(--fg); text-decoration:underline; text-underline-offset:2px; }
.notice a:hover{ color:var(--muted); }

/* comments: same list rhythm as .qa */
.reviews{ display:grid; margin-top:6px; }
.review{ padding:16px 0; border-bottom:1px solid var(--line); }
.review:last-child{ border-bottom:0; padding-bottom:0; }
.review__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.8rem; color:var(--muted-2); }
.review__name{ color:var(--fg); font-weight:600; font-size:1rem; }
.review p{ margin-top:8px; font-size:1rem; line-height:1.65; color:var(--muted); }

/* ---------- nothing on this page renders below 14px ---------- */
/* The small print above (spec labels, comments, the footer's fine print) was
   built for the catalogue's density. On the product page everything is lifted
   to a 14px floor — scoped by .page-product so the rest of the site keeps its
   own scale. */
.page-product .nav__links a,
.page-product .eyebrow,
.page-product .cart__count,
.page-product .chip,
.page-product .rating,
.page-product .notice,
.page-product .pp__panel p,
.page-product .review__head,
.page-product .review__name,
.page-product .review p,
.page-product .product__specs dd,
.page-product .toast,
.page-product .footer__brand p,
.page-product .footer__cols a,
.page-product .footer__bottom small{ font-size:1rem; }
/* the mono labels take less tracking at this size, or they run wide */
.page-product .product__specs dt,
.page-product .footer__cols h4,
.page-product .pay li{ font-size:14px; letter-spacing:.06em; }

/* the <symbol> sprite itself is never seen */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  display:grid; grid-template-columns:minmax(220px,.85fr) minmax(0,1.6fr);
  gap:clamp(24px,4vw,64px); align-items:start;
}
.faq__head{ display:flex; flex-direction:column; gap:14px; position:sticky; top:96px; }
.faq__list{ display:grid; gap:0; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 4px; cursor:pointer; list-style:none;
  font-size:.95rem; font-weight:500; letter-spacing:-.015em; color:var(--fg-dim);
  transition:color .3s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--fg); }
.qa__sign{ position:relative; flex:none; width:16px; height:16px; }
.qa__sign::before,.qa__sign::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
  transform-origin:center; transition:transform .35s var(--ease); border-radius:2px;
}
.qa__sign::after{ transform:rotate(90deg); }
.qa[open] summary{ color:var(--fg); }
.qa[open] .qa__sign::after{ transform:rotate(0deg); }
.qa__body{ padding:0 4px 22px; max-width:64ch; }
.qa__body p{ color:var(--muted); font-size:.85rem; line-height:1.65; }

/* =========================================================
   JORNADA
   ========================================================= */
.section--journey{ overflow:hidden; }
/* A deep bottom gap here is deliberate: it is the window the footer's inclined
   edge shows through, so the slope has room to be a real mass, not a sliver. */
.section--cta{ padding-top:clamp(20px,3vw,44px); padding-bottom:clamp(90px,12vw,190px); }
.journey__head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(40px,6vw,70px); }
.journey__title{
  font-size:clamp(1.9rem,5.6vw,4rem); line-height:1.02; font-weight:600; letter-spacing:-.05em;
  background:linear-gradient(120deg, var(--fg) 20%, rgba(var(--ink),.42) 70%, rgba(var(--ink),.12));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================================================
   3 ETAPAS — cards staggered, joined by one zigzag line
   ========================================================= */
.stage-wrap{
  position:relative;
  padding-block:clamp(10px,3vw,40px);
}
.stage{
  position:relative;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(44px,6vw,112px);
  align-items:start;
}
/* the connector is a single path spanning the whole row;
   main.js measures the cards and rebuilds it on resize */
.stage__lines{
  position:absolute; inset:0; z-index:0;
  overflow:visible; pointer-events:none;
}
.stage__lines path{
  fill:none; stroke:rgba(var(--ink),.3); stroke-width:1.3;
  stroke-dasharray:2 7; stroke-linecap:round;
  animation:flow 18s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-180; } }

.step{
  position:relative; z-index:1;
  padding:clamp(20px,2vw,26px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 20% -10%, rgba(var(--ink),.06), transparent 60%),
    linear-gradient(180deg,var(--surface-1),var(--surface-2));
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.step:hover{
  transform:translateY(-6px);
  border-color:var(--line-strong);
  box-shadow:0 50px 90px -60px rgba(var(--ink),.22);
}
.step--drop{ margin-top:clamp(56px,8vw,116px); }
.step--drop2{ margin-top:clamp(112px,16vw,232px); }
.step__num{
  display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--muted-2); margin-bottom:20px;
}
.step h3{ font-size:1.04rem; font-weight:600; letter-spacing:-.02em; margin-bottom:9px; }
.step p{ font-size:.8rem; line-height:1.6; color:var(--muted-2); }

/* nodes ride the line; main.js places them at each curve's midpoint */
.stage__node{
  position:absolute; z-index:2; left:0; top:0;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-5); color:var(--fg-dim);
  border:1px solid var(--line-strong);
  box-shadow:0 0 0 6px rgba(var(--ink),.025), 0 16px 30px -18px rgba(var(--shadow-rgb),.9);
  transform:translate(-50%,-50%);
  animation:bob 7s var(--ease) infinite;
}
.stage__node:nth-of-type(2){ animation-delay:-3.4s; }
@keyframes bob{
  0%,100%{ transform:translate(-50%,-50%) }
  50%{ transform:translate(-50%,calc(-50% - 8px)) }
}
.stage__node svg{ width:14px; height:14px; }

.stage__caption{
  margin-top:clamp(40px,6vw,72px); text-align:right;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--muted-2);
}

/* histórico / conquistas */
.credits{
  display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);
  gap:clamp(18px,4vw,48px); align-items:start;
  margin-top:clamp(44px,6vw,80px);
}
.credits__list{ border-top:1px solid var(--line); }
.award{
  padding:20px 0; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px;
}
.award h3{
  font-size:clamp(.92rem,1.5vw,1.16rem); font-weight:500; letter-spacing:-.02em; color:var(--fg-dim);
  transition:color .35s var(--ease), transform .35s var(--ease);
}
.award:hover h3{ color:var(--fg); transform:translateX(6px); }
/* "4.9/5 …" is the only award that is a score, so it carries the star.
   The glyph is decorative: the trailing `/ ""` alt-text keeps screen readers
   from announcing it, and the plain declaration above it is the fallback. */
.award--rating h3::before{
  content:"★";
  content:"★" / "";
  margin-right:4px;
  color:var(--star);
  font-size:1.2em;
  text-shadow:0 0 12px var(--star-glow);
}

/* =========================================================
   CTA
   ========================================================= */
/* The newsletter block is the one black panel on the page, so its ink is pinned
   light instead of tokenised. Two effect layers sit behind the copy: an ambient
   wash + hairline grid (::before) and a spotlight that tracks the cursor (::after). */
.cta{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
  padding:clamp(34px,6vw,70px) clamp(20px,4vw,60px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md);
  background:#000;
  color:#fff;
  box-shadow:0 44px 90px -54px rgba(var(--shadow-rgb),.9);
}
/* ambient effect — a broad highlight off the top edge plus a fine 44px grid
   that fades out from the middle, so the black reads as a lit surface */
.cta::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(130% 150% at 50% -30%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(120% 130% at 50% 0%, #000 18%, transparent 76%);
          mask-image:radial-gradient(120% 130% at 50% 0%, #000 18%, transparent 76%);
}
/* cursor spotlight — a solid disc that inverts whatever sits under it: a white
   layer blended with difference, hard-masked to a circle parked at the pointer.
   The mask stops are 99%/100%, so the rim is crisp instead of feathered. Same
   --mx/--my contract as .hero__spot, only live while the panel is hovered
   (main.js §9). It rides above the copy (z-index 2) so the text inverts too. */
.cta::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:#fff;
  -webkit-mask-image:radial-gradient(circle 36px at var(--mx,50%) var(--my,50%), #000 0 99%, transparent 100%);
          mask-image:radial-gradient(circle 36px at var(--mx,50%) var(--my,50%), #000 0 99%, transparent 100%);
  mix-blend-mode:difference;
  opacity:0; transition:opacity .4s var(--ease);
}
.cta:hover::after{ opacity:1; }
/* the copy and the form sit above the ambient layer — the inverter above them */
.cta > *{ position:relative; z-index:1; }
/* the page's focus ring is ink-coloured, which vanishes on black in light mode */
.cta :focus-visible{ outline-color:rgba(255,255,255,.7); }
.cta .eyebrow{ color:rgba(255,255,255,.68); }
.cta .h2{ color:#fff; }
.cta .sub{ text-align:center; color:rgba(255,255,255,.84); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:6px; }
.cta__form{
  display:flex; gap:8px; margin-top:8px; width:min(470px,100%);
  padding:6px; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
}
.cta__form input{
  flex:1; min-width:0; background:transparent; border:0; padding:0 16px; font-size:.9rem; color:#fff;
}
.cta__form input::placeholder{ color:rgba(255,255,255,.6); }
.cta__form input:focus{ outline:none; }
/* rejected e-mail — the shell goes bright instead of coloured, on-brand */
.cta__form.is-invalid{ border-color:rgba(255,255,255,.7); }
/* the shell's radius minus its 6px padding, so the button nests cleanly */
.cta__form .btn{ border-radius:calc(var(--r-md) - 6px); }
/* on black the primary button is the light one */
.cta .btn--solid{ background:#fff; color:#000; border-color:#fff; }
.cta .btn--solid:hover{ background:#e6e6e6; border-color:#e6e6e6; }
.cta__err{
  display:flex; align-items:center; gap:8px; margin-top:-4px;
  font-size:.76rem; line-height:1.5; color:rgba(255,255,255,.88);
}
/* `hidden` alone loses to display:flex, so hide it explicitly */
.cta__err[hidden]{ display:none; }
.cta__err::before{
  content:"!"; flex:0 0 auto; display:grid; place-items:center;
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  font-family:var(--mono); font-size:.6rem; line-height:1;
}
.cta__fine{ font-size:.72rem; color:rgba(255,255,255,.6); }

/* ---------- thank-you popup ---------- */
.thanks{
  position:fixed; inset:0; margin:auto; height:fit-content;
  width:min(420px,calc(100vw - 40px));
  padding:clamp(26px,4vw,36px);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
  color:var(--fg);
  box-shadow:0 50px 90px -60px rgba(var(--shadow-rgb),.95);
}
.thanks:not([open]){ display:none; }
.thanks[open]{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  animation:thanks-in .45s var(--ease) both;
}
@keyframes thanks-in{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:none; }
}
.thanks::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(6px); }
.thanks__title{ font-size:1.4rem; font-weight:600; letter-spacing:-.03em; }
.thanks__text{ color:var(--muted); font-size:.88rem; line-height:1.6; }
.thanks__close{ margin-top:8px; min-width:130px; }

/* =========================================================
   RODAPÉ
   ========================================================= */
/* The page ends on a dark block. The footer re-points the tokens it uses at the
   dark values — and sets its inherited ink, which is resolved by the parent —
   so every rule inside keeps working untouched, with no theme to switch. */
.footer{
  position:relative;
  padding-top:clamp(40px,6vw,72px);
  background:linear-gradient(var(--footer-1),var(--footer-2));
  --ink: 255,255,255;
  --fg: #f4f4f4;
  --fg-dim: #b6b6b6;
  --muted: #7c7c7c;
  --muted-2: #565656;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.18);
  --footer-1: #020202;
  --footer-2: #000000;
  /* so ::selection inverts correctly on the dark block too */
  --solid-bg: #ffffff;
  --solid-fg: #000000;
  color: var(--fg);
  color-scheme: dark;
}
/* The straight rule is gone: the black block now opens with an inclined edge —
   a wedge that rises out of the footer and tucks up behind the newsletter card,
   so the two overlap instead of meeting on a hard horizontal line.
   z-index:-1 parks it beneath all page content, which keeps the card on top of
   the incline. */

.footer__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(28px,5vw,60px); padding-bottom:clamp(30px,5vw,56px);
}
.footer__brand p{ margin-top:14px; color:var(--muted-2); font-size:.82rem; max-width:34ch; }
.pay{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.pay li{
  padding:5px 9px; border:1px solid var(--line); border-radius:7px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--muted-2);
}
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer__cols h4{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted-2);
  font-weight:500; margin-bottom:14px;
}
.footer__cols a{ display:block; font-size:.85rem; color:var(--muted); padding:5px 0; transition:color .25s var(--ease); }
.footer__cols a:hover{ color:var(--fg); }
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding-block:22px; border-top:1px solid var(--line);
}
.footer__bottom small{ color:var(--muted-2); font-size:.74rem; }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:70;
  padding:11px 18px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--toast-bg);
  backdrop-filter:blur(12px);
  font-size:.82rem; color:var(--fg);
  opacity:0; translate:-50% 14px; pointer-events:none;
  transition:opacity .35s var(--ease), translate .35s var(--ease);
}
.toast.is-on{ opacity:1; translate:-50% 0; }

/* =========================================================
   MANUAIS — search page
   One field over a grid of documents. Same recipes as the
   shop: the .products auto-fill grid, .product's card shell,
   .h2 / .sub for the type. The covers are the one dark block
   on the page and they pin literal colours, the way .cta
   does — a cover reads as a cover, not as a light panel.
   ========================================================= */
/* the floating bar is fixed, so the page has to start clear of it */
.docs-section{
  padding: 12rem 0 18rem;
}
.docs__head{ margin-bottom:clamp(26px,4vw,40px); }
.docs__title{ font-size:clamp(1.9rem,3.4vw,2.8rem); }
/* the intro and the card excerpts carry the reading voice here too, so they
   take ink rather than the catalogue's grey (see the manual page) */
.docs__sub{ margin-top:12px; color:var(--fg-dim); }

/* the field: outlined, magnifier pinned inside on the left */
.docs__search{
  margin-bottom: 4rem;
  position:relative; max-width:min(960px,100%);
  margin-inline:auto; margin-bottom:clamp(34px,5vw,60px);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.docs__search:hover{ border-color:var(--line-strong); }
/* the field is a tall rounded box, so a focus ring on the input would draw a
   second, squarer edge inside it. The whole box answers instead. */
.docs__search:focus-within{
  border-color:var(--solid-bg);
  box-shadow:0 0 0 3px rgba(var(--ink),.08), 0 26px 60px -48px var(--glow);
}
.docs__input:focus-visible{ outline:none; }
.docs__search svg{
  position:absolute; left:22px; top:50%; translate:0 -50%;
  width:22px; height:22px; color:var(--muted-2); pointer-events:none;
}
.docs__input{
  width:100%; height:clamp(56px,6vw,70px);
  padding:0 22px 0 58px; border:0; border-radius:inherit;
  background:none; font-size:1rem; color:var(--fg);
  appearance:none;
}
.docs__input::placeholder{ color:var(--muted-2); }
/* Chrome draws its own clear button in the field; the list already updates on
   every keystroke, so the × would only duplicate Escape */
.docs__input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

/* results — the shop's auto-fill grid, one card per document */
.docs__list{
  display:grid; gap:clamp(20px,2.4vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}
.doc{ min-width:0; }
.doc[hidden]{ display:none; }
/* The whole card is the target. The radius sits on the link (not only on the
   cover) so a keyboard focus ring follows the card instead of cutting a
   square around it. */
.doc__link{ display:block; border-radius:var(--r-lg); }
.doc__link:hover .doc__cover{ transform:translateY(-4px); box-shadow:0 40px 70px -50px var(--glow); }
/* the cover: a dark tile with the document's own wordmark on it, the way a
   physical manual reads on a shelf */
.doc__cover{
  position:relative; aspect-ratio:8/5; display:grid; place-items:center;
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,#191b20,var(--solid-bg));
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.doc__cover::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(58% 52% at 50% 44%, rgba(255,255,255,.07), transparent 72%);
}
.doc__mark{
  position:relative; z-index:1;
  font-size:clamp(1.6rem,3vw,2.6rem); font-weight:600; letter-spacing:-.03em;
  color:rgba(255,255,255,.33);
}
.doc__title{
  margin-top:clamp(14px,1.6vw,18px);
  font-size:1.05rem; font-weight:600; letter-spacing:-.02em;
}
/* two lines, then an ellipsis — the cards keep a common height */
.doc__desc{
  margin-top:8px; font-size:.9rem; line-height:1.6; color:var(--fg-dim);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}

/* nothing matched — the one line that replaces the grid */
.docs__empty{
  padding:clamp(22px,3vw,32px);
  border:1px dashed var(--line-strong); border-radius:var(--r-lg);
  color:var(--fg-dim); font-size:.9rem; text-align:center;
}
.docs__empty[hidden]{ display:none; }
.docs__empty b{ color:var(--fg); font-weight:600; }

/* the link for the page you are already on */
.nav__links a[aria-current="page"]{ color:var(--fg); background:rgba(var(--ink),.06); }

/* =========================================================
   MANUAL — the manual page
   Rebuilt from the live guide (aonminers.com/artigo/
   manual-da-mineradora-zx1). A document: centred head, one
   long reading column, and a rail carrying the sumário and
   the next manual. Same recipes as everywhere else —
   .pp__panel for the cards, .notice for the quiet rows.
   This is a reading page, not the catalogue: prose sits at
   1rem, and nothing on it drops below 14px.
   ========================================================= */
.manual-section{
  padding-top:clamp(112px,14vw,150px);
  padding-bottom:clamp(80px,10vw,140px);
}

/* head — centred, the way a title page reads */
.manual__head{ max-width:min(760px,100%); margin-inline:auto; text-align:center; }
.manual__meta{
  font-family:var(--mono); font-size:14px; letter-spacing:.06em;
  color:var(--muted);
}
.manual__title{
  margin-top:14px;
  font-size:clamp(2.1rem,4vw,3rem); line-height:1.08;
  font-weight:600; letter-spacing:-.04em; text-wrap:balance;
}

/* the reading column and its rail */
.manual{
  display:grid; grid-template-columns:minmax(0,1.9fr) minmax(250px,1fr);
  gap:clamp(30px,4.5vw,70px); align-items:start;
  margin-top:clamp(44px,6vw,84px);
}
.manual__body{ min-width:0; }
/* the rail rides along: the sumário stays in reach on a long manual */
.manual__side{ position:sticky; top:130px; display:grid; gap:clamp(18px,2vw,24px); }

/* One section at a time — the rail switches panels, so there is no rhythm to
   keep between them: the open one always starts at the top of the column. */
.manual__body > section{ margin-top:0; }
.manual__body > section[hidden]{ display:none; }
.manual__h2{ font-size:1.3rem; font-weight:600; letter-spacing:-.025em; }
.manual__h3{
  margin-top:clamp(26px,3vw,36px);
  font-size:1.12rem; font-weight:600; letter-spacing:-.02em;
}
.manual__h2 + .manual__h3{ margin-top:16px; }
/* The reading copy is set in full ink, not in a grey: this page is read, and
   the catalogue's muted body colour is hard work at this length. Grey is kept
   for what is decoration — the tree branches, the step numbers, the bullets. */
.manual__p{ margin-top:12px; font-size:1rem; line-height:1.75; color:var(--fg); }
.manual__p b{ color:var(--fg); font-weight:600; }
.manual__p a,.note a,.hub__desc a{
  color:var(--fg); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(var(--ink),.28);
  transition:text-decoration-color .25s var(--ease);
}
.manual__p a:hover,.note a:hover,.hub__desc a:hover{ text-decoration-color:var(--fg); }
.manual__body .notice{ margin-top:18px; }
/* .notice ships with --muted copy for the product page's one-liners; at this
   length it is the reading voice, so it takes the full ink here */
.manual__body .notice p{ color:var(--fg); }
.manual__body .notice__title{ color:var(--fg); }

/* the callout — the one green, at a wash, so the buy button keeps its
   saturated fill */
.note{
  margin-top:18px; padding:clamp(18px,2vw,24px);
  border:1px solid var(--note-line); border-radius:var(--r-lg);
  background:var(--note-bg);
}
.note p{ font-size:1rem; line-height:1.7; color:var(--fg); }
.note p + p{ margin-top:10px; }
.note__lead{ color:var(--fg) !important; font-weight:600; }

/* download list — the file tree from the manual, in the mono face.
   The branches are written as escapes: a stylesheet served without an HTTP
   charset has no way to know these are UTF-8, and the glyphs come out as
   mojibake when the file is opened straight off disk. */
.files{ display:grid; gap:8px; margin-top:14px; }
.files li{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.files li::before{ content:"\2514"; font-family:var(--mono); font-size:14px; color:var(--muted-2); }
/* a tree where every branch but the last one keeps going */
.files--tree li::before{ content:"\251C"; }
.files--tree li:last-child::before{ content:"\2514"; }
.file{
  font-family:var(--mono); font-size:14px; color:var(--fg);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(var(--ink),.25);
  transition:text-decoration-color .25s var(--ease);
}
.file:hover{ text-decoration-color:var(--fg); }
/* the one file that is not downloadable: no link, no underline */
.file--off{ font-family:var(--mono); font-size:14px; color:var(--muted); }
/* a name from the extracted-files tree: mono, but not a link */
.file--plain{ font-family:var(--mono); font-size:14px; color:var(--fg); }
.file__note{ font-size:14px; color:var(--muted); }

/* ---------- commands ----------
   A dark terminal, like .cta and the covers: dark on a light page, so the
   colours are literal rather than tokens. Nothing on this page is as easy to
   spot from across the room as a black block of shell. */
.term{
  position:relative;
  margin:16px 0 0; padding:44px 18px 18px;
  border:1px solid #0b0c0e; border-radius:var(--r-md);
  background:linear-gradient(180deg,#1b1e23,#0f1114);
  font-family:var(--mono); font-size:14px; line-height:1.8; color:#e9ecf1;
  white-space:pre; overflow-x:auto;
  box-shadow:0 26px 50px -40px rgba(0,0,0,.8);
}
/* the window bar, so it reads as a shell and not as a quote */
.term::before{
  content:""; position:absolute; inset:0 0 auto; height:30px;
  pointer-events:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;
  background-color:#23272e;
  background-image:
    radial-gradient(circle at 16px 15px, #4d545e 3.5px, transparent 4px),
    radial-gradient(circle at 30px 15px, #4d545e 3.5px, transparent 4px),
    radial-gradient(circle at 44px 15px, #4d545e 3.5px, transparent 4px);
  background-repeat:no-repeat;
}
/* ...and the same thing inline, inside a sentence */
.cmd{
  padding:3px 7px; border:1px solid #0b0c0e; border-radius:7px;
  background:#1b1e23; color:#e9ecf1;
  font-family:var(--mono); font-size:14px;
}

/* plain lists — the compatible power supplies, and the like */
.manual__list{ margin:14px 0 0; padding-left:22px; display:grid; gap:8px; }
.manual__list li{ font-size:1rem; line-height:1.7; color:var(--fg); }
.manual__list li::marker{ color:var(--muted-2); }

/* the numbered steps of a procedure — a mono counter in front, the way the
   spec labels are set. Not a flex row: the steps are prose, and a flex li
   would space every <b> in the sentence out into its own flex item. */
.manual__steps{ margin:16px 0 0; padding-left:0; list-style:none; display:grid; gap:10px; counter-reset:step; }
.manual__steps li{
  position:relative; padding-left:28px;
  font-size:1rem; line-height:1.7; color:var(--fg);
}
.manual__steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:.22em;
  font-family:var(--mono); font-size:14px; color:var(--muted-2);
}
.manual__steps li b{ color:var(--fg); font-weight:600; }

/* ---------- screenshots: every one carries a caption ---------- */
.manual__figure{ margin:22px 0 0; }
.manual__figure img,
.manual__figure video{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface-4);
}
.manual__figure figcaption{
  margin-top:10px; font-size:14px; line-height:1.6; color:var(--muted);
}
.manual__figure figcaption a{
  color:var(--fg); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(var(--ink),.28);
}
.manual__figure figcaption a:hover{ text-decoration-color:var(--fg); }

/* ---------- the vcore/frequency table: a real table, since it is one.
   Light, like the page, but built up in three moves so it reads as a data
   block and not as a paragraph: a filled header, a filled setting column,
   and the overclock rows washed in the one red. ---------- */
.manual__table{
  width:100%; margin-top:18px;
  border-collapse:separate; border-spacing:1px;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--line);              /* the hairline grid between cells */
  box-shadow:0 32px 60px -56px var(--glow);
}
.manual__table th,.manual__table td{ padding:12px 14px; text-align:left; background:var(--surface-1); }
/* the header is the one row with a fill of its own */
.manual__table th{
  background:var(--surface-5);
  font-family:var(--mono); font-size:14px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim);
}
.manual__table td{ font-size:1rem; color:var(--fg); }
/* the column on the left is the setting being turned, so it gets a band */
.manual__table td:first-child{
  background:var(--surface-4);
  font-family:var(--mono); font-weight:500; color:var(--fg);
}
/* the two overclock steps are what the table is really for */
.manual__table tr.is-oc td{ background:var(--warn-bg); }
.manual__table tr.is-oc td:first-child{ color:var(--warn-fg); }
.manual__table tr.is-oc .oc{ color:var(--warn-fg); font-weight:600; }
/* hover is a light wash rather than a step down in tone: the white cells and
   the banded setting column land on the same tint, so the row reads as one
   band. The overclock rows keep their red, just a shade deeper. */
.manual__table tbody tr:hover td{ background:var(--surface-2); }
.manual__table tr.is-oc:hover td{ background:#fbeaea; }

/* ---------- compatible hubs: one card per hub, shot on top ---------- */
.hub{
  margin-top:18px; padding:clamp(16px,2vw,22px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
}
.hub__media{ display:grid; place-items:center; }
.hub__media img{ max-width:100%; max-height:240px; width:auto; height:auto; object-fit:contain; }
.hub__name{ margin-top:16px; font-size:1rem; font-weight:600; letter-spacing:-.02em; }
.hub__desc{ margin-top:8px; font-size:1rem; line-height:1.7; color:var(--fg); }

/* the one row that has to shout */
.notice--alert{
  align-items:flex-start;
  border-color:var(--line-strong); background:var(--surface-3);
}
.notice--alert .notice__title{ display:block; color:var(--fg); font-weight:600; }
.notice--alert > div{ min-width:0; }

/* ---------- sumário ---------- */
.toc{
  padding:clamp(18px,2vw,26px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
}
.toc__title{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; }
.toc__list{ display:grid; gap:18px; margin-top:16px; }
.toc__group{ font-size:15px; font-weight:600; }
.toc__sub{ display:grid; gap:1px; margin-top:4px; padding-left:15px; }
.toc__sub a{
  display:block; padding:6px 0; font-size:15px; line-height:1.5; color:var(--fg-dim);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(var(--ink),.16);
  transition:color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.toc__sub a:hover{ color:var(--fg); text-decoration-color:var(--fg); }
/* the section the reader is in — the underlined item in the reference */
.toc__sub a.is-on{ color:var(--fg); font-weight:600; text-decoration-color:var(--fg); }

/* ---------- the next manual ---------- */
.next-doc{
  display:flex; align-items:center; gap:14px; padding:14px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.next-doc:hover{
  border-color:var(--line-strong); transform:translateY(-3px);
  box-shadow:0 34px 60px -50px var(--glow);
}
.next-doc .doc__cover{ width:104px; flex:none; border-radius:var(--r-md); }
.next-doc .doc__mark{ font-size:1rem; }
.next-doc__copy{ min-width:0; }
.next-doc__title{ display:block; font-size:15px; font-weight:600; letter-spacing:-.02em; }
.next-doc__desc{
  margin-top:6px; font-size:14px; line-height:1.5; color:var(--muted);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
}

/* =========================================================
   CATÁLOGO — products.html
   The full list, no filters: the same .product cards as the
   home shop, in a plainer setting. Nothing on this page is
   set in the mono face, nothing is tracked out, and nothing
   drops below 14px.
   ========================================================= */
/* the floating bar is fixed, so the page starts clear of it, with room to
   spare: the headline is the first thing on the page, and it used to sit on
   the bar's shadow */
.products-section{ padding-top:clamp(140px,18vw,200px); }
/* the body's hair-thin tracking is off for this page as well, so every line on
   it sits on normal spacing */
body.page-products{ letter-spacing:normal; }
.products__head{ max-width:62ch; margin-bottom:clamp(30px,4vw,48px); }
/* the line under the headline needs air of its own, not just the two line
   boxes touching */
.products__sub{ margin-top:20px; }

/* the card titles are h2 here (the catalogue is the page's only section), so
   they need the shop's card-title treatment spelled out */
.product__name{ font-size:1.05rem; font-weight:600; letter-spacing:normal; }

/* no tracked-out type anywhere on this page: the headline, the brand, the card
   titles, the prices and the buttons all sit on normal spacing */
.page-products .products__title,
.page-products .product__name,
.page-products .price__now,
.page-products .brand__name,
.page-products .btn{ letter-spacing:normal; }

/* Every card is the target. The title's link is stretched over the whole card
   with a pseudo-element, which keeps one link per card (named by the product,
   for a screen reader) instead of a second empty anchor. Only the buy button
   is lifted above the overlay, so it takes its own clicks and nothing else
   inside the card is dead space. */
.page-products .product{ position:relative; }
.page-products .product__foot .btn{ position:relative; z-index:1; }
.page-products .product__link::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-lg);
}
/* hovering anywhere on the card underlines the title, so the whole card reads
   as the link it is */
.page-products .product__link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- the page's type floor: 14px, body face, tracking off ---------- */
.page-products .nav__links a,
.page-products .cart__count,
.page-products .product__desc,
.page-products .product__specs dt,
.page-products .product__specs dd,
.page-products .btn,
.page-products .toast,
.page-products .pay li,
.page-products .footer__brand p,
.page-products .footer__cols h4,
.page-products .footer__cols a,
.page-products .footer__bottom small{ font-size:14px; }

.page-products .product__specs dt,
.page-products .cart__count,
.page-products .pay li,
.page-products .footer__cols h4{ font-family:var(--font); letter-spacing:normal; }
.page-products .product__specs dt,
.page-products .footer__cols h4{ text-transform:none; }
/* labels stay a step behind the values, but at a contrast that holds up */
.page-products .product__specs dt{ color:var(--muted); }
.page-products .product__desc{ color:var(--fg-dim); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease) var(--d,0ms), transform .8s var(--ease) var(--d,0ms);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .shop__head{ grid-template-columns:1fr; gap:16px; }
  /* the product page drops to one column: shots, then the copy. minmax(0,1fr)
     keeps the track from being sized by its widest content, which is what
     pushed the page sideways on phones. */
  .pp{ grid-template-columns:minmax(0,1fr); gap:clamp(22px,4vw,36px); }
  /* the manual drops its rail: the sumário unfolds into the column, before the
     text, and the next manual lands after it */
  .manual{ grid-template-columns:minmax(0,1fr); gap:clamp(30px,6vw,46px); }
  .manual__side{ display:contents; }
  .toc{ order:-1; }
  .next-doc{ order:1; }
  .pp__stage{ aspect-ratio:10/11; height: 27rem;}
  .stage{ grid-template-columns:1fr; gap:20px; }
  .step--drop,.step--drop2{ margin-top:0; }
  .stage__lines,.stage__node{ display:none; }   /* no room for a zigzag in one column */
  .hero__grid{ grid-template-columns:1fr; gap:clamp(20px,5vw,34px); }
  /* narrow screens: the piece slips in behind the copy, still hugging the right */
  .hero__copy{ position:relative; z-index:1; }
  .hero__stage{
    position:absolute; inset:0 0 0 auto;
    width:min(76%,430px); height:auto; z-index:0;
  }
  /* the drawer hangs off the floating bar, sharing its outline and radius.
     Solid white on purpose — the links are inked for a light panel rather than
     with the page tokens, which would sit near-invisible on white. */
  .nav__links{
    position:absolute; inset:calc(100% + 8px) 0 auto; flex-direction:column; gap:2px;
    background:#fff;
    padding:14px 16px 18px; border:1px solid rgba(16,17,20,.14); border-radius:1rem;
    box-shadow:0 30px 60px -42px rgba(0,0,0,.55);
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:12px 14px; color:#4b5058; }
  .nav__links a:hover{ color:#121316; background:rgba(16,17,20,.06); }
  /* cart + account stay flush right, burger last */
  .nav__actions{ margin-left:auto; }
  .nav__burger{ display:block; }
  .faq{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .credits{ grid-template-columns:1fr; gap:16px; }
  .footer__inner{ grid-template-columns:1fr; }
  .hero__copy { padding-top: 6rem;}
}
@media (max-width:720px){
  .products{ grid-template-columns:1fr; }
  .docs__list{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .trust__row{ gap:14px 22px; }
  .hero__copy { padding-top: 8rem;}
}
/* phones only — the piece hangs about half off the right edge. Tablets and
   desktops keep it fully on screen. */
@media (max-width:600px){
  .hero__stage{ right:-41%; }
  /* headline runs ~1.5× its former size here (≈56px at 390px). The 14.5vw
     middle term keeps 320px phones from overflowing the copy column. */
  .hero__title{ font-size:clamp(4rem, 14.5vw, 3.9rem); }
  .hero__copy { padding-top: 8rem;}
  .nav__inner {
    padding: 0 1.5rem;
    margin-top: -1rem;
  }
}
@media (max-width:520px){
  .cta__form{ flex-direction:column; border-radius:var(--r-md); padding:8px; }
  .cta__form input{ height:44px; text-align:center; }
  .cta__form .btn{ height:44px; }
  .hero__cta .btn{ flex:1; }
  .nav__actions{ gap:6px; }
  .cart,.account{ width:36px; height:36px; }
    .hero__copy { padding-top: 8rem;}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__spot{ display:none; }
}