/* EarEffect — built to sit beside dom-code.am-teams.com, not beside a
   template. The devices are borrowed deliberately from that site because the
   two are one family: numbered section eyebrows that run in sequence, a
   bilingual label above every heading, headings in Japanese with only the
   claim in weight, and full-bleed photographic bands captioned in English.

   The photography is the instrument itself. This product has no studio shots
   and does not need any — the console is better than anything staged. */

:root{
  --ink0:#05090F;           /* the page */
  --ink1:#0B1220;           /* raised */
  --ink2:#111C2E;
  --rule:#1B2A42;
  --cy:#7FE9FF;             /* the console's own accent */
  --warm:#FFB98A;
  --fg:#EAF3F9;
  --fg-2:#9DB4C8;
  --fg-3:#5F798F;

  --shell:min(1200px,calc(100% - 3.5rem));
  --narrow:min(760px,calc(100% - 3.5rem));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--ink0); color:var(--fg);
  font:400 16.5px/1.85 "Inter","Noto Sans JP",-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body[dir="rtl"]{font-family:"Noto Naskh Arabic","Inter",system-ui,sans-serif}
img{max-width:100%; display:block}
a{color:var(--cy); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--cy); outline-offset:3px}

.shell{width:var(--shell); margin-inline:auto}
.narrow{width:var(--narrow); margin-inline:auto}

/* ---------- navigation ---------------------------------------------------- */
nav.top{
  position:sticky; top:0; z-index:40;
  background:rgba(5,9,15,.82); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
}
nav.top .shell{display:flex; align-items:center; gap:1rem; height:64px}
nav.top .brand{display:flex; align-items:center; gap:.65rem; color:var(--fg)}
nav.top .brand:hover{text-decoration:none}
nav.top .brand img{width:28px; height:28px}
nav.top .brand b{font-weight:600; letter-spacing:.005em}
nav.top .brand i{font-style:normal; color:var(--fg-3); font-size:13px; letter-spacing:.14em; text-transform:uppercase}
nav.top .links{margin-inline-start:auto; display:flex; gap:1.6rem}
nav.top .links a{
  font:500 12.5px/1 "Inter",system-ui,sans-serif; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fg-2);
}
nav.top .links a:hover,nav.top .links a[aria-current]{color:var(--cy); text-decoration:none}

/* ---------- the eyebrow: number — label ----------------------------------- */
.eyebrow{
  font:600 11.5px/1 "Inter",system-ui,sans-serif; letter-spacing:.26em;
  text-transform:uppercase; color:var(--fg-3); margin:0 0 1.4rem;
}
.eyebrow span{color:var(--cy)}

/* ---------- headings ------------------------------------------------------ */
h1,h2{margin:0; font-weight:400; letter-spacing:-.01em; color:var(--fg-2)}
h1{font-size:clamp(27px,3.7vw,43px); line-height:1.42}
h2{font-size:clamp(24px,3.1vw,35px); line-height:1.48}
h1 b,h2 b{font-weight:600; color:var(--fg)}   /* only the claim carries weight */

h1,h2{word-break:keep-all; overflow-wrap:anywhere}
.lede{margin:1.6rem 0 0; color:var(--fg-2); font-size:clamp(15.5px,1.9vw,17.5px); line-height:2}

/* ---------- hero ---------------------------------------------------------- */
.hero{position:relative; overflow:hidden; padding:4.6rem 0 0}
.hero::after{
  content:""; position:absolute; inset:auto 0 0; height:46%;
  background:linear-gradient(to top,var(--ink0),transparent); pointer-events:none;
}
.hero .grid{
  display:grid; gap:3rem clamp(2rem,5vw,4.5rem); align-items:center;
  grid-template-columns:1.18fr .82fr;
}
.hero .device{position:relative; justify-self:center}
.hero .device::before{
  content:""; position:absolute; inset:-14% -22%;
  background:radial-gradient(50% 44% at 50% 42%, rgba(127,233,255,.20), transparent 72%);
  filter:blur(8px);
}
.hero .device img{
  position:relative; width:min(330px,72vw); border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px var(--rule);
}
@media (max-width:880px){
  .hero .grid{grid-template-columns:1fr; text-align:center}
  .hero .device{order:-1}
}

/* ---------- call to action ------------------------------------------------ */
.cta{display:flex; flex-wrap:wrap; gap:.8rem; margin:2.4rem 0 0}
.hero .cta,.close .cta{justify-content:flex-start}
@media (max-width:880px){.hero .cta{justify-content:center}}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.78rem 1.5rem; border-radius:999px;
  font:600 14px/1 "Inter","Noto Sans JP",system-ui,sans-serif; letter-spacing:.02em;
}
.btn.solid{background:var(--cy); color:#04121C}
.btn.solid:hover{background:#A6F1FF; text-decoration:none}
.btn.ghost{border:1px solid var(--rule); color:var(--fg-2)}
.btn.ghost:hover{border-color:var(--cy); color:var(--cy); text-decoration:none}

/* ---------- the proof strip: label above, figure below -------------------- */
.proof{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--rule);
  border-block:1px solid var(--rule); margin:5rem 0 0;
}
.proof div{background:var(--ink0); padding:1.5rem 1.4rem}
.proof dt{
  font:600 10.5px/1 "Inter",system-ui,sans-serif; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-3); margin:0 0 .7rem;
}
.proof dd{margin:0; font-size:19px; font-weight:600; color:var(--fg); letter-spacing:-.01em}
.proof dd small{display:block; font-size:13px; font-weight:400; color:var(--fg-3); letter-spacing:0; margin-top:.25rem}

