/* Aeron product pages: shared styles, matched to the homepage system. */
:root{
  --canvas:#ffffff;--ink:#0a0a0a;--charcoal:#3b3b3b;--slate:#4a4a4a;--ash:#676767;
  --mute:#8a8a8a;--stone:#ababab;--hairline:#d0d5db;--hairline-soft:#e5e7eb;
  --accent:#09f875;--accent-deep:#059a4c;
  --display:'Space Grotesk',sans-serif;--body:'Inter','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
.container{max-width:1024px;margin:0 auto;padding:0 24px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* announcement bar */
.announce{height:42px;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px}
.announce a{color:var(--ink);text-decoration:none;font:500 13.5px var(--display);display:flex;align-items:center;gap:10px}
.announce .go{font-weight:600}

/* top nav */
.nav{background:var(--canvas);border-bottom:1px solid var(--hairline-soft)}
.nav-inner{max-width:1024px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:block}
.brand img{height:18px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:22px;list-style:none}
.nav-links a{font:500 14px var(--display);color:var(--ink);text-decoration:none}
.nav-links a:hover{color:var(--accent-deep)}
.nav-links a[aria-current]{color:var(--accent-deep)}

/* buttons */
.btn{font:500 16px var(--display);letter-spacing:.02em;line-height:1;height:48px;padding:0 26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:var(--ink);font-weight:600}
.btn-outline{border:1px solid var(--hairline);background:var(--canvas);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}

/* hero */
.hero{padding:72px 0 8px}
.eyebrow{display:inline-block;border:1px solid var(--hairline);border-radius:6px;padding:7px 12px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.eyebrow.plate{border:none;background:var(--accent);color:var(--ink)}
.hero h1{font:500 clamp(34px,3.3vw,56px)/1.1 var(--display);letter-spacing:-.01em;margin:18px 0 10px;max-width:720px}
h1 mark,h2 mark{background:var(--accent);color:var(--ink);padding:0 .12em}
.lede{color:var(--slate);font-size:17px;max-width:560px}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* sections */
section{margin-top:80px}
.section-head{margin-bottom:24px}
.section-head h2{font:500 clamp(26px,3vw,38px)/1.15 var(--display);letter-spacing:-.005em;margin-top:14px}
.section-head p{color:var(--slate);margin-top:8px;max-width:560px}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:6px;padding:26px;display:flex;flex-direction:column;gap:10px;transition:border-color 160ms ease,transform 180ms ease,box-shadow 180ms ease}
.card:hover{border-color:var(--hairline);transform:translateY(-2px);box-shadow:0 14px 40px rgba(10,10,10,.09)}
.card .n{font:600 12px var(--display);color:var(--accent-deep);font-variant-numeric:tabular-nums}
.card h3{font:600 17px var(--display)}
.card p{color:var(--slate);font-size:14.5px}

/* stats */
.stat .v{font:600 30px var(--display);font-variant-numeric:tabular-nums;word-break:break-all}
.stat .k{font:600 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-top:4px}

/* code block */
pre{background:var(--ink);color:#f2f2f2;border-radius:10px;padding:18px 20px;overflow-x:auto;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
pre b{color:var(--accent)}
pre i{color:#9a9a9a;font-style:normal}

/* lists */
ul.plain{list-style:none;color:var(--charcoal);font-size:15px;max-width:720px}
ul.plain li{padding:10px 0;border-top:1px solid var(--hairline-soft)}
ul.plain li:first-child{border-top:0}
ul.plain code{background:var(--hairline-soft);border-radius:4px;padding:1px 6px;font-size:13px}

/* footer */
footer.site{margin-top:96px;border-top:1px solid var(--hairline);padding:26px 0 64px}
footer.site .container{display:flex;flex-direction:column;gap:16px}
footer.site img{height:16px;width:auto;align-self:flex-start}
.f-links{display:flex;gap:18px;flex-wrap:wrap}
.f-links a{font:500 13.5px var(--display);color:var(--charcoal);text-decoration:none}
.f-links a:hover{color:var(--accent-deep)}
.fine{color:var(--mute);font-size:13px}

@media (max-width:820px){.grid3{grid-template-columns:1fr}}
@media (max-width:720px){.nav-links{display:none}.hero{padding-top:56px}section{margin-top:64px}}

/* ── hero object ──────────────────────────────────────────────────────────
   Each product page floats one physical thing next to its headline: the
   wallet card, the inference meter, the settlement slip. Motion and stage
   live here; the surfaces themselves are page-local, since no two of these
   objects are made of the same material. */
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero-copy{min-width:0}
.hero-copy h1{max-width:none}
.hero-object{min-width:0}
.ho-scene{position:relative;width:min(400px,86vw);margin:8px auto 46px;perspective:1300px}
.ho-scene::after{content:'';position:absolute;left:10%;right:10%;bottom:-34px;height:28px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(10,10,10,.26) 0%,rgba(10,10,10,.10) 55%,transparent 75%);
  filter:blur(6px);animation:ho-shadow 6s ease-in-out infinite}
.ho-float{position:absolute;inset:0;transform-style:preserve-3d;animation:ho-floaty 6s ease-in-out infinite}
.ho-flip{position:absolute;inset:0;transform-style:preserve-3d;animation:ho-spin 11s linear infinite}
.ho-scene:hover .ho-flip,.ho-scene:hover .ho-float,.ho-scene:hover .ho-face{animation-play-state:paused}
.ho-face{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* visibility is keyframed as well as backface-hidden: mobile WebKit renders
   the far face through the near one without it */
.ho-front{transform:rotateY(0deg) translateZ(.4px);animation:ho-facefront 11s linear infinite}
.ho-back{transform:rotateY(180deg) translateZ(.4px);visibility:hidden;animation:ho-faceback 11s linear infinite}
@keyframes ho-spin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes ho-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ho-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.94);opacity:.8}}
@keyframes ho-facefront{0%,24.99%{visibility:visible}25%,74.99%{visibility:hidden}75%,100%{visibility:visible}}
@keyframes ho-faceback{0%,24.99%{visibility:hidden}25%,74.99%{visibility:visible}75%,100%{visibility:hidden}}
.ho-sheen::after{content:'';position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.14) 45%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.14) 55%,transparent 66%);
  transform:translateX(-90%) rotate(8deg);animation:ho-sheenmove 5.2s cubic-bezier(.4,0,.2,1) infinite}
.ho-back.ho-sheen::after{animation-delay:2.6s}
@keyframes ho-sheenmove{0%{transform:translateX(-90%) rotate(8deg)}46%,100%{transform:translateX(90%) rotate(8deg)}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-object{order:2}
  .ho-scene{margin:4px auto 40px}
}
@media (prefers-reduced-motion:reduce){
  .ho-flip,.ho-float,.ho-face,.ho-sheen::after,.ho-scene::after{animation:none}
}