/* ---------- sections ------------------------------------------------------ */
section.block{padding:6.5rem 0}
section.block.tight{padding:4.5rem 0}

/* full-bleed band cut from the instrument, captioned in English */
.band{position:relative; margin:3rem 0 0}
.band img{width:100vw; margin-inline:calc(50% - 50vw); height:clamp(210px,25vw,360px); object-fit:cover}
.band figcaption{
  position:absolute; inset:auto 0 1rem; text-align:center;
  font:600 11px/1 "Inter",system-ui,sans-serif; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-3);
}


/* label / value rows — the way the spec sheet reads */
.rows{margin:2.6rem 0 0; border-top:1px solid var(--rule)}
.rows div{
  display:flex; gap:1.4rem; align-items:baseline;
  padding:1.05rem .2rem; border-bottom:1px solid var(--rule);
}
.rows dt{
  flex:0 0 clamp(96px,19%,190px);
  font:600 11px/1.6 "Inter",system-ui,sans-serif; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-3);
}
.rows dd{margin:0; color:var(--fg-2); font-size:15.5px; line-height:1.8}
.rows dd b{color:var(--fg); font-weight:600}

/* ---------- closing ------------------------------------------------------- */
.close{padding:6rem 0; border-top:1px solid var(--rule); text-align:center}
.close .cta{justify-content:center}

/* ---------- footer -------------------------------------------------------- */
footer{background:#03070C; border-top:1px solid var(--rule); padding:2.8rem 0 3.6rem}
footer .shell{display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; align-items:baseline}
footer .co{font-size:13.5px; color:var(--fg-3)}
footer .co b{color:var(--fg-2); font-weight:600}
footer .links{margin-inline-start:auto; display:flex; gap:1.5rem; flex-wrap:wrap}
footer .links a{font-size:13.5px; color:var(--fg-2)}

/* ---------- documents (privacy / terms) ---------------------------------- */
main.doc{padding:3.4rem 0 5rem}
.doc h1{font-size:clamp(26px,4.2vw,38px); color:var(--fg); font-weight:600; margin:.6rem 0 .4rem}
.doc .updated{color:var(--fg-3); font-size:13.5px; margin:0 0 2.8rem}
.doc h2{
  margin:3.2rem 0 1rem; padding-top:1.7rem; border-top:1px solid var(--rule);
  font-size:19px; font-weight:600; color:var(--fg); letter-spacing:0; line-height:1.5;
}
.doc h3{margin:2.1rem 0 .5rem; font-size:15px; font-weight:600; color:var(--cy);
        letter-spacing:.02em}
.doc p,.doc li{color:var(--fg-2); font-size:15.5px}
.doc strong{color:var(--fg); font-weight:600}
.doc ul{padding-inline-start:1.2rem}
.doc li{margin:.3rem 0}
.doc table{width:100%; border-collapse:collapse; margin:1.3rem 0; font-size:14.5px}
.doc th,.doc td{padding:.62rem .8rem; border-bottom:1px solid var(--rule); text-align:start}
.doc th{color:var(--fg-3); font:600 10.5px/1 "Inter",system-ui,sans-serif;
        letter-spacing:.2em; text-transform:uppercase}
.doc td{color:var(--fg-2)}
.doc .note{margin-top:2.8rem; padding-top:1.7rem; border-top:1px solid var(--rule);
           color:var(--fg-3); font-size:13.5px; font-style:italic}

.langbar{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 2.6rem}
.langbar a{
  padding:.34rem .78rem; border:1px solid var(--rule); border-radius:999px;
  font:500 12.5px/1.5 "Inter",system-ui,sans-serif; color:var(--fg-2);
}
.langbar a:hover{border-color:var(--cy); color:var(--cy); text-decoration:none}
.langbar a[aria-current]{background:var(--cy); border-color:var(--cy); color:#04121C; font-weight:600}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
@media (max-width:820px){
  nav.top .brand i{display:none}
  /* Four Japanese labels will not sit on one line beside the wordmark; the two
     that matter for a first visit stay, and the legal pages are reachable from
     every footer and from the closing call. */
  nav.top .links a[data-secondary]{display:none}
}
@media (max-width:640px){
  :root{--shell:calc(100% - 2.2rem); --narrow:calc(100% - 2.2rem)}
  nav.top .shell{height:58px}
  nav.top .links{gap:1.15rem}
  nav.top .links a{font-size:11.5px; letter-spacing:.1em}
  section.block{padding:4.4rem 0}
  .hero{padding:3rem 0 0}
  .proof{margin-top:3.4rem}
  .rows div{flex-direction:column; gap:.35rem; padding:.95rem .2rem}
  .rows dt{flex:none}
}